@gitlab/ui 132.1.0 → 132.2.0

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

@@ -28,64 +28,21 @@ $gl-color-blue-700: #2f5ca0;
 $gl-color-blue-800: #284779;
 $gl-color-blue-900: #213454;
 $gl-color-blue-950: #1d283e;
-$gl-color-neutral-0: #fff;
-$gl-color-neutral-10: #fbfafd;
-$gl-color-neutral-50: #ececef;
-$gl-color-neutral-100: #dcdcde;
-$gl-color-neutral-200: #bfbfc3;
-$gl-color-neutral-300: #a4a3a8;
-$gl-color-neutral-400: #89888d;
-$gl-color-neutral-500: #737278;
-$gl-color-neutral-600: #626168;
-$gl-color-neutral-700: #4c4b51;
-$gl-color-neutral-800: #3a383f;
-$gl-color-neutral-900: #28272d;
-$gl-color-neutral-950: #18171d;
-$gl-color-neutral-1000: #050506;
-$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-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-brand-white: #fff;
+$gl-color-brand-charcoal: #171321;
+$gl-color-brand-orange-01g: #ffd1bf;
+$gl-color-brand-orange-01p: #fca326;
+$gl-color-brand-orange-02p: #fc6d26;
+$gl-color-brand-orange-03p: #e24329;
+$gl-color-brand-purple-01g: #ceb3ef;
+$gl-color-brand-purple-01p: #a989f5;
+$gl-color-brand-purple-02p: #7759c2;
+$gl-color-brand-gray-01: #d1d0d3;
+$gl-color-brand-gray-02: #a2a1a6;
+$gl-color-brand-gray-03: #74717a;
+$gl-color-brand-gray-04: #45424d;
+$gl-color-brand-gray-05: #2b2838;
+$gl-color-brand-pink-01g: #ffb9c9;
 $gl-color-data-green-50: #ddfab7;
 $gl-color-data-green-100: #c6ed94;
 $gl-color-data-green-200: #b0d97b;
@@ -141,6 +98,64 @@ $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-neutral-0: #fff;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-700: #4c4b51;
+$gl-color-neutral-800: #3a383f;
+$gl-color-neutral-900: #28272d;
+$gl-color-neutral-950: #18171d;
+$gl-color-neutral-1000: #050506;
+$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-theme-indigo-10: #f8f8ff;
 $gl-color-theme-indigo-50: #f1f1ff;
 $gl-color-theme-indigo-100: #dbdbf8;
@@ -213,21 +228,6 @@ $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-color-brand-white: #fff;
-$gl-color-brand-charcoal: #171321;
-$gl-color-brand-orange-01g: #ffd1bf;
-$gl-color-brand-orange-01p: #fca326;
-$gl-color-brand-orange-02p: #fc6d26;
-$gl-color-brand-orange-03p: #e24329;
-$gl-color-brand-purple-01g: #ceb3ef;
-$gl-color-brand-purple-01p: #a989f5;
-$gl-color-brand-purple-02p: #7759c2;
-$gl-color-brand-gray-01: #d1d0d3;
-$gl-color-brand-gray-02: #a2a1a6;
-$gl-color-brand-gray-03: #74717a;
-$gl-color-brand-gray-04: #45424d;
-$gl-color-brand-gray-05: #2b2838;
-$gl-color-brand-pink-01g: #ffb9c9;
 $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.
@@ -489,74 +489,9 @@ $theme-light-red-700: #ebada2 !default;
 $theme-light-red-800: #f6d9d5 !default;
 $theme-light-red-900: #faf2f1 !default;
 $theme-light-red-950: #fdf9f8 !default;
-$black: #fff !default;
-$white: #28272d !default;
-$blue-50: #033464 !default;
-$blue-100: #064787 !default;
-$blue-200: #0b5cad !default;
-$blue-300: #1068bf !default;
-$blue-400: #1f75cb !default;
-$blue-500: #428fdc !default;
-$blue-600: #63a6e9 !default;
-$blue-700: #9dc7f1 !default;
-$blue-800: #cbe2f9 !default;
-$blue-900: #e9f3fc !default;
 $blue-950: #f2f9ff !default;
-$gray-10: #18171d !default;
-$gray-50: #28272d !default;
-$gray-100: #3a383f !default;
-$gray-200: #4c4b51 !default;
-$gray-300: #626168 !default;
-$gray-400: #737278 !default;
-$gray-500: #89888d !default;
-$gray-600: #a4a3a8 !default;
-$gray-700: #bfbfc3 !default;
-$gray-800: #dcdcde !default;
-$gray-900: #ececef !default;
-$gray-950: #fbfafd !default;
-$green-50: #0a4020 !default;
-$green-100: #0d532a !default;
-$green-200: #24663b !default;
-$green-300: #217645 !default;
-$green-400: #108548 !default;
-$green-500: #2da160 !default;
-$green-600: #52b87a !default;
-$green-700: #91d4a8 !default;
-$green-800: #c3e6cd !default;
-$green-900: #ecf4ee !default;
 $green-950: #f1fdf6 !default;
-$orange-50: #5c2900 !default;
-$orange-100: #703800 !default;
-$orange-200: #8f4700 !default;
-$orange-300: #9e5400 !default;
-$orange-400: #ab6100 !default;
-$orange-500: #c17d10 !default;
-$orange-600: #d99530 !default;
-$orange-700: #e9be74 !default;
-$orange-800: #f5d9a8 !default;
-$orange-900: #fdf1dd !default;
 $orange-950: #fff4e1 !default;
-$purple-50: #232150 !default;
-$purple-100: #2f2a6b !default;
-$purple-200: #453894 !default;
-$purple-300: #5943b6 !default;
-$purple-400: #694cc0 !default;
-$purple-500: #7b58cf !default;
-$purple-600: #9475db !default;
-$purple-700: #ac93e6 !default;
-$purple-800: #cbbbf2 !default;
-$purple-900: #e1d8f9 !default;
-$purple-950: #f4f0ff !default;
-$red-50: #660e00 !default;
-$red-100: #8d1300 !default;
-$red-200: #ae1800 !default;
-$red-300: #c91c00 !default;
-$red-400: #dd2b0e !default;
-$red-500: #ec5941 !default;
-$red-600: #f57f6c !default;
-$red-700: #fcb5aa !default;
-$red-800: #fdd4cd !default;
-$red-900: #fcf1ef !default;
 $red-950: #fff4f3 !default;
 $brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
 $brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
@@ -882,6 +817,71 @@ $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated
 $gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
+$black: $gl-color-neutral-0 !default;
+$white: $gl-color-neutral-900 !default;
+$blue-50: $gl-color-blue-900 !default;
+$blue-100: $gl-color-blue-800 !default;
+$blue-200: $gl-color-blue-700 !default;
+$blue-300: $gl-color-blue-600 !default;
+$blue-400: $gl-color-blue-500 !default;
+$blue-500: $gl-color-blue-400 !default;
+$blue-600: $gl-color-blue-300 !default;
+$blue-700: $gl-color-blue-200 !default;
+$blue-800: $gl-color-blue-100 !default;
+$blue-900: $gl-color-blue-50 !default;
+$gray-10: $gl-color-neutral-950 !default;
+$gray-50: $gl-color-neutral-900 !default;
+$gray-100: $gl-color-neutral-800 !default;
+$gray-200: $gl-color-neutral-700 !default;
+$gray-300: $gl-color-neutral-600 !default;
+$gray-400: $gl-color-neutral-500 !default;
+$gray-500: $gl-color-neutral-400 !default;
+$gray-600: $gl-color-neutral-300 !default;
+$gray-700: $gl-color-neutral-200 !default;
+$gray-800: $gl-color-neutral-100 !default;
+$gray-900: $gl-color-neutral-50 !default;
+$gray-950: $gl-color-neutral-10 !default;
+$green-50: $gl-color-green-900 !default;
+$green-100: $gl-color-green-800 !default;
+$green-200: $gl-color-green-700 !default;
+$green-300: $gl-color-green-600 !default;
+$green-400: $gl-color-green-500 !default;
+$green-500: $gl-color-green-400 !default;
+$green-600: $gl-color-green-300 !default;
+$green-700: $gl-color-green-200 !default;
+$green-800: $gl-color-green-100 !default;
+$green-900: $gl-color-green-50 !default;
+$orange-50: $gl-color-orange-900 !default;
+$orange-100: $gl-color-orange-800 !default;
+$orange-200: $gl-color-orange-700 !default;
+$orange-300: $gl-color-orange-600 !default;
+$orange-400: $gl-color-orange-500 !default;
+$orange-500: $gl-color-orange-400 !default;
+$orange-600: $gl-color-orange-300 !default;
+$orange-700: $gl-color-orange-200 !default;
+$orange-800: $gl-color-orange-100 !default;
+$orange-900: $gl-color-orange-50 !default;
+$purple-50: $gl-color-purple-900 !default;
+$purple-100: $gl-color-purple-800 !default;
+$purple-200: $gl-color-purple-700 !default;
+$purple-300: $gl-color-purple-600 !default;
+$purple-400: $gl-color-purple-500 !default;
+$purple-500: $gl-color-purple-500 !default;
+$purple-600: $gl-color-purple-400 !default;
+$purple-700: $gl-color-purple-300 !default;
+$purple-800: $gl-color-purple-200 !default;
+$purple-900: $gl-color-purple-100 !default;
+$purple-950: $gl-color-purple-50 !default;
+$red-50: $gl-color-red-900 !default;
+$red-100: $gl-color-red-800 !default;
+$red-200: $gl-color-red-700 !default;
+$red-300: $gl-color-red-600 !default;
+$red-400: $gl-color-red-500 !default;
+$red-500: $gl-color-red-400 !default;
+$red-600: $gl-color-red-300 !default;
+$red-700: $gl-color-red-200 !default;
+$red-800: $gl-color-red-100 !default;
+$red-900: $gl-color-red-50 !default;
 $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.

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

@@ -28,64 +28,21 @@ $gl-color-blue-700: #2f5ca0;
 $gl-color-blue-800: #284779;
 $gl-color-blue-900: #213454;
 $gl-color-blue-950: #1d283e;
-$gl-color-neutral-0: #fff;
-$gl-color-neutral-10: #fbfafd;
-$gl-color-neutral-50: #ececef;
-$gl-color-neutral-100: #dcdcde;
-$gl-color-neutral-200: #bfbfc3;
-$gl-color-neutral-300: #a4a3a8;
-$gl-color-neutral-400: #89888d;
-$gl-color-neutral-500: #737278;
-$gl-color-neutral-600: #626168;
-$gl-color-neutral-700: #4c4b51;
-$gl-color-neutral-800: #3a383f;
-$gl-color-neutral-900: #28272d;
-$gl-color-neutral-950: #18171d;
-$gl-color-neutral-1000: #050506;
-$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-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-brand-white: #fff;
+$gl-color-brand-charcoal: #171321;
+$gl-color-brand-orange-01g: #ffd1bf;
+$gl-color-brand-orange-01p: #fca326;
+$gl-color-brand-orange-02p: #fc6d26;
+$gl-color-brand-orange-03p: #e24329;
+$gl-color-brand-purple-01g: #ceb3ef;
+$gl-color-brand-purple-01p: #a989f5;
+$gl-color-brand-purple-02p: #7759c2;
+$gl-color-brand-gray-01: #d1d0d3;
+$gl-color-brand-gray-02: #a2a1a6;
+$gl-color-brand-gray-03: #74717a;
+$gl-color-brand-gray-04: #45424d;
+$gl-color-brand-gray-05: #2b2838;
+$gl-color-brand-pink-01g: #ffb9c9;
 $gl-color-data-green-50: #ddfab7;
 $gl-color-data-green-100: #c6ed94;
 $gl-color-data-green-200: #b0d97b;
@@ -141,6 +98,64 @@ $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-neutral-0: #fff;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-700: #4c4b51;
+$gl-color-neutral-800: #3a383f;
+$gl-color-neutral-900: #28272d;
+$gl-color-neutral-950: #18171d;
+$gl-color-neutral-1000: #050506;
+$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-theme-indigo-10: #f8f8ff;
 $gl-color-theme-indigo-50: #f1f1ff;
 $gl-color-theme-indigo-100: #dbdbf8;
@@ -213,21 +228,6 @@ $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-color-brand-white: #fff;
-$gl-color-brand-charcoal: #171321;
-$gl-color-brand-orange-01g: #ffd1bf;
-$gl-color-brand-orange-01p: #fca326;
-$gl-color-brand-orange-02p: #fc6d26;
-$gl-color-brand-orange-03p: #e24329;
-$gl-color-brand-purple-01g: #ceb3ef;
-$gl-color-brand-purple-01p: #a989f5;
-$gl-color-brand-purple-02p: #7759c2;
-$gl-color-brand-gray-01: #d1d0d3;
-$gl-color-brand-gray-02: #a2a1a6;
-$gl-color-brand-gray-03: #74717a;
-$gl-color-brand-gray-04: #45424d;
-$gl-color-brand-gray-05: #2b2838;
-$gl-color-brand-pink-01g: #ffb9c9;
 $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.
@@ -479,75 +479,6 @@ $theme-light-red-700: #a02e1c !default;
 $theme-light-red-800: #8b2212 !default;
 $theme-light-red-900: #751709 !default;
 $theme-light-red-950: #5c1105 !default;
-$black: #050506 !default;
-$white: #fff !default;
-$blue-50: #e9f3fc !default;
-$blue-100: #cbe2f9 !default;
-$blue-200: #9dc7f1 !default;
-$blue-300: #63a6e9 !default;
-$blue-400: #428fdc !default;
-$blue-500: #1f75cb !default;
-$blue-600: #2f68b4 !default;
-$blue-700: #2f5ca0 !default;
-$blue-800: #284779 !default;
-$blue-900: #213454 !default;
-$blue-950: #1d283e !default;
-$gray-10: #fbfafd !default;
-$gray-50: #ececef !default;
-$gray-100: #dcdcde !default;
-$gray-200: #bfbfc3 !default;
-$gray-300: #a4a3a8 !default;
-$gray-400: #89888d !default;
-$gray-500: #737278 !default;
-$gray-600: #626168 !default;
-$gray-700: #4c4b51 !default;
-$gray-800: #3a383f !default;
-$gray-900: #28272d !default;
-$gray-950: #18171d !default;
-$green-50: #ecf4ee !default;
-$green-100: #c3e6cd !default;
-$green-200: #91d4a8 !default;
-$green-300: #52b87a !default;
-$green-400: #2da160 !default;
-$green-500: #108548 !default;
-$green-600: #2f7549 !default;
-$green-700: #306440 !default;
-$green-800: #225131 !default;
-$green-900: #1e3e28 !default;
-$green-950: #17291c !default;
-$orange-50: #fdf1dd !default;
-$orange-100: #f5d9a8 !default;
-$orange-200: #e9be74 !default;
-$orange-300: #d99530 !default;
-$orange-400: #c17d10 !default;
-$orange-500: #ab6100 !default;
-$orange-600: #995715 !default;
-$orange-700: #894b16 !default;
-$orange-800: #693c14 !default;
-$orange-900: #532e16 !default;
-$orange-950: #382315 !default;
-$purple-50: #f4f0ff !default;
-$purple-100: #e1d8f9 !default;
-$purple-200: #cbbbf2 !default;
-$purple-300: #ac93e6 !default;
-$purple-400: #9475db !default;
-$purple-500: #7b58cf !default;
-$purple-600: #6a4fb4 !default;
-$purple-700: #5c47a6 !default;
-$purple-800: #493c83 !default;
-$purple-900: #342d59 !default;
-$purple-950: #27243e !default;
-$red-50: #fcf1ef !default;
-$red-100: #fdd4cd !default;
-$red-200: #fcb5aa !default;
-$red-300: #f57f6c !default;
-$red-400: #ec5941 !default;
-$red-500: #dd2b0e !default;
-$red-600: #c02f12 !default;
-$red-700: #a32c12 !default;
-$red-800: #812713 !default;
-$red-900: #582014 !default;
-$red-950: #3e1a14 !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.
@@ -867,6 +798,75 @@ $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated
 $gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
+$black: $gl-color-neutral-1000 !default;
+$white: $gl-color-neutral-0 !default;
+$blue-50: $gl-color-blue-50 !default;
+$blue-100: $gl-color-blue-100 !default;
+$blue-200: $gl-color-blue-200 !default;
+$blue-300: $gl-color-blue-300 !default;
+$blue-400: $gl-color-blue-400 !default;
+$blue-500: $gl-color-blue-500 !default;
+$blue-600: $gl-color-blue-600 !default;
+$blue-700: $gl-color-blue-700 !default;
+$blue-800: $gl-color-blue-800 !default;
+$blue-900: $gl-color-blue-900 !default;
+$blue-950: $gl-color-blue-950 !default;
+$gray-10: $gl-color-neutral-10 !default;
+$gray-50: $gl-color-neutral-50 !default;
+$gray-100: $gl-color-neutral-100 !default;
+$gray-200: $gl-color-neutral-200 !default;
+$gray-300: $gl-color-neutral-300 !default;
+$gray-400: $gl-color-neutral-400 !default;
+$gray-500: $gl-color-neutral-500 !default;
+$gray-600: $gl-color-neutral-600 !default;
+$gray-700: $gl-color-neutral-700 !default;
+$gray-800: $gl-color-neutral-800 !default;
+$gray-900: $gl-color-neutral-900 !default;
+$gray-950: $gl-color-neutral-950 !default;
+$green-50: $gl-color-green-50 !default;
+$green-100: $gl-color-green-100 !default;
+$green-200: $gl-color-green-200 !default;
+$green-300: $gl-color-green-300 !default;
+$green-400: $gl-color-green-400 !default;
+$green-500: $gl-color-green-500 !default;
+$green-600: $gl-color-green-600 !default;
+$green-700: $gl-color-green-700 !default;
+$green-800: $gl-color-green-800 !default;
+$green-900: $gl-color-green-900 !default;
+$green-950: $gl-color-green-950 !default;
+$orange-50: $gl-color-orange-50 !default;
+$orange-100: $gl-color-orange-100 !default;
+$orange-200: $gl-color-orange-200 !default;
+$orange-300: $gl-color-orange-300 !default;
+$orange-400: $gl-color-orange-400 !default;
+$orange-500: $gl-color-orange-500 !default;
+$orange-600: $gl-color-orange-600 !default;
+$orange-700: $gl-color-orange-700 !default;
+$orange-800: $gl-color-orange-800 !default;
+$orange-900: $gl-color-orange-900 !default;
+$orange-950: $gl-color-orange-950 !default;
+$purple-50: $gl-color-purple-50 !default;
+$purple-100: $gl-color-purple-100 !default;
+$purple-200: $gl-color-purple-200 !default;
+$purple-300: $gl-color-purple-300 !default;
+$purple-400: $gl-color-purple-400 !default;
+$purple-500: $gl-color-purple-500 !default;
+$purple-600: $gl-color-purple-600 !default;
+$purple-700: $gl-color-purple-700 !default;
+$purple-800: $gl-color-purple-800 !default;
+$purple-900: $gl-color-purple-900 !default;
+$purple-950: $gl-color-purple-950 !default;
+$red-50: $gl-color-red-50 !default;
+$red-100: $gl-color-red-100 !default;
+$red-200: $gl-color-red-200 !default;
+$red-300: $gl-color-red-300 !default;
+$red-400: $gl-color-red-400 !default;
+$red-500: $gl-color-red-500 !default;
+$red-600: $gl-color-red-600 !default;
+$red-700: $gl-color-red-700 !default;
+$red-800: $gl-color-red-800 !default;
+$red-900: $gl-color-red-900 !default;
+$red-950: $gl-color-red-950 !default;
 $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
 $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.