commit 58d47b7292c517210408daecf4a199c216efce72 parent c7cdc0660d9187b2d77345062183d77622463d60 Author: dwhisman <dwhisman@mozilla.com> Date: Mon, 17 Nov 2025 21:10:28 +0000 Bug 1988865 - Part 2: Use `--border-color-selected` instead of `--color-accent-primary` r=mtigley,extension-reviewers,desktop-theme-reviewers,credential-management-reviewers,tabbrowser-reviewers,omc-reviewers,home-newtab-reviewers,emcminn,sthompson,robwu,hjones,mconley Differential Revision: https://phabricator.services.mozilla.com/D269464 Diffstat:
15 files changed, 50 insertions(+), 18 deletions(-)
diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css @@ -132,7 +132,7 @@ ol { } .login-list-item.selected { - border-inline-start-color: var(--color-accent-primary); + border-inline-start-color: var(--border-color-selected); background-color: var(--background-color-canvas); } diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -128,7 +128,7 @@ html { --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%); --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%); --picker-border-color: var(--in-content-border-color); - --picker-checked-border-color: var(--color-accent-primary-selected); + --picker-checked-border-color: var(--border-color-selected); --picker-hover-border-color: var(--picker-border-color); --picker-focus-ring-color: var(--color-accent-primary-selected); --picker-checkbox-color: var(--color-accent-primary-selected); @@ -2002,7 +2002,7 @@ html { padding-top: 0; &:has(.selected) { - border: 1px solid var(--color-accent-primary); + border: 1px solid var(--border-color-selected); } &:hover { diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1064,7 +1064,7 @@ html { --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%); --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%); --picker-border-color: var(--in-content-border-color); - --picker-checked-border-color: var(--color-accent-primary-selected); + --picker-checked-border-color: var(--border-color-selected); --picker-hover-border-color: var(--picker-border-color); --picker-focus-ring-color: var(--color-accent-primary-selected); --picker-checkbox-color: var(--color-accent-primary-selected); @@ -2854,7 +2854,7 @@ html { padding-top: 0; } .onboardingContainer .tiles-single-select-section .select-item.backup:has(.selected) { - border: 1px solid var(--color-accent-primary); + border: 1px solid var(--border-color-selected); } .onboardingContainer .tiles-single-select-section .select-item.backup:hover { background-color: transparent; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/InterestPicker/_InterestPicker.scss @@ -77,6 +77,12 @@ &:has(input:checked) { background-color: var(--color-accent-primary); + + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ border-color: var(--color-accent-primary); color: var(--button-text-color-primary); } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/TopicSelection/_TopicSelection.scss @@ -117,11 +117,22 @@ } &:has(input:checked) { + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ border-color: var(--color-accent-primary); } &:focus-within { outline-offset: 2px; + + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ outline: 2px solid var(--color-accent-primary); } diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -8659,10 +8659,20 @@ dialog:dir(rtl)::after { background-color: var(--button-background-color-active); } .topic-list .topic-item:has(input:checked) { + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ border-color: var(--color-accent-primary); } .topic-list .topic-item:focus-within { outline-offset: 2px; + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ outline: 2px solid var(--color-accent-primary); } .topic-list .topic-item .topic-item-label { @@ -9007,6 +9017,11 @@ dialog:dir(rtl)::after { } .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) { background-color: var(--color-accent-primary); + /** + * @backward-compat { version 147 } + * + * Replace this with `--border-color-selected` once 147 hits release. + */ border-color: var(--color-accent-primary); color: var(--button-text-color-primary); } diff --git a/browser/themes/shared/identity-credential-notification.css b/browser/themes/shared/identity-credential-notification.css @@ -6,7 +6,7 @@ #credential-chooser-notification { --list-item-border: color-mix(in srgb, currentColor 10%, transparent); --list-item-checked-bgcolor: color-mix(in srgb, var(--color-accent-primary) 6%, transparent); - --list-item-checked-border: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); + --list-item-checked-border: color-mix(in srgb, var(--border-color-selected) 20%, transparent); @media (prefers-contrast) { --list-item-border: ThreeDShadow; --list-item-checked-bgcolor: transparent; diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css @@ -42,9 +42,9 @@ radio > .userContext-icon { } .radio-buttons > radio[focused="true"] { - outline-color: var(--color-accent-primary); + outline-color: var(--border-color-selected); } .radio-buttons > radio:hover:active { - outline-color: var(--color-accent-primary); + outline-color: var(--border-color-selected); } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -170,7 +170,7 @@ radio { .spotlight { background-color: color-mix(in srgb, var(--color-accent-primary) 15%, transparent); - outline: var(--color-accent-primary) 1px dotted; + outline: var(--border-color-selected) 1px dotted; animation: fade-out 0.5s ease-out 2s forwards; /* Show the border to spotlight the components in high-contrast mode. */ border: 1px solid transparent; diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css @@ -192,12 +192,12 @@ } .privacy-detailedoption.selected { - border-color: var(--color-accent-primary); + border-color: var(--border-color-selected); } @media (forced-colors) { .privacy-detailedoption.selected { - outline: 2px solid var(--color-accent-primary); + outline: 2px solid var(--border-color-selected); } } diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css @@ -2510,12 +2510,12 @@ toolbar:not(#TabsToolbar) #firefox-view-button { } #tab-group-suggestion-button { - --button-border-color-ghost: var(--color-accent-primary); + --button-border-color-ghost: var(--border-color-selected); color: var(--color-accent-primary); width: 100%; &:hover { - --button-border-color-ghost-hover: var(--color-accent-primary); + --button-border-color-ghost-hover: var(--border-color-selected); } } diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css @@ -419,7 +419,7 @@ .urlbarView-row:not([selected]) > .urlbarView-row-buttons > & { /* If the row is not selected, use the accent color instead. */ - outline-color: var(--color-accent-primary); + outline-color: var(--border-color-selected); } } @@ -504,7 +504,7 @@ &:is([selected], [primary]) { color: var(--button-text-color-primary); background-color: var(--color-accent-primary); - outline-color: var(--color-accent-primary); + outline-color: var(--border-color-selected); outline-offset: var(--focus-outline-offset); &:hover { diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -90,7 +90,7 @@ button { font-weight: var(--font-weight-semibold); @media (prefers-contrast) { - border-color: var(--color-accent-primary); + border-color: var(--border-color-selected); } &::before { diff --git a/toolkit/content/widgets/moz-visual-picker/moz-visual-picker-item.css b/toolkit/content/widgets/moz-visual-picker/moz-visual-picker-item.css @@ -29,7 +29,7 @@ &[checked] { --visual-picker-item-border-width: 3px; - border-color: var(--color-accent-primary); + border-color: var(--border-color-selected); margin: 0; } diff --git a/toolkit/mozapps/extensions/content/shortcuts.css b/toolkit/mozapps/extensions/content/shortcuts.css @@ -6,7 +6,7 @@ margin-bottom: 16px; &.focused-extension { - border: 1px solid var(--color-accent-primary); + border: 1px solid var(--border-color-selected); } .card-heading-icon {