diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index d31de51ab..ae8175eb7 100644 --- 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 index a9c52efc0..8983f042a 100644 --- 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 index 4ff91495d..179d8cd5d 100644 --- 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 index e1b1727b2..198315b15 100644 --- 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 index d6bf09cd7..7874a6113 100644 --- 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 index f35e34d97..754874a01 100644 --- 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 index 76014bfab..8921467d4 100644 --- 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';