@atlassian/aui 10.2.2 → 11.0.0-m005

package/src/less/forms-current.less

@@ -1,6 +1,7 @@
 @import (reference) './imports/global';
 @import (reference) './imports/mixins';
 @import (reference) './imports/aui-theme/components/forms';
+@import (reference) './imports/aui-theme/theme';
 
 /* Field styles */
 form.aui:not(.aui-legacy-forms) {
@@ -245,26 +246,42 @@ form.aui:not(.aui-legacy-forms) {
         padding-top: 0;
     }
 
-    // both are @ak-color-N600
-    @chevron-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    // Yes, this is a hardcoded image :pain: Why? Safari doesn't support pseudo elements yet
+    // https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
+    // This also means hardcoded tokens
+    // Enabled - Light mode - "light" theme - #505258 --ds-text-subtle
+    // Enabled - Dark mode - "dark" theme - #A9ABAF --ds-text-subtle
+    // Disabled - Light mode - "light" theme - #080F214A --ds-text-disabled
+    // Disabled - Dark mode - "dark" theme - #E5E9F640 --ds-text-disabled
+    @chevron-enabled-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23505258" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
+    @chevron-enabled-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A9ABAF" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
+    @chevron-disabled-light: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23080F214A" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
+    @chevron-disabled-dark: url('data:image/svg+xml,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23E5E9F640" d="m14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: calc(100% + 1.5px) 50%;
-        background-size: 25px;
+        background-position: calc(100% - 3px) 50%;
+        background-size: 12px;
     }
 
     select.select[disabled]:not([size]) {
-        // used to be a light ak-color-N70, but there were only 2-3 shades of difference
-        // between that and dark ak-color-N600, so I'm re-using it here.
-        background-image: @chevron-dark;
+        #aui-themes.when-light-mode({
+            background-image: @chevron-disabled-light;
+        });
+        #aui-themes.when-dark-mode({
+            background-image: @chevron-disabled-dark;
+        });
     }
 
     select.select:not([size]) {
         padding-right: 20px;
-        background-image: @chevron-light;
+        #aui-themes.when-light-mode({
+            background-image: @chevron-enabled-light;
+        });
+        #aui-themes.when-dark-mode({
+            background-image: @chevron-enabled-dark;
+        });
     }
 
     .icon-required {

package/src/less/forms.less

@@ -313,12 +313,9 @@ form.aui span.content {
 }
 
 form.aui pre.aui-form {
-    @size: 12px;
     background-color: @aui-form-pre-bg-color;
     border: 1px solid @aui-border-color;
-    font-family: @aui-code-font-family;
-    font-size: @size;
-    line-height: unit((20 / @size));
+    font: var(--ds-font-code);
     overflow-x: auto;
     overflow-y: visible;
     padding: @aui-grid * 1.5;

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

@@ -50,17 +50,17 @@
 
         // Badges
         --aui-badge-bg-color: var(--ds-background-accent-gray-subtler);
-        --aui-badge-text-color: var(--ds-text-accent-gray);
-        --aui-badge-primary-bg-color: var(--ds-background-information-bold);
-        --aui-badge-primary-text-color: var(--ds-text-inverse);
-        --aui-badge-added-bg-color: var(--ds-background-accent-green-subtlest);
-        --aui-badge-added-text-color: var(--ds-text-accent-green);
-        --aui-badge-removed-bg-color: var(--ds-background-accent-red-subtlest);
-        --aui-badge-removed-text-color: var(--ds-text-accent-red);
-        --aui-badge-important-bg-color: var(--ds-background-accent-red-bolder);
-        --aui-badge-important-text-color: var(--ds-text-inverse);
-        --aui-badge-on-blue-text-color: var(--ds-text-inverse);
-        --aui-badge-on-blue-bg-color: var(--ds-background-accent-blue-subtler);
+        --aui-badge-text-color: var(--ds-text);
+        --aui-badge-primary-bg-color: var(--ds-background-accent-blue-subtler);
+        --aui-badge-primary-text-color: var(--ds-text);
+        --aui-badge-added-bg-color: var(--ds-background-success-subtler);
+        --aui-badge-added-text-color: var(--ds-text);
+        --aui-badge-removed-bg-color: var(--ds-background-danger);
+        --aui-badge-removed-text-color: var(--ds-text);
+        --aui-badge-important-bg-color: var(--ds-background-accent-red-subtler);
+        --aui-badge-important-text-color: var(--ds-text);
+        --aui-badge-on-blue-text-color: var(--ds-text-brand);
+        --aui-badge-on-blue-bg-color: var(--ds-surface);
 
         // Avatars
         --aui-avatar-outline: var(--ds-border-inverse);
@@ -68,30 +68,42 @@
         --aui-avatar-background: var(--aui-button-default-bg-color);
 
         // Lozenges
-        --aui-lozenge-bg-color: var(--ds-background-neutral-bold);
-        --aui-lozenge-text-color: var(--ds-text-inverse);
-        --aui-lozenge-subtle-bg-color: var(--ds-background-neutral);
-        --aui-lozenge-subtle-text-color: var(--ds-text-subtle);
-        --aui-lozenge-success-bg-color: var(--ds-background-success-bold);
-        --aui-lozenge-success-text-color: var(--ds-text-inverse);
-        --aui-lozenge-success-subtle-bg-color: var(--ds-background-success);
-        --aui-lozenge-success-subtle-text-color: var(--ds-text-success);
-        --aui-lozenge-current-bg-color: var(--ds-background-information-bold);
-        --aui-lozenge-current-text-color: var(--ds-text-inverse);
-        --aui-lozenge-current-subtle-bg-color: var(--ds-background-information);
-        --aui-lozenge-current-subtle-text-color: var(--ds-text-information);
-        --aui-lozenge-moved-bg-color: var(--ds-background-warning-bold);
-        --aui-lozenge-moved-text-color: var(--ds-text-warning-inverse);
-        --aui-lozenge-moved-subtle-bg-color: var(--ds-background-warning);
-        --aui-lozenge-moved-subtle-text-color: var(--ds-text-warning);
-        --aui-lozenge-error-bg-color: var(--ds-background-danger-bold);
-        --aui-lozenge-error-text-color: var(--ds-text-inverse);
-        --aui-lozenge-error-subtle-bg-color: var(--ds-background-danger);
-        --aui-lozenge-error-subtle-text-color: var(--ds-text-danger);
-        --aui-lozenge-new-bg-color: var(--ds-background-discovery-bold);
-        --aui-lozenge-new-text-color: var(--ds-text-inverse);
-        --aui-lozenge-new-subtle-bg-color: var(--ds-background-discovery);
-        --aui-lozenge-new-subtle-text-color: var(--ds-text-discovery);
+        --aui-lozenge-bg-color: var(--ds-background-neutral);
+        --aui-lozenge-border-color: oklch(from var(--ds-border-bold) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-text-color: var(--ds-text);
+        --aui-lozenge-subtle-bg-color: var(--aui-lozenge-bg-color);
+        --aui-lozenge-subtle-border-color: var(--aui-lozenge-border-color);
+        --aui-lozenge-subtle-text-color: var(--aui-lozenge-text-color);
+        --aui-lozenge-success-bg-color: var(--ds-background-success-subtler);
+        --aui-lozenge-success-border-color: oklch(from var(--ds-border-success) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-success-text-color: var(--ds-text-success-bolder);
+        --aui-lozenge-success-subtle-bg-color: var(--aui-lozenge-success-bg-color);
+        --aui-lozenge-success-subtle-border-color: var(--aui-lozenge-success-border-color);
+        --aui-lozenge-success-subtle-text-color: var(--aui-lozenge-success-text-color);
+        --aui-lozenge-current-bg-color: var(--ds-background-information-subtler);
+        --aui-lozenge-current-border-color: oklch(from var(--ds-border-information) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-current-text-color: var(--ds-text-information-bolder);
+        --aui-lozenge-current-subtle-bg-color: var(--aui-lozenge-current-bg-color);
+        --aui-lozenge-current-subtle-border-color: var(--aui-lozenge-current-border-color);
+        --aui-lozenge-current-subtle-text-color: var(--aui-lozenge-current-text-color);
+        --aui-lozenge-moved-bg-color: var(--ds-background-warning-subtler);
+        --aui-lozenge-moved-border-color: oklch(from var(--ds-border-warning) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-moved-text-color: var(--ds-text-warning-bolder);
+        --aui-lozenge-moved-subtle-bg-color: var(--aui-lozenge-moved-bg-color);
+        --aui-lozenge-moved-subtle-border-color: var(--aui-lozenge-moved-border-color);
+        --aui-lozenge-moved-subtle-text-color: var(--aui-lozenge-moved-text-color);
+        --aui-lozenge-error-bg-color: var(--ds-background-danger-subtler);
+        --aui-lozenge-error-border-color: oklch(from var(--ds-border-danger) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-error-text-color: var(--ds-text-danger-bolder);
+        --aui-lozenge-error-subtle-bg-color: var(--aui-lozenge-error-bg-color);
+        --aui-lozenge-error-subtle-border-color: var(--aui-lozenge-error-border-color);
+        --aui-lozenge-error-subtle-text-color: var(--aui-lozenge-error-text-color);
+        --aui-lozenge-new-bg-color: var(--ds-background-discovery-subtler);
+        --aui-lozenge-new-border-color: oklch(from var(--ds-border-discovery) calc(l * var(--aui-lozenge-border-l-factor)) c h);
+        --aui-lozenge-new-text-color: var(--ds-text-discovery-bolder);
+        --aui-lozenge-new-subtle-bg-color: var(--aui-lozenge-new-bg-color);
+        --aui-lozenge-new-subtle-border-color: var(--aui-lozenge-new-border-color);
+        --aui-lozenge-new-subtle-text-color: var(--aui-lozenge-new-text-color);
 
         // Messages
         --aui-message-info-bg-color: var(--ds-background-information);
@@ -246,15 +258,14 @@
         --aui-appheader-quicksearch-bg-color: var(--ds-background-input);
         --aui-appheader-quicksearch-border-color: var(--ds-border-input);
         --aui-appheader-quicksearch-text-color: var(--ds-text-subtlest);
-        --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text);
-        --aui-appheader-quicksearch-hover-bg-color: var(--ds-background-input-hovered);
+        --aui-appheader-quicksearch-placeholder-text-color: var(--ds-text-subtlest);
         --aui-appheader-quicksearch-focus-bg-color: var(--aui-appheader-quicksearch-bg-color);
-        --aui-appheader-quicksearch-focus-text-color: var(--ds-text-subtlest);
+        --aui-appheader-quicksearch-focus-text-color: var(--ds-text);
 
         // Sidebar
         --aui-sidebar-icon-color: var(--ds-icon);
         --aui-sidebar-toggle-icon-color: var(--ds-icon);
-        --aui-sidebar-bg-color: var(--ds-surface-sunken);
+        --aui-sidebar-bg-color: var(--ds-surface);
         --aui-sidebar-dropdown-arrow-color: var(--ds-icon);
         --aui-sidebar-tooltip-bg-color: var(--ds-icon);
         --aui-sidebar-badge-bg-color: var(--ds-background-accent-gray-subtler);

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

@@ -14,7 +14,8 @@
 @aui-glyph-close: '\f11b';
 @aui-glyph-exclamation-triangle: '\f1b3';
 @aui-glyph-exclamation-circle: '\f15a';
-@aui-glyph-question-circle: '\F255';
+@aui-glyph-question-circle: '\f169';
+@aui-glyph-question-filled: '\f255';
 @aui-glyph-info-circle: '\f234';
 @aui-glyph-more-actions: '\f17f'; // the "more" icon; should be three dots.
 @aui-glyph-search: '\f18c';

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

@@ -1,13 +1,6 @@
 @import (reference) 'colors';
 
 // ### Fonts
-// Stacks
-@aui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-@aui-font-family-ja: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo,
-    'ＭＳ Ｐゴシック', Verdana, Arial, sans-serif;
-@aui-code-font-family: 'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono',
-    Menlo, Courier, monospace;
 
 // Sizes and line heights
 @aui-font-size-xxxlarge: 29px;

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

@@ -42,22 +42,22 @@
 
 #aui-themes {
     .when-light-mode(@rules) {
-        html:not([data-color-mode]),
-        html[data-color-mode='light'] {
+        :where(html:not([data-color-mode])),
+        :where(html[data-color-mode='light']) & {
             @rules();
         }
         @media (prefers-color-scheme: light) {
-            html[data-color-mode-auto]:not([data-color-mode]) {
+            :where(html[data-color-mode-auto]:not([data-color-mode])) & {
                 @rules();
             }
         }
     }
     .when-dark-mode(@rules) {
-        html[data-color-mode='dark'] {
+        :where(html[data-color-mode='dark']) & {
             @rules();
         }
         @media (prefers-color-scheme: dark) {
-            html[data-color-mode-auto]:not([data-color-mode]) {
+            :where(html[data-color-mode-auto]:not([data-color-mode])) & {
                 @rules();
             }
         }

package/src/less/imports/mixins/typography.less

@@ -1,87 +1,2 @@
 @import (reference) '../aui-theme/core/colors';
 @import (reference) '../aui-theme/core/text';
-
-// Why are we defining our own mixins when some already exist in Atlaskit? A few reasons:
-//
-// 1) Atlaskit's use the pure ADG3 proportions, which have different line heights and letter-spacing than we are taking on right now.
-// 2) Atlaskit's include margin info, which we don't want.
-//
-// Even if they were exactly the same, we'd probably create our mixins by extending theirs in this file.
-// The adapter pattern is generally useful in shielding us from external change by reducing its scope of impact to a single place.
-
-#aui {
-    .typography {
-        // First-level heading (h1) equivalent
-        .h800() {
-            @size: @aui-font-size-xxxlarge;
-            font-size: @size;
-            font-weight: @aui-font-weight-semibold;
-            line-height: unit((40 / @size));
-            letter-spacing: -0.01em;
-            text-transform: none;
-        }
-        // Second-level heading (h2) equivalent
-        .h700() {
-            @size: @aui-font-size-xxlarge;
-            font-size: @size;
-            font-weight: @aui-font-weight-medium;
-            line-height: unit((30 / @size));
-            letter-spacing: -0.01em;
-            text-transform: none;
-        }
-        // Third-level heading (h3) equivalent
-        .h600() {
-            @size: @aui-font-size-xlarge;
-            font-size: @size;
-            font-weight: @aui-font-weight-medium;
-            line-height: unit((30 / @size));
-            letter-spacing: -0.008em;
-            text-transform: none;
-        }
-        // Fourth-level heading (h4) equivalent
-        .h500() {
-            @size: @aui-font-size-large;
-            font-size: @size;
-            font-weight: @aui-font-weight-medium;
-            line-height: unit((20 / @size));
-            letter-spacing: -0.006em;
-            text-transform: none;
-        }
-        // Fifth-level heading (h5) equivalent
-        .h400() {
-            @size: @aui-font-size-medium;
-            font-size: @size;
-            font-weight: @aui-font-weight-semibold;
-            line-height: unit((20 / @size));
-            letter-spacing: -0.003em;
-            text-transform: none;
-        }
-        // Sixth-level heading (h6) equivalent
-        .h300() {
-            @size: @aui-font-size-small;
-            font-size: @size;
-            font-weight: @aui-font-weight-semibold;
-            line-height: unit((20 / @size));
-            letter-spacing: 0;
-            text-transform: none;
-        }
-        .h200(@color: var(--aui-lesser-header-text)) {
-            @size: @aui-font-size-small;
-            color: @color;
-            font-size: @size;
-            font-weight: @aui-font-weight-semibold;
-            line-height: unit((20 / @size));
-            letter-spacing: 0;
-            text-transform: none;
-        }
-        .h100(@color: var(--aui-lesser-header-text)) {
-            @size: @aui-font-size-xsmall;
-            color: @color;
-            font-size: @size;
-            font-weight: @aui-font-weight-semibold;
-            line-height: unit((16 / @size));
-            letter-spacing: 0;
-            text-transform: uppercase;
-        }
-    }
-}

package/src/less/imports/mixins.less

@@ -57,22 +57,6 @@
         transform: rotate(@angle);
     }
 
-    // Styles that text containers should set, in case they are embedded in weird flow content like
-    // <h1>, <strong>, <em>, etc., so that inheritable styles don't bleed in unintentionally.
-    // be mindful of the specificity of the rule(s) you mix this in to, as you may just as easily
-    // prevent desirable inheritance, too!
-    .text-reset() {
-        color: @aui-text-color;
-        font-size: @aui-font-size-medium;
-        font-style: normal;
-        font-variant: normal;
-        font-weight: @aui-font-weight-normal;
-        letter-spacing: @aui-font-letter-spacing;
-        line-height: unit((20 / @aui-font-size-medium));
-        text-align: left; // in case anybody used text-align for layout purposes
-        white-space: normal;
-    }
-
     .text-truncate() {
         white-space: nowrap;
         text-overflow: ellipsis;

package/src/less/layer.less

@@ -1,7 +1,7 @@
 @import (reference) './imports/global';
 
 .aui-layer {
-    #aui.text-reset();
+    font: var(--ds-font-body);
     position: fixed;
 
     &:not([open]),

package/src/less/messages.less

@@ -95,7 +95,7 @@ aui-message,
 
 .aui-message-change {
     --aui-message-icolor: var(--aui-message-change-icon-color);
-    --aui-message-ig: @aui-glyph-question-circle;
+    --aui-message-ig: @aui-glyph-question-filled;
     background-color: var(--aui-message-change-bg-color);
     color: var(--aui-message-change-text-color);
 }

package/src/less/tables.less

@@ -9,7 +9,8 @@
 }
 
 .aui-table-header-style() {
-    #aui.typography.h200(@aui-table-heading-text-color);
+    font: var(--ds-font-heading-xxsmall);
+    color: @aui-table-heading-text-color;
 }
 
 .aui-table-cell-style() {