@atlassian/aui 10.2.2 → 11.0.0-m005

package/src/less/aui-navigation.less

@@ -34,7 +34,9 @@
 /* Navigation headings
 -------------------- */
 .aui-nav-heading {
-    #aui.typography.h100(@aui-nav-heading-text-color);
+    font: var(--ds-font-heading-xxsmall);
+    color: @aui-nav-heading-text-color;
+    text-transform: uppercase;
     line-height: unit((20 / @aui-nav-heading-text-font-size));
     padding: 0 @aui-nav-link-spacing-horizontal; // to match the nav-item layout.
 

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

@@ -1,23 +1,32 @@
 @import (reference) './imports/global';
+@import './fonts.less';
 
 /**
  * TYPOGRAPHY
  */
-html {
-    #aui.text-reset();
-    font-family: @aui-font-family;
-
-    // This "font-size: 16px;" is needed for rem units from Atlaskit to work as before. Refer to:
-    // https://bulldog.internal.atlassian.com/browse/JSDSS-8110
-    font-size: 16px;
-    > * {
-        font-size: @aui-font-size-medium; // should match #aui.text-reset();
-    }
+body {
+    color: @aui-text-color;
+    font: var(
+        --ds-font-body,
+        normal 400 14px/1.42857142857143 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    text-align: left; // in case anybody used text-align for layout purposes
 }
 
 /* International Font Stacks*/
 [lang|='ja'] {
-    font-family: @aui-font-family-ja;
+    font-family:
+        'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック',
+        Verdana, Arial, sans-serif;
 }
 
 /* Default margins */
@@ -38,30 +47,108 @@ table.aui,
     }
 }
 
-/* Headings: desired line height in px / font size = unitless line height */
+/* Headings: based on Atlaskit design tokens, with desktop ADG3 fallbacks */
 h1 {
-    #aui.typography.h700();
-    margin: (@aui-grid * 3) 0 0 0;
+    font: var(
+        --ds-font-heading-xlarge,
+        600 2.0714285714285716em/1.103448275862069 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-400);
 }
 h2 {
-    #aui.typography.h600();
-    margin: (@aui-grid * 3) 0 0 0;
+    font: var(
+        --ds-font-heading-large,
+        500 1.7142857142857142em/1.1666666666666667 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-400);
 }
 h3 {
-    #aui.typography.h500();
-    margin: (@aui-grid * 3) 0 0 0;
+    font: var(
+        --ds-font-heading-medium,
+        500 1.4285714285714286em/1.2 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-300);
 }
 h4 {
-    #aui.typography.h400();
-    margin: (@aui-grid * 2) 0 0 0;
+    font: var(
+        --ds-font-heading-small,
+        600 1.1428571428571428em/1.25 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-250);
 }
 h5 {
-    #aui.typography.h300();
-    margin: (@aui-grid * 2) 0 0 0;
+    font: var(
+        --ds-font-heading-xsmall,
+        600 1em/1.1428571428571428 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-250);
 }
 h6 {
-    #aui.typography.h200();
-    margin: (@aui-grid * 2) 0 0 0;
+    font: var(
+        --ds-font-heading-xxsmall,
+        600 0.8571428571428571em/1.3333333333333333 -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif
+    );
+    color: var(--ds-text);
+    margin-top: var(--ds-space-250);
 }
 h1,
 h2,
@@ -69,8 +156,6 @@ h3,
 h4,
 h5,
 h6 {
-    color: @aui-text-color;
-
     &:first-child {
         margin-top: 0;
     }
@@ -82,7 +167,7 @@ h2 + h3,
 h3 + h4,
 h4 + h5,
 h5 + h6 {
-    margin-top: @aui-grid;
+    margin-top: var(--ds-space-200);
 }
 /* Increase the margins on all headings when used in the group/item pattern ... */
 .aui-group > .aui-item > h1:first-child,
@@ -111,7 +196,14 @@ small {
 }
 code,
 kbd {
-    font-family: @aui-code-font-family;
+    font-family: var(
+        --ds-font-family-code,
+        ui-monospace,
+        Menlo,
+        'Segoe UI Mono',
+        'Ubuntu Mono',
+        monospace
+    );
 }
 var,
 address,

package/src/less/aui-select2.less

@@ -180,7 +180,9 @@
         }
 
         > .select2-result-label {
-            #aui.typography.h100(@aui-dropdown-heading-text-color);
+            font: var(--ds-font-heading-xxsmall);
+            color: @aui-dropdown-heading-text-color;
+            text-transform: uppercase;
         }
     }
 

package/src/less/aui-sidebar-skeleton.less

@@ -123,7 +123,7 @@
         .aui-page-header-main {
             h1,
             h2 {
-                #aui.typography.h700();
+                font: var(--ds-font-heading-large);
                 padding-top: @aui-sidebar-grid;
 
                 &:only-child {
@@ -146,7 +146,7 @@
 
         h1,
         h2 {
-            #aui.typography.h500();
+            font: var(--ds-font-heading-small);
             #aui.text-truncate();
             line-height: @aui-sidebar-base-line-height;
         }

package/src/less/dialog.less

@@ -40,7 +40,7 @@
     white-space: nowrap;
 }
 .aui-dialog h2.dialog-title {
-    #aui.typography.h600();
+    font: var(--ds-font-heading-large);
     color: @aui-text-color;
 }
 

package/src/less/dialog2.less

@@ -136,9 +136,10 @@
             vertical-align: middle;
         }
 
+        h1,
         h2,
         h3 {
-            #aui.typography.h600();
+            font: var(--ds-font-heading-large);
         }
     }
 

package/src/less/dropdown2.less

@@ -95,7 +95,9 @@
     > strong,
     .aui-dropdown2-section > strong,
     .aui-dropdown2-heading {
-        #aui.typography.h100(@aui-dropdown-heading-text-color);
+        font: var(--ds-font-heading-xxsmall);
+        color: @aui-dropdown-heading-text-color;
+        text-transform: uppercase;
         display: block;
         padding: @aui-nav-link-spacing-vertical @aui-nav-link-spacing-horizontal;
 

package/src/less/fonts.less

@@ -0,0 +1,295 @@
+/* Atlassian Sans */
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-greek-ext.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-greek.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-vietnamese.woff2) format('woff2');
+    unicode-range:
+        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+        U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-latin.woff2) format('woff2');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+21E7, U+21A9, U+21E5, U+21EA, U+2212,
+        U+2215, U+2303, U+2318, U+2325, U+232B, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSans-latin-ext.woff2) format('woff2');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Atlassian Sans Italic */
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-greek-ext.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-greek.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-vietnamese.woff2) format('woff2');
+    unicode-range:
+        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+        U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-latin.woff2) format('woff2');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+21E7, U+21A9, U+21E5, U+21EA, U+2212,
+        U+2215, U+2303, U+2318, U+2325, U+232B, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Atlassian Sans';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(fonts/AtlassianSansItalic-latin-ext.woff2) format('woff2');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Atlassian Mono */
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-greek.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-vietnamese.woff2) format('woff2');
+    unicode-range:
+        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+        U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-latin-ext.woff2) format('woff2');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMono-latin.woff2) format('woff2');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+21E7, U+21A9, U+21E5, U+21EA, U+2212,
+        U+2215, U+2303, U+2318, U+2325, U+232B, U+FEFF, U+FFFD;
+}
+
+/* Atlassian Mono Italic */
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-greek.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* vietnamese */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-vietnamese.woff2) format('woff2');
+    unicode-range:
+        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+        U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-latin-ext.woff2) format('woff2');
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Atlassian Mono';
+    font-style: italic;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(fonts/AtlassianMonoItalic-latin.woff2) format('woff2');
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+21E7, U+21A9, U+21E5, U+21EA, U+2212,
+        U+2215, U+2303, U+2318, U+2325, U+232B, U+FEFF, U+FFFD;
+}