@gitlab/ui 132.2.2 → 134.0.0

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

@@ -156,78 +156,6 @@ $gl-color-red-700: #a32c12;
 $gl-color-red-800: #812713;
 $gl-color-red-900: #582014;
 $gl-color-red-950: #3e1a14;
-$gl-color-theme-indigo-10: #f8f8ff;
-$gl-color-theme-indigo-50: #f1f1ff;
-$gl-color-theme-indigo-100: #dbdbf8;
-$gl-color-theme-indigo-200: #c7c7f2;
-$gl-color-theme-indigo-300: #a2a2e6;
-$gl-color-theme-indigo-400: #8181d7;
-$gl-color-theme-indigo-500: #6666c4;
-$gl-color-theme-indigo-600: #5252b5;
-$gl-color-theme-indigo-700: #41419f;
-$gl-color-theme-indigo-800: #303083;
-$gl-color-theme-indigo-900: #222261;
-$gl-color-theme-indigo-950: #14143d;
-$gl-color-theme-blue-10: #e6ecf0;
-$gl-color-theme-blue-50: #cdd8e3;
-$gl-color-theme-blue-100: #b9cadc;
-$gl-color-theme-blue-200: #a6bdd5;
-$gl-color-theme-blue-300: #81a5c9;
-$gl-color-theme-blue-400: #628eb9;
-$gl-color-theme-blue-500: #4977a5;
-$gl-color-theme-blue-600: #346596;
-$gl-color-theme-blue-700: #235180;
-$gl-color-theme-blue-800: #153c63;
-$gl-color-theme-blue-900: #0b2640;
-$gl-color-theme-blue-950: #04101c;
-$gl-color-theme-light-blue-10: #eef3f7;
-$gl-color-theme-light-blue-50: #dde6ee;
-$gl-color-theme-light-blue-100: #c1d4e6;
-$gl-color-theme-light-blue-200: #a0bedc;
-$gl-color-theme-light-blue-300: #74a3d3;
-$gl-color-theme-light-blue-400: #4f8bc7;
-$gl-color-theme-light-blue-500: #3476b9;
-$gl-color-theme-light-blue-600: #2268ae;
-$gl-color-theme-light-blue-700: #145aa1;
-$gl-color-theme-light-blue-800: #0e4d8d;
-$gl-color-theme-light-blue-900: #0c4277;
-$gl-color-theme-light-blue-950: #0a3764;
-$gl-color-theme-green-10: #eef4ef;
-$gl-color-theme-green-50: #dde9de;
-$gl-color-theme-green-100: #b1d6b5;
-$gl-color-theme-green-200: #8cc497;
-$gl-color-theme-green-300: #69af7d;
-$gl-color-theme-green-400: #499767;
-$gl-color-theme-green-500: #308258;
-$gl-color-theme-green-600: #25744c;
-$gl-color-theme-green-700: #1b653f;
-$gl-color-theme-green-800: #155635;
-$gl-color-theme-green-900: #0e4328;
-$gl-color-theme-green-950: #052e19;
-$gl-color-theme-red-10: #faf4f3;
-$gl-color-theme-red-50: #f4e9e7;
-$gl-color-theme-red-100: #ecd3d0;
-$gl-color-theme-red-200: #e3bab5;
-$gl-color-theme-red-300: #d59086;
-$gl-color-theme-red-400: #c66e60;
-$gl-color-theme-red-500: #ad4a3b;
-$gl-color-theme-red-600: #a13322;
-$gl-color-theme-red-700: #8f2110;
-$gl-color-theme-red-800: #761405;
-$gl-color-theme-red-900: #580d02;
-$gl-color-theme-red-950: #380700;
-$gl-color-theme-light-red-10: #fdf9f8;
-$gl-color-theme-light-red-50: #faf2f1;
-$gl-color-theme-light-red-100: #f6d9d5;
-$gl-color-theme-light-red-200: #ebada2;
-$gl-color-theme-light-red-300: #e07f6f;
-$gl-color-theme-light-red-400: #d36250;
-$gl-color-theme-light-red-500: #c24b38;
-$gl-color-theme-light-red-600: #b53a26;
-$gl-color-theme-light-red-700: #a02e1c;
-$gl-color-theme-light-red-800: #8b2212;
-$gl-color-theme-light-red-900: #751709;
-$gl-color-theme-light-red-950: #5c1105;
 $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.
@@ -319,6 +247,22 @@ $gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.239215686274509
 $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-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.
+$gl-broadcast-banner-background-color-indigo: #41419f; // Used for the background for the indigo banner type.
+$gl-broadcast-banner-background-color-lightblue: #4977a5; // Used for the background for the lightblue banner type.
+$gl-broadcast-banner-background-color-lightgreen: #308258; // Used for the background for the lightgreen banner type.
+$gl-broadcast-banner-background-color-lightindigo: #6666c4; // Used for the background for the lightindigo banner type.
+$gl-broadcast-banner-background-color-lightred: #ad4a3b; // Used for the background for the lightred banner type.
+$gl-broadcast-banner-background-color-red: #8f2110; // Used for the background for the red banner type.
+$gl-broadcast-banner-border-color-blue: #0b2640; // Used for the border for the blue banner type.
+$gl-broadcast-banner-border-color-green: #0e4328; // Used for the border for the green banner type.
+$gl-broadcast-banner-border-color-indigo: #222261; // Used for the border for the indigo banner type.
+$gl-broadcast-banner-border-color-lightblue: #235180; // Used for the border for the lightblue banner type.
+$gl-broadcast-banner-border-color-lightgreen: #1b653f; // Used for the border for the lightgreen banner type.
+$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-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.
@@ -417,78 +361,6 @@ $data-viz-orange-700: #e99b60 !default;
 $data-viz-orange-800: #eebd8c !default;
 $data-viz-orange-900: #f5d6b3 !default;
 $data-viz-orange-950: #fae8d1 !default;
-$theme-indigo-10: #14143d !default;
-$theme-indigo-50: #222261 !default;
-$theme-indigo-100: #303083 !default;
-$theme-indigo-200: #41419f !default;
-$theme-indigo-300: #5252b5 !default;
-$theme-indigo-400: #6666c4 !default;
-$theme-indigo-500: #8181d7 !default;
-$theme-indigo-600: #a2a2e6 !default;
-$theme-indigo-700: #c7c7f2 !default;
-$theme-indigo-800: #dbdbf8 !default;
-$theme-indigo-900: #f1f1ff !default;
-$theme-indigo-950: #f8f8ff !default;
-$theme-blue-10: #04101c !default;
-$theme-blue-50: #0b2640 !default;
-$theme-blue-100: #153c63 !default;
-$theme-blue-200: #235180 !default;
-$theme-blue-300: #346596 !default;
-$theme-blue-400: #4977a5 !default;
-$theme-blue-500: #628eb9 !default;
-$theme-blue-600: #81a5c9 !default;
-$theme-blue-700: #a6bdd5 !default;
-$theme-blue-800: #b9cadc !default;
-$theme-blue-900: #cdd8e3 !default;
-$theme-blue-950: #e6ecf0 !default;
-$theme-light-blue-10: #0a3764 !default;
-$theme-light-blue-50: #0c4277 !default;
-$theme-light-blue-100: #0e4d8d !default;
-$theme-light-blue-200: #145aa1 !default;
-$theme-light-blue-300: #2268ae !default;
-$theme-light-blue-400: #3476b9 !default;
-$theme-light-blue-500: #4f8bc7 !default;
-$theme-light-blue-600: #74a3d3 !default;
-$theme-light-blue-700: #a0bedc !default;
-$theme-light-blue-800: #c1d4e6 !default;
-$theme-light-blue-900: #dde6ee !default;
-$theme-light-blue-950: #eef3f7 !default;
-$theme-green-10: #052e19 !default;
-$theme-green-50: #0e4328 !default;
-$theme-green-100: #155635 !default;
-$theme-green-200: #1b653f !default;
-$theme-green-300: #25744c !default;
-$theme-green-400: #308258 !default;
-$theme-green-500: #499767 !default;
-$theme-green-600: #69af7d !default;
-$theme-green-700: #8cc497 !default;
-$theme-green-800: #b1d6b5 !default;
-$theme-green-900: #dde9de !default;
-$theme-green-950: #eef4ef !default;
-$theme-red-10: #380700 !default;
-$theme-red-50: #580d02 !default;
-$theme-red-100: #761405 !default;
-$theme-red-200: #8f2110 !default;
-$theme-red-300: #a13322 !default;
-$theme-red-400: #ad4a3b !default;
-$theme-red-500: #c66e60 !default;
-$theme-red-600: #d59086 !default;
-$theme-red-700: #e3bab5 !default;
-$theme-red-800: #ecd3d0 !default;
-$theme-red-900: #f4e9e7 !default;
-$theme-red-950: #faf4f3 !default;
-$theme-light-red-10: #5c1105 !default;
-$theme-light-red-50: #751709 !default;
-$theme-light-red-100: #8b2212 !default;
-$theme-light-red-200: #a02e1c !default;
-$theme-light-red-300: #b53a26 !default;
-$theme-light-red-400: #c24b38 !default;
-$theme-light-red-500: #d36250 !default;
-$theme-light-red-600: #e07f6f !default;
-$theme-light-red-700: #ebada2 !default;
-$theme-light-red-800: #f6d9d5 !default;
-$theme-light-red-900: #faf2f1 !default;
-$theme-light-red-950: #fdf9f8 !default;
 $blue-950: #f2f9ff !default;
 $green-950: #f1fdf6 !default;
 $orange-950: #fff4e1 !default;
@@ -679,26 +551,10 @@ $gl-banner-intro-border-color: $gl-color-blue-700; // Used for the border of an
 $gl-banner-promo-background-color: $gl-color-purple-950; // Used for the background of a promo banner.
 $gl-banner-promo-border-color: $gl-color-purple-700; // Used for the border of a promo banner.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.
-$gl-broadcast-banner-background-color-green: $gl-color-theme-green-700; // Used for the background for the green banner type.
-$gl-broadcast-banner-background-color-indigo: $gl-color-theme-indigo-700; // Used for the background for the indigo banner type.
 $gl-broadcast-banner-background-color-light: $gl-color-neutral-50; // Used for the background for the light banner type.
-$gl-broadcast-banner-background-color-lightblue: $gl-color-theme-blue-500; // Used for the background for the lightblue banner type.
-$gl-broadcast-banner-background-color-lightgreen: $gl-color-theme-green-500; // Used for the background for the lightgreen banner type.
-$gl-broadcast-banner-background-color-lightindigo: $gl-color-theme-indigo-500; // Used for the background for the lightindigo banner type.
-$gl-broadcast-banner-background-color-lightred: $gl-color-theme-red-500; // Used for the background for the lightred banner type.
-$gl-broadcast-banner-background-color-red: $gl-color-theme-red-700; // Used for the background for the red banner type.
-$gl-broadcast-banner-border-color-blue: $gl-color-theme-blue-900; // Used for the border for the blue banner type.
 $gl-broadcast-banner-border-color-dark: $gl-color-neutral-700; // Used for the border for the dark banner type.
-$gl-broadcast-banner-border-color-green: $gl-color-theme-green-900; // Used for the border for the green banner type.
-$gl-broadcast-banner-border-color-indigo: $gl-color-theme-indigo-900; // Used for the border for the indigo banner type.
 $gl-broadcast-banner-border-color-light: $gl-color-neutral-100; // Used for the border for the light banner type.
-$gl-broadcast-banner-border-color-lightblue: $gl-color-theme-blue-700; // Used for the border for the lightblue banner type.
-$gl-broadcast-banner-border-color-lightgreen: $gl-color-theme-green-700; // Used for the border for the lightgreen banner type.
-$gl-broadcast-banner-border-color-lightindigo: $gl-color-theme-indigo-700; // Used for the border for the lightindigo banner type.
-$gl-broadcast-banner-border-color-lightred: $gl-color-theme-red-700; // Used for the border for the lightred banner type.
-$gl-broadcast-banner-border-color-red: $gl-color-theme-red-900; // Used for the border for the red banner type.
 $gl-broadcast-banner-icon-color-blue: $gl-color-neutral-0; // Used for the icon for the blue banner type.
 $gl-broadcast-banner-icon-color-dark: $gl-color-neutral-0; // Used for the icon for the dark banner type.
 $gl-broadcast-banner-icon-color-green: $gl-color-neutral-0; // Used for the icon for the green banner type.

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

@@ -156,78 +156,6 @@ $gl-color-red-700: #a32c12;
 $gl-color-red-800: #812713;
 $gl-color-red-900: #582014;
 $gl-color-red-950: #3e1a14;
-$gl-color-theme-indigo-10: #f8f8ff;
-$gl-color-theme-indigo-50: #f1f1ff;
-$gl-color-theme-indigo-100: #dbdbf8;
-$gl-color-theme-indigo-200: #c7c7f2;
-$gl-color-theme-indigo-300: #a2a2e6;
-$gl-color-theme-indigo-400: #8181d7;
-$gl-color-theme-indigo-500: #6666c4;
-$gl-color-theme-indigo-600: #5252b5;
-$gl-color-theme-indigo-700: #41419f;
-$gl-color-theme-indigo-800: #303083;
-$gl-color-theme-indigo-900: #222261;
-$gl-color-theme-indigo-950: #14143d;
-$gl-color-theme-blue-10: #e6ecf0;
-$gl-color-theme-blue-50: #cdd8e3;
-$gl-color-theme-blue-100: #b9cadc;
-$gl-color-theme-blue-200: #a6bdd5;
-$gl-color-theme-blue-300: #81a5c9;
-$gl-color-theme-blue-400: #628eb9;
-$gl-color-theme-blue-500: #4977a5;
-$gl-color-theme-blue-600: #346596;
-$gl-color-theme-blue-700: #235180;
-$gl-color-theme-blue-800: #153c63;
-$gl-color-theme-blue-900: #0b2640;
-$gl-color-theme-blue-950: #04101c;
-$gl-color-theme-light-blue-10: #eef3f7;
-$gl-color-theme-light-blue-50: #dde6ee;
-$gl-color-theme-light-blue-100: #c1d4e6;
-$gl-color-theme-light-blue-200: #a0bedc;
-$gl-color-theme-light-blue-300: #74a3d3;
-$gl-color-theme-light-blue-400: #4f8bc7;
-$gl-color-theme-light-blue-500: #3476b9;
-$gl-color-theme-light-blue-600: #2268ae;
-$gl-color-theme-light-blue-700: #145aa1;
-$gl-color-theme-light-blue-800: #0e4d8d;
-$gl-color-theme-light-blue-900: #0c4277;
-$gl-color-theme-light-blue-950: #0a3764;
-$gl-color-theme-green-10: #eef4ef;
-$gl-color-theme-green-50: #dde9de;
-$gl-color-theme-green-100: #b1d6b5;
-$gl-color-theme-green-200: #8cc497;
-$gl-color-theme-green-300: #69af7d;
-$gl-color-theme-green-400: #499767;
-$gl-color-theme-green-500: #308258;
-$gl-color-theme-green-600: #25744c;
-$gl-color-theme-green-700: #1b653f;
-$gl-color-theme-green-800: #155635;
-$gl-color-theme-green-900: #0e4328;
-$gl-color-theme-green-950: #052e19;
-$gl-color-theme-red-10: #faf4f3;
-$gl-color-theme-red-50: #f4e9e7;
-$gl-color-theme-red-100: #ecd3d0;
-$gl-color-theme-red-200: #e3bab5;
-$gl-color-theme-red-300: #d59086;
-$gl-color-theme-red-400: #c66e60;
-$gl-color-theme-red-500: #ad4a3b;
-$gl-color-theme-red-600: #a13322;
-$gl-color-theme-red-700: #8f2110;
-$gl-color-theme-red-800: #761405;
-$gl-color-theme-red-900: #580d02;
-$gl-color-theme-red-950: #380700;
-$gl-color-theme-light-red-10: #fdf9f8;
-$gl-color-theme-light-red-50: #faf2f1;
-$gl-color-theme-light-red-100: #f6d9d5;
-$gl-color-theme-light-red-200: #ebada2;
-$gl-color-theme-light-red-300: #e07f6f;
-$gl-color-theme-light-red-400: #d36250;
-$gl-color-theme-light-red-500: #c24b38;
-$gl-color-theme-light-red-600: #b53a26;
-$gl-color-theme-light-red-700: #a02e1c;
-$gl-color-theme-light-red-800: #8b2212;
-$gl-color-theme-light-red-900: #751709;
-$gl-color-theme-light-red-950: #5c1105;
 $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.
@@ -319,6 +247,22 @@ $gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.239215686274509
 $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-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.
+$gl-broadcast-banner-background-color-indigo: #41419f; // Used for the background for the indigo banner type.
+$gl-broadcast-banner-background-color-lightblue: #4977a5; // Used for the background for the lightblue banner type.
+$gl-broadcast-banner-background-color-lightgreen: #308258; // Used for the background for the lightgreen banner type.
+$gl-broadcast-banner-background-color-lightindigo: #6666c4; // Used for the background for the lightindigo banner type.
+$gl-broadcast-banner-background-color-lightred: #ad4a3b; // Used for the background for the lightred banner type.
+$gl-broadcast-banner-background-color-red: #8f2110; // Used for the background for the red banner type.
+$gl-broadcast-banner-border-color-blue: #0b2640; // Used for the border for the blue banner type.
+$gl-broadcast-banner-border-color-green: #0e4328; // Used for the border for the green banner type.
+$gl-broadcast-banner-border-color-indigo: #222261; // Used for the border for the indigo banner type.
+$gl-broadcast-banner-border-color-lightblue: #235180; // Used for the border for the lightblue banner type.
+$gl-broadcast-banner-border-color-lightgreen: #1b653f; // Used for the border for the lightgreen banner type.
+$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-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.
@@ -407,78 +351,6 @@ $data-viz-orange-700: #92430a !default;
 $data-viz-orange-800: #6f3500 !default;
 $data-viz-orange-900: #5e2f05 !default;
 $data-viz-orange-950: #4b2707 !default;
-$theme-indigo-10: #f8f8ff !default;
-$theme-indigo-50: #f1f1ff !default;
-$theme-indigo-100: #dbdbf8 !default;
-$theme-indigo-200: #c7c7f2 !default;
-$theme-indigo-300: #a2a2e6 !default;
-$theme-indigo-400: #8181d7 !default;
-$theme-indigo-500: #6666c4 !default;
-$theme-indigo-600: #5252b5 !default;
-$theme-indigo-700: #41419f !default;
-$theme-indigo-800: #303083 !default;
-$theme-indigo-900: #222261 !default;
-$theme-indigo-950: #14143d !default;
-$theme-blue-10: #e6ecf0 !default;
-$theme-blue-50: #cdd8e3 !default;
-$theme-blue-100: #b9cadc !default;
-$theme-blue-200: #a6bdd5 !default;
-$theme-blue-300: #81a5c9 !default;
-$theme-blue-400: #628eb9 !default;
-$theme-blue-500: #4977a5 !default;
-$theme-blue-600: #346596 !default;
-$theme-blue-700: #235180 !default;
-$theme-blue-800: #153c63 !default;
-$theme-blue-900: #0b2640 !default;
-$theme-blue-950: #04101c !default;
-$theme-light-blue-10: #eef3f7 !default;
-$theme-light-blue-50: #dde6ee !default;
-$theme-light-blue-100: #c1d4e6 !default;
-$theme-light-blue-200: #a0bedc !default;
-$theme-light-blue-300: #74a3d3 !default;
-$theme-light-blue-400: #4f8bc7 !default;
-$theme-light-blue-500: #3476b9 !default;
-$theme-light-blue-600: #2268ae !default;
-$theme-light-blue-700: #145aa1 !default;
-$theme-light-blue-800: #0e4d8d !default;
-$theme-light-blue-900: #0c4277 !default;
-$theme-light-blue-950: #0a3764 !default;
-$theme-green-10: #eef4ef !default;
-$theme-green-50: #dde9de !default;
-$theme-green-100: #b1d6b5 !default;
-$theme-green-200: #8cc497 !default;
-$theme-green-300: #69af7d !default;
-$theme-green-400: #499767 !default;
-$theme-green-500: #308258 !default;
-$theme-green-600: #25744c !default;
-$theme-green-700: #1b653f !default;
-$theme-green-800: #155635 !default;
-$theme-green-900: #0e4328 !default;
-$theme-green-950: #052e19 !default;
-$theme-red-10: #faf4f3 !default;
-$theme-red-50: #f4e9e7 !default;
-$theme-red-100: #ecd3d0 !default;
-$theme-red-200: #e3bab5 !default;
-$theme-red-300: #d59086 !default;
-$theme-red-400: #c66e60 !default;
-$theme-red-500: #ad4a3b !default;
-$theme-red-600: #a13322 !default;
-$theme-red-700: #8f2110 !default;
-$theme-red-800: #761405 !default;
-$theme-red-900: #580d02 !default;
-$theme-red-950: #380700 !default;
-$theme-light-red-10: #fdf9f8 !default;
-$theme-light-red-50: #faf2f1 !default;
-$theme-light-red-100: #f6d9d5 !default;
-$theme-light-red-200: #ebada2 !default;
-$theme-light-red-300: #e07f6f !default;
-$theme-light-red-400: #d36250 !default;
-$theme-light-red-500: #c24b38 !default;
-$theme-light-red-600: #b53a26 !default;
-$theme-light-red-700: #a02e1c !default;
-$theme-light-red-800: #8b2212 !default;
-$theme-light-red-900: #751709 !default;
-$theme-light-red-950: #5c1105 !default;
 $brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
 $brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
 $brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
@@ -660,26 +532,10 @@ $gl-banner-intro-border-color: $gl-color-blue-200; // Used for the border of an
 $gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
 $gl-banner-promo-border-color: $gl-color-purple-200; // Used for the border of a promo banner.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
-$gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.
-$gl-broadcast-banner-background-color-green: $gl-color-theme-green-700; // Used for the background for the green banner type.
-$gl-broadcast-banner-background-color-indigo: $gl-color-theme-indigo-700; // Used for the background for the indigo banner type.
 $gl-broadcast-banner-background-color-light: $gl-color-neutral-50; // Used for the background for the light banner type.
-$gl-broadcast-banner-background-color-lightblue: $gl-color-theme-blue-500; // Used for the background for the lightblue banner type.
-$gl-broadcast-banner-background-color-lightgreen: $gl-color-theme-green-500; // Used for the background for the lightgreen banner type.
-$gl-broadcast-banner-background-color-lightindigo: $gl-color-theme-indigo-500; // Used for the background for the lightindigo banner type.
-$gl-broadcast-banner-background-color-lightred: $gl-color-theme-red-500; // Used for the background for the lightred banner type.
-$gl-broadcast-banner-background-color-red: $gl-color-theme-red-700; // Used for the background for the red banner type.
-$gl-broadcast-banner-border-color-blue: $gl-color-theme-blue-900; // Used for the border for the blue banner type.
 $gl-broadcast-banner-border-color-dark: $gl-color-neutral-700; // Used for the border for the dark banner type.
-$gl-broadcast-banner-border-color-green: $gl-color-theme-green-900; // Used for the border for the green banner type.
-$gl-broadcast-banner-border-color-indigo: $gl-color-theme-indigo-900; // Used for the border for the indigo banner type.
 $gl-broadcast-banner-border-color-light: $gl-color-neutral-100; // Used for the border for the light banner type.
-$gl-broadcast-banner-border-color-lightblue: $gl-color-theme-blue-700; // Used for the border for the lightblue banner type.
-$gl-broadcast-banner-border-color-lightgreen: $gl-color-theme-green-700; // Used for the border for the lightgreen banner type.
-$gl-broadcast-banner-border-color-lightindigo: $gl-color-theme-indigo-700; // Used for the border for the lightindigo banner type.
-$gl-broadcast-banner-border-color-lightred: $gl-color-theme-red-700; // Used for the border for the lightred banner type.
-$gl-broadcast-banner-border-color-red: $gl-color-theme-red-900; // Used for the border for the red banner type.
 $gl-broadcast-banner-icon-color-blue: $gl-color-neutral-0; // Used for the icon for the blue banner type.
 $gl-broadcast-banner-icon-color-dark: $gl-color-neutral-0; // Used for the icon for the dark banner type.
 $gl-broadcast-banner-icon-color-green: $gl-color-neutral-0; // Used for the icon for the green banner type.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -171,78 +171,6 @@ $gl-color-red-700: var(--gl-color-red-700);
 $gl-color-red-800: var(--gl-color-red-800);
 $gl-color-red-900: var(--gl-color-red-900);
 $gl-color-red-950: var(--gl-color-red-950);
-$gl-color-theme-indigo-10: var(--gl-color-theme-indigo-10);
-$gl-color-theme-indigo-50: var(--gl-color-theme-indigo-50);
-$gl-color-theme-indigo-100: var(--gl-color-theme-indigo-100);
-$gl-color-theme-indigo-200: var(--gl-color-theme-indigo-200);
-$gl-color-theme-indigo-300: var(--gl-color-theme-indigo-300);
-$gl-color-theme-indigo-400: var(--gl-color-theme-indigo-400);
-$gl-color-theme-indigo-500: var(--gl-color-theme-indigo-500);
-$gl-color-theme-indigo-600: var(--gl-color-theme-indigo-600);
-$gl-color-theme-indigo-700: var(--gl-color-theme-indigo-700);
-$gl-color-theme-indigo-800: var(--gl-color-theme-indigo-800);
-$gl-color-theme-indigo-900: var(--gl-color-theme-indigo-900);
-$gl-color-theme-indigo-950: var(--gl-color-theme-indigo-950);
-$gl-color-theme-blue-10: var(--gl-color-theme-blue-10);
-$gl-color-theme-blue-50: var(--gl-color-theme-blue-50);
-$gl-color-theme-blue-100: var(--gl-color-theme-blue-100);
-$gl-color-theme-blue-200: var(--gl-color-theme-blue-200);
-$gl-color-theme-blue-300: var(--gl-color-theme-blue-300);
-$gl-color-theme-blue-400: var(--gl-color-theme-blue-400);
-$gl-color-theme-blue-500: var(--gl-color-theme-blue-500);
-$gl-color-theme-blue-600: var(--gl-color-theme-blue-600);
-$gl-color-theme-blue-700: var(--gl-color-theme-blue-700);
-$gl-color-theme-blue-800: var(--gl-color-theme-blue-800);
-$gl-color-theme-blue-900: var(--gl-color-theme-blue-900);
-$gl-color-theme-blue-950: var(--gl-color-theme-blue-950);
-$gl-color-theme-light-blue-10: var(--gl-color-theme-light-blue-10);
-$gl-color-theme-light-blue-50: var(--gl-color-theme-light-blue-50);
-$gl-color-theme-light-blue-100: var(--gl-color-theme-light-blue-100);
-$gl-color-theme-light-blue-200: var(--gl-color-theme-light-blue-200);
-$gl-color-theme-light-blue-300: var(--gl-color-theme-light-blue-300);
-$gl-color-theme-light-blue-400: var(--gl-color-theme-light-blue-400);
-$gl-color-theme-light-blue-500: var(--gl-color-theme-light-blue-500);
-$gl-color-theme-light-blue-600: var(--gl-color-theme-light-blue-600);
-$gl-color-theme-light-blue-700: var(--gl-color-theme-light-blue-700);
-$gl-color-theme-light-blue-800: var(--gl-color-theme-light-blue-800);
-$gl-color-theme-light-blue-900: var(--gl-color-theme-light-blue-900);
-$gl-color-theme-light-blue-950: var(--gl-color-theme-light-blue-950);
-$gl-color-theme-green-10: var(--gl-color-theme-green-10);
-$gl-color-theme-green-50: var(--gl-color-theme-green-50);
-$gl-color-theme-green-100: var(--gl-color-theme-green-100);
-$gl-color-theme-green-200: var(--gl-color-theme-green-200);
-$gl-color-theme-green-300: var(--gl-color-theme-green-300);
-$gl-color-theme-green-400: var(--gl-color-theme-green-400);
-$gl-color-theme-green-500: var(--gl-color-theme-green-500);
-$gl-color-theme-green-600: var(--gl-color-theme-green-600);
-$gl-color-theme-green-700: var(--gl-color-theme-green-700);
-$gl-color-theme-green-800: var(--gl-color-theme-green-800);
-$gl-color-theme-green-900: var(--gl-color-theme-green-900);
-$gl-color-theme-green-950: var(--gl-color-theme-green-950);
-$gl-color-theme-red-10: var(--gl-color-theme-red-10);
-$gl-color-theme-red-50: var(--gl-color-theme-red-50);
-$gl-color-theme-red-100: var(--gl-color-theme-red-100);
-$gl-color-theme-red-200: var(--gl-color-theme-red-200);
-$gl-color-theme-red-300: var(--gl-color-theme-red-300);
-$gl-color-theme-red-400: var(--gl-color-theme-red-400);
-$gl-color-theme-red-500: var(--gl-color-theme-red-500);
-$gl-color-theme-red-600: var(--gl-color-theme-red-600);
-$gl-color-theme-red-700: var(--gl-color-theme-red-700);
-$gl-color-theme-red-800: var(--gl-color-theme-red-800);
-$gl-color-theme-red-900: var(--gl-color-theme-red-900);
-$gl-color-theme-red-950: var(--gl-color-theme-red-950);
-$gl-color-theme-light-red-10: var(--gl-color-theme-light-red-10);
-$gl-color-theme-light-red-50: var(--gl-color-theme-light-red-50);
-$gl-color-theme-light-red-100: var(--gl-color-theme-light-red-100);
-$gl-color-theme-light-red-200: var(--gl-color-theme-light-red-200);
-$gl-color-theme-light-red-300: var(--gl-color-theme-light-red-300);
-$gl-color-theme-light-red-400: var(--gl-color-theme-light-red-400);
-$gl-color-theme-light-red-500: var(--gl-color-theme-light-red-500);
-$gl-color-theme-light-red-600: var(--gl-color-theme-light-red-600);
-$gl-color-theme-light-red-700: var(--gl-color-theme-light-red-700);
-$gl-color-theme-light-red-800: var(--gl-color-theme-light-red-800);
-$gl-color-theme-light-red-900: var(--gl-color-theme-light-red-900);
-$gl-color-theme-light-red-950: var(--gl-color-theme-light-red-950);
 $gl-font-family-regular: var(--gl-font-family-regular);
 $gl-font-family-monospace: var(--gl-font-family-monospace);
 $gl-font-size-100: var(--gl-font-size-100);
@@ -826,78 +754,6 @@ $data-viz-orange-700: var(--data-viz-orange-700);
 $data-viz-orange-800: var(--data-viz-orange-800);
 $data-viz-orange-900: var(--data-viz-orange-900);
 $data-viz-orange-950: var(--data-viz-orange-950);
-$theme-indigo-10: var(--theme-indigo-10);
-$theme-indigo-50: var(--theme-indigo-50);
-$theme-indigo-100: var(--theme-indigo-100);
-$theme-indigo-200: var(--theme-indigo-200);
-$theme-indigo-300: var(--theme-indigo-300);
-$theme-indigo-400: var(--theme-indigo-400);
-$theme-indigo-500: var(--theme-indigo-500);
-$theme-indigo-600: var(--theme-indigo-600);
-$theme-indigo-700: var(--theme-indigo-700);
-$theme-indigo-800: var(--theme-indigo-800);
-$theme-indigo-900: var(--theme-indigo-900);
-$theme-indigo-950: var(--theme-indigo-950);
-$theme-blue-10: var(--theme-blue-10);
-$theme-blue-50: var(--theme-blue-50);
-$theme-blue-100: var(--theme-blue-100);
-$theme-blue-200: var(--theme-blue-200);
-$theme-blue-300: var(--theme-blue-300);
-$theme-blue-400: var(--theme-blue-400);
-$theme-blue-500: var(--theme-blue-500);
-$theme-blue-600: var(--theme-blue-600);
-$theme-blue-700: var(--theme-blue-700);
-$theme-blue-800: var(--theme-blue-800);
-$theme-blue-900: var(--theme-blue-900);
-$theme-blue-950: var(--theme-blue-950);
-$theme-light-blue-10: var(--theme-light-blue-10);
-$theme-light-blue-50: var(--theme-light-blue-50);
-$theme-light-blue-100: var(--theme-light-blue-100);
-$theme-light-blue-200: var(--theme-light-blue-200);
-$theme-light-blue-300: var(--theme-light-blue-300);
-$theme-light-blue-400: var(--theme-light-blue-400);
-$theme-light-blue-500: var(--theme-light-blue-500);
-$theme-light-blue-600: var(--theme-light-blue-600);
-$theme-light-blue-700: var(--theme-light-blue-700);
-$theme-light-blue-800: var(--theme-light-blue-800);
-$theme-light-blue-900: var(--theme-light-blue-900);
-$theme-light-blue-950: var(--theme-light-blue-950);
-$theme-green-10: var(--theme-green-10);
-$theme-green-50: var(--theme-green-50);
-$theme-green-100: var(--theme-green-100);
-$theme-green-200: var(--theme-green-200);
-$theme-green-300: var(--theme-green-300);
-$theme-green-400: var(--theme-green-400);
-$theme-green-500: var(--theme-green-500);
-$theme-green-600: var(--theme-green-600);
-$theme-green-700: var(--theme-green-700);
-$theme-green-800: var(--theme-green-800);
-$theme-green-900: var(--theme-green-900);
-$theme-green-950: var(--theme-green-950);
-$theme-red-10: var(--theme-red-10);
-$theme-red-50: var(--theme-red-50);
-$theme-red-100: var(--theme-red-100);
-$theme-red-200: var(--theme-red-200);
-$theme-red-300: var(--theme-red-300);
-$theme-red-400: var(--theme-red-400);
-$theme-red-500: var(--theme-red-500);
-$theme-red-600: var(--theme-red-600);
-$theme-red-700: var(--theme-red-700);
-$theme-red-800: var(--theme-red-800);
-$theme-red-900: var(--theme-red-900);
-$theme-red-950: var(--theme-red-950);
-$theme-light-red-10: var(--theme-light-red-10);
-$theme-light-red-50: var(--theme-light-red-50);
-$theme-light-red-100: var(--theme-light-red-100);
-$theme-light-red-200: var(--theme-light-red-200);
-$theme-light-red-300: var(--theme-light-red-300);
-$theme-light-red-400: var(--theme-light-red-400);
-$theme-light-red-500: var(--theme-light-red-500);
-$theme-light-red-600: var(--theme-light-red-600);
-$theme-light-red-700: var(--theme-light-red-700);
-$theme-light-red-800: var(--theme-light-red-800);
-$theme-light-red-900: var(--theme-light-red-900);
-$theme-light-red-950: var(--theme-light-red-950);
 $black: var(--black);
 $white: var(--white);
 $blue-50: var(--blue-50);

package/src/tokens/build/tailwind/tokens.cjs

@@ -71,80 +71,6 @@ const baseColors = {
   'red-900': 'var(--red-900)',
   'red-950': 'var(--red-950)',
 };
-const themeColors = {
-  'theme-indigo-10': 'var(--theme-indigo-10)',
-  'theme-indigo-50': 'var(--theme-indigo-50)',
-  'theme-indigo-100': 'var(--theme-indigo-100)',
-  'theme-indigo-200': 'var(--theme-indigo-200)',
-  'theme-indigo-300': 'var(--theme-indigo-300)',
-  'theme-indigo-400': 'var(--theme-indigo-400)',
-  'theme-indigo-500': 'var(--theme-indigo-500)',
-  'theme-indigo-600': 'var(--theme-indigo-600)',
-  'theme-indigo-700': 'var(--theme-indigo-700)',
-  'theme-indigo-800': 'var(--theme-indigo-800)',
-  'theme-indigo-900': 'var(--theme-indigo-900)',
-  'theme-indigo-950': 'var(--theme-indigo-950)',
-  'theme-blue-10': 'var(--theme-blue-10)',
-  'theme-blue-50': 'var(--theme-blue-50)',
-  'theme-blue-100': 'var(--theme-blue-100)',
-  'theme-blue-200': 'var(--theme-blue-200)',
-  'theme-blue-300': 'var(--theme-blue-300)',
-  'theme-blue-400': 'var(--theme-blue-400)',
-  'theme-blue-500': 'var(--theme-blue-500)',
-  'theme-blue-600': 'var(--theme-blue-600)',
-  'theme-blue-700': 'var(--theme-blue-700)',
-  'theme-blue-800': 'var(--theme-blue-800)',
-  'theme-blue-900': 'var(--theme-blue-900)',
-  'theme-blue-950': 'var(--theme-blue-950)',
-  'theme-light-blue-10': 'var(--theme-light-blue-10)',
-  'theme-light-blue-50': 'var(--theme-light-blue-50)',
-  'theme-light-blue-100': 'var(--theme-light-blue-100)',
-  'theme-light-blue-200': 'var(--theme-light-blue-200)',
-  'theme-light-blue-300': 'var(--theme-light-blue-300)',
-  'theme-light-blue-400': 'var(--theme-light-blue-400)',
-  'theme-light-blue-500': 'var(--theme-light-blue-500)',
-  'theme-light-blue-600': 'var(--theme-light-blue-600)',
-  'theme-light-blue-700': 'var(--theme-light-blue-700)',
-  'theme-light-blue-800': 'var(--theme-light-blue-800)',
-  'theme-light-blue-900': 'var(--theme-light-blue-900)',
-  'theme-light-blue-950': 'var(--theme-light-blue-950)',
-  'theme-green-10': 'var(--theme-green-10)',
-  'theme-green-50': 'var(--theme-green-50)',
-  'theme-green-100': 'var(--theme-green-100)',
-  'theme-green-200': 'var(--theme-green-200)',
-  'theme-green-300': 'var(--theme-green-300)',
-  'theme-green-400': 'var(--theme-green-400)',
-  'theme-green-500': 'var(--theme-green-500)',
-  'theme-green-600': 'var(--theme-green-600)',
-  'theme-green-700': 'var(--theme-green-700)',
-  'theme-green-800': 'var(--theme-green-800)',
-  'theme-green-900': 'var(--theme-green-900)',
-  'theme-green-950': 'var(--theme-green-950)',
-  'theme-red-10': 'var(--theme-red-10)',
-  'theme-red-50': 'var(--theme-red-50)',
-  'theme-red-100': 'var(--theme-red-100)',
-  'theme-red-200': 'var(--theme-red-200)',
-  'theme-red-300': 'var(--theme-red-300)',
-  'theme-red-400': 'var(--theme-red-400)',
-  'theme-red-500': 'var(--theme-red-500)',
-  'theme-red-600': 'var(--theme-red-600)',
-  'theme-red-700': 'var(--theme-red-700)',
-  'theme-red-800': 'var(--theme-red-800)',
-  'theme-red-900': 'var(--theme-red-900)',
-  'theme-red-950': 'var(--theme-red-950)',
-  'theme-light-red-10': 'var(--theme-light-red-10)',
-  'theme-light-red-50': 'var(--theme-light-red-50)',
-  'theme-light-red-100': 'var(--theme-light-red-100)',
-  'theme-light-red-200': 'var(--theme-light-red-200)',
-  'theme-light-red-300': 'var(--theme-light-red-300)',
-  'theme-light-red-400': 'var(--theme-light-red-400)',
-  'theme-light-red-500': 'var(--theme-light-red-500)',
-  'theme-light-red-600': 'var(--theme-light-red-600)',
-  'theme-light-red-700': 'var(--theme-light-red-700)',
-  'theme-light-red-800': 'var(--theme-light-red-800)',
-  'theme-light-red-900': 'var(--theme-light-red-900)',
-  'theme-light-red-950': 'var(--theme-light-red-950)',
-};
 const dataVizColors = {
   'data-viz-green-50': 'var(--data-viz-green-50)',
   'data-viz-green-100': 'var(--data-viz-green-100)',
@@ -493,7 +419,6 @@ const colors = {
     light: { ...alphaLightColors },
   },
   ...baseColors,
-  ...themeColors,
   ...dataVizColors,
   ...neutralColors,
   ...brandColors,