@atlaskit/tokens 1.14.1 → 1.15.0

package/dist/es2019/babel-plugin/plugin.js

@@ -1,6 +1,35 @@
 import * as t from '@babel/types';
-import tokenDefaultValues from '../artifacts/token-default-values';
 import tokenNames from '../artifacts/token-names';
+import legacyLight from '../artifacts/tokens-raw/atlassian-legacy-light';
+import light from '../artifacts/tokens-raw/atlassian-light';
+// Convert raw tokens to key-value pairs { token: value }
+const getThemeValues = theme => {
+  const tokensToMap = theme === 'light' ? light : legacyLight;
+  return tokensToMap.reduce((formatted, rawToken) => {
+    let value;
+    if (typeof rawToken.value === 'string') {
+      value = rawToken.value;
+    } else if (typeof rawToken.value === 'number') {
+      value = rawToken.value.toString();
+    } else {
+      // If it's a box shadow, it'll be an array of values that needs to be
+      // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
+      value = rawToken.value.reduce((prev, curr, index) => {
+        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${curr.color}`;
+        if (index === 0) {
+          value += `, `;
+        }
+        return prev + value;
+      }, '');
+    }
+    return {
+      ...formatted,
+      [rawToken.cleanName]: value
+    };
+  }, {});
+};
+const lightValues = getThemeValues('light');
+const legacyLightValues = getThemeValues('legacy-light');
 export default function plugin() {
   return {
     visitor: {
@@ -37,7 +66,7 @@ export default function plugin() {
               // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
-                  replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName)})`);
+                  replacementNode = t.stringLiteral(`var(${cssTokenValue}, ${getDefaultFallback(tokenName, state.opts.defaultTheme)})`);
                 } else {
                   replacementNode = t.stringLiteral(`var(${cssTokenValue})`);
                 }
@@ -101,8 +130,9 @@ export default function plugin() {
     }
   };
 }
-function getDefaultFallback(tokenName) {
-  return tokenDefaultValues[tokenName];
+function getDefaultFallback(tokenName, theme = 'light') {
+  const tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
+  return tokens[tokenName];
 }
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {

package/dist/es2019/constants.js

@@ -1,7 +1,6 @@
 export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
-export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds';
 export const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;

package/dist/es2019/entry-points/tokens-raw.js

@@ -1,5 +1,5 @@
 export { default as light } from '../artifacts/tokens-raw/atlassian-light';
 export { default as dark } from '../artifacts/tokens-raw/atlassian-dark';
 export { default as spacing } from '../artifacts/tokens-raw/atlassian-spacing';
-export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
+export { default as typography } from '../artifacts/tokens-raw/atlassian-typography-adg3';
 export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';

package/dist/es2019/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.14.1";
+const version = "1.15.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.14.1";
+const version = "1.15.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/es2019/palettes/typography-palette.js

@@ -1,5 +1,45 @@
+const letterSpacingScale = {
+  letterSpacing: {
+    LetterSpacing0: {
+      value: '0',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LetterSpacing100: {
+      value: '-0.003em',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LetterSpacing200: {
+      value: '-0.006em',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LetterSpacing300: {
+      value: '-0.008em',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LetterSpacing400: {
+      value: '-0.01em',
+      attributes: {
+        group: 'typography'
+      }
+    }
+  }
+};
 const lineHeightScale = {
   lineHeight: {
+    LineHeight1: {
+      value: '1',
+      attributes: {
+        group: 'typography'
+      }
+    },
     LineHeight100: {
       value: 16,
       attributes: {
@@ -40,25 +80,25 @@ const lineHeightScale = {
 };
 const fontWeightScale = {
   fontWeight: {
-    FontWeightRegular: {
+    FontWeight400: {
       value: '400',
       attributes: {
         group: 'typography'
       }
     },
-    FontWeightMedium: {
+    FontWeight500: {
       value: '500',
       attributes: {
         group: 'typography'
       }
     },
-    FontWeightSemiBold: {
+    FontWeight600: {
       value: '600',
       attributes: {
         group: 'typography'
       }
     },
-    FontWeightBold: {
+    FontWeight700: {
       value: '700',
       attributes: {
         group: 'typography'
@@ -68,14 +108,55 @@ const fontWeightScale = {
 };
 const fontFamilyPalette = {
   fontFamily: {
-    FontFamilySans: {
-      value: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
+    FontFamilyCharlie: {
+      value: 'Charlie Sans',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LegacyFontFamilyWebSans: {
+      value: `-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif`,
+      attributes: {
+        group: 'typography'
+      }
+    },
+    /**
+     * @see https://infinnie.github.io/blog/2017/systemui.html
+     * @see https://github.com/twbs/bootstrap/pull/22377
+     * @see https://fonts.google.com/knowledge/glossary/system_font_web_safe_font
+     */
+    FontFamilyWebSans: {
+      value: `ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif`,
       attributes: {
         group: 'typography'
       }
     },
-    FontFamilyMonospace: {
-      value: `"SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace`,
+    FontFamilyiOSSans: {
+      value: 'SF Pro',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontFamilyAndroidSans: {
+      value: 'Roboto',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontFamilyWebMono: {
+      value: `ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace`,
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontFamilyiOSMono: {
+      value: 'SF Mono',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontFamilyAndroidMono: {
+      value: 'Roboto Mono',
       attributes: {
         group: 'typography'
       }
@@ -84,53 +165,77 @@ const fontFamilyPalette = {
 };
 const fontSizeScale = {
   fontSize: {
-    FontSize050: {
+    FontSizeCode: {
+      value: '0.875em',
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontSize11: {
       value: 11,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize075: {
+    FontSize12: {
       value: 12,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize100: {
+    FontSize14: {
       value: 14,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize200: {
+    FontSize16: {
       value: 16,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize300: {
+    FontSize20: {
       value: 20,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize400: {
+    FontSize24: {
       value: 24,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize500: {
+    FontSize28: {
+      value: 28,
+      attributes: {
+        group: 'typography'
+      }
+    },
+    LegacyFontSize29: {
       value: 29,
       attributes: {
         group: 'typography'
       }
     },
-    FontSize600: {
+    LegacyFontSize35: {
       value: 35,
       attributes: {
         group: 'typography'
       }
+    },
+    FontSize36: {
+      value: 36,
+      attributes: {
+        group: 'typography'
+      }
+    },
+    FontSize48: {
+      value: 48,
+      attributes: {
+        group: 'typography'
+      }
     }
   }
 };
@@ -139,7 +244,8 @@ const typographyPalette = {
     ...fontSizeScale,
     ...fontWeightScale,
     ...fontFamilyPalette,
-    ...lineHeightScale
+    ...lineHeightScale,
+    ...letterSpacingScale
   }
 };
 export default typographyPalette;

package/dist/es2019/theme-config.js

@@ -34,7 +34,7 @@ export const themeColorModes = ['light', 'dark', 'auto'];
  *
  * These ids must be kebab case
  */
-export const themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
+export const themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
@@ -104,9 +104,9 @@ const themeConfig = {
       type: 'spacing'
     }
   },
-  'atlassian-typography': {
-    id: 'typography',
-    displayName: 'Atlassian Typography',
+  'atlassian-typography-adg3': {
+    id: 'typography-adg3',
+    displayName: 'ADG3 Typography',
     palette: 'typographyPalette',
     attributes: {
       type: 'typography'
@@ -139,6 +139,14 @@ const themeConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-typography': {
+    id: 'typography',
+    displayName: 'Atlassian Typography',
+    palette: 'typographyPalette',
+    attributes: {
+      type: 'typography'
+    }
   }
 };
 

package/dist/es2019/tokens/atlassian-typography/font-family.js

@@ -2,10 +2,19 @@ const font = {
   font: {
     family: {
       sans: {
-        value: 'FontFamilySans'
+        value: 'FontFamilyWebSans'
       },
       monospace: {
-        value: 'FontFamilyMonospace'
+        value: 'FontFamilyWebMono'
+      },
+      product: {
+        value: 'FontFamilyWebSans'
+      },
+      brand: {
+        value: 'FontFamilyCharlie'
+      },
+      code: {
+        value: 'FontFamilyWebMono'
       }
     }
   }

package/dist/es2019/tokens/atlassian-typography/theme.js

@@ -0,0 +1,133 @@
+const typography = {
+  font: {
+    heading: {
+      xxl: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize36',
+          lineHeight: 'LineHeight600',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      xl: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize28',
+          lineHeight: 'LineHeight500',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      lg: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize24',
+          lineHeight: 'LineHeight400',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      md: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize20',
+          lineHeight: 'LineHeight300',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      sm: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize16',
+          lineHeight: 'LineHeight200',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      xs: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize14',
+          lineHeight: 'LineHeight100',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      xxs: {
+        value: {
+          fontWeight: 'FontWeight700',
+          fontSize: 'FontSize12',
+          lineHeight: 'LineHeight100',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      }
+    },
+    code: {
+      '[default]': {
+        value: {
+          fontWeight: 'FontWeight400',
+          fontSize: 'FontSizeCode',
+          lineHeight: 'LineHeight1',
+          fontFamily: 'FontFamilyWebMono',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      }
+    },
+    body: {
+      '[default]': {
+        value: {
+          fontWeight: 'FontWeight400',
+          fontSize: 'FontSize14',
+          lineHeight: 'LineHeight200',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      sm: {
+        value: {
+          fontWeight: 'FontWeight400',
+          fontSize: 'FontSize11',
+          lineHeight: 'LineHeight200',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      }
+    },
+    ui: {
+      '[default]': {
+        value: {
+          fontWeight: 'FontWeight400',
+          fontSize: 'FontSize14',
+          lineHeight: 'LineHeight1',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      },
+      sm: {
+        value: {
+          fontWeight: 'FontWeight400',
+          fontSize: 'FontSize11',
+          lineHeight: 'LineHeight1',
+          fontFamily: 'FontFamilyWebSans',
+          fontStyle: 'normal',
+          letterSpacing: 'LetterSpacing0'
+        }
+      }
+    }
+  }
+};
+export default typography;

package/dist/es2019/tokens/atlassian-typography/utils.js

@@ -0,0 +1,22 @@
+const font = {
+  font: {
+    letterSpacing: {
+      '0': {
+        value: 'LetterSpacing0'
+      },
+      '100': {
+        value: 'LetterSpacing0'
+      },
+      '200': {
+        value: 'LetterSpacing0'
+      },
+      '300': {
+        value: 'LetterSpacing0'
+      },
+      '400': {
+        value: 'LetterSpacing0'
+      }
+    }
+  }
+};
+export default font;

package/dist/es2019/tokens/atlassian-typography-adg3/font-family.js

@@ -0,0 +1,22 @@
+const font = {
+  font: {
+    family: {
+      sans: {
+        value: 'LegacyFontFamilyWebSans'
+      },
+      monospace: {
+        value: 'FontFamilyWebMono'
+      },
+      product: {
+        value: 'FontFamilyWebSans'
+      },
+      brand: {
+        value: 'FontFamilyCharlie'
+      },
+      code: {
+        value: 'FontFamilyWebMono'
+      }
+    }
+  }
+};
+export default font;

package/dist/es2019/tokens/atlassian-typography-adg3/font-size.js

@@ -0,0 +1,31 @@
+const font = {
+  font: {
+    size: {
+      '050': {
+        value: 'FontSize11'
+      },
+      '075': {
+        value: 'FontSize12'
+      },
+      '100': {
+        value: 'FontSize14'
+      },
+      '200': {
+        value: 'FontSize16'
+      },
+      '300': {
+        value: 'FontSize20'
+      },
+      '400': {
+        value: 'FontSize24'
+      },
+      '500': {
+        value: 'LegacyFontSize29'
+      },
+      '600': {
+        value: 'LegacyFontSize35'
+      }
+    }
+  }
+};
+export default font;

package/dist/es2019/tokens/atlassian-typography-adg3/font-weight.js

@@ -0,0 +1,19 @@
+const font = {
+  font: {
+    weight: {
+      regular: {
+        value: 'FontWeight400'
+      },
+      medium: {
+        value: 'FontWeight500'
+      },
+      semibold: {
+        value: 'FontWeight600'
+      },
+      bold: {
+        value: 'FontWeight700'
+      }
+    }
+  }
+};
+export default font;

package/dist/es2019/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.js

@@ -1,6 +1,9 @@
 const font = {
   font: {
     lineHeight: {
+      '1': {
+        value: 'LineHeight1'
+      },
       '100': {
         value: 'LineHeight100'
       },