fix: align token name with design (#1630)

* fix: align token name with design * refactor: readd deprecated token to prevent breaking changes
chanzuckerberg · May 24, 2023 · cfd928a · cfd928a
1 parent 01b2ea8
commit cfd928a
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 8 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -211,6 +211,7 @@
   "eds-theme-color-text-grade-revise": "#21272D",
   "eds-theme-color-text-grade-stop": "#BD0044",
   "eds-theme-color-text-disabled": "#C0C4C8",
+  "eds-theme-color-text-brand-default": "#5751D2",
   "eds-theme-color-text-brand-primary": "#5751D2",
   "eds-theme-color-transparent-black-0": "rgba(0, 0, 0, 0)",
   "eds-theme-color-transparent-black-30": "rgba(0, 0, 0, .3)",

diff --git a/.storybook/pages/WireframeDemo/GlobalStyles.module.css b/.storybook/pages/WireframeDemo/GlobalStyles.module.css
@@ -339,7 +339,7 @@
   --eds-theme-color-icon-utility-warning-hover: var(--wireframe-gray-c);
   --eds-theme-color-icon-utility-warning: var(--wireframe-gray-c);
   --eds-theme-color-modal-brand-header-background: var(--wireframe-gray-c);
-  --eds-theme-color-text-brand-primary: var(--wireframe-gray-d);
+  --eds-theme-color-text-brand-default: var(--wireframe-gray-d);
   --eds-theme-color-text-disabled: var(--wireframe-gray-b);
   --eds-theme-color-text-grade-complete: var(--wireframe-gray-d);
   --eds-theme-color-text-grade-revise: var(--wireframe-gray-e);

diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
@@ -79,7 +79,7 @@
   color: var(--eds-theme-color-text-utility-error);
 }
 .heading--brand {
-  color: var(--eds-theme-color-text-brand-primary);
+  color: var(--eds-theme-color-text-brand-default);
 }
 /* stylelint-disable-next-line eds/no-tier-1-color-variable */
 .heading--info {

diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css
@@ -80,7 +80,7 @@
 }
 
 :where(.tag--brand) {
-  --tag-primary-color: var(--eds-theme-color-text-brand-primary);
+  --tag-primary-color: var(--eds-theme-color-text-brand-default);
   --tag-secondary-color: var(
     --eds-theme-color-background-brand-primary-default
   );

diff --git a/src/components/Text/Text.module.css b/src/components/Text/Text.module.css
@@ -46,7 +46,7 @@
   color: var(--eds-theme-color-text-neutral-strong);
 }
 .text--brand {
-  color: var(--eds-theme-color-text-brand-primary);
+  color: var(--eds-theme-color-text-brand-default);
 }
 /* stylelint-disable-next-line eds/no-tier-1-color-variable */
 .text--info {

diff --git a/src/design-tokens/mixins.css b/src/design-tokens/mixins.css
@@ -167,7 +167,7 @@
   --messaging-icon-color: var(--eds-theme-color-icon-brand-primary);
 
   background: var(--eds-theme-color-background-brand-primary-default);
-  color: var(--eds-theme-color-text-brand-primary);
+  color: var(--eds-theme-color-text-brand-default);
 }
 
 @define-mixin messagingNeutral {

diff --git a/src/design-tokens/tier-2-usage/colors-text.json b/src/design-tokens/tier-2-usage/colors-text.json
@@ -41,8 +41,12 @@
             "value": "{eds.color.neutral.300}"
           },
           "brand": {
-            "primary": {
+            "default": {
               "value": "{eds.color.brand.grape.700}"
+            },
+            "primary": {
+              "value": "{eds.theme.color.text.brand.default}",
+              "comment": "deprecated"
             }
           }
         }

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -211,7 +211,8 @@
   --eds-theme-color-text-grade-revise: #21272D;
   --eds-theme-color-text-grade-stop: #BD0044;
   --eds-theme-color-text-disabled: #C0C4C8;
-  --eds-theme-color-text-brand-primary: #5751D2;
+  --eds-theme-color-text-brand-default: #5751D2;
+  --eds-theme-color-text-brand-primary: #5751D2; /* deprecated */
   --eds-theme-color-transparent-black-0: rgba(0, 0, 0, 0);
   --eds-theme-color-transparent-black-30: rgba(0, 0, 0, .3);
   --eds-theme-color-transparent-white-0: rgba(255, 255, 255, 0);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -366,6 +366,7 @@
           },
           "disabled": "#C0C4C8",
           "brand": {
+            "default": "#5751D2",
             "primary": "#5751D2"
           }
         },

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -146,7 +146,8 @@ export const EdsThemeColorTextGradeComplete = '#007249';
 export const EdsThemeColorTextGradeRevise = '#21272D';
 export const EdsThemeColorTextGradeStop = '#BD0044';
 export const EdsThemeColorTextDisabled = '#C0C4C8';
-export const EdsThemeColorTextBrandPrimary = '#5751D2';
+export const EdsThemeColorTextBrandDefault = '#5751D2';
+export const EdsThemeColorTextBrandPrimary = '#5751D2'; // deprecated
 export const EdsThemeColorTransparentBlack0 = 'rgba(0, 0, 0, 0)';
 export const EdsThemeColorTransparentBlack30 = 'rgba(0, 0, 0, .3)';
 export const EdsThemeColorTransparentWhite0 = 'rgba(255, 255, 255, 0)';