@atlassian/aui 9.12.6 → 9.13.0-50607a7cb

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

@@ -1,5 +1,6 @@
 @import (reference) 'core-variables';
 @import (reference) 'component-variables';
+@import (reference) '../mixins/look-and-feel';
 
 :root {
     #aui-themes.light();
@@ -17,13 +18,26 @@
 @design-tokens-light-theme-enabled: ~'@{design-tokens-mode-enabled}@{light-mode-enabled}';
 @design-tokens-dark-theme-enabled: ~'@{design-tokens-mode-enabled}@{dark-mode-enabled}';
 
-
 @{design-tokens-mode-enabled} {
     #aui-themes.design-tokens();
-};
 
-#aui-themes {
+    // The L&F switched colors are dependent on color channels of the design
+    // tokens, so will be available only when design tokens are loaded.
+    #aui.lf-define-switched-color(
+        @switch-on: --atl-theme-primary-color;
+        @token: '--ds-text';
+    );
+    #aui.lf-define-switched-color(
+        @switch-on: --atl-theme-primary-color;
+        @token: '--ds-background-neutral-hovered';
+    );
+    #aui.lf-define-switched-color(
+        @switch-on: --atl-theme-primary-color;
+        @token: '--ds-background-neutral-subtle-pressed';
+    );
+}
 
+#aui-themes {
     // The mixins are intended to apply certain styles only when the light or
     // dark color mode is on.  They support both the classic approach to the
     // themes and the new recommended design-tokens one.  `data-color-mode`

package/src/less/imports/mixins/dropdown2-trigger-chevron-icon.less

@@ -2,7 +2,6 @@
 
 #aui {
     .aui-dropdown2-trigger-chevron-icon(@glyphsize: @aui-icon-size-small; @canvassize: @aui-icon-size-small-canvas) {
-
         #aui.icon-pseudoelement(@aui-icon-font-family);
         content: @aui-glyph-chevron-down;
         font-size: @glyphsize;

package/src/less/imports/mixins/focus.less

@@ -36,14 +36,22 @@
         // Remove default focus styles for mouse users ONLY if
         // :focus-visible (or its polyfill) is supported on this platform.
         // The selectors are discrete because CSS ignores an entire ruleset if one selector is invalid.
-        html:not(.aui-no-focusvisible).js-focus-visible &:focus:not(.focus-visible) { .hide-outline(); }
-        html:not(.aui-no-focusvisible) &:focus:not(:focus-visible) { .hide-outline(); }
+        html:not(.aui-no-focusvisible).js-focus-visible &:focus:not(.focus-visible) {
+            .hide-outline();
+        }
+        html:not(.aui-no-focusvisible) &:focus:not(:focus-visible) {
+            .hide-outline();
+        }
 
         // Affect the potential CSS standard pseudo-selector
         // Its mozilla-specific implementation, and
         // a CSS class added by the WICG polyfill.
         // The selectors are discrete because CSS ignores an entire ruleset if one selector is invalid.
-        html:not(.aui-no-focusvisible).js-focus-visible &.focus-visible { @rules(); }
-        html:not(.aui-no-focusvisible) &:focus-visible { @rules(); }
+        html:not(.aui-no-focusvisible).js-focus-visible &.focus-visible {
+            @rules();
+        }
+        html:not(.aui-no-focusvisible) &:focus-visible {
+            @rules();
+        }
     }
 }

package/src/less/imports/mixins/look-and-feel.less

@@ -0,0 +1,66 @@
+#aui {
+    /**
+     * Create an internal variable whose value is based on the @token value in light/dark themes,
+     * switching based on the perceptual lightness of @switch-on.
+     *
+     * Can only be used on tokens defined in tokenNamesToExtract in extractColorChannels (called
+     * at build step).
+    */
+    .lf-define-switched-color(
+        @switch-on: --atl-theme-primary-color;
+        @token;
+    ) {
+        /*
+        The following expression switches between two colors, whose oklch channels (l c h, and a
+        for alpha) are in separate variables built on base name, based on the perceptual lightness
+        of the input color.
+
+        l (perceptual lightness) ranges from 0 to 1; rounding gives 0 or 1; interpolation works
+        like a switch. We add 0.1 because I found it gives better contrast for some in-between
+        colors (though it might be only applicable to the current values of --ds-text and might
+        need adjustment in an unprobable case those values are changed):
+
+        round(l + 0.1) * (var(--l2) - var(--l1)) + var(--l1)
+        ^.. when 0 ..^   ^ this doesn't count  ^   ^ and we get l1
+        ^.. when 1 ..^   ^ we get l2, cause -l1+l1=0
+
+        Safari has a limitation: it doesn't allow round() in this particular expression. So we
+        mimic it with the min/max trick. `min(l-0.6,1)` transforms the lower part of the range into
+        a zero; the multiply by 100 preserves zeroes, but makes any positive number (to a
+        resolution of 0.01 which is good enough) into a 1 or more, which min(x,1) clamps to 1. (The
+        browser logic would do the last `min` here, but we include it for clarity.)
+
+        Use ~'<text>' syntax to bypass Less resolving the functions `min` and `max`.
+        */
+
+        @base: ~'--auix@{token}';
+        @switched-color: ~'@{base}-s';
+
+        @supports (color: rgb(from white r g b)) {
+            @{switched-color}: ~'oklch(
+                from var(@{switch-on})
+                calc(min(max(0, l - 0.6) * 100, 1) * (var(@{base}-l1) - var(@{base}-l2)) + var(@{base}-l2))
+                calc(min(max(0, l - 0.6) * 100, 1) * (var(@{base}-c1) - var(@{base}-c2)) + var(@{base}-c2))
+                calc(min(max(0, l - 0.6) * 100, 1) * (var(@{base}-h1) - var(@{base}-h2)) + var(@{base}-h2))
+                /
+                calc(min(max(0, l - 0.6) * 100, 1) * (var(@{base}-a1) - var(@{base}-a2)) + var(@{base}-a2))
+            )';
+        }
+    }
+
+    /**
+     * Define a variable @name that'll take its value from a lf-switched variable (must be defined
+     * earlier via lf-define-switched-color), or @fallback when the lf input variable is not
+     * defined.
+     */
+    .define-lf-variable(
+        @name;
+        @token;
+        @fallback;
+    ) {
+        @base: ~'--auix@{token}';
+        @switched-color: ~'@{base}-s';
+
+        @{name}: var(@switched-color, var(@fallback));
+    }
+}

package/src/less/imports/mixins/media-queries.less

@@ -11,13 +11,13 @@
 }
 
 .legacy-edge(@rules) {
-    @supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
+    @supports (-ms-accelerator: true) or (-ms-ime-align: auto) {
         @rules();
     }
 }
 
 .firefox(@rules) {
-    @media all and (min--moz-device-pixel-ratio:0) {
+    @media all and (min--moz-device-pixel-ratio: 0) {
         @rules();
     }
 }

package/src/less/imports/mixins/shadows.less

@@ -35,7 +35,9 @@
 
         // Internal use only
         .z-base(@shadow) {
-            box-shadow: @shadow, 0 0 1px var(--aui-shadow2);
+            box-shadow:
+                @shadow,
+                0 0 1px var(--aui-shadow2);
             // Improve legibility of the element's "border" in Legacy Edge.
             .legacy-edge({
                 box-shadow: @shadow,

package/src/less/imports/mixins/tab-indicator.less

@@ -8,7 +8,7 @@
         &::before {
             background: @background;
             bottom: 0;
-            content: "";
+            content: '';
             display: block;
             height: @aui-tab-break-height;
             left: @horizontal-gutter;
@@ -25,7 +25,7 @@
         &::before {
             background: @background;
             bottom: @vertical-gutter;
-            content: "";
+            content: '';
             display: block;
             height: initial;
             position: absolute;

package/src/less/imports/mixins.less

@@ -45,7 +45,11 @@
     .gradient {
         .vertical(@start-color: #fff, @end-color: #f2f2f2, @start-percent: 0%, @end-percent: 100%) {
             background: @end-color;
-            background: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
+            background: linear-gradient(
+                to bottom,
+                @start-color @start-percent,
+                @end-color @end-percent
+            );
         }
     }
 
@@ -91,7 +95,9 @@
 
         .fadeOut(@length: 0.2s, @delay: 0s) {
             opacity: 0;
-            transition: opacity @length, visibility @length;
+            transition:
+                opacity @length,
+                visibility @length;
             transition-delay: @delay;
             visibility: hidden;
         }
@@ -102,7 +108,7 @@
     }
 
     .height-calc(@calc) {
-        height: ~"calc(@{calc})";
+        height: ~'calc(@{calc})';
     }
 
     .placeholder(@color) {
@@ -111,7 +117,8 @@
             opacity: 1;
         }
         // Target AUI's JS equivalent of the CSS proposal for the `:placeholder-shown` pseudo-class.
-        &.aui-placeholder-shown, &.placeholder-shown {
+        &.aui-placeholder-shown,
+        &.placeholder-shown {
             color: @color;
         }
     }

package/src/less/inline-dialog.less

@@ -8,7 +8,9 @@ aui-inline-dialog {
     --aui-tail-x: 0;
     --aui-tail-y: 0;
     --aui-tail-w: @aui-inline-dialog2-arrow-side-length;
-    --aui-tail-bw: calc(var(--aui-inline-dialog-border-width) + @aui-inline-dialog2-arrow-border-width);
+    --aui-tail-bw: calc(
+        var(--aui-inline-dialog-border-width) + @aui-inline-dialog2-arrow-border-width
+    );
 
     display: block;
     position: absolute;
@@ -46,7 +48,7 @@ aui-inline-dialog {
         border: var(--aui-tail-w) solid transparent;
         border-bottom-color: @aui-inline-dialog-bg-color;
         box-sizing: border-box;
-        content: "";
+        content: '';
         display: inline-block;
         height: 0;
         pointer-events: none;
@@ -61,60 +63,60 @@ aui-inline-dialog {
 
     // 'top _' alignment
     &.aui-alignment-side-top,
-    &.aui-alignment-side-bottom[data-popper-placement*="top"] {
+    &.aui-alignment-side-bottom[data-popper-placement*='top'] {
         --aui-tail-deg: 180deg;
         --aui-tail-y: var(--aui-tail-w);
 
         &:before {
-            top: calc(~"100%" - var(--aui-tail-w));
+            top: calc(~'100%' - var(--aui-tail-w));
         }
 
         &:after {
-            top: calc(~"100%" - var(--aui-tail-w) - var(--aui-tail-bw));
+            top: calc(~'100%' - var(--aui-tail-w) - var(--aui-tail-bw));
         }
     }
 
     // 'bottom _' alignment
     &.aui-alignment-side-bottom,
-    &.aui-alignment-side-top[data-popper-placement*="bottom"] {
+    &.aui-alignment-side-top[data-popper-placement*='bottom'] {
         --aui-tail-deg: 0deg;
         --aui-tail-y: var(--aui-tail-w);
 
         &:before {
-            top: calc(~"0%" - var(--aui-tail-w));
+            top: calc(~'0%' - var(--aui-tail-w));
         }
         &:after {
-            top: calc(~"0%" - var(--aui-tail-w) + var(--aui-tail-bw));
+            top: calc(~'0%' - var(--aui-tail-w) + var(--aui-tail-bw));
         }
     }
 
     // 'left _' alignment
     &.aui-alignment-side-left,
-    &.aui-alignment-side-right[data-popper-placement*="left"] {
+    &.aui-alignment-side-right[data-popper-placement*='left'] {
         --aui-tail-deg: 90deg;
         --aui-tail-x: var(--aui-tail-w);
 
         &:before {
-            left: calc(~"100%" - var(--aui-tail-w));
+            left: calc(~'100%' - var(--aui-tail-w));
         }
 
         &:after {
-            left: calc(~"100%" - var(--aui-tail-w) - var(--aui-tail-bw));
+            left: calc(~'100%' - var(--aui-tail-w) - var(--aui-tail-bw));
         }
     }
 
     // 'right _' alignment
     &.aui-alignment-side-right,
-    &.aui-alignment-side-left[data-popper-placement*="right"] {
+    &.aui-alignment-side-left[data-popper-placement*='right'] {
         --aui-tail-deg: -90deg;
         --aui-tail-x: var(--aui-tail-w);
 
         &:before {
-            left: calc(~"0%" - var(--aui-tail-w));
+            left: calc(~'0%' - var(--aui-tail-w));
         }
 
         &:after {
-            left: calc(~"0%" - var(--aui-tail-w) + var(--aui-tail-bw));
+            left: calc(~'0%' - var(--aui-tail-w) + var(--aui-tail-bw));
         }
     }
 
@@ -127,13 +129,13 @@ aui-inline-dialog {
     // '_ center' alignment
     &.aui-alignment-snap-center:before,
     &.aui-alignment-snap-center:after {
-        left: calc(~"50%" - var(--aui-tail-w));
+        left: calc(~'50%' - var(--aui-tail-w));
     }
 
     // '_ right' alignment
     &.aui-alignment-snap-right:before,
     &.aui-alignment-snap-right:after {
-        left: calc(~"100%" - ((var(--aui-tail-w) * 3) - @aui-inline-dialog2-arrow-edge-offset));
+        left: calc(~'100%' - ((var(--aui-tail-w) * 3) - @aui-inline-dialog2-arrow-edge-offset));
     }
 
     // '_ top' alignment
@@ -145,13 +147,13 @@ aui-inline-dialog {
     // '_ middle' alignment
     &.aui-alignment-snap-middle:before,
     &.aui-alignment-snap-middle:after {
-        top: calc(~"50%" - var(--aui-tail-w));
+        top: calc(~'50%' - var(--aui-tail-w));
     }
 
     // '_ bottom' alignment
     &.aui-alignment-snap-bottom:before,
     &.aui-alignment-snap-bottom:after {
-        top: calc(~"100%" - (var(--aui-tail-w) * 3) - @aui-inline-dialog2-arrow-edge-offset);
+        top: calc(~'100%' - (var(--aui-tail-w) * 3) - @aui-inline-dialog2-arrow-edge-offset);
     }
 }
 
@@ -199,7 +201,7 @@ aui-inline-dialog {
         border-color: @aui-inline-dialog-border-color transparent;
         border-style: solid;
         border-width: 0 8px 8px;
-        content: "";
+        content: '';
         left: -8px;
         position: absolute;
         top: 0;

package/src/less/layer.less

@@ -12,8 +12,6 @@
     #aui.focus-visible(#aui.with-focus-ring());
 }
 
-
-
 .aui-blanket {
     #aui.transition.fadeOut(@aui-blanket-fade-time, @aui-blanket-fade-delay);
 

package/src/less/messages.less

@@ -62,7 +62,8 @@ aui-message {
     }
 }
 
-aui-message, .aui-message {
+aui-message,
+.aui-message {
     margin: (@aui-grid*2) 0 0 0;
 
     &:first-child {

package/src/less/single-select.less

@@ -19,7 +19,7 @@
         padding: @aui-dropdown-group-spacing 0;
     }
 
-    [role="option"] {
+    [role='option'] {
         color: inherit;
         display: block;
         padding: 3px 10px;
@@ -45,7 +45,7 @@
         margin: 0;
         padding-left: 0;
 
-        [role="option"] {
+        [role='option'] {
             #aui-nav.item-base();
             #aui-nav.item-style(normal);
 
@@ -58,7 +58,7 @@
             }
         }
 
-        &:not(:hover) [role="option"].aui-select-active {
+        &:not(:hover) [role='option'].aui-select-active {
             #aui-nav.item-style(hover);
         }
     }
@@ -70,12 +70,12 @@
 @select-trigger-padding-left: 6px;
 @select-trigger-padding-right: 6px;
 @select-trigger-arrow-width: 8px;
-@select-trigger-width: @aui-button-border-width * 2 + @select-trigger-padding-left + @select-trigger-arrow-width + @select-trigger-padding-right;
+@select-trigger-width: @aui-button-border-width * 2 + @select-trigger-padding-left +
+    @select-trigger-arrow-width + @select-trigger-padding-right;
 @select-trigger-arrow-height: (@select-trigger-arrow-width / 2);
 
 form.aui:not(.aui-legacy-forms) aui-select,
 aui-select {
-
     display: inline-block;
     position: relative;
     max-width: @aui-form-field-width-default;
@@ -84,7 +84,8 @@ aui-select {
     #aui-forms.aui-input-field-style(normal);
     font-size: @aui-font-size-medium;
 
-    &:hover { // need this to make same hover for input on actually button hover
+    &:hover {
+        // need this to make same hover for input on actually button hover
         input {
             #aui-forms.aui-input-field-style(hover);
         }
@@ -106,7 +107,8 @@ aui-select {
         background-position: @aui-select-image-in-input-left @aui-select-image-in-input-top;
         background-repeat: no-repeat;
         background-size: @aui-select-image-size;
-        padding-left: @aui-select-image-size + @aui-select-image-in-input-left + @aui-select-image-in-input-right;
+        padding-left: @aui-select-image-size + @aui-select-image-in-input-left +
+            @aui-select-image-in-input-right;
     }
 
     select,
@@ -138,7 +140,7 @@ aui-select {
             #aui.aui-dropdown2-trigger-chevron-icon();
         }
 
-        &[aria-expanded="true"]:not([aria-busy])::before {
+        &[aria-expanded='true']:not([aria-busy])::before {
             transform: rotate(180deg);
         }
     }
@@ -168,7 +170,8 @@ form.aui.aui-legacy-forms aui-select {
         background-position: @aui-select-image-in-input-left @aui-select-image-in-input-top;
         background-repeat: no-repeat;
         background-size: @aui-select-image-size;
-        padding-left: @aui-select-image-size + @aui-select-image-in-input-left + @aui-select-image-in-input-right;
+        padding-left: @aui-select-image-size + @aui-select-image-in-input-left +
+            @aui-select-image-in-input-right;
     }
 
     select,
@@ -207,7 +210,9 @@ form.aui.aui-legacy-forms aui-select {
         &:not([aria-busy])::before {
             #aui.aui-dropdown2-trigger-chevron-icon();
 
-            right: ((@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width *2)) / 2);
+            right: (
+                (@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width * 2)) / 2
+            );
         }
     }
 }

package/src/less/tables.less

@@ -116,7 +116,8 @@ table.aui.aui-table-list,
 table.aui.aui-table-interactive {
     > tbody {
         > tr {
-            &:hover, &:focus-within {
+            &:hover,
+            &:focus-within {
                 background: @aui-table-list-row-hover-color;
             }
             &.aui-row-subtle * {
@@ -125,7 +126,7 @@ table.aui.aui-table-interactive {
                 .aui-avatar,
                 .aui-icon,
                 .aui-button {
-                    opacity: .8;
+                    opacity: 0.8;
                 }
             }
         }

package/src/less/tabs.less

@@ -82,7 +82,8 @@ aui-tabs {
                     text-align: right;
                     text-decoration: none;
                     overflow: hidden;
-                    padding: @aui-tab-padding-y (@aui-tab-padding-x + @aui-tab-break-height) @aui-tab-padding-y @aui-tab-padding-x;
+                    padding: @aui-tab-padding-y (@aui-tab-padding-x + @aui-tab-break-height)
+                        @aui-tab-padding-y @aui-tab-padding-x;
                 }
 
                 strong {
@@ -124,7 +125,7 @@ aui-tabs {
             padding-top: @aui-grid;
         }
 
-        &[data-aui-responsive]:not([data-aui-responsive="false"]) > .tabs-menu {
+        &[data-aui-responsive]:not([data-aui-responsive='false']) > .tabs-menu {
             font-size: 0; // required to remove spacing between inline elements
             flex-wrap: nowrap;
             margin: 0 0 -1px 0;
@@ -132,7 +133,7 @@ aui-tabs {
             white-space: nowrap;
         }
 
-        &[data-aui-responsive]:not([data-aui-responsive="false"]) > .tabs-menu > .menu-item {
+        &[data-aui-responsive]:not([data-aui-responsive='false']) > .tabs-menu > .menu-item {
             float: none;
             flex-shrink: 0;
             font-size: @aui-tabs-font-size; // reset the font-size