commit 29ac786a7e03ed3c2ee3d5c865029cc262045d42 parent 4ce29761adda6582db81c378fae5a72efea38c5b Author: pstanciu <pstanciu@mozilla.com> Date: Tue, 9 Dec 2025 23:12:01 +0200 Revert "Bug 2001446 - Add stylelint rule to enforce logical properties r=frontend-codestyle-reviewers,nbarrett,home-newtab-reviewers" for causing bc failures @browser_parsable_css.js This reverts commit f38dee218c342995e77f85a29cfd18a4949632ce. Revert "Bug 2001446 - Update border-color to use logical properties r=home-newtab-reviewers,ini" This reverts commit 8350077f3d20bf4647728af5935f5b9303c0b948. Revert "Bug 2001446 - Update border-color to use Acorn design tokens r=jules,home-newtab-reviewers,ini" This reverts commit 7cc26d5bd4eeb9935a62420a63581997182c42e2. Diffstat:
24 files changed, 124 insertions(+), 124 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js @@ -391,14 +391,6 @@ module.exports = { "Avoid literal values. Use variables (e.g. var(--font-size-small)) or inherit/unset/etc.", }, ], - "csstools/use-logical": [ - "always", - { - // Bug 2003301: Do not enforce logical properties for any height/width properties - except: [/^(min-|max-)?width/i, /^(min-|max-)?height/i], - severity: "error", - }, - ], }, }, { diff --git a/browser/extensions/newtab/content-src/components/Card/_Card.scss b/browser/extensions/newtab/content-src/components/Card/_Card.scss @@ -90,7 +90,7 @@ position: relative; &::after { - border-block-end: 1px solid var(--newtab-card-hairline-color); + border-bottom: 1px solid var(--newtab-card-hairline-color); inset-block-end: 0; content: ''; position: absolute; @@ -293,7 +293,7 @@ &::after { border: 1px solid var(--newtab-card-hairline-color); - border-block-end: 0; + border-bottom: 0; border-radius: var(--border-radius-medium); content: ''; position: absolute; diff --git a/browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss b/browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss @@ -60,7 +60,7 @@ .modal { background: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color); + border: $border-secondary; border-radius: var(--border-radius-small); z-index: 11002; } diff --git a/browser/extensions/newtab/content-src/components/ContextMenu/_ContextMenu.scss b/browser/extensions/newtab/content-src/components/ContextMenu/_ContextMenu.scss @@ -24,7 +24,7 @@ width: 100%; &.separator { - border-block-end: 1px solid var(--border-color); + border-bottom: $border-secondary; margin: var(--space-xsmall) 0; } diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss @@ -353,7 +353,7 @@ } .divider { - border-block-start: 1px var(--border-color) solid; + border-top: 1px var(--newtab-border-color) solid; margin: 0 calc(var(--space-large) * -1); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.scss @@ -32,6 +32,7 @@ } .discoverystream-admin { + $border-color: var(--newtab-border-color); $monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace; @@ -81,7 +82,7 @@ &.minimal-table { border-collapse: collapse; - border: 1px solid var(--border-color); + border: 1px solid $border-color; td { padding: var(--space-small); @@ -119,13 +120,13 @@ .message-item { &:first-child td { - border-block-start: 1px solid var(--border-color); + border-top: 1px solid $border-color; } td { vertical-align: top; padding: var(--space-small); - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid $border-color; &.min { width: 1%; @@ -141,11 +142,11 @@ } &:first-child { - border-inline-start: 1px solid var(--border-color); + border-inline-start: 1px solid $border-color; } &:last-child { - border-inline-end: 1px solid var(--border-color); + border-inline-end: 1px solid $border-color; } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -109,7 +109,7 @@ .ds-image.img { width: 100%; height: 100%; - padding-block-start: 0; + padding-top: 0; min-width: 100%; } @@ -321,7 +321,7 @@ } .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } } } @@ -422,7 +422,7 @@ } .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss @@ -584,8 +584,8 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); @include newtab-card-style; .img-wrapper .ds-image img { - border-end-start-radius: 0; - border-end-end-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } &:hover .img-wrapper .ds-image img { @@ -612,7 +612,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%); .card-stp-button-position-wrapper { z-index: 10; - inset-block-end: 0; + bottom: 0; position: absolute; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss @@ -1,5 +1,5 @@ .section-empty-state { - border: 1px solid var(--border-color); + border: $border-secondary; border-radius: var(--border-radius-small); display: flex; height: $card-height-compact; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss @@ -127,7 +127,7 @@ grid-template: repeat(8, 1fr) / repeat(1, 1fr); li { - border-block-start: 1px solid var(--border-color); + border-top: $border-primary; line-height: 24px; font-size: var(--font-size-small); @@ -149,7 +149,7 @@ } &:nth-last-child(1) { - border-block-end: 1px solid var(--border-color); + border-bottom: $border-primary; } } @@ -158,7 +158,7 @@ li { &:nth-child(3) { - border-block-end: 1px solid var(--border-color); + border-bottom: $border-primary; } } } @@ -169,11 +169,11 @@ li { &:nth-child(odd) { - border-block-end: 0; + border-bottom: 0; } &:nth-child(even) { - border-block-end: 1px solid var(--border-color); + border-bottom: $border-primary; } } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/PromoCard/_PromoCard.scss @@ -35,7 +35,7 @@ .promo-card-dismiss-button { position: absolute; - inset-block-start: var(--space-small); + top: var(--space-small); inset-inline-end: var(--space-small); margin: 0; } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ReportContent/ReportContent.scss @@ -3,7 +3,7 @@ height: 230px; box-shadow: var(--box-shadow-level-4); border-radius: var(--border-radius-medium); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); /* stylelint-disable-next-line stylelint-plugin-mozilla/use-background-color-tokens */ background-color: var(--newtab-background-color-secondary); diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicsWidget/_TopicsWidget.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicsWidget/_TopicsWidget.scss @@ -10,9 +10,7 @@ } hr { - // Bug 2001446: We are incorrectly using a border color token as the background color, but the - // intent of this element is to appear a 1px solid border line. - background-color: var(--border-color-deemphasized); + background-color: color-mix(in srgb, var(--newtab-border-color) 52%, transparent); height: 1px; border: 0; margin: var(--space-small) 0 0; @@ -37,7 +35,7 @@ text-decoration: none; padding: var(--space-small) var(--space-medium); background: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color-deemphasized); + border: 1px solid color-mix(in srgb, var(--newtab-border-color) 52%, transparent); color: var(--newtab-text-primary-color); border-radius: var(--border-radius-medium); diff --git a/browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss b/browser/extensions/newtab/content-src/components/ModalOverlay/_ModalOverlay.scss @@ -51,7 +51,7 @@ $modal-scrollbar-z-index: 1100; h2 { color: var(--newtab-text-primary-color); text-align: center; - margin-block-start: var(--space-xxlarge); + margin-block-start: var(--space-xxlarge);; font-size: var(--font-size-xxlarge); @media(width <= 960px) { @@ -65,7 +65,7 @@ $modal-scrollbar-z-index: 1100; } .footer { - border-block-start: 1px solid var(--border-color); + border-top: $border-secondary; border-radius: var(--border-radius-small); height: 70px; width: 100%; diff --git a/browser/extensions/newtab/content-src/components/Search/_Search.scss b/browser/extensions/newtab/content-src/components/Search/_Search.scss @@ -295,7 +295,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); } .fake-focus:not(.search-disabled) & { - border: 1px solid var(--border-color-interactive); + border: $input-border-active; box-shadow: var(--newtab-textbox-focus-boxshadow); .fake-caret { @@ -362,7 +362,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); $search-icon-padding: 16px; $search-header-bar-height: 95px; - border-block-end: solid 1px var(--border-color); + border-bottom: solid 1px var(--newtab-border-color); padding: var(--space-xlarge) 0; background-color: var(--newtab-overlay-color); min-height: $search-header-bar-height; @@ -427,7 +427,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); .contentSearchHeader, .contentSearchSettingsButton { - border-color: var(--border-color); + border-color: var(--newtab-border-color); } .contentSearchSuggestionsList { @@ -436,7 +436,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); } .contentSearchOneOffsTable { - border-block-start: solid 1px var(--border-color); + border-top: solid 1px var(--newtab-border-color); background-color: var(--newtab-background-color); } @@ -464,7 +464,7 @@ $glyph-forward: url('chrome://browser/skin/forward.svg'); $border-offset: 18%; background-image: none; - border-image: linear-gradient(transparent $border-offset, var(--border-color) $border-offset, var(--border-color) 100% - $border-offset, transparent 100% - $border-offset) 1; + border-image: linear-gradient(transparent $border-offset, var(--newtab-border-color) $border-offset, var(--newtab-border-color) 100% - $border-offset, transparent 100% - $border-offset) 1; border-inline-end: 1px solid; position: relative; diff --git a/browser/extensions/newtab/content-src/components/Sections/_Sections.scss b/browser/extensions/newtab/content-src/components/Sections/_Sections.scss @@ -31,7 +31,7 @@ } .section-empty-state { - border: 1px solid var(--border-color); + border: $border-secondary; border-radius: var(--border-radius-small); display: flex; height: $card-height; diff --git a/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss b/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss @@ -446,7 +446,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; .edit-topsites-wrapper { .top-site-inner > .top-site-button > .tile { - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); } .modal { @@ -541,7 +541,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; &:not(:placeholder-shown) { direction: ltr; - text-align: end; + text-align: right; } } } @@ -593,7 +593,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; input { &[type='text'] { background-color: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color-interactive); + border: $input-border; margin: var(--space-small) 0; padding: 0 var(--space-small); height: 32px; @@ -601,7 +601,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; font-size: inherit; &[disabled] { - border: 1px solid var(--border-color-interactive-disabled); + border: $input-border; box-shadow: none; opacity: 0.4; } @@ -611,7 +611,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; .invalid { input { &[type='text'] { - border: 1px solid var(--outline-color-error); + border: $input-error-border; box-shadow: $input-error-boxshadow; } } @@ -689,7 +689,7 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width; [type='checkbox']:not(:checked) + label::before, [type='checkbox']:checked + label::before { background: var(--newtab-background-color); - border: 1px solid var(--border-color); + border: $input-border; border-radius: var(--border-radius-small); content: ''; height: 21px; diff --git a/browser/extensions/newtab/content-src/components/Weather/_Weather.scss b/browser/extensions/newtab/content-src/components/Weather/_Weather.scss @@ -303,8 +303,8 @@ outline: var(--focus-outline); &::after { - border-block-end: var(--focus-outline); - border-inline-end: var(--focus-outline); + border-bottom: var(--focus-outline); + border-right: var(--focus-outline); } } } @@ -408,7 +408,7 @@ dialog { border-end-end-radius: 0; border-end-start-radius: var(--border-radius-medium); text-decoration: none; - color: var(--text-color); + color: var(--text-color);; min-width: 130px; max-width: 190px; text-overflow: ellipsis; @@ -747,7 +747,7 @@ dialog { border-radius: var(--border-radius-medium); background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); padding: var(--space-small) var(--space-xxlarge); - border: 1px solid var(--border-color); + border: $border-primary; &:focus-visible { outline: var(--focus-outline); diff --git a/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss b/browser/extensions/newtab/content-src/components/Widgets/Lists/_Lists.scss @@ -23,8 +23,8 @@ .confetti-canvas { position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + top: 0; + left: 0; width: 100%; height: 100%; pointer-events: none; diff --git a/browser/extensions/newtab/content-src/styles/_mixins.scss b/browser/extensions/newtab/content-src/styles/_mixins.scss @@ -28,20 +28,20 @@ @content; @include dark-theme-only { - border-block-start: 1px solid $grey-60; + border-top: 1px solid $grey-60; } - border-block-start: 1px solid $grey-30; + border-top: 1px solid $grey-30; } @mixin ds-border-bottom { @content; @include dark-theme-only { - border-block-end: 1px solid $grey-60; + border-bottom: 1px solid $grey-60; } - border-block-end: 1px solid $grey-30; + border-bottom: 1px solid $grey-30; } @mixin ds-fade-in($halo-color: $blue-50-30) { diff --git a/browser/extensions/newtab/content-src/styles/_theme.scss b/browser/extensions/newtab/content-src/styles/_theme.scss @@ -8,7 +8,12 @@ } // scss variables related to the theme. +$border-primary: 1px solid var(--newtab-border-color); +$border-secondary: 1px solid var(--newtab-border-color); $inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +$input-border: 1px solid var(--newtab-border-color); +$input-border-active: 1px solid var(--newtab-textbox-focus-color); +$input-error-border: 1px solid var(--newtab-status-error); $input-error-boxshadow: #{textbox-shadow(var(--newtab-status-error))}; $shadow-primary: 0 0 0 5px var(--newtab-element-secondary-color); $shadow-secondary: 0 1px 4px 0 $grey-90-20; @@ -75,6 +80,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15; // --newtab-primary-action-background-dimmed is used for soft focus borders. --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$black}); --newtab-wordmark-color: light-dark(#{$newtab-wordmark-default-color}, #{$newtab-wordmark-darktheme-color}); --newtab-status-success: #{$status-green}; --newtab-status-error: var(--color-red-60); @@ -117,6 +123,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15; --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$white}); --newtab-primary-element-text-color: #{$primary-text-color-dark}; --newtab-status-success: #{$status-dark-green}; } diff --git a/browser/extensions/newtab/content-src/styles/_variables.scss b/browser/extensions/newtab/content-src/styles/_variables.scss @@ -195,7 +195,7 @@ $customize-menu-border-tint: 1px solid rgba(0, 0, 0, 15%); background-image: url('chrome://global/skin/icons/more.svg'); background-position: 50.1%; border: 0; - outline: 1px solid var(--border-color); + outline: $border-primary; outline-width: 0; border-radius: var(--border-radius-circle); cursor: pointer; diff --git a/browser/extensions/newtab/content-src/styles/activity-stream.scss b/browser/extensions/newtab/content-src/styles/activity-stream.scss @@ -51,7 +51,7 @@ h2 { } .inner-border { - border: 1px solid var(--border-color); + border: $border-secondary; border-radius: var(--border-radius-small); height: 100%; inset-inline-start: 0; @@ -83,7 +83,7 @@ h2 { } .actions { - border-block-start: 1px solid var(--border-color); + border-top: $border-secondary; display: flex; flex-direction: row; flex-wrap: wrap; @@ -96,7 +96,7 @@ h2 { .button, .actions button { background-color: var(--newtab-button-secondary-color); - border: 1px solid var(--border-color); + border: $border-primary; border-radius: var(--border-radius-small); color: inherit; cursor: pointer; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -69,6 +69,7 @@ input { --newtab-primary-element-text-color: var(--color-white); --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000); --newtab-wordmark-color: light-dark(#20123A, #fbfbfe); --newtab-status-success: var(--color-green-50); --newtab-status-error: var(--color-red-60); @@ -99,6 +100,7 @@ input { --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent); --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, var(--color-white)); --newtab-primary-element-text-color: #2b2a33; --newtab-status-success: var(--color-green-30); } @@ -353,7 +355,7 @@ h2 { } .inner-border { - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); height: 100%; inset-inline-start: 0; @@ -382,7 +384,7 @@ h2 { } .actions { - border-block-start: 1px solid var(--border-color); + border-top: 1px solid var(--newtab-border-color); display: flex; flex-direction: row; flex-wrap: wrap; @@ -394,7 +396,7 @@ h2 { .button, .actions button { background-color: var(--newtab-button-secondary-color); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); color: inherit; cursor: pointer; @@ -1085,7 +1087,7 @@ main section { } .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); } .edit-topsites-wrapper .modal { box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); @@ -1163,7 +1165,7 @@ main section { } .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { direction: ltr; - text-align: end; + text-align: right; } .topsite-form .form-wrapper .enable-custom-image-input { display: inline-block; @@ -1206,7 +1208,7 @@ main section { } .topsite-form .form-wrapper input[type=text] { background-color: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color-interactive); + border: 1px solid var(--newtab-border-color); margin: var(--space-small) 0; padding: 0 var(--space-small); height: 32px; @@ -1214,12 +1216,12 @@ main section { font-size: inherit; } .topsite-form .form-wrapper input[type=text][disabled] { - border: 1px solid var(--border-color-interactive-disabled); + border: 1px solid var(--newtab-border-color); box-shadow: none; opacity: 0.4; } .topsite-form .form-wrapper .invalid input[type=text] { - border: 1px solid var(--outline-color-error); + border: 1px solid var(--newtab-status-error); box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3); } .topsite-form .form-wrapper .error-tooltip { @@ -1279,7 +1281,7 @@ main section { .topsite-form [type=checkbox]:not(:checked) + label::before, .topsite-form [type=checkbox]:checked + label::before { background: var(--newtab-background-color); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); content: ""; height: 21px; @@ -1409,7 +1411,7 @@ main section { } } .sections-list .section-empty-state { - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); display: flex; height: 266px; @@ -1714,7 +1716,7 @@ main section { background-position-x: right 16px; } .fake-focus:not(.search-disabled) .search-handoff-button { - border: 1px solid var(--border-color-interactive); + border: 1px solid var(--newtab-textbox-focus-color); box-shadow: var(--newtab-textbox-focus-boxshadow); } .fake-focus:not(.search-disabled) .search-handoff-button .fake-caret { @@ -1765,7 +1767,7 @@ main section { @media (height > 700px) { .activity-stream .fixed-search .search-wrapper { - border-block-end: solid 1px var(--border-color); + border-bottom: solid 1px var(--newtab-border-color); padding: var(--space-xlarge) 0; background-color: var(--newtab-overlay-color); min-height: 95px; @@ -1816,14 +1818,14 @@ main section { } .contentSearchSuggestionTable .contentSearchHeader, .contentSearchSuggestionTable .contentSearchSettingsButton { - border-color: var(--border-color); + border-color: var(--newtab-border-color); } .contentSearchSuggestionTable .contentSearchSuggestionsList { color: var(--newtab-text-primary-color); border: 0; } .contentSearchSuggestionTable .contentSearchOneOffsTable { - border-block-start: solid 1px var(--border-color); + border-top: solid 1px var(--newtab-border-color); background-color: var(--newtab-background-color); } .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText { @@ -1841,7 +1843,7 @@ main section { } .contentSearchSuggestionTable .contentSearchOneOffItem { background-image: none; - border-image: linear-gradient(transparent 18%, var(--border-color) 18%, var(--border-color) 82%, transparent 82%) 1; + border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1; border-inline-end: 1px solid; position: relative; } @@ -1885,7 +1887,7 @@ main section { width: 100%; } .context-menu > ul > li.separator { - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid var(--newtab-border-color); margin: var(--space-xsmall) 0; } .context-menu > ul > li > a, @@ -1967,7 +1969,7 @@ main section { .modal { background: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); z-index: 11002; } @@ -2256,7 +2258,7 @@ main section { color: var(--newtab-primary-action-background); } .home-section .divider { - border-block-start: 1px var(--border-color) solid; + border-top: 1px var(--newtab-border-color) solid; margin: 0 calc(var(--space-large) * -1); } .home-section .external-link { @@ -2982,8 +2984,8 @@ main section { outline: var(--focus-outline); } .weatherOptIn dialog:focus-visible::after { - border-block-end: var(--focus-outline); - border-inline-end: var(--focus-outline); + border-bottom: var(--focus-outline); + border-right: var(--focus-outline); } .weatherOptIn dialog .weatherOptInContent { display: flex; @@ -3354,7 +3356,7 @@ dialog:dir(rtl)::after { border-radius: var(--border-radius-medium); background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); padding: var(--space-small) var(--space-xxlarge); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); } .location-input-wrapper input:focus-visible { outline: var(--focus-outline); @@ -3521,7 +3523,7 @@ dialog:dir(rtl)::after { background-image: url("chrome://global/skin/icons/more.svg"); background-position: 50.1%; border: 0; - outline: 1px solid var(--border-color); + outline: 1px solid var(--newtab-border-color); outline-width: 0; border-radius: var(--border-radius-circle); cursor: pointer; @@ -3617,7 +3619,7 @@ dialog:dir(rtl)::after { position: relative; } .card-outer .card-preview-image-outer::after { - border-block-end: 1px solid var(--newtab-card-hairline-color); + border-bottom: 1px solid var(--newtab-card-hairline-color); inset-block-end: 0; content: ""; position: absolute; @@ -3773,7 +3775,7 @@ dialog:dir(rtl)::after { } .compact-cards .card-outer .card-context::after { border: 1px solid var(--newtab-card-hairline-color); - border-block-end: 0; + border-bottom: 0; border-radius: var(--border-radius-medium); content: ""; position: absolute; @@ -3990,7 +3992,7 @@ dialog:dir(rtl)::after { } .discoverystream-admin table.minimal-table { border-collapse: collapse; - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); } .discoverystream-admin table.minimal-table td { padding: var(--space-small); @@ -4016,12 +4018,12 @@ dialog:dir(rtl)::after { overflow-y: scroll; } .discoverystream-admin .message-item:first-child td { - border-block-start: 1px solid var(--border-color); + border-top: 1px solid var(--newtab-border-color); } .discoverystream-admin .message-item td { vertical-align: top; padding: var(--space-small); - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid var(--newtab-border-color); } .discoverystream-admin .message-item td.min { width: 1%; @@ -4034,10 +4036,10 @@ dialog:dir(rtl)::after { width: 15%; } .discoverystream-admin .message-item td:first-child { - border-inline-start: 1px solid var(--border-color); + border-inline-start: 1px solid var(--newtab-border-color); } .discoverystream-admin .message-item td:last-child { - border-inline-end: 1px solid var(--border-color); + border-inline-end: 1px solid var(--newtab-border-color); } .discoverystream-admin .message-item.blocked .message-id, .discoverystream-admin .message-item.blocked .message-summary { @@ -4293,7 +4295,7 @@ dialog:dir(rtl)::after { } } .modalOverlayInner .footer { - border-block-start: 1px solid var(--border-color); + border-top: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); height: 70px; width: 100%; @@ -4482,8 +4484,8 @@ dialog:dir(rtl)::after { } .lists .confetti-canvas { position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + top: 0; + left: 0; width: 100%; height: 100%; pointer-events: none; @@ -5421,7 +5423,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-block-start: 0; + padding-top: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img { @@ -5572,7 +5574,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-1-large { grid-row: span 2; @@ -5651,7 +5653,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -5802,7 +5804,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-block-start: 0; + padding-top: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img { @@ -5953,7 +5955,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-2-large { grid-row: span 2; @@ -6032,7 +6034,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6192,7 +6194,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-block-start: 0; + padding-top: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img { @@ -6343,7 +6345,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-3-large { grid-row: span 2; @@ -6422,7 +6424,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6581,7 +6583,7 @@ dialog:dir(rtl)::after { .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { width: 100%; height: 100%; - padding-block-start: 0; + padding-top: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img { @@ -6732,7 +6734,7 @@ dialog:dir(rtl)::after { -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-4-large { grid-row: span 2; @@ -6811,7 +6813,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { - margin-block-start: auto; + margin-top: auto; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; @@ -6889,11 +6891,11 @@ dialog:dir(rtl)::after { .ds-hr { border: 0; - border-block-start: 1px solid #D7D7DB; + border-top: 1px solid #D7D7DB; height: 0; } [lwt-newtab-brighttext] .ds-hr { - border-block-start: 1px solid #4A4A4F; + border-top: 1px solid #4A4A4F; } /* stylelint-disable max-nesting-depth */ @@ -7007,7 +7009,7 @@ dialog:dir(rtl)::after { grid-template: repeat(8, 1fr)/repeat(1, 1fr); } .ds-navigation.ds-navigation-new-topics ul li { - border-block-start: 1px solid var(--border-color); + border-top: 1px solid var(--newtab-border-color); line-height: 24px; font-size: var(--font-size-small); /** @@ -7025,14 +7027,14 @@ dialog:dir(rtl)::after { display: none; } .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) { - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid var(--newtab-border-color); } @media (min-width: 610px) { .ds-navigation.ds-navigation-new-topics ul { grid-template: repeat(3, 1fr)/repeat(2, 1fr); } .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) { - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid var(--newtab-border-color); } } @media (min-width: 866px) { @@ -7040,10 +7042,10 @@ dialog:dir(rtl)::after { grid-template: repeat(2, 1fr)/repeat(3, 1fr); } .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) { - border-block-end: 0; + border-bottom: 0; } .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { - border-block-end: 1px solid var(--border-color); + border-bottom: 1px solid var(--newtab-border-color); } } @media (min-width: 1122px) { @@ -7162,7 +7164,7 @@ dialog:dir(rtl)::after { background-image: url("chrome://global/skin/icons/more.svg"); background-position: 50.1%; border: 0; - outline: 1px solid var(--border-color); + outline: 1px solid var(--newtab-border-color); outline-width: 0; border-radius: var(--border-radius-circle); cursor: pointer; @@ -7681,8 +7683,8 @@ dialog:dir(rtl)::after { } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img { - border-end-start-radius: 0; - border-end-end-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img { @@ -7708,7 +7710,7 @@ dialog:dir(rtl)::after { .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper { z-index: 10; - inset-block-end: 0; + bottom: 0; position: absolute; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container, @@ -7952,7 +7954,7 @@ dialog:dir(rtl)::after { } .section-empty-state { - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); border-radius: var(--border-radius-small); display: flex; height: 160px; @@ -8171,7 +8173,7 @@ dialog:dir(rtl)::after { font-size: var(--font-size-large); } .ds-topics-widget hr { - background-color: var(--border-color-deemphasized); + background-color: color-mix(in srgb, var(--newtab-border-color) 52%, transparent); height: 1px; border: 0; margin: var(--space-small) 0 0; @@ -8195,7 +8197,7 @@ dialog:dir(rtl)::after { text-decoration: none; padding: var(--space-small) var(--space-medium); background: var(--newtab-background-color-secondary); - border: 1px solid var(--border-color-deemphasized); + border: 1px solid color-mix(in srgb, var(--newtab-border-color) 52%, transparent); color: var(--newtab-text-primary-color); border-radius: var(--border-radius-medium); } @@ -8957,7 +8959,7 @@ dialog:dir(rtl)::after { } .promo-card-wrapper .promo-card-dismiss-button { position: absolute; - inset-block-start: var(--space-small); + top: var(--space-small); inset-inline-end: var(--space-small); margin: 0; } @@ -9079,7 +9081,7 @@ dialog:dir(rtl)::after { height: 230px; box-shadow: var(--box-shadow-level-4); border-radius: var(--border-radius-medium); - border: 1px solid var(--border-color); + border: 1px solid var(--newtab-border-color); /* stylelint-disable-next-line stylelint-plugin-mozilla/use-background-color-tokens */ background-color: var(--newtab-background-color-secondary); }