@gitlab/ui 137.3.1 → 138.1.0

package/src/tokens/build/css/tokens.css

@@ -20,17 +20,17 @@
   --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;
@@ -101,17 +101,17 @@
   --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;
@@ -126,39 +126,39 @@
   --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. */
@@ -244,11 +244,11 @@
   --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. */
@@ -266,7 +266,7 @@
   --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. */
@@ -379,9 +379,9 @@
   --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
   --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
   --t-white-a-08: rgba(255, 255, 255, 0.08); /** 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;
@@ -577,20 +577,20 @@
   --gl-button-confirm-secondary-border-color-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-color-red-500); /** Used for the foreground of a danger (destructive) button in the default state. */
-  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-700); /** Used for the foreground of a danger (destructive) button in the hover state. */
+  --gl-button-danger-primary-background-color-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) button in the default state. */
+  --gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) button in the hover state. */
   --gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-900); /** Used for the foreground of a danger (destructive) button in the active state. */
   --gl-button-danger-secondary-background-color-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-danger-background-color-hover); /** Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */

package/src/tokens/build/css/tokens.dark.css

@@ -20,17 +20,17 @@
   --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;
@@ -101,17 +101,17 @@
   --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;
@@ -126,39 +126,39 @@
   --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. */
@@ -244,11 +244,11 @@
   --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. */
@@ -269,11 +269,11 @@
   --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. */
@@ -390,9 +390,9 @@
   --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
   --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
   --t-white-a-08: rgba(255, 255, 255, 0.08); /** 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;
@@ -591,9 +591,9 @@
   --gl-button-confirm-secondary-border-color-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-color-alpha-0); /** Used for the border of a danger (destructive) primary button in the active state. */