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

chanzuckerberg · May 23, 2024 · 1c11cee · 1c11cee
1 parent 26c3870
commit 1c11cee
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';