tor-browser

commit 768595ac6fdce8b6cf075990a91e911e6b0908d5
parent dc28461245bcb57dd7a86fcfcdb6ec67c5247aaf
Author: dwhisman <dwhisman@mozilla.com>
Date:   Wed, 19 Nov 2025 20:50:26 +0000

Bug 1988865 - Part 1: Add token for border-color-selected r=mtigley,desktop-theme-reviewers,credential-management-reviewers,devtools-reviewers,nchevobbe,hjones

Differential Revision: https://phabricator.services.mozilla.com/D269440

Diffstat:
M
browser/components/aboutlogins/content/components/login-list-lit-item.css
 | 
2
+-
M
toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
 | 
5
+++++
M
toolkit/themes/shared/design-system/dist/tokens-shared.css
 | 
2
++
M
toolkit/themes/shared/design-system/dist/tokens-table.mjs
 | 
11
+++++++++++
M
toolkit/themes/shared/design-system/src/design-tokens.json
 | 
6
++++++

5 files changed, 25 insertions(+), 1 deletion(-)
diff --git a/browser/components/aboutlogins/content/components/login-list-lit-item.css b/browser/components/aboutlogins/content/components/login-list-lit-item.css
@@ -27,7 +27,7 @@
 }
 
 .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/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json b/toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
@@ -79,6 +79,11 @@
     "dark": "{Theme$border/color/interactive}",
     "forcedColors": "{HCM Theme$GrayText}"
   },
+  "border/color/selected": {
+    "light": "{Theme$color/accent/primary}",
+    "dark": "{Theme$color/accent/primary}",
+    "forcedColors": "{HCM Theme$SelectedItem}"
+  },
   "button/background/color": {
     "light": "color-mix(in srgb, currentColor 7%, transparent)",
     "dark": "color-mix(in srgb, currentColor 7%, transparent)",
diff --git a/toolkit/themes/shared/design-system/dist/tokens-shared.css b/toolkit/themes/shared/design-system/dist/tokens-shared.css
@@ -24,6 +24,7 @@
     --border-color-interactive-hover: var(--border-color-interactive);
     --border-color-interactive-active: var(--border-color-interactive);
     --border-color-interactive-disabled: var(--border-color-interactive);
+    --border-color-selected: var(--color-accent-primary);
     --border-color-transparent: transparent;
     --border-radius-circle: 9999px;
     --border-radius-xsmall: 2px;
@@ -373,6 +374,7 @@
       --border-color-interactive-hover: SelectedItem;
       --border-color-interactive-active: ButtonText;
       --border-color-interactive-disabled: GrayText;
+      --border-color-selected: SelectedItem;
 
       /** Button **/
       --button-background-color: ButtonFace; /* TODO Bug 1821203 - Gray use needs to be consolidated */
diff --git a/toolkit/themes/shared/design-system/dist/tokens-table.mjs b/toolkit/themes/shared/design-system/dist/tokens-table.mjs
@@ -495,6 +495,13 @@ export const tokensTable = {
     },
     {
       value: {
+        default: "var(--color-accent-primary)",
+        forcedColors: "SelectedItem",
+      },
+      name: "--border-color-selected",
+    },
+    {
+      value: {
         default: "transparent",
         prefersContrast: "var(--button-text-color)",
         forcedColors: "var(--border-color-interactive)",
@@ -1205,6 +1212,10 @@ export const variableLookupTable = {
     default: "var(--border-color-interactive)",
     forcedColors: "GrayText",
   },
+  "border-color-selected": {
+    default: "var(--color-accent-primary)",
+    forcedColors: "SelectedItem",
+  },
   "border-radius-circle": "9999px",
   "border-radius-xsmall": "2px",
   "border-radius-small": "4px",
diff --git a/toolkit/themes/shared/design-system/src/design-tokens.json b/toolkit/themes/shared/design-system/src/design-tokens.json
@@ -154,6 +154,12 @@
             "forcedColors": "GrayText"
           }
         }
+      },
+      "selected": {
+        "value": {
+          "default": "{color.accent.primary.@base}",
+          "forcedColors": "SelectedItem"
+        }
       }
     },
     "radius": {