@gitlab/ui 85.12.0 → 85.12.2

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

@@ -537,6 +537,36 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
+$gl-action-danger-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong danger (destructive) action background.
+$gl-action-danger-icon-color-active: $gl-color-red-50; // Used for the icon of a danger (destructive) action in the active state.
+$gl-action-danger-icon-color-focus: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the focus state.
+$gl-action-danger-icon-color-hover: $gl-color-red-200; // Used for the icon of a danger (destructive) action in the hover state.
+$gl-action-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (destructive) action in the default state.
+$gl-action-danger-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong danger (destructive) action background.
+$gl-action-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (destructive) action in the active state.
+$gl-action-danger-text-color-focus: $gl-color-red-200; // Used for the text of a danger (destructive) action in the focus state.
+$gl-action-danger-text-color-hover: $gl-color-red-200; // Used for the text of a danger (destructive) action in the hover state.
+$gl-action-danger-text-color-default: $gl-color-red-400; // Used for the text of a danger (destructive) action in the default state.
+$gl-action-danger-border-color-strong-active: $gl-color-red-50; // Used for the border of a solid, strong danger (destructive) action in the active state.
+$gl-action-danger-border-color-strong-focus: $gl-color-red-100; // Used for the border of a solid, strong danger (destructive) action in the focus state.
+$gl-action-danger-border-color-strong-hover: $gl-color-red-100; // Used for the border of a solid, strong danger (destructive) action in the hover state.
+$gl-action-danger-border-color-strong-default: $gl-color-red-300; // Used for the border of a solid, strong danger (destructive) action in the default state.
+$gl-action-danger-border-color-active: $gl-color-red-50; // Used for the border of an outlined danger (destructive) action in the active state.
+$gl-action-danger-border-color-focus: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the focus state.
+$gl-action-danger-border-color-hover: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the hover state.
+$gl-action-danger-border-color-default: $gl-color-red-400; // Used for the border of an outlined danger (destructive) action in the default state.
+$gl-action-danger-background-color-strong-active: $gl-color-red-100; // Used for the background of a solid, strong danger (destructive) action in the active state.
+$gl-action-danger-background-color-strong-focus: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the focus state.
+$gl-action-danger-background-color-strong-hover: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the hover state.
+$gl-action-danger-background-color-strong-default: $gl-color-red-400; // Used for the background of a solid, strong danger (destructive) action in the default state.
+$gl-action-danger-background-color-subtle-active: $gl-color-red-800; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
+$gl-action-danger-background-color-subtle-focus: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
+$gl-action-danger-background-color-subtle-hover: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
+$gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
+$gl-action-danger-background-color-active: $gl-color-red-800; // Used for the background of an outlined danger (destructive) action in the active state.
+$gl-action-danger-background-color-focus: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the focus state.
+$gl-action-danger-background-color-hover: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the hover state.
+$gl-action-danger-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined danger (destructive) action in the default state.
 $gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
 $gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
 $gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -537,6 +537,36 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
+$gl-action-danger-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong danger (destructive) action background.
+$gl-action-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger (destructive) action in the active state.
+$gl-action-danger-icon-color-focus: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the focus state.
+$gl-action-danger-icon-color-hover: $gl-color-red-700; // Used for the icon of a danger (destructive) action in the hover state.
+$gl-action-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (destructive) action in the default state.
+$gl-action-danger-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong danger (destructive) action background.
+$gl-action-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (destructive) action in the active state.
+$gl-action-danger-text-color-focus: $gl-color-red-700; // Used for the text of a danger (destructive) action in the focus state.
+$gl-action-danger-text-color-hover: $gl-color-red-700; // Used for the text of a danger (destructive) action in the hover state.
+$gl-action-danger-text-color-default: $gl-color-red-500; // Used for the text of a danger (destructive) action in the default state.
+$gl-action-danger-border-color-strong-active: $gl-color-red-900; // Used for the border of a solid, strong danger (destructive) action in the active state.
+$gl-action-danger-border-color-strong-focus: $gl-color-red-800; // Used for the border of a solid, strong danger (destructive) action in the focus state.
+$gl-action-danger-border-color-strong-hover: $gl-color-red-800; // Used for the border of a solid, strong danger (destructive) action in the hover state.
+$gl-action-danger-border-color-strong-default: $gl-color-red-600; // Used for the border of a solid, strong danger (destructive) action in the default state.
+$gl-action-danger-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) action in the active state.
+$gl-action-danger-border-color-focus: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the focus state.
+$gl-action-danger-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the hover state.
+$gl-action-danger-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) action in the default state.
+$gl-action-danger-background-color-strong-active: $gl-color-red-800; // Used for the background of a solid, strong danger (destructive) action in the active state.
+$gl-action-danger-background-color-strong-focus: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the focus state.
+$gl-action-danger-background-color-strong-hover: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the hover state.
+$gl-action-danger-background-color-strong-default: $gl-color-red-500; // Used for the background of a solid, strong danger (destructive) action in the default state.
+$gl-action-danger-background-color-subtle-active: $gl-color-red-100; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
+$gl-action-danger-background-color-subtle-focus: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
+$gl-action-danger-background-color-subtle-hover: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
+$gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
+$gl-action-danger-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) action in the active state.
+$gl-action-danger-background-color-focus: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the focus state.
+$gl-action-danger-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the hover state.
+$gl-action-danger-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) action in the default state.
 $gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
 $gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
 $gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -70,6 +70,36 @@ $gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
 $gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
 $gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
 $gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
+$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
+$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
+$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
+$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
+$gl-action-danger-background-color-subtle-default: var(--gl-action-danger-background-color-subtle-default);
+$gl-action-danger-background-color-subtle-hover: var(--gl-action-danger-background-color-subtle-hover);
+$gl-action-danger-background-color-subtle-focus: var(--gl-action-danger-background-color-subtle-focus);
+$gl-action-danger-background-color-subtle-active: var(--gl-action-danger-background-color-subtle-active);
+$gl-action-danger-background-color-strong-default: var(--gl-action-danger-background-color-strong-default);
+$gl-action-danger-background-color-strong-hover: var(--gl-action-danger-background-color-strong-hover);
+$gl-action-danger-background-color-strong-focus: var(--gl-action-danger-background-color-strong-focus);
+$gl-action-danger-background-color-strong-active: var(--gl-action-danger-background-color-strong-active);
+$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
+$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
+$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
+$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
+$gl-action-danger-border-color-strong-default: var(--gl-action-danger-border-color-strong-default);
+$gl-action-danger-border-color-strong-hover: var(--gl-action-danger-border-color-strong-hover);
+$gl-action-danger-border-color-strong-focus: var(--gl-action-danger-border-color-strong-focus);
+$gl-action-danger-border-color-strong-active: var(--gl-action-danger-border-color-strong-active);
+$gl-action-danger-text-color-default: var(--gl-action-danger-text-color-default);
+$gl-action-danger-text-color-hover: var(--gl-action-danger-text-color-hover);
+$gl-action-danger-text-color-focus: var(--gl-action-danger-text-color-focus);
+$gl-action-danger-text-color-active: var(--gl-action-danger-text-color-active);
+$gl-action-danger-text-color-strong: var(--gl-action-danger-text-color-strong);
+$gl-action-danger-icon-color-default: var(--gl-action-danger-icon-color-default);
+$gl-action-danger-icon-color-hover: var(--gl-action-danger-icon-color-hover);
+$gl-action-danger-icon-color-focus: var(--gl-action-danger-icon-color-focus);
+$gl-action-danger-icon-color-active: var(--gl-action-danger-icon-color-active);
+$gl-action-danger-icon-color-strong: var(--gl-action-danger-icon-color-strong);
 $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);

package/package.json

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

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

@@ -1,5 +1,5 @@
 $badge-padding-horizontal: 0.75 * $grid-size;
-$badge-min-width: 2.5 * $grid-size;
+$badge-min-width: $gl-spacing-scale-3;
 
 @mixin gl-badge-variant(
   $variant,
@@ -74,7 +74,6 @@ $badge-min-width: 2.5 * $grid-size;
   @include gl-line-height-normal;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
-  min-width: $badge-min-width;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -86,6 +85,10 @@ $badge-min-width: 2.5 * $grid-size;
     @include gl-flex-shrink-0;
     top: auto;
   }
+
+  .gl-badge-content {
+    min-width: $badge-min-width;
+  }
 }
 
 /* Variants */

package/src/components/base/badge/badge.vue

@@ -83,7 +83,10 @@ export default {
       :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
-    <!-- @slot The badge content to display. -->
-    <slot></slot>
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+    <span v-if="$slots.default" class="gl-badge-content">
+      <!-- @slot The badge content to display. -->
+      <slot></slot>
+    </span>
   </b-badge>
 </template>

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -7,11 +7,11 @@
     @include gl-opacity-10;
   }
 
-  .primary-stop {
+  .background-stop {
     stop-color: var(--gl-skeleton-loader-background-color);
   }
 
-  .secondary-stop {
+  .shimmer-stop {
     stop-color: var(--gl-skeleton-loader-shimmer-color);
   }
 }

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -169,7 +169,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'primary-stop',
+                    class: 'background-stop',
                     attrs: {
                       offset: '0%',
                     },
@@ -188,7 +188,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'secondary-stop',
+                    class: 'shimmer-stop',
                     attrs: {
                       offset: '50%',
                     },
@@ -207,7 +207,7 @@ export default {
                 createElement(
                   'stop',
                   {
-                    class: 'primary-stop',
+                    class: 'background-stop',
                     attrs: {
                       offset: '100%',
                     },

package/src/components/experimental/duo/chat/constants.js

@@ -1,5 +1,6 @@
 export const CHAT_RESET_MESSAGE = '/reset';
 export const CHAT_CLEAN_MESSAGE = '/clean';
+export const CHAT_CLEAR_MESSAGE = '/clear';
 
 export const LOADING_TRANSITION_DURATION = 7500;
 

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -16,7 +16,7 @@ import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE } from './constants';
+import { CHAT_CLEAN_MESSAGE, CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE } from './constants';
 
 export const i18n = {
   CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
@@ -314,7 +314,7 @@ export default {
          * @param {String} prompt The user prompt to send.
          */
 
-        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE].includes(this.prompt)) {
+        if (![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.prompt)) {
           this.displaySubmitButton = false;
         }
         this.$emit('send-chat-prompt', this.prompt.trim());

package/src/tokens/action.tokens.json

@@ -590,6 +590,267 @@
           }
         }
       }
+    },
+    "danger": {
+      "background": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.50}",
+              "dark": "{color.red.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.50}",
+              "dark": "{color.red.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.100}",
+              "dark": "{color.red.800}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of an outlined danger (destructive) action in the active state."
+          },
+          "subtle": {
+            "default": {
+              "$value": "{color.alpha.0}",
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.50}",
+                "dark": "{color.red.900}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.100}",
+                "dark": "{color.red.800}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a borderless, subtle danger (destructive) action in the active state."
+            }
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.red.500}",
+                "dark": "{color.red.400}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the background of a solid, strong danger (destructive) action in the active state."
+            }
+          }
+        }
+      },
+      "border": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the border of an outlined danger (destructive) action in the active state."
+          },
+          "strong": {
+            "default": {
+              "$value": {
+                "default": "{color.red.600}",
+                "dark": "{color.red.300}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the default state."
+            },
+            "hover": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the hover state."
+            },
+            "focus": {
+              "$value": {
+                "default": "{color.red.800}",
+                "dark": "{color.red.100}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the focus state."
+            },
+            "active": {
+              "$value": {
+                "default": "{color.red.900}",
+                "dark": "{color.red.50}"
+              },
+              "$type": "color",
+              "$description": "Used for the border of a solid, strong danger (destructive) action in the active state."
+            }
+          }
+        }
+      },
+      "text": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the text of a danger (destructive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the text on a solid, strong danger (destructive) action background."
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "{color.red.500}",
+              "dark": "{color.red.400}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the default state."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the hover state."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.red.700}",
+              "dark": "{color.red.200}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the focus state."
+          },
+          "active": {
+            "$value": {
+              "default": "{color.red.900}",
+              "dark": "{color.red.50}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon of a danger (destructive) action in the active state."
+          },
+          "strong": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
+            "$type": "color",
+            "$description": "Used for the icon on a solid, strong danger (destructive) action background."
+          }
+        }
+      }
     }
   }
 }

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

@@ -539,6 +539,36 @@
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
+  --gl-action-danger-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong danger (destructive) action background. */
+  --gl-action-danger-icon-color-active: var(--gl-color-red-900); /* Used for the icon of a danger (destructive) action in the active state. */
+  --gl-action-danger-icon-color-focus: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the focus state. */
+  --gl-action-danger-icon-color-hover: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the hover state. */
+  --gl-action-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger (destructive) action in the default state. */
+  --gl-action-danger-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong danger (destructive) action background. */
+  --gl-action-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger (destructive) action in the active state. */
+  --gl-action-danger-text-color-focus: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the focus state. */
+  --gl-action-danger-text-color-hover: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the hover state. */
+  --gl-action-danger-text-color-default: var(--gl-color-red-500); /* Used for the text of a danger (destructive) action in the default state. */
+  --gl-action-danger-border-color-strong-active: var(--gl-color-red-900); /* Used for the border of a solid, strong danger (destructive) action in the active state. */
+  --gl-action-danger-border-color-strong-focus: var(--gl-color-red-800); /* Used for the border of a solid, strong danger (destructive) action in the focus state. */
+  --gl-action-danger-border-color-strong-hover: var(--gl-color-red-800); /* Used for the border of a solid, strong danger (destructive) action in the hover state. */
+  --gl-action-danger-border-color-strong-default: var(--gl-color-red-600); /* Used for the border of a solid, strong danger (destructive) action in the default state. */
+  --gl-action-danger-border-color-active: var(--gl-color-red-900); /* Used for the border of an outlined danger (destructive) action in the active state. */
+  --gl-action-danger-border-color-focus: var(--gl-color-red-700); /* Used for the border of an outlined danger (destructive) action in the focus state. */
+  --gl-action-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of an outlined danger (destructive) action in the hover state. */
+  --gl-action-danger-border-color-default: var(--gl-color-red-500); /* Used for the border of an outlined danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-strong-active: var(--gl-color-red-800); /* Used for the background of a solid, strong danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-strong-focus: var(--gl-color-red-600); /* Used for the background of a solid, strong danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-strong-hover: var(--gl-color-red-600); /* Used for the background of a solid, strong danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-strong-default: var(--gl-color-red-500); /* Used for the background of a solid, strong danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-subtle-active: var(--gl-color-red-100); /* Used for the background of a borderless, subtle danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-subtle-focus: var(--gl-color-red-50); /* Used for the background of a borderless, subtle danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-subtle-hover: var(--gl-color-red-50); /* Used for the background of a borderless, subtle danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-active: var(--gl-color-red-100); /* Used for the background of an outlined danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-focus: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-hover: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined danger (destructive) action in the default state. */
   --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong confirm (positive) action background. */
   --gl-action-confirm-icon-color-active: var(--gl-color-blue-900); /* Used for the icon of a confirm (positive) action in the active state. */
   --gl-action-confirm-icon-color-focus: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the focus state. */

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

@@ -539,6 +539,36 @@
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
   --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
+  --gl-action-danger-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong danger (destructive) action background. */
+  --gl-action-danger-icon-color-active: var(--gl-color-red-50); /* Used for the icon of a danger (destructive) action in the active state. */
+  --gl-action-danger-icon-color-focus: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the focus state. */
+  --gl-action-danger-icon-color-hover: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the hover state. */
+  --gl-action-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (destructive) action in the default state. */
+  --gl-action-danger-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong danger (destructive) action background. */
+  --gl-action-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (destructive) action in the active state. */
+  --gl-action-danger-text-color-focus: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the focus state. */
+  --gl-action-danger-text-color-hover: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the hover state. */
+  --gl-action-danger-text-color-default: var(--gl-color-red-400); /* Used for the text of a danger (destructive) action in the default state. */
+  --gl-action-danger-border-color-strong-active: var(--gl-color-red-50); /* Used for the border of a solid, strong danger (destructive) action in the active state. */
+  --gl-action-danger-border-color-strong-focus: var(--gl-color-red-100); /* Used for the border of a solid, strong danger (destructive) action in the focus state. */
+  --gl-action-danger-border-color-strong-hover: var(--gl-color-red-100); /* Used for the border of a solid, strong danger (destructive) action in the hover state. */
+  --gl-action-danger-border-color-strong-default: var(--gl-color-red-300); /* Used for the border of a solid, strong danger (destructive) action in the default state. */
+  --gl-action-danger-border-color-active: var(--gl-color-red-50); /* Used for the border of an outlined danger (destructive) action in the active state. */
+  --gl-action-danger-border-color-focus: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) action in the focus state. */
+  --gl-action-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) action in the hover state. */
+  --gl-action-danger-border-color-default: var(--gl-color-red-400); /* Used for the border of an outlined danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-strong-active: var(--gl-color-red-100); /* Used for the background of a solid, strong danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-strong-focus: var(--gl-color-red-300); /* Used for the background of a solid, strong danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-strong-hover: var(--gl-color-red-300); /* Used for the background of a solid, strong danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-strong-default: var(--gl-color-red-400); /* Used for the background of a solid, strong danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-subtle-active: var(--gl-color-red-800); /* Used for the background of a borderless, subtle danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-subtle-focus: var(--gl-color-red-900); /* Used for the background of a borderless, subtle danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-subtle-hover: var(--gl-color-red-900); /* Used for the background of a borderless, subtle danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle danger (destructive) action in the default state. */
+  --gl-action-danger-background-color-active: var(--gl-color-red-800); /* Used for the background of an outlined danger (destructive) action in the active state. */
+  --gl-action-danger-background-color-focus: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) action in the focus state. */
+  --gl-action-danger-background-color-hover: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) action in the hover state. */
+  --gl-action-danger-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined danger (destructive) action in the default state. */
   --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong confirm (positive) action background. */
   --gl-action-confirm-icon-color-active: var(--gl-color-blue-50); /* Used for the icon of a confirm (positive) action in the active state. */
   --gl-action-confirm-icon-color-focus: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the focus state. */

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

@@ -70,6 +70,36 @@ export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#9dc7f1'; // Used for the ico
 export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the focus state.
 export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#e9f3fc'; // Used for the icon of a confirm (positive) action in the active state.
 export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong confirm (positive) action background.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = '#660e00'; // Used for the background of an outlined danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = '#660e00'; // Used for the background of an outlined danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = '#8d1300'; // Used for the background of an outlined danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_HOVER = '#660e00'; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_FOCUS = '#660e00'; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#8d1300'; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_DEFAULT = '#ec5941'; // Used for the background of a solid, strong danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_HOVER = '#f57f6c'; // Used for the background of a solid, strong danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_FOCUS = '#f57f6c'; // Used for the background of a solid, strong danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_ACTIVE = '#fdd4cd'; // Used for the background of a solid, strong danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = '#ec5941'; // Used for the border of an outlined danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of an outlined danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = '#fcb5aa'; // Used for the border of an outlined danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = '#fcf1ef'; // Used for the border of an outlined danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_DEFAULT = '#f57f6c'; // Used for the border of a solid, strong danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_HOVER = '#fdd4cd'; // Used for the border of a solid, strong danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_FOCUS = '#fdd4cd'; // Used for the border of a solid, strong danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_ACTIVE = '#fcf1ef'; // Used for the border of a solid, strong danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_TEXT_COLOR_DEFAULT = '#ec5941'; // Used for the text of a danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_TEXT_COLOR_HOVER = '#fcb5aa'; // Used for the text of a danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_TEXT_COLOR_FOCUS = '#fcb5aa'; // Used for the text of a danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#333238'; // Used for the text on a solid, strong danger (destructive) action background.
+export const GL_ACTION_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (destructive) action in the default state.
+export const GL_ACTION_DANGER_ICON_COLOR_HOVER = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the hover state.
+export const GL_ACTION_DANGER_ICON_COLOR_FOCUS = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the focus state.
+export const GL_ACTION_DANGER_ICON_COLOR_ACTIVE = '#fcf1ef'; // Used for the icon of a danger (destructive) action in the active state.
+export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong danger (destructive) action background.
 export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
 export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.