@gitlab/ui 80.10.0 → 80.12.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -2,15 +2,43 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-link: #63a6e9 !default; // Used for default text links.
-$gl-text-color-heading: #fff !default; // Used for headings level 1-6.
-$gl-text-color-strong: #fff !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #ececef !default; // Used for the default text color.
 $gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
 $gl-text-secondary: #89888d !default; // Use text.color.subtle instead
 $gl-text-primary: #ececef !default; // Use text.color.default instead
+$gl-line-height-52: 3.25rem;
+$gl-line-height-44: 2.75rem;
+$gl-line-height-42: 2.625rem;
+$gl-line-height-36: 2.25rem;
+$gl-line-height-32: 2rem;
+$gl-line-height-28: 1.75rem;
+$gl-line-height-24: 1.5rem;
+$gl-line-height-20: 1.25rem;
+$gl-line-height-16: 1rem;
+$gl-line-height-12: 0.75rem;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
+$t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
+$t-gray-a-06: rgba(31, 30, 36, 0.06) !default;
+$t-gray-a-04: rgba(31, 30, 36, 0.04) !default;
+$t-gray-a-02: rgba(31, 30, 36, 0.02) !default;
+$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
+$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
+$brand-gray-05: #2b2838 !default;
+$brand-gray-04: #45424d !default;
+$brand-gray-03: #74717a !default;
+$brand-gray-02: #a2a1a6 !default;
+$brand-gray-01: #d1d0d3 !default;
+$brand-purple-02: #7759c2 !default;
+$brand-purple-01: #a989f5 !default;
+$brand-orange-03: #e24329 !default;
+$brand-orange-02: #fc6d26 !default;
+$brand-orange-01: #fca326 !default;
+$brand-charcoal: #171321 !default;
 $red-950: #fff4f3 !default;
 $red-900: #fcf1ef !default;
 $red-800: #fdd4cd !default;
@@ -207,3 +235,80 @@ $data-viz-green-300: #366800 !default;
 $data-viz-green-200: #275600 !default;
 $data-viz-green-100: #1a4500 !default;
 $data-viz-green-50: #133a03 !default;
+$gl-color-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-300 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-300 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-300 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.

package/dist/tokens/scss/_tokens.scss

@@ -2,14 +2,6 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
-$gl-text-color-danger: #c91c00 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-$gl-text-color-link: #0b5cad !default; // Used for default text links.
-$gl-text-color-heading: #1f1e24 !default; // Used for headings level 1-6.
-$gl-text-color-strong: #1f1e24 !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #626168 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #434248 !default; // Used for the default text color.
 $gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
 $gl-text-secondary: #737278 !default; // Use text.color.subtle instead
 $gl-text-primary: #333238 !default; // Use text.color.default instead
@@ -243,3 +235,80 @@ $data-viz-green-300: #94c25e !default;
 $data-viz-green-200: #b0d97b !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-50: #ddfab7 !default;
+$gl-color-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-600 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-600 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-700 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -0,0 +1,315 @@
+/**
+ * Automatically generated
+ * Do not edit directly
+ */
+
+$gl-color-blue-50: var(--gl-color-blue-50);
+$gl-color-blue-100: var(--gl-color-blue-100);
+$gl-color-blue-200: var(--gl-color-blue-200);
+$gl-color-blue-300: var(--gl-color-blue-300);
+$gl-color-blue-400: var(--gl-color-blue-400);
+$gl-color-blue-500: var(--gl-color-blue-500);
+$gl-color-blue-600: var(--gl-color-blue-600);
+$gl-color-blue-700: var(--gl-color-blue-700);
+$gl-color-blue-800: var(--gl-color-blue-800);
+$gl-color-blue-900: var(--gl-color-blue-900);
+$gl-color-blue-950: var(--gl-color-blue-950);
+$gl-color-neutral-0: var(--gl-color-neutral-0);
+$gl-color-neutral-10: var(--gl-color-neutral-10);
+$gl-color-neutral-50: var(--gl-color-neutral-50);
+$gl-color-neutral-100: var(--gl-color-neutral-100);
+$gl-color-neutral-200: var(--gl-color-neutral-200);
+$gl-color-neutral-300: var(--gl-color-neutral-300);
+$gl-color-neutral-400: var(--gl-color-neutral-400);
+$gl-color-neutral-500: var(--gl-color-neutral-500);
+$gl-color-neutral-600: var(--gl-color-neutral-600);
+$gl-color-neutral-700: var(--gl-color-neutral-700);
+$gl-color-neutral-800: var(--gl-color-neutral-800);
+$gl-color-neutral-900: var(--gl-color-neutral-900);
+$gl-color-neutral-950: var(--gl-color-neutral-950);
+$gl-color-neutral-1000: var(--gl-color-neutral-1000);
+$gl-color-green-50: var(--gl-color-green-50);
+$gl-color-green-100: var(--gl-color-green-100);
+$gl-color-green-200: var(--gl-color-green-200);
+$gl-color-green-300: var(--gl-color-green-300);
+$gl-color-green-400: var(--gl-color-green-400);
+$gl-color-green-500: var(--gl-color-green-500);
+$gl-color-green-600: var(--gl-color-green-600);
+$gl-color-green-700: var(--gl-color-green-700);
+$gl-color-green-800: var(--gl-color-green-800);
+$gl-color-green-900: var(--gl-color-green-900);
+$gl-color-green-950: var(--gl-color-green-950);
+$gl-color-orange-50: var(--gl-color-orange-50);
+$gl-color-orange-100: var(--gl-color-orange-100);
+$gl-color-orange-200: var(--gl-color-orange-200);
+$gl-color-orange-300: var(--gl-color-orange-300);
+$gl-color-orange-400: var(--gl-color-orange-400);
+$gl-color-orange-500: var(--gl-color-orange-500);
+$gl-color-orange-600: var(--gl-color-orange-600);
+$gl-color-orange-700: var(--gl-color-orange-700);
+$gl-color-orange-800: var(--gl-color-orange-800);
+$gl-color-orange-900: var(--gl-color-orange-900);
+$gl-color-orange-950: var(--gl-color-orange-950);
+$gl-color-purple-50: var(--gl-color-purple-50);
+$gl-color-purple-100: var(--gl-color-purple-100);
+$gl-color-purple-200: var(--gl-color-purple-200);
+$gl-color-purple-300: var(--gl-color-purple-300);
+$gl-color-purple-400: var(--gl-color-purple-400);
+$gl-color-purple-500: var(--gl-color-purple-500);
+$gl-color-purple-600: var(--gl-color-purple-600);
+$gl-color-purple-700: var(--gl-color-purple-700);
+$gl-color-purple-800: var(--gl-color-purple-800);
+$gl-color-purple-900: var(--gl-color-purple-900);
+$gl-color-purple-950: var(--gl-color-purple-950);
+$gl-color-red-50: var(--gl-color-red-50);
+$gl-color-red-100: var(--gl-color-red-100);
+$gl-color-red-200: var(--gl-color-red-200);
+$gl-color-red-300: var(--gl-color-red-300);
+$gl-color-red-400: var(--gl-color-red-400);
+$gl-color-red-500: var(--gl-color-red-500);
+$gl-color-red-600: var(--gl-color-red-600);
+$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);
+$data-viz-green-50: var(--data-viz-green-50);
+$data-viz-green-100: var(--data-viz-green-100);
+$data-viz-green-200: var(--data-viz-green-200);
+$data-viz-green-300: var(--data-viz-green-300);
+$data-viz-green-400: var(--data-viz-green-400);
+$data-viz-green-500: var(--data-viz-green-500);
+$data-viz-green-600: var(--data-viz-green-600);
+$data-viz-green-700: var(--data-viz-green-700);
+$data-viz-green-800: var(--data-viz-green-800);
+$data-viz-green-900: var(--data-viz-green-900);
+$data-viz-green-950: var(--data-viz-green-950);
+$data-viz-aqua-50: var(--data-viz-aqua-50);
+$data-viz-aqua-100: var(--data-viz-aqua-100);
+$data-viz-aqua-200: var(--data-viz-aqua-200);
+$data-viz-aqua-300: var(--data-viz-aqua-300);
+$data-viz-aqua-400: var(--data-viz-aqua-400);
+$data-viz-aqua-500: var(--data-viz-aqua-500);
+$data-viz-aqua-600: var(--data-viz-aqua-600);
+$data-viz-aqua-700: var(--data-viz-aqua-700);
+$data-viz-aqua-800: var(--data-viz-aqua-800);
+$data-viz-aqua-900: var(--data-viz-aqua-900);
+$data-viz-aqua-950: var(--data-viz-aqua-950);
+$data-viz-blue-50: var(--data-viz-blue-50);
+$data-viz-blue-100: var(--data-viz-blue-100);
+$data-viz-blue-200: var(--data-viz-blue-200);
+$data-viz-blue-300: var(--data-viz-blue-300);
+$data-viz-blue-400: var(--data-viz-blue-400);
+$data-viz-blue-500: var(--data-viz-blue-500);
+$data-viz-blue-600: var(--data-viz-blue-600);
+$data-viz-blue-700: var(--data-viz-blue-700);
+$data-viz-blue-800: var(--data-viz-blue-800);
+$data-viz-blue-900: var(--data-viz-blue-900);
+$data-viz-blue-950: var(--data-viz-blue-950);
+$data-viz-magenta-50: var(--data-viz-magenta-50);
+$data-viz-magenta-100: var(--data-viz-magenta-100);
+$data-viz-magenta-200: var(--data-viz-magenta-200);
+$data-viz-magenta-300: var(--data-viz-magenta-300);
+$data-viz-magenta-400: var(--data-viz-magenta-400);
+$data-viz-magenta-500: var(--data-viz-magenta-500);
+$data-viz-magenta-600: var(--data-viz-magenta-600);
+$data-viz-magenta-700: var(--data-viz-magenta-700);
+$data-viz-magenta-800: var(--data-viz-magenta-800);
+$data-viz-magenta-900: var(--data-viz-magenta-900);
+$data-viz-magenta-950: var(--data-viz-magenta-950);
+$data-viz-orange-50: var(--data-viz-orange-50);
+$data-viz-orange-100: var(--data-viz-orange-100);
+$data-viz-orange-200: var(--data-viz-orange-200);
+$data-viz-orange-300: var(--data-viz-orange-300);
+$data-viz-orange-400: var(--data-viz-orange-400);
+$data-viz-orange-500: var(--data-viz-orange-500);
+$data-viz-orange-600: var(--data-viz-orange-600);
+$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);
+$blue-100: var(--blue-100);
+$blue-200: var(--blue-200);
+$blue-300: var(--blue-300);
+$blue-400: var(--blue-400);
+$blue-500: var(--blue-500);
+$blue-600: var(--blue-600);
+$blue-700: var(--blue-700);
+$blue-800: var(--blue-800);
+$blue-900: var(--blue-900);
+$blue-950: var(--blue-950);
+$gray-10: var(--gray-10);
+$gray-50: var(--gray-50);
+$gray-100: var(--gray-100);
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$gray-950: var(--gray-950);
+$green-50: var(--green-50);
+$green-100: var(--green-100);
+$green-200: var(--green-200);
+$green-300: var(--green-300);
+$green-400: var(--green-400);
+$green-500: var(--green-500);
+$green-600: var(--green-600);
+$green-700: var(--green-700);
+$green-800: var(--green-800);
+$green-900: var(--green-900);
+$green-950: var(--green-950);
+$orange-50: var(--orange-50);
+$orange-100: var(--orange-100);
+$orange-200: var(--orange-200);
+$orange-300: var(--orange-300);
+$orange-400: var(--orange-400);
+$orange-500: var(--orange-500);
+$orange-600: var(--orange-600);
+$orange-700: var(--orange-700);
+$orange-800: var(--orange-800);
+$orange-900: var(--orange-900);
+$orange-950: var(--orange-950);
+$purple-50: var(--purple-50);
+$purple-100: var(--purple-100);
+$purple-200: var(--purple-200);
+$purple-300: var(--purple-300);
+$purple-400: var(--purple-400);
+$purple-500: var(--purple-500);
+$purple-600: var(--purple-600);
+$purple-700: var(--purple-700);
+$purple-800: var(--purple-800);
+$purple-900: var(--purple-900);
+$purple-950: var(--purple-950);
+$red-50: var(--red-50);
+$red-100: var(--red-100);
+$red-200: var(--red-200);
+$red-300: var(--red-300);
+$red-400: var(--red-400);
+$red-500: var(--red-500);
+$red-600: var(--red-600);
+$red-700: var(--red-700);
+$red-800: var(--red-800);
+$red-900: var(--red-900);
+$red-950: var(--red-950);
+$brand-charcoal: var(--brand-charcoal);
+$brand-orange-01: var(--brand-orange-01);
+$brand-orange-02: var(--brand-orange-02);
+$brand-orange-03: var(--brand-orange-03);
+$brand-purple-01: var(--brand-purple-01);
+$brand-purple-02: var(--brand-purple-02);
+$brand-gray-01: var(--brand-gray-01);
+$brand-gray-02: var(--brand-gray-02);
+$brand-gray-03: var(--brand-gray-03);
+$brand-gray-04: var(--brand-gray-04);
+$brand-gray-05: var(--brand-gray-05);
+$t-gray-a-16: var(--t-gray-a-16);
+$t-gray-a-24: var(--t-gray-a-24);
+$t-gray-a-02: var(--t-gray-a-02);
+$t-gray-a-04: var(--t-gray-a-04);
+$t-gray-a-06: var(--t-gray-a-06);
+$t-gray-a-08: var(--t-gray-a-08);
+$t-white-a-16: var(--t-white-a-16);
+$t-white-a-24: var(--t-white-a-24);
+$t-white-a-36: var(--t-white-a-36);
+$t-white-a-02: var(--t-white-a-02);
+$t-white-a-04: var(--t-white-a-04);
+$t-white-a-06: var(--t-white-a-06);
+$t-white-a-08: var(--t-white-a-08);
+$gl-line-height-12: var(--gl-line-height-12);
+$gl-line-height-16: var(--gl-line-height-16);
+$gl-line-height-20: var(--gl-line-height-20);
+$gl-line-height-24: var(--gl-line-height-24);
+$gl-line-height-28: var(--gl-line-height-28);
+$gl-line-height-32: var(--gl-line-height-32);
+$gl-line-height-36: var(--gl-line-height-36);
+$gl-line-height-42: var(--gl-line-height-42);
+$gl-line-height-44: var(--gl-line-height-44);
+$gl-line-height-52: var(--gl-line-height-52);
+$gl-text-primary: var(--gl-text-primary);
+$gl-text-secondary: var(--gl-text-secondary);
+$gl-text-tertiary: var(--gl-text-tertiary);
+$gl-text-color-default: var(--gl-text-color-default);
+$gl-text-color-subtle: var(--gl-text-color-subtle);
+$gl-text-color-strong: var(--gl-text-color-strong);
+$gl-text-color-heading: var(--gl-text-color-heading);
+$gl-text-color-link: var(--gl-text-color-link);
+$gl-text-color-danger: var(--gl-text-color-danger);
+$gl-text-color-success: var(--gl-text-color-success);
+$gl-text-color-disabled: var(--gl-text-color-disabled);

package/dist/tokens/tailwind/tokens.cjs

@@ -204,14 +204,15 @@ const dataVizColors = {
   'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
 };
 const textColors = {
-  default: 'var(--gl-text-color-default, #434248)',
-  subtle: 'var(--gl-text-color-subtle, #626168)',
-  strong: 'var(--gl-text-color-strong, #1f1e24)',
-  heading: 'var(--gl-text-color-heading, #1f1e24)',
-  link: 'var(--gl-text-color-link, #0b5cad)',
-  danger: 'var(--gl-text-color-danger, #c91c00)',
-  success: 'var(--gl-text-color-success, #217645)',
-  disabled: 'var(--gl-text-color-disabled, #89888d)',
+  default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #434248))',
+  subtle: 'var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))',
+  strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #1f1e24))',
+  heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #1f1e24))',
+  link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
+  danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
+  success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
+  disabled:
+    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 
 const colors = {

package/dist/utils/charts/config.js

@@ -1,6 +1,6 @@
 import castArray from 'lodash/castArray';
 import merge from 'lodash/merge';
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';

package/dist/utils/charts/mock_data.js

@@ -1,4 +1,4 @@
-import { BLUE_500 } from '../../../dist/tokens/js/tokens';
+import { BLUE_500 } from '../../tokens/build/js/tokens';
 import { hexToRgba } from '../utils';
 import { colorFromDefaultPalette } from './theme';
 

package/dist/utils/charts/theme.js

@@ -1,4 +1,4 @@
-import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../../dist/tokens/js/tokens';
+import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../tokens/build/js/tokens';
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 

package/dist/utils/utils.js

@@ -194,22 +194,4 @@ function filterVisible(els) {
   return (els || []).filter(el => isVisible(el));
 }
 
-/**
- * Given an element, returns a Rect object
- * with top and bottom boundaries removed.
- */
-function getHorizontalBoundingClientRect(el) {
-  const rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
-  if (rect) {
-    return {
-      x: rect.x,
-      width: rect.width,
-      y: 0,
-      // top of the document
-      height: document.documentElement.clientHeight // bottom of the document
-    };
-  }
-  return null;
-}
-
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, getHorizontalBoundingClientRect, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.10.0",
+  "version": "80.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",