fix: use token name from design (#1629)

- eds-theme-color-border-brand-primary => eds-theme-color-border-brand-primary-default - deprecate old name, and point it to the new, better name
chanzuckerberg · May 24, 2023 · 01b2ea8 · 01b2ea8
1 parent ca9da5b
commit 01b2ea8
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 5 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -156,6 +156,7 @@
   "eds-theme-color-border-neutral-strong": "#999EA3",
   "eds-theme-color-border-neutral-strong-hover": "#878C90",
   "eds-theme-color-border-brand-primary-subtle": "#E0E0F9",
+  "eds-theme-color-border-brand-primary-default": "#C4C1F3",
   "eds-theme-color-border-brand-primary": "#C4C1F3",
   "eds-theme-color-border-brand-primary-strong": "#A6A3EE",
   "eds-theme-color-border-utility-success-subtle": "#B7E9CE",

diff --git a/.storybook/pages/WireframeDemo/GlobalStyles.module.css b/.storybook/pages/WireframeDemo/GlobalStyles.module.css
@@ -69,7 +69,7 @@
   --eds-theme-color-body-background: var(--wireframe-gray-a);
   --eds-theme-color-border-brand-primary-strong: var(--wireframe-gray-c);
   --eds-theme-color-border-brand-primary-subtle: var(--wireframe-gray-a);
-  --eds-theme-color-border-brand-primary: var(--wireframe-gray-b);
+  --eds-theme-color-border-brand-primary-default: var(--wireframe-gray-b);
   --eds-theme-color-border-disabled: var(--wireframe-gray-b);
   --eds-theme-color-border-grade-complete: var(--wireframe-gray-b);
   --eds-theme-color-border-grade-revise-default: var(--wireframe-gray-b);

diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css
@@ -84,7 +84,7 @@
   --tag-secondary-color: var(
     --eds-theme-color-background-brand-primary-default
   );
-  --tag-outline-color: var(--eds-theme-color-border-brand-primary);
+  --tag-outline-color: var(--eds-theme-color-border-brand-primary-default);
 }
 
 /**

diff --git a/src/design-tokens/tier-2-usage/colors-border.json b/src/design-tokens/tier-2-usage/colors-border.json
@@ -42,9 +42,13 @@
               "subtle": {
                 "value": "{eds.color.brand.grape.200}"
               },
-              "@": {
+              "default": {
                 "value": "{eds.color.brand.grape.300}"
               },
+              "@": {
+                "value": "{eds.theme.color.border.brand.primary.default}",
+                "comment": "This token is deprecated and will be removed in a future EDS release"
+              },
               "strong": {
                 "value": "{eds.color.brand.grape.400}"
               }

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -156,7 +156,8 @@
   --eds-theme-color-border-neutral-strong: #999EA3;
   --eds-theme-color-border-neutral-strong-hover: #878C90;
   --eds-theme-color-border-brand-primary-subtle: #E0E0F9;
-  --eds-theme-color-border-brand-primary: #C4C1F3;
+  --eds-theme-color-border-brand-primary-default: #C4C1F3;
+  --eds-theme-color-border-brand-primary: #C4C1F3; /* This token is deprecated and will be removed in a future EDS release */
   --eds-theme-color-border-brand-primary-strong: #A6A3EE;
   --eds-theme-color-border-utility-success-subtle: #B7E9CE;
   --eds-theme-color-border-utility-success-default: #8FDCB3;

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -250,6 +250,7 @@
           "brand": {
             "primary": {
               "subtle": "#E0E0F9",
+              "default": "#C4C1F3",
               "@": "#C4C1F3",
               "strong": "#A6A3EE"
             }

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -91,7 +91,8 @@ export const EdsThemeColorBorderNeutralDefaultHover = '#999EA3';
 export const EdsThemeColorBorderNeutralStrong = '#999EA3';
 export const EdsThemeColorBorderNeutralStrongHover = '#878C90';
 export const EdsThemeColorBorderBrandPrimarySubtle = '#E0E0F9';
-export const EdsThemeColorBorderBrandPrimary = '#C4C1F3';
+export const EdsThemeColorBorderBrandPrimaryDefault = '#C4C1F3';
+export const EdsThemeColorBorderBrandPrimary = '#C4C1F3'; // This token is deprecated and will be removed in a future EDS release
 export const EdsThemeColorBorderBrandPrimaryStrong = '#A6A3EE';
 export const EdsThemeColorBorderUtilitySuccessSubtle = '#B7E9CE';
 export const EdsThemeColorBorderUtilitySuccessDefault = '#8FDCB3';