@gitlab/ui 86.9.0 → 86.10.0

package/dist/tailwind.css

@@ -1,2 +1,2 @@
-.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}.gl-font-monospace{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.gl-border-b-solid{border-bottom-style:solid}.gl-border-t-solid{border-top-style:solid}
+.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#4c4b51))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#28272d))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#4c4b51)}.gl-text-gray-900{color:var(--gray-900,#28272d)}.gl-text-gray-950{color:var(--gray-950,#18171d)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#18171d))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}.gl-font-monospace{font-family:var(--default-mono-font,"GitLab Mono"),"JetBrains Mono","Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-variant-ligatures:none}.gl-border-b-solid{border-bottom-style:solid}.gl-border-t-solid{border-top-style:solid}
 /*# sourceMappingURL=tailwind.css.map */

package/dist/tokens/build/js/tokens.dark.js

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