@gitlab/ui 87.5.1 → 87.6.0

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

@@ -276,6 +276,56 @@ export const DATA_VIZ_ORANGE_700 = '#e99b60';
 export const DATA_VIZ_ORANGE_800 = '#eebd8c';
 export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
 export const DATA_VIZ_ORANGE_950 = '#fae8d1';
+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 = '#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 = '#28272d'; // Used as background for the default banner type.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // 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 = '#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.
+export 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.
+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 = '#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 = '#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 = '#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 = '#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.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+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 = '#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 THEME_INDIGO_10 = '#14143d';
 export const THEME_INDIGO_50 = '#222261';
 export const THEME_INDIGO_100 = '#303083';
@@ -417,80 +467,30 @@ export const RED_700 = '#fcb5aa';
 export const RED_800 = '#fdd4cd';
 export const RED_900 = '#fcf1ef';
 export const RED_950 = '#fff4f3';
-export const BRAND_CHARCOAL = '#171321';
-export const BRAND_ORANGE_01 = '#fca326';
-export const BRAND_ORANGE_02 = '#fc6d26';
-export const BRAND_ORANGE_03 = '#e24329';
-export const BRAND_PURPLE_01 = '#a989f5';
-export const BRAND_PURPLE_02 = '#7759c2';
-export const BRAND_GRAY_01 = '#d1d0d3';
-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(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)';
-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(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 = '#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 = '#28272d'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // 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 = '#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.
-export 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.
-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 = '#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 = '#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 = '#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 = '#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.
-export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
-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 = '#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 BRAND_CHARCOAL = '#171321'; // Use color.brand-charcoal instead.
+export const BRAND_ORANGE_01 = '#fca326'; // Use color.brand-orange.01p instead.
+export const BRAND_ORANGE_02 = '#fc6d26'; // Use color.brand-orange.02p instead.
+export const BRAND_ORANGE_03 = '#e24329'; // Use color.brand-orange.03p instead.
+export const BRAND_PURPLE_01 = '#a989f5'; // Use color.purple.01p instead.
+export const BRAND_PURPLE_02 = '#7759c2'; // Use color.purple.02p instead.
+export const BRAND_GRAY_01 = '#d1d0d3'; // Use color.brand-gray.01 instead.
+export const BRAND_GRAY_02 = '#a2a1a6'; // Use color.brand-gray.02 instead.
+export const BRAND_GRAY_03 = '#74717a'; // Use color.brand-gray.03 instead.
+export const BRAND_GRAY_04 = '#45424d'; // Use color.brand-gray.04 instead.
+export const BRAND_GRAY_05 = '#2b2838'; // Use color.brand-gray.05 instead.
+export const T_GRAY_A_16 = 'rgba(05, 05, 06, 0.16)'; // Use color.alpha.dark.16 instead.
+export const T_GRAY_A_24 = 'rgba(05, 05, 06, 0.24)'; // Use color.alpha.dark.24 instead.
+export const T_GRAY_A_02 = 'rgba(05, 05, 06, 0.02)'; // Use color.alpha.dark.2 instead.
+export const T_GRAY_A_04 = 'rgba(05, 05, 06, 0.04)'; // Use color.alpha.dark.4 instead.
+export const T_GRAY_A_06 = 'rgba(05, 05, 06, 0.06)'; // Use color.alpha.dark.6 instead.
+export const T_GRAY_A_08 = 'rgba(05, 05, 06, 0.08)'; // Use color.alpha.dark.8 instead.
+export const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)'; // Use color.alpha.light.16 instead.
+export const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)'; // Use color.alpha.light.24 instead.
+export const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)'; // Use color.alpha.light.36 instead.
+export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.light.2 instead.
+export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
+export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
+export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
 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 = '#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.
@@ -604,9 +604,9 @@ export const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the ico
 export const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#9475db'; // Used for the icon of a brand related status item in the hover state.
 export const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#9475db'; // Used for the icon of a brand related status item in the focus state.
 export const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon of a brand related status item in the active state.
-export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead
-export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead
-export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead
+export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead.
+export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead.
+export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead.
 export const GL_TEXT_COLOR_DEFAULT = '#ececef'; // Used for the default text color.
 export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; // Used for supplemental text that doesn't need to be as prominent as other text.
 export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.

package/dist/tokens/js/tokens.js

@@ -276,6 +276,56 @@ export const DATA_VIZ_ORANGE_700 = '#92430a';
 export const DATA_VIZ_ORANGE_800 = '#6f3500';
 export const DATA_VIZ_ORANGE_900 = '#5e2f05';
 export const DATA_VIZ_ORANGE_950 = '#4b2707';
+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 = '#fcf1ef'; // Red background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#f4f0ff'; // Purple background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
+export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
+export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
+export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // 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 = '#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.
+export 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.
+export const GL_LABEL_SCOPED_TEXT_COLOR = '#18171d'; // Used for the scoped label text color.
+export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button background in the hover state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#18171d'; // Used for the scoped label remove button icon in the default state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
+export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
+export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
+export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
+export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // 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 = '#4c4b51'; // 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 = '#fbfafd'; // Used for the background of a table row in hover state.
+export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
+export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
+export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#89888d'; // Used for form control (input, radio button, checkbox, textarea) default border.
+export const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
+export const GL_CONTROL_BORDER_COLOR_FOCUS = '#28272d'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
+export const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
+export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
+export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
+export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; // Used for checkbox and radio button state indicators.
+export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; // Used for disabled checkbox and radio button state indicators.
 export const THEME_INDIGO_10 = '#f8f8ff';
 export const THEME_INDIGO_50 = '#f1f1ff';
 export const THEME_INDIGO_100 = '#dbdbf8';
@@ -417,80 +467,30 @@ export const RED_700 = '#ae1800';
 export const RED_800 = '#8d1300';
 export const RED_900 = '#660e00';
 export const RED_950 = '#4d0a00';
-export const BRAND_CHARCOAL = '#171321';
-export const BRAND_ORANGE_01 = '#fca326';
-export const BRAND_ORANGE_02 = '#fc6d26';
-export const BRAND_ORANGE_03 = '#e24329';
-export const BRAND_PURPLE_01 = '#a989f5';
-export const BRAND_PURPLE_02 = '#7759c2';
-export const BRAND_GRAY_01 = '#d1d0d3';
-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(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)';
-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(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 = '#fcf1ef'; // Red background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE = '#f4f0ff'; // Purple background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
-export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
-export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
-export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // 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 = '#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.
-export 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.
-export const GL_LABEL_SCOPED_TEXT_COLOR = '#18171d'; // Used for the scoped label text color.
-export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the scoped label remove button background in the hover state.
-export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#18171d'; // Used for the scoped label remove button icon in the default state.
-export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
-export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
-export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
-export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
-export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // 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 = '#4c4b51'; // 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 = '#fbfafd'; // Used for the background of a table row in hover state.
-export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
-export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
-export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
-export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
-export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
-export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
-export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#89888d'; // Used for form control (input, radio button, checkbox, textarea) default border.
-export const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control (input, radio button, checkbox, textarea) border on hover.
-export const GL_CONTROL_BORDER_COLOR_FOCUS = '#28272d'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
-export const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
-export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
-export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
-export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
-export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
-export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
-export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
-export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.
-export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff'; // Used for checkbox and radio button state indicators.
-export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278'; // Used for disabled checkbox and radio button state indicators.
+export const BRAND_CHARCOAL = '#171321'; // Use color.brand-charcoal instead.
+export const BRAND_ORANGE_01 = '#fca326'; // Use color.brand-orange.01p instead.
+export const BRAND_ORANGE_02 = '#fc6d26'; // Use color.brand-orange.02p instead.
+export const BRAND_ORANGE_03 = '#e24329'; // Use color.brand-orange.03p instead.
+export const BRAND_PURPLE_01 = '#a989f5'; // Use color.purple.01p instead.
+export const BRAND_PURPLE_02 = '#7759c2'; // Use color.purple.02p instead.
+export const BRAND_GRAY_01 = '#d1d0d3'; // Use color.brand-gray.01 instead.
+export const BRAND_GRAY_02 = '#a2a1a6'; // Use color.brand-gray.02 instead.
+export const BRAND_GRAY_03 = '#74717a'; // Use color.brand-gray.03 instead.
+export const BRAND_GRAY_04 = '#45424d'; // Use color.brand-gray.04 instead.
+export const BRAND_GRAY_05 = '#2b2838'; // Use color.brand-gray.05 instead.
+export const T_GRAY_A_16 = 'rgba(05, 05, 06, 0.16)'; // Use color.alpha.dark.16 instead.
+export const T_GRAY_A_24 = 'rgba(05, 05, 06, 0.24)'; // Use color.alpha.dark.24 instead.
+export const T_GRAY_A_02 = 'rgba(05, 05, 06, 0.02)'; // Use color.alpha.dark.2 instead.
+export const T_GRAY_A_04 = 'rgba(05, 05, 06, 0.04)'; // Use color.alpha.dark.4 instead.
+export const T_GRAY_A_06 = 'rgba(05, 05, 06, 0.06)'; // Use color.alpha.dark.6 instead.
+export const T_GRAY_A_08 = 'rgba(05, 05, 06, 0.08)'; // Use color.alpha.dark.8 instead.
+export const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)'; // Use color.alpha.light.16 instead.
+export const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)'; // Use color.alpha.light.24 instead.
+export const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)'; // Use color.alpha.light.36 instead.
+export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.light.2 instead.
+export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
+export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
+export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
 export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#18171d'; // Used for a background associated with feedback like a tooltip or toast message.
 export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#fff'; // Used for text on a strong feedback background.
 export const GL_FEEDBACK_ICON_COLOR_STRONG = '#fff'; // Used for an icon on a strong feedback background.
@@ -604,9 +604,9 @@ export const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the ico
 export const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#694cc0'; // Used for the icon of a brand related status item in the hover state.
 export const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#694cc0'; // Used for the icon of a brand related status item in the focus state.
 export const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#5943b6'; // Used for the icon of a brand related status item in the active state.
-export const GL_TEXT_PRIMARY = '#28272d'; // Use text.color.default instead
-export const GL_TEXT_SECONDARY = '#737278'; // Use text.color.subtle instead
-export const GL_TEXT_TERTIARY = '#89888d'; // Use text.color.disabled instead
+export const GL_TEXT_PRIMARY = '#28272d'; // Use text.color.default instead.
+export const GL_TEXT_SECONDARY = '#737278'; // Use text.color.subtle instead.
+export const GL_TEXT_TERTIARY = '#89888d'; // Use text.color.disabled instead.
 export const GL_TEXT_COLOR_DEFAULT = '#3a383f'; // Used for the default text color.
 export const GL_TEXT_COLOR_SUBTLE = '#626168'; // Used for supplemental text that doesn't need to be as prominent as other text.
 export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest contrast.