@gitlab/ui 84.0.0 → 84.2.0

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

@@ -386,6 +386,7 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
 export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
 export const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
 export const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.
@@ -405,6 +406,83 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#434248'; // Used for the background of a subtle neutral status item in the active state.
+export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#535158'; // Used for the border of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral status item in the focus state.
+export const GL_STATUS_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral status item in the active state.
+export const GL_STATUS_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the focus state.
+export const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#434248'; // Used for the background of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#535158'; // Used for the background of a neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#535158'; // Used for the border of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral status item in the focus state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral status item in the focus state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral status item in the active state.
+export const GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational status item in the active state.
+export const GL_STATUS_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational status item in the hover state.
+export const GL_STATUS_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational status item in the hover state.
+export const GL_STATUS_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational status item in the focus state.
+export const GL_STATUS_INFO_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of an informational status item in the active state.
+export const GL_STATUS_INFO_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of an informational status item in the hover state.
+export const GL_STATUS_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational status item in the focus state.
+export const GL_STATUS_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational status item in the active state.
+export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success status item in the active state.
+export const GL_STATUS_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success status item in the focus state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE = '#ecf4ee'; // Used for the text of a success status item in the active state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the icon of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success status item in the focus state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success status item in the active state.
+export const GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
+export const GL_STATUS_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
+export const GL_STATUS_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
+export const GL_STATUS_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
+export const GL_STATUS_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
+export const GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) status item in the active state.
+export const GL_STATUS_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) status item in the focus state.
+export const GL_STATUS_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) status item in the active state.
+export const GL_STATUS_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) status item in the focus state.
+export const GL_STATUS_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) status item in the active state.
+export const GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a brand related status item in the active state.
+export const GL_STATUS_BRAND_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a brand related status item in the focus state.
+export const GL_STATUS_BRAND_TEXT_COLOR_ACTIVE = '#e1d8f9'; // Used for the text of a brand related status item in the active state.
+export const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#9475db'; // Used for the icon of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#9475db'; // Used for the icon of a brand related status item in the focus state.
+export const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon of a brand related status item in the active state.
 export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead
 export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead
 export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead

package/dist/tokens/js/tokens.js

@@ -386,6 +386,7 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
 export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
 export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
 export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
 export const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
 export const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
 export const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.
@@ -405,6 +406,83 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a subtle neutral status item in the active state.
+export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_TEXT_COLOR_HOVER = '#535158'; // Used for the text of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#535158'; // Used for the text of a subtle neutral status item in the focus state.
+export const GL_STATUS_MUTED_TEXT_COLOR_ACTIVE = '#434248'; // Used for the text of a subtle neutral status item in the active state.
+export const GL_STATUS_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a subtle neutral status item when static or the default state when linked.
+export const GL_STATUS_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a subtle neutral status item in the hover state.
+export const GL_STATUS_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a subtle neutral status item in the focus state.
+export const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#535158'; // Used for the icon of a subtle neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the background of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#bfbfc3'; // Used for the background of a neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#535158'; // Used for the text of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#434248'; // Used for the text of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#434248'; // Used for the text of a neutral status item in the focus state.
+export const GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE = '#333238'; // Used for the text of a neutral status item in the active state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a neutral status item when static or the default state when linked.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a neutral status item in the hover state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a neutral status item in the focus state.
+export const GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE = '#535158'; // Used for the icon of a neutral status item in the active state.
+export const GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the background of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of an informational status item in the active state.
+export const GL_STATUS_INFO_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an informational status item in the hover state.
+export const GL_STATUS_INFO_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the text of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_TEXT_COLOR_HOVER = '#064787'; // Used for the text of an informational status item in the hover state.
+export const GL_STATUS_INFO_TEXT_COLOR_FOCUS = '#064787'; // Used for the text of an informational status item in the focus state.
+export const GL_STATUS_INFO_TEXT_COLOR_ACTIVE = '#033464'; // Used for the text of an informational status item in the active state.
+export const GL_STATUS_INFO_ICON_COLOR_DEFAULT = '#1f75cb'; // Used for the icon of an informational status item when static or the default state when linked.
+export const GL_STATUS_INFO_ICON_COLOR_HOVER = '#1068bf'; // Used for the icon of an informational status item in the hover state.
+export const GL_STATUS_INFO_ICON_COLOR_FOCUS = '#1068bf'; // Used for the icon of an informational status item in the focus state.
+export const GL_STATUS_INFO_ICON_COLOR_ACTIVE = '#0b5cad'; // Used for the icon of an informational status item in the active state.
+export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#c3e6cd'; // Used for the background of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#91d4a8'; // Used for the background of a success status item in the active state.
+export const GL_STATUS_SUCCESS_BORDER_COLOR_HOVER = '#91d4a8'; // Used for the border of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT = '#24663b'; // Used for the text of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_HOVER = '#0d532a'; // Used for the text of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS = '#0d532a'; // Used for the text of a success status item in the focus state.
+export const GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE = '#0a4020'; // Used for the text of a success status item in the active state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT = '#108548'; // Used for the icon of a success status item when static or the default state when linked.
+export const GL_STATUS_SUCCESS_ICON_COLOR_HOVER = '#217645'; // Used for the icon of a success status item in the hover state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_FOCUS = '#217645'; // Used for the icon of a success status item in the focus state.
+export const GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE = '#24663b'; // Used for the icon of a success status item in the active state.
+export const GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning status or confidential item in the active state.
+export const GL_STATUS_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning status or confidential item in the focus state.
+export const GL_STATUS_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning status or confidential item in the active state.N
+export const GL_STATUS_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
+export const GL_STATUS_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning status or confidential item in the hover state.
+export const GL_STATUS_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning status or confidential item in the focus state.
+export const GL_STATUS_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning status or confidential item in the active state.
+export const GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger (critical) status item in the active state.
+export const GL_STATUS_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger (critical) status item in the focus state.
+export const GL_STATUS_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger (critical) status item in the active state.
+export const GL_STATUS_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger (critical) status item when static or the default state when linked.
+export const GL_STATUS_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger (critical) status item in the hover state.
+export const GL_STATUS_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger (critical) status item in the focus state.
+export const GL_STATUS_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger (critical) status item in the active state.
+export const GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT = '#e1d8f9'; // Used for the background of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE = '#cbbbf2'; // Used for the background of a brand related status item in the active state.
+export const GL_STATUS_BRAND_BORDER_COLOR_HOVER = '#cbbbf2'; // Used for the border of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_TEXT_COLOR_DEFAULT = '#5943b6'; // Used for the text of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_TEXT_COLOR_HOVER = '#453894'; // Used for the text of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_TEXT_COLOR_FOCUS = '#453894'; // Used for the text of a brand related status item in the focus state.
+export const GL_STATUS_BRAND_TEXT_COLOR_ACTIVE = '#2f2a6b'; // Used for the text of a brand related status item in the active state.
+export const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a brand related status item when static or the default state when linked.
+export const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#694cc0'; // Used for the icon of a brand related status item in the hover state.
+export const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#694cc0'; // Used for the icon of a brand related status item in the focus state.
+export const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#5943b6'; // Used for the icon of a brand related status item in the active state.
 export const GL_TEXT_PRIMARY = '#333238'; // Use text.color.default instead
 export const GL_TEXT_SECONDARY = '#737278'; // Use text.color.subtle instead
 export const GL_TEXT_TERTIARY = '#89888d'; // Use text.color.disabled instead