@gitlab/ui 137.1.2 → 137.2.0

package/dist/utils/constants.js

@@ -337,23 +337,23 @@ const themes = [{
   value: 'default',
   title: 'Default'
 }, {
-  class: 'tint-neutral-indigo',
+  class: 'ui-indigo',
   value: 'indigo',
   title: 'Indigo'
 }, {
-  class: 'tint-neutral-blue',
+  class: 'ui-blue',
   value: 'blue',
   title: 'Blue'
 }, {
-  class: 'tint-neutral-green',
+  class: 'ui-green',
   value: 'green',
   title: 'Green'
 }, {
-  class: 'tint-neutral-red',
+  class: 'ui-red',
   value: 'red',
   title: 'Red'
 }, {
-  class: 'tint-neutral-gray',
+  class: 'ui-gray',
   value: 'gray',
   title: 'Gray'
 }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.1.2",
+  "version": "137.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,7 +93,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.3.6",
-    "postcss": "8.5.26",
+    "postcss": "8.5.28",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -137,7 +137,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.18.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.5.4",
+    "autoprefixer": "10.5.5",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "15.21.1",
@@ -158,7 +158,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.62.1",
     "playwright-core": "^1.62.1",
-    "postcss": "8.5.26",
+    "postcss": "8.5.28",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/base/alert/alert.scss

@@ -7,28 +7,11 @@
  */
 // stylelint-disable length-zero-no-unit
 $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
-$gl-alert-top-border-size: 2px;
-
-@mixin gl-alert-variant(
-  $variant,
-  $background-color,
-  $title-color,
-  $border-top-color,
-  $border-bottom-color,
-  $icon-color
-) {
+
+@mixin gl-alert-variant($variant, $background-color, $title-color, $border-color, $icon-color) {
   .gl-alert-#{$variant} {
     background-color: $background-color;
-    border-bottom: 1px solid $border-bottom-color;
-
-    &::before {
-      background: linear-gradient(
-        to right,
-        transparent 0%,
-        $border-top-color 50%,
-        transparent 100%
-      );
-    }
+    border-color: $border-color;
 
     .gl-alert-title {
       color: $title-color;
@@ -48,20 +31,7 @@ $gl-alert-top-border-size: 2px;
   border-radius: var(--gl-alert-border-radius);
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   position: relative;
-
-  @media (forced-colors: active) {
-    border: 1px solid transparent;
-  }
-
-  &::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: $gl-alert-top-border-size;
-    position: absolute;
-    top: -1px; // To accumilate for the border width
-    left: 0;
-  }
+  border: 1px solid;
 
   &-not-dismissible {
     padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
@@ -83,14 +53,14 @@ $gl-alert-top-border-size: 2px;
 
 .gl-alert-icon-container {
   position: absolute;
-  top: $gl-spacing-scale-5;
+  top: #{$gl-spacing-scale-4 + $gl-spacing-scale-1};
   left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   @apply gl-flex;
   @apply gl-items-center;
-  height: $gl-line-height-20;
+  height: $gl-line-height-24;
 
   .gl-alert-has-title & {
-    top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
+    top: $gl-spacing-scale-4;
   }
 }
 
@@ -119,7 +89,7 @@ $gl-alert-top-border-size: 2px;
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
+  top: $gl-spacing-scale-4;
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 
   .gl-alert-has-title & {
@@ -133,8 +103,7 @@ $gl-alert-top-border-size: 2px;
   $variant: danger,
   $background-color: var(--gl-alert-danger-background-color),
   $title-color: var(--gl-alert-danger-title-color),
-  $border-top-color: var(--gl-alert-danger-border-top-color),
-  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
+  $border-color: var(--gl-alert-danger-border-color),
   $icon-color: var(--gl-feedback-danger-icon-color)
 );
 
@@ -142,8 +111,7 @@ $gl-alert-top-border-size: 2px;
   $variant: warning,
   $background-color: var(--gl-alert-warning-background-color),
   $title-color: var(--gl-alert-warning-title-color),
-  $border-top-color: var(--gl-alert-warning-border-top-color),
-  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
+  $border-color: var(--gl-alert-warning-border-color),
   $icon-color: var(--gl-feedback-warning-icon-color)
 );
 
@@ -151,8 +119,7 @@ $gl-alert-top-border-size: 2px;
   $variant: tip,
   $background-color: var(--gl-alert-neutral-background-color),
   $title-color: var(--gl-alert-neutral-title-color),
-  $border-top-color: var(--gl-alert-neutral-border-top-color),
-  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
+  $border-color: var(--gl-alert-neutral-border-color),
   $icon-color: var(--gl-feedback-neutral-icon-color)
 );
 
@@ -160,8 +127,7 @@ $gl-alert-top-border-size: 2px;
   $variant: info,
   $background-color: var(--gl-alert-info-background-color),
   $title-color: var(--gl-alert-info-title-color),
-  $border-top-color: var(--gl-alert-info-border-top-color),
-  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
+  $border-color: var(--gl-alert-info-border-color),
   $icon-color: var(--gl-feedback-info-icon-color)
 );
 
@@ -169,7 +135,6 @@ $gl-alert-top-border-size: 2px;
   $variant: success,
   $background-color: var(--gl-alert-success-background-color),
   $title-color: var(--gl-alert-success-title-color),
-  $border-top-color: var(--gl-alert-success-border-top-color),
-  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
+  $border-color: var(--gl-alert-success-border-color),
   $icon-color: var(--gl-feedback-success-icon-color)
 );

package/src/scss/themes.scss

@@ -1,4 +1,22 @@
-:root.tint-neutral-indigo,
+:root.ui-neutral,
+.ui-neutral-scope {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-700: #4c4b51;
+  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-900: #28272d;
+  --gl-color-neutral-950: #18171d;
+  --gl-color-neutral-1000: #050506;
+}
+
+:root.ui-indigo,
 .ui-indigo-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f9f8fa;
@@ -16,7 +34,7 @@
   --gl-color-neutral-1000: #09030e;
 }
 
-:root.tint-neutral-blue,
+:root.ui-blue,
 .ui-blue-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8fa;
@@ -34,7 +52,7 @@
   --gl-color-neutral-1000: #03050d;
 }
 
-:root.tint-neutral-green,
+:root.ui-green,
 .ui-green-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f7f9f8;
@@ -52,7 +70,7 @@
   --gl-color-neutral-1000: #010705;
 }
 
-:root.tint-neutral-red,
+:root.ui-red,
 .ui-red-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbf7f9;
@@ -70,7 +88,7 @@
   --gl-color-neutral-1000: #0b0306;
 }
 
-:root.tint-neutral-gray,
+:root.ui-gray,
 .ui-gray-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8f8;

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

@@ -113,19 +113,19 @@
   --gl-color-green-900: #1e3e28;
   --gl-color-green-950: #17291c;
   --gl-color-neutral-0: #fff;
-  --gl-color-neutral-10: #fbfafd;
-  --gl-color-neutral-50: #ececef;
-  --gl-color-neutral-100: #dcdcde;
-  --gl-color-neutral-200: #bfbfc3;
-  --gl-color-neutral-300: #a4a3a8;
-  --gl-color-neutral-400: #89888d;
-  --gl-color-neutral-500: #737278;
-  --gl-color-neutral-600: #626168;
-  --gl-color-neutral-700: #4c4b51;
-  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-10: #f7f7f5;
+  --gl-color-neutral-50: #ecebea;
+  --gl-color-neutral-100: #dcdbd9;
+  --gl-color-neutral-200: #c1bfbe;
+  --gl-color-neutral-300: #a5a3a3;
+  --gl-color-neutral-400: #8a8888;
+  --gl-color-neutral-500: #747273;
+  --gl-color-neutral-600: #646163;
+  --gl-color-neutral-700: #4d4b4e;
+  --gl-color-neutral-800: #3a383d;
   --gl-color-neutral-900: #28272d;
   --gl-color-neutral-950: #18171d;
-  --gl-color-neutral-1000: #050506;
+  --gl-color-neutral-1000: #050408;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
@@ -423,7 +423,7 @@
   --gl-heading-default-margin-top: var(--gl-spacing-scale-0);
   --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
-  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */
   --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
@@ -743,9 +743,9 @@
   --gl-action-confirm-background-color-hover: var(--gl-color-alpha-dark-6); /** Used for the background of a confirm (positive) action in the hover state. */
   --gl-action-confirm-background-color-active: var(--gl-color-alpha-dark-16); /** Used for the background of a confirm (positive) action in the active state. */
   --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a confirm action in the default state. */
-  --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /** Used for the foreground of a danger (destructive) action in the default state. */
-  --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /** Used for the foreground of a danger (destructive) action in the hover state. */
-  --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /** Used for the foreground of a danger (destructive) action in the active state. */
+  --gl-action-danger-foreground-color-default: var(--gl-color-red-600); /** Used for the foreground of a danger (destructive) action in the default state. */
+  --gl-action-danger-foreground-color-hover: var(--gl-color-red-800); /** Used for the foreground of a danger (destructive) action in the hover state. */
+  --gl-action-danger-foreground-color-active: var(--gl-color-red-950); /** Used for the foreground of a danger (destructive) action in the active state. */
   --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /** Used for the background of a danger (destructive) action in the focus state. */
   --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger action in the default state. */
   --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /** Used for the background of a strong confirm action in the default state. */
@@ -916,14 +916,19 @@
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
+  --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-text-color-heading); /** Used for the title color of an info alert. */
   --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */
+  --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */
   --gl-alert-success-title-color: var(--gl-text-color-heading); /** Used for the title color of a success alert. */
   --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */
+  --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */
   --gl-alert-warning-title-color: var(--gl-text-color-heading); /** Used for the title color of a warning alert. */
   --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */
+  --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */
   --gl-alert-danger-title-color: var(--gl-text-color-heading); /** Used for the title color of a danger alert. */
   --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */
+  --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */
   --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */

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

@@ -113,19 +113,19 @@
   --gl-color-green-900: #1e3e28;
   --gl-color-green-950: #17291c;
   --gl-color-neutral-0: #fff;
-  --gl-color-neutral-10: #fbfafd;
-  --gl-color-neutral-50: #ececef;
-  --gl-color-neutral-100: #dcdcde;
-  --gl-color-neutral-200: #bfbfc3;
-  --gl-color-neutral-300: #a4a3a8;
-  --gl-color-neutral-400: #89888d;
-  --gl-color-neutral-500: #737278;
-  --gl-color-neutral-600: #626168;
-  --gl-color-neutral-700: #4c4b51;
-  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-10: #f7f7f5;
+  --gl-color-neutral-50: #ecebea;
+  --gl-color-neutral-100: #dcdbd9;
+  --gl-color-neutral-200: #c1bfbe;
+  --gl-color-neutral-300: #a5a3a3;
+  --gl-color-neutral-400: #8a8888;
+  --gl-color-neutral-500: #747273;
+  --gl-color-neutral-600: #646163;
+  --gl-color-neutral-700: #4d4b4e;
+  --gl-color-neutral-800: #3a383d;
   --gl-color-neutral-900: #28272d;
   --gl-color-neutral-950: #18171d;
-  --gl-color-neutral-1000: #050506;
+  --gl-color-neutral-1000: #050408;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
@@ -435,18 +435,18 @@
   --gl-heading-default-margin-top: var(--gl-spacing-scale-0);
   --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
-  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
-  --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */
+  --gl-alert-info-title-color: var(--gl-color-blue-200); /** Used for the title color of an info alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
   --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
-  --gl-alert-success-title-color: var(--gl-color-green-300); /** Used for the title color of a success alert. */
+  --gl-alert-success-title-color: var(--gl-color-green-200); /** Used for the title color of a success alert. */
   --gl-alert-success-border-top-color: var(--gl-color-green-400); /** Used for the border color of a success alert. */
   --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */
-  --gl-alert-warning-title-color: var(--gl-color-orange-300); /** Used for the title color of a warning alert. */
+  --gl-alert-warning-title-color: var(--gl-color-orange-200); /** Used for the title color of a warning alert. */
   --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /** Used for the border color of a warning alert. */
   --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
-  --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
+  --gl-alert-danger-title-color: var(--gl-color-red-200); /** Used for the title color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */
   --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
   --gl-application-chrome-background-color: var(--gl-color-neutral-1000); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */
@@ -802,27 +802,27 @@
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /** Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-border-color: var(--gl-color-neutral-600); /** Used for the border of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
-  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
+  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-200); /** Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-info-background-color: var(--gl-color-blue-950); /** Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-info-border-color: var(--gl-color-blue-600); /** Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-info-text-color: var(--gl-color-blue-200); /** Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
-  --gl-feedback-info-icon-color: var(--gl-color-blue-300); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-icon-color: var(--gl-color-blue-200); /** Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-success-background-color: var(--gl-color-green-900); /** Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-success-border-color: var(--gl-color-green-600); /** Used for the border of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-success-text-color: var(--gl-color-green-200); /** Used for the text of a success feedback item when confirming the successful completion of a user-initiated action. */
-  --gl-feedback-success-icon-color: var(--gl-color-green-300); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
+  --gl-feedback-success-icon-color: var(--gl-color-green-200); /** Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-warning-background-color: var(--gl-color-orange-900); /** Used for the background of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-warning-border-color: var(--gl-color-orange-600); /** Used for the border of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-warning-text-color: var(--gl-color-orange-200); /** Used for the text of a warning feedback item when notifying about a potential issue or sensitive information. */
-  --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
+  --gl-feedback-warning-icon-color: var(--gl-color-orange-200); /** Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information. */
   --gl-feedback-danger-background-color: var(--gl-color-red-900); /** Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-border-color: var(--gl-color-red-300); /** Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-text-color: var(--gl-color-red-200); /** Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
-  --gl-feedback-danger-icon-color: var(--gl-color-red-300); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
+  --gl-feedback-danger-icon-color: var(--gl-color-red-200); /** Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-brand-background-color: var(--gl-color-purple-950); /** Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-feedback-brand-border-color: var(--gl-color-purple-600); /** Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-feedback-brand-text-color: var(--gl-color-purple-200); /** Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab. */
-  --gl-feedback-brand-icon-color: var(--gl-color-purple-300); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
+  --gl-feedback-brand-icon-color: var(--gl-color-purple-200); /** Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /** Used for the outer color portion of the focus ring. */
   --gl-highlight-match-background-color: var(--gl-color-orange-200); /** Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
   --gl-highlight-match-text-color: var(--gl-color-neutral-950); /** Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
@@ -931,11 +931,16 @@
   --gl-shadow-lg: 0 0 2px 0 var(--gl-shadow-color-default), 0 0 2px 0 var(--gl-shadow-color-default), 0 4px 12px 0 var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-border-radius: var(--gl-border-radius-lg); /** Used for alert border radius. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
-  --gl-alert-neutral-background-color: var(--gl-background-color-subtle); /** Used for the background color of a neutral alert. */
-  --gl-alert-info-background-color: var(--gl-background-color-subtle); /** Used for the background color of an info alert. */
-  --gl-alert-success-background-color: var(--gl-background-color-subtle); /** Used for the background color of a success alert. */
-  --gl-alert-warning-background-color: var(--gl-background-color-subtle); /** Used for the background color of a warning alert. */
-  --gl-alert-danger-background-color: var(--gl-background-color-subtle); /** Used for the background color of a danger alert. */
+  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
+  --gl-alert-neutral-border-color: var(--gl-feedback-neutral-border-color); /** Used for the border color of a neutral alert. */
+  --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /** Used for the background color of an info alert. */
+  --gl-alert-info-border-color: var(--gl-feedback-info-border-color); /** Used for the border color of an info alert. */
+  --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /** Used for the background color of a success alert. */
+  --gl-alert-success-border-color: var(--gl-feedback-success-border-color); /** Used for the border color of a success alert. */
+  --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /** Used for the background color of a warning alert. */
+  --gl-alert-warning-border-color: var(--gl-feedback-warning-border-color); /** Used for the border color of a warning alert. */
+  --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /** Used for the background color of a danger alert. */
+  --gl-alert-danger-border-color: var(--gl-feedback-danger-border-color); /** Used for the border color of a danger alert. */
   --gl-avatar-square-border-radius-lg: var(--gl-border-radius-lg); /** Border radius for square avatars at larger sizes (48px, 64px, 96px). */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /** Used for the background of a muted badge in the hover state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /** Used for the text of a muted badge in the focus state. */