@gitlab/ui 86.9.0 → 86.10.0

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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)',
 };

package/src/tokens/color.alpha.tokens.json

@@ -7,27 +7,27 @@
       },
       "dark": {
         "2": {
-          "$value": "rgba(31, 30, 36, 0.02)",
+          "$value": "rgba(05, 05, 06, 0.02)",
           "$type": "color"
         },
         "4": {
-          "$value": "rgba(31, 30, 36, 0.04)",
+          "$value": "rgba(05, 05, 06, 0.04)",
           "$type": "color"
         },
         "6": {
-          "$value": "rgba(31, 30, 36, 0.06)",
+          "$value": "rgba(05, 05, 06, 0.06)",
           "$type": "color"
         },
         "8": {
-          "$value": "rgba(31, 30, 36, 0.08)",
+          "$value": "rgba(05, 05, 06, 0.08)",
           "$type": "color"
         },
         "16": {
-          "$value": "rgba(31, 30, 36, 0.16)",
+          "$value": "rgba(05, 05, 06, 0.16)",
           "$type": "color"
         },
         "24": {
-          "$value": "rgba(31, 30, 36, 0.24)",
+          "$value": "rgba(05, 05, 06, 0.24)",
           "$type": "color"
         }
       },

package/src/tokens/color.constant.tokens.json

@@ -84,23 +84,23 @@
         "$type": "color"
       },
       "700": {
-        "$value": "#535158",
+        "$value": "#4c4b51",
         "$type": "color"
       },
       "800": {
-        "$value": "#434248",
+        "$value": "#3a383f",
         "$type": "color"
       },
       "900": {
-        "$value": "#333238",
+        "$value": "#28272d",
         "$type": "color"
       },
       "950": {
-        "$value": "#1f1e24",
+        "$value": "#18171d",
         "$type": "color"
       },
       "1000": {
-        "$value": "#000",
+        "$value": "#050506",
         "$type": "color"
       }
     },

package/src/tokens/color.tokens.json

@@ -1,18 +1,18 @@
 {
   "black": {
     "$value": {
-      "default": "#000",
-      "dark": "#fff"
-    },
+        "default": "#050506",
+        "dark": "#fff"
+      },
     "$type": "color",
     "themeable": true,
     "prefix": false
   },
   "white": {
     "$value": {
-      "default": "#fff",
-      "dark": "#333238"
-    },
+        "default": "#fff",
+        "dark": "#28272d"
+      },
     "$type": "color",
     "themeable": true,
     "prefix": false
@@ -122,7 +122,7 @@
     "10": {
       "$value": {
         "default": "#fbfafd",
-        "dark": "#1f1e24"
+        "dark": "#18171d"
       },
       "$type": "color",
       "themeable": true,
@@ -131,7 +131,7 @@
     "50": {
       "$value": {
         "default": "#ececef",
-        "dark": "#333238"
+        "dark": "#28272d"
       },
       "$type": "color",
       "themeable": true,
@@ -140,7 +140,7 @@
     "100": {
       "$value": {
         "default": "#dcdcde",
-        "dark": "#434248"
+        "dark": "#3a383f"
       },
       "$type": "color",
       "themeable": true,
@@ -149,7 +149,7 @@
     "200": {
       "$value": {
         "default": "#bfbfc3",
-        "dark": "#535158"
+        "dark": "#4c4b51"
       },
       "$type": "color",
       "themeable": true,
@@ -193,7 +193,7 @@
     },
     "700": {
       "$value": {
-        "default": "#535158",
+        "default": "#4c4b51",
         "dark": "#bfbfc3"
       },
       "$type": "color",
@@ -202,7 +202,7 @@
     },
     "800": {
       "$value": {
-        "default": "#434248",
+        "default": "#3a383f",
         "dark": "#dcdcde"
       },
       "$type": "color",
@@ -211,7 +211,7 @@
     },
     "900": {
       "$value": {
-        "default": "#333238",
+        "default": "#28272d",
         "dark": "#ececef"
       },
       "$type": "color",
@@ -220,7 +220,7 @@
     },
     "950": {
       "$value": {
-        "default": "#1f1e24",
+        "default": "#18171d",
         "dark": "#fbfafd"
       },
       "$type": "color",

package/src/tokens/color.transparency.tokens.json

@@ -1,42 +1,42 @@
 {
   "t-gray-a": {
     "02": {
-      "$value": "rgba(31, 30, 36, 0.02)",
+      "$value": "rgba(05, 05, 06, 0.02)",
       "$type": "color",
       "themeable": true,
       "prefix": false,
       "deprecated": true
     },
     "04": {
-      "$value": "rgba(31, 30, 36, 0.04)",
+      "$value": "rgba(05, 05, 06, 0.04)",
       "$type": "color",
       "themeable": true,
       "prefix": false,
       "deprecated": true
     },
     "06": {
-      "$value": "rgba(31, 30, 36, 0.06)",
+      "$value": "rgba(05, 05, 06, 0.06)",
       "$type": "color",
       "themeable": true,
       "prefix": false,
       "deprecated": true
     },
     "08": {
-      "$value": "rgba(31, 30, 36, 0.08)",
+      "$value": "rgba(05, 05, 06, 0.08)",
       "$type": "color",
       "themeable": true,
       "prefix": false,
       "deprecated": true
     },
     "16": {
-      "$value": "rgba(31, 30, 36, 0.16)",
+      "$value": "rgba(05, 05, 06, 0.16)",
       "$type": "color",
       "themeable": true,
       "prefix": false,
       "deprecated": true
     },
     "24": {
-      "$value": "rgba(31, 30, 36, 0.24)",
+      "$value": "rgba(05, 05, 06, 0.24)",
       "$type": "color",
       "themeable": true,
       "prefix": false,

package/src/tokens/shadow.tokens.json

@@ -3,8 +3,8 @@
     "color": {
       "default": {
         "$value": {
-          "default": "rgba(5, 5, 6, 0.16)",
-          "dark": "rgba(5, 5, 6, 0.24)"
+          "default": "{color.alpha.dark.16}",
+          "dark": "{color.alpha.dark.24}"
         },
         "$type": "color",
         "$description": "Used for the default shadow color."

package/src/tokens/text.tokens.json

@@ -2,7 +2,7 @@
   "text": {
     "primary": {
       "$value": {
-        "default": "#333238",
+        "default": "#28272d",
         "dark": "#ececef"
       },
       "$type": "color",

package/src/utils/utils.js

@@ -66,7 +66,7 @@ export function relativeLuminance(rgb) {
 export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
   let color;
   const lightColor = rgbFromHex('#FFFFFF');
-  const darkColor = rgbFromHex('#1f1e24');
+  const darkColor = rgbFromHex('#18171d');
 
   if (backgroundColor.startsWith('#')) {
     color = rgbFromHex(backgroundColor);