diff --git a/src/components/base/markdown/markdown.scss b/src/components/base/markdown/markdown.scss index b46d7698b6990fdeca503d360ed7bb92ff696626..fb114383405c471496675a20e35a094af89656b6 100644 --- a/src/components/base/markdown/markdown.scss +++ b/src/components/base/markdown/markdown.scss @@ -1,7 +1,7 @@ .gl-markdown { @apply gl-text-lg; @apply gl-leading-24; - color: $gl-text-color; + @apply gl-text-default; @apply gl-font-regular; @apply gl-font-normal; diff --git a/src/components/experimental/duo/chat/duo_chat.scss b/src/components/experimental/duo/chat/duo_chat.scss index 8ae4c3ec1f7295f98b182a3d7cc717d5c69df3cc..6e7c2189fe17c4db5f13c406bca259af14cbb898 100644 --- a/src/components/experimental/duo/chat/duo_chat.scss +++ b/src/components/experimental/duo/chat/duo_chat.scss @@ -177,7 +177,7 @@ .duo-chat-markdown { @apply gl-text-lg; @apply gl-leading-24; - color: $gl-text-color; + @apply gl-text-default; @apply gl-font-regular; @apply gl-font-normal; diff --git a/src/tokens/build/css/tokens.dark.css b/src/tokens/build/css/tokens.dark.css index bf46949066ca30c0d2be6da1d07df6bba29e8af0..6ffa66e50231a3428d3e7941a2bab231bb9f9543 100644 --- a/src/tokens/build/css/tokens.dark.css +++ b/src/tokens/build/css/tokens.dark.css @@ -766,7 +766,7 @@ --gl-status-brand-background-color: var(--gl-color-purple-900); /* Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-text-color: var(--gl-color-purple-300); /* Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ --gl-status-brand-icon-color: var(--gl-color-purple-500); /* Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */ - --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */ + --gl-text-color-default: var(--gl-color-neutral-100); /* Used for the default text color. */ --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */ --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */ --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */ diff --git a/src/tokens/build/js/tokens.dark.js b/src/tokens/build/js/tokens.dark.js index c0b2eb07cfb6ebd88baf87c18bc1c4229fcdbb06..0ac10a04169a39b59f9af25a45a91ccc8b6165d8 100644 --- a/src/tokens/build/js/tokens.dark.js +++ b/src/tokens/build/js/tokens.dark.js @@ -691,7 +691,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#9dc7f1'; export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#428fdc'; export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d'; export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168'; -export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; +export const GL_TOKEN_FOREGROUND_COLOR = '#dcdcde'; export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; @@ -940,7 +940,7 @@ export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf'; export const GL_TEXT_PRIMARY = '#ececef'; export const GL_TEXT_SECONDARY = '#89888d'; export const GL_TEXT_TERTIARY = '#737278'; -export const GL_TEXT_COLOR_DEFAULT = '#ececef'; +export const GL_TEXT_COLOR_DEFAULT = '#dcdcde'; export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; export const GL_TEXT_COLOR_STRONG = '#fff'; export const GL_TEXT_COLOR_HEADING = '#fff'; diff --git a/src/tokens/build/json/tokens.dark.json b/src/tokens/build/json/tokens.dark.json index a0d736f7850cb95fdb445ba87e46628ffc0d240c..f4d32f4b821c288e85fd63c52f36e309af644586 100644 --- a/src/tokens/build/json/tokens.dark.json +++ b/src/tokens/build/json/tokens.dark.json @@ -15399,7 +15399,7 @@ "token": { "foreground": { "color": { - "$value": "#ececef", + "$value": "#dcdcde", "$type": "color", "$description": "Used for the token foreground color.", "filePath": "src/tokens/contextual/token.tokens.json", @@ -21642,7 +21642,7 @@ }, "color": { "default": { - "$value": "#ececef", + "$value": "#dcdcde", "$type": "color", "$description": "Used for the default text color.", "filePath": "src/tokens/text.tokens.json", @@ -21650,7 +21650,7 @@ "original": { "$value": { "default": "{color.neutral.800}", - "dark": "{color.neutral.50}" + "dark": "{color.neutral.100}" }, "$type": "color", "$description": "Used for the default text color." diff --git a/src/tokens/build/json/tokens.json b/src/tokens/build/json/tokens.json index a658eff7129c7db348773842b21acb9f51af7440..0f5679ac675e10478ee9a8cbfe7d822268612c4b 100644 --- a/src/tokens/build/json/tokens.json +++ b/src/tokens/build/json/tokens.json @@ -21650,7 +21650,7 @@ "original": { "$value": { "default": "{color.neutral.800}", - "dark": "{color.neutral.50}" + "dark": "{color.neutral.100}" }, "$type": "color", "$description": "Used for the default text color." diff --git a/src/tokens/build/scss/_tokens.dark.scss b/src/tokens/build/scss/_tokens.dark.scss index 841510f85b71d57778c0086106e8b78cefeb0c08..33723309589fc36de250439cd6bb01d51f26ac6e 100644 --- a/src/tokens/build/scss/_tokens.dark.scss +++ b/src/tokens/build/scss/_tokens.dark.scss @@ -764,7 +764,7 @@ $gl-status-danger-icon-color: $gl-color-red-400; // Used for the icon of a dange $gl-status-brand-background-color: $gl-color-purple-900; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. $gl-status-brand-text-color: $gl-color-purple-300; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. $gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. -$gl-text-color-default: $gl-color-neutral-50; // Used for the default text color. +$gl-text-color-default: $gl-color-neutral-100; // Used for the default text color. $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text. $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast. $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6. diff --git a/src/tokens/text.tokens.json b/src/tokens/text.tokens.json index 9862fc40e1263ea7245e9e91892817518b551a4d..04b16cbbbe12227774dc6c4d49d895129fc79bd3 100644 --- a/src/tokens/text.tokens.json +++ b/src/tokens/text.tokens.json @@ -31,7 +31,7 @@ "default": { "$value": { "default": "{color.neutral.800}", - "dark": "{color.neutral.50}" + "dark": "{color.neutral.100}" }, "$type": "color", "$description": "Used for the default text color." diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-compact-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-compact-1-snap.png index e911b700336656eb487066727df8044530c94849..5a6651007215c0d7317833ce529103ed714f3fa2 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-compact-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-compact-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-documentation-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-documentation-1-snap.png index 4f7882f4d658a29b57d3cbbad021a3f29a88e1b7..cfd30596e0bae21f48fa77c8874b0429a7b2753e 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-documentation-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-markdown-documentation-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png index 9a42ce4f05bfffda7c0dbc7b016d43a6ee9d64ad..f3f57d06155cb6590857c88197fad60b4f53c955 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png differ