@gitlab/ui 86.9.0 → 86.10.0

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

@@ -5,7 +5,6 @@
 $gl-text-tertiary: #737278; // Use text.color.disabled instead
 $gl-text-secondary: #89888d; // Use text.color.subtle instead
 $gl-text-primary: #ececef; // Use text.color.default instead
-$gl-shadow-color-default: rgba(5, 5, 6, 0.24); // Used for the default shadow color.
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -23,12 +22,12 @@ $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;
+$t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
+$t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
+$t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
+$t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
+$t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
+$t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;
 $brand-gray-03: #74717a !default;
@@ -92,10 +91,10 @@ $gray-600: #a4a3a8 !default;
 $gray-500: #89888d !default;
 $gray-400: #737278 !default;
 $gray-300: #626168 !default;
-$gray-200: #535158 !default;
-$gray-100: #434248 !default;
-$gray-50: #333238 !default;
-$gray-10: #1f1e24 !default;
+$gray-200: #4c4b51 !default;
+$gray-100: #3a383f !default;
+$gray-50: #28272d !default;
+$gray-10: #18171d !default;
 $blue-950: #f2f9ff !default;
 $blue-900: #e9f3fc !default;
 $blue-800: #cbe2f9 !default;
@@ -107,7 +106,7 @@ $blue-300: #1068bf !default;
 $blue-200: #0b5cad !default;
 $blue-100: #064787 !default;
 $blue-50: #033464 !default;
-$white: #333238 !default;
+$white: #28272d !default;
 $black: #fff !default;
 $theme-light-red-950: #fdf9f8 !default;
 $theme-light-red-900: #faf2f1 !default;
@@ -367,11 +366,11 @@ $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-1000: #050506;
+$gl-color-neutral-950: #18171d;
+$gl-color-neutral-900: #28272d;
+$gl-color-neutral-800: #3a383f;
+$gl-color-neutral-700: #4c4b51;
 $gl-color-neutral-600: #626168;
 $gl-color-neutral-500: #737278;
 $gl-color-neutral-400: #89888d;
@@ -399,12 +398,12 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
 $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
 $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
 $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
-$gl-color-alpha-dark-24: rgba(31, 30, 36, 0.24);
-$gl-color-alpha-dark-16: rgba(31, 30, 36, 0.16);
-$gl-color-alpha-dark-8: rgba(31, 30, 36, 0.08);
-$gl-color-alpha-dark-6: rgba(31, 30, 36, 0.06);
-$gl-color-alpha-dark-4: rgba(31, 30, 36, 0.04);
-$gl-color-alpha-dark-2: rgba(31, 30, 36, 0.02);
+$gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
+$gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
+$gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
+$gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
+$gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
+$gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
 $gl-color-alpha-0: transparent;
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
@@ -491,6 +490,7 @@ $gl-status-muted-text-color-default: $gl-color-neutral-300; // Used for the text
 $gl-status-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral status item in the hover state.
 $gl-status-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral status item in the active state.
 $gl-status-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral status item when static or the default state when linked.
+$gl-shadow-color-default: $gl-color-alpha-dark-24; // Used for the default shadow color.
 $gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.

package/dist/tokens/scss/_tokens.scss

@@ -4,8 +4,7 @@
 
 $gl-text-tertiary: #89888d; // Use text.color.disabled instead
 $gl-text-secondary: #737278; // Use text.color.subtle instead
-$gl-text-primary: #333238; // Use text.color.default instead
-$gl-shadow-color-default: rgba(5, 5, 6, 0.16); // Used for the default shadow color.
+$gl-text-primary: #28272d; // Use text.color.default instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -23,12 +22,12 @@ $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;
+$t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
+$t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
+$t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
+$t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
+$t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
+$t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;
 $brand-gray-03: #74717a !default;
@@ -84,10 +83,10 @@ $green-300: #52b87a !default;
 $green-200: #91d4a8 !default;
 $green-100: #c3e6cd !default;
 $green-50: #ecf4ee !default;
-$gray-950: #1f1e24 !default;
-$gray-900: #333238 !default;
-$gray-800: #434248 !default;
-$gray-700: #535158 !default;
+$gray-950: #18171d !default;
+$gray-900: #28272d !default;
+$gray-800: #3a383f !default;
+$gray-700: #4c4b51 !default;
 $gray-600: #626168 !default;
 $gray-500: #737278 !default;
 $gray-400: #89888d !default;
@@ -108,7 +107,7 @@ $blue-200: #9dc7f1 !default;
 $blue-100: #cbe2f9 !default;
 $blue-50: #e9f3fc !default;
 $white: #fff !default;
-$black: #000 !default;
+$black: #050506 !default;
 $theme-light-red-950: #5c1105 !default;
 $theme-light-red-900: #751709 !default;
 $theme-light-red-800: #8b2212 !default;
@@ -367,11 +366,11 @@ $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-1000: #050506;
+$gl-color-neutral-950: #18171d;
+$gl-color-neutral-900: #28272d;
+$gl-color-neutral-800: #3a383f;
+$gl-color-neutral-700: #4c4b51;
 $gl-color-neutral-600: #626168;
 $gl-color-neutral-500: #737278;
 $gl-color-neutral-400: #89888d;
@@ -399,12 +398,12 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
 $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
 $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
 $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
-$gl-color-alpha-dark-24: rgba(31, 30, 36, 0.24);
-$gl-color-alpha-dark-16: rgba(31, 30, 36, 0.16);
-$gl-color-alpha-dark-8: rgba(31, 30, 36, 0.08);
-$gl-color-alpha-dark-6: rgba(31, 30, 36, 0.06);
-$gl-color-alpha-dark-4: rgba(31, 30, 36, 0.04);
-$gl-color-alpha-dark-2: rgba(31, 30, 36, 0.02);
+$gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
+$gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
+$gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
+$gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
+$gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
+$gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
 $gl-color-alpha-0: transparent;
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
@@ -491,6 +490,7 @@ $gl-status-muted-text-color-default: $gl-color-neutral-600; // Used for the text
 $gl-status-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral status item in the hover state.
 $gl-status-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral status item in the active state.
 $gl-status-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral status item when static or the default state when linked.
+$gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.

package/dist/tokens/tailwind/tokens.cjs

@@ -23,10 +23,10 @@ const baseColors = {
   'gray-400': 'var(--gray-400, #89888d)',
   'gray-500': 'var(--gray-500, #737278)',
   'gray-600': 'var(--gray-600, #626168)',
-  'gray-700': 'var(--gray-700, #535158)',
-  'gray-800': 'var(--gray-800, #434248)',
-  'gray-900': 'var(--gray-900, #333238)',
-  'gray-950': 'var(--gray-950, #1f1e24)',
+  'gray-700': 'var(--gray-700, #4c4b51)',
+  'gray-800': 'var(--gray-800, #3a383f)',
+  'gray-900': 'var(--gray-900, #28272d)',
+  'gray-950': 'var(--gray-950, #18171d)',
   'green-50': 'var(--green-50, #ecf4ee)',
   'green-100': 'var(--green-100, #c3e6cd)',
   'green-200': 'var(--green-200, #91d4a8)',
@@ -204,10 +204,10 @@ const dataVizColors = {
   'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
 };
 const textColors = {
-  default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #434248))',
+  default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383f))',
   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))',
+  strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #18171d))',
+  heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #18171d))',
   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))',
@@ -219,7 +219,7 @@ const backgroundColors = {
   strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
   overlay:
-    'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24)))',
+    'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))',
 };
 const borderColors = {
   default: 'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
@@ -228,9 +228,9 @@ const borderColors = {
   transparent: 'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
 };
 const iconColors = {
-  default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
+  default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #4c4b51))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
-  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
+  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #28272d))',
   disabled: 'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
   link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
   info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
@@ -239,12 +239,12 @@ const iconColors = {
   success: 'var(--gl-icon-color-success, var(--gl-color-green-600, #217645))',
 };
 const alphaDarkColors = {
-  2: 'var(--gl-color-alpha-dark-2, rgba(31, 30, 36, 0.02))',
-  4: 'var(--gl-color-alpha-dark-4, rgba(31, 30, 36, 0.04))',
-  6: 'var(--gl-color-alpha-dark-6, rgba(31, 30, 36, 0.06))',
-  8: 'var(--gl-color-alpha-dark-8, rgba(31, 30, 36, 0.08))',
-  16: 'var(--gl-color-alpha-dark-16, rgba(31, 30, 36, 0.16))',
-  24: 'var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24))',
+  2: 'var(--gl-color-alpha-dark-2, rgba(05, 05, 06, 0.02))',
+  4: 'var(--gl-color-alpha-dark-4, rgba(05, 05, 06, 0.04))',
+  6: 'var(--gl-color-alpha-dark-6, rgba(05, 05, 06, 0.06))',
+  8: 'var(--gl-color-alpha-dark-8, rgba(05, 05, 06, 0.08))',
+  16: 'var(--gl-color-alpha-dark-16, rgba(05, 05, 06, 0.16))',
+  24: 'var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24))',
 };
 const alphaLightColors = {
   2: 'var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))',
@@ -284,7 +284,7 @@ const colors = {
   current: 'currentColor',
   transparent: 'transparent',
   white: 'var(--white, #fff)',
-  black: 'var(--black, #000)',
+  black: 'var(--black, #050506)',
   alpha: {
     dark: { ...alphaDarkColors },
     light: { ...alphaLightColors },
@@ -315,7 +315,7 @@ const fill = {
 const textColor = {
   ...colors,
   ...textColors,
-  primary: 'var(--gl-text-primary, #333238)',
+  primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',
 };