diff --git a/src/tokens/border.tokens.json b/src/tokens/border.tokens.json index 61314cdc959e54769539416da8ee1236ea70cf81..6bb6962cf7a741549885b2161e572ddf8ec042cc 100644 --- a/src/tokens/border.tokens.json +++ b/src/tokens/border.tokens.json @@ -19,8 +19,8 @@ }, "strong": { "$value": { - "default": "{color.neutral.400}", - "dark": "{color.neutral.400}" + "default": "{color.neutral.200}", + "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries." diff --git a/src/tokens/build/css/tokens.css b/src/tokens/build/css/tokens.css index d3b8046c7db063806623420fbc07a38c8d56a894..2596d6b18a85636d2ebe3089cc4c4809b24820e6 100644 --- a/src/tokens/build/css/tokens.css +++ b/src/tokens/build/css/tokens.css @@ -461,7 +461,7 @@ --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */ --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */ --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */ - --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */ + --gl-border-color-strong: var(--gl-color-neutral-200); /* Used for a distinct border that emphasizes an edge or boundaries. */ --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */ --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */ --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */ diff --git a/src/tokens/build/css/tokens.dark.css b/src/tokens/build/css/tokens.dark.css index e542b83e7ee74b0e11cde44b2460a658bc04f2f6..50b8f9998ea1e9fde168ed3dd6941f532fd58f78 100644 --- a/src/tokens/build/css/tokens.dark.css +++ b/src/tokens/build/css/tokens.dark.css @@ -461,7 +461,7 @@ --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */ --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */ --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */ - --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */ + --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */ --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */ --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */ --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */ diff --git a/src/tokens/build/js/tokens.dark.js b/src/tokens/build/js/tokens.dark.js index 04d3d1a929fb11c90dc27d868235c5418479d7fa..6d39922dbbd4d96d632f220527dc2dd241d63364 100644 --- a/src/tokens/build/js/tokens.dark.js +++ b/src/tokens/build/js/tokens.dark.js @@ -86,7 +86,7 @@ export const GL_BACKGROUND_COLOR_SECTION = '#3a383f'; export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; export const GL_BORDER_COLOR_DEFAULT = '#3a383f'; export const GL_BORDER_COLOR_SUBTLE = '#28272d'; -export const GL_BORDER_COLOR_STRONG = '#89888d'; +export const GL_BORDER_COLOR_STRONG = '#626168'; export const GL_BORDER_COLOR_SECTION = '#18171d'; export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; export const GL_COLOR_ALPHA_0 = 'transparent'; @@ -601,9 +601,9 @@ export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; -export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d'; -export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d'; -export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d'; +export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#626168'; +export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#626168'; +export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#626168'; export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#a4a3a8'; export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#63a6e9'; export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#63a6e9'; diff --git a/src/tokens/build/js/tokens.js b/src/tokens/build/js/tokens.js index adab32d51a36ae0392c0d82e669292470c70645f..d48b39038b1c044bb943914cf00e5c8a0d3a0a88 100644 --- a/src/tokens/build/js/tokens.js +++ b/src/tokens/build/js/tokens.js @@ -86,7 +86,7 @@ export const GL_BACKGROUND_COLOR_SECTION = '#fff'; export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(05, 05, 06, 0.24)'; export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; export const GL_BORDER_COLOR_SUBTLE = '#ececef'; -export const GL_BORDER_COLOR_STRONG = '#89888d'; +export const GL_BORDER_COLOR_STRONG = '#bfbfc3'; export const GL_BORDER_COLOR_SECTION = '#dcdcde'; export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; export const GL_COLOR_ALPHA_0 = 'transparent'; @@ -601,9 +601,9 @@ export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_DEFAULT = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_HOVER = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_FOCUS = 'transparent'; export const GL_BUTTON_DANGER_TERTIARY_BORDER_COLOR_ACTIVE = 'transparent'; -export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#89888d'; -export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#89888d'; -export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#89888d'; +export const GL_BUTTON_DASHED_BORDER_COLOR_DEFAULT = '#bfbfc3'; +export const GL_BUTTON_DASHED_BORDER_COLOR_HOVER = '#bfbfc3'; +export const GL_BUTTON_DASHED_BORDER_COLOR_FOCUS = '#bfbfc3'; export const GL_BUTTON_DASHED_BORDER_COLOR_ACTIVE = '#626168'; export const GL_BUTTON_LINK_TEXT_COLOR_DEFAULT = '#0b5cad'; export const GL_BUTTON_LINK_TEXT_COLOR_HOVER = '#0b5cad'; diff --git a/src/tokens/build/json/tokens.dark.json b/src/tokens/build/json/tokens.dark.json index b73a7800b38950901866cc53d63662241bb5f26f..79927b5b4c4e1edebebcd0673e62130416b7709e 100644 --- a/src/tokens/build/json/tokens.dark.json +++ b/src/tokens/build/json/tokens.dark.json @@ -1998,15 +1998,15 @@ ] }, "strong": { - "$value": "#89888d", + "$value": "#626168", "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries.", "filePath": "src/tokens/border.tokens.json", "isSource": true, "original": { "$value": { - "default": "{color.neutral.400}", - "dark": "{color.neutral.400}" + "default": "{color.neutral.200}", + "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries." @@ -13178,7 +13178,7 @@ "border": { "color": { "default": { - "$value": "#89888d", + "$value": "#626168", "$type": "color", "$description": "Used for the border of a dashed button in the default state.", "filePath": "src/tokens/contextual/button.tokens.json", @@ -13199,7 +13199,7 @@ ] }, "hover": { - "$value": "#89888d", + "$value": "#626168", "$type": "color", "$description": "Used for the border of a dashed button in the hover state.", "filePath": "src/tokens/contextual/button.tokens.json", @@ -13220,7 +13220,7 @@ ] }, "focus": { - "$value": "#89888d", + "$value": "#626168", "$type": "color", "$description": "Used for the border of a dashed button in the focus state.", "filePath": "src/tokens/contextual/button.tokens.json", diff --git a/src/tokens/build/json/tokens.json b/src/tokens/build/json/tokens.json index 6eb9552a6c077b987d8aa1ecacf8b3a50bf4865f..d4ac968c70cce6e0e8b506eee932e1f48b1b21e1 100644 --- a/src/tokens/build/json/tokens.json +++ b/src/tokens/build/json/tokens.json @@ -1998,15 +1998,15 @@ ] }, "strong": { - "$value": "#89888d", + "$value": "#bfbfc3", "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries.", "filePath": "src/tokens/border.tokens.json", "isSource": true, "original": { "$value": { - "default": "{color.neutral.400}", - "dark": "{color.neutral.400}" + "default": "{color.neutral.200}", + "dark": "{color.neutral.600}" }, "$type": "color", "$description": "Used for a distinct border that emphasizes an edge or boundaries." @@ -13178,7 +13178,7 @@ "border": { "color": { "default": { - "$value": "#89888d", + "$value": "#bfbfc3", "$type": "color", "$description": "Used for the border of a dashed button in the default state.", "filePath": "src/tokens/contextual/button.tokens.json", @@ -13199,7 +13199,7 @@ ] }, "hover": { - "$value": "#89888d", + "$value": "#bfbfc3", "$type": "color", "$description": "Used for the border of a dashed button in the hover state.", "filePath": "src/tokens/contextual/button.tokens.json", @@ -13220,7 +13220,7 @@ ] }, "focus": { - "$value": "#89888d", + "$value": "#bfbfc3", "$type": "color", "$description": "Used for the border of a dashed button in the focus state.", "filePath": "src/tokens/contextual/button.tokens.json", diff --git a/src/tokens/build/scss/_tokens.dark.scss b/src/tokens/build/scss/_tokens.dark.scss index 2162f8d79264e950629260c47088c1421b9772c7..e0b4fd536846a938b6203d722780007bf9a22609 100644 --- a/src/tokens/build/scss/_tokens.dark.scss +++ b/src/tokens/build/scss/_tokens.dark.scss @@ -459,7 +459,7 @@ $gl-background-color-section: $gl-color-neutral-800; // Used for containers, lik $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content. $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color. $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background. -$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries. +$gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries. $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived. $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert. $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert. diff --git a/src/tokens/build/scss/_tokens.scss b/src/tokens/build/scss/_tokens.scss index 8e06e0bc71694a9abd1244bcb916176c5fbc3d01..4f2b4a9f4e783afb9e9757268c98941ba991ceed 100644 --- a/src/tokens/build/scss/_tokens.scss +++ b/src/tokens/build/scss/_tokens.scss @@ -459,7 +459,7 @@ $gl-background-color-section: $gl-color-neutral-0; // Used for containers, like $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content. $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color. $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background. -$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries. +$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries. $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived. $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert. $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert. diff --git a/src/tokens/build/tailwind/tokens.cjs b/src/tokens/build/tailwind/tokens.cjs index 6f9e5fc4169be98e77dcef9737aa4933b1fad935..465e692e6d6ac6712201d07ecca360709da51316 100644 --- a/src/tokens/build/tailwind/tokens.cjs +++ b/src/tokens/build/tailwind/tokens.cjs @@ -226,7 +226,7 @@ const backgroundColors = { const borderColors = { default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))', subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))', - strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))', + strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-200, #bfbfc3))', section: 'var(--gl-border-color-section, var(--gl-border-color-default, #dcdcde))', transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))', }; diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-all-variants-and-categories-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-all-variants-and-categories-1-snap.png index d160ca230a5005afa69e47e5259f7493b4bcd788..57487dcf458b18c90b04d18cddeeed1a60bb343a 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-all-variants-and-categories-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-all-variants-and-categories-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-dark-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-dark-1-snap.png index fea6bc463cc523e83c285609b6ebb844ace60da0..570cbe9d65645b514ab3d2193e2f0036c017522e 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-dark-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-dark-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-default-1-snap.png index da142cc0c5a4043f44583b07de325fbbff05977b..806d1434c750369d0f25f5f1ce1a4a9b1910ec09 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-border-default-1-snap.png differ