@atlaskit/tokens 1.14.1 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (159) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js +2 -2
  3. package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js +2 -2
  4. package/dist/cjs/artifacts/palettes-raw/typography-palette.js +277 -37
  5. package/dist/cjs/artifacts/theme-import-map.js +10 -4
  6. package/dist/cjs/artifacts/themes/atlassian-typography-adg3.js +13 -0
  7. package/dist/cjs/artifacts/themes/atlassian-typography.js +2 -2
  8. package/dist/cjs/artifacts/token-default-values.js +26 -2
  9. package/dist/cjs/artifacts/token-names.js +22 -1
  10. package/dist/cjs/artifacts/tokens-raw/atlassian-typography-adg3.js +1084 -0
  11. package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +465 -253
  12. package/dist/cjs/babel-plugin/plugin.js +34 -3
  13. package/dist/cjs/constants.js +1 -3
  14. package/dist/cjs/entry-points/tokens-raw.js +2 -2
  15. package/dist/cjs/get-token-value.js +1 -1
  16. package/dist/cjs/get-token.js +1 -1
  17. package/dist/cjs/palettes/typography-palette.js +121 -16
  18. package/dist/cjs/theme-config.js +12 -4
  19. package/dist/cjs/tokens/atlassian-typography/font-family.js +11 -2
  20. package/dist/cjs/tokens/atlassian-typography/theme.js +140 -0
  21. package/dist/cjs/tokens/atlassian-typography/utils.js +29 -0
  22. package/dist/cjs/tokens/atlassian-typography-adg3/font-family.js +29 -0
  23. package/dist/cjs/tokens/{atlassian-typography → atlassian-typography-adg3}/font-size.js +8 -8
  24. package/dist/cjs/tokens/{atlassian-typography → atlassian-typography-adg3}/font-weight.js +4 -4
  25. package/dist/cjs/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.js +3 -0
  26. package/dist/cjs/tokens/atlassian-typography-adg3/theme.js +140 -0
  27. package/dist/cjs/tokens/atlassian-typography-adg3/utils.js +29 -0
  28. package/dist/cjs/tokens/default/typography/font-family.js +24 -0
  29. package/dist/cjs/tokens/default/typography/font.js +133 -0
  30. package/dist/cjs/tokens/default/typography/letter-spacing.js +54 -0
  31. package/dist/cjs/tokens/default/typography/line-height.js +8 -0
  32. package/dist/es2019/artifacts/atlassian-dark-token-value-for-contrast-check.js +2 -2
  33. package/dist/es2019/artifacts/atlassian-light-token-value-for-contrast-check.js +2 -2
  34. package/dist/es2019/artifacts/palettes-raw/typography-palette.js +277 -37
  35. package/dist/es2019/artifacts/theme-import-map.js +6 -4
  36. package/dist/es2019/artifacts/themes/atlassian-typography-adg3.js +50 -0
  37. package/dist/es2019/artifacts/themes/atlassian-typography.js +23 -21
  38. package/dist/es2019/artifacts/token-default-values.js +26 -2
  39. package/dist/es2019/artifacts/token-names.js +22 -1
  40. package/dist/es2019/artifacts/tokens-raw/atlassian-typography-adg3.js +1077 -0
  41. package/dist/es2019/artifacts/tokens-raw/atlassian-typography.js +465 -253
  42. package/dist/es2019/babel-plugin/plugin.js +34 -4
  43. package/dist/es2019/constants.js +0 -1
  44. package/dist/es2019/entry-points/tokens-raw.js +1 -1
  45. package/dist/es2019/get-token-value.js +1 -1
  46. package/dist/es2019/get-token.js +1 -1
  47. package/dist/es2019/palettes/typography-palette.js +123 -17
  48. package/dist/es2019/theme-config.js +12 -4
  49. package/dist/es2019/tokens/atlassian-typography/font-family.js +11 -2
  50. package/dist/es2019/tokens/atlassian-typography/theme.js +133 -0
  51. package/dist/es2019/tokens/atlassian-typography/utils.js +22 -0
  52. package/dist/es2019/tokens/atlassian-typography-adg3/font-family.js +22 -0
  53. package/dist/es2019/tokens/atlassian-typography-adg3/font-size.js +31 -0
  54. package/dist/es2019/tokens/atlassian-typography-adg3/font-weight.js +19 -0
  55. package/dist/es2019/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.js +3 -0
  56. package/dist/es2019/tokens/atlassian-typography-adg3/theme.js +133 -0
  57. package/dist/es2019/tokens/atlassian-typography-adg3/utils.js +22 -0
  58. package/dist/es2019/tokens/default/typography/font-family.js +24 -0
  59. package/dist/es2019/tokens/default/typography/font.js +126 -0
  60. package/dist/es2019/tokens/default/typography/letter-spacing.js +47 -0
  61. package/dist/es2019/tokens/default/typography/line-height.js +8 -0
  62. package/dist/esm/artifacts/atlassian-dark-token-value-for-contrast-check.js +2 -2
  63. package/dist/esm/artifacts/atlassian-light-token-value-for-contrast-check.js +2 -2
  64. package/dist/esm/artifacts/palettes-raw/typography-palette.js +277 -37
  65. package/dist/esm/artifacts/theme-import-map.js +8 -4
  66. package/dist/esm/artifacts/themes/atlassian-typography-adg3.js +6 -0
  67. package/dist/esm/artifacts/themes/atlassian-typography.js +2 -2
  68. package/dist/esm/artifacts/token-default-values.js +26 -2
  69. package/dist/esm/artifacts/token-names.js +22 -1
  70. package/dist/esm/artifacts/tokens-raw/atlassian-typography-adg3.js +1077 -0
  71. package/dist/esm/artifacts/tokens-raw/atlassian-typography.js +465 -253
  72. package/dist/esm/babel-plugin/plugin.js +34 -3
  73. package/dist/esm/constants.js +0 -1
  74. package/dist/esm/entry-points/tokens-raw.js +1 -1
  75. package/dist/esm/get-token-value.js +1 -1
  76. package/dist/esm/get-token.js +1 -1
  77. package/dist/esm/palettes/typography-palette.js +121 -16
  78. package/dist/esm/theme-config.js +12 -4
  79. package/dist/esm/tokens/atlassian-typography/font-family.js +11 -2
  80. package/dist/esm/tokens/atlassian-typography/theme.js +133 -0
  81. package/dist/esm/tokens/atlassian-typography/utils.js +22 -0
  82. package/dist/esm/tokens/atlassian-typography-adg3/font-family.js +22 -0
  83. package/dist/esm/tokens/atlassian-typography-adg3/font-size.js +31 -0
  84. package/dist/esm/tokens/atlassian-typography-adg3/font-weight.js +19 -0
  85. package/dist/esm/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.js +3 -0
  86. package/dist/esm/tokens/atlassian-typography-adg3/theme.js +133 -0
  87. package/dist/esm/tokens/atlassian-typography-adg3/utils.js +22 -0
  88. package/dist/esm/tokens/default/typography/font-family.js +24 -0
  89. package/dist/esm/tokens/default/typography/font.js +126 -0
  90. package/dist/esm/tokens/default/typography/letter-spacing.js +47 -0
  91. package/dist/esm/tokens/default/typography/line-height.js +8 -0
  92. package/dist/types/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +2 -2
  93. package/dist/types/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +2 -2
  94. package/dist/types/artifacts/palettes-raw/typography-palette.d.ts +1 -1
  95. package/dist/types/artifacts/theme-import-map.d.ts +1 -1
  96. package/dist/types/artifacts/themes/atlassian-typography-adg3.d.ts +7 -0
  97. package/dist/types/artifacts/themes/atlassian-typography.d.ts +2 -2
  98. package/dist/types/artifacts/token-default-values.d.ts +26 -2
  99. package/dist/types/artifacts/token-names.d.ts +43 -1
  100. package/dist/types/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +101 -0
  101. package/dist/types/artifacts/tokens-raw/atlassian-typography.d.ts +111 -3
  102. package/dist/types/artifacts/types-internal.d.ts +2 -2
  103. package/dist/types/artifacts/types.d.ts +2 -2
  104. package/dist/types/babel-plugin/plugin.d.ts +3 -0
  105. package/dist/types/constants.d.ts +0 -1
  106. package/dist/types/entry-points/tokens-raw.d.ts +1 -1
  107. package/dist/types/palettes/typography-palette.d.ts +8 -6
  108. package/dist/types/theme-config.d.ts +4 -4
  109. package/dist/types/tokens/atlassian-typography/theme.d.ts +10 -0
  110. package/dist/types/tokens/atlassian-typography/utils.d.ts +4 -0
  111. package/dist/types/tokens/atlassian-typography-adg3/font-family.d.ts +4 -0
  112. package/dist/types/tokens/atlassian-typography-adg3/theme.d.ts +10 -0
  113. package/dist/types/tokens/atlassian-typography-adg3/utils.d.ts +4 -0
  114. package/dist/types/tokens/default/typography/font.d.ts +20 -0
  115. package/dist/types/tokens/default/typography/letter-spacing.d.ts +4 -0
  116. package/dist/types/types.d.ts +111 -22
  117. package/dist/types-ts4.5/artifacts/atlassian-dark-token-value-for-contrast-check.d.ts +2 -2
  118. package/dist/types-ts4.5/artifacts/atlassian-light-token-value-for-contrast-check.d.ts +2 -2
  119. package/dist/types-ts4.5/artifacts/palettes-raw/typography-palette.d.ts +1 -1
  120. package/dist/types-ts4.5/artifacts/theme-import-map.d.ts +1 -1
  121. package/dist/types-ts4.5/artifacts/themes/atlassian-typography-adg3.d.ts +7 -0
  122. package/dist/types-ts4.5/artifacts/themes/atlassian-typography.d.ts +2 -2
  123. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +26 -2
  124. package/dist/types-ts4.5/artifacts/token-names.d.ts +43 -1
  125. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography-adg3.d.ts +101 -0
  126. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography.d.ts +111 -3
  127. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  128. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  129. package/dist/types-ts4.5/babel-plugin/plugin.d.ts +3 -0
  130. package/dist/types-ts4.5/constants.d.ts +0 -1
  131. package/dist/types-ts4.5/entry-points/tokens-raw.d.ts +1 -1
  132. package/dist/types-ts4.5/palettes/typography-palette.d.ts +8 -6
  133. package/dist/types-ts4.5/theme-config.d.ts +5 -3
  134. package/dist/types-ts4.5/tokens/atlassian-typography/theme.d.ts +10 -0
  135. package/dist/types-ts4.5/tokens/atlassian-typography/utils.d.ts +4 -0
  136. package/dist/types-ts4.5/tokens/atlassian-typography-adg3/font-family.d.ts +4 -0
  137. package/dist/types-ts4.5/tokens/atlassian-typography-adg3/theme.d.ts +10 -0
  138. package/dist/types-ts4.5/tokens/atlassian-typography-adg3/utils.d.ts +4 -0
  139. package/dist/types-ts4.5/tokens/default/typography/font.d.ts +20 -0
  140. package/dist/types-ts4.5/tokens/default/typography/letter-spacing.d.ts +4 -0
  141. package/dist/types-ts4.5/types.d.ts +111 -22
  142. package/figma/atlassian-typography-adg3.json +150 -0
  143. package/figma/atlassian-typography.json +19 -82
  144. package/package.json +1 -1
  145. package/report.api.md +60 -2
  146. package/tmp/api-report-tmp.d.ts +49 -7
  147. package/dist/cjs/version.json +0 -7
  148. package/dist/es2019/tokens/atlassian-typography/font-size.js +0 -31
  149. package/dist/es2019/tokens/atlassian-typography/font-weight.js +0 -19
  150. package/dist/es2019/version.json +0 -7
  151. package/dist/esm/tokens/atlassian-typography/font-size.js +0 -31
  152. package/dist/esm/tokens/atlassian-typography/font-weight.js +0 -19
  153. package/dist/esm/version.json +0 -7
  154. /package/dist/types/tokens/{atlassian-typography → atlassian-typography-adg3}/font-size.d.ts +0 -0
  155. /package/dist/types/tokens/{atlassian-typography → atlassian-typography-adg3}/font-weight.d.ts +0 -0
  156. /package/dist/types/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.d.ts +0 -0
  157. /package/dist/types-ts4.5/tokens/{atlassian-typography → atlassian-typography-adg3}/font-size.d.ts +0 -0
  158. /package/dist/types-ts4.5/tokens/{atlassian-typography → atlassian-typography-adg3}/font-weight.d.ts +0 -0
  159. /package/dist/types-ts4.5/tokens/{atlassian-typography → atlassian-typography-adg3}/line-height.d.ts +0 -0
@@ -6,11 +6,40 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = plugin;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
10
  var t = _interopRequireWildcard(require("@babel/types"));
10
- var _tokenDefaultValues = _interopRequireDefault(require("../artifacts/token-default-values"));
11
11
  var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
12
+ var _atlassianLegacyLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-legacy-light"));
13
+ var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
12
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
+ 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; }
17
+ 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; }
18
+ // Convert raw tokens to key-value pairs { token: value }
19
+ var getThemeValues = function getThemeValues(theme) {
20
+ var tokensToMap = theme === 'light' ? _atlassianLight.default : _atlassianLegacyLight.default;
21
+ return tokensToMap.reduce(function (formatted, rawToken) {
22
+ var value;
23
+ if (typeof rawToken.value === 'string') {
24
+ value = rawToken.value;
25
+ } else if (typeof rawToken.value === 'number') {
26
+ value = rawToken.value.toString();
27
+ } else {
28
+ // If it's a box shadow, it'll be an array of values that needs to be
29
+ // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
30
+ value = rawToken.value.reduce(function (prev, curr, index) {
31
+ var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(curr.color);
32
+ if (index === 0) {
33
+ value += ", ";
34
+ }
35
+ return prev + value;
36
+ }, '');
37
+ }
38
+ return _objectSpread(_objectSpread({}, formatted), {}, (0, _defineProperty2.default)({}, rawToken.cleanName, value));
39
+ }, {});
40
+ };
41
+ var lightValues = getThemeValues('light');
42
+ var legacyLightValues = getThemeValues('legacy-light');
14
43
  function plugin() {
15
44
  return {
16
45
  visitor: {
@@ -55,7 +84,7 @@ function plugin() {
55
84
  // if no fallback is set, optionally find one from the default theme
56
85
  if (path.node.arguments.length < 2) {
57
86
  if (state.opts.shouldUseAutoFallback) {
58
- replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
87
+ replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName, state.opts.defaultTheme), ")"));
59
88
  } else {
60
89
  replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
61
90
  }
@@ -120,7 +149,9 @@ function plugin() {
120
149
  };
121
150
  }
122
151
  function getDefaultFallback(tokenName) {
123
- return _tokenDefaultValues.default[tokenName];
152
+ var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
153
+ var tokens = theme === 'legacy-light' ? legacyLightValues : lightValues;
154
+ return tokens[tokenName];
124
155
  }
125
156
  function getNonAliasedImportName(node) {
126
157
  if (t.isIdentifier(node.imported)) {
@@ -3,15 +3,13 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
6
+ exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.CUSTOM_THEME_ATTRIBUTE = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
7
7
  var THEME_DATA_ATTRIBUTE = 'data-theme';
8
8
  exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
9
9
  var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
10
10
  exports.COLOR_MODE_ATTRIBUTE = COLOR_MODE_ATTRIBUTE;
11
11
  var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
12
12
  exports.CUSTOM_THEME_ATTRIBUTE = CUSTOM_THEME_ATTRIBUTE;
13
- var DEFAULT_THEME = 'light';
14
- exports.DEFAULT_THEME = DEFAULT_THEME;
15
13
  var CSS_PREFIX = 'ds';
16
14
  exports.CSS_PREFIX = CSS_PREFIX;
17
15
  var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
@@ -31,11 +31,11 @@ Object.defineProperty(exports, "spacing", {
31
31
  Object.defineProperty(exports, "typography", {
32
32
  enumerable: true,
33
33
  get: function get() {
34
- return _atlassianTypography.default;
34
+ return _atlassianTypographyAdg.default;
35
35
  }
36
36
  });
37
37
  var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
38
38
  var _atlassianDark = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-dark"));
39
39
  var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));
40
- var _atlassianTypography = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography"));
40
+ var _atlassianTypographyAdg = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography-adg3"));
41
41
  var _atlassianShape = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-shape"));
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var name = "@atlaskit/tokens";
11
- var version = "1.14.1";
11
+ var version = "1.15.0";
12
12
  /**
13
13
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
14
14
  * resulting CSS Custom Property.
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var _constants = require("./constants");
11
11
  var name = "@atlaskit/tokens";
12
- var version = "1.14.1";
12
+ var version = "1.15.0";
13
13
  /**
14
14
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
15
  * This should be used to implement design decisions throughout your application.
@@ -8,8 +8,48 @@ exports.default = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  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; }
10
10
  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; }
11
+ var letterSpacingScale = {
12
+ letterSpacing: {
13
+ LetterSpacing0: {
14
+ value: '0',
15
+ attributes: {
16
+ group: 'typography'
17
+ }
18
+ },
19
+ LetterSpacing100: {
20
+ value: '-0.003em',
21
+ attributes: {
22
+ group: 'typography'
23
+ }
24
+ },
25
+ LetterSpacing200: {
26
+ value: '-0.006em',
27
+ attributes: {
28
+ group: 'typography'
29
+ }
30
+ },
31
+ LetterSpacing300: {
32
+ value: '-0.008em',
33
+ attributes: {
34
+ group: 'typography'
35
+ }
36
+ },
37
+ LetterSpacing400: {
38
+ value: '-0.01em',
39
+ attributes: {
40
+ group: 'typography'
41
+ }
42
+ }
43
+ }
44
+ };
11
45
  var lineHeightScale = {
12
46
  lineHeight: {
47
+ LineHeight1: {
48
+ value: '1',
49
+ attributes: {
50
+ group: 'typography'
51
+ }
52
+ },
13
53
  LineHeight100: {
14
54
  value: 16,
15
55
  attributes: {
@@ -50,25 +90,25 @@ var lineHeightScale = {
50
90
  };
51
91
  var fontWeightScale = {
52
92
  fontWeight: {
53
- FontWeightRegular: {
93
+ FontWeight400: {
54
94
  value: '400',
55
95
  attributes: {
56
96
  group: 'typography'
57
97
  }
58
98
  },
59
- FontWeightMedium: {
99
+ FontWeight500: {
60
100
  value: '500',
61
101
  attributes: {
62
102
  group: 'typography'
63
103
  }
64
104
  },
65
- FontWeightSemiBold: {
105
+ FontWeight600: {
66
106
  value: '600',
67
107
  attributes: {
68
108
  group: 'typography'
69
109
  }
70
110
  },
71
- FontWeightBold: {
111
+ FontWeight700: {
72
112
  value: '700',
73
113
  attributes: {
74
114
  group: 'typography'
@@ -78,14 +118,55 @@ var fontWeightScale = {
78
118
  };
79
119
  var fontFamilyPalette = {
80
120
  fontFamily: {
81
- FontFamilySans: {
121
+ FontFamilyCharlie: {
122
+ value: 'Charlie Sans',
123
+ attributes: {
124
+ group: 'typography'
125
+ }
126
+ },
127
+ LegacyFontFamilyWebSans: {
82
128
  value: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
83
129
  attributes: {
84
130
  group: 'typography'
85
131
  }
86
132
  },
87
- FontFamilyMonospace: {
88
- value: "\"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace",
133
+ /**
134
+ * @see https://infinnie.github.io/blog/2017/systemui.html
135
+ * @see https://github.com/twbs/bootstrap/pull/22377
136
+ * @see https://fonts.google.com/knowledge/glossary/system_font_web_safe_font
137
+ */
138
+ FontFamilyWebSans: {
139
+ value: "ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
140
+ attributes: {
141
+ group: 'typography'
142
+ }
143
+ },
144
+ FontFamilyiOSSans: {
145
+ value: 'SF Pro',
146
+ attributes: {
147
+ group: 'typography'
148
+ }
149
+ },
150
+ FontFamilyAndroidSans: {
151
+ value: 'Roboto',
152
+ attributes: {
153
+ group: 'typography'
154
+ }
155
+ },
156
+ FontFamilyWebMono: {
157
+ value: "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
158
+ attributes: {
159
+ group: 'typography'
160
+ }
161
+ },
162
+ FontFamilyiOSMono: {
163
+ value: 'SF Mono',
164
+ attributes: {
165
+ group: 'typography'
166
+ }
167
+ },
168
+ FontFamilyAndroidMono: {
169
+ value: 'Roboto Mono',
89
170
  attributes: {
90
171
  group: 'typography'
91
172
  }
@@ -94,58 +175,82 @@ var fontFamilyPalette = {
94
175
  };
95
176
  var fontSizeScale = {
96
177
  fontSize: {
97
- FontSize050: {
178
+ FontSizeCode: {
179
+ value: '0.875em',
180
+ attributes: {
181
+ group: 'typography'
182
+ }
183
+ },
184
+ FontSize11: {
98
185
  value: 11,
99
186
  attributes: {
100
187
  group: 'typography'
101
188
  }
102
189
  },
103
- FontSize075: {
190
+ FontSize12: {
104
191
  value: 12,
105
192
  attributes: {
106
193
  group: 'typography'
107
194
  }
108
195
  },
109
- FontSize100: {
196
+ FontSize14: {
110
197
  value: 14,
111
198
  attributes: {
112
199
  group: 'typography'
113
200
  }
114
201
  },
115
- FontSize200: {
202
+ FontSize16: {
116
203
  value: 16,
117
204
  attributes: {
118
205
  group: 'typography'
119
206
  }
120
207
  },
121
- FontSize300: {
208
+ FontSize20: {
122
209
  value: 20,
123
210
  attributes: {
124
211
  group: 'typography'
125
212
  }
126
213
  },
127
- FontSize400: {
214
+ FontSize24: {
128
215
  value: 24,
129
216
  attributes: {
130
217
  group: 'typography'
131
218
  }
132
219
  },
133
- FontSize500: {
220
+ FontSize28: {
221
+ value: 28,
222
+ attributes: {
223
+ group: 'typography'
224
+ }
225
+ },
226
+ LegacyFontSize29: {
134
227
  value: 29,
135
228
  attributes: {
136
229
  group: 'typography'
137
230
  }
138
231
  },
139
- FontSize600: {
232
+ LegacyFontSize35: {
140
233
  value: 35,
141
234
  attributes: {
142
235
  group: 'typography'
143
236
  }
237
+ },
238
+ FontSize36: {
239
+ value: 36,
240
+ attributes: {
241
+ group: 'typography'
242
+ }
243
+ },
244
+ FontSize48: {
245
+ value: 48,
246
+ attributes: {
247
+ group: 'typography'
248
+ }
144
249
  }
145
250
  }
146
251
  };
147
252
  var typographyPalette = {
148
- typography: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontSizeScale), fontWeightScale), fontFamilyPalette), lineHeightScale)
253
+ typography: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontSizeScale), fontWeightScale), fontFamilyPalette), lineHeightScale), letterSpacingScale)
149
254
  };
150
255
  var _default = typographyPalette;
151
256
  exports.default = _default;
@@ -41,7 +41,7 @@ exports.themeColorModes = themeColorModes;
41
41
  *
42
42
  * These ids must be kebab case
43
43
  */
44
- var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape'];
44
+ var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography', 'shape', 'typography-adg3'];
45
45
  exports.themeIds = themeIds;
46
46
  /**
47
47
  * Theme override ids: the equivalent of themeIds for theme overrides.
@@ -113,9 +113,9 @@ var themeConfig = {
113
113
  type: 'spacing'
114
114
  }
115
115
  },
116
- 'atlassian-typography': {
117
- id: 'typography',
118
- displayName: 'Atlassian Typography',
116
+ 'atlassian-typography-adg3': {
117
+ id: 'typography-adg3',
118
+ displayName: 'ADG3 Typography',
119
119
  palette: 'typographyPalette',
120
120
  attributes: {
121
121
  type: 'typography'
@@ -148,6 +148,14 @@ var themeConfig = {
148
148
  type: 'color',
149
149
  mode: 'dark'
150
150
  }
151
+ },
152
+ 'atlassian-typography': {
153
+ id: 'typography',
154
+ displayName: 'Atlassian Typography',
155
+ palette: 'typographyPalette',
156
+ attributes: {
157
+ type: 'typography'
158
+ }
151
159
  }
152
160
  };
153
161
 
@@ -8,10 +8,19 @@ var font = {
8
8
  font: {
9
9
  family: {
10
10
  sans: {
11
- value: 'FontFamilySans'
11
+ value: 'FontFamilyWebSans'
12
12
  },
13
13
  monospace: {
14
- value: 'FontFamilyMonospace'
14
+ value: 'FontFamilyWebMono'
15
+ },
16
+ product: {
17
+ value: 'FontFamilyWebSans'
18
+ },
19
+ brand: {
20
+ value: 'FontFamilyCharlie'
21
+ },
22
+ code: {
23
+ value: 'FontFamilyWebMono'
15
24
  }
16
25
  }
17
26
  }
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var typography = {
8
+ font: {
9
+ heading: {
10
+ xxl: {
11
+ value: {
12
+ fontWeight: 'FontWeight700',
13
+ fontSize: 'FontSize36',
14
+ lineHeight: 'LineHeight600',
15
+ fontFamily: 'FontFamilyWebSans',
16
+ fontStyle: 'normal',
17
+ letterSpacing: 'LetterSpacing0'
18
+ }
19
+ },
20
+ xl: {
21
+ value: {
22
+ fontWeight: 'FontWeight700',
23
+ fontSize: 'FontSize28',
24
+ lineHeight: 'LineHeight500',
25
+ fontFamily: 'FontFamilyWebSans',
26
+ fontStyle: 'normal',
27
+ letterSpacing: 'LetterSpacing0'
28
+ }
29
+ },
30
+ lg: {
31
+ value: {
32
+ fontWeight: 'FontWeight700',
33
+ fontSize: 'FontSize24',
34
+ lineHeight: 'LineHeight400',
35
+ fontFamily: 'FontFamilyWebSans',
36
+ fontStyle: 'normal',
37
+ letterSpacing: 'LetterSpacing0'
38
+ }
39
+ },
40
+ md: {
41
+ value: {
42
+ fontWeight: 'FontWeight700',
43
+ fontSize: 'FontSize20',
44
+ lineHeight: 'LineHeight300',
45
+ fontFamily: 'FontFamilyWebSans',
46
+ fontStyle: 'normal',
47
+ letterSpacing: 'LetterSpacing0'
48
+ }
49
+ },
50
+ sm: {
51
+ value: {
52
+ fontWeight: 'FontWeight700',
53
+ fontSize: 'FontSize16',
54
+ lineHeight: 'LineHeight200',
55
+ fontFamily: 'FontFamilyWebSans',
56
+ fontStyle: 'normal',
57
+ letterSpacing: 'LetterSpacing0'
58
+ }
59
+ },
60
+ xs: {
61
+ value: {
62
+ fontWeight: 'FontWeight700',
63
+ fontSize: 'FontSize14',
64
+ lineHeight: 'LineHeight100',
65
+ fontFamily: 'FontFamilyWebSans',
66
+ fontStyle: 'normal',
67
+ letterSpacing: 'LetterSpacing0'
68
+ }
69
+ },
70
+ xxs: {
71
+ value: {
72
+ fontWeight: 'FontWeight700',
73
+ fontSize: 'FontSize12',
74
+ lineHeight: 'LineHeight100',
75
+ fontFamily: 'FontFamilyWebSans',
76
+ fontStyle: 'normal',
77
+ letterSpacing: 'LetterSpacing0'
78
+ }
79
+ }
80
+ },
81
+ code: {
82
+ '[default]': {
83
+ value: {
84
+ fontWeight: 'FontWeight400',
85
+ fontSize: 'FontSizeCode',
86
+ lineHeight: 'LineHeight1',
87
+ fontFamily: 'FontFamilyWebMono',
88
+ fontStyle: 'normal',
89
+ letterSpacing: 'LetterSpacing0'
90
+ }
91
+ }
92
+ },
93
+ body: {
94
+ '[default]': {
95
+ value: {
96
+ fontWeight: 'FontWeight400',
97
+ fontSize: 'FontSize14',
98
+ lineHeight: 'LineHeight200',
99
+ fontFamily: 'FontFamilyWebSans',
100
+ fontStyle: 'normal',
101
+ letterSpacing: 'LetterSpacing0'
102
+ }
103
+ },
104
+ sm: {
105
+ value: {
106
+ fontWeight: 'FontWeight400',
107
+ fontSize: 'FontSize11',
108
+ lineHeight: 'LineHeight200',
109
+ fontFamily: 'FontFamilyWebSans',
110
+ fontStyle: 'normal',
111
+ letterSpacing: 'LetterSpacing0'
112
+ }
113
+ }
114
+ },
115
+ ui: {
116
+ '[default]': {
117
+ value: {
118
+ fontWeight: 'FontWeight400',
119
+ fontSize: 'FontSize14',
120
+ lineHeight: 'LineHeight1',
121
+ fontFamily: 'FontFamilyWebSans',
122
+ fontStyle: 'normal',
123
+ letterSpacing: 'LetterSpacing0'
124
+ }
125
+ },
126
+ sm: {
127
+ value: {
128
+ fontWeight: 'FontWeight400',
129
+ fontSize: 'FontSize11',
130
+ lineHeight: 'LineHeight1',
131
+ fontFamily: 'FontFamilyWebSans',
132
+ fontStyle: 'normal',
133
+ letterSpacing: 'LetterSpacing0'
134
+ }
135
+ }
136
+ }
137
+ }
138
+ };
139
+ var _default = typography;
140
+ exports.default = _default;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var font = {
8
+ font: {
9
+ letterSpacing: {
10
+ '0': {
11
+ value: 'LetterSpacing0'
12
+ },
13
+ '100': {
14
+ value: 'LetterSpacing0'
15
+ },
16
+ '200': {
17
+ value: 'LetterSpacing0'
18
+ },
19
+ '300': {
20
+ value: 'LetterSpacing0'
21
+ },
22
+ '400': {
23
+ value: 'LetterSpacing0'
24
+ }
25
+ }
26
+ }
27
+ };
28
+ var _default = font;
29
+ exports.default = _default;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var font = {
8
+ font: {
9
+ family: {
10
+ sans: {
11
+ value: 'LegacyFontFamilyWebSans'
12
+ },
13
+ monospace: {
14
+ value: 'FontFamilyWebMono'
15
+ },
16
+ product: {
17
+ value: 'FontFamilyWebSans'
18
+ },
19
+ brand: {
20
+ value: 'FontFamilyCharlie'
21
+ },
22
+ code: {
23
+ value: 'FontFamilyWebMono'
24
+ }
25
+ }
26
+ }
27
+ };
28
+ var _default = font;
29
+ exports.default = _default;
@@ -8,28 +8,28 @@ var font = {
8
8
  font: {
9
9
  size: {
10
10
  '050': {
11
- value: 'FontSize050'
11
+ value: 'FontSize11'
12
12
  },
13
13
  '075': {
14
- value: 'FontSize075'
14
+ value: 'FontSize12'
15
15
  },
16
16
  '100': {
17
- value: 'FontSize100'
17
+ value: 'FontSize14'
18
18
  },
19
19
  '200': {
20
- value: 'FontSize200'
20
+ value: 'FontSize16'
21
21
  },
22
22
  '300': {
23
- value: 'FontSize300'
23
+ value: 'FontSize20'
24
24
  },
25
25
  '400': {
26
- value: 'FontSize400'
26
+ value: 'FontSize24'
27
27
  },
28
28
  '500': {
29
- value: 'FontSize500'
29
+ value: 'LegacyFontSize29'
30
30
  },
31
31
  '600': {
32
- value: 'FontSize600'
32
+ value: 'LegacyFontSize35'
33
33
  }
34
34
  }
35
35
  }
@@ -8,16 +8,16 @@ var font = {
8
8
  font: {
9
9
  weight: {
10
10
  regular: {
11
- value: 'FontWeightRegular'
11
+ value: 'FontWeight400'
12
12
  },
13
13
  medium: {
14
- value: 'FontWeightMedium'
14
+ value: 'FontWeight500'
15
15
  },
16
16
  semibold: {
17
- value: 'FontWeightSemiBold'
17
+ value: 'FontWeight600'
18
18
  },
19
19
  bold: {
20
- value: 'FontWeightBold'
20
+ value: 'FontWeight700'
21
21
  }
22
22
  }
23
23
  }
@@ -7,6 +7,9 @@ exports.default = void 0;
7
7
  var font = {
8
8
  font: {
9
9
  lineHeight: {
10
+ '1': {
11
+ value: 'LineHeight1'
12
+ },
10
13
  '100': {
11
14
  value: 'LineHeight100'
12
15
  },