feat(tokens): add border-utility-inteactive-secondary tokens (#1959)

chanzuckerberg · May 23, 2024 · 72daa0b · 72daa0b
1 parent 26c3870
commit 72daa0b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -279,6 +279,9 @@
   "eds-theme-color-border-utility-interactive": "#0F2163",
   "eds-theme-color-border-utility-interactive-hover": "#0A164C",
   "eds-theme-color-border-utility-interactive-active": "#060E30",
+  "eds-theme-color-border-utility-interactive-secondary": "#3165D2",
+  "eds-theme-color-border-utility-interactive-secondary-hover": "#254EAC",
+  "eds-theme-color-border-utility-interactive-secondary-active": "#1B3889",
   "eds-theme-color-border-utility-critical": "#A51115",
   "eds-theme-color-border-utility-critical-hover": "#7D0A16",
   "eds-theme-color-border-utility-critical-active": "#660517",

diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
@@ -633,6 +633,17 @@
               },
               "active": {
                 "value": "{eds.color.blue.950}"
+              },
+              "secondary": {
+                "@": {
+                  "value": "{eds.color.blue.550}"
+                },
+                "hover": {
+                  "value": "{eds.color.blue.650}"
+                },
+                "active": {
+                  "value": "{eds.color.blue.750}"
+                }
               }
             },
             "critical": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -648,6 +648,9 @@
   --eds-theme-color-border-utility-critical-active: var(--eds-color-red-800);
   --eds-theme-color-border-utility-critical-hover: var(--eds-color-red-750);
   --eds-theme-color-border-utility-critical: var(--eds-color-red-650);
+  --eds-theme-color-border-utility-interactive-secondary-active: var(--eds-color-blue-750);
+  --eds-theme-color-border-utility-interactive-secondary-hover: var(--eds-color-blue-650);
+  --eds-theme-color-border-utility-interactive-secondary: var(--eds-color-blue-550);
   --eds-theme-color-border-utility-interactive-active: var(--eds-color-blue-950);
   --eds-theme-color-border-utility-interactive-hover: var(--eds-color-blue-900);
   --eds-theme-color-border-utility-interactive: var(--eds-color-blue-850);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -566,7 +566,12 @@
             "interactive": {
               "@": "#0F2163",
               "hover": "#0A164C",
-              "active": "#060E30"
+              "active": "#060E30",
+              "secondary": {
+                "@": "#3165D2",
+                "hover": "#254EAC",
+                "active": "#1B3889"
+              }
             },
             "critical": {
               "@": "#A51115",

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -152,6 +152,9 @@ export const EdsThemeColorBorderUtilityDefaultHighEmphasisActive = '#060E30';
 export const EdsThemeColorBorderUtilityInteractive = '#0F2163';
 export const EdsThemeColorBorderUtilityInteractiveHover = '#0A164C';
 export const EdsThemeColorBorderUtilityInteractiveActive = '#060E30';
+export const EdsThemeColorBorderUtilityInteractiveSecondary = '#3165D2';
+export const EdsThemeColorBorderUtilityInteractiveSecondaryHover = '#254EAC';
+export const EdsThemeColorBorderUtilityInteractiveSecondaryActive = '#1B3889';
 export const EdsThemeColorBorderUtilityCritical = '#A51115';
 export const EdsThemeColorBorderUtilityCriticalHover = '#7D0A16';
 export const EdsThemeColorBorderUtilityCriticalActive = '#660517';