From 8a4bfb0d238e44ccdbeb597cb0c6b5e32b013679 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Tue, 4 Jun 2024 20:00:44 -0500 Subject: [PATCH] chore: update utility-base token numbering --- .storybook/data/tokens.json | 4 ++-- src/components/Button/Button-v2.module.css | 4 ++-- src/design-tokens/themes.json | 4 ++-- src/tokens-dist/css/variables.css | 4 ++-- src/tokens-dist/json/variables-nested.json | 4 ++-- src/tokens-dist/ts/colors.ts | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index a39769284..ce624aaa3 100644 --- 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 index 4a063ab78..92077b3c4 100644 --- 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 index c9326ef2a..6a0964537 100644 --- 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 index d53f3f1ce..18d757b80 100644 --- 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 index ce0a00178..6862b04f7 100644 --- 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 index 13f65b6ad..8add9465a 100644 --- 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';