commit 0a8ddc64d403f808586f4a867a6837dcf07d4121
parent 56b39b51d2f92c37c7c892f7c76282c7aa4b5f83
Author: dwhisman <dwhisman@mozilla.com>
Date: Tue, 6 Jan 2026 19:46:08 +0000
Bug 1993105 - Replace --in-content-item variables with new tokens r=desktop-theme-reviewers,jules
Differential Revision: https://phabricator.services.mozilla.com/D274790
Diffstat:
13 files changed, 91 insertions(+), 23 deletions(-)
diff --git a/browser/components/enterprisepolicies/content/aboutPolicies.css b/browser/components/enterprisepolicies/content/aboutPolicies.css
@@ -41,8 +41,8 @@ tbody tr {
}
tbody tr:hover {
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
}
th,
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
@@ -496,8 +496,10 @@ a[is="moz-support-link"]:not(.sidebar-footer-link, [hidden]) {
@media (forced-colors) {
#engineList > treechildren::-moz-tree-image(hover),
#blocklistsTree > treechildren::-moz-tree-image(hover) {
- fill: var(--in-content-item-hover-text);
- stroke: var(--in-content-item-hover);
+ fill: var(--text-color-list-item-hover);
+ /* fill allows icon and text colors, but we have no such rules for stroke */
+ /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
+ stroke: var(--background-color-list-item-hover);
}
}
diff --git a/toolkit/components/aboutconfig/content/aboutconfig.css b/toolkit/components/aboutconfig/content/aboutconfig.css
@@ -115,8 +115,8 @@
}
#prefs > tr:hover {
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
}
#prefs > tr.has-user-value {
diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css
@@ -170,8 +170,8 @@ tr[selected] > td {
color: var(--text-color-accent-primary-selected);
}
#process-tbody > tr:hover {
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
}
/* Tab names and thread summary text can extend into memory and CPU columns. */
diff --git a/toolkit/components/certviewer/content/components/info-item.css b/toolkit/components/certviewer/content/components/info-item.css
@@ -38,8 +38,8 @@ label {
.long-hex:hover {
border-block-color: var(--border-color);
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
}
.hex-open {
diff --git a/toolkit/components/certviewer/content/components/list-item.css b/toolkit/components/certviewer/content/components/list-item.css
@@ -11,8 +11,8 @@
}
:host(:hover) {
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
border-inline-color: var(--border-color);
cursor: pointer;
}
diff --git a/toolkit/themes/shared/design-system/dist/tokens-brand.css b/toolkit/themes/shared/design-system/dist/tokens-brand.css
@@ -16,6 +16,7 @@
/** Background Color **/
--background-color-box-info: light-dark(var(--color-gray-20), var(--color-gray-80));
--background-color-canvas: light-dark(var(--color-white), var(--color-gray-90));
+ --background-color-list-item-hover: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
--table-row-background-color-alternate: light-dark(#f0f0f4, var(--color-gray-80)); /* TODO Bug 1821203 - Gray use needs to be consolidated */
/** Border **/
diff --git a/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json b/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
@@ -39,6 +39,11 @@
"dark": "{Colors$color/yellow/90}",
"forcedColors": "{Theme$background/color/canvas}"
},
+ "background/color/list/item/hover": {
+ "light": "color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
+ "dark": "color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
+ "forcedColors": "{HCM Theme$SelectedItem}"
+ },
"border/color": {
"light": "{Colors$color/gray/50}",
"dark": "{Colors$color/gray/70}",
@@ -543,5 +548,10 @@
"light": "{Colors$color/white}",
"dark": "{Colors$color/gray/100}",
"forcedColors": "{HCM Theme$SelectedItemText}"
+ },
+ "text/color/list/item/hover": {
+ "light": "{Theme$text/color}",
+ "dark": "{Theme$text/color}",
+ "forcedColors": "{HCM Theme$SelectedItemText}"
}
}
diff --git a/toolkit/themes/shared/design-system/dist/tokens-platform.css b/toolkit/themes/shared/design-system/dist/tokens-platform.css
@@ -16,6 +16,7 @@
/** Background Color **/
--background-color-box-info: color-mix(in srgb, currentColor 20%, transparent);
--background-color-canvas: Canvas;
+ --background-color-list-item-hover: color-mix(in srgb, currentColor 20%, transparent);
--table-row-background-color-alternate: light-dark(
rgba(0, 0, 0, 0.05),
rgba(255, 255, 255, 0.05)
diff --git a/toolkit/themes/shared/design-system/dist/tokens-shared.css b/toolkit/themes/shared/design-system/dist/tokens-shared.css
@@ -327,6 +327,7 @@
--text-color-disabled: color-mix(in srgb, currentColor 40%, transparent);
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
--text-color-error: light-dark(var(--color-red-70), var(--color-red-20));
+ --text-color-list-item-hover: var(--text-color);
}
}
@@ -345,6 +346,7 @@
--background-color-canvas: Canvas;
--background-color-critical: var(--background-color-canvas);
--background-color-information: var(--background-color-canvas);
+ --background-color-list-item-hover: SelectedItem;
--background-color-success: var(--background-color-canvas);
--background-color-warning: var(--background-color-canvas);
@@ -374,6 +376,7 @@
--text-color: CanvasText;
--text-color-deemphasized: inherit;
--text-color-error: inherit;
+ --text-color-list-item-hover: SelectedItemText;
}
}
}
diff --git a/toolkit/themes/shared/design-system/dist/tokens-table.mjs b/toolkit/themes/shared/design-system/dist/tokens-table.mjs
@@ -287,6 +287,19 @@ export const tokensTable = {
},
{
value: {
+ brand: {
+ default:
+ "color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
+ },
+ platform: {
+ default: "color-mix(in srgb, currentColor 20%, transparent)",
+ },
+ prefersContrast: "SelectedItem",
+ },
+ name: "--background-color-list-item-hover",
+ },
+ {
+ value: {
forcedColors: "ButtonFace",
brand: { default: "color-mix(in srgb, currentColor 7%, transparent)" },
platform: {
@@ -1027,6 +1040,13 @@ export const tokensTable = {
},
name: "--text-color-accent-primary-selected",
},
+ {
+ value: {
+ default: "var(--text-color)",
+ prefersContrast: "SelectedItemText",
+ },
+ name: "--text-color-list-item-hover",
+ },
],
outline: [
{
@@ -1184,6 +1204,14 @@ export const variableLookupTable = {
default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",
},
"background-color-overlay": "var(--color-black-alpha-50)",
+ "background-color-list-item-hover": {
+ brand: {
+ default:
+ "color-mix(in srgb, var(--color-accent-primary) 20%, transparent)",
+ },
+ platform: { default: "color-mix(in srgb, currentColor 20%, transparent)" },
+ prefersContrast: "SelectedItem",
+ },
"border-color": {
brand: {
light: "var(--color-gray-50)",
@@ -1857,4 +1885,8 @@ export const variableLookupTable = {
},
platform: { default: "SelectedItemText" },
},
+ "text-color-list-item-hover": {
+ default: "var(--text-color)",
+ prefersContrast: "SelectedItemText",
+ },
};
diff --git a/toolkit/themes/shared/design-system/src/design-tokens.json b/toolkit/themes/shared/design-system/src/design-tokens.json
@@ -80,6 +80,21 @@
},
"overlay": {
"value": "{color.black.alpha.50}"
+ },
+ "list": {
+ "item": {
+ "hover": {
+ "value": {
+ "brand": {
+ "default": "color-mix(in srgb, var(--color-accent-primary) 20%, transparent)"
+ },
+ "platform": {
+ "default": "color-mix(in srgb, currentColor 20%, transparent)"
+ },
+ "prefersContrast": "SelectedItem"
+ }
+ }
+ }
}
}
},
@@ -1594,6 +1609,16 @@
}
}
}
+ },
+ "list": {
+ "item": {
+ "hover": {
+ "value": {
+ "default": "{text.color.@base}",
+ "prefersContrast": "SelectedItemText"
+ }
+ }
+ }
}
}
}
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
@@ -17,9 +17,6 @@
* browser.display.background_color.dark
*/
- --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-border-invalid: light-dark(var(--red-50), rgb(255, 132, 139));
--in-content-table-background: light-dark(#f8f8fa, rgb(35, 34, 43));
@@ -68,9 +65,6 @@
@media (forced-colors) {
:host(.anonymous-content-host),
:root {
- --in-content-item-hover: SelectedItem;
- --in-content-item-hover-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
* change... */
@@ -396,8 +390,8 @@ xul|menulist > xul|menupopup xul|menuitem {
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
- color: var(--in-content-item-hover-text);
- background-color: var(--in-content-item-hover);
+ color: var(--text-color-list-item-hover);
+ background-color: var(--background-color-list-item-hover);
}
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
@@ -784,8 +778,8 @@ xul|treechildren::-moz-tree-row(multicol, odd) {
html|select[size][multiple] > html|option:hover,
xul|treechildren::-moz-tree-row(hover) {
- background-color: var(--in-content-item-hover);
- color: var(--in-content-item-hover-text);
+ background-color: var(--background-color-list-item-hover);
+ color: var(--text-color-list-item-hover);
}
xul|richlistbox > xul|richlistitem[selected],
@@ -904,7 +898,7 @@ xul|treechildren::-moz-tree-row {
xul|treechildren::-moz-tree-cell-text(hover),
xul|treechildren::-moz-tree-twisty(hover),
xul|treechildren::-moz-tree-image(hover) {
- color: var(--in-content-item-hover-text);
+ color: var(--text-color-list-item-hover);
}
xul|treechildren::-moz-tree-cell-text(selected),
