From 686e3a2a149d6ebcd1cbffc35c939064495e5e92 Mon Sep 17 00:00:00 2001
From: sdejonge
Date: Fri, 9 May 2025 16:09:51 +1000
Subject: [PATCH 1/3] feat(DesignTokens): add highlight design tokens
Generate design token output
---
bin/build_tokens.mjs | 18 +++++
src/tokens/build/css/tokens.css | 3 +
src/tokens/build/css/tokens.dark.css | 3 +
.../build/docs/tokens-tailwind-docs.dark.json | 72 ++++++++++++++++++
.../build/docs/tokens-tailwind-docs.json | 72 ++++++++++++++++++
src/tokens/build/figma/semantic.tokens.json | 28 +++++++
src/tokens/build/js/tokens.dark.js | 3 +
src/tokens/build/js/tokens.js | 3 +
src/tokens/build/json/tokens.dark.json | 73 +++++++++++++++++++
src/tokens/build/json/tokens.json | 73 +++++++++++++++++++
src/tokens/build/scss/_tokens.dark.scss | 3 +
src/tokens/build/scss/_tokens.scss | 3 +
.../build/scss/_tokens_custom_properties.scss | 3 +
src/tokens/build/tailwind/tokens.cjs | 10 +++
src/tokens/semantic/highlight.tokens.json | 30 ++++++++
15 files changed, 397 insertions(+)
create mode 100644 src/tokens/semantic/highlight.tokens.json
diff --git a/bin/build_tokens.mjs b/bin/build_tokens.mjs
index 79c69385d9..08b1c78667 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/tokens/build/css/tokens.css b/src/tokens/build/css/tokens.css
index 5745f9e3f4..3e56b6e989 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 faef4fa1be..bd7da4d673 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 004b9fa949..66b783972c 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 c6045e2b34..eb73fda65e 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 c8f5f5fd7b..e954ab6115 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 250fc5c4b4..0d7e9591c7 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 5103636e09..ca80ac2885 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 5ed8cf7de4..d98d34aaee 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 efe7111557..80afb513da 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 274fe09736..bf39f90482 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 736559c0ae..79c0e04f55 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 f3751eaf0b..a5ce3a4f8a 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 c84fa8af23..8248c9e457 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 0000000000..53ff49a9a9
--- /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."
+ }
+ }
+ }
+ }
+}
--
GitLab
From 52f766156ea0ac6a4ae8fb1c557fcad5293503d6 Mon Sep 17 00:00:00 2001
From: sdejonge
Date: Fri, 9 May 2025 16:11:53 +1000
Subject: [PATCH 2/3] feat(CSS): update default styles
Update typography story
---
src/scss/typography.scss | 5 +++++
src/scss/typography.stories.js | 3 ++-
src/vendor/bootstrap/scss/_type.scss | 6 ------
src/vendor/bootstrap/scss/_variables.scss | 4 ----
4 files changed, 7 insertions(+), 11 deletions(-)
diff --git a/src/scss/typography.scss b/src/scss/typography.scss
index 2db9285b60..993d1d8dd8 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 313fba16e9..06f62d4da3 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/vendor/bootstrap/scss/_type.scss b/src/vendor/bootstrap/scss/_type.scss
index 743c0d3165..e9b25d66ea 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 bca5f56ac8..600757713a 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;
--
GitLab
From 4597c47e1fbdd9abcd1bd09e5710c89289306b60 Mon Sep 17 00:00:00 2001
From: GitLab Bot
Date: Tue, 20 May 2025 00:45:30 +0000
Subject: [PATCH 3/3] chore: update snapshots
---
...ryshots-scss-typography-default-1-snap.png | Bin 78879 -> 87922 bytes
1 file changed, 0 insertions(+), 0 deletions(-)
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
GIT binary patch
delta 64544
zcmbRLg5}dX)(s)C^|B8_MZGHotT`5GDD3qT6mXoUps-iCs-1yTb<2h7_j|wlH3&HA
zFAR4S2oPC%D}(Eji=!sfquKR^{mASW{@4E6a;ch^Us%2D{OlBk=Z*>X7tuC(GC&__|ELm
z>EtiUeC%@N=2Oa3Ys-zQYOaQRTz9UWW;v_V=`r8i-8Z&fV7njr^w`f3LiQH9s%44;r=H{tI_tuxpoRrtg^I9_as2(m{A`5$i7(RXzaHCJ*B!kd
z`s3bYnr
zr8zd^?ShW)j%f$t>QtBx-JkC0CU|LY>MPrMtygr`_*y*`*x0stP40@{92}RJ7S2|y
z_nF~yzj&@r)}FxW8L|xW$9IZJ@CF22>Fbb@NtLK$S2*!d&aOnnwIFbUrAYq-{Vt#4
z{j*PpJ#b7|ctbF;!qQS?)8P~AqI4Ug3dMDI3q~`zJnJ|-dqdIFtcm*V9ewsn3Px-0
z?)K+@cyrq07Za09CVu{Nfs@2r-CQ`=l<88NG~D-ncHy&=}xoXkZnVppbQOQudqxX4ZfOpK{cr7CSQ9
zy;HHSe)#j!;x3su5${t?HpPL8HYSd~v%0V7fK!uV|J4|7gCUrKau@_&d=R@M!VwtzIb@64y>JHIfyNthd}SeRarMl{cx{
zyo`CPimOED
zdFBWJ7)L!I6s@aOeJGrODK3B0(-^Rdk@9L65<6qxq
zzjt}JL+42;lfpCp{*zzTo=qz(lQ%i?{_%0YCx@