@gitlab/ui 87.5.1 → 87.6.0

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

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

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

@@ -276,6 +276,56 @@ const DATA_VIZ_ORANGE_700 = '#92430a';
 const DATA_VIZ_ORANGE_800 = '#6f3500';
 const DATA_VIZ_ORANGE_900 = '#5e2f05';
 const DATA_VIZ_ORANGE_950 = '#4b2707';
+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.
+const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
+const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
+const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
+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 = '#89888d'; // 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 = '#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 = '#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 = '#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 = '#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.
+const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
+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 = '#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.
+const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
+const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
+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 THEME_INDIGO_10 = '#f8f8ff';
 const THEME_INDIGO_50 = '#f1f1ff';
 const THEME_INDIGO_100 = '#dbdbf8';
@@ -417,80 +467,30 @@ const RED_700 = '#ae1800';
 const RED_800 = '#8d1300';
 const RED_900 = '#660e00';
 const RED_950 = '#4d0a00';
-const BRAND_CHARCOAL = '#171321';
-const BRAND_ORANGE_01 = '#fca326';
-const BRAND_ORANGE_02 = '#fc6d26';
-const BRAND_ORANGE_03 = '#e24329';
-const BRAND_PURPLE_01 = '#a989f5';
-const BRAND_PURPLE_02 = '#7759c2';
-const BRAND_GRAY_01 = '#d1d0d3';
-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(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)';
-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(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.
-const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
-const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
-const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
-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 = '#89888d'; // 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 = '#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 = '#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 = '#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 = '#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.
-const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
-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 = '#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.
-const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
-const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
-const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
-const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
-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 BRAND_CHARCOAL = '#171321'; // Use color.brand-charcoal instead.
+const BRAND_ORANGE_01 = '#fca326'; // Use color.brand-orange.01p instead.
+const BRAND_ORANGE_02 = '#fc6d26'; // Use color.brand-orange.02p instead.
+const BRAND_ORANGE_03 = '#e24329'; // Use color.brand-orange.03p instead.
+const BRAND_PURPLE_01 = '#a989f5'; // Use color.purple.01p instead.
+const BRAND_PURPLE_02 = '#7759c2'; // Use color.purple.02p instead.
+const BRAND_GRAY_01 = '#d1d0d3'; // Use color.brand-gray.01 instead.
+const BRAND_GRAY_02 = '#a2a1a6'; // Use color.brand-gray.02 instead.
+const BRAND_GRAY_03 = '#74717a'; // Use color.brand-gray.03 instead.
+const BRAND_GRAY_04 = '#45424d'; // Use color.brand-gray.04 instead.
+const BRAND_GRAY_05 = '#2b2838'; // Use color.brand-gray.05 instead.
+const T_GRAY_A_16 = 'rgba(05, 05, 06, 0.16)'; // Use color.alpha.dark.16 instead.
+const T_GRAY_A_24 = 'rgba(05, 05, 06, 0.24)'; // Use color.alpha.dark.24 instead.
+const T_GRAY_A_02 = 'rgba(05, 05, 06, 0.02)'; // Use color.alpha.dark.2 instead.
+const T_GRAY_A_04 = 'rgba(05, 05, 06, 0.04)'; // Use color.alpha.dark.4 instead.
+const T_GRAY_A_06 = 'rgba(05, 05, 06, 0.06)'; // Use color.alpha.dark.6 instead.
+const T_GRAY_A_08 = 'rgba(05, 05, 06, 0.08)'; // Use color.alpha.dark.8 instead.
+const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)'; // Use color.alpha.light.16 instead.
+const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)'; // Use color.alpha.light.24 instead.
+const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)'; // Use color.alpha.light.36 instead.
+const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.light.2 instead.
+const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
+const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
+const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
 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.
@@ -604,9 +604,9 @@ 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 = '#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_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 = '#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 = '#18171d'; // Used for text with the highest contrast.

package/dist/tokens/css/tokens.css

@@ -4,9 +4,9 @@
  */
 
 :root {
-  --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
-  --gl-text-secondary: #737278; /* Use text.color.subtle instead */
-  --gl-text-primary: #28272d; /* Use text.color.default instead */
+  --gl-text-tertiary: #89888d; /* Use text.color.disabled instead. */
+  --gl-text-secondary: #737278; /* Use text.color.subtle instead. */
+  --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;
@@ -17,30 +17,30 @@
   --gl-line-height-20: 1.25rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-12: 0.75rem;
-  --t-white-a-08: rgba(255, 255, 255, 0.08);
-  --t-white-a-06: rgba(255, 255, 255, 0.06);
-  --t-white-a-04: rgba(255, 255, 255, 0.04);
-  --t-white-a-02: rgba(255, 255, 255, 0.02);
-  --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(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;
-  --brand-gray-02: #a2a1a6;
-  --brand-gray-01: #d1d0d3;
-  --brand-purple-02: #7759c2;
-  --brand-purple-01: #a989f5;
-  --brand-orange-03: #e24329;
-  --brand-orange-02: #fc6d26;
-  --brand-orange-01: #fca326;
-  --brand-charcoal: #171321;
+  --t-white-a-08: rgba(255, 255, 255, 0.08); /* Use color.alpha.light.8 instead. */
+  --t-white-a-06: rgba(255, 255, 255, 0.06); /* Use color.alpha.light.6 instead. */
+  --t-white-a-04: rgba(255, 255, 255, 0.04); /* Use color.alpha.light.4 instead. */
+  --t-white-a-02: rgba(255, 255, 255, 0.02); /* Use color.alpha.light.2 instead. */
+  --t-white-a-36: rgba(255, 255, 255, 0.36); /* Use color.alpha.light.36 instead. */
+  --t-white-a-24: rgba(255, 255, 255, 0.24); /* Use color.alpha.light.24 instead. */
+  --t-white-a-16: rgba(255, 255, 255, 0.16); /* Use color.alpha.light.16 instead. */
+  --t-gray-a-08: rgba(05, 05, 06, 0.08); /* Use color.alpha.dark.8 instead. */
+  --t-gray-a-06: rgba(05, 05, 06, 0.06); /* Use color.alpha.dark.6 instead. */
+  --t-gray-a-04: rgba(05, 05, 06, 0.04); /* Use color.alpha.dark.4 instead. */
+  --t-gray-a-02: rgba(05, 05, 06, 0.02); /* Use color.alpha.dark.2 instead. */
+  --t-gray-a-24: rgba(05, 05, 06, 0.24); /* Use color.alpha.dark.24 instead. */
+  --t-gray-a-16: rgba(05, 05, 06, 0.16); /* Use color.alpha.dark.16 instead. */
+  --brand-gray-05: #2b2838; /* Use color.brand-gray.05 instead. */
+  --brand-gray-04: #45424d; /* Use color.brand-gray.04 instead. */
+  --brand-gray-03: #74717a; /* Use color.brand-gray.03 instead. */
+  --brand-gray-02: #a2a1a6; /* Use color.brand-gray.02 instead. */
+  --brand-gray-01: #d1d0d3; /* Use color.brand-gray.01 instead. */
+  --brand-purple-02: #7759c2; /* Use color.purple.02p instead. */
+  --brand-purple-01: #a989f5; /* Use color.purple.01p instead. */
+  --brand-orange-03: #e24329; /* Use color.brand-orange.03p instead. */
+  --brand-orange-02: #fc6d26; /* Use color.brand-orange.02p instead. */
+  --brand-orange-01: #fca326; /* Use color.brand-orange.01p instead. */
+  --brand-charcoal: #171321; /* Use color.brand-charcoal instead. */
   --red-950: #4d0a00;
   --red-900: #660e00;
   --red-800: #8d1300;

package/dist/tokens/css/tokens.dark.css

@@ -4,9 +4,9 @@
  */
 
 :root.gl-dark {
-  --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-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-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;
@@ -17,30 +17,30 @@
   --gl-line-height-20: 1.25rem;
   --gl-line-height-16: 1rem;
   --gl-line-height-12: 0.75rem;
-  --t-white-a-08: rgba(255, 255, 255, 0.08);
-  --t-white-a-06: rgba(255, 255, 255, 0.06);
-  --t-white-a-04: rgba(255, 255, 255, 0.04);
-  --t-white-a-02: rgba(255, 255, 255, 0.02);
-  --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(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;
-  --brand-gray-02: #a2a1a6;
-  --brand-gray-01: #d1d0d3;
-  --brand-purple-02: #7759c2;
-  --brand-purple-01: #a989f5;
-  --brand-orange-03: #e24329;
-  --brand-orange-02: #fc6d26;
-  --brand-orange-01: #fca326;
-  --brand-charcoal: #171321;
+  --t-white-a-08: rgba(255, 255, 255, 0.08); /* Use color.alpha.light.8 instead. */
+  --t-white-a-06: rgba(255, 255, 255, 0.06); /* Use color.alpha.light.6 instead. */
+  --t-white-a-04: rgba(255, 255, 255, 0.04); /* Use color.alpha.light.4 instead. */
+  --t-white-a-02: rgba(255, 255, 255, 0.02); /* Use color.alpha.light.2 instead. */
+  --t-white-a-36: rgba(255, 255, 255, 0.36); /* Use color.alpha.light.36 instead. */
+  --t-white-a-24: rgba(255, 255, 255, 0.24); /* Use color.alpha.light.24 instead. */
+  --t-white-a-16: rgba(255, 255, 255, 0.16); /* Use color.alpha.light.16 instead. */
+  --t-gray-a-08: rgba(05, 05, 06, 0.08); /* Use color.alpha.dark.8 instead. */
+  --t-gray-a-06: rgba(05, 05, 06, 0.06); /* Use color.alpha.dark.6 instead. */
+  --t-gray-a-04: rgba(05, 05, 06, 0.04); /* Use color.alpha.dark.4 instead. */
+  --t-gray-a-02: rgba(05, 05, 06, 0.02); /* Use color.alpha.dark.2 instead. */
+  --t-gray-a-24: rgba(05, 05, 06, 0.24); /* Use color.alpha.dark.24 instead. */
+  --t-gray-a-16: rgba(05, 05, 06, 0.16); /* Use color.alpha.dark.16 instead. */
+  --brand-gray-05: #2b2838; /* Use color.brand-gray.05 instead. */
+  --brand-gray-04: #45424d; /* Use color.brand-gray.04 instead. */
+  --brand-gray-03: #74717a; /* Use color.brand-gray.03 instead. */
+  --brand-gray-02: #a2a1a6; /* Use color.brand-gray.02 instead. */
+  --brand-gray-01: #d1d0d3; /* Use color.brand-gray.01 instead. */
+  --brand-purple-02: #7759c2; /* Use color.purple.02p instead. */
+  --brand-purple-01: #a989f5; /* Use color.purple.01p instead. */
+  --brand-orange-03: #e24329; /* Use color.brand-orange.03p instead. */
+  --brand-orange-02: #fc6d26; /* Use color.brand-orange.02p instead. */
+  --brand-orange-01: #fca326; /* Use color.brand-orange.01p instead. */
+  --brand-charcoal: #171321; /* Use color.brand-charcoal instead. */
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;