@atlassian/aui 9.6.0 → 9.7.0-5d50c8a74

package/entry/aui.design-tokens-api.js

@@ -0,0 +1,2 @@
+// Enable design tokens themes
+export * from '@atlassian/aui/src/js/aui/design-tokens/design-tokens';

package/entry/styles/aui.page.design-tokens-mode.js

@@ -0,0 +1 @@
+import '@atlassian/aui/src/less/themes/design-tokens.aui-theme.less';

package/entry/styles/aui.page.reset.js

@@ -1 +1,2 @@
 import '@atlassian/aui/src/less/aui-reset.less';
+import './aui.page.design-tokens-mode';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.6.0",
+    "version": "9.7.0-5d50c8a74",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -24,7 +24,7 @@
         "src",
         "CHANGELOG.md",
         "CONTRIBUTING.md",
-        "LICENSE.md",
+        "LICENSE",
         "README.md",
         "yarn.lock"
     ],
@@ -33,6 +33,7 @@
         "jquery": "^2 || ^3"
     },
     "dependencies": {
+        "@atlaskit/tokens": "^1.2.11",
         "@atlassian/tipsy": "1.3.3",
         "@popperjs/core": "2.11.6",
         "backbone": "1.4.1",
@@ -54,6 +55,7 @@
         "cross-env": "7.0.3",
         "eslint": "7.32.0",
         "glob": "7.2.3",
+        "react": "^18.2.0",
         "ignore-emit-webpack-plugin": "2.0.6",
         "jquery": "3.5.1",
         "jquery-migrate": "3.4.1",

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

@@ -0,0 +1,104 @@
+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);
+    }
+}
+
+// Export for NPM bundle, for which Webpack automatically puts those functions under AJS.DesignTokens
+export const {
+    setGlobalTheme,
+    token,
+    themeObjectToString,
+    themeStringToObject,
+    getTokenValue
+} = 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
+});

package/src/js/aui/form-notification.js

@@ -6,6 +6,10 @@ import {getMessageLogger} from './internal/deprecation'
 
 const CLASS_NOTIFICATION_INITIALISED = '_aui-form-notification-initialised';
 
+const ARIA_INFO_ATTRIBUTE = 'aria-describedby';
+const ARIA_DESCRIPTION_POSTFIX = 'description';
+const ARIA_ERROR_POSTFIX = 'errors';
+
 const ATTRIBUTE_NOTIFICATION_PREFIX = 'data-aui-notification-';
 const ATTRIBUTE_NOTIFICATION_WAIT = ATTRIBUTE_NOTIFICATION_PREFIX + 'wait';
 const ATTRIBUTE_NOTIFICATION_INFO = ATTRIBUTE_NOTIFICATION_PREFIX + 'info';
@@ -37,9 +41,16 @@ function prepareFieldMarkup($field) {
 
 function appendDescription($field, message) {
     message = message ? message : getNotificationMessage($field);
+
     if (getFieldNotificationType($field) === ATTRIBUTE_NOTIFICATION_INFO) {
-        $field.after(descriptionTemplate(message))
+        const existingDescription = $field.parent().find('.description');
+
+        if (!existingDescription.length) {
+            $field.after(descriptionTemplate($field, message))
+        }
     }
+
+    updateAriaInfo($field);
 }
 
 function getNotificationMessage($field) {
@@ -59,7 +70,7 @@ function jsonToArray(jsonOrString) {
 }
 
 function getFieldNotificationType($field) {
-    var fieldNotificationType;
+    let fieldNotificationType;
     NOTIFICATION_PRIORITY.some(function (prioritisedNotification) {
         if ($field.is('[' + prioritisedNotification + ']')) {
             fieldNotificationType = prioritisedNotification;
@@ -94,25 +105,46 @@ function synchroniseNotificationDisplay(field) {
     }
 }
 
+function updateAriaInfo($field) {
+    const labels = [];
+    const id = $field.attr('id') || $field.attr('name');
+    const type = getFieldNotificationType($field);
+    const message = getNotificationMessage($field);
+
+    if (message && type === ATTRIBUTE_NOTIFICATION_ERROR) {
+        labels.push(`${id}-${ARIA_ERROR_POSTFIX}`);
+    }
+
+    if (getMessageContainer($field, 'description').length) {
+        labels.push(`${id}-${ARIA_DESCRIPTION_POSTFIX}`);
+    }
+
+    $field.attr(ARIA_INFO_ATTRIBUTE, !!labels.length ? labels.join(' ') : null);
+}
+
 function isJqueryObject(el) {
     return el.constructor.prototype.hasOwnProperty('jquery');
 }
 
-function errorMessageTemplate(messages) {
-    let list = messages
-        .map(message => `<li><span class="aui-icon aui-icon-small aui-iconfont-error aui-icon-notification">${message}</span>${message}</li>`)
+function errorMessageTemplate($field, messages) {
+    const id = $field.attr('id') || $field.attr('name');
+    const list = messages
+        .map(message => `<li><span class="aui-icon aui-icon-small aui-iconfont-error aui-icon-notification"></span>${message}</li>`)
         .join('');
-    return `<div class="error"><ul>${list}</ul></div>`;
+
+    return `<div class="error" id="${id}-${ARIA_ERROR_POSTFIX}"><ul>${list}</ul></div>`;
 }
 
-function descriptionTemplate(messages) {
+function descriptionTemplate($field, messages) {
+    const id = $field.attr('id') || $field.attr('name');
+
     if (messages.length > 1) {
         let list = messages
             .map(message => `<li>${message}</li>`)
             .join('');
-        return `<div class="description"><ul>${list}</ul></div>`;
+        return `<div class="description" id="${id}-${ARIA_DESCRIPTION_POSTFIX}"><ul>${list}</ul></div>`;
     }
-    return `<div class="description">${messages}</div>`;
+    return `<div class="description" id="${id}-${ARIA_DESCRIPTION_POSTFIX}">${messages}</div>`;
 }
 
 function appendErrorMessages($field, messages) {
@@ -120,7 +152,8 @@ function appendErrorMessages($field, messages) {
     if (previousErrors.length > 0) {
         previousErrors.remove();
     }
-    $field.after(errorMessageTemplate(messages));
+    $field.after(errorMessageTemplate($field, messages));
+    updateAriaInfo($field);
 }
 
 function getMessageContainer($field, type) {
@@ -165,6 +198,7 @@ export {
     getMessageContainer,
     appendErrorMessages,
     appendDescription,
+    updateAriaInfo,
     errorMessageTemplate,
     setFieldSpinner
 }

package/src/js/aui/form-validation.js

@@ -1,6 +1,12 @@
 import $ from './jquery';
 import './form-notification';
-import {appendDescription, appendErrorMessages, getMessageContainer, setFieldSpinner} from './form-notification';
+import {
+    appendDescription,
+    appendErrorMessages,
+    getMessageContainer,
+    setFieldSpinner,
+    updateAriaInfo
+} from './form-notification';
 import './form-validation/basic-validators';
 import amdify from './internal/amdify';
 import * as deprecate from './internal/deprecation';
@@ -241,6 +247,7 @@ function removeFieldNotification($field, type) {
     $field.removeAttr(ATTRIBUTE_NOTIFICATION_PREFIX + type);
     if (type === 'error') {
         getMessageContainer($field, type).remove();
+        updateAriaInfo($field);
     }
 }
 

package/src/js/aui/internal/globalize.js

@@ -8,7 +8,7 @@ function initNamespace() {
 }
 
 /**
- * Makes given value available globally under window[name] attribute.
+ * Makes given value available globally under window[NAMESPACE][name] attribute.
  * Keep in mind that this is needed for p2-plugin where chunks of AUI
  * can be loaded separately.
  *

package/src/js/aui/select2.js

@@ -12,19 +12,19 @@ import '../../js-vendor/jquery/plugins/jquery.select2';
  * way, calling code will be able to call $thing.select2() as if they were calling the original library,
  * and ADG styling will just magically happen.
  */
-var originalSelect2 = $.fn.select2;
+const originalSelect2 = $.fn.select2;
 
 // AUI-specific classes
-var auiContainer = 'aui-select2-container';
-var auiDropdown = 'aui-select2-drop aui-dropdown2';
-var auiHasAvatar = 'aui-has-avatar';
+const auiContainer = 'aui-select2-container';
+const auiDropdown = 'aui-select2-drop aui-dropdown2';
+const auiHasAvatar = 'aui-has-avatar';
 
 $.fn.auiSelect2 = function (first) {
-    var updatedArgs;
+    let updatedArgs;
 
     if ($.isPlainObject(first)) {
-        var auiOpts = $.extend({}, first);
-        var auiAvatarClass = auiOpts.hasAvatar ? ' ' + auiHasAvatar : '';
+        const auiOpts = $.extend({}, first);
+        const auiAvatarClass = auiOpts.hasAvatar ? ' ' + auiHasAvatar : '';
         //add our classes in addition to those the caller specified
         auiOpts.containerCssClass  = auiContainer + auiAvatarClass + (auiOpts.containerCssClass ? ' ' + auiOpts.containerCssClass : '');
         auiOpts.dropdownCssClass  = auiDropdown + auiAvatarClass + (auiOpts.dropdownCssClass  ? ' ' + auiOpts.dropdownCssClass : '');
@@ -39,5 +39,55 @@ $.fn.auiSelect2 = function (first) {
         updatedArgs = arguments;
     }
 
-    return originalSelect2.apply(this, updatedArgs);
+    const result = originalSelect2.apply(this, updatedArgs);
+    const select2Instance = this;
+    const searchLabel = updatedArgs[0].searchLabel;
+
+    select2Instance.on('select2-open', function () {
+        const $selectInput = $(this);
+
+        if (updatedArgs[0].multiple || $selectInput.attr('multiple')) {
+            // This is a multi-select, exiting
+            return;
+        }
+
+        const $selectDropdown = $selectInput.select2('dropdown')
+
+        if (searchLabel) {
+            $selectDropdown.find('.select2-search label').text(searchLabel);
+        }
+
+        // AUI-5461: when single select dropdown opens up, the first option is
+        // instantly focused, making SRs announce it, while skipping the search field
+        $selectDropdown.find('.select2-search .select2-input').attr('aria-activedescendant', '');
+    });
+
+    select2Instance.on('select2-focus', function () {
+        const $selectInput = $(this);
+        const $container = $selectInput.parent().find('.select2-container');
+
+        if (updatedArgs[0].multiple || $selectInput.attr('multiple')) {
+            if (searchLabel) {
+                $container.find('.select2-search-field label').text(searchLabel);
+            }
+
+            return;
+        }
+
+        const $focusserLabel = $container.find('label');
+        if ($focusserLabel.attr('id')) {
+            // The id is already assigned, exiting
+            return;
+        }
+
+        // AUI-5462: when single select is initialized, the selected option container is
+        // linked to the button via aria-labelledby, preventing SRs from reading its label
+        const $focusserInput = $container.find('.select2-focusser');
+        const labelId = $focusserInput.attr('id') + '-label';
+        const ariaLabelledby = $focusserInput.attr('aria-labelledby');
+        $focusserLabel.attr('id', labelId);
+        $focusserInput.attr('aria-labelledby', labelId + ' ' + ariaLabelledby);
+    });
+
+    return result;
 };

package/src/js/aui/toggle.js

@@ -52,7 +52,7 @@ const formAttributeHandler = {
     }
 };
 
-var idAttributeHandler = {
+const idAttributeHandler = {
     removed: removedAttributeHandler.bind(this, 'id'),
     fallback: function (element, change) {
         const val = `${change.newValue}${INPUT_SUFFIX}`;
@@ -60,7 +60,7 @@ var idAttributeHandler = {
     }
 };
 
-var valueAttributeHandler = {
+const valueAttributeHandler = {
     removed: function(element) {
         removedAttributeHandler.call(this, 'value', element);
         // Internet Explorer 11 has a bug where it doesn't clear out the previous value
@@ -72,7 +72,7 @@ var valueAttributeHandler = {
     }
 };
 
-var checkedAttributeHandler = {
+const checkedAttributeHandler = {
     removed: function (element) {
         getInput(element).checked = false;
     },
@@ -81,7 +81,7 @@ var checkedAttributeHandler = {
     }
 };
 
-var labelHandler = {
+const labelHandler = {
     removed: function (element) {
         getInput(element).removeAttribute('aria-label');
     },
@@ -91,7 +91,7 @@ var labelHandler = {
 };
 
 function clickHandler(element, e) {
-    var input = getInput(element);
+    const input = getInput(element);
     if (!element.disabled && !element.busy && e.target !== input) {
         input.checked = !input.checked;
         fireChangeEvent(element);
@@ -140,7 +140,7 @@ const ToggleEl = skate('aui-toggle', {
     // (which prevents our click handler from being called),
     // while allow the element to still participate in the form.
     template: skateTemplateHtml(
-        '<input type="checkbox" class="aui-toggle-input assistive">',
+        '<input type="checkbox" role="switch" class="aui-toggle-input assistive">',
         '<span class="aui-toggle-view">',
         '<span class="aui-toggle-tick aui-icon aui-icon-small aui-iconfont-success"></span>',
         '<span class="aui-toggle-cross aui-icon aui-icon-small aui-iconfont-close-dialog"></span>',

package/src/js/aui/tooltip.js

@@ -57,8 +57,9 @@ class Tooltip {
         this.triggerElement = triggerElement;
         this.$triggerElement = $(this.triggerElement);
         this.options = { ...defaultOptions, ...options };
-        this.enabled = this.options.enabled
-        this.moveTitleToTooltip()
+        this.enabled = this.options.enabled;
+        this.moveTitleToTooltip();
+        this.initContainer();
     }
 
     destroy() {
@@ -96,13 +97,15 @@ class Tooltip {
         this.$triggerElement.off(`.${pluginKey}`);
     }
 
-    buildTip(title) {
-        const options = this.options;
+    initContainer() {
         if ($sharedTip === undefined || $sharedTip.get(0) && !$sharedTip.get(0).isConnected) {
             $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`);
             $(document.body).append($sharedTip);
         }
+    }
 
+    buildTip(title) {
+        const options = this.options;
         const tooltipContentElement = $sharedTip.find('.aui-tooltip-content');
 
         if (options.html) {
@@ -140,10 +143,14 @@ class Tooltip {
             return;
         }
 
-        this.hide();
+        // In order to avoid flickering of the tooltip when we have the same content we need to skip hiding.
+        const isNewTooltip = $sharedTip && tipTitle !== $sharedTip.text();
+        if (isNewTooltip) {
+            this.hide();
+        }
+
         const triggerElement = this.triggerElement;
         const placement = GRAVITY_MAP[this.options.gravity];
-        clearTimeout(this.popperTimeout);
 
         if (typeof this.options.suppress === 'function') {
             if (this.options.suppress.call(triggerElement) === true) {
@@ -152,34 +159,32 @@ class Tooltip {
         }
 
         const tipNode = this.buildTip(tipTitle).get(0);
-        this.popperTimeout = setTimeout(() => {
-            this.showTooltip();
-
-            this.popperInstance = createPopper(triggerElement, tipNode, {
-                placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 4],
-                        },
-                    },
-                ],
-            });
 
-            $(window).on(`scroll.${pluginKey}`, () => this.hide());
-        }, AUI_TOOLTIP_TIMEOUT);
+        this.showTooltip();
+
+        this.popperInstance = createPopper(triggerElement, tipNode, {
+            placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 4],
+                    },
+                },
+            ],
+        });
 
+        $(window).on(`scroll.${pluginKey}`, () => this.hide());
     }
 
     hide() {
         this.hideTooltip();
-        clearTimeout(this.popperTimeout);
 
         if (this.popperInstance) {
             this.popperInstance.destroy();
             delete this.popperInstance;
         }
+
         $(window).off(`scroll.${pluginKey}`);
     }
 
@@ -221,6 +226,8 @@ const namespacify = events => events.map(event => `${event}.${pluginKey}`).join(
 
 const activationEvents = namespacify(['mouseenter', 'focus']);
 const deactivationEvents = namespacify(['click', 'mouseleave', 'blur']);
+let showTimeoutId;
+let hideTimeoutId;
 
 $.fn.tooltip = function (arg) {
     // We have an actual jQuery collection available under `this`
@@ -246,16 +253,47 @@ $.fn.tooltip = function (arg) {
         return $collection;
     }
 
-    const options = arg || {}
+    const options = arg || {};
+
+    const clearAllTimers = function () {
+        clearTimeout(hideTimeoutId);
+        clearTimeout(showTimeoutId);
+    };
+
+    const updateTooltipEvents = function () {
+        $sharedTip.off(`mouseenter.${pluginKey}`);
+        $sharedTip.off(`mouseleave.${pluginKey}`);
+
+        $sharedTip.on(`mouseenter.${pluginKey}`, () => {
+            clearAllTimers();
+        });
+        $sharedTip.on(`mouseleave.${pluginKey}`, () => {
+            clearAllTimers();
+            hide();
+        });
+    }
 
     const show = function () {
+        // Stop all events that were triggered by different tooltip
+        clearAllTimers();
+
         const tooltip = getTooltipInstance(this, options);
-        tooltip.show();
+        showTimeoutId = setTimeout(() => {
+            clearAllTimers();
+            tooltip.show();
+            $sharedTip && updateTooltipEvents();
+        }, AUI_TOOLTIP_TIMEOUT);
+
     }
 
     const hide = function () {
+        // Stop all events that were triggered by different tooltip
+        clearAllTimers();
+
         const tooltip = getTooltipInstance(this, options);
-        tooltip.hide();
+        hideTimeoutId = setTimeout(() => {
+            tooltip.hide();
+        }, AUI_TOOLTIP_TIMEOUT);
     }
 
     const selector = options.live;

package/src/js/aui-css-deprecations.js

@@ -131,3 +131,11 @@ css('.aui-dropdown2-tailed', {
     removeInVersion: '10.0.0',
     extraInfo: 'ADGS does not include tails on layered components'
 })
+
+// 9.7.0
+css('form.aui .multi-select', {
+    sinceVersion: '9.7.0',
+    displayName: 'Multi-select',
+    removeInVersion: '11.0.0',
+    extraInfo: 'Default browser behavior for selecing items is non-intuitive and non-accessible. Use Select2 instead.'
+});

package/src/less/aui-banner.less

@@ -28,11 +28,10 @@
     --aui-message-padding: 10px;
     --aui-message-gutter: 40px;
     --aui-message-isize: @aui-icon-size-small;
-    // AUI-5192: currentColor is quoted to work around Edge 18 bug.
-    --aui-focus: 'currentcolor';
-    --aui-link-color: 'currentcolor';
-    --aui-link-hover-color: 'currentcolor';
-    --aui-link-active-color: 'currentcolor';
+    --aui-focus: currentcolor;
+    --aui-link-color: currentcolor;
+    --aui-link-hover-color: currentcolor;
+    --aui-link-active-color: currentcolor;
     border-radius: 0;
     box-shadow: none;
     margin-top: 0;

package/src/less/aui-close-button.less

@@ -9,8 +9,7 @@
     border: 0;
     border-radius: @aui-border-radius-smallish;
     cursor: pointer;
-    // AUI-5192: currentColor is quoted to work around Edge 18 bug.
-    color: var(--aui-close-button-icon-color, 'currentcolor');
+    color: var(--aui-close-button-icon-color, currentcolor);
     height: @aui-close-button-size;
     width: @aui-close-button-size;
     line-height: 100%;

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

@@ -3,7 +3,7 @@
 .aui-tooltip {
     background-color: var(--aui-tooltip-bg-color);
     padding: 2px 6px;
-    pointer-events: none;
+
     z-index: @aui-z-tooltip;
     border-radius: @aui-border-radius-small;
     font-size: @aui-font-size-small;

package/src/less/aui-spinner.less

@@ -37,7 +37,7 @@ aui-spinner {
             left: 0;
             animation: 0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite spinnerRotateAnimation;
             fill: none;
-            stroke: currentColor;
+            stroke: currentcolor;
             stroke-dasharray: calc(@size * 2.8);
             stroke-dashoffset: calc(@size * 2.25);
             stroke-linecap: round;

package/src/less/forms-radios-and-checkboxes.less

@@ -31,8 +31,6 @@
 
 @radio-unchecked-bg-color: var(--aui-form-radio-unchecked-bg-color);
 @radio-unchecked-border-color: var(--aui-form-radio-unchecked-border-color);
-@radio-unchecked-hover-bg-color: var(--aui-form-radio-unchecked-hover-bg-color);
-@radio-unchecked-hover-border-color: var(--aui-form-radio-unchecked-hover-border-color);
 @radio-checked-bg-color: var(--aui-form-glyph-fill-color);
 @radio-disabled-bg-color: var(--aui-form-glyph-disabled-icon-color);
 @radio-disabled-border-color: var(--aui-form-glyph-disabled-fill-color);

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

@@ -116,7 +116,7 @@
     .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);
-        --aui-btn-text: var(--aui-button-subtle-text-color, currentColor);
+        --aui-btn-text: var(--aui-button-subtle-text-color, currentcolor);
     }
 
     .aui-link-button-style(normal) {

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

@@ -18,7 +18,6 @@
 @aui-form-select-bg-color: var(--aui-form-select-bg-color);
 @aui-form-select-border-color: var(--aui-form-select-border-color);
 @aui-form-select-hover-bg-color: var(--aui-form-select-hover-bg-color);
-@aui-form-checkbox-radio-hover-bg-color: var(--aui-form-checkbox-radio-hover-bg-color);
 @aui-form-checkbox-radio-active-bg-color: var(--aui-form-checkbox-radio-active-bg-color);
 @aui-form-optgroup-text-color: var(--aui-form-optgroup-text-color);
 @aui-form-optgroup-bg-color: var(--aui-form-optgroup-bg-color);