@gitlab/ui 87.6.1 → 87.8.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -284,6 +284,83 @@ $gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-c
 $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
 $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
 $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
+$gl-badge-muted-background-color-default: var(--gl-badge-muted-background-color-default);
+$gl-badge-muted-background-color-active: var(--gl-badge-muted-background-color-active);
+$gl-badge-muted-border-color-hover: var(--gl-badge-muted-border-color-hover);
+$gl-badge-muted-text-color-default: var(--gl-badge-muted-text-color-default);
+$gl-badge-muted-text-color-hover: var(--gl-badge-muted-text-color-hover);
+$gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-focus);
+$gl-badge-muted-text-color-active: var(--gl-badge-muted-text-color-active);
+$gl-badge-muted-icon-color-default: var(--gl-badge-muted-icon-color-default);
+$gl-badge-muted-icon-color-hover: var(--gl-badge-muted-icon-color-hover);
+$gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-focus);
+$gl-badge-muted-icon-color-active: var(--gl-badge-muted-icon-color-active);
+$gl-badge-neutral-background-color-default: var(--gl-badge-neutral-background-color-default);
+$gl-badge-neutral-background-color-active: var(--gl-badge-neutral-background-color-active);
+$gl-badge-neutral-border-color-hover: var(--gl-badge-neutral-border-color-hover);
+$gl-badge-neutral-text-color-default: var(--gl-badge-neutral-text-color-default);
+$gl-badge-neutral-text-color-hover: var(--gl-badge-neutral-text-color-hover);
+$gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-focus);
+$gl-badge-neutral-text-color-active: var(--gl-badge-neutral-text-color-active);
+$gl-badge-neutral-icon-color-default: var(--gl-badge-neutral-icon-color-default);
+$gl-badge-neutral-icon-color-hover: var(--gl-badge-neutral-icon-color-hover);
+$gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-focus);
+$gl-badge-neutral-icon-color-active: var(--gl-badge-neutral-icon-color-active);
+$gl-badge-info-background-color-default: var(--gl-badge-info-background-color-default);
+$gl-badge-info-background-color-active: var(--gl-badge-info-background-color-active);
+$gl-badge-info-border-color-hover: var(--gl-badge-info-border-color-hover);
+$gl-badge-info-text-color-default: var(--gl-badge-info-text-color-default);
+$gl-badge-info-text-color-hover: var(--gl-badge-info-text-color-hover);
+$gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-focus);
+$gl-badge-info-text-color-active: var(--gl-badge-info-text-color-active);
+$gl-badge-info-icon-color-default: var(--gl-badge-info-icon-color-default);
+$gl-badge-info-icon-color-hover: var(--gl-badge-info-icon-color-hover);
+$gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-focus);
+$gl-badge-info-icon-color-active: var(--gl-badge-info-icon-color-active);
+$gl-badge-success-background-color-default: var(--gl-badge-success-background-color-default);
+$gl-badge-success-background-color-active: var(--gl-badge-success-background-color-active);
+$gl-badge-success-border-color-hover: var(--gl-badge-success-border-color-hover);
+$gl-badge-success-text-color-default: var(--gl-badge-success-text-color-default);
+$gl-badge-success-text-color-hover: var(--gl-badge-success-text-color-hover);
+$gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-focus);
+$gl-badge-success-text-color-active: var(--gl-badge-success-text-color-active);
+$gl-badge-success-icon-color-default: var(--gl-badge-success-icon-color-default);
+$gl-badge-success-icon-color-hover: var(--gl-badge-success-icon-color-hover);
+$gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-focus);
+$gl-badge-success-icon-color-active: var(--gl-badge-success-icon-color-active);
+$gl-badge-warning-background-color-default: var(--gl-badge-warning-background-color-default);
+$gl-badge-warning-background-color-active: var(--gl-badge-warning-background-color-active);
+$gl-badge-warning-border-color-hover: var(--gl-badge-warning-border-color-hover);
+$gl-badge-warning-text-color-default: var(--gl-badge-warning-text-color-default);
+$gl-badge-warning-text-color-hover: var(--gl-badge-warning-text-color-hover);
+$gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-focus);
+$gl-badge-warning-text-color-active: var(--gl-badge-warning-text-color-active);
+$gl-badge-warning-icon-color-default: var(--gl-badge-warning-icon-color-default);
+$gl-badge-warning-icon-color-hover: var(--gl-badge-warning-icon-color-hover);
+$gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-focus);
+$gl-badge-warning-icon-color-active: var(--gl-badge-warning-icon-color-active);
+$gl-badge-danger-background-color-default: var(--gl-badge-danger-background-color-default);
+$gl-badge-danger-background-color-active: var(--gl-badge-danger-background-color-active);
+$gl-badge-danger-border-color-hover: var(--gl-badge-danger-border-color-hover);
+$gl-badge-danger-text-color-default: var(--gl-badge-danger-text-color-default);
+$gl-badge-danger-text-color-hover: var(--gl-badge-danger-text-color-hover);
+$gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-focus);
+$gl-badge-danger-text-color-active: var(--gl-badge-danger-text-color-active);
+$gl-badge-danger-icon-color-default: var(--gl-badge-danger-icon-color-default);
+$gl-badge-danger-icon-color-hover: var(--gl-badge-danger-icon-color-hover);
+$gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-focus);
+$gl-badge-danger-icon-color-active: var(--gl-badge-danger-icon-color-active);
+$gl-badge-tier-background-color-default: var(--gl-badge-tier-background-color-default);
+$gl-badge-tier-background-color-active: var(--gl-badge-tier-background-color-active);
+$gl-badge-tier-border-color-hover: var(--gl-badge-tier-border-color-hover);
+$gl-badge-tier-text-color-default: var(--gl-badge-tier-text-color-default);
+$gl-badge-tier-text-color-hover: var(--gl-badge-tier-text-color-hover);
+$gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-focus);
+$gl-badge-tier-text-color-active: var(--gl-badge-tier-text-color-active);
+$gl-badge-tier-icon-color-default: var(--gl-badge-tier-icon-color-default);
+$gl-badge-tier-icon-color-hover: var(--gl-badge-tier-icon-color-hover);
+$gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-focus);
+$gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
@@ -532,83 +609,24 @@ $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-shadow-color-default: var(--gl-shadow-color-default);
-$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-status-neutral-background-color: var(--gl-status-neutral-background-color);
+$gl-status-neutral-text-color: var(--gl-status-neutral-text-color);
+$gl-status-neutral-icon-color: var(--gl-status-neutral-icon-color);
+$gl-status-info-background-color: var(--gl-status-info-background-color);
+$gl-status-info-text-color: var(--gl-status-info-text-color);
+$gl-status-info-icon-color: var(--gl-status-info-icon-color);
+$gl-status-success-background-color: var(--gl-status-success-background-color);
+$gl-status-success-text-color: var(--gl-status-success-text-color);
+$gl-status-success-icon-color: var(--gl-status-success-icon-color);
+$gl-status-warning-background-color: var(--gl-status-warning-background-color);
+$gl-status-warning-text-color: var(--gl-status-warning-text-color);
+$gl-status-warning-icon-color: var(--gl-status-warning-icon-color);
+$gl-status-danger-background-color: var(--gl-status-danger-background-color);
+$gl-status-danger-text-color: var(--gl-status-danger-text-color);
+$gl-status-danger-icon-color: var(--gl-status-danger-icon-color);
+$gl-status-brand-background-color: var(--gl-status-brand-background-color);
+$gl-status-brand-text-color: var(--gl-status-brand-text-color);
+$gl-status-brand-icon-color: var(--gl-status-brand-icon-color);
 $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": "87.6.1",
+  "version": "87.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,8 +113,8 @@
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.110.0",
+    "@gitlab/stylelint-config": "6.2.1",
+    "@gitlab/svgs": "3.112.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -196,7 +196,7 @@
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^3.8.0",
-    "stylelint": "15.10.2",
+    "stylelint": "16.8.1",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.4",
     "vue": "2.7.16",

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -52,8 +52,8 @@
   @include gl-px-2;
   @include gl-line-height-normal;
   @include gl-rounded-pill;
-  background-color: var(--gl-status-neutral-background-color-default);
-  color: var(--gl-status-neutral-text-color-default);
+  background-color: var(--gl-status-neutral-background-color);
+  color: var(--gl-status-neutral-text-color);
   height: var(--avatar-size);
   min-width: var(--avatar-size);
 

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

@@ -116,93 +116,93 @@ $badge-min-width: $gl-spacing-scale-3;
 
 @include gl-badge-variant(
   $variant: muted,
-  $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)
+  $color: var(--gl-badge-muted-text-color-default),
+  $icon-color: var(--gl-badge-muted-icon-color-default),
+  $bg: var(--gl-badge-muted-background-color-default),
+  $hover-color: var(--gl-badge-muted-text-color-hover),
+  $hover-icon-color: var(--gl-badge-muted-icon-color-hover),
+  $border-color: var(--gl-badge-muted-border-color-hover),
+  $active-color: var(--gl-badge-muted-text-color-active),
+  $active-icon-color:var(--gl-badge-muted-icon-color-active),
+  $active-bg: var(--gl-badge-muted-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: neutral,
-  $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)
+  $color: var(--gl-badge-neutral-text-color-default),
+  $icon-color: var(--gl-badge-neutral-icon-color-default),
+  $bg: var(--gl-badge-neutral-background-color-default),
+  $hover-color: var(--gl-badge-neutral-text-color-hover),
+  $hover-icon-color: var(--gl-badge-neutral-icon-color-hover),
+  $border-color: var(--gl-badge-neutral-border-color-hover),
+  $active-color: var(--gl-badge-neutral-text-color-active),
+  $active-icon-color:var(--gl-badge-neutral-icon-color-active),
+  $active-bg: var(--gl-badge-neutral-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: info,
-  $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)
+  $color: var(--gl-badge-info-text-color-default),
+  $icon-color: var(--gl-badge-info-icon-color-default),
+  $bg: var(--gl-badge-info-background-color-default),
+  $hover-color: var(--gl-badge-info-text-color-hover),
+  $hover-icon-color: var(--gl-badge-info-icon-color-hover),
+  $border-color: var(--gl-badge-info-border-color-hover),
+  $active-color: var(--gl-badge-info-text-color-active),
+  $active-icon-color:var(--gl-badge-info-icon-color-active),
+  $active-bg: var(--gl-badge-info-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: success,
-  $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)
+  $color: var(--gl-badge-success-text-color-default),
+  $icon-color: var(--gl-badge-success-icon-color-default),
+  $bg: var(--gl-badge-success-background-color-default),
+  $hover-color: var(--gl-badge-success-text-color-hover),
+  $hover-icon-color: var(--gl-badge-success-icon-color-hover),
+  $border-color: var(--gl-badge-success-border-color-hover),
+  $active-color: var(--gl-badge-success-text-color-active),
+  $active-icon-color:var(--gl-badge-success-icon-color-active),
+  $active-bg: var(--gl-badge-success-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: warning,
-  $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)
+  $color: var(--gl-badge-warning-text-color-default),
+  $icon-color: var(--gl-badge-warning-icon-color-default),
+  $bg: var(--gl-badge-warning-background-color-default),
+  $hover-color: var(--gl-badge-warning-text-color-hover),
+  $hover-icon-color: var(--gl-badge-warning-icon-color-hover),
+  $border-color: var(--gl-badge-warning-border-color-hover),
+  $active-color: var(--gl-badge-warning-text-color-active),
+  $active-icon-color:var(--gl-badge-warning-icon-color-active),
+  $active-bg: var(--gl-badge-warning-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: danger,
-  $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)
+  $color: var(--gl-badge-danger-text-color-default),
+  $icon-color: var(--gl-badge-danger-icon-color-default),
+  $bg: var(--gl-badge-danger-background-color-default),
+  $hover-color: var(--gl-badge-danger-text-color-hover),
+  $hover-icon-color: var(--gl-badge-danger-icon-color-hover),
+  $border-color: var(--gl-badge-danger-border-color-hover),
+  $active-color: var(--gl-badge-danger-text-color-active),
+  $active-icon-color:var(--gl-badge-danger-icon-color-active),
+  $active-bg: var(--gl-badge-danger-background-color-active)
 );
 
 @include gl-badge-variant(
   $variant: tier,
-  $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)
+  $color: var(--gl-badge-tier-text-color-default),
+  $icon-color: var(--gl-badge-tier-icon-color-default),
+  $bg: var(--gl-badge-tier-background-color-default),
+  $hover-color: var(--gl-badge-tier-text-color-hover),
+  $hover-icon-color: var(--gl-badge-tier-icon-color-hover),
+  $border-color: var(--gl-badge-tier-border-color-hover),
+  $active-color: var(--gl-badge-tier-text-color-active),
+  $active-icon-color:var(--gl-badge-tier-icon-color-active),
+  $active-bg: var(--gl-badge-tier-background-color-active)
 );
 
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -3,6 +3,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -235,7 +236,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -4,6 +4,7 @@ import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
+import { glDropdownConfig } from '../../../../config';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
@@ -356,7 +357,9 @@ export default {
     improvedHideHeuristics: {
       type: Boolean,
       required: false,
-      default: false,
+      default() {
+        return Boolean(glDropdownConfig.useImprovedHideHeuristics);
+      },
     },
   },
   data() {

package/src/config.js

@@ -39,6 +39,8 @@ try {
 
 export const i18n = translationKeys;
 
+export const glDropdownConfig = {};
+
 let configured = false;
 
 /**
@@ -47,9 +49,9 @@ let configured = false;
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
- * @property {boolean} disableTranslations Whether translation capabilities should be disabled. Suppresses the warning about missing translations.
+ * @property {boolean} [useImprovedHideHeuristics] Temporary flag to enable improved hide heuristics for dropdowns.
  */
-const setConfigs = ({ translations } = {}) => {
+const setConfigs = ({ translations, useImprovedHideHeuristics } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -87,6 +89,23 @@ const setConfigs = ({ translations } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the improved hide heuristics feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `useImprovedHideHeuristics` is set to a boolean value
+  // to indicate whether the improved hide heuristics should be used.
+
+  // Future Plan:
+  // Once the improved hide heuristics feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof useImprovedHideHeuristics === 'boolean') {
+    Object.assign(glDropdownConfig, {
+      useImprovedHideHeuristics,
+    });
+  }
 };
 
 export default setConfigs;