@atlassian/aui 9.12.8 → 9.12.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.12.8",
+    "version": "9.12.10",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -42,7 +42,7 @@
         "@popperjs/core": "2.11.8",
         "backbone": "1.6.0",
         "css.escape": "1.5.1",
-        "dompurify": "2.5.7",
+        "dompurify": "^3.2.5",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.3",
         "skatejs": "0.13.17",

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

@@ -5,8 +5,8 @@ const testingColorVariableName = '--aui-theme-testing-color';
 const defaultTestingColor = 'color(srgb 1 0.75 0.8 / 0.6)';
 const testingThemeTargetClass = 'aui-theme-testing';
 const testingThemeSelector =
-    `html.${testingThemeTargetClass}[data-theme*="light:"], ` +
-    `html.${testingThemeTargetClass}[data-theme*="dark:"]`;
+    `html.${testingThemeTargetClass}[data-color-mode][data-theme*="light:"], ` +
+    `html.${testingThemeTargetClass}[data-color-mode][data-theme*="dark:"]`;
 
 /**
  * Theme that replaces all the design tokens with single color, helping to visually identify custom colors on the page
@@ -34,7 +34,7 @@ const testingThemeSelector =
 
     const themeElement = document.createElement('style');
     themeElement.id = 'aui-design-tokens-testing-theme';
-    themeElement.innerText = themeCSS;
+    themeElement.textContent = themeCSS;
 
     const head = document.querySelector('head');
     if (head) {

package/src/js/aui/dropdown2.js

@@ -659,7 +659,10 @@ function bindItemInteractionBehaviourToDropdown(dropdown) {
             }
 
             // Focus the current element to allow Screen Reader to announce a focused menuitem.
-            e.currentTarget.focus();
+            // disabled the focus in each mouse move since it makes dropdowns unsable in Safari & Firefox
+            // reference issue: https://jira.atlassian.com/browse/JRASERVER-78765
+            // details: https://hello.atlassian.net/wiki/spaces/~7120201281a7adebab4dd281f34ba58638925c/folder/5220871005
+            // e.currentTarget.focus();
 
             // We should close all submenus above which are not related to the focused trigger.
             // For example if we hover over the trigger for submenu for this trigger be shown, when we move

package/src/less/aui-avatars.less

@@ -138,7 +138,7 @@
             color: var(--aui-avatar-text);
             display: grid;
             place-items: center;
-            background-color: var(--aui-body-background);
+            background-color: var(--aui-avatar-background);
             font-size: calc(var(--aui-avatar-size) / 3);
         }
         &-menu {

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

@@ -68,7 +68,8 @@
 
         // Avatars
         --aui-avatar-outline: @ak-color-N0;
-        --aui-avatar-text: @ak-color-N100;
+        --aui-avatar-text: var(--aui-button-default-text-color);
+        --aui-avatar-background: var(--aui-button-default-bg-color);
 
         // Lozenges
         --aui-lozenge-bg-color: @ak-color-N500;
@@ -420,7 +421,8 @@
 
         // Avatars
         --aui-avatar-outline: @ak-color-N0;
-        --aui-avatar-text: @ak-color-N100;
+        --aui-avatar-text: var(--aui-button-default-text-color);
+        --aui-avatar-background: var(--aui-button-default-bg-color);
 
         // Lozenges
         --aui-lozenge-bg-color: @ak-color-N500;
@@ -771,7 +773,8 @@
 
         // Avatars
         --aui-avatar-outline: var(--ds-border-inverse, @ak-color-N0);
-        --aui-avatar-text: var(--ds-text-inverse, @ak-color-N100);
+        --aui-avatar-text: var(--aui-button-default-text-color);
+        --aui-avatar-background: var(--aui-button-default-bg-color);
 
         // Lozenges
         --aui-lozenge-bg-color: var(--ds-background-neutral-bold, @ak-color-N500);
@@ -992,7 +995,7 @@
         --aui-table-caption-bg-color: var(--ds-background-accent-gray-subtlest, @ak-color-N20);
         --aui-table-caption-text-color: var(--ds-text-subtle, @ak-color-N100);
         --aui-table-list-row-hover-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N30A);
-        --aui-table-list-row-subtle-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N60);
+        --aui-table-list-row-subtle-color: var(--ds-text-subtlest, @ak-color-N60);
         --aui-table-sortable-hover-bg-color: var(--ds-background-neutral-subtle-hovered, @ak-color-N30A);
         --aui-table-sortable-active-bg-color: var(--ds-background-accent-blue-subtler, @ak-color-B50);
         --aui-table-sortable-active-border-color: var(--ds-border-accent-blue, @ak-color-B500);