@atlassian/aui 9.12.6 → 9.13.0-50607a7cb

package/src/less/aui-appheader.less

@@ -1,5 +1,6 @@
 @import (reference) './imports/global';
 @import (reference) './imports/aui-theme/core/layers';
+@import (reference) './imports/mixins/look-and-feel';
 
 aui-header,
 .aui-header,
@@ -17,8 +18,11 @@ aui-header,
 }
 
 .aui-nav-images() {
-    img, svg {
-        max-height: calc(var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px);
+    img,
+    svg {
+        max-height: calc(
+            var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px
+        );
         display: inline-block;
         vertical-align: text-bottom;
     }
@@ -26,8 +30,40 @@ aui-header,
 
 // Structural styles
 .aui-header {
-    --aui-badge-text-color: var(--aui-appheader-text-color);
-    --aui-badge-bg-color: var(--aui-appheader-item-focus-bg-color);
+    --aui-lf-appheader-bg-color: var(--atl-theme-primary-color, var(--aui-appheader-bg-color));
+
+    #aui.define-lf-variable(
+        @name: --aui-lf-appheader-text-color;
+        @token: '--ds-text';
+        @fallback: --aui-appheader-text-color;
+    );
+
+    #aui.define-lf-variable(
+        @name: --aui-lf-appheader-item-focus-bg-color;
+        @token: '--ds-background-neutral-hovered';
+        @fallback: --aui-appheader-item-focus-bg-color;
+    );
+
+    #aui.define-lf-variable(
+        @name: --aui-lf-appheader-item-focus-text-color;
+        @token: '--ds-text';
+        @fallback: --aui-appheader-item-focus-text-color;
+    );
+
+    #aui.define-lf-variable(
+        @name: --aui-lf-appheader-item-active-bg-color;
+        @token: '--ds-background-neutral-subtle-pressed';
+        @fallback: --aui-appheader-item-active-bg-color;
+    );
+
+    #aui.define-lf-variable(
+        @name: --aui-lf-appheader-item-active-text-color;
+        @token: '--ds-text';
+        @fallback: --aui-appheader-item-active-text-color;
+    );
+
+    --aui-badge-text-color: var(--aui-lf-appheader-text-color);
+    --aui-badge-bg-color: var(--aui-lf-appheader-item-focus-bg-color);
     --aui-appheader-height: auto;
     --aui-appheader-item-height: 40px;
     --aui-appheader-item-border-radius: 0px;
@@ -43,7 +79,8 @@ aui-header,
     }
 
     // Container for the product's name
-    .aui-header-logo, .aui-header-logo a {
+    .aui-header-logo,
+    .aui-header-logo a {
         display: flex;
         align-items: center;
         justify-items: flex-start;
@@ -71,7 +108,7 @@ aui-header,
             text-align: left;
 
             + .aui-header-logo-text {
-                margin-left: .5em;
+                margin-left: 0.5em;
             }
         }
         &.aui-header-logo-textonly .aui-header-logo-device {
@@ -106,14 +143,15 @@ aui-header,
     & {
         // IMPORTANT! Don't set text color here, otherwise it will bleed in to layered elements
         // like modals and dropdowns, which would cause them to render funnily.
-        background: var(--aui-appheader-bg-color);
+        background: var(--aui-lf-appheader-bg-color);
+
         height: var(--aui-appheader-height, initial);
         border-bottom: 1px solid var(--aui-border);
 
         // Set color in locations where it will not bleed in to nested layered components.
         .aui-header-before > :not(.aui-layer),
         .aui-header-logo {
-            color: var(--aui-appheader-text-color, var(--aui-body-text));
+            color: var(--aui-lf-appheader-text-color);
         }
 
         // Target the links in the app header.
@@ -123,31 +161,30 @@ aui-header,
         .aui-header-primary > .aui-nav > li > a:not(.aui-button),
         .aui-header-secondary > .aui-nav > li > a:not(.aui-button),
         .aui-header-logo > a {
-
             & {
                 display: flex;
                 align-items: center;
                 border-radius: var(--aui-appheader-item-border-radius);
                 box-sizing: border-box;
                 height: var(--aui-appheader-item-height, auto);
-                padding: var(--aui-appheader-item-padding-y, 5px) var(--aui-appheader-item-padding-x, 10px);
-                background-color: var(--aui-appheader-item-bg-color, transparent);
-                color: var(--aui-appheader-text-color, var(--aui-body-text));
+                padding: var(--aui-appheader-item-padding-y, 5px)
+                    var(--aui-appheader-item-padding-x, 10px);
+                color: var(--aui-lf-appheader-text-color);
                 text-decoration: none;
             }
 
             &:hover,
             &:focus {
-                background-color: var(--aui-appheader-item-focus-bg-color);
-                color: var(--aui-appheader-item-focus-text-color, inherit);
+                background-color: var(--aui-lf-appheader-item-focus-bg-color);
+                color: var(--aui-lf-appheader-item-focus-text-color, inherit);
             }
 
             #aui.focus(#aui.with-focus-ring(@inset: true));
 
             &:active,
             &.active {
-                background-color: var(--aui-appheader-item-active-bg-color);
-                color: var(--aui-appheader-item-active-text-color);
+                background-color: var(--aui-lf-appheader-item-active-bg-color);
+                color: var(--aui-lf-appheader-item-active-text-color);
             }
         }
 

package/src/less/aui-avatars.less

@@ -43,7 +43,7 @@
 
         #aui-themes.when-design-tokens({
             box-shadow: 0 0 0 2px var(--ds-surface-overlay, #FFFFFF);
-        })
+        });
     }
 
     & img {

package/src/less/aui-banner.less

@@ -25,7 +25,8 @@
         text-decoration: underline;
     }
 
-    &.aui-banner-error, &.aui-banner-warning {
+    &.aui-banner-error,
+    &.aui-banner-warning {
         padding-left: var(--aui-message-gutter);
     }
 

package/src/less/aui-buttons.less

@@ -134,18 +134,19 @@ a.aui-button,
 .aui-button {
     // Selected button state - NOT supported for free-standing primary buttons
     // ARIA usage from http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html
-    &[aria-pressed="true"] {
+    &[aria-pressed='true'] {
         #aui-buttons.aui-button-style(selected);
     }
 
-    &[aria-pressed="true"]:active {
+    &[aria-pressed='true']:active {
         #aui-buttons.aui-button-style(active);
     }
 
     // Disabled button states
     // NOTE: these must be placed after all button types + states
     // in order to avoid excessive selector weight.
-    &[disabled], &[aria-disabled="true"] {
+    &[disabled],
+    &[aria-disabled='true'] {
         & {
             #aui-buttons.aui-button-style(disabled);
         }
@@ -204,7 +205,7 @@ a.aui-button,
 .aui-button.aui-button-compact {
     font-size: @aui-font-size-small;
     height: unit((26px / @aui-font-size-small), em); // 26px with 12px font-size
-    padding: (@aui-button-padding-y / 2) (@aui-button-padding-x * .8);
+    padding: (@aui-button-padding-y / 2) (@aui-button-padding-x * 0.8);
     line-height: unit((20 / @aui-font-size-small));
 }
 
@@ -222,7 +223,7 @@ a.aui-button,
 
 .aui-buttons::after {
     clear: both;
-    content: "";
+    content: '';
     display: table;
 }
 

package/src/less/aui-dark-mode.less

@@ -2,4 +2,4 @@
 
 body.aui-theme-dark {
     #aui-themes.dark();
-};
+}

package/src/less/aui-date-picker.less

@@ -2,7 +2,6 @@
 @import (reference) './imports/mixins/shadows';
 @import (reference) './imports/aui-theme/theme';
 
-
 /*! AUI Date Picker, using jQuery UI Date Picker */
 /*
  * CSS is a bit curious because it has to work both with and without jQuery UI's theme CSS present.
@@ -26,7 +25,7 @@
     #aui.shadow.z200();
 }
 
-.aui-datepicker-dialog[x-placement*="bottom"]{
+.aui-datepicker-dialog[x-placement*='bottom'] {
     #aui-themes.when-light({
         --aui-inline-dialog-bg-color: var(--aui-datepicker-heading-bg-color);
     });
@@ -55,7 +54,7 @@
     height: 14px;
     margin: 0;
     padding: 10px;
-    position:relative;
+    position: relative;
 }
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-title {
@@ -206,9 +205,13 @@
 }
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-prev,
-.aui-datepicker-dialog .ui-datepicker .ui-datepicker-prev-hover { left: 0; }
+.aui-datepicker-dialog .ui-datepicker .ui-datepicker-prev-hover {
+    left: 0;
+}
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-next,
-.aui-datepicker-dialog .ui-datepicker .ui-datepicker-next-hover { right: 0; }
+.aui-datepicker-dialog .ui-datepicker .ui-datepicker-next-hover {
+    right: 0;
+}
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
@@ -233,7 +236,7 @@
 }
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-calendar > thead > tr > th:last-child,
-.aui-datepicker-dialog .ui-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child  {
+.aui-datepicker-dialog .ui-datepicker .ui-datepicker-calendar > tbody > tr > td:last-child {
     padding-right: 5px;
 }
 

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

@@ -17,7 +17,7 @@
 * aria-expanded will no longer be used as an
 * determinant if the expander is expanded
 */
-.aui-expander-content[aria-expanded="true"],
+.aui-expander-content[aria-expanded='true'],
 .aui-expander-content.expanded {
     height: auto;
 }
@@ -42,11 +42,11 @@
 
     &:before {
         color: @aui-text-color;
-        content: "\2026\00a0"; /* ellipsis */
+        content: '\2026\00a0'; /* ellipsis */
     }
 }
 
-.aui-expander-trigger.aui-expander-reveal-text[aria-expanded="true"] {
+.aui-expander-trigger.aui-expander-reveal-text[aria-expanded='true'] {
     position: relative;
 
     &::before {

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

@@ -18,7 +18,7 @@
 }
 
 a.aui-label {
-  color: @aui-label-link-color;
+    color: @aui-label-link-color;
 }
 
 span.aui-label {

package/src/less/aui-experimental-progress-indicator.less

@@ -12,7 +12,7 @@ aui-progressbar {
     border-radius: @aui-progress-indicator-border-radius;
     height: @aui-progress-height;
     overflow: hidden;
-    position: relative;  /* so that animations work */
+    position: relative; /* so that animations work */
     width: 100%;
 }
 
@@ -28,9 +28,15 @@ aui-progressbar {
 }
 
 @keyframes progressSlide {
-    0% { left: 0%; }
-    50% { left: 90%; }
-    100% { left: 0%; }
+    0% {
+        left: 0%;
+    }
+    50% {
+        left: 90%;
+    }
+    100% {
+        left: 0%;
+    }
 }
 
 .aui-progress-indicator[data-value] .aui-progress-indicator-value {

package/src/less/aui-experimental-progress-tracker.less

@@ -22,7 +22,8 @@
 }
 
 /* Progress Bar */
-span, a {
+span,
+a {
     .aui-progress-tracker-step > & {
         #aui.typography.h400();
         font-weight: @aui-font-weight-normal;
@@ -35,7 +36,7 @@ span, a {
         &:before {
             background: @aui-progress-tracker-current-step-color;
             border-radius: 100%;
-            content: "";
+            content: '';
             height: 8px;
             left: 50%;
             margin-left: -5px;
@@ -46,8 +47,10 @@ span, a {
     }
     .aui-progress-tracker-step + .aui-progress-tracker-step > &:after {
         background: @aui-progress-tracker-current-step-color;
-        box-shadow: -5px 0 0 -2px @aui-progress-tracker-current-step-color, 5px 0 0 -2px @aui-progress-tracker-current-step-color;
-        content: "";
+        box-shadow:
+            -5px 0 0 -2px @aui-progress-tracker-current-step-color,
+            5px 0 0 -2px @aui-progress-tracker-current-step-color;
+        content: '';
         height: 8px;
         left: -50%;
         margin-left: -20px; /* touches right edge of previous dot */
@@ -56,11 +59,11 @@ span, a {
         right: 50%;
         top: 4px;
     }
-    .aui-progress-tracker-step-current>& {
+    .aui-progress-tracker-step-current > & {
         color: @aui-progress-tracker-current-step-text-color;
         font-weight: @aui-font-weight-semibold;
     }
-    .aui-progress-tracker-step-current ~ .aui-progress-tracker-step>& {
+    .aui-progress-tracker-step-current ~ .aui-progress-tracker-step > & {
         color: @aui-progress-tracker-step-text-color;
         font-weight: @aui-font-weight-normal;
 

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

@@ -107,7 +107,7 @@ table.aui.aui-restfultable > thead > tr > th {
  * which means the helper is too narrow to contain the children.
  */
 .aui-restfultable-readonly.ui-sortable-helper {
-   white-space: nowrap;
+    white-space: nowrap;
 }
 
 .aui-restfultable-readonly.aui-restfultable-movable > div {
@@ -154,8 +154,16 @@ table.aui.aui-restfultable > thead > tr > th {
     visibility: hidden;
 }
 
-.aui-restfultable-allowhover .aui-restfultable-readonly td:hover .aui-restfultable-editable .aui-iconfont-edit,
-.aui-restfultable-allowhover .aui-restfultable-readonly td:hover .aui-restfultable-editable .icon-edit-sml {
+.aui-restfultable-allowhover
+    .aui-restfultable-readonly
+    td:hover
+    .aui-restfultable-editable
+    .aui-iconfont-edit,
+.aui-restfultable-allowhover
+    .aui-restfultable-readonly
+    td:hover
+    .aui-restfultable-editable
+    .icon-edit-sml {
     visibility: visible;
 }
 

package/src/less/aui-experimental-tables-sortable.less

@@ -2,8 +2,10 @@
 
 /*! AUI Sortable Tables */
 .aui-table-sortable {
-    @aui-table-sortable-active-border: @aui-table-header-divider-width @aui-border-type @aui-table-sortable-active-border-color;
-    @aui-table-sortable-selected-border: @aui-table-header-divider-width @aui-border-type @aui-table-sortable-selected-border-color;
+    @aui-table-sortable-active-border: @aui-table-header-divider-width @aui-border-type
+        @aui-table-sortable-active-border-color;
+    @aui-table-sortable-selected-border: @aui-table-header-divider-width @aui-border-type
+        @aui-table-sortable-selected-border-color;
 
     .tablesorter-header {
         cursor: pointer;
@@ -64,7 +66,7 @@
     //
     .aui-table-header-content::after {
         #aui.icon-pseudoelement();
-        content: "";
+        content: '';
         display: inline-block;
         height: @aui-table-sortable-arrow-height;
         line-height: 1;

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

@@ -7,7 +7,7 @@
     z-index: @aui-z-tooltip;
     border-radius: @aui-border-radius-small;
     font-size: @aui-font-size-small;
-    line-height:  unit((20 / @aui-font-size-small));
+    line-height: unit((20 / @aui-font-size-small));
     word-wrap: break-word;
 
     a,

package/src/less/aui-link.less

@@ -4,7 +4,6 @@
  * LINK
  */
 
-
 a {
     color: var(--aui-link-color);
     text-decoration: var(--aui-link-decoration);

package/src/less/aui-lozenge.less

@@ -34,7 +34,8 @@
     }
 }
 
-.aui-lozenge-error, .aui-lozenge-removed {
+.aui-lozenge-error,
+.aui-lozenge-removed {
     background-color: var(--aui-lozenge-error-bg-color);
     color: var(--aui-lozenge-error-text-color);
 
@@ -44,7 +45,8 @@
     }
 }
 
-.aui-lozenge-current, .aui-lozenge-inprogress {
+.aui-lozenge-current,
+.aui-lozenge-inprogress {
     background-color: var(--aui-lozenge-current-bg-color);
     color: var(--aui-lozenge-current-text-color);
 
@@ -54,7 +56,8 @@
     }
 }
 
-.aui-lozenge-complete, .aui-lozenge-new {
+.aui-lozenge-complete,
+.aui-lozenge-new {
     background-color: var(--aui-lozenge-new-bg-color);
     color: var(--aui-lozenge-new-text-color);
 

package/src/less/aui-navigation.less

@@ -19,7 +19,7 @@
 .aui-navgroup-horizontal .aui-nav:after,
 .aui-navgroup-horizontal .aui-navgroup-inner:after {
     clear: both;
-    content: " ";
+    content: ' ';
     display: table;
 }
 .aui-nav-breadcrumbs > li,
@@ -53,7 +53,7 @@
 
 .aui-nav-breadcrumbs > li + li:before {
     color: var(--aui-border-strong);
-    content: "/";
+    content: '/';
     padding-right: @aui-grid;
 }
 
@@ -92,12 +92,12 @@
     padding-right: 0;
 }
 
-.aui-nav-pagination a[aria-disabled="true"],
-.aui-nav-pagination a[aria-disabled="true"]:link,
-.aui-nav-pagination a[aria-disabled="true"]:visited,
-.aui-nav-pagination a[aria-disabled="true"]:focus,
-.aui-nav-pagination a[aria-disabled="true"]:hover,
-.aui-nav-pagination a[aria-disabled="true"]:active {
+.aui-nav-pagination a[aria-disabled='true'],
+.aui-nav-pagination a[aria-disabled='true']:link,
+.aui-nav-pagination a[aria-disabled='true']:visited,
+.aui-nav-pagination a[aria-disabled='true']:focus,
+.aui-nav-pagination a[aria-disabled='true']:hover,
+.aui-nav-pagination a[aria-disabled='true']:active {
     color: @aui-nav-pagination-active-text-color;
     text-decoration: none;
 }
@@ -174,7 +174,6 @@
 /* nested vertical navigation menus
 ----------------------------------- */
 .aui-navgroup-vertical .aui-nav {
-
     // the sub-menu styles
     .aui-nav {
         margin-top: 0;
@@ -198,7 +197,9 @@
             // (1) the subtree toggle sits outside and to the left of the aui-nav-item
             // (2) the nested list sits inside the <li> adjacent to the sutree toggle and nav item.
             // these both mean that using flexbox is... inadvisable.
-            @box-size: (@aui-nav-link-effective-height); // note: it is assumed, but not guaranteed, that the .aui-nav-item will be the same height.
+            @box-size: (
+                @aui-nav-link-effective-height
+            ); // note: it is assumed, but not guaranteed, that the .aui-nav-item will be the same height.
             -webkit-appearance: none;
             background: transparent;
             border: 0;
@@ -228,7 +229,7 @@
             position: relative;
         }
 
-        &[aria-expanded="false"] {
+        &[aria-expanded='false'] {
             > * {
                 display: none;
             }
@@ -247,7 +248,9 @@
 .aui-navgroup-vertical .aui-nav .aui-nav-item-actions {
     @actions-glyph-size: unit(@aui-icon-size-small * 0.75, px);
     @actions-button-size: @aui-icon-size-small;
-    @aui-nav-item-actions-top-offset: (((@aui-nav-link-effective-height - @actions-button-size) / 2));
+    @aui-nav-item-actions-top-offset: (
+        ((@aui-nav-link-effective-height - @actions-button-size) / 2)
+    );
     @aui-nav-item-actions-left-offset: 4px;
     @aui-nav-item-actions-border-radius: 2px; // because it's a tiny button. 3px would probably work, though.
 
@@ -291,7 +294,6 @@
     }
 }
 
-
 /* Horizontal Navigation
 -------------------- */
 .aui-nav-horizontal,
@@ -419,7 +421,7 @@
         margin-bottom: @aui-nav-actions-list-item-margin-bottom;
 
         + li::before {
-            content: "";
+            content: '';
             border-radius: @aui-nav-actions-list-divider-size;
             width: @aui-nav-actions-list-divider-size;
             height: @aui-nav-actions-list-divider-size;

package/src/less/aui-page-layout.less

@@ -22,7 +22,7 @@
 }
 
 #content:before {
-    content: "";
+    content: '';
     clear: both;
     display: table;
 }
@@ -61,7 +61,7 @@
 }
 
 #footer .footer-body > ul > li:after {
-    content: "\b7"; /* mid dot */
+    content: '\b7'; /* mid dot */
     margin-left: @aui-grid;
     speak: none;
 }
@@ -180,7 +180,7 @@ body {
             &::before,
             &::after {
                 background-color: @aui-border-color;
-                content: "";
+                content: '';
                 left: -(@aui-grid / 2);
                 position: absolute;
             }
@@ -480,7 +480,6 @@ body {
 
 // General responsive layout breakpoints
 html.aui-responsive {
-
     // so that text in the footer wraps correctly
     #footer .footer-body > ul > li {
         white-space: normal;

package/src/less/aui-page-typography.less

@@ -16,7 +16,7 @@ html {
 }
 
 /* International Font Stacks*/
-[lang|=ja] {
+[lang|='ja'] {
     font-family: @aui-font-family-ja;
 }
 
@@ -63,7 +63,12 @@ h6 {
     #aui.typography.h200();
     margin: (@aui-grid * 2) 0 0 0;
 }
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: @aui-text-color;
 
     &:first-child {
@@ -116,7 +121,7 @@ cite {
 }
 cite:before {
     display: inline-block;
-    content: "\2014";
+    content: '\2014';
     padding-right: 0.5em;
 }
 blockquote {

package/src/less/aui-reset.less

@@ -8,14 +8,30 @@
 /**
  * RESET
  */
-html, body, p, div, h1, h2, h3, h4, h5, h6, img, pre, form, fieldset {
+html,
+body,
+p,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img,
+pre,
+form,
+fieldset {
     margin: 0;
     padding: 0;
 }
-ul, ol, dl {
+ul,
+ol,
+dl {
     margin: 0;
 }
-img, fieldset {
+img,
+fieldset {
     border: 0;
 }
 
@@ -43,9 +59,9 @@ audio:not([controls]) {
 
 // Prevent iOS defaulting to push-button which ignores many styles unless a bg image is set
 button,
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
+input[type='button'],
+input[type='submit'],
+input[type='reset'] {
     -webkit-appearance: button;
     font-family: inherit;
 }