commit d294322fca23b73c975b89c9055a6bc78f6c2a03
parent d40333d237ccd252b168858c3ee457c79e8aaff0
Author: dustin-jw <dwhisman@mozilla.com>
Date: Fri, 17 Oct 2025 21:01:53 +0000
Bug 1994847 - Add selected accent color tokens r=desktop-theme-reviewers,emilio,mstriemer
Differential Revision: https://phabricator.services.mozilla.com/D268957
Diffstat:
6 files changed, 86 insertions(+), 0 deletions(-)
diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json
@@ -1036,6 +1036,18 @@
"default": "color-mix(in srgb, black 20%, var(--color-accent-primary))"
}
}
+ },
+ "selected": {
+ "value": {
+ "forcedColors": "SelectedItem",
+ "brand": {
+ "light": "{color.blue.60}",
+ "dark": "{color.cyan.30}"
+ },
+ "platform": {
+ "default": "SelectedItem"
+ }
+ }
}
}
}
@@ -1489,6 +1501,22 @@
"dark": "{color.red.20}",
"prefersContrast": "inherit"
}
+ },
+ "accent": {
+ "primary": {
+ "selected": {
+ "value": {
+ "forcedColors": "SelectedItemText",
+ "brand": {
+ "light": "{color.white}",
+ "dark": "{color.gray.100}"
+ },
+ "platform": {
+ "default": "SelectedItemText"
+ }
+ }
+ }
+ }
}
}
}
diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css
@@ -34,6 +34,7 @@
--color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30));
--color-accent-primary-hover: light-dark(var(--color-blue-70), var(--color-cyan-20));
--color-accent-primary-active: light-dark(var(--color-blue-80), var(--color-cyan-10));
+ --color-accent-primary-selected: light-dark(var(--color-blue-60), var(--color-cyan-30));
/** Font Size **/
--font-size-root: 15px;
@@ -55,6 +56,7 @@
/** Text **/
--text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
+ --text-color-accent-primary-selected: light-dark(var(--color-white), var(--color-gray-100));
}
}
diff --git a/toolkit/themes/shared/design-system/tokens-figma-theme.json b/toolkit/themes/shared/design-system/tokens-figma-theme.json
@@ -406,6 +406,11 @@
"dark": "{Colors$color/cyan/10}",
"forcedColors": "{Theme$color/accent/primary/hover}"
},
+ "color/accent/primary/selected": {
+ "light": "{Colors$color/blue/60}",
+ "dark": "{Colors$color/cyan/30}",
+ "forcedColors": "{HCM Theme$SelectedItem}"
+ },
"focus/outline": {
"light": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
"dark": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
@@ -528,5 +533,10 @@
"light": "{Colors$color/red/70}",
"dark": "{Colors$color/red/20}",
"forcedColors": "inherit"
+ },
+ "text/color/accent/primary/selected": {
+ "light": "{Colors$color/white}",
+ "dark": "{Colors$color/gray/100}",
+ "forcedColors": "{HCM Theme$SelectedItemText}"
}
}
diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css
@@ -37,6 +37,7 @@
--color-accent-primary: AccentColor;
--color-accent-primary-hover: color-mix(in srgb, black 10%, var(--color-accent-primary));
--color-accent-primary-active: color-mix(in srgb, black 20%, var(--color-accent-primary));
+ --color-accent-primary-selected: SelectedItem;
/** Font Size **/
--font-size-root: unset;
@@ -55,5 +56,6 @@
/** Text **/
--text-color: currentColor;
+ --text-color-accent-primary-selected: SelectedItemText;
}
}
diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css
@@ -412,6 +412,7 @@
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;
--color-accent-primary-active: var(--color-accent-primary-hover);
+ --color-accent-primary-selected: SelectedItem;
/** Focus Outline **/
--focus-outline-color: var(--text-color);
@@ -424,6 +425,7 @@
/** Text **/
--text-color-disabled: GrayText;
+ --text-color-accent-primary-selected: SelectedItemText;
}
}
}
diff --git a/toolkit/themes/shared/design-system/tokens-table.mjs b/toolkit/themes/shared/design-system/tokens-table.mjs
@@ -177,6 +177,18 @@ export const tokensTable = {
},
name: "--color-accent-primary-active",
},
+ {
+ value: {
+ forcedColors: "SelectedItem",
+ brand: {
+ light: "var(--color-blue-60)",
+ dark: "var(--color-cyan-30)",
+ default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
+ },
+ platform: { default: "SelectedItem" },
+ },
+ name: "--color-accent-primary-selected",
+ },
],
"background-color": [
{
@@ -936,6 +948,18 @@ export const tokensTable = {
},
name: "--text-color-error",
},
+ {
+ value: {
+ forcedColors: "SelectedItemText",
+ brand: {
+ light: "var(--color-white)",
+ dark: "var(--color-gray-100)",
+ default: "light-dark(var(--color-white), var(--color-gray-100))",
+ },
+ platform: { default: "SelectedItemText" },
+ },
+ name: "--text-color-accent-primary-selected",
+ },
],
outline: [
{
@@ -1567,6 +1591,15 @@ export const variableLookupTable = {
default: "color-mix(in srgb, black 20%, var(--color-accent-primary))",
},
},
+ "color-accent-primary-selected": {
+ forcedColors: "SelectedItem",
+ brand: {
+ light: "var(--color-blue-60)",
+ dark: "var(--color-cyan-30)",
+ default: "light-dark(var(--color-blue-60), var(--color-cyan-30))",
+ },
+ platform: { default: "SelectedItem" },
+ },
"focus-outline":
"var(--focus-outline-width) solid var(--focus-outline-color)",
"focus-outline-color": {
@@ -1761,4 +1794,13 @@ export const variableLookupTable = {
prefersContrast: "inherit",
default: "light-dark(var(--color-red-70), var(--color-red-20))",
},
+ "text-color-accent-primary-selected": {
+ forcedColors: "SelectedItemText",
+ brand: {
+ light: "var(--color-white)",
+ dark: "var(--color-gray-100)",
+ default: "light-dark(var(--color-white), var(--color-gray-100))",
+ },
+ platform: { default: "SelectedItemText" },
+ },
};
