@atlassian/aui 9.8.0 → 9.9.0

package/src/js/aui/design-tokens/design-tokens-testing-theme.js

@@ -0,0 +1,85 @@
+import TokenNames from "@atlaskit/tokens/token-names";
+
+const testingColorVariableName = '--aui-theme-testing-color';
+const defaultTestingColor = 'color(srgb 1 0.75 0.8 / 0.6)';
+const testingThemeName = "aui-theme-testing";
+
+/**
+ * Theme that replaces all the design tokens with single color, helping to visually identify custom colors on the page
+ *
+ * @param solidColor any valid CSS color, will be used to replace tokens
+ */
+(function generateTestingTheme() {
+
+    const initialComment = "This theme is autogenerated using AJS.DesignTokens.generateTestingTheme()."
+
+    // If function called many times theme should be only added once
+    const isThemeAlreadyInitialised = !document.getElementById(testingThemeName)
+    if (!isThemeAlreadyInitialised) {
+        return;
+    }
+
+    // We use overridable test color declaration to make theme configurable
+    const colorDeclaration = `${testingColorVariableName}: ${defaultTestingColor};`
+    const themeCSSDeclarations = Object.values(TokenNames)
+        .map(token => `\t${token}: var(${testingColorVariableName});`);
+    const allDeclarations = [ colorDeclaration, ...themeCSSDeclarations ];
+
+
+    const themeCSS = `/* ${initialComment} */\nbody.${testingThemeName} {\n${allDeclarations.join('\n')}\n}`;
+
+    const themeElement = document.createElement('style');
+    themeElement.id = testingThemeName;
+    themeElement.innerText = themeCSS;
+
+    const head = document.querySelector('head');
+    if (head) {
+        head.appendChild(themeElement);
+    }
+})();
+
+/**
+ * Overrides default testing color by setting css variable. If no color passed, will revert to default.
+ * @param color color to use for testing
+ */
+function setTestingThemeColor(color = defaultTestingColor) {
+    document.body.style.setProperty(testingColorVariableName, color);
+}
+
+function enableTestingTheme() {
+    const isEnabled = document.body.classList.contains(testingThemeName);
+    if (!isEnabled) {
+        document.body.classList.add(testingThemeName);
+    }
+}
+
+function disableTestingTheme() {
+    const isEnabled = document.body.classList.contains(testingThemeName);
+    if (isEnabled) {
+        document.body.classList.remove(testingThemeName);
+        document.body.style.removeProperty(testingColorVariableName);
+    }
+}
+
+/**
+ * Enables or disables testing theme for Design Tokens based on current state
+ * @param state Optional parameter. Allows to force specific state.
+ */
+function toggleTestingTheme(state) {
+
+    // If not passed, invert existing state
+    if (state == null) {
+        const currentState = document.body.classList.contains(testingThemeName);
+        state = !currentState;
+    }
+
+    state ? enableTestingTheme() : disableTestingTheme();
+}
+
+
+export {
+    setTestingThemeColor,
+    enableTestingTheme,
+    disableTestingTheme,
+    toggleTestingTheme
+}

package/src/js/aui/design-tokens/design-tokens.js

@@ -1,104 +1,14 @@
 import * as Tokens from '@atlaskit/tokens';
-import TokenNames from '@atlaskit/tokens/token-names';
 import globalize from '../internal/globalize';
 
-
-
-const testingColorVariableName = '--aui-theme-testing-color';
-const defaultTestingColor = 'color(srgb 1 0.75 0.8 / 0.6)';
-const testingThemeName = "aui-theme-testing";
-
-/**
- * Theme that replaces all the design tokens with single color, helping to visually identify custom colors on the page
- *
- * @param solidColor any valid CSS color, will be used to replace tokens
- */
-(function generateTestingTheme() {
-
-    const initialComment = "This theme is autogenerated using AJS.DesignTokens.generateTestingTheme()."
-
-    // If function called many times theme should be only added once
-    const isThemeAlreadyInitialised = !document.getElementById(testingThemeName)
-    if (!isThemeAlreadyInitialised) {
-        return;
-    }
-
-    // We use overridable test color declaration to make theme configurable
-    const colorDeclaration = `${testingColorVariableName}: ${defaultTestingColor};`
-    const themeCSSDeclarations = Object.values(TokenNames)
-        .map(token => `\t${token}: var(${testingColorVariableName});`);
-    const allDeclarations = [ colorDeclaration, ...themeCSSDeclarations ];
-
-
-    const themeCSS = `/* ${initialComment} */\nbody.${testingThemeName} {\n${allDeclarations.join('\n')}\n}`;
-
-    const themeElement = document.createElement('style');
-    themeElement.id = testingThemeName;
-    themeElement.innerText = themeCSS;
-
-    const head = document.querySelector('head');
-    if (head) {
-        head.appendChild(themeElement);
-    }
-})();
-
-
-/**
- * Enables or disables testing theme for Design Tokens based on current state
- * @param state Optional parameter. Allows to force specific state.
- */
-export function toggleTestingTheme(state) {
-
-    // If not passed, invert existing state
-    if (state == null) {
-        const currentState = document.body.classList.contains(testingThemeName);
-        state = !currentState;
-    }
-
-    state ? enableTestingTheme() : disableTestingTheme();
-}
-
-/**
- * Overrides default testing color by setting css variable. If no color passed, will revert to default.
- * @param color color to use for testing
- */
-export function setTestingThemeColor(color = defaultTestingColor) {
-    document.body.style.setProperty(testingColorVariableName, color);
-}
-
-export function enableTestingTheme() {
-    const isEnabled = document.body.classList.contains(testingThemeName);
-    if (!isEnabled) {
-        document.body.classList.add(testingThemeName);
-    }
-}
-
-export function disableTestingTheme() {
-    const isEnabled = document.body.classList.contains(testingThemeName);
-    if (isEnabled) {
-        document.body.classList.remove(testingThemeName);
-        document.body.style.removeProperty(testingColorVariableName);
-    }
-}
+import './design-tokens-init';
 
 // Export for NPM bundle, for which Webpack automatically puts those functions under AJS.DesignTokens
 export const {
-    setGlobalTheme,
-    token,
-    themeObjectToString,
-    themeStringToObject,
-    getTokenValue
+    setGlobalTheme
 } = Tokens;
 
 // Export for p2-plugin bundle, where we need to do put those functions under AJS.DesignTokens manually
 globalize('DesignTokens', {
-    setGlobalTheme,
-    token,
-    themeObjectToString,
-    themeStringToObject,
-    getTokenValue,
-    toggleTestingTheme,
-    enableTestingTheme,
-    disableTestingTheme,
-    setTestingThemeColor
+    setGlobalTheme
 });

package/src/js/aui/expander.js

@@ -1,106 +1,177 @@
 import $ from './jquery';
 
-var $document = $(document);
-
-//convenience function because this needs to be run for all the events.
-var getExpanderProperties = function (event) {
-    var properties = {};
-
-    properties.$trigger = $(event.currentTarget);
-    properties.$content = $document.find('#' + properties.$trigger.attr('aria-controls'));
-    properties.triggerIsParent = properties.$content.parent().filter(properties.$trigger).length !== 0;
-    properties.$shortContent = properties.triggerIsParent ? properties.$trigger.find('.aui-expander-short-content') : null;
-    properties.height = properties.$content.css('min-height');
-    properties.isCollapsible = properties.$trigger.data('collapsible') !== false;
-    properties.replaceText = properties.$trigger.attr('data-replace-text'); //can't use .data here because it doesn't update after the first call
-    properties.replaceSelector = properties.$trigger.data('replace-selector');
-
-    return properties;
+import { getMessageLogger } from './internal/deprecation';
+
+
+const deprecate = {
+    'aria-expanded': getMessageLogger('Expander [aria-expanded] attribute', {
+        removeInVersion: '10.0.0',
+        sinceVersion: '9.9.0',
+        deprecationType: 'ARIA ATTRIBUTE',
+        extraInfo:
+            'The "aria-expanded" attribute will no longer act as an indicator for the expander if it needs to be expanded. Please update the expander in accordance with AUI guidelines.',
+    }),
+    'replace-selector': getMessageLogger('Expander [data-replace-selector] attribute', {
+        removeInVersion: '10.0.0',
+        sinceVersion: '9.9.0',
+        deprecationType: 'DATA ATTRIBUTE',
+        extraInfo:
+            'The attribute "data-replace-selector" will no longer have any functionality. It is recommended to update the expander following AUI guidelines.',
+    }),
+    'short-content': getMessageLogger('Expander [.aui-expander-short-content]', {
+        removeInVersion: '10.0.0',
+        sinceVersion: '9.9.0',
+        deprecationType: 'EXPANDER CLASS (PATTERN)',
+    }),
+}
+
+const getExpanderProperties = ($trigger) => {
+    const $content = $(`#${$trigger.attr('aria-controls')}`);
+    const isTriggerParent = $content.parent().is($trigger);
+
+    /**
+     * ! Deprecated since 9.9.0
+     * delete at version 10.0.0
+     */
+    const $shortContent = isTriggerParent ? $trigger.find('.aui-expander-short-content') : null;
+    if ($content.attr('aria-expanded')) {
+        deprecate['aria-expanded']();
+        if ($content.attr('aria-expanded') === 'true') {
+            $content.addClass('expanded');
+        }
+        $content.removeAttr('aria-expanded');
+    }
+    /* end of depraction */
+
+    return {
+        $content,
+        isTriggerParent,
+        $shortContent,
+        isExpanded: $content.hasClass('expanded'),
+        height: $content.css('min-height'),
+        isCollapsible: $trigger.data('collapsible') !== false,
+        textReplacement: $trigger.attr('data-replace-text'),
+    };
 };
 
-var replaceText = function (properties) {
-    if (properties.replaceText) {
-        var $replaceElement = properties.replaceSelector ?
-            properties.$trigger.find(properties.replaceSelector) :
-            properties.$trigger;
+function expand($trigger) {
+    const { $content, isTriggerParent, $shortContent, textReplacement } = getExpanderProperties($trigger);
+
+    $trigger.attr('aria-expanded', 'true');
+    $content.addClass('expanded');
+    $content.removeAttr('hidden');
+    replaceText($trigger, textReplacement);
 
-        properties.$trigger.attr('data-replace-text', $replaceElement.text());
-        $replaceElement.text(properties.replaceText);
+    if (isTriggerParent) {
+        $shortContent.hide();
     }
-};
 
-//events that the expander listens to
-var EXPANDER_EVENTS = {
-    'aui-expander-invoke': function (event) {
-        var $trigger = $(event.currentTarget);
-        var $content = $document.find('#' + $trigger.attr('aria-controls'));
-        var isCollapsible = $trigger.data('collapsible') !== false;
+    $trigger.trigger('aui-expander-expanded');
+}
 
-        //determine if content should be expanded or collapsed
-        if ($content.attr('aria-expanded') === 'true' && isCollapsible) {
-            $trigger.trigger('aui-expander-collapse');
-        } else {
-            $trigger.trigger('aui-expander-expand');
-        }
-    },
+function collapse($trigger) {
+    const { $content, isTriggerParent, $shortContent, textReplacement } = getExpanderProperties($trigger);
 
-    'aui-expander-expand': function (event) {
-        var properties = getExpanderProperties(event);
+    replaceText($trigger, textReplacement);
+    $trigger.attr('aria-expanded', 'false');
+    $content.removeClass('expanded');
 
-        // If the expander is already expanded, do nothing.
-        if (properties.$content.attr('aria-expanded') === 'true') {
-            return;
-        }
+    if (isTriggerParent) {
+        $shortContent.show();
+    }
 
-        properties.$content.attr('aria-expanded', 'true');
-        properties.$trigger.attr('aria-expanded', 'true');
+    if ($content.outerHeight() === 0) {
+        $content.attr('hidden', '');
+    }
 
-        properties.$content.get(0).removeAttribute('hidden');
+    $trigger.trigger('aui-expander-collapsed');
+}
 
-        //handle replace text
-        replaceText(properties);
 
-        //if the trigger is the parent also hide the short-content (default)
-        if (properties.triggerIsParent) {
-            properties.$shortContent.hide();
-        }
-        properties.$trigger.trigger('aui-expander-expanded');
+function init($trigger) {
+    const { $content, isTriggerParent, isExpanded } = getExpanderProperties($trigger);
 
-    },
+    /**
+     * ! Deprecated since 9.9.0
+     * delete at version 10.0.0
+     */
+    const selector = $trigger.data('replace-selector');
+    if (selector) {
+        deprecate['replace-selector']();
+    }
+    if ($content.attr('aria-expanded')) {
+        deprecate['aria-expanded']();
+        if ($content.attr('aria-expanded') === 'true') {
+            $content.addClass('expanded');
+        }
+        $content.removeAttr('aria-expanded');
+    }
 
-    'aui-expander-collapse': function (event) {
-        var properties = getExpanderProperties(event);
+    const $shortContent = isTriggerParent ? $trigger.find('.aui-expander-short-content') : null;
+    if ($shortContent) {
+        deprecate['short-content']();
+    }
+    /* end of depraction */
 
-        // If the expander is already collapsed, do nothing.
-        if (properties.$content.attr('aria-expanded') !== 'true') {
-            return;
-        }
+    if ($content.outerHeight() === 0) {
+        !isExpanded && $content.attr('hidden', '');
+    }
+    $trigger.attr('aria-expanded', isExpanded ? 'true' : 'false');
+}
+
+const replaceText = ($trigger, textReplacement) => {
+    if (!textReplacement) { return };
+
+    /**
+     * ! Deprecated since 9.9.0
+     * delete at version 10.0.0
+     */
+    const selector = $trigger.data('replace-selector');
+    if (selector) {
+        deprecate['replace-selector']();
+        const $deprecatedReplaceElement = $trigger.find(selector);
+        $trigger.attr('data-replace-text', $deprecatedReplaceElement.text());
+        $deprecatedReplaceElement.text(textReplacement);
+        return;
+    }
+    /* end of depraction */
 
-        //handle replace text
-        replaceText(properties);
+    const $deepestChild = $trigger.find(':not(:has(*)):first');
+    const $replaceElement = $deepestChild.length ? $deepestChild : $trigger;
+    $trigger.attr('data-replace-text', $replaceElement.text());
+    $replaceElement.text(textReplacement);
+};
 
-        //collapse the expander
-        properties.$content.attr('aria-expanded', 'false');
-        properties.$trigger.attr('aria-expanded', 'false');
+const EXPANDER_EVENTS = {
+    'aui-expander-invoke': function (event) {
+        const $trigger = $(event.currentTarget)
+        const { isCollapsible, isExpanded } = getExpanderProperties($trigger);
 
-        //if the trigger is the parent also hide the short-content (default)
-        if (properties.triggerIsParent) {
-            properties.$shortContent.show();
+        if (isExpanded && isCollapsible) {
+            $trigger.trigger('aui-expander-collapse');
+        } else {
+            $trigger.trigger('aui-expander-expand');
         }
+    },
 
-        //handle the height option
-        if (properties.$content.outerHeight() === 0) {
-            properties.$content.get(0).setAttribute('hidden', '');
-        }
+    'aui-expander-expand': function (event) {
+        expand($(event.currentTarget))
+    },
 
-        properties.$trigger.trigger('aui-expander-collapsed');
+    'aui-expander-collapse': function (event) {
+        collapse($(event.currentTarget));
     },
 
     'click.aui-expander': function (event) {
-        var $target = $(event.currentTarget);
+        const $target = $(event.currentTarget);
         $target.trigger('aui-expander-invoke', event.currentTarget);
     }
 };
 
-//delegate events to the triggers on the page
-$document.on(EXPANDER_EVENTS, '.aui-expander-trigger');
+$(document).on(EXPANDER_EVENTS, '.aui-expander-trigger');
+$(document).ready(function() {
+    $('.aui-expander-trigger').each(function() {
+        const $trigger = $(this);
+        init($trigger);
+    })
+})

package/src/less/aui-buttons.less

@@ -80,6 +80,42 @@ a.aui-button,
     }
 }
 
+// Warning button type
+.aui-button-warning {
+    #aui-buttons.aui-warning-button-style(normal);
+
+    &:hover,
+    &:focus {
+        #aui-buttons.aui-warning-button-style(hover);
+    }
+
+    &:active {
+        #aui-buttons.aui-warning-button-style(active);
+    }
+
+    &.active {
+        #aui-buttons.aui-button-style(selected);
+    }
+}
+
+// Danger button type
+.aui-button-danger {
+    #aui-buttons.aui-danger-button-style(normal);
+
+    &:hover,
+    &:focus {
+        #aui-buttons.aui-danger-button-style(hover);
+    }
+
+    &:active {
+        #aui-buttons.aui-danger-button-style(active);
+    }
+
+    &.active {
+        #aui-buttons.aui-button-style(selected);
+    }
+}
+
 // Link + Text button types
 .aui-button-link,
 .aui-button-text {

package/src/less/aui-experimental-expander.less

@@ -1,49 +1,55 @@
 @import (reference) './imports/global';
 
 .aui-expander-short-content[hidden],
-.aui-expander-content[hidden],
-.aui-expander-content[aria-expanded="true"] .aui-expander-ellipsis /* reveal-text pattern */ {
+.aui-expander-content[hidden] {
     display: none;
 }
 
-.aui-expander-content,
-.aui-expander-content[aria-expanded="false"] {
-    height: 0;  /* Collapsed by default */
+.aui-expander-content {
+    height: 0;
     overflow: hidden;
     position: relative;
 }
 
-.aui-expander-content[aria-expanded="true"] {
-    height: auto;   /* Expanded by default */
+/**
+* ! Deprecated since 9.9.0
+* delete at version 10.0.0
+* aria-expanded will no longer be used as an
+* determinant if the expander is expanded
+*/
+.aui-expander-content[aria-expanded="true"],
+.aui-expander-content.expanded {
+    height: auto;
 }
 
 .aui-expander-trigger {
     cursor: pointer;
+    color: var(--aui-link-color);
+    padding: 0;
+    background-color: inherit;
+    border: none;
+    text-decoration: underline;
 }
 
 /* ADG REVEAL TEXT PATTERN */
-a.aui-expander-trigger.aui-expander-reveal-text {
+.aui-expander-trigger.aui-expander-reveal-text {
     background: @aui-panel-bg-color;
     bottom: 0;
     position: absolute;
     right: 0;
-    text-decoration: none;
     padding-left: 10px;
-}
-
-.aui-expander-trigger.aui-expander-reveal-text:hover > span {
-    text-decoration: underline;
-}
-
-.aui-expander-trigger.aui-expander-reveal-text:before {
-    color: @aui-text-color;
-    content: "\2026\00a0"; /* ellipsis */
-}
+    padding-block: 2px;
 
-.aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text:before {
-    display: none;  /* Hide the ellipsis when expanded */
+    &:before {
+        color: @aui-text-color;
+        content: "\2026\00a0"; /* ellipsis */
+    }
 }
 
-.aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text {
+.aui-expander-trigger.aui-expander-reveal-text[aria-expanded="true"] {
     position: relative;
+
+    &::before {
+        display: none;
+    }
 }

package/src/less/imports/aui-theme/components/buttons.less

@@ -113,6 +113,46 @@
         #aui-buttons.aui-button-style(disabled);
     }
 
+    .aui-warning-button-style(normal) {
+        --aui-btn-bg: var(--aui-button-warning-bg-color);
+        --aui-btn-text: var(--aui-button-warning-text-color);
+        font-weight: @aui-font-weight-medium;
+    }
+
+    .aui-warning-button-style(hover) {
+        --aui-btn-bg: var(--aui-button-warning-hover-bg-color);
+        --aui-btn-text: var(--aui-button-warning-active-text-color);
+    }
+
+    .aui-warning-button-style(active) {
+        --aui-btn-bg: var(--aui-button-warning-active-bg-color);
+        --aui-btn-text: var(--aui-button-warning-active-text-color);
+    }
+
+    .aui-warning-button-style(disabled) {
+        #aui-buttons.aui-button-style(disabled);
+    }
+
+    .aui-danger-button-style(normal) {
+        --aui-btn-bg: var(--aui-button-danger-bg-color);
+        --aui-btn-text: var(--aui-button-danger-text-color);
+        font-weight: @aui-font-weight-medium;
+    }
+
+    .aui-danger-button-style(hover) {
+        --aui-btn-bg: var(--aui-button-danger-hover-bg-color);
+        --aui-btn-text: var(--aui-button-danger-active-text-color);
+    }
+
+    .aui-danger-button-style(active) {
+        --aui-btn-bg: var(--aui-button-danger-active-bg-color);
+        --aui-btn-text: var(--aui-button-danger-active-text-color);
+    }
+
+    .aui-danger-button-style(disabled) {
+        #aui-buttons.aui-button-style(disabled);
+    }
+
     .aui-subtle-button-style(normal) {
         --aui-btn-bg: var(--aui-button-subtle-bg-color, transparent);
         --aui-btn-border: var(--aui-button-subtle-border-color, transparent);

package/src/less/imports/aui-theme/core/colors.less

@@ -145,6 +145,20 @@
         --aui-button-primary-active-text-color: @ak-color-N0;
         --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
         --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
+        --aui-button-warning-bg-color: @ak-color-Y300;
+        --aui-button-warning-text-color: @ak-color-N800;
+        --aui-button-warning-hover-bg-color: @ak-color-Y500;
+        --aui-button-warning-active-bg-color: darken(@ak-color-Y500, 10%);
+        --aui-button-warning-active-text-color: @ak-color-N800;
+        --aui-button-warning-selected-bg-color: @ak-color-Y500;
+        --aui-button-warning-selected-text-color: @ak-color-N800;
+        --aui-button-danger-bg-color: @ak-color-R500;
+        --aui-button-danger-text-color: @ak-color-N0;
+        --aui-button-danger-hover-bg-color: darken(@ak-color-R500, 10%);
+        --aui-button-danger-active-bg-color: darken(@ak-color-R500, 20%);
+        --aui-button-danger-active-text-color: @ak-color-N0;
+        --aui-button-danger-selected-bg-color: darken(@ak-color-R500, 10%);
+        --aui-button-danger-selected-text-color: @ak-color-N0;
         --aui-button-light-bg-color: @ak-color-N0;
         --aui-button-subtle-text-color: @ak-color-N600;
 
@@ -482,6 +496,20 @@
         --aui-button-primary-active-text-color: @ak-color-N0;
         --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
         --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
+        --aui-button-warning-bg-color: @ak-color-Y300;
+        --aui-button-warning-text-color: @ak-color-N20;
+        --aui-button-warning-hover-bg-color: @ak-color-Y200;
+        --aui-button-warning-active-bg-color: @ak-color-Y100;
+        --aui-button-warning-active-text-color: @ak-color-N20;
+        --aui-button-warning-selected-bg-color: @ak-color-Y200;
+        --aui-button-warning-selected-text-color: @ak-color-N20;
+        --aui-button-danger-bg-color: @ak-color-R200;
+        --aui-button-danger-text-color: @ak-color-N0;
+        --aui-button-danger-hover-bg-color: @ak-color-R100;
+        --aui-button-danger-active-bg-color: @ak-color-R75;
+        --aui-button-danger-active-text-color: @ak-color-N0;
+        --aui-button-danger-selected-bg-color: @ak-color-R100;
+        --aui-button-danger-selected-text-color: @ak-color-N0;
         --aui-button-light-bg-color: transparent;
         --aui-button-subtle-text-color: @ak-color-N600;
 
@@ -818,6 +846,20 @@
         --aui-button-primary-active-text-color: var(--ds-text-inverse, @ak-color-N0);
         --aui-button-primary-disabled-bg-color: var(--aui-button-default-disabled-bg-color);
         --aui-button-primary-disabled-text-color: var(--aui-button-default-disabled-text-color);
+        --aui-button-warning-bg-color: var(--ds-background-warning-bold, @ak-color-Y300);
+        --aui-button-warning-text-color: var(--ds-text-warning-inverse, @ak-color-N800);
+        --aui-button-warning-hover-bg-color: var(--ds-background-warning-bold-hovered, @ak-color-Y500);
+        --aui-button-warning-active-bg-color: var(--ds-background-warning-bold-pressed, darken(@ak-color-Y500, 10%));
+        --aui-button-warning-active-text-color: var(--ds-text-warning-inverse, @ak-color-N800);
+        --aui-button-warning-selected-bg-color: var(--ds-background-warning-bold-hovered, @ak-color-N800);
+        --aui-button-warning-selected-text-color: var(--ds-text-warning-inverse, @ak-color-N800);
+        --aui-button-danger-bg-color: var(--ds-background-danger-bold, @ak-color-R500);
+        --aui-button-danger-text-color: var(--ds-text-inverse, @ak-color-N0);
+        --aui-button-danger-hover-bg-color: var(--ds-background-danger-bold-hovered, darken(@ak-color-R500, 10%));
+        --aui-button-danger-active-bg-color: var(--ds-background-danger-bold-pressed, darken(@ak-color-R500, 20%));
+        --aui-button-danger-active-text-color: var(--ds-text-inverse, @ak-color-N0);
+        --aui-button-danger-selected-bg-color: var(--ds-background-danger-bold-hovered, darken(@ak-color-R500, 10%));
+        --aui-button-danger-selected-text-color: var(--ds-text-inverse, @ak-color-N0);
         --aui-button-light-bg-color: var(--ds-background-input, @ak-color-N0);
         --aui-button-subtle-text-color: var(--ds-text, @ak-color-N600);