commit b3cf2178f1a5c934069aed1decec5b262df940a3 parent f1095102374e851948863a5cb3ccaa4e714eab33 Author: dustin-jw <dwhisman@mozilla.com> Date: Mon, 20 Oct 2025 17:24:44 +0000 Bug 1979949 - Deprecate `--in-content-item-selected*` in favor of `--*color-accent-primary-selected` design tokens r=desktop-theme-reviewers,credential-management-reviewers,omc-reviewers,mstriemer,mtigley,emcminn,emilio - Changed references to `--in-content-item-selected*` to use `--*color-accent-primary-selected` counterparts - Removed definitions of `--in-content-item-selected*` variables Differential Revision: https://phabricator.services.mozilla.com/D268458 Diffstat:
8 files changed, 22 insertions(+), 28 deletions(-)
diff --git a/browser/components/aboutwelcome/content-src/aboutwelcome.scss b/browser/components/aboutwelcome/content-src/aboutwelcome.scss @@ -128,10 +128,10 @@ 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(--in-content-item-selected); + --picker-checked-border-color: var(--color-accent-primary-selected); --picker-hover-border-color: var(--picker-border-color); - --picker-focus-ring-color: var(--in-content-item-selected); - --picker-checkbox-color: var(--in-content-item-selected); + --picker-focus-ring-color: var(--color-accent-primary-selected); + --picker-checkbox-color: var(--color-accent-primary-selected); --picker-checkbox-hover-color: var(--picker-checkbox-color); --picker-backup-flair-background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); --picker-backup-flair-color: var(--color-accent-primary); diff --git a/browser/components/aboutwelcome/content/aboutwelcome.css b/browser/components/aboutwelcome/content/aboutwelcome.css @@ -1064,10 +1064,10 @@ 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(--in-content-item-selected); + --picker-checked-border-color: var(--color-accent-primary-selected); --picker-hover-border-color: var(--picker-border-color); - --picker-focus-ring-color: var(--in-content-item-selected); - --picker-checkbox-color: var(--in-content-item-selected); + --picker-focus-ring-color: var(--color-accent-primary-selected); + --picker-checkbox-color: var(--color-accent-primary-selected); --picker-checkbox-hover-color: var(--picker-checkbox-color); --picker-backup-flair-background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); --picker-backup-flair-color: var(--color-accent-primary); diff --git a/browser/extensions/formautofill/skin/shared/editDialog-shared.css b/browser/extensions/formautofill/skin/shared/editDialog-shared.css @@ -66,7 +66,7 @@ form :is(label, div) .label-text[field-populated] { } form :is(input, select, textarea):focus ~ .label-text { - color: var(--in-content-item-selected); + color: var(--color-accent-primary-selected); opacity: 1; } diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css @@ -12,7 +12,7 @@ @media (prefers-color-scheme: dark) { #contentAreaDownloadsView { - --download-progress-fill-color: var(--in-content-item-selected); + --download-progress-fill-color: var(--color-accent-primary-selected); } } diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css @@ -491,8 +491,8 @@ a[is="moz-support-link"]:not(.sidebar-footer-link, [hidden]) { #engineList > treechildren::-moz-tree-image(engineShown, checked, selected), #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) { - fill: var(--in-content-item-selected-text); - stroke: var(--in-content-item-selected); + fill: var(--text-color-accent-primary-selected); + stroke: var(--color-accent-primary-selected); } @media (forced-colors) { diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css @@ -174,8 +174,8 @@ td:not(:hover) > .profiler-icon:not(.profiler-active, :focus-visible) { } tr[selected] > td { - background-color: var(--in-content-item-selected); - color: var(--in-content-item-selected-text); + background-color: var(--color-accent-primary-selected); + color: var(--text-color-accent-primary-selected); } #process-tbody > tr:hover { background-color: var(--in-content-item-hover); diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css @@ -21,8 +21,6 @@ --in-content-item-hover: color-mix(in srgb, var(--button-background-color-primary) 20%, transparent); --in-content-item-hover-text: var(--text-color); - --in-content-item-selected: var(--button-background-color-primary); - --in-content-item-selected-text: var(--button-text-color-primary); --in-content-border-invalid: light-dark(var(--red-50), rgb(255, 132, 139)); --in-content-border-color: light-dark(#d7d7db, rgba(249, 249, 250, 0.2)); @@ -79,8 +77,6 @@ --in-content-item-hover: SelectedItem; --in-content-item-hover-text: SelectedItemText; - --in-content-item-selected: SelectedItem; - --in-content-item-selected-text: SelectedItemText; /* This is not great, but there is no suitable keyword for this. * In theory, we shouldn't be conveying invalid state just with a colour @@ -414,8 +410,8 @@ xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuacti xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { - color: var(--in-content-item-selected-text); - background-color: var(--in-content-item-selected); + color: var(--text-color-accent-primary-selected); + background-color: var(--color-accent-primary-selected); } xul|menulist > xul|menupopup > xul|menu[disabled="true"], @@ -802,8 +798,8 @@ xul|treechildren::-moz-tree-row(hover) { xul|richlistbox > xul|richlistitem[selected], xul|treechildren::-moz-tree-row(selected) { - background-color: var(--in-content-item-selected); - color: var(--in-content-item-selected-text); + background-color: var(--color-accent-primary-selected); + color: var(--text-color-accent-primary-selected); } @media not (forced-colors) { @@ -812,10 +808,10 @@ xul|treechildren::-moz-tree-row(selected) { --button-background-color: color-mix(in srgb, currentColor 15%, transparent); --button-background-color-hover: color-mix(in srgb, currentColor 30%, transparent); --button-background-color-active: color-mix(in srgb, currentColor 45%, transparent); - --button-text-color: var(--in-content-item-selected-text); - --button-text-color-hover: var(--in-content-item-selected-text); + --button-text-color: var(--text-color-accent-primary-selected); + --button-text-color-hover: var(--text-color-accent-primary-selected); --button-text-color-active: var(--button-text-color-hover); - --focus-outline-color: var(--in-content-item-selected-text); + --focus-outline-color: var(--text-color-accent-primary-selected); } } @@ -930,7 +926,7 @@ xul|treechildren::-moz-tree-image(hover) { xul|treechildren::-moz-tree-cell-text(selected), xul|treechildren::-moz-tree-twisty(selected), xul|treechildren::-moz-tree-image(selected) { - color: var(--in-content-item-selected-text); + color: var(--text-color-accent-primary-selected); } /* Message bars */ diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp @@ -802,8 +802,7 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) { color = NS_RGB(0xb1, 0xb1, 0xb1); break; case ColorID::MozCellhighlight: - case ColorID::Selecteditem: // --button-background-color-primary / - // --in-content-item-selected + case ColorID::Selecteditem: // --color-accent-primary-selected color = NS_RGB(0, 221, 255); break; case ColorID::MozSidebar: @@ -815,8 +814,7 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) { case ColorID::Threedface: case ColorID::MozCombobox: case ColorID::MozCellhighlighttext: - case ColorID::Selecteditemtext: // --button-text-color-primary / - // --in-content-item-selected-text + case ColorID::Selecteditemtext: // --text-color-accent-primary-selected color = NS_RGB(43, 42, 51); break; case ColorID::Threeddarkshadow: // Same as Threedlightshadow but with the