@atlaskit/tokens 1.14.2 → 1.15.0

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

@@ -31,11 +31,11 @@ Object.defineProperty(exports, "spacing", {
 Object.defineProperty(exports, "typography", {
   enumerable: true,
   get: function get() {
-    return _atlassianTypography.default;
+    return _atlassianTypographyAdg.default;
   }
 });
 var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
 var _atlassianDark = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-dark"));
 var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));
-var _atlassianTypography = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography"));
+var _atlassianTypographyAdg = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography-adg3"));
 var _atlassianShape = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-shape"));

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.14.2";
+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/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.14.2";
+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/cjs/palettes/typography-palette.js

@@ -8,8 +8,48 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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: {
@@ -50,25 +90,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'
@@ -78,14 +118,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'
       }
@@ -94,58 +175,82 @@ 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)
 };
 var _default = typographyPalette;
 exports.default = _default;

package/dist/cjs/theme-config.js

@@ -41,7 +41,7 @@ exports.themeColorModes = themeColorModes;
  *
  * These ids must be kebab case
  */
-var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
+var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3'];
 exports.themeIds = themeIds;
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
@@ -113,9 +113,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'
@@ -148,6 +148,14 @@ var themeConfig = {
       type: 'color',
       mode: 'dark'
     }
+  },
+  'atlassian-typography': {
+    id: 'typography',
+    displayName: 'Atlassian Typography',
+    palette: 'typographyPalette',
+    attributes: {
+      type: 'typography'
+    }
   }
 };
 

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

@@ -8,10 +8,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/cjs/tokens/atlassian-typography/theme.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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'
+        }
+      }
+    }
+  }
+};
+var _default = typography;
+exports.default = _default;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var font = {
+  font: {
+    letterSpacing: {
+      '0': {
+        value: 'LetterSpacing0'
+      },
+      '100': {
+        value: 'LetterSpacing0'
+      },
+      '200': {
+        value: 'LetterSpacing0'
+      },
+      '300': {
+        value: 'LetterSpacing0'
+      },
+      '400': {
+        value: 'LetterSpacing0'
+      }
+    }
+  }
+};
+var _default = font;
+exports.default = _default;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var font = {
+  font: {
+    family: {
+      sans: {
+        value: 'LegacyFontFamilyWebSans'
+      },
+      monospace: {
+        value: 'FontFamilyWebMono'
+      },
+      product: {
+        value: 'FontFamilyWebSans'
+      },
+      brand: {
+        value: 'FontFamilyCharlie'
+      },
+      code: {
+        value: 'FontFamilyWebMono'
+      }
+    }
+  }
+};
+var _default = font;
+exports.default = _default;

package/dist/cjs/tokens/{atlassian-typography → atlassian-typography-adg3}/font-size.js

@@ -8,28 +8,28 @@ var font = {
   font: {
     size: {
       '050': {
-        value: 'FontSize050'
+        value: 'FontSize11'
       },
       '075': {
-        value: 'FontSize075'
+        value: 'FontSize12'
       },
       '100': {
-        value: 'FontSize100'
+        value: 'FontSize14'
       },
       '200': {
-        value: 'FontSize200'
+        value: 'FontSize16'
       },
       '300': {
-        value: 'FontSize300'
+        value: 'FontSize20'
       },
       '400': {
-        value: 'FontSize400'
+        value: 'FontSize24'
       },
       '500': {
-        value: 'FontSize500'
+        value: 'LegacyFontSize29'
       },
       '600': {
-        value: 'FontSize600'
+        value: 'LegacyFontSize35'
       }
     }
   }

package/dist/cjs/tokens/{atlassian-typography → atlassian-typography-adg3}/font-weight.js

@@ -8,16 +8,16 @@ var font = {
   font: {
     weight: {
       regular: {
-        value: 'FontWeightRegular'
+        value: 'FontWeight400'
       },
       medium: {
-        value: 'FontWeightMedium'
+        value: 'FontWeight500'
       },
       semibold: {
-        value: 'FontWeightSemiBold'
+        value: 'FontWeight600'
       },
       bold: {
-        value: 'FontWeightBold'
+        value: 'FontWeight700'
       }
     }
   }

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

@@ -7,6 +7,9 @@ exports.default = void 0;
 var font = {
   font: {
     lineHeight: {
+      '1': {
+        value: 'LineHeight1'
+      },
       '100': {
         value: 'LineHeight100'
       },