diff --git a/src/components/base/alert/alert.scss b/src/components/base/alert/alert.scss index 3f9a8648bc6f6b66b1cbfd2ff423d78eedb8e8a6..2c21607b59d3a750230014886d1d5227c0d89cc8 100644 --- a/src/components/base/alert/alert.scss +++ b/src/components/base/alert/alert.scss @@ -14,12 +14,10 @@ $gl-alert-top-border-size: 2px; $background-color, $title-color, $border-top-color, - $border-bottom-color, $icon-color ) { .gl-alert-#{$variant} { background-color: $background-color; - border-bottom: 1px solid $border-bottom-color; &::before { background: linear-gradient(to right, transparent 0%, $border-top-color 50%, transparent 100%); @@ -38,7 +36,7 @@ $gl-alert-top-border-size: 2px; } .gl-alert { - @apply gl-text-base; + @apply gl-text-base gl-border-1 gl-border-solid gl-border-default; position: relative; padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x}); @apply gl-py-5; @@ -133,7 +131,6 @@ $gl-alert-top-border-size: 2px; $background-color: var(--gl-alert-danger-background-color), $title-color: var(--gl-alert-danger-title-color), $border-top-color: var(--gl-alert-danger-border-top-color), - $border-bottom-color: var(--gl-alert-danger-border-bottom-color), $icon-color: var(--gl-feedback-danger-icon-color), ); @@ -142,7 +139,6 @@ $gl-alert-top-border-size: 2px; $background-color: var(--gl-alert-warning-background-color), $title-color: var(--gl-alert-warning-title-color), $border-top-color: var(--gl-alert-warning-border-top-color), - $border-bottom-color: var(--gl-alert-warning-border-bottom-color), $icon-color: var(--gl-feedback-warning-icon-color), ); @@ -151,7 +147,6 @@ $gl-alert-top-border-size: 2px; $background-color: var(--gl-alert-neutral-background-color), $title-color: var(--gl-alert-neutral-title-color), $border-top-color: var(--gl-alert-neutral-border-top-color), - $border-bottom-color: var(--gl-alert-neutral-border-bottom-color), $icon-color: var(--gl-feedback-neutral-icon-color), ); @@ -160,7 +155,6 @@ $gl-alert-top-border-size: 2px; $background-color: var(--gl-alert-info-background-color), $title-color: var(--gl-alert-info-title-color), $border-top-color: var(--gl-alert-info-border-top-color), - $border-bottom-color: var(--gl-alert-info-border-bottom-color), $icon-color: var(--gl-feedback-info-icon-color), ); @@ -169,6 +163,5 @@ $gl-alert-top-border-size: 2px; $background-color: var(--gl-alert-success-background-color), $title-color: var(--gl-alert-success-title-color), $border-top-color: var(--gl-alert-success-border-top-color), - $border-bottom-color: var(--gl-alert-success-border-bottom-color), $icon-color: var(--gl-feedback-success-icon-color), ); diff --git a/src/tokens/build/css/tokens.css b/src/tokens/build/css/tokens.css index 5745f9e3f4065348d6eadcbb888c81e5b764569e..def4d593b196f286847e47bdac081a29a9340a19 100644 --- a/src/tokens/build/css/tokens.css +++ b/src/tokens/build/css/tokens.css @@ -510,16 +510,11 @@ --gl-text-primary: #28272d; /* Use text.color.default instead. */ --gl-text-secondary: #737278; /* Use text.color.subtle instead. */ --gl-text-tertiary: #89888d; /* Use text.color.disabled instead. */ - --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */ - --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */ - --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of an info alert. */ - --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */ - --gl-alert-success-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a success alert. */ - --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */ - --gl-alert-warning-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a warning alert. */ - --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */ - --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a danger alert. */ - --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */ + --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */ + --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */ + --gl-alert-success-border-top-color: var(--gl-color-green-400); /* Used for the border color of a success alert. */ + --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /* Used for the border color of a warning alert. */ + --gl-alert-danger-border-top-color: var(--gl-color-red-400); /* Used for the border color of a danger alert. */ --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */ --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */ --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /* Red text color for avatar fallback with no particular meaning. */ diff --git a/src/tokens/build/css/tokens.dark.css b/src/tokens/build/css/tokens.dark.css index faef4fa1be740778124c1fe3cc602998b816044b..16a6ee9fafd5409166dcfdad8b1e1c4f490332f0 100644 --- a/src/tokens/build/css/tokens.dark.css +++ b/src/tokens/build/css/tokens.dark.css @@ -511,15 +511,10 @@ --gl-text-secondary: #89888d; /* Use text.color.subtle instead. */ --gl-text-tertiary: #737278; /* Use text.color.disabled instead. */ --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */ - --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */ --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */ - --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */ --gl-alert-success-border-top-color: var(--gl-color-green-400); /* Used for the border color of a success alert. */ - --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */ --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /* Used for the border color of a warning alert. */ - --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */ --gl-alert-danger-border-top-color: var(--gl-color-red-400); /* Used for the border color of a danger alert. */ - --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */ --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */ --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */ --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */ diff --git a/src/tokens/build/figma/contextual.tokens.json b/src/tokens/build/figma/contextual.tokens.json index 4047fdcac61d3f7d10b4dabe423bed54c865a441..abab901072cb252b15ffd36d7e29b826e4263d62 100644 --- a/src/tokens/build/figma/contextual.tokens.json +++ b/src/tokens/build/figma/contextual.tokens.json @@ -24,20 +24,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.neutral.400}" - }, + "$value": "{color.neutral.400}", "$type": "color", "$description": "Used for the border center color of a neutral alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert." - } } } }, @@ -65,20 +55,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.blue.400}" - }, + "$value": "{color.blue.400}", "$type": "color", "$description": "Used for the border color of an info alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of an info alert." - } } } }, @@ -106,20 +86,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.green.400}" - }, + "$value": "{color.green.400}", "$type": "color", "$description": "Used for the border color of a success alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a success alert." - } } } }, @@ -147,20 +117,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.orange.400}" - }, + "$value": "{color.orange.400}", "$type": "color", "$description": "Used for the border color of a warning alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert." - } } } }, @@ -188,20 +148,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.red.400}" - }, + "$value": "{color.red.400}", "$type": "color", "$description": "Used for the border color of a danger alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert." - } } } }, diff --git a/src/tokens/build/js/tokens.dark.js b/src/tokens/build/js/tokens.dark.js index 250fc5c4b4e90390443656e24e46369534634f9d..8ca992ec1cd9e44b17a488a182e9d423b02c897e 100644 --- a/src/tokens/build/js/tokens.dark.js +++ b/src/tokens/build/js/tokens.dark.js @@ -241,23 +241,18 @@ export const GL_LINE_HEIGHT_52 = '3.25rem'; export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff'; export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d'; export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; -export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; export const GL_ALERT_INFO_TITLE_COLOR = '#63a6e9'; export const GL_ALERT_INFO_BACKGROUND_COLOR = '#28272d'; export const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; -export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; export const GL_ALERT_SUCCESS_TITLE_COLOR = '#52b87a'; export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#28272d'; export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; -export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; export const GL_ALERT_WARNING_TITLE_COLOR = '#d99530'; export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#28272d'; export const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; -export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; export const GL_ALERT_DANGER_TITLE_COLOR = '#f6806d'; export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d'; export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; -export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; diff --git a/src/tokens/build/js/tokens.js b/src/tokens/build/js/tokens.js index 5103636e09a727f27f60e3e56585ec9426ac2074..9d97bd980d156a7b75f1f4608ca7efd2b678cdf8 100644 --- a/src/tokens/build/js/tokens.js +++ b/src/tokens/build/js/tokens.js @@ -240,24 +240,19 @@ export const GL_LINE_HEIGHT_44 = '2.75rem'; export const GL_LINE_HEIGHT_52 = '3.25rem'; export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#18171d'; export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#ececef'; -export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = 'transparent'; -export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; +export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; export const GL_ALERT_INFO_TITLE_COLOR = '#18171d'; export const GL_ALERT_INFO_BACKGROUND_COLOR = '#e9f3fc'; -export const GL_ALERT_INFO_BORDER_TOP_COLOR = 'transparent'; -export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; +export const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; export const GL_ALERT_SUCCESS_TITLE_COLOR = '#18171d'; export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; -export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = 'transparent'; -export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; +export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; export const GL_ALERT_WARNING_TITLE_COLOR = '#18171d'; export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#fdf1dd'; -export const GL_ALERT_WARNING_BORDER_TOP_COLOR = 'transparent'; -export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; +export const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; export const GL_ALERT_DANGER_TITLE_COLOR = '#18171d'; export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#fcf1ef'; -export const GL_ALERT_DANGER_BORDER_TOP_COLOR = 'transparent'; -export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; +export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#812713'; diff --git a/src/tokens/build/json/tokens.dark.json b/src/tokens/build/json/tokens.dark.json index 5ed8cf7de48c5c0f4ec925768df1d1a0ced5be95..fc92d631a7ce69f2c5f69b8d6a084713c3543374 100644 --- a/src/tokens/build/json/tokens.dark.json +++ b/src/tokens/build/json/tokens.dark.json @@ -4126,10 +4126,7 @@ "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.neutral.400}" - }, + "$value": "{color.neutral.400}", "$type": "color", "$description": "Used for the border center color of a neutral alert." }, @@ -4143,29 +4140,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert." - }, - "name": "ALERT_NEUTRAL_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "neutral", - "border", - "bottom", - "color" - ] - } } } }, @@ -4229,10 +4203,7 @@ "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.blue.400}" - }, + "$value": "{color.blue.400}", "$type": "color", "$description": "Used for the border color of an info alert." }, @@ -4246,29 +4217,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of an info alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of an info alert." - }, - "name": "ALERT_INFO_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "info", - "border", - "bottom", - "color" - ] - } } } }, @@ -4332,10 +4280,7 @@ "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.green.400}" - }, + "$value": "{color.green.400}", "$type": "color", "$description": "Used for the border color of a success alert." }, @@ -4349,29 +4294,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a success alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a success alert." - }, - "name": "ALERT_SUCCESS_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "success", - "border", - "bottom", - "color" - ] - } } } }, @@ -4435,10 +4357,7 @@ "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.orange.400}" - }, + "$value": "{color.orange.400}", "$type": "color", "$description": "Used for the border color of a warning alert." }, @@ -4452,29 +4371,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert." - }, - "name": "ALERT_WARNING_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "warning", - "border", - "bottom", - "color" - ] - } } } }, @@ -4538,10 +4434,7 @@ "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.red.400}" - }, + "$value": "{color.red.400}", "$type": "color", "$description": "Used for the border color of a danger alert." }, @@ -4555,29 +4448,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert." - }, - "name": "ALERT_DANGER_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "danger", - "border", - "bottom", - "color" - ] - } } } } diff --git a/src/tokens/build/json/tokens.json b/src/tokens/build/json/tokens.json index efe71115575df3f6c7696255376e481c8797b5c1..d53a78a330326d5cedbe808be782e4b1f093516d 100644 --- a/src/tokens/build/json/tokens.json +++ b/src/tokens/build/json/tokens.json @@ -4120,16 +4120,13 @@ "border": { "top": { "color": { - "$value": "transparent", + "$value": "#89888d", "$type": "color", "$description": "Used for the border center color of a neutral alert.", "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.neutral.400}" - }, + "$value": "{color.neutral.400}", "$type": "color", "$description": "Used for the border center color of a neutral alert." }, @@ -4143,29 +4140,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert." - }, - "name": "ALERT_NEUTRAL_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "neutral", - "border", - "bottom", - "color" - ] - } } } }, @@ -4223,16 +4197,13 @@ "border": { "top": { "color": { - "$value": "transparent", + "$value": "#428fdc", "$type": "color", "$description": "Used for the border color of an info alert.", "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.blue.400}" - }, + "$value": "{color.blue.400}", "$type": "color", "$description": "Used for the border color of an info alert." }, @@ -4246,29 +4217,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of an info alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of an info alert." - }, - "name": "ALERT_INFO_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "info", - "border", - "bottom", - "color" - ] - } } } }, @@ -4326,16 +4274,13 @@ "border": { "top": { "color": { - "$value": "transparent", + "$value": "#2da160", "$type": "color", "$description": "Used for the border color of a success alert.", "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.green.400}" - }, + "$value": "{color.green.400}", "$type": "color", "$description": "Used for the border color of a success alert." }, @@ -4349,29 +4294,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a success alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a success alert." - }, - "name": "ALERT_SUCCESS_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "success", - "border", - "bottom", - "color" - ] - } } } }, @@ -4429,16 +4351,13 @@ "border": { "top": { "color": { - "$value": "transparent", + "$value": "#c17d10", "$type": "color", "$description": "Used for the border color of a warning alert.", "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.orange.400}" - }, + "$value": "{color.orange.400}", "$type": "color", "$description": "Used for the border color of a warning alert." }, @@ -4452,29 +4371,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert." - }, - "name": "ALERT_WARNING_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "warning", - "border", - "bottom", - "color" - ] - } } } }, @@ -4532,16 +4428,13 @@ "border": { "top": { "color": { - "$value": "transparent", + "$value": "#ec5941", "$type": "color", "$description": "Used for the border color of a danger alert.", "filePath": "src/tokens/contextual/alert.tokens.json", "isSource": true, "original": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.red.400}" - }, + "$value": "{color.red.400}", "$type": "color", "$description": "Used for the border color of a danger alert." }, @@ -4555,29 +4448,6 @@ "color" ] } - }, - "bottom": { - "color": { - "$value": "transparent", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert.", - "filePath": "src/tokens/contextual/alert.tokens.json", - "isSource": true, - "original": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert." - }, - "name": "ALERT_DANGER_BORDER_BOTTOM_COLOR", - "attributes": {}, - "path": [ - "alert", - "danger", - "border", - "bottom", - "color" - ] - } } } } diff --git a/src/tokens/build/scss/_tokens.dark.scss b/src/tokens/build/scss/_tokens.dark.scss index 274fe09736408ee743c165c89206434e64fc4dca..2d291dc0062c5632cea2fed76dd11e9618c36e77 100644 --- a/src/tokens/build/scss/_tokens.dark.scss +++ b/src/tokens/build/scss/_tokens.dark.scss @@ -509,15 +509,10 @@ $gl-text-primary: #ececef; // Use text.color.default instead. $gl-text-secondary: #89888d; // Use text.color.subtle instead. $gl-text-tertiary: #737278; // Use text.color.disabled instead. $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert. -$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert. $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert. -$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert. $gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert. -$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert. $gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert. -$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert. $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert. -$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert. $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar. $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state. $gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning. diff --git a/src/tokens/build/scss/_tokens.scss b/src/tokens/build/scss/_tokens.scss index 736559c0ae94b58fbe71390cfff8ba6af7931b18..1c29fbd3ce9a4a3a804e3f10ec540fbe667ae3c5 100644 --- a/src/tokens/build/scss/_tokens.scss +++ b/src/tokens/build/scss/_tokens.scss @@ -508,16 +508,11 @@ $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for t $gl-text-primary: #28272d; // Use text.color.default instead. $gl-text-secondary: #737278; // Use text.color.subtle instead. $gl-text-tertiary: #89888d; // Use text.color.disabled instead. -$gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert. -$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert. -$gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert. -$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert. -$gl-alert-success-border-top-color: $gl-color-alpha-0; // Used for the border color of a success alert. -$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert. -$gl-alert-warning-border-top-color: $gl-color-alpha-0; // Used for the border color of a warning alert. -$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert. -$gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border color of a danger alert. -$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert. +$gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert. +$gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert. +$gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert. +$gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert. +$gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert. $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar. $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state. $gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning. diff --git a/src/tokens/build/scss/_tokens_custom_properties.scss b/src/tokens/build/scss/_tokens_custom_properties.scss index f3751eaf0b0c3c88f384d797557344b78fa8d19f..688bda04491093689a09f3be0f8db8e12ac417c5 100644 --- a/src/tokens/build/scss/_tokens_custom_properties.scss +++ b/src/tokens/build/scss/_tokens_custom_properties.scss @@ -241,23 +241,18 @@ $gl-line-height-52: var(--gl-line-height-52); $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color); $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color); $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color); -$gl-alert-neutral-border-bottom-color: var(--gl-alert-neutral-border-bottom-color); $gl-alert-info-title-color: var(--gl-alert-info-title-color); $gl-alert-info-background-color: var(--gl-alert-info-background-color); $gl-alert-info-border-top-color: var(--gl-alert-info-border-top-color); -$gl-alert-info-border-bottom-color: var(--gl-alert-info-border-bottom-color); $gl-alert-success-title-color: var(--gl-alert-success-title-color); $gl-alert-success-background-color: var(--gl-alert-success-background-color); $gl-alert-success-border-top-color: var(--gl-alert-success-border-top-color); -$gl-alert-success-border-bottom-color: var(--gl-alert-success-border-bottom-color); $gl-alert-warning-title-color: var(--gl-alert-warning-title-color); $gl-alert-warning-background-color: var(--gl-alert-warning-background-color); $gl-alert-warning-border-top-color: var(--gl-alert-warning-border-top-color); -$gl-alert-warning-border-bottom-color: var(--gl-alert-warning-border-bottom-color); $gl-alert-danger-title-color: var(--gl-alert-danger-title-color); $gl-alert-danger-background-color: var(--gl-alert-danger-background-color); $gl-alert-danger-border-top-color: var(--gl-alert-danger-border-top-color); -$gl-alert-danger-border-bottom-color: var(--gl-alert-danger-border-bottom-color); $gl-avatar-border-color-default: var(--gl-avatar-border-color-default); $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover); $gl-avatar-fallback-text-color-red: var(--gl-avatar-fallback-text-color-red); diff --git a/src/tokens/contextual/alert.tokens.json b/src/tokens/contextual/alert.tokens.json index 849dcb7a33a5dce75426ed3112db1b9090c63174..c17e5e014825040ab88d123099d351ca16b468a7 100644 --- a/src/tokens/contextual/alert.tokens.json +++ b/src/tokens/contextual/alert.tokens.json @@ -24,20 +24,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.neutral.400}" - }, + "$value": "{color.neutral.400}", "$type": "color", "$description": "Used for the border center color of a neutral alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a neutral alert." - } } } }, @@ -65,20 +55,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.blue.400}" - }, + "$value": "{color.blue.400}", "$type": "color", "$description": "Used for the border color of an info alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of an info alert." - } } } }, @@ -106,20 +86,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.green.400}" - }, + "$value": "{color.green.400}", "$type": "color", "$description": "Used for the border color of a success alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a success alert." - } } } }, @@ -147,20 +117,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.orange.400}" - }, + "$value": "{color.orange.400}", "$type": "color", "$description": "Used for the border color of a warning alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a warning alert." - } } } }, @@ -188,20 +148,10 @@ "border": { "top": { "color": { - "$value": { - "default": "{color.alpha.0}", - "dark": "{color.red.400}" - }, + "$value": "{color.red.400}", "$type": "color", "$description": "Used for the border color of a danger alert." } - }, - "bottom": { - "color": { - "$value": "{color.alpha.0}", - "$type": "color", - "$description": "Used for the border bottom color of a danger alert." - } } } } diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-default-1-snap.png index 514fcdb2483fb1c5088049a1243e2e6c5e0e1a6b..5acbf215a9a7b9128d41bb5471df3a7237e9c93e 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-default-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-increased-spacing-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-increased-spacing-1-snap.png index cf602f877ac5b48a6a200a8e6d2f710ddd0042b7..ed34808758708b2ac410b7a3ee8a4ac92009c3ad 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-increased-spacing-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-increased-spacing-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-sticky-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-sticky-1-snap.png index 570e2eff159419b538ef9285aa0b82e9d3929e76..d69823f3b192996fdf35fa8d7a7ae16a0c5c5a58 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-sticky-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-sticky-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-titled-warning-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-titled-warning-1-snap.png index 36132634dc89fc17f8ffa22c48df635ccd13384d..8f363895dd263dbd30bbf612d651cfe1f6716c9f 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-titled-warning-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-titled-warning-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-undismissible-danger-with-actions-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-undismissible-danger-with-actions-1-snap.png index 3ac61f7230fb91ee30d761f6d859c033caf42976..6b0c6356bb6b0aee68be06f6b36eb06a00449300 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-undismissible-danger-with-actions-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-alert-undismissible-danger-with-actions-1-snap.png differ diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png index 0aad31a373fb416bb60afbfe138beaac9d8c093d..598ccda76254360af420152a05fbfeb845b0b88a 100644 Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-fields-default-1-snap.png differ