@gitlab/ui 87.5.1 → 87.6.1

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,94 +467,49 @@ 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.
 const GL_FEEDBACK_LINK_COLOR_STRONG = '#63a6e9'; // Used for a link on a strong feedback background.
-const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for a background associated with neutral feedback.
-const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; // Used for an icon associated with a neutral feedback section.
-const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
-const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; // Used for an icon associated with informational feedback.
-const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for a background associated with successful feedback or a new section resulting from a user action.
-const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; // Used for an icon associated with successful feedback or a new section.
-const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for a background associated with warning feedback or to let a user know about confidential content.
-const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for an icon associated with warning feedback or confidential content.
-const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for a background associated with danger or critical feedback.
-const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for an icon associated with danger or critical feedback.
+const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
+const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#4c4b51'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
+const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
+const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+const GL_FEEDBACK_INFO_TEXT_COLOR = '#0b5cad'; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
+const GL_FEEDBACK_SUCCESS_TEXT_COLOR = '#24663b'; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
+const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
+const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
+const GL_FEEDBACK_WARNING_TEXT_COLOR = '#8f4700'; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
+const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
+const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+const GL_FEEDBACK_DANGER_TEXT_COLOR = '#ae1800'; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
+const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 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 = '#4c4b51'; // Used for the default icon color. Can be paired with default text.
@@ -604,9 +609,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.
@@ -616,4 +621,4 @@ const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, c
 const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, or validity.
 const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
 
-export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER, GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE, GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT, GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS, GL_ACTION_CONFIRM_BORDER_COLOR_HOVER, GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER, GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS, GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER, GL_ACTION_DANGER_BORDER_COLOR_ACTIVE, GL_ACTION_DANGER_BORDER_COLOR_DEFAULT, GL_ACTION_DANGER_BORDER_COLOR_FOCUS, GL_ACTION_DANGER_BORDER_COLOR_HOVER, GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS, GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER, GL_ACTION_DISABLED_BACKGROUND_COLOR, GL_ACTION_DISABLED_BORDER_COLOR, GL_ACTION_DISABLED_FOREGROUND_COLOR, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER, GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS, GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER, GL_AVATAR_BORDER_COLOR_DEFAULT, GL_AVATAR_BORDER_COLOR_HOVER, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_OVERLAY, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_BANNER_INTRO_BORDER_COLOR, GL_BANNER_PROMO_BACKGROUND_COLOR, GL_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, GL_BREADCRUMB_SEPARATOR_COLOR, GL_COLOR_ALPHA_0, GL_COLOR_ALPHA_DARK_16, GL_COLOR_ALPHA_DARK_2, GL_COLOR_ALPHA_DARK_24, GL_COLOR_ALPHA_DARK_4, GL_COLOR_ALPHA_DARK_6, GL_COLOR_ALPHA_DARK_8, GL_COLOR_ALPHA_LIGHT_16, GL_COLOR_ALPHA_LIGHT_2, GL_COLOR_ALPHA_LIGHT_24, GL_COLOR_ALPHA_LIGHT_36, GL_COLOR_ALPHA_LIGHT_4, GL_COLOR_ALPHA_LIGHT_6, GL_COLOR_ALPHA_LIGHT_8, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_BRAND_CHARCOAL, GL_COLOR_BRAND_GRAY_01, GL_COLOR_BRAND_GRAY_02, GL_COLOR_BRAND_GRAY_03, GL_COLOR_BRAND_GRAY_04, GL_COLOR_BRAND_GRAY_05, GL_COLOR_BRAND_ORANGE_01G, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_03P, GL_COLOR_BRAND_PINK_01G, GL_COLOR_BRAND_PURPLE_01G, GL_COLOR_BRAND_PURPLE_01P, GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_BRAND_WHITE, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_COLOR_THEME_BLUE_10, GL_COLOR_THEME_BLUE_100, GL_COLOR_THEME_BLUE_200, GL_COLOR_THEME_BLUE_300, GL_COLOR_THEME_BLUE_400, GL_COLOR_THEME_BLUE_50, GL_COLOR_THEME_BLUE_500, GL_COLOR_THEME_BLUE_600, GL_COLOR_THEME_BLUE_700, GL_COLOR_THEME_BLUE_800, GL_COLOR_THEME_BLUE_900, GL_COLOR_THEME_BLUE_950, GL_COLOR_THEME_GREEN_10, GL_COLOR_THEME_GREEN_100, GL_COLOR_THEME_GREEN_200, GL_COLOR_THEME_GREEN_300, GL_COLOR_THEME_GREEN_400, GL_COLOR_THEME_GREEN_50, GL_COLOR_THEME_GREEN_500, GL_COLOR_THEME_GREEN_600, GL_COLOR_THEME_GREEN_700, GL_COLOR_THEME_GREEN_800, GL_COLOR_THEME_GREEN_900, GL_COLOR_THEME_GREEN_950, GL_COLOR_THEME_INDIGO_10, GL_COLOR_THEME_INDIGO_100, GL_COLOR_THEME_INDIGO_200, GL_COLOR_THEME_INDIGO_300, GL_COLOR_THEME_INDIGO_400, GL_COLOR_THEME_INDIGO_50, GL_COLOR_THEME_INDIGO_500, GL_COLOR_THEME_INDIGO_600, GL_COLOR_THEME_INDIGO_700, GL_COLOR_THEME_INDIGO_800, GL_COLOR_THEME_INDIGO_900, GL_COLOR_THEME_INDIGO_950, GL_COLOR_THEME_LIGHT_BLUE_10, GL_COLOR_THEME_LIGHT_BLUE_100, GL_COLOR_THEME_LIGHT_BLUE_200, GL_COLOR_THEME_LIGHT_BLUE_300, GL_COLOR_THEME_LIGHT_BLUE_400, GL_COLOR_THEME_LIGHT_BLUE_50, GL_COLOR_THEME_LIGHT_BLUE_500, GL_COLOR_THEME_LIGHT_BLUE_600, GL_COLOR_THEME_LIGHT_BLUE_700, GL_COLOR_THEME_LIGHT_BLUE_800, GL_COLOR_THEME_LIGHT_BLUE_900, GL_COLOR_THEME_LIGHT_BLUE_950, GL_COLOR_THEME_LIGHT_RED_10, GL_COLOR_THEME_LIGHT_RED_100, GL_COLOR_THEME_LIGHT_RED_200, GL_COLOR_THEME_LIGHT_RED_300, GL_COLOR_THEME_LIGHT_RED_400, GL_COLOR_THEME_LIGHT_RED_50, GL_COLOR_THEME_LIGHT_RED_500, GL_COLOR_THEME_LIGHT_RED_600, GL_COLOR_THEME_LIGHT_RED_700, GL_COLOR_THEME_LIGHT_RED_800, GL_COLOR_THEME_LIGHT_RED_900, GL_COLOR_THEME_LIGHT_RED_950, GL_COLOR_THEME_RED_10, GL_COLOR_THEME_RED_100, GL_COLOR_THEME_RED_200, GL_COLOR_THEME_RED_300, GL_COLOR_THEME_RED_400, GL_COLOR_THEME_RED_50, GL_COLOR_THEME_RED_500, GL_COLOR_THEME_RED_600, GL_COLOR_THEME_RED_700, GL_COLOR_THEME_RED_800, GL_COLOR_THEME_RED_900, GL_COLOR_THEME_RED_950, GL_CONTROL_BACKGROUND_COLOR_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_DISABLED, GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS, GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER, GL_CONTROL_BORDER_COLOR_DEFAULT, GL_CONTROL_BORDER_COLOR_DISABLED, GL_CONTROL_BORDER_COLOR_ERROR, GL_CONTROL_BORDER_COLOR_FOCUS, GL_CONTROL_BORDER_COLOR_HOVER, GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT, GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS, GL_CONTROL_BORDER_COLOR_SELECTED_HOVER, GL_CONTROL_INDICATOR_COLOR_DISABLED, GL_CONTROL_INDICATOR_COLOR_SELECTED, GL_CONTROL_PLACEHOLDER_COLOR, GL_CONTROL_TEXT_COLOR_ERROR, GL_CONTROL_TEXT_COLOR_VALID, GL_FEEDBACK_BACKGROUND_COLOR_STRONG, GL_FEEDBACK_DANGER_BACKGROUND_COLOR, GL_FEEDBACK_DANGER_ICON_COLOR, GL_FEEDBACK_ICON_COLOR_STRONG, GL_FEEDBACK_INFO_BACKGROUND_COLOR, GL_FEEDBACK_INFO_ICON_COLOR, GL_FEEDBACK_LINK_COLOR_STRONG, GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR, GL_FEEDBACK_NEUTRAL_ICON_COLOR, GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR, GL_FEEDBACK_SUCCESS_ICON_COLOR, GL_FEEDBACK_TEXT_COLOR_STRONG, GL_FEEDBACK_WARNING_BACKGROUND_COLOR, GL_FEEDBACK_WARNING_ICON_COLOR, GL_FOCUS_RING_INNER_COLOR, GL_FOCUS_RING_OUTER_COLOR, GL_ICON_COLOR_DANGER, GL_ICON_COLOR_DEFAULT, GL_ICON_COLOR_DISABLED, GL_ICON_COLOR_INFO, GL_ICON_COLOR_LINK, GL_ICON_COLOR_STRONG, GL_ICON_COLOR_SUBTLE, GL_ICON_COLOR_SUCCESS, GL_ICON_COLOR_WARNING, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_DARK_TEXT_COLOR, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_LIGHT_TEXT_COLOR, GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER, GL_LABEL_SCOPED_TEXT_COLOR, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_POPOVER_BACKGROUND_COLOR, GL_SHADOW_COLOR_DEFAULT, GL_SKELETON_LOADER_BACKGROUND_COLOR, GL_SKELETON_LOADER_SHIMMER_COLOR, GL_SPINNER_SEGMENT_COLOR_DEFAULT, GL_SPINNER_SEGMENT_COLOR_LIGHT, GL_SPINNER_TRACK_COLOR_DEFAULT, GL_SPINNER_TRACK_COLOR_LIGHT, GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE, GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT, GL_STATUS_BRAND_BORDER_COLOR_HOVER, GL_STATUS_BRAND_ICON_COLOR_ACTIVE, GL_STATUS_BRAND_ICON_COLOR_DEFAULT, GL_STATUS_BRAND_ICON_COLOR_FOCUS, GL_STATUS_BRAND_ICON_COLOR_HOVER, GL_STATUS_BRAND_TEXT_COLOR_ACTIVE, GL_STATUS_BRAND_TEXT_COLOR_DEFAULT, GL_STATUS_BRAND_TEXT_COLOR_FOCUS, GL_STATUS_BRAND_TEXT_COLOR_HOVER, GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE, GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT, GL_STATUS_DANGER_BORDER_COLOR_HOVER, GL_STATUS_DANGER_ICON_COLOR_ACTIVE, GL_STATUS_DANGER_ICON_COLOR_DEFAULT, GL_STATUS_DANGER_ICON_COLOR_FOCUS, GL_STATUS_DANGER_ICON_COLOR_HOVER, GL_STATUS_DANGER_TEXT_COLOR_ACTIVE, GL_STATUS_DANGER_TEXT_COLOR_DEFAULT, GL_STATUS_DANGER_TEXT_COLOR_FOCUS, GL_STATUS_DANGER_TEXT_COLOR_HOVER, GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE, GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT, GL_STATUS_INFO_BORDER_COLOR_HOVER, GL_STATUS_INFO_ICON_COLOR_ACTIVE, GL_STATUS_INFO_ICON_COLOR_DEFAULT, GL_STATUS_INFO_ICON_COLOR_FOCUS, GL_STATUS_INFO_ICON_COLOR_HOVER, GL_STATUS_INFO_TEXT_COLOR_ACTIVE, GL_STATUS_INFO_TEXT_COLOR_DEFAULT, GL_STATUS_INFO_TEXT_COLOR_FOCUS, GL_STATUS_INFO_TEXT_COLOR_HOVER, GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE, GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT, GL_STATUS_MUTED_BORDER_COLOR_HOVER, GL_STATUS_MUTED_ICON_COLOR_ACTIVE, GL_STATUS_MUTED_ICON_COLOR_DEFAULT, GL_STATUS_MUTED_ICON_COLOR_FOCUS, GL_STATUS_MUTED_ICON_COLOR_HOVER, GL_STATUS_MUTED_TEXT_COLOR_ACTIVE, GL_STATUS_MUTED_TEXT_COLOR_DEFAULT, GL_STATUS_MUTED_TEXT_COLOR_FOCUS, GL_STATUS_MUTED_TEXT_COLOR_HOVER, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER, GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE, GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT, GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS, GL_STATUS_NEUTRAL_ICON_COLOR_HOVER, GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE, GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT, GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS, GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER, GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE, GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT, GL_STATUS_SUCCESS_BORDER_COLOR_HOVER, GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE, GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT, GL_STATUS_SUCCESS_ICON_COLOR_FOCUS, GL_STATUS_SUCCESS_ICON_COLOR_HOVER, GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE, GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT, GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS, GL_STATUS_SUCCESS_TEXT_COLOR_HOVER, GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE, GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT, GL_STATUS_WARNING_BORDER_COLOR_HOVER, GL_STATUS_WARNING_ICON_COLOR_ACTIVE, GL_STATUS_WARNING_ICON_COLOR_DEFAULT, GL_STATUS_WARNING_ICON_COLOR_FOCUS, GL_STATUS_WARNING_ICON_COLOR_HOVER, GL_STATUS_WARNING_TEXT_COLOR_ACTIVE, GL_STATUS_WARNING_TEXT_COLOR_DEFAULT, GL_STATUS_WARNING_TEXT_COLOR_FOCUS, GL_STATUS_WARNING_TEXT_COLOR_HOVER, GL_TABLE_ROW_BACKGROUND_COLOR_HOVER, GL_TABLE_SORTING_ICON_COLOR, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };
+export { BLACK, BLUE_100, BLUE_200, BLUE_300, BLUE_400, BLUE_50, BLUE_500, BLUE_600, BLUE_700, BLUE_800, BLUE_900, BLUE_950, BRAND_CHARCOAL, BRAND_GRAY_01, BRAND_GRAY_02, BRAND_GRAY_03, BRAND_GRAY_04, BRAND_GRAY_05, BRAND_ORANGE_01, BRAND_ORANGE_02, BRAND_ORANGE_03, BRAND_PURPLE_01, BRAND_PURPLE_02, DATA_VIZ_AQUA_100, DATA_VIZ_AQUA_200, DATA_VIZ_AQUA_300, DATA_VIZ_AQUA_400, DATA_VIZ_AQUA_50, DATA_VIZ_AQUA_500, DATA_VIZ_AQUA_600, DATA_VIZ_AQUA_700, DATA_VIZ_AQUA_800, DATA_VIZ_AQUA_900, DATA_VIZ_AQUA_950, DATA_VIZ_BLUE_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_300, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_50, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_700, DATA_VIZ_BLUE_800, DATA_VIZ_BLUE_900, DATA_VIZ_BLUE_950, DATA_VIZ_GREEN_100, DATA_VIZ_GREEN_200, DATA_VIZ_GREEN_300, DATA_VIZ_GREEN_400, DATA_VIZ_GREEN_50, DATA_VIZ_GREEN_500, DATA_VIZ_GREEN_600, DATA_VIZ_GREEN_700, DATA_VIZ_GREEN_800, DATA_VIZ_GREEN_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_MAGENTA_50, DATA_VIZ_MAGENTA_500, DATA_VIZ_MAGENTA_600, DATA_VIZ_MAGENTA_700, DATA_VIZ_MAGENTA_800, DATA_VIZ_MAGENTA_900, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_100, DATA_VIZ_ORANGE_200, DATA_VIZ_ORANGE_300, DATA_VIZ_ORANGE_400, DATA_VIZ_ORANGE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_ORANGE_950, GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER, GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE, GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT, GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS, GL_ACTION_CONFIRM_BORDER_COLOR_HOVER, GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE, GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT, GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS, GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER, GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS, GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER, GL_ACTION_DANGER_BORDER_COLOR_ACTIVE, GL_ACTION_DANGER_BORDER_COLOR_DEFAULT, GL_ACTION_DANGER_BORDER_COLOR_FOCUS, GL_ACTION_DANGER_BORDER_COLOR_HOVER, GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE, GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT, GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS, GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER, GL_ACTION_DISABLED_BACKGROUND_COLOR, GL_ACTION_DISABLED_BORDER_COLOR, GL_ACTION_DISABLED_FOREGROUND_COLOR, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER, GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE, GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT, GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS, GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS, GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER, GL_AVATAR_BORDER_COLOR_DEFAULT, GL_AVATAR_BORDER_COLOR_HOVER, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE, GL_AVATAR_FALLBACK_BACKGROUND_COLOR_RED, GL_BACKGROUND_COLOR_DEFAULT, GL_BACKGROUND_COLOR_DISABLED, GL_BACKGROUND_COLOR_OVERLAY, GL_BACKGROUND_COLOR_STRONG, GL_BACKGROUND_COLOR_SUBTLE, GL_BANNER_INTRO_BORDER_COLOR, GL_BANNER_PROMO_BACKGROUND_COLOR, GL_BORDER_COLOR_DEFAULT, GL_BORDER_COLOR_STRONG, GL_BORDER_COLOR_SUBTLE, GL_BORDER_COLOR_TRANSPARENT, GL_BREADCRUMB_SEPARATOR_COLOR, GL_COLOR_ALPHA_0, GL_COLOR_ALPHA_DARK_16, GL_COLOR_ALPHA_DARK_2, GL_COLOR_ALPHA_DARK_24, GL_COLOR_ALPHA_DARK_4, GL_COLOR_ALPHA_DARK_6, GL_COLOR_ALPHA_DARK_8, GL_COLOR_ALPHA_LIGHT_16, GL_COLOR_ALPHA_LIGHT_2, GL_COLOR_ALPHA_LIGHT_24, GL_COLOR_ALPHA_LIGHT_36, GL_COLOR_ALPHA_LIGHT_4, GL_COLOR_ALPHA_LIGHT_6, GL_COLOR_ALPHA_LIGHT_8, GL_COLOR_BLUE_100, GL_COLOR_BLUE_200, GL_COLOR_BLUE_300, GL_COLOR_BLUE_400, GL_COLOR_BLUE_50, GL_COLOR_BLUE_500, GL_COLOR_BLUE_600, GL_COLOR_BLUE_700, GL_COLOR_BLUE_800, GL_COLOR_BLUE_900, GL_COLOR_BLUE_950, GL_COLOR_BRAND_CHARCOAL, GL_COLOR_BRAND_GRAY_01, GL_COLOR_BRAND_GRAY_02, GL_COLOR_BRAND_GRAY_03, GL_COLOR_BRAND_GRAY_04, GL_COLOR_BRAND_GRAY_05, GL_COLOR_BRAND_ORANGE_01G, GL_COLOR_BRAND_ORANGE_01P, GL_COLOR_BRAND_ORANGE_02P, GL_COLOR_BRAND_ORANGE_03P, GL_COLOR_BRAND_PINK_01G, GL_COLOR_BRAND_PURPLE_01G, GL_COLOR_BRAND_PURPLE_01P, GL_COLOR_BRAND_PURPLE_02P, GL_COLOR_BRAND_WHITE, GL_COLOR_GREEN_100, GL_COLOR_GREEN_200, GL_COLOR_GREEN_300, GL_COLOR_GREEN_400, GL_COLOR_GREEN_50, GL_COLOR_GREEN_500, GL_COLOR_GREEN_600, GL_COLOR_GREEN_700, GL_COLOR_GREEN_800, GL_COLOR_GREEN_900, GL_COLOR_GREEN_950, GL_COLOR_NEUTRAL_0, GL_COLOR_NEUTRAL_10, GL_COLOR_NEUTRAL_100, GL_COLOR_NEUTRAL_1000, GL_COLOR_NEUTRAL_200, GL_COLOR_NEUTRAL_300, GL_COLOR_NEUTRAL_400, GL_COLOR_NEUTRAL_50, GL_COLOR_NEUTRAL_500, GL_COLOR_NEUTRAL_600, GL_COLOR_NEUTRAL_700, GL_COLOR_NEUTRAL_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_950, GL_COLOR_ORANGE_100, GL_COLOR_ORANGE_200, GL_COLOR_ORANGE_300, GL_COLOR_ORANGE_400, GL_COLOR_ORANGE_50, GL_COLOR_ORANGE_500, GL_COLOR_ORANGE_600, GL_COLOR_ORANGE_700, GL_COLOR_ORANGE_800, GL_COLOR_ORANGE_900, GL_COLOR_ORANGE_950, GL_COLOR_PURPLE_100, GL_COLOR_PURPLE_200, GL_COLOR_PURPLE_300, GL_COLOR_PURPLE_400, GL_COLOR_PURPLE_50, GL_COLOR_PURPLE_500, GL_COLOR_PURPLE_600, GL_COLOR_PURPLE_700, GL_COLOR_PURPLE_800, GL_COLOR_PURPLE_900, GL_COLOR_PURPLE_950, GL_COLOR_RED_100, GL_COLOR_RED_200, GL_COLOR_RED_300, GL_COLOR_RED_400, GL_COLOR_RED_50, GL_COLOR_RED_500, GL_COLOR_RED_600, GL_COLOR_RED_700, GL_COLOR_RED_800, GL_COLOR_RED_900, GL_COLOR_RED_950, GL_COLOR_THEME_BLUE_10, GL_COLOR_THEME_BLUE_100, GL_COLOR_THEME_BLUE_200, GL_COLOR_THEME_BLUE_300, GL_COLOR_THEME_BLUE_400, GL_COLOR_THEME_BLUE_50, GL_COLOR_THEME_BLUE_500, GL_COLOR_THEME_BLUE_600, GL_COLOR_THEME_BLUE_700, GL_COLOR_THEME_BLUE_800, GL_COLOR_THEME_BLUE_900, GL_COLOR_THEME_BLUE_950, GL_COLOR_THEME_GREEN_10, GL_COLOR_THEME_GREEN_100, GL_COLOR_THEME_GREEN_200, GL_COLOR_THEME_GREEN_300, GL_COLOR_THEME_GREEN_400, GL_COLOR_THEME_GREEN_50, GL_COLOR_THEME_GREEN_500, GL_COLOR_THEME_GREEN_600, GL_COLOR_THEME_GREEN_700, GL_COLOR_THEME_GREEN_800, GL_COLOR_THEME_GREEN_900, GL_COLOR_THEME_GREEN_950, GL_COLOR_THEME_INDIGO_10, GL_COLOR_THEME_INDIGO_100, GL_COLOR_THEME_INDIGO_200, GL_COLOR_THEME_INDIGO_300, GL_COLOR_THEME_INDIGO_400, GL_COLOR_THEME_INDIGO_50, GL_COLOR_THEME_INDIGO_500, GL_COLOR_THEME_INDIGO_600, GL_COLOR_THEME_INDIGO_700, GL_COLOR_THEME_INDIGO_800, GL_COLOR_THEME_INDIGO_900, GL_COLOR_THEME_INDIGO_950, GL_COLOR_THEME_LIGHT_BLUE_10, GL_COLOR_THEME_LIGHT_BLUE_100, GL_COLOR_THEME_LIGHT_BLUE_200, GL_COLOR_THEME_LIGHT_BLUE_300, GL_COLOR_THEME_LIGHT_BLUE_400, GL_COLOR_THEME_LIGHT_BLUE_50, GL_COLOR_THEME_LIGHT_BLUE_500, GL_COLOR_THEME_LIGHT_BLUE_600, GL_COLOR_THEME_LIGHT_BLUE_700, GL_COLOR_THEME_LIGHT_BLUE_800, GL_COLOR_THEME_LIGHT_BLUE_900, GL_COLOR_THEME_LIGHT_BLUE_950, GL_COLOR_THEME_LIGHT_RED_10, GL_COLOR_THEME_LIGHT_RED_100, GL_COLOR_THEME_LIGHT_RED_200, GL_COLOR_THEME_LIGHT_RED_300, GL_COLOR_THEME_LIGHT_RED_400, GL_COLOR_THEME_LIGHT_RED_50, GL_COLOR_THEME_LIGHT_RED_500, GL_COLOR_THEME_LIGHT_RED_600, GL_COLOR_THEME_LIGHT_RED_700, GL_COLOR_THEME_LIGHT_RED_800, GL_COLOR_THEME_LIGHT_RED_900, GL_COLOR_THEME_LIGHT_RED_950, GL_COLOR_THEME_RED_10, GL_COLOR_THEME_RED_100, GL_COLOR_THEME_RED_200, GL_COLOR_THEME_RED_300, GL_COLOR_THEME_RED_400, GL_COLOR_THEME_RED_50, GL_COLOR_THEME_RED_500, GL_COLOR_THEME_RED_600, GL_COLOR_THEME_RED_700, GL_COLOR_THEME_RED_800, GL_COLOR_THEME_RED_900, GL_COLOR_THEME_RED_950, GL_CONTROL_BACKGROUND_COLOR_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_DISABLED, GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT, GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS, GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER, GL_CONTROL_BORDER_COLOR_DEFAULT, GL_CONTROL_BORDER_COLOR_DISABLED, GL_CONTROL_BORDER_COLOR_ERROR, GL_CONTROL_BORDER_COLOR_FOCUS, GL_CONTROL_BORDER_COLOR_HOVER, GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT, GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS, GL_CONTROL_BORDER_COLOR_SELECTED_HOVER, GL_CONTROL_INDICATOR_COLOR_DISABLED, GL_CONTROL_INDICATOR_COLOR_SELECTED, GL_CONTROL_PLACEHOLDER_COLOR, GL_CONTROL_TEXT_COLOR_ERROR, GL_CONTROL_TEXT_COLOR_VALID, GL_FEEDBACK_BACKGROUND_COLOR_STRONG, GL_FEEDBACK_DANGER_BACKGROUND_COLOR, GL_FEEDBACK_DANGER_ICON_COLOR, GL_FEEDBACK_DANGER_TEXT_COLOR, GL_FEEDBACK_ICON_COLOR_STRONG, GL_FEEDBACK_INFO_BACKGROUND_COLOR, GL_FEEDBACK_INFO_ICON_COLOR, GL_FEEDBACK_INFO_TEXT_COLOR, GL_FEEDBACK_LINK_COLOR_STRONG, GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR, GL_FEEDBACK_NEUTRAL_ICON_COLOR, GL_FEEDBACK_NEUTRAL_TEXT_COLOR, GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR, GL_FEEDBACK_SUCCESS_ICON_COLOR, GL_FEEDBACK_SUCCESS_TEXT_COLOR, GL_FEEDBACK_TEXT_COLOR_STRONG, GL_FEEDBACK_WARNING_BACKGROUND_COLOR, GL_FEEDBACK_WARNING_ICON_COLOR, GL_FEEDBACK_WARNING_TEXT_COLOR, GL_FOCUS_RING_INNER_COLOR, GL_FOCUS_RING_OUTER_COLOR, GL_ICON_COLOR_DANGER, GL_ICON_COLOR_DEFAULT, GL_ICON_COLOR_DISABLED, GL_ICON_COLOR_INFO, GL_ICON_COLOR_LINK, GL_ICON_COLOR_STRONG, GL_ICON_COLOR_SUBTLE, GL_ICON_COLOR_SUCCESS, GL_ICON_COLOR_WARNING, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_DARK_TEXT_COLOR, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT, GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_LIGHT_TEXT_COLOR, GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT, GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER, GL_LABEL_SCOPED_TEXT_COLOR, GL_LINE_HEIGHT_12, GL_LINE_HEIGHT_16, GL_LINE_HEIGHT_20, GL_LINE_HEIGHT_24, GL_LINE_HEIGHT_28, GL_LINE_HEIGHT_32, GL_LINE_HEIGHT_36, GL_LINE_HEIGHT_42, GL_LINE_HEIGHT_44, GL_LINE_HEIGHT_52, GL_POPOVER_BACKGROUND_COLOR, GL_SHADOW_COLOR_DEFAULT, GL_SKELETON_LOADER_BACKGROUND_COLOR, GL_SKELETON_LOADER_SHIMMER_COLOR, GL_SPINNER_SEGMENT_COLOR_DEFAULT, GL_SPINNER_SEGMENT_COLOR_LIGHT, GL_SPINNER_TRACK_COLOR_DEFAULT, GL_SPINNER_TRACK_COLOR_LIGHT, GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE, GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT, GL_STATUS_BRAND_BORDER_COLOR_HOVER, GL_STATUS_BRAND_ICON_COLOR_ACTIVE, GL_STATUS_BRAND_ICON_COLOR_DEFAULT, GL_STATUS_BRAND_ICON_COLOR_FOCUS, GL_STATUS_BRAND_ICON_COLOR_HOVER, GL_STATUS_BRAND_TEXT_COLOR_ACTIVE, GL_STATUS_BRAND_TEXT_COLOR_DEFAULT, GL_STATUS_BRAND_TEXT_COLOR_FOCUS, GL_STATUS_BRAND_TEXT_COLOR_HOVER, GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE, GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT, GL_STATUS_DANGER_BORDER_COLOR_HOVER, GL_STATUS_DANGER_ICON_COLOR_ACTIVE, GL_STATUS_DANGER_ICON_COLOR_DEFAULT, GL_STATUS_DANGER_ICON_COLOR_FOCUS, GL_STATUS_DANGER_ICON_COLOR_HOVER, GL_STATUS_DANGER_TEXT_COLOR_ACTIVE, GL_STATUS_DANGER_TEXT_COLOR_DEFAULT, GL_STATUS_DANGER_TEXT_COLOR_FOCUS, GL_STATUS_DANGER_TEXT_COLOR_HOVER, GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE, GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT, GL_STATUS_INFO_BORDER_COLOR_HOVER, GL_STATUS_INFO_ICON_COLOR_ACTIVE, GL_STATUS_INFO_ICON_COLOR_DEFAULT, GL_STATUS_INFO_ICON_COLOR_FOCUS, GL_STATUS_INFO_ICON_COLOR_HOVER, GL_STATUS_INFO_TEXT_COLOR_ACTIVE, GL_STATUS_INFO_TEXT_COLOR_DEFAULT, GL_STATUS_INFO_TEXT_COLOR_FOCUS, GL_STATUS_INFO_TEXT_COLOR_HOVER, GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE, GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT, GL_STATUS_MUTED_BORDER_COLOR_HOVER, GL_STATUS_MUTED_ICON_COLOR_ACTIVE, GL_STATUS_MUTED_ICON_COLOR_DEFAULT, GL_STATUS_MUTED_ICON_COLOR_FOCUS, GL_STATUS_MUTED_ICON_COLOR_HOVER, GL_STATUS_MUTED_TEXT_COLOR_ACTIVE, GL_STATUS_MUTED_TEXT_COLOR_DEFAULT, GL_STATUS_MUTED_TEXT_COLOR_FOCUS, GL_STATUS_MUTED_TEXT_COLOR_HOVER, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE, GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT, GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER, GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE, GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT, GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS, GL_STATUS_NEUTRAL_ICON_COLOR_HOVER, GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE, GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT, GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS, GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER, GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE, GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT, GL_STATUS_SUCCESS_BORDER_COLOR_HOVER, GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE, GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT, GL_STATUS_SUCCESS_ICON_COLOR_FOCUS, GL_STATUS_SUCCESS_ICON_COLOR_HOVER, GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE, GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT, GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS, GL_STATUS_SUCCESS_TEXT_COLOR_HOVER, GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE, GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT, GL_STATUS_WARNING_BORDER_COLOR_HOVER, GL_STATUS_WARNING_ICON_COLOR_ACTIVE, GL_STATUS_WARNING_ICON_COLOR_DEFAULT, GL_STATUS_WARNING_ICON_COLOR_FOCUS, GL_STATUS_WARNING_ICON_COLOR_HOVER, GL_STATUS_WARNING_TEXT_COLOR_ACTIVE, GL_STATUS_WARNING_TEXT_COLOR_DEFAULT, GL_STATUS_WARNING_TEXT_COLOR_FOCUS, GL_STATUS_WARNING_TEXT_COLOR_HOVER, GL_TABLE_ROW_BACKGROUND_COLOR_HOVER, GL_TABLE_SORTING_ICON_COLOR, GL_TEXT_COLOR_DANGER, GL_TEXT_COLOR_DEFAULT, GL_TEXT_COLOR_DISABLED, GL_TEXT_COLOR_HEADING, GL_TEXT_COLOR_LINK, GL_TEXT_COLOR_STRONG, GL_TEXT_COLOR_SUBTLE, GL_TEXT_COLOR_SUCCESS, GL_TEXT_PRIMARY, GL_TEXT_SECONDARY, GL_TEXT_TERTIARY, GRAY_10, GRAY_100, GRAY_200, GRAY_300, GRAY_400, GRAY_50, GRAY_500, GRAY_600, GRAY_700, GRAY_800, GRAY_900, GRAY_950, GREEN_100, GREEN_200, GREEN_300, GREEN_400, GREEN_50, GREEN_500, GREEN_600, GREEN_700, GREEN_800, GREEN_900, GREEN_950, ORANGE_100, ORANGE_200, ORANGE_300, ORANGE_400, ORANGE_50, ORANGE_500, ORANGE_600, ORANGE_700, ORANGE_800, ORANGE_900, ORANGE_950, PURPLE_100, PURPLE_200, PURPLE_300, PURPLE_400, PURPLE_50, PURPLE_500, PURPLE_600, PURPLE_700, PURPLE_800, PURPLE_900, PURPLE_950, RED_100, RED_200, RED_300, RED_400, RED_50, RED_500, RED_600, RED_700, RED_800, RED_900, RED_950, THEME_BLUE_10, THEME_BLUE_100, THEME_BLUE_200, THEME_BLUE_300, THEME_BLUE_400, THEME_BLUE_50, THEME_BLUE_500, THEME_BLUE_600, THEME_BLUE_700, THEME_BLUE_800, THEME_BLUE_900, THEME_BLUE_950, THEME_GREEN_10, THEME_GREEN_100, THEME_GREEN_200, THEME_GREEN_300, THEME_GREEN_400, THEME_GREEN_50, THEME_GREEN_500, THEME_GREEN_600, THEME_GREEN_700, THEME_GREEN_800, THEME_GREEN_900, THEME_GREEN_950, THEME_INDIGO_10, THEME_INDIGO_100, THEME_INDIGO_200, THEME_INDIGO_300, THEME_INDIGO_400, THEME_INDIGO_50, THEME_INDIGO_500, THEME_INDIGO_600, THEME_INDIGO_700, THEME_INDIGO_800, THEME_INDIGO_900, THEME_INDIGO_950, THEME_LIGHT_BLUE_10, THEME_LIGHT_BLUE_100, THEME_LIGHT_BLUE_200, THEME_LIGHT_BLUE_300, THEME_LIGHT_BLUE_400, THEME_LIGHT_BLUE_50, THEME_LIGHT_BLUE_500, THEME_LIGHT_BLUE_600, THEME_LIGHT_BLUE_700, THEME_LIGHT_BLUE_800, THEME_LIGHT_BLUE_900, THEME_LIGHT_BLUE_950, THEME_LIGHT_RED_10, THEME_LIGHT_RED_100, THEME_LIGHT_RED_200, THEME_LIGHT_RED_300, THEME_LIGHT_RED_400, THEME_LIGHT_RED_50, THEME_LIGHT_RED_500, THEME_LIGHT_RED_600, THEME_LIGHT_RED_700, THEME_LIGHT_RED_800, THEME_LIGHT_RED_900, THEME_LIGHT_RED_950, THEME_RED_10, THEME_RED_100, THEME_RED_200, THEME_RED_300, THEME_RED_400, THEME_RED_50, THEME_RED_500, THEME_RED_600, THEME_RED_700, THEME_RED_800, THEME_RED_900, THEME_RED_950, T_GRAY_A_02, T_GRAY_A_04, T_GRAY_A_06, T_GRAY_A_08, T_GRAY_A_16, T_GRAY_A_24, T_WHITE_A_02, T_WHITE_A_04, T_WHITE_A_06, T_WHITE_A_08, T_WHITE_A_16, T_WHITE_A_24, T_WHITE_A_36, WHITE };

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;
@@ -512,16 +512,21 @@
   --gl-icon-color-subtle: var(--gl-color-neutral-500); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for an icon associated with danger or critical feedback. */
-  --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for a background associated with danger or critical feedback. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for an icon associated with warning feedback or confidential content. */
-  --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for an icon associated with successful feedback or a new section. */
-  --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for an icon associated with informational feedback. */
-  --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for an icon associated with a neutral feedback section. */
-  --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for a background associated with neutral feedback. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-text-color: var(--gl-color-red-700); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-text-color: var(--gl-color-orange-700); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-text-color: var(--gl-color-green-700); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-text-color: var(--gl-color-blue-700); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-text-color: var(--gl-color-neutral-700); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-link-color-strong: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
   --gl-feedback-icon-color-strong: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
   --gl-feedback-text-color-strong: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */

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;
@@ -512,16 +512,21 @@
   --gl-icon-color-subtle: var(--gl-color-neutral-300); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-100); /* Used for the default icon color. Can be paired with default text. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /* Used for the outer color portion of the focus ring. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for an icon associated with danger or critical feedback. */
-  --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for a background associated with danger or critical feedback. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for an icon associated with warning feedback or confidential content. */
-  --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for an icon associated with successful feedback or a new section. */
-  --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for an icon associated with informational feedback. */
-  --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for an icon associated with a neutral feedback section. */
-  --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for a background associated with neutral feedback. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-text-color: var(--gl-color-green-200); /* Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-link-color-strong: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
   --gl-feedback-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
   --gl-feedback-text-color-strong: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */