@atlassian/aui 9.9.3 → 9.9.5

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

@@ -36,7 +36,7 @@ a.aui-label:active {
 
 .aui-label-split .aui-label-split-main:hover,
 .aui-label-split .aui-label-split-main:active,
-.aui-label-split .aui-label-split-main:focus{
+.aui-label-split .aui-label-split-main:focus {
     text-decoration: none;
 }
 
@@ -55,7 +55,6 @@ a.aui-label:active {
     top: 0;
     bottom: 0;
     width: @aui-label-close-button-width;
-    filter: opacity(0.5);
 
     //The close cross
     &::before {
@@ -64,10 +63,18 @@ a.aui-label:active {
         font-size: 10px;
         margin: auto;
     }
+}
+
+/*
+ * Hover pseudo class can't be triggered in automated tests
+ * As a workaround we use a normal css class for testing
+ */
+.aui-label-closeable:has(.aui-icon-close:hover),
+.aui-label-closeable:has(.aui-icon-close.hover) {
+    background: @aui-label-closable-bg-color;
+    color: @aui-label-closable-text-color;
 
-    &:hover, &:focus {
-        background: var(--aui-label-close-hover-bg-color);
-        color: var(--aui-label-close-hover-text-color);
-        filter: none;
+    a.aui-label-split-main {
+        color: @aui-label-closable-text-color;
     }
 }

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

@@ -3,13 +3,14 @@
 @import (reference) './imports/aui-theme/components/forms';
 
 @label-left-offset: 20px;
-@button-border-width: 2px;
+@button-border-width: @aui-form-button-border-width;
 @button-focus-size: 12px;
 @button-focus-border-color: @aui-focus-ring-color;
 @button-focus-border: @aui-form-button-focus-border-width solid @button-focus-border-color;
 
 @radio-offset-top: 4px;
 @radio-offset-left: 0px;
+@radio-glyph-offset-adjustment: 2px;
 
 @checkbox-offset-top: 3px;
 @checkbox-offset-left: 0px;
@@ -48,26 +49,32 @@ form.aui:not(.aui-legacy-forms) {
         top: @radio-offset-top - 1px;
     }
     .aui-radio-position(iconfont) {
-        @fudge: 2px; // the glyph renders in a slightly different position for font-related reasons.
         position: absolute;
-        left: @radio-offset-left - @fudge/2;
-        top: @radio-offset-top - @fudge;
+        left: @radio-offset-left - @radio-glyph-offset-adjustment/2;
+        top: @radio-offset-top - @radio-glyph-offset-adjustment;
+    }
+    .aui-radio-outline-position() {
+        position: absolute;
+        left: @radio-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @radio-offset-top - 1px - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-checkbox-position() {
         position: absolute;
         left: @checkbox-offset-left;
         top: @checkbox-offset-top;
     }
-    .aui-checkbox-focus-position() {
+    .aui-checkbox-outline-position() {
         position: absolute;
-        left: @checkbox-offset-left - @aui-form-button-focus-border-width + 1px;
-        top: @checkbox-offset-top - @aui-form-button-focus-border-width + 1px;
+        left: @checkbox-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @checkbox-offset-top - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-radio-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @radio-disabled-bg-color;
             border-color: transparent;
             background: transparent;
@@ -75,9 +82,11 @@ form.aui:not(.aui-legacy-forms) {
     }
     .aui-checkbox-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @checkbox-disabled-icon-color;
             border-color: @checkbox-disabled-border-color;
             background: @checkbox-disabled-bg-color;
@@ -200,8 +209,8 @@ form.aui:not(.aui-legacy-forms) {
             }
 
             &:focus + .aui-form-glyph::after {
-                .aui-radio-focus-size();
-                .aui-radio-focus-position();
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-radio-outline-position();
 
                 content: "";
 
@@ -209,10 +218,6 @@ form.aui:not(.aui-legacy-forms) {
                 border-radius: @aui-form-button-size;
                 background-color: transparent;
             }
-
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
         }
     }
 
@@ -269,25 +274,17 @@ form.aui:not(.aui-legacy-forms) {
                 }
             }
 
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
-        }
-    }
+            &:focus + .aui-form-glyph::after {
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-checkbox-outline-position();
 
-    //
-    // Focus styles
-    //
+                content: "";
 
-    .aui-radio-focus-size() {
-        display: inline-block;
-        width: @aui-form-button-size;
-        height: @aui-form-button-size;
-    }
-    .aui-radio-focus-position() {
-        position: absolute;
-        left: @radio-offset-left;
-        top: @radio-offset-top - 1px;
+                border: @button-focus-border;
+                border-radius: @checkbox-border-radius;
+                background-color: transparent;
+            }
+        }
     }
 
 }

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

@@ -32,6 +32,7 @@
 // Blues
 @ak-color-B50: #DEEBFF;
 @ak-color-B75: #B3D4FF;
+@ak-color-B90: #60a4ff;
 @ak-color-B100: #4C9AFF;
 @ak-color-B200: #2684FF;
 @ak-color-B300: #0065FF;

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

@@ -38,7 +38,9 @@
 @aui-form-transition-time: 0.2s;
 
 @aui-form-button-size: 10px;
+@aui-form-button-border-width: 2px;
 @aui-form-button-focus-border-width: 2px;
+@aui-form-radio-checkbox-outline-padding-space: 2px;
 
 #aui-forms {
     .aui-input-field-style(normal) {
@@ -73,6 +75,12 @@
         width: @aui-form-button-size;
         height: @aui-form-button-size;
     }
+
+    .aui-radio-checkbox-outline-size() {
+        display: inline-block;
+        width: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
+        height: @aui-form-button-size + @aui-form-button-border-width * 2 + (@aui-form-radio-checkbox-outline-padding-space * 2);
+    }
 }
 
 #aui-legacy-forms {

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

@@ -6,5 +6,7 @@
 @aui-label-border-color: var(--aui-label-bg-color);
 @aui-label-hover-bg-color: var(--aui-label-hover-bg-color);
 @aui-label-hover-border-color: var(--aui-label-hover-bg-color);
+@aui-label-closable-bg-color: var(--aui-label-close-hover-bg-color);
+@aui-label-closable-text-color: var(--aui-label-close-hover-text-color);
 
 @aui-label-border-radius: @aui-border-radius-smallish;

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

@@ -167,8 +167,8 @@
         --aui-label-link-color: inherit;
         --aui-label-bg-color: @ak-color-N20;
         --aui-label-hover-bg-color: @ak-color-N20;
-        --aui-label-close-hover-bg-color: @ak-color-R75;
-        --aui-label-close-hover-text-color: @ak-color-N800;
+        --aui-label-close-hover-bg-color: @ak-color-R50;
+        --aui-label-close-hover-text-color: @ak-color-R500;
 
         // Forms
         --aui-form-placeholder-text-color: @ak-color-N300;
@@ -210,8 +210,8 @@
         --aui-form-checkbox-active-bg-color: @ak-color-B50;
         --aui-form-checkbox-active-border-color: @ak-color-B50;
         --aui-form-checkbox-active-icon-color: @ak-color-B400;
-        --aui-form-radio-unchecked-bg-color: @ak-color-N10;
-        --aui-form-radio-unchecked-border-color: @ak-color-N40;
+        --aui-form-radio-unchecked-bg-color: @ak-color-N20;
+        --aui-form-radio-unchecked-border-color: @ak-color-N200;
 
         // Toggle
         --aui-toggle-default-bg-color: @ak-color-N200;
@@ -374,7 +374,7 @@
         --aui-border: @ak-color-N50;
         --aui-border-strong: @ak-color-N100;
         --aui-focus: @ak-color-B100;
-        --aui-link-color: @ak-color-B100;
+        --aui-link-color: @ak-color-B90;
         --aui-link-decoration: none;
         --aui-link-hover-color: @ak-color-B75;
         --aui-link-active-color: @ak-color-B200;
@@ -516,10 +516,10 @@
         // "Labels" (e.g., page tags, selected values in components, etc.)
         --aui-label-text-color: @ak-color-N800;
         --aui-label-link-color: @ak-color-N800;
-        --aui-label-bg-color: @ak-color-N70;
+        --aui-label-bg-color: @ak-color-N50;
         --aui-label-hover-bg-color: @ak-color-N80;
-        --aui-label-close-hover-bg-color: @ak-color-R400;
-        --aui-label-close-hover-text-color: @ak-color-N30;
+        --aui-label-close-hover-bg-color: @ak-color-R50;
+        --aui-label-close-hover-text-color: @ak-color-R500;
 
         // Forms
         --aui-form-placeholder-text-color: @ak-color-N200;
@@ -561,8 +561,8 @@
         --aui-form-checkbox-active-bg-color: @ak-color-B50;
         --aui-form-checkbox-active-border-color: @ak-color-B50;
         --aui-form-checkbox-active-icon-color: @ak-color-B200;
-        --aui-form-radio-unchecked-bg-color: @ak-color-N10;
-        --aui-form-radio-unchecked-border-color: @ak-color-N70;
+        --aui-form-radio-unchecked-bg-color: @ak-color-N20;
+        --aui-form-radio-unchecked-border-color: @ak-color-N200;
 
         // Toggle
         --aui-toggle-default-bg-color: @ak-color-N90;
@@ -868,8 +868,8 @@
         --aui-label-link-color: var(--ds-link);
         --aui-label-bg-color: var(--ds-background-neutral, @ak-color-N20);
         --aui-label-hover-bg-color: var(--ds-background-neutral, @ak-color-N20);
-        --aui-label-close-hover-bg-color: var(--ds-background-accent-red-subtle, @ak-color-R75);
-        --aui-label-close-hover-text-color: var(--ds-icon-accent-gray, @ak-color-N800);
+        --aui-label-close-hover-bg-color: var(--ds-background-danger, @ak-color-R50);
+        --aui-label-close-hover-text-color: var(--ds-text-danger, @ak-color-R500);
 
         // Forms
         --aui-form-placeholder-text-color: var(--ds-text-subtlest, @ak-color-N300);
@@ -877,9 +877,9 @@
         --aui-form-label-text-color: var(--ds-text-subtle, @ak-color-N200);
         --aui-form-error-text-color: var(--ds-text-danger, @ak-color-R400);
         --aui-form-description-text-color: var(--ds-text-subtlest, @ak-color-N200);
-        --aui-form-disabled-field-bg-color: var(--ds-text-disabled, @ak-color-N20);
-        --aui-form-disabled-field-text-color: var(--ds-text-subtlest, @ak-color-N80);
-        --aui-form-disabled-field-label-color: var(--ds-text-subtle, @ak-color-N80);
+        --aui-form-disabled-field-bg-color: var(--ds-background-disabled, @ak-color-N20);
+        --aui-form-disabled-field-text-color: var(--ds-text-disabled, @ak-color-N80);
+        --aui-form-disabled-field-label-color: var(--ds-text-disabled, @ak-color-N80);
         --aui-form-field-border-color: var(--ds-border-input, @ak-color-N40);
         --aui-form-field-hover-border-color: var(--ds-border-focused, @ak-color-N40);
         --aui-form-field-default-text-color: var(--ds-text, @ak-color-N800);
@@ -912,7 +912,7 @@
         --aui-form-checkbox-active-border-color: var(--ds-border-accent-blue, @ak-color-B50);
         --aui-form-checkbox-active-icon-color: var(--ds-icon-information, @ak-color-B400);
         --aui-form-radio-unchecked-bg-color: var(--ds-background-input, @ak-color-N10);
-        --aui-form-radio-unchecked-border-color: var(--ds-border-input, @ak-color-N40);
+        --aui-form-radio-unchecked-border-color: var(--ds-border-bold, @ak-color-N100);
 
         // Toggle
         --aui-toggle-default-bg-color: var(--ds-background-neutral-bold, @ak-color-N200);

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

@@ -9,5 +9,7 @@
 @aui-z-blanket: @aui-z-layer-min - 500; // so it appears below modals
 @aui-z-skip: @aui-z-layer-min + 1000; // so they appear above modals
 @aui-z-flag-container: @aui-z-layer-min + 1000; // so they appear above modals
-@aui-z-select2: @aui-z-layer-min + 3; // so it can paint an "overlay" behind its suggestion dropdown
+// default auiSelect2 z-index, so it can paint an "overlay" behind its suggestion dropdown
+// overridden by select2.js based on layer z-index
+@aui-z-select2: @aui-z-layer-min + 3;
 @aui-z-tooltip: @aui-z-layer-min + 2000; // so they appear over the top of pretty much everything

package/entry/token-themes-generated/p2/aui-prototyping-design-tokens-base-themes.js

@@ -1,26 +0,0 @@
-let style;
-
-
-/* ------ THEME: light ------ */
-
-style = document.createElement('style');
-style.dataset.theme = 'light';
-style.textContent += require('./themes/light.js').default;
-document.head.appendChild(style);
-
-
-
-/* ------ THEME: dark ------ */
-
-style = document.createElement('style');
-style.dataset.theme = 'dark';
-style.textContent += require('./themes/dark.js').default;
-document.head.appendChild(style);
-
-
-/* ------ THEME: original ------ */
-
-style = document.createElement('style');
-style.dataset.theme = 'original';
-style.textContent += '';
-document.head.appendChild(style);

package/entry/token-themes-generated/p2/aui-prototyping-design-tokens-theme-import-map.js

@@ -1,47 +0,0 @@
-export default {
-	'light': () => import(
-		/* webpackChunkName: "./themes/light" */
-		'./themes/light.js'
-	),
-	'dark': () => import(
-		/* webpackChunkName: "./themes/dark" */
-		'./themes/dark.js'
-	),
-	'legacy-light': () => import(
-		/* webpackChunkName: "./themes/legacy-light" */
-		'./themes/legacy-light.js'
-	),
-	'legacy-dark': () => import(
-		/* webpackChunkName: "./themes/legacy-dark" */
-		'./themes/legacy-dark.js'
-	),
-	'spacing': () => import(
-		/* webpackChunkName: "./themes/spacing" */
-		'./themes/spacing.js'
-	),
-	'typography': () => import(
-		/* webpackChunkName: "./themes/typography" */
-		'./themes/typography.js'
-	),
-	'shape': () => import(
-		/* webpackChunkName: "./themes/shape" */
-		'./themes/shape.js'
-	),
-	'typography-adg3': () => import(
-		/* webpackChunkName: "./themes/typography-adg3" */
-		'./themes/typography-adg3.js'
-	),
-	'typography-minor3': () => import(
-		/* webpackChunkName: "./themes/typography-minor3" */
-		'./themes/typography-minor3.js'
-	),
-	'light-new-input-border': () => import(
-		/* webpackChunkName: "./themes/light-new-input-border" */
-		'./themes/light-new-input-border.js'
-	),
-	'dark-new-input-border': () => import(
-		/* webpackChunkName: "./themes/dark-new-input-border" */
-		'./themes/dark-new-input-border.js'
-	),
-	'original': () => Promise.resolve(''),
-};