@gitlab/ui 103.2.0 → 103.4.0

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

@@ -667,10 +667,10 @@ const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1';
 const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787';
 const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800';
-const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc';
-const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160';
-const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10';
-const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941';
+const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
+const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
+const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
+const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#f6806d';
 const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51';
 const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f';
 const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51';
@@ -921,19 +921,19 @@ const GL_LINE_HEIGHT_52 = '3.25rem';
 const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
 const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';
-const GL_STATUS_NEUTRAL_ICON_COLOR = '#89888d';
+const GL_STATUS_NEUTRAL_ICON_COLOR = '#a4a3a8';
 const GL_STATUS_INFO_BACKGROUND_COLOR = '#064787';
 const GL_STATUS_INFO_TEXT_COLOR = '#9dc7f1';
-const GL_STATUS_INFO_ICON_COLOR = '#428fdc';
+const GL_STATUS_INFO_ICON_COLOR = '#63a6e9';
 const GL_STATUS_SUCCESS_BACKGROUND_COLOR = '#0d532a';
 const GL_STATUS_SUCCESS_TEXT_COLOR = '#91d4a8';
-const GL_STATUS_SUCCESS_ICON_COLOR = '#2da160';
+const GL_STATUS_SUCCESS_ICON_COLOR = '#52b87a';
 const GL_STATUS_WARNING_BACKGROUND_COLOR = '#703800';
 const GL_STATUS_WARNING_TEXT_COLOR = '#e9be74';
-const GL_STATUS_WARNING_ICON_COLOR = '#c17d10';
+const GL_STATUS_WARNING_ICON_COLOR = '#d99530';
 const GL_STATUS_DANGER_BACKGROUND_COLOR = '#8d1300';
 const GL_STATUS_DANGER_TEXT_COLOR = '#fcb5aa';
-const GL_STATUS_DANGER_ICON_COLOR = '#ec5941';
+const GL_STATUS_DANGER_ICON_COLOR = '#f6806d';
 const GL_STATUS_BRAND_BACKGROUND_COLOR = '#2f2a6b';
 const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6';
 const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';

package/dist/tokens/css/tokens.dark.css

@@ -751,19 +751,19 @@
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
-  --gl-status-neutral-icon-color: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
+  --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-info-background-color: var(--gl-color-blue-800); /* Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
   --gl-status-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
-  --gl-status-info-icon-color: var(--gl-color-blue-400); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
+  --gl-status-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
   --gl-status-success-background-color: var(--gl-color-green-800); /* Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
   --gl-status-success-text-color: var(--gl-color-green-200); /* Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
-  --gl-status-success-icon-color: var(--gl-color-green-400); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
+  --gl-status-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
   --gl-status-warning-background-color: var(--gl-color-orange-800); /* Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
   --gl-status-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
-  --gl-status-warning-icon-color: var(--gl-color-orange-400); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
+  --gl-status-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
   --gl-status-danger-background-color: var(--gl-color-red-800); /* Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
   --gl-status-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
-  --gl-status-danger-icon-color: var(--gl-color-red-400); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
+  --gl-status-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
   --gl-status-brand-background-color: var(--gl-color-purple-900); /* Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
   --gl-status-brand-text-color: var(--gl-color-purple-300); /* Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
   --gl-status-brand-icon-color: var(--gl-color-purple-500); /* Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */

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

@@ -667,10 +667,10 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#f6806d';
 export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51';
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f';
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51';
@@ -921,19 +921,19 @@ export const GL_LINE_HEIGHT_52 = '3.25rem';
 export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
 export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';
-export const GL_STATUS_NEUTRAL_ICON_COLOR = '#89888d';
+export const GL_STATUS_NEUTRAL_ICON_COLOR = '#a4a3a8';
 export const GL_STATUS_INFO_BACKGROUND_COLOR = '#064787';
 export const GL_STATUS_INFO_TEXT_COLOR = '#9dc7f1';
-export const GL_STATUS_INFO_ICON_COLOR = '#428fdc';
+export const GL_STATUS_INFO_ICON_COLOR = '#63a6e9';
 export const GL_STATUS_SUCCESS_BACKGROUND_COLOR = '#0d532a';
 export const GL_STATUS_SUCCESS_TEXT_COLOR = '#91d4a8';
-export const GL_STATUS_SUCCESS_ICON_COLOR = '#2da160';
+export const GL_STATUS_SUCCESS_ICON_COLOR = '#52b87a';
 export const GL_STATUS_WARNING_BACKGROUND_COLOR = '#703800';
 export const GL_STATUS_WARNING_TEXT_COLOR = '#e9be74';
-export const GL_STATUS_WARNING_ICON_COLOR = '#c17d10';
+export const GL_STATUS_WARNING_ICON_COLOR = '#d99530';
 export const GL_STATUS_DANGER_BACKGROUND_COLOR = '#8d1300';
 export const GL_STATUS_DANGER_TEXT_COLOR = '#fcb5aa';
-export const GL_STATUS_DANGER_ICON_COLOR = '#ec5941';
+export const GL_STATUS_DANGER_ICON_COLOR = '#f6806d';
 export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#2f2a6b';
 export const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6';
 export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';

package/dist/tokens/json/tokens.dark.json

@@ -14818,7 +14818,7 @@
     "indicator": {
       "color": {
         "default": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
           "$type": "color",
           "$description": "Used for the indicator color for the primary progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14838,7 +14838,7 @@
           ]
         },
         "success": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
           "$type": "color",
           "$description": "Used for the indicator color for the success progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14858,7 +14858,7 @@
           ]
         },
         "warning": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
           "$type": "color",
           "$description": "Used for the indicator color for the warning progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14878,7 +14878,7 @@
           ]
         },
         "danger": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
           "$type": "color",
           "$description": "Used for the indicator color for the danger progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -21163,7 +21163,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#89888d",
+          "$value": "#a4a3a8",
           "$type": "color",
           "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21171,7 +21171,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.500}",
-              "dark": "{color.neutral.400}"
+              "dark": "{color.neutral.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -21240,7 +21240,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
           "$type": "color",
           "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21248,7 +21248,7 @@
           "original": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -21317,7 +21317,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
           "$type": "color",
           "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21325,7 +21325,7 @@
           "original": {
             "$value": {
               "default": "{color.green.500}",
-              "dark": "{color.green.400}"
+              "dark": "{color.green.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -21394,7 +21394,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
           "$type": "color",
           "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21402,7 +21402,7 @@
           "original": {
             "$value": {
               "default": "{color.orange.500}",
-              "dark": "{color.orange.400}"
+              "dark": "{color.orange.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -21471,7 +21471,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
           "$type": "color",
           "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21479,7 +21479,7 @@
           "original": {
             "$value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."

package/dist/tokens/json/tokens.json

@@ -21171,7 +21171,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.500}",
-              "dark": "{color.neutral.400}"
+              "dark": "{color.neutral.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -21248,7 +21248,7 @@
           "original": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -21325,7 +21325,7 @@
           "original": {
             "$value": {
               "default": "{color.green.500}",
-              "dark": "{color.green.400}"
+              "dark": "{color.green.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -21402,7 +21402,7 @@
           "original": {
             "$value": {
               "default": "{color.orange.500}",
-              "dark": "{color.orange.400}"
+              "dark": "{color.orange.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -21479,7 +21479,7 @@
           "original": {
             "$value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."

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

@@ -749,19 +749,19 @@ $gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
-$gl-status-neutral-icon-color: $gl-color-neutral-400; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
+$gl-status-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-info-background-color: $gl-color-blue-800; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
 $gl-status-info-text-color: $gl-color-blue-200; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
-$gl-status-info-icon-color: $gl-color-blue-400; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
+$gl-status-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
 $gl-status-success-background-color: $gl-color-green-800; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
 $gl-status-success-text-color: $gl-color-green-200; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
-$gl-status-success-icon-color: $gl-color-green-400; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
+$gl-status-success-icon-color: $gl-color-green-300; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
 $gl-status-warning-background-color: $gl-color-orange-800; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
 $gl-status-warning-text-color: $gl-color-orange-200; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
-$gl-status-warning-icon-color: $gl-color-orange-400; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
+$gl-status-warning-icon-color: $gl-color-orange-300; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
 $gl-status-danger-background-color: $gl-color-red-800; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
 $gl-status-danger-text-color: $gl-color-red-200; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
-$gl-status-danger-icon-color: $gl-color-red-400; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
+$gl-status-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
 $gl-status-brand-background-color: $gl-color-purple-900; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
 $gl-status-brand-text-color: $gl-color-purple-300; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
 $gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.

package/package.json

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

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

@@ -86,6 +86,7 @@ $badge-min-width: $gl-spacing-scale-3;
   justify-content: center;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
+  @include gl-prefers-reduced-motion-transition;
   transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
               background-color $gl-transition-duration-medium $gl-easing-out-cubic,
               border-color $gl-transition-duration-medium $gl-easing-out-cubic,
@@ -95,10 +96,6 @@ $badge-min-width: $gl-spacing-scale-3;
     max-width: 100%;
   }
 
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-  }
-
   @media (forced-colors: active) {
     border: 1px solid;
   }
@@ -120,7 +117,7 @@ $badge-min-width: $gl-spacing-scale-3;
 a.gl-badge.disabled {
   cursor: not-allowed;
 }
-  
+
 
 /* Variants */
 

package/src/components/base/drawer/drawer.scss

@@ -2,12 +2,12 @@ $gl-drawer-width: 400px;
 $gl-sidebar-width: 290px;
 $gl-drawer-scrim-gradient: linear-gradient(
   to bottom,
-  $transparent-rgba,
-  var(--drawer-variant-bg-color)
+  var(--gl-color-alpha-0),
+  var(--gl-background-color-overlap)
 );
 
 .gl-drawer {
-  background-color: var(--drawer-variant-bg-color);
+  @apply gl-bg-overlap;
   right: 0;
   @apply gl-transition-all;
   position: fixed;
@@ -21,14 +21,13 @@ $gl-drawer-scrim-gradient: linear-gradient(
   @apply gl-flex-col;
 
   .gl-drawer-header-sticky {
-    background-color: var(--drawer-variant-bg-color);
+    @apply gl-bg-overlap;
     top: 0;
     position: sticky;
   }
 }
 
 .gl-drawer-default {
-  --drawer-variant-bg-color: var(--gl-background-color-default);
   @include media-breakpoint-up(md) {
     width: $gl-drawer-width;
   }
@@ -40,7 +39,6 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-sidebar {
-  --drawer-variant-bg-color: var(--gl-background-color-subtle);
   @include media-breakpoint-up(md) {
     width: $gl-sidebar-width;
   }
@@ -60,8 +58,8 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-footer {
-  @apply gl-border-t-solid gl-border-t-1;
-  border-top-color: var(--gl-border-color-default);
+  @apply gl-bg-overlap;
+  @apply gl-border-t;
   @apply gl-p-5;
 }
 
@@ -80,14 +78,12 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-footer-sticky {
-  background-color: var(--drawer-variant-bg-color);
   bottom: 0;
   position: sticky;
 }
 
 .gl-drawer-header {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
+  @apply gl-border-b;
 }
 
 .gl-drawer-title {
@@ -130,8 +126,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-body > * {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
+  @apply gl-border-b;
 
   &:last-child {
     @apply gl-border-none;

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

@@ -751,19 +751,19 @@
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
-  --gl-status-neutral-icon-color: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
+  --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-info-background-color: var(--gl-color-blue-800); /* Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
   --gl-status-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
-  --gl-status-info-icon-color: var(--gl-color-blue-400); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
+  --gl-status-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
   --gl-status-success-background-color: var(--gl-color-green-800); /* Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
   --gl-status-success-text-color: var(--gl-color-green-200); /* Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
-  --gl-status-success-icon-color: var(--gl-color-green-400); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
+  --gl-status-success-icon-color: var(--gl-color-green-300); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
   --gl-status-warning-background-color: var(--gl-color-orange-800); /* Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
   --gl-status-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
-  --gl-status-warning-icon-color: var(--gl-color-orange-400); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
+  --gl-status-warning-icon-color: var(--gl-color-orange-300); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
   --gl-status-danger-background-color: var(--gl-color-red-800); /* Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
   --gl-status-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
-  --gl-status-danger-icon-color: var(--gl-color-red-400); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
+  --gl-status-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
   --gl-status-brand-background-color: var(--gl-color-purple-900); /* Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
   --gl-status-brand-text-color: var(--gl-color-purple-300); /* Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
   --gl-status-brand-icon-color: var(--gl-color-purple-500); /* Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */

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

@@ -667,10 +667,10 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1';
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787';
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10';
-export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#f6806d';
 export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51';
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f';
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51';
@@ -921,19 +921,19 @@ export const GL_LINE_HEIGHT_52 = '3.25rem';
 export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
 export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';
-export const GL_STATUS_NEUTRAL_ICON_COLOR = '#89888d';
+export const GL_STATUS_NEUTRAL_ICON_COLOR = '#a4a3a8';
 export const GL_STATUS_INFO_BACKGROUND_COLOR = '#064787';
 export const GL_STATUS_INFO_TEXT_COLOR = '#9dc7f1';
-export const GL_STATUS_INFO_ICON_COLOR = '#428fdc';
+export const GL_STATUS_INFO_ICON_COLOR = '#63a6e9';
 export const GL_STATUS_SUCCESS_BACKGROUND_COLOR = '#0d532a';
 export const GL_STATUS_SUCCESS_TEXT_COLOR = '#91d4a8';
-export const GL_STATUS_SUCCESS_ICON_COLOR = '#2da160';
+export const GL_STATUS_SUCCESS_ICON_COLOR = '#52b87a';
 export const GL_STATUS_WARNING_BACKGROUND_COLOR = '#703800';
 export const GL_STATUS_WARNING_TEXT_COLOR = '#e9be74';
-export const GL_STATUS_WARNING_ICON_COLOR = '#c17d10';
+export const GL_STATUS_WARNING_ICON_COLOR = '#d99530';
 export const GL_STATUS_DANGER_BACKGROUND_COLOR = '#8d1300';
 export const GL_STATUS_DANGER_TEXT_COLOR = '#fcb5aa';
-export const GL_STATUS_DANGER_ICON_COLOR = '#ec5941';
+export const GL_STATUS_DANGER_ICON_COLOR = '#f6806d';
 export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#2f2a6b';
 export const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6';
 export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf';

package/src/tokens/build/json/tokens.dark.json

@@ -14818,7 +14818,7 @@
     "indicator": {
       "color": {
         "default": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
           "$type": "color",
           "$description": "Used for the indicator color for the primary progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14838,7 +14838,7 @@
           ]
         },
         "success": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
           "$type": "color",
           "$description": "Used for the indicator color for the success progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14858,7 +14858,7 @@
           ]
         },
         "warning": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
           "$type": "color",
           "$description": "Used for the indicator color for the warning progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -14878,7 +14878,7 @@
           ]
         },
         "danger": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
           "$type": "color",
           "$description": "Used for the indicator color for the danger progress-bar variant.",
           "filePath": "src/tokens/contextual/progress-bar.tokens.json",
@@ -21163,7 +21163,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#89888d",
+          "$value": "#a4a3a8",
           "$type": "color",
           "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21171,7 +21171,7 @@
           "original": {
             "$value": {
               "default": "{color.neutral.500}",
-              "dark": "{color.neutral.400}"
+              "dark": "{color.neutral.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state."
@@ -21240,7 +21240,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#428fdc",
+          "$value": "#63a6e9",
           "$type": "color",
           "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21248,7 +21248,7 @@
           "original": {
             "$value": {
               "default": "{color.blue.500}",
-              "dark": "{color.blue.400}"
+              "dark": "{color.blue.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress."
@@ -21317,7 +21317,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#2da160",
+          "$value": "#52b87a",
           "$type": "color",
           "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21325,7 +21325,7 @@
           "original": {
             "$value": {
               "default": "{color.green.500}",
-              "dark": "{color.green.400}"
+              "dark": "{color.green.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation."
@@ -21394,7 +21394,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#c17d10",
+          "$value": "#d99530",
           "$type": "color",
           "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21402,7 +21402,7 @@
           "original": {
             "$value": {
               "default": "{color.orange.500}",
-              "dark": "{color.orange.400}"
+              "dark": "{color.orange.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item."
@@ -21471,7 +21471,7 @@
       },
       "icon": {
         "color": {
-          "$value": "#ec5941",
+          "$value": "#f6806d",
           "$type": "color",
           "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
           "filePath": "src/tokens/status.tokens.json",
@@ -21479,7 +21479,7 @@
           "original": {
             "$value": {
               "default": "{color.red.500}",
-              "dark": "{color.red.400}"
+              "dark": "{color.red.300}"
             },
             "$type": "color",
             "$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition."