@gitlab/ui 137.3.1 → 138.1.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -18,17 +18,17 @@ $gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
 $gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
 $gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
 $gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
-$gl-color-blue-50: #e9f3fc;
-$gl-color-blue-100: #cbe2f9;
-$gl-color-blue-200: #9dc7f1;
-$gl-color-blue-300: #63a6e9;
-$gl-color-blue-400: #428fdc;
-$gl-color-blue-500: #1f75cb;
-$gl-color-blue-600: #2f68b4;
-$gl-color-blue-700: #2f5ca0;
-$gl-color-blue-800: #284779;
-$gl-color-blue-900: #213454;
-$gl-color-blue-950: #1d283e;
+$gl-color-blue-50: #e8f2fd;
+$gl-color-blue-100: #c8e0f9;
+$gl-color-blue-200: #9dc8f2;
+$gl-color-blue-300: #64a7e9;
+$gl-color-blue-400: #3f8edd;
+$gl-color-blue-500: #1f73ca;
+$gl-color-blue-600: #2566b5;
+$gl-color-blue-700: #27599f;
+$gl-color-blue-800: #254581;
+$gl-color-blue-900: #1f3166;
+$gl-color-blue-950: #1d2153;
 $gl-color-brand-white: #fff;
 $gl-color-brand-charcoal: #171321;
 $gl-color-brand-orange-01g: #ffd1bf;
@@ -99,17 +99,17 @@ $gl-color-data-orange-700: #92430a;
 $gl-color-data-orange-800: #6f3500;
 $gl-color-data-orange-900: #5e2f05;
 $gl-color-data-orange-950: #4b2707;
-$gl-color-green-50: #ecf4ee;
-$gl-color-green-100: #c3e6cd;
-$gl-color-green-200: #91d4a8;
-$gl-color-green-300: #52b87a;
-$gl-color-green-400: #2da160;
-$gl-color-green-500: #108548;
-$gl-color-green-600: #2f7549;
-$gl-color-green-700: #306440;
-$gl-color-green-800: #225131;
-$gl-color-green-900: #1e3e28;
-$gl-color-green-950: #17291c;
+$gl-color-green-50: #e6f5ea;
+$gl-color-green-100: #bee6d0;
+$gl-color-green-200: #84d4b6;
+$gl-color-green-300: #35b597;
+$gl-color-green-400: #129c84;
+$gl-color-green-500: #0d8070;
+$gl-color-green-600: #0c7265;
+$gl-color-green-700: #0b645a;
+$gl-color-green-800: #075048;
+$gl-color-green-900: #003c36;
+$gl-color-green-950: #002c26;
 $gl-color-neutral-0: #fff;
 $gl-color-neutral-10: #f7f7f5;
 $gl-color-neutral-50: #ecebea;
@@ -124,39 +124,39 @@ $gl-color-neutral-800: #3a383d;
 $gl-color-neutral-900: #28272d;
 $gl-color-neutral-950: #18171d;
 $gl-color-neutral-1000: #050408;
-$gl-color-orange-50: #fdf1dd;
-$gl-color-orange-100: #f5d9a8;
-$gl-color-orange-200: #e9be74;
-$gl-color-orange-300: #d99530;
-$gl-color-orange-400: #c17d10;
-$gl-color-orange-500: #ab6100;
-$gl-color-orange-600: #995715;
-$gl-color-orange-700: #894b16;
-$gl-color-orange-800: #693c14;
-$gl-color-orange-900: #532e16;
-$gl-color-orange-950: #382315;
-$gl-color-purple-50: #f4f0ff;
-$gl-color-purple-100: #e1d8f9;
-$gl-color-purple-200: #cbbbf2;
-$gl-color-purple-300: #ac93e6;
-$gl-color-purple-400: #9475db;
-$gl-color-purple-500: #7b58cf;
-$gl-color-purple-600: #6a4fb4;
-$gl-color-purple-700: #5c47a6;
-$gl-color-purple-800: #493c83;
-$gl-color-purple-900: #342d59;
-$gl-color-purple-950: #27243e;
-$gl-color-red-50: #fcf1ef;
-$gl-color-red-100: #fdd4cd;
-$gl-color-red-200: #fcb5aa;
-$gl-color-red-300: #f6806d;
-$gl-color-red-400: #ec5941;
-$gl-color-red-500: #dd2b0e;
-$gl-color-red-600: #c02f12;
-$gl-color-red-700: #a32c12;
-$gl-color-red-800: #812713;
-$gl-color-red-900: #582014;
-$gl-color-red-950: #3e1a14;
+$gl-color-orange-50: #fdf0d5;
+$gl-color-orange-100: #fada9c;
+$gl-color-orange-200: #f7b951;
+$gl-color-orange-300: #fb8017;
+$gl-color-orange-400: #e95f21;
+$gl-color-orange-500: #c74816;
+$gl-color-orange-600: #b34013;
+$gl-color-orange-700: #9e3811;
+$gl-color-orange-800: #7d2d0e;
+$gl-color-orange-900: #5d220d;
+$gl-color-orange-950: #461807;
+$gl-color-purple-50: #f4f0fc;
+$gl-color-purple-100: #e1daf7;
+$gl-color-purple-200: #c9beef;
+$gl-color-purple-300: #a997e1;
+$gl-color-purple-400: #927cd7;
+$gl-color-purple-500: #7862c8;
+$gl-color-purple-600: #6a54c0;
+$gl-color-purple-700: #5b46b8;
+$gl-color-purple-800: #483698;
+$gl-color-purple-900: #362676;
+$gl-color-purple-950: #291a5c;
+$gl-color-red-50: #feeef0;
+$gl-color-red-100: #ffd3d7;
+$gl-color-red-200: #ffafb8;
+$gl-color-red-300: #fc7988;
+$gl-color-red-400: #f15168;
+$gl-color-red-500: #de1d4b;
+$gl-color-red-600: #c52042;
+$gl-color-red-700: #ac203a;
+$gl-color-red-800: #891c2f;
+$gl-color-red-900: #641925;
+$gl-color-red-950: #48151d;
 $gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
 $gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
 $gl-font-size-100: 0.75rem; // Used for meta text and small labels.
@@ -242,11 +242,11 @@ $gl-zindex-3: 3;
 $gl-zindex-4: 4;
 $gl-zindex-200: 200;
 $gl-zindex-9999: 9999;
-$gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); // Neutral background for avatar fallback with no particular meaning.
 $gl-broadcast-banner-background-color-blue: #235180; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-green: #1b653f; // Used for the background for the green banner type.
@@ -267,11 +267,11 @@ $gl-broadcast-banner-border-color-red: #580d02; // Used for the border for the r
 $gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
 $gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
-$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.4); // Used for the background of an outlined danger (destructive) button in the default state.
-$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
-$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
+$gl-button-danger-secondary-background-color-default: rgba(241, 81, 104, 0.4); // Used for the background of an outlined danger (destructive) button in the default state.
+$gl-button-danger-secondary-background-color-hover: rgba(241, 81, 104, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
+$gl-button-danger-secondary-background-color-active: rgba(241, 81, 104, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
-$gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); // Used in charts to delineate a threshold area in a chart.
+$gl-chart-threshold-area-color: rgba(222, 29, 75, 0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -388,9 +388,9 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
 $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
 $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
 $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
-$gl-action-danger-background-color-default: rgba(236, 89, 65, 0); // Used for the background of a danger (destructive) action in the default state.
-$gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
-$gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
+$gl-action-danger-background-color-default: rgba(241, 81, 104, 0); // Used for the background of a danger (destructive) action in the default state.
+$gl-action-danger-background-color-hover: rgba(241, 81, 104, 0.4); // Used for the background of a danger (destructive) action in the hover state.
+$gl-action-danger-background-color-active: rgba(241, 81, 104, 0.16); // Used for the background of a danger (destructive) action in the active state.
 $gl-background-color-overlay: rgba(0, 0, 0, 0.64); // Used for an overlay that covers other content.
 $gl-letter-spacing-heading: -0.01em;
 $gl-heading-3-letter-spacing: inherit;
@@ -589,9 +589,9 @@ $gl-button-confirm-secondary-border-color-default: $gl-color-alpha-0; // Used fo
 $gl-button-confirm-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the active state.
 $gl-button-danger-primary-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a danger (destructive) primary button in the default state.
-$gl-button-danger-primary-background-color-default: $gl-color-red-300; // Used for the background of a danger (destructive) primary button in the default state.
-$gl-button-danger-primary-background-color-hover: $gl-color-red-200; // Used for the background of a danger (destructive) primary button in the hover state.
-$gl-button-danger-primary-background-color-active: $gl-color-red-400; // Used for the background of a danger (destructive) primary button in the active state.
+$gl-button-danger-primary-background-color-default: $gl-color-red-400; // Used for the background of a danger (destructive) primary button in the default state.
+$gl-button-danger-primary-background-color-hover: $gl-color-red-300; // Used for the background of a danger (destructive) primary button in the hover state.
+$gl-button-danger-primary-background-color-active: $gl-color-red-200; // Used for the background of a danger (destructive) primary button in the active state.
 $gl-button-danger-primary-border-color-default: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the default state.
 $gl-button-danger-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the hover state.
 $gl-button-danger-primary-border-color-active: $gl-color-alpha-0; // Used for the border of a danger (destructive) primary button in the active state.

package/src/tokens/build/scss/_tokens.scss

@@ -18,17 +18,17 @@ $gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
 $gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
 $gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
 $gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
-$gl-color-blue-50: #e9f3fc;
-$gl-color-blue-100: #cbe2f9;
-$gl-color-blue-200: #9dc7f1;
-$gl-color-blue-300: #63a6e9;
-$gl-color-blue-400: #428fdc;
-$gl-color-blue-500: #1f75cb;
-$gl-color-blue-600: #2f68b4;
-$gl-color-blue-700: #2f5ca0;
-$gl-color-blue-800: #284779;
-$gl-color-blue-900: #213454;
-$gl-color-blue-950: #1d283e;
+$gl-color-blue-50: #e8f2fd;
+$gl-color-blue-100: #c8e0f9;
+$gl-color-blue-200: #9dc8f2;
+$gl-color-blue-300: #64a7e9;
+$gl-color-blue-400: #3f8edd;
+$gl-color-blue-500: #1f73ca;
+$gl-color-blue-600: #2566b5;
+$gl-color-blue-700: #27599f;
+$gl-color-blue-800: #254581;
+$gl-color-blue-900: #1f3166;
+$gl-color-blue-950: #1d2153;
 $gl-color-brand-white: #fff;
 $gl-color-brand-charcoal: #171321;
 $gl-color-brand-orange-01g: #ffd1bf;
@@ -99,17 +99,17 @@ $gl-color-data-orange-700: #92430a;
 $gl-color-data-orange-800: #6f3500;
 $gl-color-data-orange-900: #5e2f05;
 $gl-color-data-orange-950: #4b2707;
-$gl-color-green-50: #ecf4ee;
-$gl-color-green-100: #c3e6cd;
-$gl-color-green-200: #91d4a8;
-$gl-color-green-300: #52b87a;
-$gl-color-green-400: #2da160;
-$gl-color-green-500: #108548;
-$gl-color-green-600: #2f7549;
-$gl-color-green-700: #306440;
-$gl-color-green-800: #225131;
-$gl-color-green-900: #1e3e28;
-$gl-color-green-950: #17291c;
+$gl-color-green-50: #e6f5ea;
+$gl-color-green-100: #bee6d0;
+$gl-color-green-200: #84d4b6;
+$gl-color-green-300: #35b597;
+$gl-color-green-400: #129c84;
+$gl-color-green-500: #0d8070;
+$gl-color-green-600: #0c7265;
+$gl-color-green-700: #0b645a;
+$gl-color-green-800: #075048;
+$gl-color-green-900: #003c36;
+$gl-color-green-950: #002c26;
 $gl-color-neutral-0: #fff;
 $gl-color-neutral-10: #f7f7f5;
 $gl-color-neutral-50: #ecebea;
@@ -124,39 +124,39 @@ $gl-color-neutral-800: #3a383d;
 $gl-color-neutral-900: #28272d;
 $gl-color-neutral-950: #18171d;
 $gl-color-neutral-1000: #050408;
-$gl-color-orange-50: #fdf1dd;
-$gl-color-orange-100: #f5d9a8;
-$gl-color-orange-200: #e9be74;
-$gl-color-orange-300: #d99530;
-$gl-color-orange-400: #c17d10;
-$gl-color-orange-500: #ab6100;
-$gl-color-orange-600: #995715;
-$gl-color-orange-700: #894b16;
-$gl-color-orange-800: #693c14;
-$gl-color-orange-900: #532e16;
-$gl-color-orange-950: #382315;
-$gl-color-purple-50: #f4f0ff;
-$gl-color-purple-100: #e1d8f9;
-$gl-color-purple-200: #cbbbf2;
-$gl-color-purple-300: #ac93e6;
-$gl-color-purple-400: #9475db;
-$gl-color-purple-500: #7b58cf;
-$gl-color-purple-600: #6a4fb4;
-$gl-color-purple-700: #5c47a6;
-$gl-color-purple-800: #493c83;
-$gl-color-purple-900: #342d59;
-$gl-color-purple-950: #27243e;
-$gl-color-red-50: #fcf1ef;
-$gl-color-red-100: #fdd4cd;
-$gl-color-red-200: #fcb5aa;
-$gl-color-red-300: #f6806d;
-$gl-color-red-400: #ec5941;
-$gl-color-red-500: #dd2b0e;
-$gl-color-red-600: #c02f12;
-$gl-color-red-700: #a32c12;
-$gl-color-red-800: #812713;
-$gl-color-red-900: #582014;
-$gl-color-red-950: #3e1a14;
+$gl-color-orange-50: #fdf0d5;
+$gl-color-orange-100: #fada9c;
+$gl-color-orange-200: #f7b951;
+$gl-color-orange-300: #fb8017;
+$gl-color-orange-400: #e95f21;
+$gl-color-orange-500: #c74816;
+$gl-color-orange-600: #b34013;
+$gl-color-orange-700: #9e3811;
+$gl-color-orange-800: #7d2d0e;
+$gl-color-orange-900: #5d220d;
+$gl-color-orange-950: #461807;
+$gl-color-purple-50: #f4f0fc;
+$gl-color-purple-100: #e1daf7;
+$gl-color-purple-200: #c9beef;
+$gl-color-purple-300: #a997e1;
+$gl-color-purple-400: #927cd7;
+$gl-color-purple-500: #7862c8;
+$gl-color-purple-600: #6a54c0;
+$gl-color-purple-700: #5b46b8;
+$gl-color-purple-800: #483698;
+$gl-color-purple-900: #362676;
+$gl-color-purple-950: #291a5c;
+$gl-color-red-50: #feeef0;
+$gl-color-red-100: #ffd3d7;
+$gl-color-red-200: #ffafb8;
+$gl-color-red-300: #fc7988;
+$gl-color-red-400: #f15168;
+$gl-color-red-500: #de1d4b;
+$gl-color-red-600: #c52042;
+$gl-color-red-700: #ac203a;
+$gl-color-red-800: #891c2f;
+$gl-color-red-900: #641925;
+$gl-color-red-950: #48151d;
 $gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
 $gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
 $gl-font-size-100: 0.75rem; // Used for meta text and small labels.
@@ -242,11 +242,11 @@ $gl-zindex-3: 3;
 $gl-zindex-4: 4;
 $gl-zindex-200: 200;
 $gl-zindex-9999: 9999;
-$gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); // Neutral background for avatar fallback with no particular meaning.
 $gl-broadcast-banner-background-color-blue: #235180; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-green: #1b653f; // Used for the background for the green banner type.
@@ -264,7 +264,7 @@ $gl-broadcast-banner-border-color-lightgreen: #1b653f; // Used for the border fo
 $gl-broadcast-banner-border-color-lightindigo: #41419f; // Used for the border for the lightindigo banner type.
 $gl-broadcast-banner-border-color-lightred: #8f2110; // Used for the border for the lightred banner type.
 $gl-broadcast-banner-border-color-red: #580d02; // Used for the border for the red banner type.
-$gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); // Used in charts to delineate a threshold area in a chart.
+$gl-chart-threshold-area-color: rgba(222, 29, 75, 0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
@@ -377,9 +377,9 @@ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 in
 $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
 $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
 $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
-$gl-action-danger-background-color-default: rgba(245, 127, 108, 0); // Used for the background of a danger (destructive) action in the default state.
-$gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); // Used for the background of a danger (destructive) action in the hover state.
-$gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for the background of a danger (destructive) action in the active state.
+$gl-action-danger-background-color-default: rgba(222, 29, 75, 0); // Used for the background of a danger (destructive) action in the default state.
+$gl-action-danger-background-color-hover: rgba(222, 29, 75, 0.16); // Used for the background of a danger (destructive) action in the hover state.
+$gl-action-danger-background-color-active: rgba(172, 32, 58, 0.24); // Used for the background of a danger (destructive) action in the active state.
 $gl-letter-spacing-heading: -0.01em;
 $gl-heading-3-letter-spacing: inherit;
 $gl-heading-4-letter-spacing: inherit;
@@ -575,20 +575,20 @@ $gl-button-confirm-secondary-border-color-default: $gl-color-neutral-800; // Use
 $gl-button-confirm-secondary-border-color-hover: $gl-color-neutral-950; // Used for the border of an outlined confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-border-color-active: $gl-color-neutral-1000; // Used for the border of an outlined confirm (positive) button in the active state.
 $gl-button-danger-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a danger (destructive) primary button in the default state.
-$gl-button-danger-primary-background-color-default: $gl-color-red-500; // Used for the background of a danger (destructive) primary button in the default state.
-$gl-button-danger-primary-background-color-hover: $gl-color-red-600; // Used for the background of a danger (destructive) primary button in the hover state.
-$gl-button-danger-primary-background-color-active: $gl-color-red-800; // Used for the background of a danger (destructive) primary button in the active state.
-$gl-button-danger-primary-border-color-default: $gl-color-red-600; // Used for the border of a danger (destructive) primary button in the default state.
-$gl-button-danger-primary-border-color-hover: $gl-color-red-800; // Used for the border of a danger (destructive) primary button in the hover state.
-$gl-button-danger-primary-border-color-active: $gl-color-red-900; // Used for the border of a danger (destructive) primary button in the active state.
-$gl-button-danger-secondary-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) button in the default state.
-$gl-button-danger-secondary-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) button in the hover state.
+$gl-button-danger-primary-background-color-default: $gl-color-red-600; // Used for the background of a danger (destructive) primary button in the default state.
+$gl-button-danger-primary-background-color-hover: $gl-color-red-700; // Used for the background of a danger (destructive) primary button in the hover state.
+$gl-button-danger-primary-background-color-active: $gl-color-red-900; // Used for the background of a danger (destructive) primary button in the active state.
+$gl-button-danger-primary-border-color-default: $gl-color-red-700; // Used for the border of a danger (destructive) primary button in the default state.
+$gl-button-danger-primary-border-color-hover: $gl-color-red-900; // Used for the border of a danger (destructive) primary button in the hover state.
+$gl-button-danger-primary-border-color-active: $gl-color-red-950; // Used for the border of a danger (destructive) primary button in the active state.
+$gl-button-danger-secondary-foreground-color-default: $gl-color-red-600; // Used for the foreground of a danger (destructive) button in the default state.
+$gl-button-danger-secondary-foreground-color-hover: $gl-color-red-800; // Used for the foreground of a danger (destructive) button in the hover state.
 $gl-button-danger-secondary-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) button in the active state.
 $gl-button-danger-secondary-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) button in the default state.
 $gl-button-danger-secondary-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) button in the hover state.
 $gl-button-danger-secondary-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) button in the active state.
-$gl-button-danger-secondary-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) button in the default state.
-$gl-button-danger-secondary-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) button in the hover state.
+$gl-button-danger-secondary-border-color-default: $gl-color-red-600; // Used for the border of an outlined danger (destructive) button in the default state.
+$gl-button-danger-secondary-border-color-hover: $gl-color-red-800; // Used for the border of an outlined danger (destructive) button in the hover state.
 $gl-button-danger-secondary-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) button in the active state.
 $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.

package/src/tokens/constant/color.blue.tokens.json

@@ -5,12 +5,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.9137254901960784,
-            0.9529411764705882,
-            0.9882352941176471
+            0.9098039215686274,
+            0.9490196078431372,
+            0.9921568627450981
           ],
           "alpha": 1,
-          "hex": "#e9f3fc"
+          "hex": "#e8f2fd"
         },
         "$type": "color",
         "$extensions": {
@@ -21,12 +21,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.796078431372549,
-            0.8862745098039215,
+            0.7843137254901961,
+            0.8784313725490196,
             0.9764705882352941
           ],
           "alpha": 1,
-          "hex": "#cbe2f9"
+          "hex": "#c8e0f9"
         },
         "$type": "color",
         "$extensions": {
@@ -38,11 +38,11 @@
           "colorSpace": "srgb",
           "components": [
             0.615686274509804,
-            0.7803921568627451,
-            0.9450980392156862
+            0.7843137254901961,
+            0.9490196078431372
           ],
           "alpha": 1,
-          "hex": "#9dc7f1"
+          "hex": "#9dc8f2"
         },
         "$type": "color",
         "$extensions": {
@@ -53,12 +53,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.38823529411764707,
-            0.6509803921568628,
+            0.39215686274509803,
+            0.6549019607843137,
             0.9137254901960784
           ],
           "alpha": 1,
-          "hex": "#63a6e9"
+          "hex": "#64a7e9"
         },
         "$type": "color",
         "$extensions": {
@@ -69,12 +69,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.25882352941176473,
-            0.5607843137254902,
-            0.8627450980392157
+            0.24705882352941178,
+            0.5568627450980392,
+            0.8666666666666667
           ],
           "alpha": 1,
-          "hex": "#428fdc"
+          "hex": "#3f8edd"
         },
         "$type": "color",
         "$extensions": {
@@ -86,11 +86,11 @@
           "colorSpace": "srgb",
           "components": [
             0.12156862745098039,
-            0.4588235294117647,
-            0.796078431372549
+            0.45098039215686275,
+            0.792156862745098
           ],
           "alpha": 1,
-          "hex": "#1f75cb"
+          "hex": "#1f73ca"
         },
         "$type": "color",
         "$extensions": {
@@ -101,12 +101,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.1843137254901961,
-            0.40784313725490196,
-            0.7058823529411765
+            0.1450980392156863,
+            0.4,
+            0.7098039215686275
           ],
           "alpha": 1,
-          "hex": "#2f68b4"
+          "hex": "#2566b5"
         },
         "$type": "color",
         "$extensions": {
@@ -117,12 +117,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.1843137254901961,
-            0.3607843137254902,
-            0.6274509803921569
+            0.15294117647058825,
+            0.34901960784313724,
+            0.6235294117647059
           ],
           "alpha": 1,
-          "hex": "#2f5ca0"
+          "hex": "#27599f"
         },
         "$type": "color",
         "$extensions": {
@@ -133,12 +133,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.1568627450980392,
-            0.2784313725490196,
-            0.4745098039215686
+            0.1450980392156863,
+            0.27058823529411763,
+            0.5058823529411764
           ],
           "alpha": 1,
-          "hex": "#284779"
+          "hex": "#254581"
         },
         "$type": "color",
         "$extensions": {
@@ -149,12 +149,12 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.12941176470588237,
-            0.20392156862745098,
-            0.32941176470588235
+            0.12156862745098039,
+            0.19215686274509805,
+            0.4
           ],
           "alpha": 1,
-          "hex": "#213454"
+          "hex": "#1f3166"
         },
         "$type": "color",
         "$extensions": {
@@ -166,11 +166,11 @@
           "colorSpace": "srgb",
           "components": [
             0.11372549019607843,
-            0.1568627450980392,
-            0.24313725490196078
+            0.12941176470588237,
+            0.3254901960784314
           ],
           "alpha": 1,
-          "hex": "#1d283e"
+          "hex": "#1d2153"
         },
         "$type": "color",
         "$extensions": {