@gitlab/ui 84.1.0 → 85.0.0

package/src/tokens/build/css/tokens.dark.css

@@ -400,6 +400,83 @@
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
+  --gl-status-brand-icon-color-active: var(--gl-color-purple-300); /* Used for the icon of a brand related status item in the active state. */
+  --gl-status-brand-icon-color-focus: var(--gl-color-purple-400); /* Used for the icon of a brand related status item in the focus state. */
+  --gl-status-brand-icon-color-hover: var(--gl-color-purple-400); /* Used for the icon of a brand related status item in the hover state. */
+  --gl-status-brand-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a brand related status item when static or the default state when linked. */
+  --gl-status-brand-text-color-active: var(--gl-color-purple-100); /* Used for the text of a brand related status item in the active state. */
+  --gl-status-brand-text-color-focus: var(--gl-color-purple-200); /* Used for the text of a brand related status item in the focus state. */
+  --gl-status-brand-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a brand related status item in the hover state. */
+  --gl-status-brand-text-color-default: var(--gl-color-purple-300); /* Used for the text of a brand related status item when static or the default state when linked. */
+  --gl-status-brand-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a brand related status item in the hover state. */
+  --gl-status-brand-background-color-active: var(--gl-color-purple-800); /* Used for the background of a brand related status item in the active state. */
+  --gl-status-brand-background-color-default: var(--gl-color-purple-900); /* Used for the background of a brand related status item when static or the default state when linked. */
+  --gl-status-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger (critical) status item in the active state. */
+  --gl-status-danger-icon-color-focus: var(--gl-color-red-300); /* Used for the icon of a danger (critical) status item in the focus state. */
+  --gl-status-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger (critical) status item in the hover state. */
+  --gl-status-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (critical) status item when static or the default state when linked. */
+  --gl-status-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (critical) status item in the active state. */
+  --gl-status-danger-text-color-focus: var(--gl-color-red-100); /* Used for the text of a danger (critical) status item in the focus state. */
+  --gl-status-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger (critical) status item in the hover state. */
+  --gl-status-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger (critical) status item when static or the default state when linked. */
+  --gl-status-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger (critical) status item in the hover state. */
+  --gl-status-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger (critical) status item in the active state. */
+  --gl-status-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger (critical) status item when static or the default state when linked. */
+  --gl-status-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning status or confidential item in the active state. */
+  --gl-status-warning-icon-color-focus: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the focus state. */
+  --gl-status-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the hover state. */
+  --gl-status-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
+  --gl-status-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning status or confidential item in the active state.N */
+  --gl-status-warning-text-color-focus: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the focus state. */
+  --gl-status-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the hover state. */
+  --gl-status-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
+  --gl-status-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning status or confidential item in the hover state. */
+  --gl-status-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning status or confidential item in the active state. */
+  --gl-status-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
+  --gl-status-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success status item in the active state. */
+  --gl-status-success-icon-color-focus: var(--gl-color-green-300); /* Used for the icon of a success status item in the focus state. */
+  --gl-status-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success status item in the hover state. */
+  --gl-status-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success status item when static or the default state when linked. */
+  --gl-status-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success status item in the active state. */
+  --gl-status-success-text-color-focus: var(--gl-color-green-100); /* Used for the text of a success status item in the focus state. */
+  --gl-status-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success status item in the hover state. */
+  --gl-status-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success status item when static or the default state when linked. */
+  --gl-status-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success status item in the hover state. */
+  --gl-status-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success status item in the active state. */
+  --gl-status-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success status item when static or the default state when linked. */
+  --gl-status-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational status item in the active state. */
+  --gl-status-info-icon-color-focus: var(--gl-color-blue-300); /* Used for the icon of an informational status item in the focus state. */
+  --gl-status-info-icon-color-hover: var(--gl-color-blue-300); /* Used for the icon of an informational status item in the hover state. */
+  --gl-status-info-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of an informational status item when static or the default state when linked. */
+  --gl-status-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational status item in the active state. */
+  --gl-status-info-text-color-focus: var(--gl-color-blue-100); /* Used for the text of an informational status item in the focus state. */
+  --gl-status-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational status item in the hover state. */
+  --gl-status-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational status item when static or the default state when linked. */
+  --gl-status-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational status item in the hover state. */
+  --gl-status-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational status item in the active state. */
+  --gl-status-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational status item when static or the default state when linked. */
+  --gl-status-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral status item in the active state. */
+  --gl-status-neutral-icon-color-focus: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item in the focus state. */
+  --gl-status-neutral-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item in the hover state. */
+  --gl-status-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when static or the default state when linked. */
+  --gl-status-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral status item in the active state. */
+  --gl-status-neutral-text-color-focus: var(--gl-color-neutral-100); /* Used for the text of a neutral status item in the focus state. */
+  --gl-status-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral status item in the hover state. */
+  --gl-status-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when static or the default state when linked. */
+  --gl-status-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral status item in the hover state. */
+  --gl-status-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral status item in the active state. */
+  --gl-status-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when static or the default state when linked. */
+  --gl-status-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a subtle neutral status item in the active state. */
+  --gl-status-muted-icon-color-focus: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral status item in the focus state. */
+  --gl-status-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral status item in the hover state. */
+  --gl-status-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a subtle neutral status item when static or the default state when linked. */
+  --gl-status-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a subtle neutral status item in the active state. */
+  --gl-status-muted-text-color-focus: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral status item in the focus state. */
+  --gl-status-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral status item in the hover state. */
+  --gl-status-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a subtle neutral status item when static or the default state when linked. */
+  --gl-status-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral status item in the hover state. */
+  --gl-status-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral status item in the active state. */
+  --gl-status-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral status item when static or the default state when linked. */
   --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
   --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
   --gl-icon-color-warning: var(--gl-color-orange-300); /* Used for an icon associated with a warning. */

package/src/tokens/build/js/tokens.dark.js

@@ -406,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/src/tokens/build/js/tokens.js

@@ -406,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