@atlaskit/tokens 1.14.1 → 1.15.0

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

@@ -1,6 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 }
+var getThemeValues = function getThemeValues(theme) {
+  var tokensToMap = theme === 'light' ? light : legacyLight;
+  return tokensToMap.reduce(function (formatted, rawToken) {
+    var 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(function (prev, curr, index) {
+        var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(curr.color);
+        if (index === 0) {
+          value += ", ";
+        }
+        return prev + value;
+      }, '');
+    }
+    return _objectSpread(_objectSpread({}, formatted), {}, _defineProperty({}, rawToken.cleanName, value));
+  }, {});
+};
+var lightValues = getThemeValues('light');
+var legacyLightValues = getThemeValues('legacy-light');
 export default function plugin() {
   return {
     visitor: {
@@ -45,7 +74,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(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
+                  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
                 } else {
                   replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
                 }
@@ -110,7 +139,9 @@ export default function plugin() {
   };
 }
 function getDefaultFallback(tokenName) {
-  return tokenDefaultValues[tokenName];
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  var tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
+  return tokens[tokenName];
 }
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {

package/dist/esm/constants.js

@@ -1,7 +1,6 @@
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
-export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds';
 export var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");

package/dist/esm/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/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.14.1";
+var 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/esm/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';
 var name = "@atlaskit/tokens";
-var version = "1.14.1";
+var 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/esm/palettes/typography-palette.js

@@ -1,8 +1,48 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var 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'
+      }
+    }
+  }
+};
 var lineHeightScale = {
   lineHeight: {
+    LineHeight1: {
+      value: '1',
+      attributes: {
+        group: 'typography'
+      }
+    },
     LineHeight100: {
       value: 16,
       attributes: {
@@ -43,25 +83,25 @@ var lineHeightScale = {
 };
 var 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'
@@ -71,14 +111,55 @@ var fontWeightScale = {
 };
 var fontFamilyPalette = {
   fontFamily: {
-    FontFamilySans: {
+    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'
       }
     },
-    FontFamilyMonospace: {
-      value: "\"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace",
+    /**
+     * @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'
+      }
+    },
+    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'
       }
@@ -87,57 +168,81 @@ var fontFamilyPalette = {
 };
 var 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'
+      }
     }
   }
 };
 var typographyPalette = {
-  typography: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontSizeScale), fontWeightScale), fontFamilyPalette), lineHeightScale)
+  typography: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontSizeScale), fontWeightScale), fontFamilyPalette), lineHeightScale), letterSpacingScale)
 };
 export default typographyPalette;

package/dist/esm/theme-config.js

@@ -34,7 +34,7 @@ export var themeColorModes = ['light', 'dark', 'auto'];
  *
  * These ids must be kebab case
  */
-export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
+export var 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 @@ var 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 @@ var themeConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-typography': {
+    id: 'typography',
+    displayName: 'Atlassian Typography',
+    palette: 'typographyPalette',
+    attributes: {
+      type: 'typography'
+    }
   }
 };
 

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

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

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

@@ -0,0 +1,133 @@
+var 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/esm/tokens/atlassian-typography/utils.js

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

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

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

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

@@ -0,0 +1,31 @@
+var 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/esm/tokens/atlassian-typography-adg3/font-weight.js

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

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

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