@gitlab/ui 86.9.0 → 86.10.0

package/dist/utils/utils.js

@@ -60,7 +60,7 @@ function colorFromBackground(backgroundColor) {
   let contrastRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2.4;
   let color;
   const lightColor = rgbFromHex('#FFFFFF');
-  const darkColor = rgbFromHex('#1f1e24');
+  const darkColor = rgbFromHex('#18171d');
   if (backgroundColor.startsWith('#')) {
     color = rgbFromHex(backgroundColor);
   } else if (backgroundColor.startsWith('rgba(')) {

package/package.json

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

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -342,12 +342,16 @@ export default {
       this.$refs.baseDropdown.closeAndFocus();
     },
     handleAction(action) {
-      /**
-       * Emitted when one of disclosure dropdown items is clicked
-       *
-       * @event action
-       */
-      this.$emit('action', action);
+      // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4376 for
+      // detailed explanation why we need requestAnimationFrame
+      window.requestAnimationFrame(() => {
+        /**
+         * Emitted when one of disclosure dropdown items is clicked
+         *
+         * @event action
+         */
+        this.$emit('action', action);
+      });
     },
     handleAutoClose(e) {
       if (

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -37,6 +37,18 @@ export const mockItems = [
   },
 ];
 
+export const mockButtons = [
+  {
+    text: 'Checks',
+  },
+  {
+    text: 'Projects',
+  },
+  {
+    text: 'Standards',
+  },
+];
+
 export const mockItemsCustomItem = [
   {
     text: 'Assigned to you',

package/src/tokens/build/css/tokens.css

@@ -6,8 +6,7 @@
 :root {
   --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;
@@ -25,12 +24,12 @@
   --t-white-a-36: rgba(255, 255, 255, 0.36);
   --t-white-a-24: rgba(255, 255, 255, 0.24);
   --t-white-a-16: rgba(255, 255, 255, 0.16);
-  --t-gray-a-08: rgba(31, 30, 36, 0.08);
-  --t-gray-a-06: rgba(31, 30, 36, 0.06);
-  --t-gray-a-04: rgba(31, 30, 36, 0.04);
-  --t-gray-a-02: rgba(31, 30, 36, 0.02);
-  --t-gray-a-24: rgba(31, 30, 36, 0.24);
-  --t-gray-a-16: rgba(31, 30, 36, 0.16);
+  --t-gray-a-08: rgba(05, 05, 06, 0.08);
+  --t-gray-a-06: rgba(05, 05, 06, 0.06);
+  --t-gray-a-04: rgba(05, 05, 06, 0.04);
+  --t-gray-a-02: rgba(05, 05, 06, 0.02);
+  --t-gray-a-24: rgba(05, 05, 06, 0.24);
+  --t-gray-a-16: rgba(05, 05, 06, 0.16);
   --brand-gray-05: #2b2838;
   --brand-gray-04: #45424d;
   --brand-gray-03: #74717a;
@@ -86,10 +85,10 @@
   --green-200: #91d4a8;
   --green-100: #c3e6cd;
   --green-50: #ecf4ee;
-  --gray-950: #1f1e24;
-  --gray-900: #333238;
-  --gray-800: #434248;
-  --gray-700: #535158;
+  --gray-950: #18171d;
+  --gray-900: #28272d;
+  --gray-800: #3a383f;
+  --gray-700: #4c4b51;
   --gray-600: #626168;
   --gray-500: #737278;
   --gray-400: #89888d;
@@ -110,7 +109,7 @@
   --blue-100: #cbe2f9;
   --blue-50: #e9f3fc;
   --white: #fff;
-  --black: #000;
+  --black: #050506;
   --theme-light-red-950: #5c1105;
   --theme-light-red-900: #751709;
   --theme-light-red-800: #8b2212;
@@ -369,11 +368,11 @@
   --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;
@@ -401,12 +400,12 @@
   --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: var(--gl-color-neutral-400); /* Used for disabled text. */
   --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
@@ -493,6 +492,7 @@
   --gl-status-muted-border-color-hover: var(--gl-color-neutral-200); /* Used for the border of a subtle neutral status item in the hover state. */
   --gl-status-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a subtle neutral status item in the active state. */
   --gl-status-muted-background-color-default: var(--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: var(--gl-color-alpha-dark-16); /* Used for the default shadow color. */
   --gl-icon-color-success: var(--gl-color-green-600); /* Used for an icon associated with success or validity. */
   --gl-icon-color-danger: var(--gl-color-red-600); /* Used for an icon associated with an error or danger. */
   --gl-icon-color-warning: var(--gl-color-orange-600); /* Used for an icon associated with a warning. */

package/src/tokens/build/css/tokens.dark.css

@@ -7,7 +7,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;
@@ -25,12 +24,12 @@
   --t-white-a-36: rgba(255, 255, 255, 0.36);
   --t-white-a-24: rgba(255, 255, 255, 0.24);
   --t-white-a-16: rgba(255, 255, 255, 0.16);
-  --t-gray-a-08: rgba(31, 30, 36, 0.08);
-  --t-gray-a-06: rgba(31, 30, 36, 0.06);
-  --t-gray-a-04: rgba(31, 30, 36, 0.04);
-  --t-gray-a-02: rgba(31, 30, 36, 0.02);
-  --t-gray-a-24: rgba(31, 30, 36, 0.24);
-  --t-gray-a-16: rgba(31, 30, 36, 0.16);
+  --t-gray-a-08: rgba(05, 05, 06, 0.08);
+  --t-gray-a-06: rgba(05, 05, 06, 0.06);
+  --t-gray-a-04: rgba(05, 05, 06, 0.04);
+  --t-gray-a-02: rgba(05, 05, 06, 0.02);
+  --t-gray-a-24: rgba(05, 05, 06, 0.24);
+  --t-gray-a-16: rgba(05, 05, 06, 0.16);
   --brand-gray-05: #2b2838;
   --brand-gray-04: #45424d;
   --brand-gray-03: #74717a;
@@ -94,10 +93,10 @@
   --gray-500: #89888d;
   --gray-400: #737278;
   --gray-300: #626168;
-  --gray-200: #535158;
-  --gray-100: #434248;
-  --gray-50: #333238;
-  --gray-10: #1f1e24;
+  --gray-200: #4c4b51;
+  --gray-100: #3a383f;
+  --gray-50: #28272d;
+  --gray-10: #18171d;
   --blue-950: #f2f9ff;
   --blue-900: #e9f3fc;
   --blue-800: #cbe2f9;
@@ -109,7 +108,7 @@
   --blue-200: #0b5cad;
   --blue-100: #064787;
   --blue-50: #033464;
-  --white: #333238;
+  --white: #28272d;
   --black: #fff;
   --theme-light-red-950: #fdf9f8;
   --theme-light-red-900: #faf2f1;
@@ -369,11 +368,11 @@
   --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;
@@ -401,12 +400,12 @@
   --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: var(--gl-color-neutral-400); /* Used for disabled text. */
   --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
@@ -493,6 +492,7 @@
   --gl-status-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral status item in the hover state. */
   --gl-status-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral status item in the active state. */
   --gl-status-muted-background-color-default: var(--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: var(--gl-color-alpha-dark-24); /* Used for the default shadow color. */
   --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
   --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
   --gl-icon-color-warning: var(--gl-color-orange-300); /* Used for an icon associated with a warning. */

package/src/tokens/build/js/tokens.dark.js

@@ -3,27 +3,27 @@
  * Do not edit directly
  */
 
-export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#333238'; // Used for the background of a disabled action.
-export const GL_ACTION_BORDER_COLOR_DISABLED = '#434248'; // Used for the border of a disabled action.
+export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#28272d'; // Used for the background of a disabled action.
+export const GL_ACTION_BORDER_COLOR_DISABLED = '#3a383f'; // Used for the border of a disabled action.
 export const GL_ACTION_TEXT_COLOR_DISABLED = '#89888d'; // Used for the text of a disabled action.
 export const GL_ACTION_ICON_COLOR_DISABLED = '#737278'; // Used for the icon of a disabled action.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined neutral action in the default state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#333238'; // Used for the background of an outlined neutral action in the hover state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#333238'; // Used for the background of an outlined neutral action in the focus state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#434248'; // Used for the background of an outlined neutral action in the active state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined neutral action in the default state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of an outlined neutral action in the hover state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of an outlined neutral action in the focus state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of an outlined neutral action in the active state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle neutral action in the default state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_HOVER = '#333238'; // Used for the background of a borderless, subtle neutral action in the hover state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#333238'; // Used for the background of a borderless, subtle neutral action in the focus state.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#434248'; // Used for the background of a borderless, subtle neutral action in the active state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_HOVER = '#28272d'; // Used for the background of a borderless, subtle neutral action in the hover state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#28272d'; // Used for the background of a borderless, subtle neutral action in the focus state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#3a383f'; // Used for the background of a borderless, subtle neutral action in the active state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_DEFAULT = '#89888d'; // Used for the background of a solid, strong neutral action in the default state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_HOVER = '#a4a3a8'; // Used for the background of a solid, strong neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_FOCUS = '#a4a3a8'; // Used for the background of a solid, strong neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#bfbfc3'; // Used for the background of a solid, strong neutral action in the active state.
-export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#535158'; // Used for the border of an outlined neutral action in the default state.
+export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#4c4b51'; // Used for the border of an outlined neutral action in the default state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = '#737278'; // Used for the border of an outlined neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = '#737278'; // Used for the border of an outlined neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the border of an outlined neutral action in the active state.
-export const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#535158'; // Used for the border of a outlined neutral action when in a selected or current state.
+export const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#4c4b51'; // Used for the border of a outlined neutral action when in a selected or current state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_DEFAULT = '#a4a3a8'; // Used for the border of a solid, strong neutral action in the default state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#dcdcde'; // Used for the border of a solid, strong neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#dcdcde'; // Used for the border of a solid, strong neutral action in the focus state.
@@ -32,13 +32,13 @@ export const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#ececef'; // Used for the t
 export const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#ececef'; // Used for the text of a neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#ececef'; // Used for the text of a neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral action in the active state.
-export const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#333238'; // Used for the text on a solid, strong neutral action background.
+export const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong neutral action background.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of outlined and borderless neutral actions.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#bfbfc3'; // Used for the icon of outlined and borderless neutral actions in the hover state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#bfbfc3'; // Used for the icon of outlined and borderless neutral actions in the focus state.
 export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#ececef'; // Used for the icon of outlined and borderless neutral actions in the active state.
-export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong neutral action background.
-export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined confirm (positive) action in the default state.
+export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong neutral action background.
+export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined confirm (positive) action in the default state.
 export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#033464'; // Used for the background of an outlined confirm (positive) action in the hover state.
 export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = '#033464'; // Used for the background of an outlined confirm (positive) action in the focus state.
 export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#064787'; // Used for the background of an outlined confirm (positive) action in the active state.
@@ -64,13 +64,13 @@ export const GL_ACTION_CONFIRM_TEXT_COLOR_DEFAULT = '#428fdc'; // Used for the t
 export const GL_ACTION_CONFIRM_TEXT_COLOR_HOVER = '#9dc7f1'; // Used for the text of a confirm (positive) action in the hover state.
 export const GL_ACTION_CONFIRM_TEXT_COLOR_FOCUS = '#9dc7f1'; // Used for the text of a confirm (positive) action in the focus state.
 export const GL_ACTION_CONFIRM_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of a confirm (positive) action in the active state.
-export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#333238'; // Used for the text on a solid, strong confirm (positive) action background.
+export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong confirm (positive) action background.
 export const GL_ACTION_CONFIRM_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of a confirm (positive) action in the default state.
 export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the hover state.
 export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the focus state.
 export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#e9f3fc'; // Used for the icon of a confirm (positive) action in the active state.
-export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong confirm (positive) action background.
-export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined danger (destructive) action in the default state.
+export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong confirm (positive) action background.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined danger (destructive) action in the default state.
 export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = '#660e00'; // Used for the background of an outlined danger (destructive) action in the hover state.
 export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = '#660e00'; // Used for the background of an outlined danger (destructive) action in the focus state.
 export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = '#8d1300'; // Used for the background of an outlined danger (destructive) action in the active state.
@@ -94,28 +94,28 @@ export const GL_ACTION_DANGER_TEXT_COLOR_DEFAULT = '#ec5941'; // Used for the te
 export const GL_ACTION_DANGER_TEXT_COLOR_HOVER = '#fcb5aa'; // Used for the text of a danger (destructive) action in the hover state.
 export const GL_ACTION_DANGER_TEXT_COLOR_FOCUS = '#fcb5aa'; // Used for the text of a danger (destructive) action in the focus state.
 export const GL_ACTION_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (destructive) action in the active state.
-export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#333238'; // Used for the text on a solid, strong danger (destructive) action background.
+export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong danger (destructive) action background.
 export const GL_ACTION_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (destructive) action in the default state.
 export const GL_ACTION_DANGER_ICON_COLOR_HOVER = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the hover state.
 export const GL_ACTION_DANGER_ICON_COLOR_FOCUS = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the focus state.
 export const GL_ACTION_DANGER_ICON_COLOR_ACTIVE = '#fcf1ef'; // Used for the icon of a danger (destructive) action in the active state.
-export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong danger (destructive) action background.
-export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
-export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
-export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
-export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
+export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong danger (destructive) action background.
+export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default background color.
+export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
+export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.
+export const GL_BACKGROUND_COLOR_DISABLED = '#28272d'; // Used to identify a disabled section.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
-export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
-export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a subtle border in combination with the default background.
+export const GL_BORDER_COLOR_DEFAULT = '#3a383f'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#28272d'; // Used for a subtle border in combination with the default background.
 export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
 export const GL_COLOR_ALPHA_0 = 'transparent';
-export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
-export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';
-export const GL_COLOR_ALPHA_DARK_6 = 'rgba(31, 30, 36, 0.06)';
-export const GL_COLOR_ALPHA_DARK_8 = 'rgba(31, 30, 36, 0.08)';
-export const GL_COLOR_ALPHA_DARK_16 = 'rgba(31, 30, 36, 0.16)';
-export const GL_COLOR_ALPHA_DARK_24 = 'rgba(31, 30, 36, 0.24)';
+export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
+export const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';
+export const GL_COLOR_ALPHA_DARK_6 = 'rgba(05, 05, 06, 0.06)';
+export const GL_COLOR_ALPHA_DARK_8 = 'rgba(05, 05, 06, 0.08)';
+export const GL_COLOR_ALPHA_DARK_16 = 'rgba(05, 05, 06, 0.16)';
+export const GL_COLOR_ALPHA_DARK_24 = 'rgba(05, 05, 06, 0.24)';
 export const GL_COLOR_ALPHA_LIGHT_2 = 'rgba(255, 255, 255, 0.02)';
 export const GL_COLOR_ALPHA_LIGHT_4 = 'rgba(255, 255, 255, 0.04)';
 export const GL_COLOR_ALPHA_LIGHT_6 = 'rgba(255, 255, 255, 0.06)';
@@ -143,11 +143,11 @@ export const GL_COLOR_NEUTRAL_300 = '#a4a3a8';
 export const GL_COLOR_NEUTRAL_400 = '#89888d';
 export const GL_COLOR_NEUTRAL_500 = '#737278';
 export const GL_COLOR_NEUTRAL_600 = '#626168';
-export const GL_COLOR_NEUTRAL_700 = '#535158';
-export const GL_COLOR_NEUTRAL_800 = '#434248';
-export const GL_COLOR_NEUTRAL_900 = '#333238';
-export const GL_COLOR_NEUTRAL_950 = '#1f1e24';
-export const GL_COLOR_NEUTRAL_1000 = '#000';
+export const GL_COLOR_NEUTRAL_700 = '#4c4b51';
+export const GL_COLOR_NEUTRAL_800 = '#3a383f';
+export const GL_COLOR_NEUTRAL_900 = '#28272d';
+export const GL_COLOR_NEUTRAL_950 = '#18171d';
+export const GL_COLOR_NEUTRAL_1000 = '#050506';
 export const GL_COLOR_GREEN_50 = '#ecf4ee';
 export const GL_COLOR_GREEN_100 = '#c3e6cd';
 export const GL_COLOR_GREEN_200 = '#91d4a8';
@@ -407,7 +407,7 @@ export const THEME_LIGHT_RED_800 = '#f6d9d5';
 export const THEME_LIGHT_RED_900 = '#faf2f1';
 export const THEME_LIGHT_RED_950 = '#fdf9f8';
 export const BLACK = '#fff';
-export const WHITE = '#333238';
+export const WHITE = '#28272d';
 export const BLUE_50 = '#033464';
 export const BLUE_100 = '#064787';
 export const BLUE_200 = '#0b5cad';
@@ -419,10 +419,10 @@ export const BLUE_700 = '#9dc7f1';
 export const BLUE_800 = '#cbe2f9';
 export const BLUE_900 = '#e9f3fc';
 export const BLUE_950 = '#f2f9ff';
-export const GRAY_10 = '#1f1e24';
-export const GRAY_50 = '#333238';
-export const GRAY_100 = '#434248';
-export const GRAY_200 = '#535158';
+export const GRAY_10 = '#18171d';
+export const GRAY_50 = '#28272d';
+export const GRAY_100 = '#3a383f';
+export const GRAY_200 = '#4c4b51';
 export const GRAY_300 = '#626168';
 export const GRAY_400 = '#737278';
 export const GRAY_500 = '#89888d';
@@ -486,12 +486,12 @@ export const BRAND_GRAY_02 = '#a2a1a6';
 export const BRAND_GRAY_03 = '#74717a';
 export const BRAND_GRAY_04 = '#45424d';
 export const BRAND_GRAY_05 = '#2b2838';
-export const T_GRAY_A_16 = 'rgba(31, 30, 36, 0.16)';
-export const T_GRAY_A_24 = 'rgba(31, 30, 36, 0.24)';
-export const T_GRAY_A_02 = 'rgba(31, 30, 36, 0.02)';
-export const T_GRAY_A_04 = 'rgba(31, 30, 36, 0.04)';
-export const T_GRAY_A_06 = 'rgba(31, 30, 36, 0.06)';
-export const T_GRAY_A_08 = 'rgba(31, 30, 36, 0.08)';
+export const T_GRAY_A_16 = 'rgba(05, 05, 06, 0.16)';
+export const T_GRAY_A_24 = 'rgba(05, 05, 06, 0.24)';
+export const T_GRAY_A_02 = 'rgba(05, 05, 06, 0.02)';
+export const T_GRAY_A_04 = 'rgba(05, 05, 06, 0.04)';
+export const T_GRAY_A_06 = 'rgba(05, 05, 06, 0.06)';
+export const T_GRAY_A_08 = 'rgba(05, 05, 06, 0.08)';
 export const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)';
 export const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)';
 export const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)';
@@ -499,21 +499,21 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
-export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(31, 30, 36, 0.08)'; // Used to define the edge of an avatar.
-export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(31, 30, 36, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
+export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
+export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED = '#660e00'; // Red background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#232150'; // Purple background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#333238'; // Neutral background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
-export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#333238'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
-export const GL_LABEL_LIGHT_TEXT_COLOR = '#1f1e24'; // Used for the label text color on a light background color.
+export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#4c4b51'; // Used for the breadcrumb level separator.
+export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
-export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#1f1e24'; // Used for the label remove button background on a light background color in the hover state.
-export const GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the label remove button icon on a light background color in the default state.
+export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.
+export const GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT = '#18171d'; // Used for the label remove button icon on a light background color in the default state.
 export const GL_LABEL_DARK_TEXT_COLOR = '#fff'; // Used for the label text color on a dark background color.
 export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a dark background color in the default state.
 export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the label remove button background on a dark background color in the hover state.
@@ -521,25 +521,25 @@ export const GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the l
 export const GL_LABEL_SCOPED_TEXT_COLOR = '#fff'; // Used for the scoped label text color.
 export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the scoped label remove button background in the hover state.
 export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the scoped label remove button icon in the default state.
-export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#1f1e24'; // Used for the scoped label remove button icon in the hover state.
-export const GL_POPOVER_BACKGROUND_COLOR = '#333238'; // Used for the background color of popover.
-export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#434248'; // Used for the skeleton loader background color.
-export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#535158'; // Used for the animated shimmer effect in a skeleton loader.
-export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#434248'; // Used for the static track (background) of a loading spinner.
-export const GL_SPINNER_TRACK_COLOR_LIGHT = '#434248'; // Used for the static track (background) of a loading spinner on a dark background.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button icon in the hover state.
+export const GL_POPOVER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of popover.
+export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f'; // Used for the skeleton loader background color.
+export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51'; // Used for the animated shimmer effect in a skeleton loader.
+export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#3a383f'; // Used for the static track (background) of a loading spinner.
+export const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f'; // Used for the static track (background) of a loading spinner on a dark background.
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3'; // Used for the animated segment of a loading spinner.
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
-export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#333238'; // Used for the background of a table row in hover state.
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
-export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for form control (input, radio button, checkbox, textarea) default background.
-export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#1f1e24'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for form control (input, radio button, checkbox, textarea) default background.
+export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#18171d'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#737278'; // Used for form control (input, radio button, checkbox, textarea) default border.
 export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
-export const GL_CONTROL_BORDER_COLOR_DISABLED = '#434248'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_DISABLED = '#3a383f'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 export const GL_CONTROL_BORDER_COLOR_ERROR = '#ec5941'; // Used for invalid form control (input, textarea) border.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
@@ -547,13 +547,13 @@ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for che
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#ec5941'; // Used for the helper text when the input is invalid.
 export const GL_CONTROL_TEXT_COLOR_VALID = '#2da160'; // Used for the helper text when the input is valid.
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278'; // Used for placeholder text within inputs.
-export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#333238'; // Used for checkbox and radio button state indicators.
+export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#28272d'; // Used for checkbox and radio button state indicators.
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d'; // Used for disabled checkbox and radio button state indicators.
 export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a background associated with feedback like a tooltip or toast message.
-export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#333238'; // Used for text on a strong feedback background.
-export const GL_FEEDBACK_ICON_COLOR_STRONG = '#333238'; // Used for an icon on a strong feedback background.
+export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#28272d'; // Used for text on a strong feedback background.
+export const GL_FEEDBACK_ICON_COLOR_STRONG = '#28272d'; // Used for an icon on a strong feedback background.
 export const GL_FEEDBACK_LINK_COLOR_STRONG = '#0b5cad'; // Used for a link on a strong feedback background.
-export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#333238'; // Used for a background associated with neutral feedback.
+export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for a background associated with neutral feedback.
 export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for an icon associated with a neutral feedback section.
 export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#033464'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
 export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; // Used for an icon associated with informational feedback.
@@ -564,7 +564,7 @@ export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; // Used for an icon ass
 export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; // Used for a background associated with danger or critical feedback.
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f57f6c'; // Used for an icon associated with danger or critical feedback.
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc'; // Used for the outer color portion of the focus ring.
-export const GL_FOCUS_RING_INNER_COLOR = '#1f1e24'; // Used for the inner neutral portion of the focus ring.
+export const GL_FOCUS_RING_INNER_COLOR = '#18171d'; // Used for the inner neutral portion of the focus ring.
 export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
 export const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
 export const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.
@@ -584,10 +584,10 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
-export const GL_SHADOW_COLOR_DEFAULT = 'rgba(5, 5, 6, 0.24)'; // Used for the default shadow color.
-export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of a subtle neutral status item when static or the default state when linked.
-export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#434248'; // Used for the background of a subtle neutral status item in the active state.
-export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#535158'; // Used for the border of a subtle neutral status item in the hover state.
+export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.24)'; // Used for the default shadow color.
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral status item in the active state.
+export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral status item in the hover state.
 export const GL_STATUS_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral status item when static or the default state when linked.
 export const GL_STATUS_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral status item in the hover state.
 export const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral status item in the focus state.
@@ -596,9 +596,9 @@ export const GL_STATUS_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the ico
 export const GL_STATUS_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the hover state.
 export const GL_STATUS_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the focus state.
 export const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral status item in the active state.
-export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#434248'; // Used for the background of a neutral status item when static or the default state when linked.
-export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#535158'; // Used for the background of a neutral status item in the active state.
-export const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#535158'; // Used for the border of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral status item in the hover state.
 export const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral status item when static or the default state when linked.
 export const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral status item in the hover state.
 export const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral status item in the focus state.