@gitlab/ui 86.9.0 → 86.10.0

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

@@ -18,25 +18,25 @@ const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#dcdcde'; // Used for
 const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_DEFAULT = '#737278'; // Used for the background of a solid, strong neutral action in the default state.
 const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_HOVER = '#626168'; // Used for the background of a solid, strong neutral action in the hover state.
 const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_FOCUS = '#626168'; // Used for the background of a solid, strong neutral action in the focus state.
-const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#535158'; // Used for the background of a solid, strong neutral action in the active state.
+const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#4c4b51'; // Used for the background of a solid, strong neutral action in the active state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#bfbfc3'; // Used for the border of an outlined neutral action in the default state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = '#89888d'; // Used for the border of an outlined neutral action in the hover state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = '#89888d'; // Used for the border of an outlined neutral action in the focus state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = '#626168'; // Used for the border of an outlined neutral action in the active state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#a4a3a8'; // Used for the border of a outlined neutral action when in a selected or current state.
 const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_DEFAULT = '#626168'; // Used for the border of a solid, strong neutral action in the default state.
-const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#434248'; // Used for the border of a solid, strong neutral action in the hover state.
-const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#434248'; // Used for the border of a solid, strong neutral action in the focus state.
-const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_ACTIVE = '#333238'; // Used for the border of a solid, strong neutral action in the active state.
-const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#333238'; // Used for the text of outlined and borderless neutral actions.
-const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#333238'; // Used for the text of a neutral action in the hover state.
-const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#333238'; // Used for the text of a neutral action in the focus state.
-const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#333238'; // Used for the text of a neutral action in the active state.
+const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#3a383f'; // Used for the border of a solid, strong neutral action in the hover state.
+const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#3a383f'; // Used for the border of a solid, strong neutral action in the focus state.
+const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_ACTIVE = '#28272d'; // Used for the border of a solid, strong neutral action in the active state.
+const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#28272d'; // Used for the text of outlined and borderless neutral actions.
+const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#28272d'; // Used for the text of a neutral action in the hover state.
+const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#28272d'; // Used for the text of a neutral action in the focus state.
+const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#28272d'; // Used for the text of a neutral action in the active state.
 const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong neutral action background.
 const GL_ACTION_NEUTRAL_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of outlined and borderless neutral actions.
-const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#535158'; // Used for the icon of outlined and borderless neutral actions in the hover state.
-const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#535158'; // Used for the icon of outlined and borderless neutral actions in the focus state.
-const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#333238'; // Used for the icon of outlined and borderless neutral actions in the active state.
+const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#4c4b51'; // Used for the icon of outlined and borderless neutral actions in the hover state.
+const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#4c4b51'; // Used for the icon of outlined and borderless neutral actions in the focus state.
+const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#28272d'; // Used for the icon of outlined and borderless neutral actions in the active state.
 const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong neutral action background.
 const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined confirm (positive) action in the default state.
 const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#e9f3fc'; // Used for the background of an outlined confirm (positive) action in the hover state.
@@ -104,18 +104,18 @@ const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background c
 const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
-const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(31, 30, 36, 0.24)'; // Used for an overlay that covers other content.
+const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(05, 05, 06, 0.24)'; // Used for an overlay that covers other content.
 const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
 const GL_BORDER_COLOR_SUBTLE = '#ececef'; // 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';
@@ -406,7 +406,7 @@ const THEME_LIGHT_RED_700 = '#a02e1c';
 const THEME_LIGHT_RED_800 = '#8b2212';
 const THEME_LIGHT_RED_900 = '#751709';
 const THEME_LIGHT_RED_950 = '#5c1105';
-const BLACK = '#000';
+const BLACK = '#050506';
 const WHITE = '#fff';
 const BLUE_50 = '#e9f3fc';
 const BLUE_100 = '#cbe2f9';
@@ -427,10 +427,10 @@ const GRAY_300 = '#a4a3a8';
 const GRAY_400 = '#89888d';
 const GRAY_500 = '#737278';
 const GRAY_600 = '#626168';
-const GRAY_700 = '#535158';
-const GRAY_800 = '#434248';
-const GRAY_900 = '#333238';
-const GRAY_950 = '#1f1e24';
+const GRAY_700 = '#4c4b51';
+const GRAY_800 = '#3a383f';
+const GRAY_900 = '#28272d';
+const GRAY_950 = '#18171d';
 const GREEN_50 = '#ecf4ee';
 const GREEN_100 = '#c3e6cd';
 const GREEN_200 = '#91d4a8';
@@ -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,8 +499,8 @@ 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 = '#fcf1ef'; // Red background for avatar fallback with no particular meaning.
 const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#f4f0ff'; // Purple background for avatar fallback with no particular meaning.
 const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue background for avatar fallback with no particular meaning.
@@ -510,27 +510,27 @@ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral backgr
 const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
 const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // 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_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.
 const GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the label remove button icon on a dark background color in the default state.
-const GL_LABEL_SCOPED_TEXT_COLOR = '#1f1e24'; // Used for the scoped label text color.
-const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#1f1e24'; // Used for the scoped label remove button background in the hover state.
-const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the scoped label remove button icon in the default state.
+const GL_LABEL_SCOPED_TEXT_COLOR = '#18171d'; // Used for the scoped label text color.
+const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button background in the hover state.
+const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#18171d'; // Used for the scoped label remove button icon in the default state.
 const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
 const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
 const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // 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_SPINNER_SEGMENT_COLOR_DEFAULT = '#535158'; // Used for the animated segment 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 = '#4c4b51'; // 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 = '#fbfafd'; // Used for the background of a table row in hover state.
-const GL_TABLE_SORTING_ICON_COLOR = '#1f1e24'; // Used for the color of the sorting icons in the column headers.
+const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
 const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
@@ -538,7 +538,7 @@ const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checke
 const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
 const GL_CONTROL_BORDER_COLOR_DEFAULT = '#89888d'; // Used for form control (input, radio button, checkbox, textarea) default border.
 const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
-const GL_CONTROL_BORDER_COLOR_FOCUS = '#333238'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+const GL_CONTROL_BORDER_COLOR_FOCUS = '#28272d'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
 const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
@@ -549,7 +549,7 @@ const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when
 const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
 const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; // Used for checkbox and radio button state indicators.
 const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; // Used for disabled checkbox and radio button state indicators.
-const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#1f1e24'; // Used for a background associated with feedback like a tooltip or toast message.
+const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#18171d'; // Used for a background associated with feedback like a tooltip or toast message.
 const GL_FEEDBACK_TEXT_COLOR_STRONG = '#fff'; // Used for text on a strong feedback background.
 const GL_FEEDBACK_ICON_COLOR_STRONG = '#fff'; // Used for an icon on a strong feedback background.
 const GL_FEEDBACK_LINK_COLOR_STRONG = '#63a6e9'; // Used for a link on a strong feedback background.
@@ -565,9 +565,9 @@ const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for a background
 const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for an icon associated with danger or critical feedback.
 const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb'; // Used for the outer color portion of the focus ring.
 const GL_FOCUS_RING_INNER_COLOR = '#fff'; // Used for the inner neutral portion of the focus ring.
-const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
+const GL_ICON_COLOR_DEFAULT = '#4c4b51'; // Used for the default icon color. Can be paired with default text.
 const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
-const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.
+const GL_ICON_COLOR_STRONG = '#28272d'; // Used for an icon with the highest contrast.
 const GL_ICON_COLOR_DISABLED = '#a4a3a8'; // Used for an icon within a disabled section.
 const GL_ICON_COLOR_LINK = '#1068bf'; // Used for an icon within a link.
 const GL_ICON_COLOR_INFO = '#1068bf'; // Used for an icon associated with information or help.
@@ -584,29 +584,29 @@ 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.16)'; // Used for the default shadow color.
+const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.16)'; // Used for the default shadow color.
 const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // 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 = '#dcdcde'; // Used for the background of a subtle neutral status item in the active state.
 const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a subtle neutral status item in the hover state.
 const GL_STATUS_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // 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 = '#535158'; // Used for the text of a subtle neutral status item in the hover state.
-const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#535158'; // Used for the text of a subtle neutral status item in the focus state.
-const GL_STATUS_MUTED_TEXT_COLOR_ACTIVE = '#434248'; // Used for the text of a subtle neutral status item in the active state.
+const GL_STATUS_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a subtle neutral status item in the hover state.
+const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a subtle neutral status item in the focus state.
+const GL_STATUS_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a subtle neutral status item in the active state.
 const GL_STATUS_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a subtle neutral status item when static or the default state when linked.
 const GL_STATUS_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a subtle neutral status item in the hover state.
 const GL_STATUS_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a subtle neutral status item in the focus state.
-const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#535158'; // Used for the icon of a subtle neutral status item in the active state.
+const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a subtle neutral status item in the active state.
 const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the background of a neutral status item when static or the default state when linked.
 const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#bfbfc3'; // Used for the background of a neutral status item in the active state.
 const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a neutral status item in the hover state.
-const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#535158'; // Used for the text of a neutral status item when static or the default state when linked.
-const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#434248'; // Used for the text of a neutral status item in the hover state.
-const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#434248'; // Used for the text of a neutral status item in the focus state.
-const GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE = '#333238'; // Used for the text of a neutral status item in the active state.
+const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#4c4b51'; // Used for the text of a neutral status item when static or the default state when linked.
+const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#3a383f'; // Used for the text of a neutral status item in the hover state.
+const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#3a383f'; // Used for the text of a neutral status item in the focus state.
+const GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE = '#28272d'; // Used for the text of a neutral status item in the active state.
 const GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a neutral status item when static or the default state when linked.
 const GL_STATUS_NEUTRAL_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a neutral status item in the hover state.
 const GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a neutral status item in the focus state.
-const GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE = '#535158'; // Used for the icon of a neutral status item in the active state.
+const GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a neutral status item in the active state.
 const GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the background of an informational status item when static or the default state when linked.
 const GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of an informational status item in the active state.
 const GL_STATUS_INFO_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an informational status item in the hover state.
@@ -662,13 +662,13 @@ const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a
 const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#694cc0'; // Used for the icon of a brand related status item in the hover state.
 const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#694cc0'; // Used for the icon of a brand related status item in the focus state.
 const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#5943b6'; // Used for the icon of a brand related status item in the active state.
-const GL_TEXT_PRIMARY = '#333238'; // Use text.color.default instead
+const GL_TEXT_PRIMARY = '#28272d'; // Use text.color.default instead
 const GL_TEXT_SECONDARY = '#737278'; // Use text.color.subtle instead
 const GL_TEXT_TERTIARY = '#89888d'; // Use text.color.disabled instead
-const GL_TEXT_COLOR_DEFAULT = '#434248'; // Used for the default text color.
+const GL_TEXT_COLOR_DEFAULT = '#3a383f'; // Used for the default text color.
 const GL_TEXT_COLOR_SUBTLE = '#626168'; // Used for supplemental text that doesn't need to be as prominent as other text.
-const GL_TEXT_COLOR_STRONG = '#1f1e24'; // Used for text with the highest contrast.
-const GL_TEXT_COLOR_HEADING = '#1f1e24'; // Used for headings level 1-6.
+const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest contrast.
+const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
 const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
 const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.

package/dist/tokens/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/dist/tokens/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. */