@gitlab/ui 84.0.0 → 84.2.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -398,6 +398,83 @@ $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-50; // Used for the default text color.
+$gl-status-brand-icon-color-active: $gl-color-purple-300; // Used for the icon of a brand related status item in the active state.
+$gl-status-brand-icon-color-focus: $gl-color-purple-400; // Used for the icon of a brand related status item in the focus state.
+$gl-status-brand-icon-color-hover: $gl-color-purple-400; // Used for the icon of a brand related status item in the hover state.
+$gl-status-brand-icon-color-default: $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: $gl-color-purple-100; // Used for the text of a brand related status item in the active state.
+$gl-status-brand-text-color-focus: $gl-color-purple-200; // Used for the text of a brand related status item in the focus state.
+$gl-status-brand-text-color-hover: $gl-color-purple-200; // Used for the text of a brand related status item in the hover state.
+$gl-status-brand-text-color-default: $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: $gl-color-purple-800; // Used for the border of a brand related status item in the hover state.
+$gl-status-brand-background-color-active: $gl-color-purple-800; // Used for the background of a brand related status item in the active state.
+$gl-status-brand-background-color-default: $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: $gl-color-red-200; // Used for the icon of a danger (critical) status item in the active state.
+$gl-status-danger-icon-color-focus: $gl-color-red-300; // Used for the icon of a danger (critical) status item in the focus state.
+$gl-status-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger (critical) status item in the hover state.
+$gl-status-danger-icon-color-default: $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: $gl-color-red-50; // Used for the text of a danger (critical) status item in the active state.
+$gl-status-danger-text-color-focus: $gl-color-red-100; // Used for the text of a danger (critical) status item in the focus state.
+$gl-status-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger (critical) status item in the hover state.
+$gl-status-danger-text-color-default: $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: $gl-color-red-700; // Used for the border of a danger (critical) status item in the hover state.
+$gl-status-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) status item in the active state.
+$gl-status-danger-background-color-default: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $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: $gl-color-green-200; // Used for the icon of a success status item in the active state.
+$gl-status-success-icon-color-focus: $gl-color-green-300; // Used for the icon of a success status item in the focus state.
+$gl-status-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success status item in the hover state.
+$gl-status-success-icon-color-default: $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: $gl-color-green-50; // Used for the text of a success status item in the active state.
+$gl-status-success-text-color-focus: $gl-color-green-100; // Used for the text of a success status item in the focus state.
+$gl-status-success-text-color-hover: $gl-color-green-100; // Used for the text of a success status item in the hover state.
+$gl-status-success-text-color-default: $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: $gl-color-green-700; // Used for the border of a success status item in the hover state.
+$gl-status-success-background-color-active: $gl-color-green-700; // Used for the background of a success status item in the active state.
+$gl-status-success-background-color-default: $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: $gl-color-blue-200; // Used for the icon of an informational status item in the active state.
+$gl-status-info-icon-color-focus: $gl-color-blue-300; // Used for the icon of an informational status item in the focus state.
+$gl-status-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational status item in the hover state.
+$gl-status-info-icon-color-default: $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: $gl-color-blue-50; // Used for the text of an informational status item in the active state.
+$gl-status-info-text-color-focus: $gl-color-blue-100; // Used for the text of an informational status item in the focus state.
+$gl-status-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational status item in the hover state.
+$gl-status-info-text-color-default: $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: $gl-color-blue-700; // Used for the border of an informational status item in the hover state.
+$gl-status-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational status item in the active state.
+$gl-status-info-background-color-default: $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: $gl-color-neutral-200; // Used for the icon of a neutral status item in the active state.
+$gl-status-neutral-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a neutral status item in the focus state.
+$gl-status-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral status item in the hover state.
+$gl-status-neutral-icon-color-default: $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: $gl-color-neutral-50; // Used for the text of a neutral status item in the active state.
+$gl-status-neutral-text-color-focus: $gl-color-neutral-100; // Used for the text of a neutral status item in the focus state.
+$gl-status-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral status item in the hover state.
+$gl-status-neutral-text-color-default: $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: $gl-color-neutral-700; // Used for the border of a neutral status item in the hover state.
+$gl-status-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral status item in the active state.
+$gl-status-neutral-background-color-default: $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: $gl-color-neutral-200; // Used for the icon of a subtle neutral status item in the active state.
+$gl-status-muted-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the focus state.
+$gl-status-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the hover state.
+$gl-status-muted-icon-color-default: $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: $gl-color-neutral-100; // Used for the text of a subtle neutral status item in the active state.
+$gl-status-muted-text-color-focus: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the focus state.
+$gl-status-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the hover state.
+$gl-status-muted-text-color-default: $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: $gl-color-neutral-700; // Used for the border of a subtle neutral status item in the hover state.
+$gl-status-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral status item in the active state.
+$gl-status-muted-background-color-default: $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: $gl-color-green-300; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.
@@ -407,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
+$gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.

package/dist/tokens/scss/_tokens.scss

@@ -398,6 +398,83 @@ $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
+$gl-status-brand-icon-color-active: $gl-color-purple-700; // Used for the icon of a brand related status item in the active state.
+$gl-status-brand-icon-color-focus: $gl-color-purple-600; // Used for the icon of a brand related status item in the focus state.
+$gl-status-brand-icon-color-hover: $gl-color-purple-600; // Used for the icon of a brand related status item in the hover state.
+$gl-status-brand-icon-color-default: $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: $gl-color-purple-900; // Used for the text of a brand related status item in the active state.
+$gl-status-brand-text-color-focus: $gl-color-purple-800; // Used for the text of a brand related status item in the focus state.
+$gl-status-brand-text-color-hover: $gl-color-purple-800; // Used for the text of a brand related status item in the hover state.
+$gl-status-brand-text-color-default: $gl-color-purple-700; // Used for the text of a brand related status item when static or the default state when linked.
+$gl-status-brand-border-color-hover: $gl-color-purple-200; // Used for the border of a brand related status item in the hover state.
+$gl-status-brand-background-color-active: $gl-color-purple-200; // Used for the background of a brand related status item in the active state.
+$gl-status-brand-background-color-default: $gl-color-purple-100; // Used for the background of a brand related status item when static or the default state when linked.
+$gl-status-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger (critical) status item in the active state.
+$gl-status-danger-icon-color-focus: $gl-color-red-600; // Used for the icon of a danger (critical) status item in the focus state.
+$gl-status-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger (critical) status item in the hover state.
+$gl-status-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (critical) status item in the active state.
+$gl-status-danger-text-color-focus: $gl-color-red-800; // Used for the text of a danger (critical) status item in the focus state.
+$gl-status-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger (critical) status item in the hover state.
+$gl-status-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) status item in the hover state.
+$gl-status-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) status item in the active state.
+$gl-status-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) status item when static or the default state when linked.
+$gl-status-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
+$gl-status-warning-icon-color-focus: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the focus state.
+$gl-status-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
+$gl-status-warning-icon-color-default: $gl-color-orange-500; // 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: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
+$gl-status-warning-text-color-focus: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the focus state.
+$gl-status-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
+$gl-status-warning-text-color-default: $gl-color-orange-700; // 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: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
+$gl-status-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
+$gl-status-warning-background-color-default: $gl-color-orange-100; // 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: $gl-color-green-700; // Used for the icon of a success status item in the active state.
+$gl-status-success-icon-color-focus: $gl-color-green-600; // Used for the icon of a success status item in the focus state.
+$gl-status-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success status item in the hover state.
+$gl-status-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success status item when static or the default state when linked.
+$gl-status-success-text-color-active: $gl-color-green-900; // Used for the text of a success status item in the active state.
+$gl-status-success-text-color-focus: $gl-color-green-800; // Used for the text of a success status item in the focus state.
+$gl-status-success-text-color-hover: $gl-color-green-800; // Used for the text of a success status item in the hover state.
+$gl-status-success-text-color-default: $gl-color-green-700; // Used for the text of a success status item when static or the default state when linked.
+$gl-status-success-border-color-hover: $gl-color-green-200; // Used for the border of a success status item in the hover state.
+$gl-status-success-background-color-active: $gl-color-green-200; // Used for the background of a success status item in the active state.
+$gl-status-success-background-color-default: $gl-color-green-100; // Used for the background of a success status item when static or the default state when linked.
+$gl-status-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational status item in the active state.
+$gl-status-info-icon-color-focus: $gl-color-blue-600; // Used for the icon of an informational status item in the focus state.
+$gl-status-info-icon-color-hover: $gl-color-blue-600; // Used for the icon of an informational status item in the hover state.
+$gl-status-info-icon-color-default: $gl-color-blue-500; // Used for the icon of an informational status item when static or the default state when linked.
+$gl-status-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational status item in the active state.
+$gl-status-info-text-color-focus: $gl-color-blue-800; // Used for the text of an informational status item in the focus state.
+$gl-status-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational status item in the hover state.
+$gl-status-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational status item when static or the default state when linked.
+$gl-status-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational status item in the hover state.
+$gl-status-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational status item in the active state.
+$gl-status-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational status item when static or the default state when linked.
+$gl-status-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral status item in the active state.
+$gl-status-neutral-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a neutral status item in the focus state.
+$gl-status-neutral-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a neutral status item in the hover state.
+$gl-status-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of a neutral status item when static or the default state when linked.
+$gl-status-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral status item in the active state.
+$gl-status-neutral-text-color-focus: $gl-color-neutral-800; // Used for the text of a neutral status item in the focus state.
+$gl-status-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral status item in the hover state.
+$gl-status-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral status item when static or the default state when linked.
+$gl-status-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral status item in the hover state.
+$gl-status-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral status item in the active state.
+$gl-status-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral status item when static or the default state when linked.
+$gl-status-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral status item in the active state.
+$gl-status-muted-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the focus state.
+$gl-status-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the hover state.
+$gl-status-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral status item in the active state.
+$gl-status-muted-text-color-focus: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the focus state.
+$gl-status-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the hover state.
+$gl-status-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral status item in the hover state.
+$gl-status-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral status item in the active state.
+$gl-status-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral status item when static or the default state when linked.
 $gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.
@@ -407,6 +484,7 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
+$gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -386,6 +386,7 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-icon-color-default: var(--gl-icon-color-default);
 $gl-icon-color-subtle: var(--gl-icon-color-subtle);
 $gl-icon-color-strong: var(--gl-icon-color-strong);
@@ -405,6 +406,83 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-status-muted-background-color-default: var(--gl-status-muted-background-color-default);
+$gl-status-muted-background-color-active: var(--gl-status-muted-background-color-active);
+$gl-status-muted-border-color-hover: var(--gl-status-muted-border-color-hover);
+$gl-status-muted-text-color-default: var(--gl-status-muted-text-color-default);
+$gl-status-muted-text-color-hover: var(--gl-status-muted-text-color-hover);
+$gl-status-muted-text-color-focus: var(--gl-status-muted-text-color-focus);
+$gl-status-muted-text-color-active: var(--gl-status-muted-text-color-active);
+$gl-status-muted-icon-color-default: var(--gl-status-muted-icon-color-default);
+$gl-status-muted-icon-color-hover: var(--gl-status-muted-icon-color-hover);
+$gl-status-muted-icon-color-focus: var(--gl-status-muted-icon-color-focus);
+$gl-status-muted-icon-color-active: var(--gl-status-muted-icon-color-active);
+$gl-status-neutral-background-color-default: var(--gl-status-neutral-background-color-default);
+$gl-status-neutral-background-color-active: var(--gl-status-neutral-background-color-active);
+$gl-status-neutral-border-color-hover: var(--gl-status-neutral-border-color-hover);
+$gl-status-neutral-text-color-default: var(--gl-status-neutral-text-color-default);
+$gl-status-neutral-text-color-hover: var(--gl-status-neutral-text-color-hover);
+$gl-status-neutral-text-color-focus: var(--gl-status-neutral-text-color-focus);
+$gl-status-neutral-text-color-active: var(--gl-status-neutral-text-color-active);
+$gl-status-neutral-icon-color-default: var(--gl-status-neutral-icon-color-default);
+$gl-status-neutral-icon-color-hover: var(--gl-status-neutral-icon-color-hover);
+$gl-status-neutral-icon-color-focus: var(--gl-status-neutral-icon-color-focus);
+$gl-status-neutral-icon-color-active: var(--gl-status-neutral-icon-color-active);
+$gl-status-info-background-color-default: var(--gl-status-info-background-color-default);
+$gl-status-info-background-color-active: var(--gl-status-info-background-color-active);
+$gl-status-info-border-color-hover: var(--gl-status-info-border-color-hover);
+$gl-status-info-text-color-default: var(--gl-status-info-text-color-default);
+$gl-status-info-text-color-hover: var(--gl-status-info-text-color-hover);
+$gl-status-info-text-color-focus: var(--gl-status-info-text-color-focus);
+$gl-status-info-text-color-active: var(--gl-status-info-text-color-active);
+$gl-status-info-icon-color-default: var(--gl-status-info-icon-color-default);
+$gl-status-info-icon-color-hover: var(--gl-status-info-icon-color-hover);
+$gl-status-info-icon-color-focus: var(--gl-status-info-icon-color-focus);
+$gl-status-info-icon-color-active: var(--gl-status-info-icon-color-active);
+$gl-status-success-background-color-default: var(--gl-status-success-background-color-default);
+$gl-status-success-background-color-active: var(--gl-status-success-background-color-active);
+$gl-status-success-border-color-hover: var(--gl-status-success-border-color-hover);
+$gl-status-success-text-color-default: var(--gl-status-success-text-color-default);
+$gl-status-success-text-color-hover: var(--gl-status-success-text-color-hover);
+$gl-status-success-text-color-focus: var(--gl-status-success-text-color-focus);
+$gl-status-success-text-color-active: var(--gl-status-success-text-color-active);
+$gl-status-success-icon-color-default: var(--gl-status-success-icon-color-default);
+$gl-status-success-icon-color-hover: var(--gl-status-success-icon-color-hover);
+$gl-status-success-icon-color-focus: var(--gl-status-success-icon-color-focus);
+$gl-status-success-icon-color-active: var(--gl-status-success-icon-color-active);
+$gl-status-warning-background-color-default: var(--gl-status-warning-background-color-default);
+$gl-status-warning-background-color-active: var(--gl-status-warning-background-color-active);
+$gl-status-warning-border-color-hover: var(--gl-status-warning-border-color-hover);
+$gl-status-warning-text-color-default: var(--gl-status-warning-text-color-default);
+$gl-status-warning-text-color-hover: var(--gl-status-warning-text-color-hover);
+$gl-status-warning-text-color-focus: var(--gl-status-warning-text-color-focus);
+$gl-status-warning-text-color-active: var(--gl-status-warning-text-color-active);
+$gl-status-warning-icon-color-default: var(--gl-status-warning-icon-color-default);
+$gl-status-warning-icon-color-hover: var(--gl-status-warning-icon-color-hover);
+$gl-status-warning-icon-color-focus: var(--gl-status-warning-icon-color-focus);
+$gl-status-warning-icon-color-active: var(--gl-status-warning-icon-color-active);
+$gl-status-danger-background-color-default: var(--gl-status-danger-background-color-default);
+$gl-status-danger-background-color-active: var(--gl-status-danger-background-color-active);
+$gl-status-danger-border-color-hover: var(--gl-status-danger-border-color-hover);
+$gl-status-danger-text-color-default: var(--gl-status-danger-text-color-default);
+$gl-status-danger-text-color-hover: var(--gl-status-danger-text-color-hover);
+$gl-status-danger-text-color-focus: var(--gl-status-danger-text-color-focus);
+$gl-status-danger-text-color-active: var(--gl-status-danger-text-color-active);
+$gl-status-danger-icon-color-default: var(--gl-status-danger-icon-color-default);
+$gl-status-danger-icon-color-hover: var(--gl-status-danger-icon-color-hover);
+$gl-status-danger-icon-color-focus: var(--gl-status-danger-icon-color-focus);
+$gl-status-danger-icon-color-active: var(--gl-status-danger-icon-color-active);
+$gl-status-brand-background-color-default: var(--gl-status-brand-background-color-default);
+$gl-status-brand-background-color-active: var(--gl-status-brand-background-color-active);
+$gl-status-brand-border-color-hover: var(--gl-status-brand-border-color-hover);
+$gl-status-brand-text-color-default: var(--gl-status-brand-text-color-default);
+$gl-status-brand-text-color-hover: var(--gl-status-brand-text-color-hover);
+$gl-status-brand-text-color-focus: var(--gl-status-brand-text-color-focus);
+$gl-status-brand-text-color-active: var(--gl-status-brand-text-color-active);
+$gl-status-brand-icon-color-default: var(--gl-status-brand-icon-color-default);
+$gl-status-brand-icon-color-hover: var(--gl-status-brand-icon-color-hover);
+$gl-status-brand-icon-color-focus: var(--gl-status-brand-icon-color-focus);
+$gl-status-brand-icon-color-active: var(--gl-status-brand-icon-color-active);
 $gl-text-primary: var(--gl-text-primary);
 $gl-text-secondary: var(--gl-text-secondary);
 $gl-text-tertiary: var(--gl-text-tertiary);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "84.0.0",
+  "version": "84.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/badge/badge.scss

@@ -92,93 +92,93 @@ $badge-min-width: 2.5 * $grid-size;
 
 @include gl-badge-variant(
   $variant: muted,
-  $color: $gray-600,
-  $icon-color: $gray-500,
-  $bg: $gray-50,
-  $hover-color: $gray-700,
-  $hover-icon-color: $gray-600,
-  $border-color: $gray-200,
-  $active-color: $gray-800,
-  $active-icon-color: $gray-700,
-  $active-bg: $gray-100
+  $color: var(--gl-status-muted-text-color-default),
+  $icon-color: var(--gl-status-muted-icon-color-default),
+  $bg: var(--gl-status-muted-background-color-default),
+  $hover-color: var(--gl-status-muted-text-color-hover),
+  $hover-icon-color: var(--gl-status-muted-icon-color-hover),
+  $border-color: var(--gl-status-muted-border-color-hover),
+  $active-color: var(--gl-status-muted-text-color-active),
+  $active-icon-color:var(--gl-status-muted-icon-color-active),
+  $active-bg: var(--gl-status-muted-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: neutral,
-  $color: $gray-700,
-  $icon-color: $gray-500,
-  $bg: $gray-100,
-  $hover-color: $gray-800,
-  $hover-icon-color: $gray-600,
-  $border-color: $gray-200,
-  $active-color: $gray-900,
-  $active-icon-color: $gray-700,
-  $active-bg: $gray-200
+  $color: var(--gl-status-neutral-text-color-default),
+  $icon-color: var(--gl-status-neutral-icon-color-default),
+  $bg: var(--gl-status-neutral-background-color-default),
+  $hover-color: var(--gl-status-neutral-text-color-hover),
+  $hover-icon-color: var(--gl-status-neutral-icon-color-hover),
+  $border-color: var(--gl-status-neutral-border-color-hover),
+  $active-color: var(--gl-status-neutral-text-color-active),
+  $active-icon-color:var(--gl-status-neutral-icon-color-active),
+  $active-bg: var(--gl-status-neutral-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: info,
-  $color: $blue-700,
-  $icon-color: $blue-500,
-  $bg: $blue-100,
-  $hover-color: $blue-800,
-  $hover-icon-color: $blue-600,
-  $border-color: $blue-200,
-  $active-color: $blue-900,
-  $active-icon-color: $blue-700,
-  $active-bg: $blue-200
+  $color: var(--gl-status-info-text-color-default),
+  $icon-color: var(--gl-status-info-icon-color-default),
+  $bg: var(--gl-status-info-background-color-default),
+  $hover-color: var(--gl-status-info-text-color-hover),
+  $hover-icon-color: var(--gl-status-info-icon-color-hover),
+  $border-color: var(--gl-status-info-border-color-hover),
+  $active-color: var(--gl-status-info-text-color-active),
+  $active-icon-color:var(--gl-status-info-icon-color-active),
+  $active-bg: var(--gl-status-info-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: success,
-  $color: $green-700,
-  $icon-color: $green-500,
-  $bg: $green-100,
-  $hover-color: $green-800,
-  $hover-icon-color: $green-600,
-  $border-color: $green-200,
-  $active-color: $green-900,
-  $active-icon-color: $green-700,
-  $active-bg: $green-200
+  $color: var(--gl-status-success-text-color-default),
+  $icon-color: var(--gl-status-success-icon-color-default),
+  $bg: var(--gl-status-success-background-color-default),
+  $hover-color: var(--gl-status-success-text-color-hover),
+  $hover-icon-color: var(--gl-status-success-icon-color-hover),
+  $border-color: var(--gl-status-success-border-color-hover),
+  $active-color: var(--gl-status-success-text-color-active),
+  $active-icon-color:var(--gl-status-success-icon-color-active),
+  $active-bg: var(--gl-status-success-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: warning,
-  $color: $orange-700,
-  $icon-color: $orange-500,
-  $bg: $orange-100,
-  $hover-color: $orange-800,
-  $hover-icon-color: $orange-600,
-  $border-color: $orange-200,
-  $active-color: $orange-900,
-  $active-icon-color: $orange-700,
-  $active-bg: $orange-200
+  $color: var(--gl-status-warning-text-color-default),
+  $icon-color: var(--gl-status-warning-icon-color-default),
+  $bg: var(--gl-status-warning-background-color-default),
+  $hover-color: var(--gl-status-warning-text-color-hover),
+  $hover-icon-color: var(--gl-status-warning-icon-color-hover),
+  $border-color: var(--gl-status-warning-border-color-hover),
+  $active-color: var(--gl-status-warning-text-color-active),
+  $active-icon-color:var(--gl-status-warning-icon-color-active),
+  $active-bg: var(--gl-status-warning-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: danger,
-  $color: $red-700,
-  $icon-color: $red-500,
-  $bg: $red-100,
-  $hover-color: $red-800,
-  $hover-icon-color: $red-600,
-  $border-color: $red-200,
-  $active-color: $red-900,
-  $active-icon-color: $red-700,
-  $active-bg: $red-200
+  $color: var(--gl-status-danger-text-color-default),
+  $icon-color: var(--gl-status-danger-icon-color-default),
+  $bg: var(--gl-status-danger-background-color-default),
+  $hover-color: var(--gl-status-danger-text-color-hover),
+  $hover-icon-color: var(--gl-status-danger-icon-color-hover),
+  $border-color: var(--gl-status-danger-border-color-hover),
+  $active-color: var(--gl-status-danger-text-color-active),
+  $active-icon-color:var(--gl-status-danger-icon-color-active),
+  $active-bg: var(--gl-status-danger-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: tier,
-  $color: $purple-700,
-  $icon-color: $purple-500,
-  $bg: $purple-100,
-  $hover-color: $purple-800,
-  $hover-icon-color: $purple-600,
-  $border-color: $purple-200,
-  $active-color: $purple-900,
-  $active-icon-color: $purple-700,
-  $active-bg: $purple-200
+  $color: var(--gl-status-brand-text-color-default),
+  $icon-color: var(--gl-status-brand-icon-color-default),
+  $bg: var(--gl-status-brand-background-color-default),
+  $hover-color: var(--gl-status-brand-text-color-hover),
+  $hover-icon-color: var(--gl-status-brand-icon-color-hover),
+  $border-color: var(--gl-status-brand-border-color-hover),
+  $active-color: var(--gl-status-brand-text-color-active),
+  $active-icon-color:var(--gl-status-brand-icon-color-active),
+  $active-bg: var(--gl-status-brand-background-color-active)
 );
 
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -22,13 +22,13 @@ $breadcrumb-max-width: $grid-size * 16;
   @include gl-flex-shrink-0;
 
   &:not(:last-child)::after {
-    @include gl-text-gray-200;
+    color: var(--gl-breadcrumb-separator-color);
     @include gl-px-3;
     content: '/';
   }
 
   > a {
-    @include gl-text-gray-700;
+    color: var(--gl-text-color-subtle);
 
     &:active,
     &:focus,
@@ -39,6 +39,6 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-item:last-child > a {
-  @include gl-text-gray-900;
+  color: var(--gl-text-color-default);
   @include gl-font-weight-bold;
 }

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

@@ -400,6 +400,83 @@
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */
   --gl-text-color-subtle: var(--gl-color-neutral-600); /* Used for supplemental text that doesn't need to be as prominent as other text. */
   --gl-text-color-default: var(--gl-color-neutral-800); /* Used for the default text color. */
+  --gl-status-brand-icon-color-active: var(--gl-color-purple-700); /* Used for the icon of a brand related status item in the active state. */
+  --gl-status-brand-icon-color-focus: var(--gl-color-purple-600); /* Used for the icon of a brand related status item in the focus state. */
+  --gl-status-brand-icon-color-hover: var(--gl-color-purple-600); /* 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-900); /* Used for the text of a brand related status item in the active state. */
+  --gl-status-brand-text-color-focus: var(--gl-color-purple-800); /* Used for the text of a brand related status item in the focus state. */
+  --gl-status-brand-text-color-hover: var(--gl-color-purple-800); /* Used for the text of a brand related status item in the hover state. */
+  --gl-status-brand-text-color-default: var(--gl-color-purple-700); /* 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-200); /* Used for the border of a brand related status item in the hover state. */
+  --gl-status-brand-background-color-active: var(--gl-color-purple-200); /* Used for the background of a brand related status item in the active state. */
+  --gl-status-brand-background-color-default: var(--gl-color-purple-100); /* 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-700); /* Used for the icon of a danger (critical) status item in the active state. */
+  --gl-status-danger-icon-color-focus: var(--gl-color-red-600); /* Used for the icon of a danger (critical) status item in the focus state. */
+  --gl-status-danger-icon-color-hover: var(--gl-color-red-600); /* Used for the icon of a danger (critical) status item in the hover state. */
+  --gl-status-danger-icon-color-default: var(--gl-color-red-500); /* 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-900); /* Used for the text of a danger (critical) status item in the active state. */
+  --gl-status-danger-text-color-focus: var(--gl-color-red-800); /* Used for the text of a danger (critical) status item in the focus state. */
+  --gl-status-danger-text-color-hover: var(--gl-color-red-800); /* Used for the text of a danger (critical) status item in the hover state. */
+  --gl-status-danger-text-color-default: var(--gl-color-red-700); /* 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-200); /* Used for the border of a danger (critical) status item in the hover state. */
+  --gl-status-danger-background-color-active: var(--gl-color-red-200); /* Used for the background of a danger (critical) status item in the active state. */
+  --gl-status-danger-background-color-default: var(--gl-color-red-100); /* 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-700); /* 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-600); /* 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-600); /* 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-500); /* 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-900); /* 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-800); /* 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-800); /* 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-700); /* 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-200); /* 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-200); /* 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-100); /* 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-700); /* Used for the icon of a success status item in the active state. */
+  --gl-status-success-icon-color-focus: var(--gl-color-green-600); /* Used for the icon of a success status item in the focus state. */
+  --gl-status-success-icon-color-hover: var(--gl-color-green-600); /* Used for the icon of a success status item in the hover state. */
+  --gl-status-success-icon-color-default: var(--gl-color-green-500); /* 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-900); /* Used for the text of a success status item in the active state. */
+  --gl-status-success-text-color-focus: var(--gl-color-green-800); /* Used for the text of a success status item in the focus state. */
+  --gl-status-success-text-color-hover: var(--gl-color-green-800); /* Used for the text of a success status item in the hover state. */
+  --gl-status-success-text-color-default: var(--gl-color-green-700); /* 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-200); /* Used for the border of a success status item in the hover state. */
+  --gl-status-success-background-color-active: var(--gl-color-green-200); /* Used for the background of a success status item in the active state. */
+  --gl-status-success-background-color-default: var(--gl-color-green-100); /* 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-700); /* Used for the icon of an informational status item in the active state. */
+  --gl-status-info-icon-color-focus: var(--gl-color-blue-600); /* Used for the icon of an informational status item in the focus state. */
+  --gl-status-info-icon-color-hover: var(--gl-color-blue-600); /* Used for the icon of an informational status item in the hover state. */
+  --gl-status-info-icon-color-default: var(--gl-color-blue-500); /* 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-900); /* Used for the text of an informational status item in the active state. */
+  --gl-status-info-text-color-focus: var(--gl-color-blue-800); /* Used for the text of an informational status item in the focus state. */
+  --gl-status-info-text-color-hover: var(--gl-color-blue-800); /* Used for the text of an informational status item in the hover state. */
+  --gl-status-info-text-color-default: var(--gl-color-blue-700); /* 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-200); /* Used for the border of an informational status item in the hover state. */
+  --gl-status-info-background-color-active: var(--gl-color-blue-200); /* Used for the background of an informational status item in the active state. */
+  --gl-status-info-background-color-default: var(--gl-color-blue-100); /* 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-700); /* Used for the icon of a neutral status item in the active state. */
+  --gl-status-neutral-icon-color-focus: var(--gl-color-neutral-600); /* Used for the icon of a neutral status item in the focus state. */
+  --gl-status-neutral-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a neutral status item in the hover state. */
+  --gl-status-neutral-icon-color-default: var(--gl-color-neutral-500); /* 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-900); /* Used for the text of a neutral status item in the active state. */
+  --gl-status-neutral-text-color-focus: var(--gl-color-neutral-800); /* Used for the text of a neutral status item in the focus state. */
+  --gl-status-neutral-text-color-hover: var(--gl-color-neutral-800); /* Used for the text of a neutral status item in the hover state. */
+  --gl-status-neutral-text-color-default: var(--gl-color-neutral-700); /* 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-200); /* Used for the border of a neutral status item in the hover state. */
+  --gl-status-neutral-background-color-active: var(--gl-color-neutral-200); /* Used for the background of a neutral status item in the active state. */
+  --gl-status-neutral-background-color-default: var(--gl-color-neutral-100); /* 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-700); /* Used for the icon of a subtle neutral status item in the active state. */
+  --gl-status-muted-icon-color-focus: var(--gl-color-neutral-600); /* Used for the icon of a subtle neutral status item in the focus state. */
+  --gl-status-muted-icon-color-hover: var(--gl-color-neutral-600); /* Used for the icon of a subtle neutral status item in the hover state. */
+  --gl-status-muted-icon-color-default: var(--gl-color-neutral-500); /* 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-800); /* Used for the text of a subtle neutral status item in the active state. */
+  --gl-status-muted-text-color-focus: var(--gl-color-neutral-700); /* Used for the text of a subtle neutral status item in the focus state. */
+  --gl-status-muted-text-color-hover: var(--gl-color-neutral-700); /* Used for the text of a subtle neutral status item in the hover state. */
+  --gl-status-muted-text-color-default: var(--gl-color-neutral-600); /* 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-200); /* Used for the border of a subtle neutral status item in the hover state. */
+  --gl-status-muted-background-color-active: var(--gl-color-neutral-100); /* Used for the background of a subtle neutral status item in the active state. */
+  --gl-status-muted-background-color-default: var(--gl-color-neutral-50); /* 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-600); /* Used for an icon associated with success or validity. */
   --gl-icon-color-danger: var(--gl-color-red-600); /* Used for an icon associated with an error or danger. */
   --gl-icon-color-warning: var(--gl-color-orange-600); /* Used for an icon associated with a warning. */
@@ -409,6 +486,7 @@
   --gl-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
   --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-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a border that has a little more definition, or is used in combination with a subtle background. */