@atlassian/aui 10.2.2 → 11.0.0-m005

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

@@ -1,7 +1,7 @@
 /* ------ THEME: light ------ */
 html:not([data-color-mode-auto])[data-color-mode="light"][data-theme~="light:light"],
 html:not([data-color-mode-auto])[data-color-mode="dark"][data-theme~="dark:light"],
-html:not([data-color-mode-auto])[data-color-mode="light"]:not([data-theme]),
+html:not([data-color-mode-auto])[data-color-mode="light"]:not([data-theme*="light:"]),
 html:not([data-color-mode-auto]):not([data-color-mode]) {
   color-scheme: light;
   --ds-text: #292A2E;
@@ -417,7 +417,7 @@ html:not([data-color-mode-auto]):not([data-color-mode]) {
 }
 @media (prefers-color-scheme: light) {
   html[data-color-mode-auto][data-theme~="light:light"],
-  html[data-color-mode-auto]:not([data-theme]) {
+  html[data-color-mode-auto]:not([data-theme*="light:"]) {
     color-scheme: light;
     --ds-text: #292A2E;
     --ds-text-accent-lime: #4C6B1F;
@@ -835,7 +835,7 @@ html:not([data-color-mode-auto]):not([data-color-mode]) {
 /* ------ THEME: dark ------ */
 html:not([data-color-mode-auto])[data-color-mode="dark"][data-theme~="dark:dark"],
 html:not([data-color-mode-auto])[data-color-mode="light"][data-theme~="light:dark"],
-html:not([data-color-mode-auto])[data-color-mode="dark"]:not([data-theme]) {
+html:not([data-color-mode-auto])[data-color-mode="dark"]:not([data-theme*="dark:"]) {
   color-scheme: dark;
   --ds-text: #CECFD2;
   --ds-text-accent-lime: #B3DF72;
@@ -1250,7 +1250,7 @@ html:not([data-color-mode-auto])[data-color-mode="dark"]:not([data-theme]) {
 }
 @media (prefers-color-scheme: dark) {
   html[data-color-mode-auto][data-theme~="dark:dark"],
-  html[data-color-mode-auto]:not([data-theme]) {
+  html[data-color-mode-auto]:not([data-theme*="dark:"]) {
     color-scheme: dark;
     --ds-text: #CECFD2;
     --ds-text-accent-lime: #B3DF72;
@@ -1663,4 +1663,58 @@ html:not([data-color-mode-auto])[data-color-mode="dark"]:not([data-theme]) {
     --ds-UNSAFE-transparent: transparent;
     --ds-elevation-surface-current: #1F1F21;
   }
+}
+
+/* ------ THEME: spacing ------ */
+html[data-theme~="spacing:spacing"] {
+  --ds-space-0: 0rem;
+  --ds-space-025: 0.125rem;
+  --ds-space-050: 0.25rem;
+  --ds-space-075: 0.375rem;
+  --ds-space-100: 0.5rem;
+  --ds-space-150: 0.75rem;
+  --ds-space-200: 1rem;
+  --ds-space-250: 1.25rem;
+  --ds-space-300: 1.5rem;
+  --ds-space-400: 2rem;
+  --ds-space-500: 2.5rem;
+  --ds-space-600: 3rem;
+  --ds-space-800: 4rem;
+  --ds-space-1000: 5rem;
+  --ds-space-negative-025: -0.125rem;
+  --ds-space-negative-050: -0.25rem;
+  --ds-space-negative-075: -0.375rem;
+  --ds-space-negative-100: -0.5rem;
+  --ds-space-negative-150: -0.75rem;
+  --ds-space-negative-200: -1rem;
+  --ds-space-negative-250: -1.25rem;
+  --ds-space-negative-300: -1.5rem;
+  --ds-space-negative-400: -2rem;
+}
+
+/* ------ THEME: typography ------ */
+html[data-theme~="typography:typography"] {
+  --ds-font-heading-xxlarge: normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xlarge: normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-large: normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-medium: normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-small: normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xsmall: normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xxsmall: normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-body-large: normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-body: normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-body-small: normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-metric-large: normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-metric-medium: normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-metric-small: normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-code: normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-bold: 653;
+  --ds-font-family-heading: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-family-body: "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-family-code: "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
+  --ds-font-family-brand-heading: "Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-body: "Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
 }

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

@@ -1,6 +1,8 @@
 export default {
 'light': () => (() => {}),
 'dark': () => (() => {}),
+'spacing': () => (() => {}),
+'typography': () => (() => {}),
 'light-future': () => { 
     console.warn('AUI does not provide "light-future" theme. Setting this theme will have no effect.');
     return () => {};
@@ -9,18 +11,10 @@ export default {
     console.warn('AUI does not provide "dark-future" theme. Setting this theme will have no effect.');
     return () => {};
 }, 
-'spacing': () => { 
-    console.warn('AUI does not provide "spacing" theme. Setting this theme will have no effect.');
-    return () => {};
-}, 
 'shape': () => { 
     console.warn('AUI does not provide "shape" theme. Setting this theme will have no effect.');
     return () => {};
 }, 
-'typography': () => { 
-    console.warn('AUI does not provide "typography" theme. Setting this theme will have no effect.');
-    return () => {};
-}, 
 'motion': () => { 
     console.warn('AUI does not provide "motion" theme. Setting this theme will have no effect.');
     return () => {};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "10.2.2",
+    "version": "11.0.0-m005",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -33,11 +33,11 @@
     ],
     "//": "AUI's publishConfig is managed by its build scripts.",
     "peerDependencies": {
-        "jquery": "^2 || ^3 || ^4"
+        "jquery": "^4.0.0"
     },
     "dependencies": {
         "@atlaskit/tokens": "13.0.4",
-        "@atlassian/adg-server-iconfont": "3.1.1",
+        "@atlassian/adg-server-iconfont": "4.0.0-m05",
         "@atlassian/fancy-file-input": "3.0.0",
         "@popperjs/core": "2.11.8",
         "backbone": "1.6.0",
@@ -59,7 +59,6 @@
         "fs-extra": "11.3.5",
         "ignore-emit-webpack-plugin": "^2.0.6",
         "jquery": "4.0.0",
-        "jquery-3": "npm:jquery@3.7.1",
         "less": "4.6.4",
         "react": "18.3.1",
         "webpack-merge": "6.0.1"
@@ -70,6 +69,7 @@
         "clean": "rm -rf ./dist",
         "dist/build:prototyping": "rspack --config webpack/dist.prototyping.webpack.config.js",
         "build": "yarn dist/build:prototyping",
-        "watch": "yarn dist/build:prototyping --watch"
+        "watch": "yarn dist/build:prototyping --watch",
+        "update-product-fonts": "node --experimental-strip-types scripts/fonts.ts"
     }
 }

package/src/js/aui/banner.js

@@ -21,16 +21,34 @@ function banner(options) {
     return bannerElement;
 }
 
+const ICON_CLASS_BY_TYPE = {
+    warning: 'aui-iconfont-warning',
+    error: 'aui-iconfont-error',
+};
+
 function createBannerElement({ body = '', type = 'error' }) {
     const banner = document.createElement('div');
     banner.className = `aui-banner aui-banner-${type}`;
     banner.setAttribute('role', 'alert');
-    banner.innerHTML = body;
 
-    const screenReaderInfo = document.createElement('div');
-    screenReaderInfo.innerText = `${type}`;
-    screenReaderInfo.classList.add('assistive');
-    banner.prepend(screenReaderInfo);
+    const row = document.createElement('div');
+    row.classList.add('aui-banner-row');
+
+    const iconClass = ICON_CLASS_BY_TYPE[type];
+    if (iconClass) {
+        const icon = document.createElement('span');
+        icon.className = `aui-icon aui-icon-small ${iconClass}`;
+        icon.setAttribute('role', 'img');
+        icon.setAttribute('aria-label', type.charAt(0).toUpperCase() + type.slice(1));
+        row.appendChild(icon);
+    }
+
+    const content = document.createElement('div');
+    content.classList.add('aui-banner-content');
+    content.innerHTML = body;
+    row.appendChild(content);
+
+    banner.appendChild(row);
 
     return banner;
 }

package/src/less/adg-header-quicksearch.less

@@ -11,11 +11,10 @@
     @border-color: var(--aui-appheader-quicksearch-border-color);
     @text-color: var(--aui-appheader-quicksearch-text-color);
     @placeholder-color: var(--aui-appheader-quicksearch-placeholder-text-color);
-    @hover-bg-color: var(--aui-appheader-quicksearch-hover-bg-color);
     @focus-bg-color: var(--aui-appheader-quicksearch-focus-bg-color);
     @focus-text-color: var(--aui-appheader-quicksearch-focus-text-color);
     @width: 170px;
-    @border-radius: 3px;
+    @border-radius: var(--ds-radius-medium, 6px); // should match --aui-appheader-item-border-radius
     @box-shadow: none;
     @icon: @aui-glyph-search-small;
 
@@ -62,10 +61,6 @@
         &::placeholder {
             opacity: 1;
         }
-
-        &:hover {
-            background-color: @hover-bg-color;
-        }
     }
 
     // Override the browser appearance of type=text, type=search and type=button.

package/src/less/adg-help.less

@@ -33,7 +33,9 @@
         > h4,
         > h5,
         > h6 {
-            #aui.typography.h100(@aui-help-header-color);
+            font: var(--ds-font-heading-xxsmall);
+            color: @aui-help-header-color;
+            text-transform: uppercase;
         }
     }
 
@@ -58,7 +60,9 @@
 
         .aui-inline-dialog-contents {
             h2:first-child {
-                #aui.typography.h100(@aui-inline-dialog-help-headline-color);
+                font: var(--ds-font-heading-xxsmall);
+                color: @aui-inline-dialog-help-headline-color;
+                text-transform: uppercase;
             }
         }
     }

package/src/less/aui-appheader.less

@@ -97,12 +97,13 @@ aui-header,
     --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;
+    --aui-appheader-item-height: 32px;
+    --aui-appheader-item-border-radius: var(--ds-radius-medium, 6px);
     @section-gap: 20px;
 
     box-sizing: border-box;
-    padding: 7px @aui-grid 8px @aui-grid;
+    padding: var(--ds-space-100, 8px) var(--ds-space-150, 12px)
+        calc(var(--ds-space-100, 8px) - @aui-border-width) var(--ds-space-150, 12px);
     position: relative;
 
     .aui-header-before {
@@ -159,6 +160,7 @@ aui-header,
             align-items: center;
             display: flex;
             justify-content: space-around;
+            gap: var(--ds-space-050, 4px);
         }
 
         > .aui-nav > li {
@@ -203,14 +205,13 @@ aui-header,
                 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);
+                padding: var(--aui-appheader-item-padding-y, var(--ds-space-050, 4px))
+                    var(--aui-appheader-item-padding-x, var(--ds-space-050, 4px));
                 color: var(--aui-lf-appheader-text-color);
                 text-decoration: none;
             }
 
-            &:hover,
-            &:focus {
+            &:hover {
                 background-color: var(--aui-lf-appheader-item-focus-bg-color);
                 color: var(--aui-lf-appheader-item-focus-text-color, inherit);
             }
@@ -224,14 +225,6 @@ aui-header,
             }
         }
 
-        // Make hover shadow rounded for icon buttons
-        .aui-header-secondary > .aui-nav > li > a.aui-button-round {
-            height: auto;
-            border-radius: 100%;
-            padding: 4px;
-            margin: 0 unit((4 / @aui-font-size-medium), em);
-        }
-
         // Special-case padding to separate non-nav items from nav items.
         .aui-header-primary > .aui-nav > li > .aui-button,
         .aui-header-primary > .aui-nav > li > .aui-buttons {
@@ -245,7 +238,7 @@ aui-header,
         // Override the icon styles so that every icon in the header is a uniform size...
         // ...but only in the right-hand side of the header.
         .aui-header-secondary > .aui-nav > li > a > .aui-icon {
-            --aui-icon-size: 24px;
+            --aui-icon-size: @aui-icon-size-small;
         }
 
         // Bump up the font size when text is used in place of a logo

package/src/less/aui-badge.less

@@ -4,17 +4,19 @@
 aui-badge,
 .aui-badge {
     background: var(--aui-badge-bg-color); // RGBA
-    border-radius: 2em; // needs to be at least 1em + border-top + border-bottom + padding-top + padding-bottom to get perfectly rounded
+    border-radius: var(--ds-radius-xsmall);
+    box-sizing: border-box;
     color: var(--aui-badge-text-color);
     font-size: @aui-font-size-small;
     font-weight: @aui-font-weight-normal;
-    line-height: 1;
     margin: 0;
-    min-height: 1em;
-    min-width: 1em; /* want a capsule style even when single digit */
-    padding: 2px 6px;
+    min-width: var(--ds-space-300);
+    block-size: min-content;
+    padding-block: 0;
+    padding-inline: var(--ds-space-050);
     position: relative;
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     justify-items: center;

package/src/less/aui-banner.less

@@ -1,42 +1,58 @@
 @import (reference) './imports/global';
 
 .aui-banner {
-    --aui-message-padding: 10px;
-    --aui-message-gutter: 40px;
-    --aui-message-isize: @aui-icon-size-small;
+    --aui-banner-padding: var(--ds-space-150, 12px);
+    --aui-banner-gap: var(--ds-space-050, 4px);
     --aui-focus: currentcolor;
     --aui-link-color: currentcolor;
     --aui-link-hover-color: currentcolor;
     --aui-link-active-color: currentcolor;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--aui-banner-gap);
+    padding: var(--aui-banner-padding);
     border-radius: 0;
     box-shadow: none;
     margin-top: 0;
+    font-size: @aui-font-size-medium;
+    font-weight: var(--ds-font-weight-medium, @aui-font-weight-medium);
+    position: relative;
 
-    #aui-message.icon-bar(var(--aui-message-ig), var(--aui-message-icolor));
-    &::after {
-        left: 15px;
+    .aui-banner-row {
+        display: flex;
+        align-items: start;
+        gap: var(--aui-banner-gap);
+        flex: 1 1 auto;
+        min-width: 0;
     }
 
-    padding: var(--aui-message-padding);
-    position: relative;
+    .aui-banner-content {
+        flex: 1 1 auto;
+        line-height: 24px;
+        min-width: 0;
+    }
+
+    .aui-banner-row > .aui-icon {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        color: currentcolor;
+    }
 
     a:not(.aui-button),
     .aui-button-link {
+        font-weight: inherit;
         text-decoration: underline;
     }
 
-    &.aui-banner-error,
-    &.aui-banner-warning {
-        padding-left: var(--aui-message-gutter);
-    }
-
     &.aui-banner-error {
-        --aui-message-ig: @aui-glyph-exclamation-circle;
         background-color: var(--aui-banner-error-bg-color);
         color: var(--aui-banner-error-text-color);
     }
     &.aui-banner-warning {
-        --aui-message-ig: @aui-glyph-exclamation-triangle;
         background-color: var(--aui-banner-warning-bg-color);
         color: var(--aui-banner-warning-text-color);
     }

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

@@ -44,8 +44,7 @@
 .aui-datepicker-dialog .ui-datepicker {
     background: inherit;
     color: inherit;
-    font-size: @aui-font-size-medium;
-    font-family: @aui-font-family;
+    font: var(--ds-font-body);
     padding: 0;
 }
 
@@ -91,7 +90,9 @@
 }
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-calendar th {
-    #aui.typography.h100(var(--aui-datepicker-heading-weekdays-text-color));
+    font: var(--ds-font-heading-xxsmall);
+    color: var(--aui-datepicker-heading-weekdays-text-color);
+    text-transform: uppercase;
 }
 
 .aui-datepicker-dialog .ui-datepicker .ui-datepicker-calendar th,
@@ -107,8 +108,7 @@
     border-radius: @aui-border-radius-smallish;
     box-sizing: border-box;
     display: block;
-    font-size: @aui-font-size-medium;
-    font-family: @aui-font-family;
+    font: var(--ds-font-body);
     line-height: 25px;
     padding: 0;
     text-align: center;

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

@@ -1,7 +1,7 @@
 @import (reference) './imports/global';
 
 @aui-progress-height: 6px;
-@aui-progress-indicator-border-radius: @aui-border-radius-small;
+@aui-progress-indicator-border-radius: 9999px;
 
 aui-progressbar {
     display: block;
@@ -16,35 +16,73 @@ aui-progressbar {
     width: 100%;
 }
 
-.aui-progress-indicator-value {
-    animation: progressSlide 5s infinite ease-in-out;
+/* Indeterminate state: hide the value bar, use two pseudo-element bars instead */
+.aui-progress-indicator::before,
+.aui-progress-indicator::after {
+    background: var(--aui-progressbar-color);
     border-radius: @aui-progress-indicator-border-radius;
-    display: block;
+    content: '';
     height: @aui-progress-height;
-    #aui.transition(none);
     position: absolute;
-    width: 10%;
-    background: var(--aui-progressbar-color);
+    will-change: left, right;
+}
+
+/* Secondary bar: slow, wide sweep */
+.aui-progress-indicator::before {
+    animation: aui-progress-secondary 2s infinite;
 }
 
-@keyframes progressSlide {
+/* Primary bar: fast, narrow sweep */
+.aui-progress-indicator::after {
+    animation: aui-progress-primary 2s 0.5s infinite;
+}
+
+@keyframes aui-progress-secondary {
     0% {
-        left: 0%;
+        left: -5%;
+        width: 5%;
+    }
+    to {
+        left: 130%;
+        width: 100%;
     }
-    50% {
-        left: 90%;
+}
+
+@keyframes aui-progress-primary {
+    0% {
+        left: -80%;
+        width: 80%;
     }
-    100% {
-        left: 0%;
+    to {
+        left: 110%;
+        width: 10%;
     }
 }
 
+/* Hide pseudo-elements and show value bar in determinate state */
+.aui-progress-indicator[data-value]::before,
+.aui-progress-indicator[data-value]::after {
+    animation: none;
+    display: none;
+}
+
+.aui-progress-indicator-value {
+    border-radius: @aui-progress-indicator-border-radius;
+    display: none; /* hidden in indeterminate state by default */
+    height: @aui-progress-height;
+    #aui.transition(none);
+    position: absolute;
+    width: 0;
+    background: var(--aui-progressbar-color);
+}
+
 .aui-progress-indicator[data-value] .aui-progress-indicator-value {
+    display: block;
     animation: none;
     left: 0;
     background: var(--aui-progressbar-color);
     border-radius: @aui-progress-indicator-border-radius;
-    #aui.transition(width 0.5s);
+    #aui.transition(width 0.2s);
 }
 
 .aui-progress-indicator-static[data-value] .aui-progress-indicator-value {

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

@@ -25,7 +25,7 @@
 span,
 a {
     .aui-progress-tracker-step > & {
-        #aui.typography.h400();
+        font: var(--ds-font-heading-xsmall);
         font-weight: @aui-font-weight-normal;
         color: @aui-progress-tracker-visited-step-text-color;
         display: block;

package/src/less/aui-icons.less

@@ -73,6 +73,6 @@ form.aui .icon-help,
 .aui-icon-help,
 form.aui .icon-inline-help,
 .aui-icon-inline-help {
-    /* icon-help.png */
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABG0lEQVR4AU2RNVYtQRiE+7m7IxHRlRxnHWwAty9lDbg7K4AUh7kJ7vDwEGLcvU6f6cP8NVJVXe3GFWGqWedSWBcLm2DxjmZuuSFGgxATu9X/tWt+zTAPdBNnnBNHl5whP0KDRJm1ezjimn6SpArlNhqRCLd02eA0h+SSzS47PJfuUEvEUMMN/yR/8UC5DVaKJej/T6PVGNbxjC1SeKtvBgfMawQVHhuGS9oC+8ninGW3XNq4MlwRDAyzx1enFDgxbOAFAhP0BpTHf7dIZyW64f1F1hqi3NLhW584Ej77StskKkIjD5Ra6y0bwlvLC7inyR31iCJd2MF5Zs+0U84wr58uq5U7bvBoEDxupBrVHCwi1LLJNaf8F4s4/xGiuqDPs2tUOAAAAABJRU5ErkJggg==');
+    .aui-icon();
+    --aui-ig: @aui-glyph-question-circle;
 }

package/src/less/aui-lozenge.less

@@ -1,35 +1,50 @@
 @import (reference) './imports/global';
 
 /*! AUI Lozenge */
-.aui-lozenge {
-    @aui-lozenge-border-radius: @aui-border-radius-small;
 
+/*
+Internal only. This will be removed in the future,
+when ADG will provide explicit tokens for borders.
+*/
+#aui-themes.when-light-mode({
+    --aui-lozenge-border-l-factor: 1.33;
+});
+
+#aui-themes.when-dark-mode({
+    --aui-lozenge-border-l-factor: 0.7;
+});
+
+.aui-lozenge {
     background: var(--aui-lozenge-bg-color);
-    border: 0;
-    border-radius: @aui-lozenge-border-radius;
+    border-width: @aui-border-width;
+    border-style: @aui-border-type;
+    border-color: var(--aui-lozenge-border-color);
+    border-radius: var(--ds-radius-small, 4px);
     color: var(--aui-lozenge-text-color);
     display: inline-block;
-    font-size: @aui-font-size-xsmall;
-    font-weight: bold;
+    font: var(--ds-font-body-small);
     line-height: 1;
     margin: 0;
-    padding: 2px 5px 3px;
+    padding: var(--ds-space-025, 2px) var(--ds-space-050, 4px);
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-subtle-bg-color);
+        border-color: var(--aui-lozenge-subtle-border-color);
         color: var(--aui-lozenge-subtle-text-color);
     }
 }
 
 .aui-lozenge-success {
     background-color: var(--aui-lozenge-success-bg-color);
+    border-color: var(--aui-lozenge-success-border-color);
     color: var(--aui-lozenge-success-text-color);
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-success-subtle-bg-color);
+        border-color: var(--aui-lozenge-success-subtle-border-color);
         color: var(--aui-lozenge-success-subtle-text-color);
     }
 }
@@ -37,10 +52,12 @@
 .aui-lozenge-error,
 .aui-lozenge-removed {
     background-color: var(--aui-lozenge-error-bg-color);
+    border-color: var(--aui-lozenge-error-border-color);
     color: var(--aui-lozenge-error-text-color);
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-error-subtle-bg-color);
+        border-color: var(--aui-lozenge-error-subtle-border-color);
         color: var(--aui-lozenge-error-subtle-text-color);
     }
 }
@@ -48,10 +65,12 @@
 .aui-lozenge-current,
 .aui-lozenge-inprogress {
     background-color: var(--aui-lozenge-current-bg-color);
+    border-color: var(--aui-lozenge-current-border-color);
     color: var(--aui-lozenge-current-text-color);
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-current-subtle-bg-color);
+        border-color: var(--aui-lozenge-current-subtle-border-color);
         color: var(--aui-lozenge-current-subtle-text-color);
     }
 }
@@ -59,19 +78,23 @@
 .aui-lozenge-complete,
 .aui-lozenge-new {
     background-color: var(--aui-lozenge-new-bg-color);
+    border-color: var(--aui-lozenge-new-border-color);
     color: var(--aui-lozenge-new-text-color);
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-new-subtle-bg-color);
+        border-color: var(--aui-lozenge-new-subtle-border-color);
         color: var(--aui-lozenge-new-subtle-text-color);
     }
 }
 .aui-lozenge-moved {
     background-color: var(--aui-lozenge-moved-bg-color);
+    border-color: var(--aui-lozenge-moved-border-color);
     color: var(--aui-lozenge-moved-text-color);
 
     &.aui-lozenge-subtle {
         background-color: var(--aui-lozenge-moved-subtle-bg-color);
+        border-color: var(--aui-lozenge-moved-subtle-border-color);
         color: var(--aui-lozenge-moved-subtle-text-color);
     }
 }