diff --git a/bin/build_tokens.mjs b/bin/build_tokens.mjs index 79c69385d9a0ae0fe0fc14bf57f61cb86d6305b4..08b1c78667e3f130c0e13a07a863d1c18db9b158 100755 --- a/bin/build_tokens.mjs +++ b/bin/build_tokens.mjs @@ -199,6 +199,9 @@ StyleDictionary.registerFormat({ status: generateTokenObject('status', statusVariants, 'background'), feedback: generateTokenObject('feedback', feedbackVariants, 'background'), dropdown: formatToken(COMPILED_TOKENS.dropdown.background.color), + highlight: { + search: formatToken(COMPILED_TOKENS.highlight.search.background.color), + }, }; const borderColors = { @@ -206,6 +209,9 @@ StyleDictionary.registerFormat({ color: formatTokens(COMPILED_TOKENS.border.color), dropdown: formatToken(COMPILED_TOKENS.dropdown.border.color), 'dropdown-divider': formatToken(COMPILED_TOKENS.dropdown.divider.color), + highlight: { + search: formatToken(COMPILED_TOKENS.highlight.search.border.color), + }, }; const fillColors = { ...colorTokens, @@ -222,6 +228,9 @@ StyleDictionary.registerFormat({ primary: formatToken(COMPILED_TOKENS.text.primary), secondary: formatToken(COMPILED_TOKENS.text.secondary), tertiary: formatToken(COMPILED_TOKENS.text.tertiary), + highlight: { + search: formatToken(COMPILED_TOKENS.highlight.search.text.color), + }, }; const outlineColor = { @@ -324,6 +333,9 @@ const tailwindFormat = async ({ dictionary, file }) => { ...statusBackgroundColors, ...feedbackBackgroundColors, dropdown: '${COMPILED_TOKENS.background.dropdown.cssWithValue}', + highlight: { + search: '${COMPILED_TOKENS.background.highlight.search.cssWithValue}', + }, }; const borderColor = { @@ -331,6 +343,9 @@ const tailwindFormat = async ({ dictionary, file }) => { ...borderColors, dropdown: '${COMPILED_TOKENS.border.dropdown.cssWithValue}', 'dropdown-divider': '${COMPILED_TOKENS.border['dropdown-divider'].cssWithValue}', + highlight: { + search: '${COMPILED_TOKENS.border.highlight.search.cssWithValue}', + }, }; const outlineColor = { @@ -354,6 +369,9 @@ const tailwindFormat = async ({ dictionary, file }) => { primary: '${COMPILED_TOKENS.text.primary.cssWithValue}', secondary: '${COMPILED_TOKENS.text.secondary.cssWithValue}', tertiary: '${COMPILED_TOKENS.text.tertiary.cssWithValue}', + highlight: { + search: '${COMPILED_TOKENS.text.highlight.search.cssWithValue}', + }, }; module.exports = { diff --git a/src/scss/typography.scss b/src/scss/typography.scss index 2db9285b60c33c58c15507b4f974c2d0513187ce..993d1d8dd8037740cc553665ffe88604096592ae 100644 --- a/src/scss/typography.scss +++ b/src/scss/typography.scss @@ -46,3 +46,8 @@ kbd { @apply gl-border-t gl-border-t-2; } } + +mark, +.mark { + @apply gl-p-1 gl-rounded-small gl-bg-highlight-search gl-text-highlight-search gl-border-1 gl-border-solid gl-border-highlight-search; +} diff --git a/src/scss/typography.stories.js b/src/scss/typography.stories.js index 313fba16e9c3fb14bc6f9f00c3d289f6efe6a853..06f62d4da31776230ee013ec1bb602e605737e7c 100644 --- a/src/scss/typography.stories.js +++ b/src/scss/typography.stories.js @@ -12,7 +12,8 @@ export const Default = () => ({ The p HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form - fields. + fields. When searching for strings in paragraphs, matched results may display over multiple + lines.

Paragraphs can contain inline elements such as links, diff --git a/src/tokens/build/css/tokens.css b/src/tokens/build/css/tokens.css index 5745f9e3f4065348d6eadcbb888c81e5b764569e..3e56b6e9898eecf59a2ca7cf1ff5ce778d773528 100644 --- a/src/tokens/build/css/tokens.css +++ b/src/tokens/build/css/tokens.css @@ -831,6 +831,7 @@ --gl-feedback-danger-text-color: var(--gl-color-red-700); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */ + --gl-highlight-search-border-color: var(--gl-color-orange-500); /* Used for the border of a highlighted content. */ --gl-icon-color-info: var(--gl-color-blue-700); /* Used for an icon associated with information or help. */ --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /* Used for the default shadow color. */ --gl-status-neutral-background-color: var(--gl-color-neutral-100); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ @@ -988,6 +989,8 @@ --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */ --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */ --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */ + --gl-highlight-search-background-color: var(--gl-feedback-warning-background-color); /* Used for the background of a highlighted content. */ + --gl-highlight-search-text-color: var(--gl-text-color-default); /* Used for the text of a highlighted content. */ --gl-icon-color-default: var(--gl-text-color-default); /* Used for the default icon color. Can be paired with default text. */ --gl-icon-color-subtle: var(--gl-text-color-subtle); /* Used for a static or decorational icon. Can be paired with subtle text. */ --gl-icon-color-strong: var(--gl-text-color-strong); /* Used for an icon with the highest contrast. */ diff --git a/src/tokens/build/css/tokens.dark.css b/src/tokens/build/css/tokens.dark.css index faef4fa1be740778124c1fe3cc602998b816044b..bd7da4d673f8bc29a782ec4b1670f97723cd6c3e 100644 --- a/src/tokens/build/css/tokens.dark.css +++ b/src/tokens/build/css/tokens.dark.css @@ -831,6 +831,7 @@ --gl-feedback-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --gl-focus-ring-outer-color: var(--gl-color-blue-400); /* Used for the outer color portion of the focus ring. */ + --gl-highlight-search-border-color: var(--gl-color-orange-400); /* Used for the border of a highlighted content. */ --gl-icon-color-info: var(--gl-color-blue-200); /* Used for an icon associated with information or help. */ --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */ --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */ @@ -988,6 +989,8 @@ --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */ --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */ --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */ + --gl-highlight-search-background-color: var(--gl-feedback-warning-background-color); /* Used for the background of a highlighted content. */ + --gl-highlight-search-text-color: var(--gl-text-color-default); /* Used for the text of a highlighted content. */ --gl-icon-color-default: var(--gl-text-color-default); /* Used for the default icon color. Can be paired with default text. */ --gl-icon-color-subtle: var(--gl-text-color-subtle); /* Used for a static or decorational icon. Can be paired with subtle text. */ --gl-icon-color-strong: var(--gl-text-color-strong); /* Used for an icon with the highest contrast. */ diff --git a/src/tokens/build/docs/tokens-tailwind-docs.dark.json b/src/tokens/build/docs/tokens-tailwind-docs.dark.json index 004b9fa949090c496dc83e8a55b4b8fdca760acf..66b783972c49aca98544ba1f5624de9f5ca4b516 100644 --- a/src/tokens/build/docs/tokens-tailwind-docs.dark.json +++ b/src/tokens/build/docs/tokens-tailwind-docs.dark.json @@ -6532,6 +6532,29 @@ "color" ], "cssWithValue": "var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #28272d))" + }, + "highlight": { + "search": { + "$value": "#532e16", + "$type": "color", + "$description": "Used for the background of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BACKGROUND_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "background", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-background-color, var(--gl-feedback-warning-background-color, #532e16))" + } } }, "border": { @@ -12755,6 +12778,32 @@ "color" ], "cssWithValue": "var(--gl-dropdown-divider-color, var(--gl-border-color-default, #3a383f))" + }, + "highlight": { + "search": { + "$value": "#c17d10", + "$type": "color", + "$description": "Used for the border of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BORDER_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "border", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-border-color, var(--gl-color-orange-500, #c17d10))" + } } }, "fill": { @@ -25925,6 +25974,29 @@ "tertiary" ], "cssWithValue": "var(--gl-text-tertiary, #737278)" + }, + "highlight": { + "search": { + "$value": "#ececef", + "$type": "color", + "$description": "Used for the text of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_TEXT_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "text", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-text-color, var(--gl-text-color-default, #ececef))" + } } }, "outline": { diff --git a/src/tokens/build/docs/tokens-tailwind-docs.json b/src/tokens/build/docs/tokens-tailwind-docs.json index c6045e2b34b902da7a1d1aebf281ac210a5a2b67..eb73fda65e21f393445f437cbcb988f51798803a 100644 --- a/src/tokens/build/docs/tokens-tailwind-docs.json +++ b/src/tokens/build/docs/tokens-tailwind-docs.json @@ -6532,6 +6532,29 @@ "color" ], "cssWithValue": "var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))" + }, + "highlight": { + "search": { + "$value": "#fdf1dd", + "$type": "color", + "$description": "Used for the background of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BACKGROUND_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "background", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-background-color, var(--gl-feedback-warning-background-color, #fdf1dd))" + } } }, "border": { @@ -12755,6 +12778,32 @@ "color" ], "cssWithValue": "var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))" + }, + "highlight": { + "search": { + "$value": "#ab6100", + "$type": "color", + "$description": "Used for the border of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BORDER_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "border", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-border-color, var(--gl-color-orange-500, #ab6100))" + } } }, "fill": { @@ -25925,6 +25974,29 @@ "tertiary" ], "cssWithValue": "var(--gl-text-tertiary, #89888d)" + }, + "highlight": { + "search": { + "$value": "#3a383f", + "$type": "color", + "$description": "Used for the text of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_TEXT_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "text", + "color" + ], + "cssWithValue": "var(--gl-highlight-search-text-color, var(--gl-text-color-default, #3a383f))" + } } }, "outline": { diff --git a/src/tokens/build/figma/semantic.tokens.json b/src/tokens/build/figma/semantic.tokens.json index c8f5f5fd7bafd3d09784869559df7ee0d84dad64..e954ab611562c53eebde6df6528588d8d89e9a23 100644 --- a/src/tokens/build/figma/semantic.tokens.json +++ b/src/tokens/build/figma/semantic.tokens.json @@ -1059,6 +1059,34 @@ } } }, + "highlight": { + "search": { + "background": { + "color": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + } + }, + "border": { + "color": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + } + }, + "text": { + "color": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + } + } + } + }, "icon": { "color": { "default": { diff --git a/src/tokens/build/js/tokens.dark.js b/src/tokens/build/js/tokens.dark.js index 250fc5c4b4e90390443656e24e46369534634f9d..0d7e9591c7df5ceeb232f0e1997860a495762324 100644 --- a/src/tokens/build/js/tokens.dark.js +++ b/src/tokens/build/js/tokens.dark.js @@ -1005,6 +1005,9 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa'; export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f6806d'; export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc'; export const GL_FOCUS_RING_INNER_COLOR = '#18171d'; +export const GL_HIGHLIGHT_SEARCH_BACKGROUND_COLOR = '#532e16'; +export const GL_HIGHLIGHT_SEARCH_BORDER_COLOR = '#c17d10'; +export const GL_HIGHLIGHT_SEARCH_TEXT_COLOR = '#ececef'; export const GL_ICON_COLOR_DEFAULT = '#ececef'; export const GL_ICON_COLOR_SUBTLE = '#bfbfc3'; export const GL_ICON_COLOR_STRONG = '#fff'; diff --git a/src/tokens/build/js/tokens.js b/src/tokens/build/js/tokens.js index 5103636e09a727f27f60e3e56585ec9426ac2074..ca80ac2885b989e1586ef919190b85781c7ed9d2 100644 --- a/src/tokens/build/js/tokens.js +++ b/src/tokens/build/js/tokens.js @@ -1005,6 +1005,9 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#a32c12'; export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c02f12'; export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb'; export const GL_FOCUS_RING_INNER_COLOR = '#fff'; +export const GL_HIGHLIGHT_SEARCH_BACKGROUND_COLOR = '#fdf1dd'; +export const GL_HIGHLIGHT_SEARCH_BORDER_COLOR = '#ab6100'; +export const GL_HIGHLIGHT_SEARCH_TEXT_COLOR = '#3a383f'; export const GL_ICON_COLOR_DEFAULT = '#3a383f'; export const GL_ICON_COLOR_SUBTLE = '#626168'; export const GL_ICON_COLOR_STRONG = '#18171d'; diff --git a/src/tokens/build/json/tokens.dark.json b/src/tokens/build/json/tokens.dark.json index 5ed8cf7de48c5c0f4ec925768df1d1a0ced5be95..d98d34aaee5470a7f32d7262141f8da424dcbedb 100644 --- a/src/tokens/build/json/tokens.dark.json +++ b/src/tokens/build/json/tokens.dark.json @@ -23010,6 +23010,79 @@ } } }, + "highlight": { + "search": { + "background": { + "color": { + "$value": "#532e16", + "$type": "color", + "$description": "Used for the background of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BACKGROUND_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "background", + "color" + ] + } + }, + "border": { + "color": { + "$value": "#c17d10", + "$type": "color", + "$description": "Used for the border of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BORDER_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "border", + "color" + ] + } + }, + "text": { + "color": { + "$value": "#ececef", + "$type": "color", + "$description": "Used for the text of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_TEXT_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "text", + "color" + ] + } + } + } + }, "icon": { "color": { "default": { diff --git a/src/tokens/build/json/tokens.json b/src/tokens/build/json/tokens.json index efe71115575df3f6c7696255376e481c8797b5c1..80afb513daf6334a0474acd4cc7942615ac1028d 100644 --- a/src/tokens/build/json/tokens.json +++ b/src/tokens/build/json/tokens.json @@ -23010,6 +23010,79 @@ } } }, + "highlight": { + "search": { + "background": { + "color": { + "$value": "#fdf1dd", + "$type": "color", + "$description": "Used for the background of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BACKGROUND_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "background", + "color" + ] + } + }, + "border": { + "color": { + "$value": "#ab6100", + "$type": "color", + "$description": "Used for the border of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_BORDER_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "border", + "color" + ] + } + }, + "text": { + "color": { + "$value": "#3a383f", + "$type": "color", + "$description": "Used for the text of a highlighted content.", + "filePath": "src/tokens/semantic/highlight.tokens.json", + "isSource": true, + "original": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + }, + "name": "HIGHLIGHT_SEARCH_TEXT_COLOR", + "attributes": {}, + "path": [ + "highlight", + "search", + "text", + "color" + ] + } + } + } + }, "icon": { "color": { "default": { diff --git a/src/tokens/build/scss/_tokens.dark.scss b/src/tokens/build/scss/_tokens.dark.scss index 274fe09736408ee743c165c89206434e64fc4dca..bf39f9048246ff89cb60ec9b8fc97d71fd639b58 100644 --- a/src/tokens/build/scss/_tokens.dark.scss +++ b/src/tokens/build/scss/_tokens.dark.scss @@ -829,6 +829,7 @@ $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the backgro $gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring. +$gl-highlight-search-border-color: $gl-color-orange-400; // Used for the border of a highlighted content. $gl-icon-color-info: $gl-color-blue-200; // Used for an icon associated with information or help. $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color. $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. @@ -986,6 +987,8 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid. $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs. $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring. +$gl-highlight-search-background-color: $gl-feedback-warning-background-color; // Used for the background of a highlighted content. +$gl-highlight-search-text-color: $gl-text-color-default; // Used for the text of a highlighted content. $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text. $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text. $gl-icon-color-strong: $gl-text-color-strong; // Used for an icon with the highest contrast. diff --git a/src/tokens/build/scss/_tokens.scss b/src/tokens/build/scss/_tokens.scss index 736559c0ae94b58fbe71390cfff8ba6af7931b18..79c0e04f55f1b17ddd11d0510f5570e7cfa4f45f 100644 --- a/src/tokens/build/scss/_tokens.scss +++ b/src/tokens/build/scss/_tokens.scss @@ -829,6 +829,7 @@ $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the backgrou $gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring. +$gl-highlight-search-border-color: $gl-color-orange-500; // Used for the border of a highlighted content. $gl-icon-color-info: $gl-color-blue-700; // Used for an icon associated with information or help. $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color. $gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. @@ -986,6 +987,8 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid. $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs. $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring. +$gl-highlight-search-background-color: $gl-feedback-warning-background-color; // Used for the background of a highlighted content. +$gl-highlight-search-text-color: $gl-text-color-default; // Used for the text of a highlighted content. $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text. $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text. $gl-icon-color-strong: $gl-text-color-strong; // Used for an icon with the highest contrast. diff --git a/src/tokens/build/scss/_tokens_custom_properties.scss b/src/tokens/build/scss/_tokens_custom_properties.scss index f3751eaf0b0c3c88f384d797557344b78fa8d19f..a5ce3a4f8ae772e401249b771be37b6d34cf1d41 100644 --- a/src/tokens/build/scss/_tokens_custom_properties.scss +++ b/src/tokens/build/scss/_tokens_custom_properties.scss @@ -1005,6 +1005,9 @@ $gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color); $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color); $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color); $gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color); +$gl-highlight-search-background-color: var(--gl-highlight-search-background-color); +$gl-highlight-search-border-color: var(--gl-highlight-search-border-color); +$gl-highlight-search-text-color: var(--gl-highlight-search-text-color); $gl-icon-color-default: var(--gl-icon-color-default); $gl-icon-color-subtle: var(--gl-icon-color-subtle); $gl-icon-color-strong: var(--gl-icon-color-strong); diff --git a/src/tokens/build/tailwind/tokens.cjs b/src/tokens/build/tailwind/tokens.cjs index c84fa8af23bd358a4284c6c94bd501b5f7754584..8248c9e457afa5f98490e98640fba4ff377d3c08 100644 --- a/src/tokens/build/tailwind/tokens.cjs +++ b/src/tokens/build/tailwind/tokens.cjs @@ -376,6 +376,10 @@ const backgroundColor = { ...statusBackgroundColors, ...feedbackBackgroundColors, dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))', + highlight: { + search: + 'var(--gl-highlight-search-background-color, var(--gl-feedback-warning-background-color, #fdf1dd))', + }, }; const borderColor = { @@ -383,6 +387,9 @@ const borderColor = { ...borderColors, dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))', 'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))', + highlight: { + search: 'var(--gl-highlight-search-border-color, var(--gl-color-orange-500, #ab6100))', + }, }; const outlineColor = { @@ -406,6 +413,9 @@ const textColor = { primary: 'var(--gl-text-primary, #28272d)', secondary: 'var(--gl-text-secondary, #737278)', tertiary: 'var(--gl-text-tertiary, #89888d)', + highlight: { + search: 'var(--gl-highlight-search-text-color, var(--gl-text-color-default, #3a383f))', + }, }; module.exports = { diff --git a/src/tokens/semantic/highlight.tokens.json b/src/tokens/semantic/highlight.tokens.json new file mode 100644 index 0000000000000000000000000000000000000000..53ff49a9a913a43396ffce9e1bf9806c1300cd63 --- /dev/null +++ b/src/tokens/semantic/highlight.tokens.json @@ -0,0 +1,30 @@ +{ + "highlight": { + "search": { + "background": { + "color": { + "$value": "{feedback.warning.background.color}", + "$type": "color", + "$description": "Used for the background of a highlighted content." + } + }, + "border": { + "color": { + "$value": { + "default": "{color.orange.500}", + "dark": "{color.orange.400}" + }, + "$type": "color", + "$description": "Used for the border of a highlighted content." + } + }, + "text": { + "color": { + "$value": "{text.color.default}", + "$type": "color", + "$description": "Used for the text of a highlighted content." + } + } + } + } +} diff --git a/src/vendor/bootstrap/scss/_type.scss b/src/vendor/bootstrap/scss/_type.scss index 743c0d316504a40fc15662877a361107e5eb6f2d..e9b25d66eade9f90ec8c5e30b0a171e1d8a492f4 100644 --- a/src/vendor/bootstrap/scss/_type.scss +++ b/src/vendor/bootstrap/scss/_type.scss @@ -69,12 +69,6 @@ small, font-weight: $font-weight-normal; } -mark, -.mark { - padding: $mark-padding; - background-color: $mark-bg; -} - // // Lists diff --git a/src/vendor/bootstrap/scss/_variables.scss b/src/vendor/bootstrap/scss/_variables.scss index bca5f56ac8d67f3e0300d38ac885807052f4b57f..600757713a652ebd0b9d6ee79a57317096c31996 100644 --- a/src/vendor/bootstrap/scss/_variables.scss +++ b/src/vendor/bootstrap/scss/_variables.scss @@ -335,16 +335,12 @@ $blockquote-font-size: $font-size-base * 1.25 !default; $hr-border-color: rgba($black, .1) !default; $hr-border-width: $border-width !default; -$mark-padding: .2em !default; - $dt-font-weight: $font-weight-bold !default; $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; -$mark-bg: #fcf8e3 !default; - $hr-margin-y: $spacer !default; diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png index 46f9be026fc261515e7fd1e8117d5c442bf46d61..f9a271085130f2e8455d41d3b39dfa32b385ca7e 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-scss-typography-default-1-snap.png differ