chore: update utility-base token numbering (#1974)

change -0 and -1 to -1 and -2 respectively
chanzuckerberg · Jun 5, 2024 · 76d467d · 76d467d
1 parent 56066ae
commit 76d467d
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -189,8 +189,8 @@
   "eds-theme-color-background-brand-purple": "#C580E7",
   "eds-theme-color-background-brand-purple-low-emphasis": "#FBF5FD",
   "eds-theme-color-background-brand-pink": "#DB458D",
-  "eds-theme-color-background-utility-base-0": "rgb(var(--eds-color-white) / 1)",
-  "eds-theme-color-background-utility-base-1": "#FDF9F8",
+  "eds-theme-color-background-utility-base-1": "rgb(var(--eds-color-white) / 1)",
+  "eds-theme-color-background-utility-base-2": "#FDF9F8",
   "eds-theme-color-background-utility-container": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-background-utility-container-hover": "#F9F3F1",
   "eds-theme-color-background-utility-container-active": "#EEE7E4",

diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
@@ -129,13 +129,13 @@
 
 .button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 0.125rem var(--eds-theme-color-background-utility-base-1), 0 0 0 0.25rem var(--eds-theme-color-border-utility-focus);
+  box-shadow: 0 0 0 0.125rem var(--eds-theme-color-background-utility-base-2), 0 0 0 0.25rem var(--eds-theme-color-border-utility-focus);
 }
 
 /* stylelint-disable-next-line eds/no-tier-1-color-variable */
 .button.button--variant-inverse:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 0.125rem rgb(var(--eds-color-black) / 1), 0 0 0 0.25rem var(--eds-theme-color-background-utility-base-1);
+  box-shadow: 0 0 0 0.125rem rgb(var(--eds-color-black) / 1), 0 0 0 0.25rem var(--eds-theme-color-background-utility-base-2);
 }
 
 /**

diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
@@ -219,10 +219,10 @@
           },
           "utility": {
             "base": {
-              "0": {
+              "1": {
                 "value": "rgb(var(--eds-color-white) / 1)"
               },
-              "1": {
+              "2": {
                 "value": "{eds.color.neutral.025}"
               }
             },

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -264,7 +264,7 @@
   --eds-theme-color-background-utility-interactive-no-emphasis: transparent;
   --eds-theme-color-background-utility-default-no-emphasis: transparent;
   --eds-theme-color-background-utility-container: rgb(var(--eds-color-white) / 1);
-  --eds-theme-color-background-utility-base-0: rgb(var(--eds-color-white) / 1);
+  --eds-theme-color-background-utility-base-1: rgb(var(--eds-color-white) / 1);
   --eds-theme-color-background-neutral-medium: #E7E8EA;
   --eds-theme-color-background-neutral-subtle-hover: #E7E8EA;
   --eds-theme-color-background-neutral-subtle: #F4F6F8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -745,7 +745,7 @@
   --eds-theme-color-background-utility-overlay-low-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 50% */
   --eds-theme-color-background-utility-container-active: var(--eds-color-neutral-100);
   --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050);
-  --eds-theme-color-background-utility-base-1: var(--eds-color-neutral-025);
+  --eds-theme-color-background-utility-base-2: var(--eds-color-neutral-025);
   --eds-theme-color-background-brand-pink: var(--eds-color-pink-450);
   --eds-theme-color-background-brand-purple-low-emphasis: var(--eds-color-purple-050);
   --eds-theme-color-background-brand-purple: var(--eds-color-purple-350);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -395,8 +395,8 @@
           },
           "utility": {
             "base": {
-              "0": "rgb(var(--eds-color-white) / 1)",
-              "1": "#FDF9F8"
+              "1": "rgb(var(--eds-color-white) / 1)",
+              "2": "#FDF9F8"
             },
             "container": {
               "@": "rgb(var(--eds-color-white) / 1)",

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -26,9 +26,9 @@ export const EdsThemeColorBackgroundBrandBlueLowEmphasis = '#EAF4FF';
 export const EdsThemeColorBackgroundBrandPurple = '#C580E7';
 export const EdsThemeColorBackgroundBrandPurpleLowEmphasis = '#FBF5FD';
 export const EdsThemeColorBackgroundBrandPink = '#DB458D';
-export const EdsThemeColorBackgroundUtilityBase0 =
+export const EdsThemeColorBackgroundUtilityBase1 =
   'rgb(var(--eds-color-white) / 1)';
-export const EdsThemeColorBackgroundUtilityBase1 = '#FDF9F8';
+export const EdsThemeColorBackgroundUtilityBase2 = '#FDF9F8';
 export const EdsThemeColorBackgroundUtilityContainer =
   'rgb(var(--eds-color-white) / 1)';
 export const EdsThemeColorBackgroundUtilityContainerHover = '#F9F3F1';