diff --git a/bin/build_tokens.mjs b/bin/build_tokens.mjs index b6286efb68e78e3055cd465250bea6ec5f01db3a..4a22f36273b6927042ef3ab66b5890cb27a42498 100755 --- a/bin/build_tokens.mjs +++ b/bin/build_tokens.mjs @@ -183,6 +183,7 @@ StyleDictionary.registerFormat({ feedbackVariants, 'background' ); + const feedbackBorderColors = generateColorObject('feedback', feedbackVariants, 'border'); const feedbackTextColors = generateColorObject('feedback', feedbackVariants, 'text'); const feedbackIconColors = generateColorObject('feedback', feedbackVariants, 'icon'); @@ -202,6 +203,7 @@ StyleDictionary.registerFormat({ const statusTextColors = ${JSON.stringify(statusTextColors)}; const statusIconColors = ${JSON.stringify(statusIconColors)}; const feedbackBackgroundColors = ${JSON.stringify(feedbackBackgroundColors)}; + const feedbackBorderColors = ${JSON.stringify(feedbackBorderColors)}; const feedbackTextColors = ${JSON.stringify(feedbackTextColors)}; const feedbackIconColors = ${JSON.stringify(feedbackIconColors)}; @@ -233,6 +235,7 @@ StyleDictionary.registerFormat({ const borderColor = { ...colors, ...borderColors, + ...feedbackBorderColors, dropdown: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.dropdown.border.color)}', 'dropdown-divider': '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.dropdown.divider.color)}', }; diff --git a/src/tokens/build/css/tokens.css b/src/tokens/build/css/tokens.css index 4ce28e4abd7dcd9c167803f70e6d467a94791414..10cc625b997be4be50a45c22f77cf5315d35a25a 100644 --- a/src/tokens/build/css/tokens.css +++ b/src/tokens/build/css/tokens.css @@ -812,22 +812,28 @@ --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /* Used for checkbox and radio button state indicators. */ --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /* Used for disabled checkbox and radio button state indicators. */ --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /* Used for a background associated with strong feedback like a tooltip or toast message. */ + --gl-feedback-strong-border-color: var(--gl-color-alpha-0); /* Used for a border associated with strong feedback like a tooltip or toast message. */ --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */ --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */ --gl-feedback-strong-link-color: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */ --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */ + --gl-feedback-neutral-border-color: var(--gl-color-neutral-300); /* Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-text-color: var(--gl-color-neutral-700); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ + --gl-feedback-info-border-color: var(--gl-color-blue-300); /* Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-text-color: var(--gl-color-blue-700); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */ + --gl-feedback-success-border-color: var(--gl-color-green-300); /* Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-text-color: var(--gl-color-green-700); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */ + --gl-feedback-warning-border-color: var(--gl-color-orange-300); /* Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-text-color: var(--gl-color-orange-700); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ + --gl-feedback-danger-border-color: var(--gl-color-red-300); /* Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --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. */ diff --git a/src/tokens/build/css/tokens.dark.css b/src/tokens/build/css/tokens.dark.css index bb31a90056fb9716debed5daa3a4dbbccd5b69ce..6c1f0a3003568a9cf6ad332dc84243c734f86003 100644 --- a/src/tokens/build/css/tokens.dark.css +++ b/src/tokens/build/css/tokens.dark.css @@ -812,22 +812,28 @@ --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /* Used for checkbox and radio button state indicators. */ --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /* Used for disabled checkbox and radio button state indicators. */ --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /* Used for a background associated with strong feedback like a tooltip or toast message. */ + --gl-feedback-strong-border-color: var(--gl-color-alpha-0); /* Used for a border associated with strong feedback like a tooltip or toast message. */ --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */ --gl-feedback-strong-icon-color: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */ --gl-feedback-strong-link-color: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */ --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */ + --gl-feedback-neutral-border-color: var(--gl-color-neutral-800); /* Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */ --gl-feedback-info-background-color: var(--gl-color-blue-950); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ + --gl-feedback-info-border-color: var(--gl-color-blue-800); /* Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */ --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */ + --gl-feedback-success-border-color: var(--gl-color-green-800); /* Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-text-color: var(--gl-color-green-200); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */ --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */ + --gl-feedback-warning-border-color: var(--gl-color-orange-800); /* Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */ --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ + --gl-feedback-danger-border-color: var(--gl-color-red-800); /* Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */ --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. */ diff --git a/src/tokens/build/figma/semantic.tokens.json b/src/tokens/build/figma/semantic.tokens.json index c8f5f5fd7bafd3d09784869559df7ee0d84dad64..e3edda544e75586d61dacacc8932372ab2f2e689 100644 --- a/src/tokens/build/figma/semantic.tokens.json +++ b/src/tokens/build/figma/semantic.tokens.json @@ -857,6 +857,13 @@ "$description": "Used for a background associated with strong feedback like a tooltip or toast message." } }, + "border": { + "color": { + "$value": "{color.alpha.0}", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message." + } + }, "text": { "color": { "$value": "{color.neutral.0}", @@ -890,6 +897,16 @@ "$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency." } }, + "border": { + "color": { + "$value": { + "default": "{color.neutral.300}", + "dark": "{color.neutral.800}" + }, + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency." + } + }, "text": { "color": { "$value": { @@ -922,6 +939,16 @@ "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action." } }, + "border": { + "color": { + "$value": { + "default": "{color.blue.300}", + "dark": "{color.blue.800}" + }, + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action." + } + }, "text": { "color": { "$value": { @@ -954,6 +981,16 @@ "$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action." } }, + "border": { + "color": { + "$value": { + "default": "{color.green.300}", + "dark": "{color.green.800}" + }, + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action." + } + }, "text": { "color": { "$value": { @@ -986,6 +1023,16 @@ "$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information." } }, + "border": { + "color": { + "$value": { + "default": "{color.orange.300}", + "dark": "{color.orange.800}" + }, + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information." + } + }, "text": { "color": { "$value": { @@ -1018,6 +1065,16 @@ "$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." } }, + "border": { + "color": { + "$value": { + "default": "{color.red.300}", + "dark": "{color.red.800}" + }, + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." + } + }, "text": { "color": { "$value": { diff --git a/src/tokens/build/js/tokens.dark.js b/src/tokens/build/js/tokens.dark.js index 39bebd2bff2e8d3c3d4802b7978d9322a0f9c94a..119a45a3be2659dba127590427e8a069e11b4230 100644 --- a/src/tokens/build/js/tokens.dark.js +++ b/src/tokens/build/js/tokens.dark.js @@ -985,22 +985,28 @@ export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d'; export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d'; export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f'; +export const GL_FEEDBACK_STRONG_BORDER_COLOR = 'transparent'; export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff'; export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff'; export const GL_FEEDBACK_STRONG_LINK_COLOR = '#63a6e9'; export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; +export const GL_FEEDBACK_NEUTRAL_BORDER_COLOR = '#3a383f'; export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3'; export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#002850'; +export const GL_FEEDBACK_INFO_BORDER_COLOR = '#064787'; export const GL_FEEDBACK_INFO_TEXT_COLOR = '#9dc7f1'; export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#0a4020'; +export const GL_FEEDBACK_SUCCESS_BORDER_COLOR = '#0d532a'; export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#91d4a8'; export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#52b87a'; export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#5c2900'; +export const GL_FEEDBACK_WARNING_BORDER_COLOR = '#703800'; export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#e9be74'; export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; +export const GL_FEEDBACK_DANGER_BORDER_COLOR = '#8d1300'; export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa'; export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f6806d'; export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc'; diff --git a/src/tokens/build/js/tokens.js b/src/tokens/build/js/tokens.js index 1b5e5b84f921b6aeda028c9411bf351cb6f8d38b..166e63471685248b8e6dabf68c815c6e7fc5ac9d 100644 --- a/src/tokens/build/js/tokens.js +++ b/src/tokens/build/js/tokens.js @@ -985,22 +985,28 @@ export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f'; +export const GL_FEEDBACK_STRONG_BORDER_COLOR = 'transparent'; export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff'; export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff'; export const GL_FEEDBACK_STRONG_LINK_COLOR = '#63a6e9'; export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; +export const GL_FEEDBACK_NEUTRAL_BORDER_COLOR = '#a4a3a8'; export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#4c4b51'; export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; +export const GL_FEEDBACK_INFO_BORDER_COLOR = '#63a6e9'; export const GL_FEEDBACK_INFO_TEXT_COLOR = '#0b5cad'; export const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; +export const GL_FEEDBACK_SUCCESS_BORDER_COLOR = '#52b87a'; export const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#24663b'; export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; +export const GL_FEEDBACK_WARNING_BORDER_COLOR = '#d99530'; export const GL_FEEDBACK_WARNING_TEXT_COLOR = '#8f4700'; export const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; +export const GL_FEEDBACK_DANGER_BORDER_COLOR = '#f6806d'; export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#ae1800'; export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb'; diff --git a/src/tokens/build/json/tokens.dark.json b/src/tokens/build/json/tokens.dark.json index 48297799d730399d710a66682d3d9d2731e47c5e..609c9d3eae194f80ff5641bafebc3cad8b5cc489 100644 --- a/src/tokens/build/json/tokens.dark.json +++ b/src/tokens/build/json/tokens.dark.json @@ -22560,6 +22560,28 @@ ] } }, + "border": { + "color": { + "$value": "transparent", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": "{color.alpha.0}", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message." + }, + "name": "FEEDBACK_STRONG_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "strong", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#fff", @@ -22653,6 +22675,31 @@ ] } }, + "border": { + "color": { + "$value": "#3a383f", + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.neutral.300}", + "dark": "{color.neutral.800}" + }, + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency." + }, + "name": "FEEDBACK_NEUTRAL_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "neutral", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#bfbfc3", @@ -22730,6 +22777,31 @@ ] } }, + "border": { + "color": { + "$value": "#064787", + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.blue.300}", + "dark": "{color.blue.800}" + }, + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action." + }, + "name": "FEEDBACK_INFO_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "info", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#9dc7f1", @@ -22807,6 +22879,31 @@ ] } }, + "border": { + "color": { + "$value": "#0d532a", + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.green.300}", + "dark": "{color.green.800}" + }, + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action." + }, + "name": "FEEDBACK_SUCCESS_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "success", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#91d4a8", @@ -22884,6 +22981,31 @@ ] } }, + "border": { + "color": { + "$value": "#703800", + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.300}", + "dark": "{color.orange.800}" + }, + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information." + }, + "name": "FEEDBACK_WARNING_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "warning", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#e9be74", @@ -22961,6 +23083,31 @@ ] } }, + "border": { + "color": { + "$value": "#8d1300", + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.red.300}", + "dark": "{color.red.800}" + }, + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." + }, + "name": "FEEDBACK_DANGER_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "danger", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#fcb5aa", diff --git a/src/tokens/build/json/tokens.json b/src/tokens/build/json/tokens.json index 10e00a0bb3b14174835711757f4cb147c6f8c532..8c809d0e1ced760d946ac6ebab4d5e7f5e4f9deb 100644 --- a/src/tokens/build/json/tokens.json +++ b/src/tokens/build/json/tokens.json @@ -22560,6 +22560,28 @@ ] } }, + "border": { + "color": { + "$value": "transparent", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": "{color.alpha.0}", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message." + }, + "name": "FEEDBACK_STRONG_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "strong", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#fff", @@ -22653,6 +22675,31 @@ ] } }, + "border": { + "color": { + "$value": "#a4a3a8", + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.neutral.300}", + "dark": "{color.neutral.800}" + }, + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency." + }, + "name": "FEEDBACK_NEUTRAL_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "neutral", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#4c4b51", @@ -22730,6 +22777,31 @@ ] } }, + "border": { + "color": { + "$value": "#63a6e9", + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.blue.300}", + "dark": "{color.blue.800}" + }, + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action." + }, + "name": "FEEDBACK_INFO_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "info", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#0b5cad", @@ -22807,6 +22879,31 @@ ] } }, + "border": { + "color": { + "$value": "#52b87a", + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.green.300}", + "dark": "{color.green.800}" + }, + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action." + }, + "name": "FEEDBACK_SUCCESS_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "success", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#24663b", @@ -22884,6 +22981,31 @@ ] } }, + "border": { + "color": { + "$value": "#d99530", + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.orange.300}", + "dark": "{color.orange.800}" + }, + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information." + }, + "name": "FEEDBACK_WARNING_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "warning", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#8f4700", @@ -22961,6 +23083,31 @@ ] } }, + "border": { + "color": { + "$value": "#f6806d", + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.", + "filePath": "src/tokens/semantic/feedback.tokens.json", + "isSource": true, + "original": { + "$value": { + "default": "{color.red.300}", + "dark": "{color.red.800}" + }, + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." + }, + "name": "FEEDBACK_DANGER_BORDER_COLOR", + "attributes": {}, + "path": [ + "feedback", + "danger", + "border", + "color" + ] + } + }, "text": { "color": { "$value": "#ae1800", diff --git a/src/tokens/build/scss/_tokens.dark.scss b/src/tokens/build/scss/_tokens.dark.scss index 5ae5e00927fd9c7107a8626e3ecf211566333298..c6a21cb16a0b8b15203d1557d68e3d353de6585a 100644 --- a/src/tokens/build/scss/_tokens.dark.scss +++ b/src/tokens/build/scss/_tokens.dark.scss @@ -810,22 +810,28 @@ $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators. $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators. $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message. +$gl-feedback-strong-border-color: $gl-color-alpha-0; // Used for a border associated with strong feedback like a tooltip or toast message. $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background. $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background. $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background. $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. +$gl-feedback-neutral-border-color: $gl-color-neutral-800; // Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-info-background-color: $gl-color-blue-950; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. +$gl-feedback-info-border-color: $gl-color-blue-800; // Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. +$gl-feedback-success-border-color: $gl-color-green-800; // Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-success-icon-color: $gl-color-green-300; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-warning-background-color: $gl-color-orange-900; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. +$gl-feedback-warning-border-color: $gl-color-orange-800; // Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-warning-text-color: $gl-color-orange-200; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. +$gl-feedback-danger-border-color: $gl-color-red-800; // Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $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. diff --git a/src/tokens/build/scss/_tokens.scss b/src/tokens/build/scss/_tokens.scss index c00ed7b39ed7f4c9b679c6448365925e533c5d32..ebff489a18712aefd2f066a579f40022eb9a65df 100644 --- a/src/tokens/build/scss/_tokens.scss +++ b/src/tokens/build/scss/_tokens.scss @@ -810,22 +810,28 @@ $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators. $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators. $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message. +$gl-feedback-strong-border-color: $gl-color-alpha-0; // Used for a border associated with strong feedback like a tooltip or toast message. $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background. $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background. $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background. $gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. +$gl-feedback-neutral-border-color: $gl-color-neutral-300; // Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. $gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. +$gl-feedback-info-border-color: $gl-color-blue-300; // Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. $gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. +$gl-feedback-success-border-color: $gl-color-green-300; // Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. $gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. +$gl-feedback-warning-border-color: $gl-color-orange-300; // Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. +$gl-feedback-danger-border-color: $gl-color-red-300; // Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. $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. diff --git a/src/tokens/build/scss/_tokens_custom_properties.scss b/src/tokens/build/scss/_tokens_custom_properties.scss index f3751eaf0b0c3c88f384d797557344b78fa8d19f..59d82e70e7c529ba1ec962aaf466097d09aa385d 100644 --- a/src/tokens/build/scss/_tokens_custom_properties.scss +++ b/src/tokens/build/scss/_tokens_custom_properties.scss @@ -985,22 +985,28 @@ $gl-control-placeholder-color: var(--gl-control-placeholder-color); $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected); $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled); $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color); +$gl-feedback-strong-border-color: var(--gl-feedback-strong-border-color); $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color); $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color); $gl-feedback-strong-link-color: var(--gl-feedback-strong-link-color); $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color); +$gl-feedback-neutral-border-color: var(--gl-feedback-neutral-border-color); $gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color); $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color); $gl-feedback-info-background-color: var(--gl-feedback-info-background-color); +$gl-feedback-info-border-color: var(--gl-feedback-info-border-color); $gl-feedback-info-text-color: var(--gl-feedback-info-text-color); $gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color); $gl-feedback-success-background-color: var(--gl-feedback-success-background-color); +$gl-feedback-success-border-color: var(--gl-feedback-success-border-color); $gl-feedback-success-text-color: var(--gl-feedback-success-text-color); $gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color); $gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color); +$gl-feedback-warning-border-color: var(--gl-feedback-warning-border-color); $gl-feedback-warning-text-color: var(--gl-feedback-warning-text-color); $gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color); $gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color); +$gl-feedback-danger-border-color: var(--gl-feedback-danger-border-color); $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); diff --git a/src/tokens/build/tailwind/tokens.cjs b/src/tokens/build/tailwind/tokens.cjs index 1333e1179c5769c2a46e703af26b5b653e0c8d2c..cea6ab729abd95f48efb05e3a39a4569ca71e6a9 100644 --- a/src/tokens/build/tailwind/tokens.cjs +++ b/src/tokens/build/tailwind/tokens.cjs @@ -336,6 +336,16 @@ const feedbackBackgroundColors = { 'var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))', 'feedback-danger': 'var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))', }; +const feedbackBorderColors = { + 'feedback-strong': 'var(--gl-feedback-strong-border-color, var(--gl-color-alpha-0, transparent))', + 'feedback-neutral': + 'var(--gl-feedback-neutral-border-color, var(--gl-color-neutral-300, #a4a3a8))', + 'feedback-info': 'var(--gl-feedback-info-border-color, var(--gl-color-blue-300, #63a6e9))', + 'feedback-success': 'var(--gl-feedback-success-border-color, var(--gl-color-green-300, #52b87a))', + 'feedback-warning': + 'var(--gl-feedback-warning-border-color, var(--gl-color-orange-300, #d99530))', + 'feedback-danger': 'var(--gl-feedback-danger-border-color, var(--gl-color-red-300, #f6806d))', +}; const feedbackTextColors = { 'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))', 'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))', @@ -381,6 +391,7 @@ const backgroundColor = { const borderColor = { ...colors, ...borderColors, + ...feedbackBorderColors, 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))', }; diff --git a/src/tokens/semantic/feedback.tokens.json b/src/tokens/semantic/feedback.tokens.json index 671df3822ea2369dfddc33771d4b4bd0ca0c899f..d8e6430ee9dd70b9c7288353b7cf3b2c4ee6844a 100644 --- a/src/tokens/semantic/feedback.tokens.json +++ b/src/tokens/semantic/feedback.tokens.json @@ -8,6 +8,13 @@ "$description": "Used for a background associated with strong feedback like a tooltip or toast message." } }, + "border": { + "color": { + "$value": "{color.alpha.0}", + "$type": "color", + "$description": "Used for a border associated with strong feedback like a tooltip or toast message." + } + }, "text": { "color": { "$value": "{color.neutral.0}", @@ -41,6 +48,16 @@ "$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency." } }, + "border": { + "color": { + "$value": { + "default": "{color.neutral.300}", + "dark": "{color.neutral.800}" + }, + "$type": "color", + "$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency." + } + }, "text": { "color": { "$value": { @@ -73,6 +90,16 @@ "$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action." } }, + "border": { + "color": { + "$value": { + "default": "{color.blue.300}", + "dark": "{color.blue.800}" + }, + "$type": "color", + "$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action." + } + }, "text": { "color": { "$value": { @@ -105,6 +132,16 @@ "$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action." } }, + "border": { + "color": { + "$value": { + "default": "{color.green.300}", + "dark": "{color.green.800}" + }, + "$type": "color", + "$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action." + } + }, "text": { "color": { "$value": { @@ -137,6 +174,16 @@ "$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information." } }, + "border": { + "color": { + "$value": { + "default": "{color.orange.300}", + "dark": "{color.orange.800}" + }, + "$type": "color", + "$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information." + } + }, "text": { "color": { "$value": { @@ -169,6 +216,16 @@ "$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." } }, + "border": { + "color": { + "$value": { + "default": "{color.red.300}", + "dark": "{color.red.800}" + }, + "$type": "color", + "$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention." + } + }, "text": { "color": { "$value": { diff --git a/src/tokens/semantic/feedback.tokens.stories.js b/src/tokens/semantic/feedback.tokens.stories.js index 19033baa9d71f7dc6c572cee838e62c986a7a87d..fb8d9845875e1c1602c4d3c1abd0b80a539f2c8e 100644 --- a/src/tokens/semantic/feedback.tokens.stories.js +++ b/src/tokens/semantic/feedback.tokens.stories.js @@ -4,27 +4,27 @@ export const Default = () => ({ components: { GlIcon }, template: `
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-feedback-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-feedback-default-1-snap.png index 130dcf42c8c83387b4bc3e46b354f5c9be3dc6ba..73243b8d9a8f5edd73782949915c75fe03e68d8f 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-feedback-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-feedback-default-1-snap.png differ