@atlaskit/tokens 0.13.4 → 1.0.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 (194) hide show
  1. package/CHANGELOG.md +295 -0
  2. package/README.md +7 -16
  3. package/dist/cjs/artifacts/palettes-raw/legacy-palette.js +0 -1
  4. package/dist/cjs/artifacts/palettes-raw/palette.js +0 -1
  5. package/dist/cjs/artifacts/palettes-raw/spacing-scale.js +0 -1
  6. package/dist/cjs/artifacts/palettes-raw/typography-palette.js +0 -1
  7. package/dist/cjs/artifacts/replacement-mapping.js +2 -402
  8. package/dist/cjs/artifacts/theme-import-map.js +56 -0
  9. package/dist/cjs/artifacts/themes/atlassian-dark.js +13 -0
  10. package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +13 -0
  11. package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +13 -0
  12. package/dist/cjs/artifacts/themes/atlassian-light.js +13 -0
  13. package/dist/cjs/artifacts/themes/atlassian-spacing.js +13 -0
  14. package/dist/cjs/artifacts/themes/atlassian-typography.js +13 -0
  15. package/dist/cjs/artifacts/token-default-values.js +2 -104
  16. package/dist/cjs/artifacts/token-names.js +2 -104
  17. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1354 -4261
  18. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +1352 -4259
  19. package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +1396 -4283
  20. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1365 -4252
  21. package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js +0 -1
  22. package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +0 -1
  23. package/dist/cjs/artifacts/typescript/atlassian-dark-token-names.js +0 -1
  24. package/dist/cjs/artifacts/typescript/atlassian-light-token-names.js +0 -1
  25. package/dist/cjs/babel-plugin/index.js +0 -2
  26. package/dist/cjs/babel-plugin/plugin.js +17 -43
  27. package/dist/cjs/entry-points/babel-plugin.js +0 -2
  28. package/dist/cjs/entry-points/palettes-raw.js +0 -2
  29. package/dist/cjs/entry-points/rename-mapping.js +0 -2
  30. package/dist/cjs/entry-points/token-ids.js +0 -1
  31. package/dist/cjs/entry-points/token-names.js +0 -2
  32. package/dist/cjs/entry-points/tokens-raw.js +0 -5
  33. package/dist/cjs/get-global-theme.js +30 -0
  34. package/dist/cjs/get-token-value.js +1 -10
  35. package/dist/cjs/get-token.js +3 -13
  36. package/dist/cjs/index.js +46 -10
  37. package/dist/cjs/palettes/legacy-palette.js +1 -1
  38. package/dist/cjs/palettes/spacing-scale.js +1 -1
  39. package/dist/cjs/palettes/typography-palette.js +0 -5
  40. package/dist/cjs/set-global-theme.js +265 -39
  41. package/dist/cjs/theme-config.js +8 -23
  42. package/dist/cjs/{theme-change-observer.js → theme-mutation-observer.js} +5 -57
  43. package/dist/cjs/tokens/atlassian-dark/utility/utility.js +1 -4
  44. package/dist/cjs/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  45. package/dist/cjs/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  46. package/dist/cjs/tokens/atlassian-light/utility/utility.js +1 -4
  47. package/dist/cjs/tokens/atlassian-spacing/spacing.js +0 -1
  48. package/dist/cjs/tokens/default/spacing/spacing.js +0 -1
  49. package/dist/cjs/tokens/default/utility/utility.js +1 -9
  50. package/dist/cjs/use-theme-observer.js +41 -0
  51. package/dist/cjs/utils/color-detection.js +23 -43
  52. package/dist/cjs/utils/theme-loading.js +69 -0
  53. package/dist/cjs/utils/theme-state-transformer.js +73 -0
  54. package/dist/cjs/utils/token-ids.js +4 -12
  55. package/dist/cjs/version.json +1 -1
  56. package/dist/es2019/artifacts/replacement-mapping.js +2 -401
  57. package/dist/es2019/artifacts/theme-import-map.js +27 -0
  58. package/dist/es2019/artifacts/themes/atlassian-dark.js +296 -0
  59. package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js +296 -0
  60. package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +296 -0
  61. package/dist/es2019/artifacts/themes/atlassian-light.js +296 -0
  62. package/{css/atlassian-spacing.css → dist/es2019/artifacts/themes/atlassian-spacing.js} +4 -2
  63. package/{css/atlassian-typography.css → dist/es2019/artifacts/themes/atlassian-typography.js} +4 -2
  64. package/dist/es2019/artifacts/token-default-values.js +2 -103
  65. package/dist/es2019/artifacts/token-names.js +2 -103
  66. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
  67. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
  68. package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
  69. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +1360 -4246
  70. package/dist/es2019/babel-plugin/plugin.js +17 -37
  71. package/dist/es2019/get-global-theme.js +20 -0
  72. package/dist/es2019/get-token-value.js +1 -6
  73. package/dist/es2019/get-token.js +3 -8
  74. package/dist/es2019/index.js +5 -2
  75. package/dist/es2019/palettes/legacy-palette.js +1 -0
  76. package/dist/es2019/palettes/spacing-scale.js +1 -0
  77. package/dist/es2019/palettes/typography-palette.js +2 -1
  78. package/dist/es2019/set-global-theme.js +162 -32
  79. package/dist/es2019/theme-config.js +5 -21
  80. package/dist/es2019/{theme-change-observer.js → theme-mutation-observer.js} +4 -37
  81. package/dist/es2019/tokens/atlassian-dark/utility/utility.js +1 -4
  82. package/dist/es2019/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  83. package/dist/es2019/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  84. package/dist/es2019/tokens/atlassian-light/utility/utility.js +1 -4
  85. package/dist/es2019/tokens/default/utility/utility.js +1 -9
  86. package/dist/es2019/use-theme-observer.js +26 -0
  87. package/dist/es2019/utils/color-detection.js +3 -5
  88. package/dist/es2019/utils/theme-loading.js +18 -0
  89. package/dist/es2019/utils/theme-state-transformer.js +47 -0
  90. package/dist/es2019/utils/token-ids.js +5 -4
  91. package/dist/es2019/version.json +1 -1
  92. package/dist/esm/artifacts/replacement-mapping.js +2 -401
  93. package/dist/esm/artifacts/theme-import-map.js +39 -0
  94. package/dist/esm/artifacts/themes/atlassian-dark.js +6 -0
  95. package/dist/esm/artifacts/themes/atlassian-legacy-dark.js +6 -0
  96. package/dist/esm/artifacts/themes/atlassian-legacy-light.js +6 -0
  97. package/dist/esm/artifacts/themes/atlassian-light.js +6 -0
  98. package/dist/esm/artifacts/themes/atlassian-spacing.js +6 -0
  99. package/dist/esm/artifacts/themes/atlassian-typography.js +6 -0
  100. package/dist/esm/artifacts/token-default-values.js +2 -103
  101. package/dist/esm/artifacts/token-names.js +2 -103
  102. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
  103. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
  104. package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
  105. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +1360 -4246
  106. package/dist/esm/babel-plugin/plugin.js +17 -35
  107. package/dist/esm/get-global-theme.js +22 -0
  108. package/dist/esm/get-token-value.js +1 -6
  109. package/dist/esm/get-token.js +3 -8
  110. package/dist/esm/index.js +5 -2
  111. package/dist/esm/palettes/legacy-palette.js +1 -0
  112. package/dist/esm/palettes/spacing-scale.js +1 -0
  113. package/dist/esm/palettes/typography-palette.js +0 -3
  114. package/dist/esm/set-global-theme.js +263 -37
  115. package/dist/esm/theme-config.js +5 -21
  116. package/dist/esm/{theme-change-observer.js → theme-mutation-observer.js} +4 -49
  117. package/dist/esm/tokens/atlassian-dark/utility/utility.js +1 -4
  118. package/dist/esm/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
  119. package/dist/esm/tokens/atlassian-legacy-light/utility/utility.js +1 -4
  120. package/dist/esm/tokens/atlassian-light/utility/utility.js +1 -4
  121. package/dist/esm/tokens/default/utility/utility.js +1 -9
  122. package/dist/esm/use-theme-observer.js +34 -0
  123. package/dist/esm/utils/color-detection.js +23 -30
  124. package/dist/esm/utils/theme-loading.js +60 -0
  125. package/dist/esm/utils/theme-state-transformer.js +64 -0
  126. package/dist/esm/utils/token-ids.js +5 -4
  127. package/dist/esm/version.json +1 -1
  128. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  129. package/dist/types/artifacts/theme-import-map.d.ts +16 -0
  130. package/dist/types/artifacts/themes/atlassian-dark.d.ts +7 -0
  131. package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +7 -0
  132. package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +7 -0
  133. package/dist/types/artifacts/themes/atlassian-light.d.ts +7 -0
  134. package/dist/types/artifacts/themes/atlassian-spacing.d.ts +7 -0
  135. package/dist/types/artifacts/themes/atlassian-typography.d.ts +7 -0
  136. package/dist/types/artifacts/token-default-values.d.ts +2 -103
  137. package/dist/types/artifacts/token-names.d.ts +3 -205
  138. package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -115
  139. package/dist/types/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -115
  140. package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -91
  141. package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -91
  142. package/dist/types/artifacts/types-internal.d.ts +2 -2
  143. package/dist/types/artifacts/types.d.ts +2 -2
  144. package/dist/types/get-global-theme.d.ts +2 -0
  145. package/dist/types/index.d.ts +7 -3
  146. package/dist/types/set-global-theme.d.ts +63 -7
  147. package/dist/types/theme-config.d.ts +10 -7
  148. package/dist/types/{theme-change-observer.d.ts → theme-mutation-observer.d.ts} +2 -16
  149. package/dist/types/types.d.ts +1 -180
  150. package/dist/types/use-theme-observer.d.ts +15 -0
  151. package/dist/types/utils/theme-loading.d.ts +3 -0
  152. package/dist/types/utils/theme-state-transformer.d.ts +26 -0
  153. package/figma/atlassian-dark.json +2632 -0
  154. package/figma/atlassian-legacy-dark.json +2632 -0
  155. package/figma/atlassian-legacy-light.json +2610 -0
  156. package/figma/atlassian-light.json +2610 -0
  157. package/figma/atlassian-spacing.json +956 -0
  158. package/figma/atlassian-typography.json +114 -0
  159. package/package.json +7 -9
  160. package/report.api.md +85 -219
  161. package/tmp/api-report-tmp.d.ts +58 -210
  162. package/css/atlassian-dark.css +0 -786
  163. package/css/atlassian-legacy-dark.css +0 -786
  164. package/css/atlassian-legacy-light.css +0 -786
  165. package/css/atlassian-light.css +0 -786
  166. package/dist/cjs/artifacts/typescript/atlassian-light-token-default-values.js +0 -407
  167. package/dist/cjs/entry-points/figma-sync.js +0 -23
  168. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +0 -435
  169. package/dist/cjs/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -532
  170. package/dist/cjs/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -523
  171. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +0 -421
  172. package/dist/cjs/tokens/default/deprecated/deprecated.js +0 -1186
  173. package/dist/es2019/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  174. package/dist/es2019/entry-points/figma-sync.js +0 -3
  175. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  176. package/dist/es2019/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  177. package/dist/es2019/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  178. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  179. package/dist/es2019/tokens/default/deprecated/deprecated.js +0 -1217
  180. package/dist/esm/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  181. package/dist/esm/entry-points/figma-sync.js +0 -3
  182. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  183. package/dist/esm/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  184. package/dist/esm/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  185. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  186. package/dist/esm/tokens/default/deprecated/deprecated.js +0 -1179
  187. package/dist/types/artifacts/typescript/atlassian-light-token-default-values.d.ts +0 -399
  188. package/dist/types/entry-points/figma-sync.d.ts +0 -3
  189. package/dist/types/tokens/atlassian-dark/deprecated/deprecated.d.ts +0 -4
  190. package/dist/types/tokens/atlassian-legacy-dark/deprecated/deprecated.d.ts +0 -4
  191. package/dist/types/tokens/atlassian-legacy-light/deprecated/deprecated.d.ts +0 -4
  192. package/dist/types/tokens/atlassian-light/deprecated/deprecated.d.ts +0 -4
  193. package/dist/types/tokens/default/deprecated/deprecated.d.ts +0 -4
  194. package/figma-sync/package.json +0 -17
package/dist/es2019/tokens/default/utility/utility.js CHANGED
@@ -1,5 +1,5 @@
1
1
  const utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  attributes: {
5
5
  group: 'raw',
@@ -7,14 +7,6 @@ const utility = {
7
7
  introduced: '0.1.1',
8
8
  description: 'Transparent token used for backwards compatibility between new and old theming solutions'
9
9
  }
10
- },
11
- MISSING_TOKEN: {
12
- attributes: {
13
- group: 'raw',
14
- state: 'active',
15
- introduced: '0.4.0',
16
- description: 'Used as a placeholder when a suitable token does not exist'
17
- }
18
10
  }
19
11
  }
20
12
  };
package/dist/es2019/use-theme-observer.js ADDED
@@ -0,0 +1,26 @@
1
+ import { useEffect, useState } from 'react';
2
+ import { getGlobalTheme } from './get-global-theme';
3
+ import { ThemeMutationObserver } from './theme-mutation-observer';
4
+
5
+ /**
6
+ * A React hook which returns the current themes and color-mode set on `<html>`.
7
+ *
8
+ * @example
9
+ * ```
10
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
11
+ *
12
+ * // Performing side effects when it changes
13
+ * useEffect(() => {
14
+ * console.log(`The color mode has changed to ${theme.colorMode}`);
15
+ * }, [theme.colorMode]);
16
+ * ```
17
+ */
18
+ export const useThemeObserver = () => {
19
+ const [theme, setTheme] = useState(getGlobalTheme());
20
+ useEffect(() => {
21
+ const observer = new ThemeMutationObserver(theme => setTheme(theme));
22
+ observer.observe();
23
+ return () => observer.disconnect();
24
+ }, []);
25
+ return theme;
26
+ };
package/dist/es2019/utils/color-detection.js CHANGED
@@ -22,6 +22,7 @@ export const getLuminance = ({
22
22
  g,
23
23
  b
24
24
  }) => (r * 299 + g * 587 + b * 114) / 1000;
25
+
25
26
  /**
26
27
  * Returns an accessible hard-coded text color based on the color contrast with
27
28
  * the background.
@@ -31,7 +32,6 @@ export const getLuminance = ({
31
32
  * of a hard-coded color. This is to support more transparent backgrounds
32
33
  * to allow the text to invert colors depending on the current theme's surface color.
33
34
  */
34
-
35
35
  export const getTextColorForBackground = (hex, opts) => {
36
36
  const {
37
37
  r,
@@ -50,22 +50,20 @@ export const getTextColorForBackground = (hex, opts) => {
50
50
  dark: a > alphaLimit
51
51
  };
52
52
  const alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
53
-
54
53
  if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
55
54
  // This color is transparent, so the text will mainly cast onto the surface behind.
56
55
  // Needs to use tokens otherwise Dark mode would cause black text on black surface
57
56
  return token('color.text', 'black');
58
57
  }
59
-
60
58
  return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
61
59
  };
60
+
62
61
  /**
63
62
  * Returns a border if determined to be required based on the color contrast with
64
63
  * the background.
65
64
  *
66
65
  * @param hex - The Hex color code of the background
67
66
  */
68
-
69
67
  export const getBorderForBackground = hex => {
70
68
  const {
71
69
  r,
@@ -80,12 +78,12 @@ export const getBorderForBackground = hex => {
80
78
  });
81
79
  return lum > 240 || a < 0.2 ? `1px solid ${token('color.border', '#091E4224')}` : undefined;
82
80
  };
81
+
83
82
  /**
84
83
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
85
84
  *
86
85
  * @param rawShadow - ShadowToken raw value
87
86
  */
88
-
89
87
  export const getBoxShadow = rawShadow => rawShadow.map(({
90
88
  radius,
91
89
  offset,
package/dist/es2019/utils/theme-loading.js ADDED
@@ -0,0 +1,18 @@
1
+ import themeImportMap from '../artifacts/theme-import-map';
2
+ import { THEME_DATA_ATTRIBUTE } from '../constants';
3
+ export const loadAndAppendThemeCss = async themeId => {
4
+ if (document.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]`)) {
5
+ return;
6
+ }
7
+ const themeCss = await loadThemeCss(themeId);
8
+ const style = document.createElement('style');
9
+ style.textContent = themeCss;
10
+ style.dataset.theme = themeId;
11
+ document.head.appendChild(style);
12
+ };
13
+ export const loadThemeCss = async themeId => {
14
+ const {
15
+ default: themeCss
16
+ } = await themeImportMap[themeId]();
17
+ return themeCss;
18
+ };
package/dist/es2019/utils/theme-state-transformer.js ADDED
@@ -0,0 +1,47 @@
1
+ import { themeIds } from '../theme-config';
2
+ const themeKinds = ['light', 'dark', 'spacing', 'typography'];
3
+ const isThemeKind = themeKind => {
4
+ return themeKinds.find(kind => kind === themeKind) !== undefined;
5
+ };
6
+ const isThemeIds = themeId => {
7
+ return themeIds.find(id => id === themeId) !== undefined;
8
+ };
9
+ const isColorMode = modeId => {
10
+ return ['light', 'dark', 'auto'].includes(modeId);
11
+ };
12
+ /**
13
+ * Converts a string that is formatted for the `data-theme` HTML attribute
14
+ * to an object that can be passed to `setGlobalTheme`.
15
+ *
16
+ * @param {string} themes The themes that should be applied.
17
+ *
18
+ * @example
19
+ * ```
20
+ * themeStringToObject('dark:dark light:legacy-light spacing:spacing');
21
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
22
+ * ```
23
+ */
24
+ export const themeStringToObject = themeState => {
25
+ return themeState.split(' ').map(theme => theme.split(':')).reduce((themeObject, [kind, id]) => {
26
+ if (kind === 'colorMode' && isColorMode(id)) {
27
+ themeObject[kind] = id;
28
+ }
29
+ if (isThemeKind(kind) && isThemeIds(id)) {
30
+ themeObject[kind] = id;
31
+ }
32
+ return themeObject;
33
+ }, {});
34
+ };
35
+
36
+ /**
37
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
38
+ *
39
+ * @param {object} themes The themes that should be applied.
40
+ *
41
+ * @example
42
+ * ```
43
+ * themeObjectToString({ dark: 'dark', light: 'legacy-light', spacing: 'spacing' });
44
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
45
+ * ```
46
+ */
47
+ export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');
package/dist/es2019/utils/token-ids.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
2
+
2
3
  /**
3
4
  * Transforms a style dictionary token path to a CSS custom property.
4
5
  *
@@ -13,13 +14,14 @@ import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
13
14
  * // Returns ds-background-bold
14
15
  * getCSSCustomProperty('color.background.bold.[default]')
15
16
  */
16
-
17
17
  export const getCSSCustomProperty = path => {
18
- const normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
18
+ const normalizedPath = typeof path === 'string' ? path.split('.') : path;
19
19
 
20
+ // Opacity and other 'shallow' groups are more readable when not trimmed
20
21
  const slice = CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
21
22
  return `--${[CSS_PREFIX, ...normalizedPath.slice(slice)].filter(el => el !== '[default]').join('-')}`;
22
23
  };
24
+
23
25
  /**
24
26
  * Transforms a style dictionary token path to a shorthand token id
25
27
  * These ids will be typically be how tokens are interacted with via typescript and css
@@ -34,11 +36,11 @@ export const getCSSCustomProperty = path => {
34
36
  * // Returns color.background.bold
35
37
  * getTokenId('color.background.bold.[default]')
36
38
  */
37
-
38
39
  export const getTokenId = path => {
39
40
  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
40
41
  return normalizedPath.filter(el => el !== '[default]').join('.');
41
42
  };
43
+
42
44
  /**
43
45
  * Transforms a style dictionary token path to a fully qualified token id
44
46
  * These Ids are intended to be used internal to this package by style-dictionary
@@ -49,5 +51,4 @@ export const getTokenId = path => {
49
51
  * // Returns color.background.bold.[default]
50
52
  * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
51
53
  */
52
-
53
54
  export const getFullyQualifiedTokenId = path => path.join('.');
package/dist/es2019/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.13.4",
3
+ "version": "1.0.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/esm/artifacts/replacement-mapping.js CHANGED
@@ -12,410 +12,11 @@
12
12
  * These changes will then be picked up by our tooling which will attempt to
13
13
  * migrate as many of these renames as possible.
14
14
  *
15
- * @codegen <<SignedSource::f641b000c13ad37f0b16624edf778c41>>
15
+ * @codegen <<SignedSource::6b49e32a168095446e0fc8a0f9b4ca39>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
+
18
19
  var replacementMapper = [{
19
- "path": "color.text.highEmphasis",
20
- "state": "deleted",
21
- "replacement": "color.text.[default]"
22
- }, {
23
- "path": "color.text.link.pressed",
24
- "state": "deleted",
25
- "replacement": "color.link.pressed"
26
- }, {
27
- "path": "color.text.link.resting",
28
- "state": "deleted",
29
- "replacement": "color.link.[default]"
30
- }, {
31
- "path": "color.text.lowEmphasis",
32
- "state": "deleted",
33
- "replacement": "color.text.subtlest"
34
- }, {
35
- "path": "color.text.mediumEmphasis",
36
- "state": "deleted",
37
- "replacement": "color.text.subtle"
38
- }, {
39
- "path": "color.text.onBold",
40
- "state": "deleted",
41
- "replacement": "color.text.inverse"
42
- }, {
43
- "path": "color.text.onBoldWarning",
44
- "state": "deleted",
45
- "replacement": "color.text.warning.inverse"
46
- }, {
47
- "path": "color.border.focus",
48
- "state": "deleted",
49
- "replacement": "color.border.focused"
50
- }, {
51
- "path": "color.border.neutral",
52
- "state": "deleted",
53
- "replacement": "color.border.[default]"
54
- }, {
55
- "path": "color.background.accent.red.[default]",
56
- "state": "deleted",
57
- "replacement": "color.background.accent.red.subtler"
58
- }, {
59
- "path": "color.background.accent.red.bold",
60
- "state": "deleted",
61
- "replacement": "color.background.accent.red.subtle"
62
- }, {
63
- "path": "color.background.accent.orange.[default]",
64
- "state": "deleted",
65
- "replacement": "color.background.accent.orange.subtler"
66
- }, {
67
- "path": "color.background.accent.orange.bold",
68
- "state": "deleted",
69
- "replacement": "color.background.accent.orange.subtle"
70
- }, {
71
- "path": "color.background.accent.yellow.[default]",
72
- "state": "deleted",
73
- "replacement": "color.background.accent.yellow.subtler"
74
- }, {
75
- "path": "color.background.accent.yellow.bold",
76
- "state": "deleted",
77
- "replacement": "color.background.accent.yellow.subtle"
78
- }, {
79
- "path": "color.background.accent.green.[default]",
80
- "state": "deleted",
81
- "replacement": "color.background.accent.green.subtler"
82
- }, {
83
- "path": "color.background.accent.green.bold",
84
- "state": "deleted",
85
- "replacement": "color.background.accent.green.subtle"
86
- }, {
87
- "path": "color.background.accent.teal.[default]",
88
- "state": "deleted",
89
- "replacement": "color.background.accent.teal.subtler"
90
- }, {
91
- "path": "color.background.accent.teal.bold",
92
- "state": "deleted",
93
- "replacement": "color.background.accent.teal.subtle"
94
- }, {
95
- "path": "color.background.accent.blue.[default]",
96
- "state": "deleted",
97
- "replacement": "color.background.accent.blue.subtler"
98
- }, {
99
- "path": "color.background.accent.blue.bold",
100
- "state": "deleted",
101
- "replacement": "color.background.accent.blue.subtle"
102
- }, {
103
- "path": "color.background.accent.purple.[default]",
104
- "state": "deleted",
105
- "replacement": "color.background.accent.purple.subtler"
106
- }, {
107
- "path": "color.background.accent.purple.bold",
108
- "state": "deleted",
109
- "replacement": "color.background.accent.purple.subtle"
110
- }, {
111
- "path": "color.background.accent.magenta.[default]",
112
- "state": "deleted",
113
- "replacement": "color.background.accent.magenta.subtler"
114
- }, {
115
- "path": "color.background.accent.magenta.bold",
116
- "state": "deleted",
117
- "replacement": "color.background.accent.magenta.subtle"
118
- }, {
119
- "path": "color.background.blanket",
120
- "state": "deleted",
121
- "replacement": "color.blanket.[default]"
122
- }, {
123
- "path": "color.background.boldBrand.hover",
124
- "state": "deleted",
125
- "replacement": "color.background.brand.bold.hovered"
126
- }, {
127
- "path": "color.background.boldBrand.pressed",
128
- "state": "deleted",
129
- "replacement": "color.background.brand.bold.pressed"
130
- }, {
131
- "path": "color.background.boldBrand.resting",
132
- "state": "deleted",
133
- "replacement": "color.background.brand.bold.[default]"
134
- }, {
135
- "path": "color.background.boldDanger.hover",
136
- "state": "deleted",
137
- "replacement": "color.background.danger.bold.hovered"
138
- }, {
139
- "path": "color.background.boldDanger.pressed",
140
- "state": "deleted",
141
- "replacement": "color.background.danger.bold.pressed"
142
- }, {
143
- "path": "color.background.boldDanger.resting",
144
- "state": "deleted",
145
- "replacement": "color.background.danger.bold.[default]"
146
- }, {
147
- "path": "color.background.boldDiscovery.hover",
148
- "state": "deleted",
149
- "replacement": "color.background.discovery.bold.hovered"
150
- }, {
151
- "path": "color.background.boldDiscovery.pressed",
152
- "state": "deleted",
153
- "replacement": "color.background.discovery.bold.pressed"
154
- }, {
155
- "path": "color.background.boldDiscovery.resting",
156
- "state": "deleted",
157
- "replacement": "color.background.discovery.bold.[default]"
158
- }, {
159
- "path": "color.background.boldNeutral.hover",
160
- "state": "deleted",
161
- "replacement": "color.background.neutral.bold.hovered"
162
- }, {
163
- "path": "color.background.boldNeutral.pressed",
164
- "state": "deleted",
165
- "replacement": "color.background.neutral.bold.pressed"
166
- }, {
167
- "path": "color.background.boldNeutral.resting",
168
- "state": "deleted",
169
- "replacement": "color.background.neutral.bold.[default]"
170
- }, {
171
- "path": "color.background.boldSuccess.hover",
172
- "state": "deleted",
173
- "replacement": "color.background.success.bold.hovered"
174
- }, {
175
- "path": "color.background.boldSuccess.pressed",
176
- "state": "deleted",
177
- "replacement": "color.background.success.bold.pressed"
178
- }, {
179
- "path": "color.background.boldSuccess.resting",
180
- "state": "deleted",
181
- "replacement": "color.background.success.bold.[default]"
182
- }, {
183
- "path": "color.background.boldWarning.hover",
184
- "state": "deleted",
185
- "replacement": "color.background.warning.bold.hovered"
186
- }, {
187
- "path": "color.background.boldWarning.pressed",
188
- "state": "deleted",
189
- "replacement": "color.background.warning.bold.pressed"
190
- }, {
191
- "path": "color.background.boldWarning.resting",
192
- "state": "deleted",
193
- "replacement": "color.background.warning.bold.[default]"
194
- }, {
195
- "path": "color.background.card",
196
- "state": "deleted",
197
- "replacement": "elevation.surface.raised.[default]"
198
- }, {
199
- "path": "color.background.default",
200
- "state": "deleted",
201
- "replacement": "elevation.surface.[default].[default]"
202
- }, {
203
- "path": "color.background.inverse.[default]",
204
- "state": "deleted",
205
- "replacement": "color.background.inverse.subtle.[default]"
206
- }, {
207
- "path": "color.background.overlay",
208
- "state": "deleted",
209
- "replacement": "elevation.surface.overlay.[default]"
210
- }, {
211
- "path": "color.background.selected.hover",
212
- "state": "deleted",
213
- "replacement": "color.background.selected.[default].hovered"
214
- }, {
215
- "path": "color.background.selected.resting",
216
- "state": "deleted",
217
- "replacement": "color.background.selected.[default].[default]"
218
- }, {
219
- "path": "color.background.subtleBorderedNeutral.pressed",
220
- "state": "deleted",
221
- "replacement": "color.background.input.pressed"
222
- }, {
223
- "path": "color.background.subtleBorderedNeutral.resting",
224
- "state": "deleted",
225
- "replacement": "color.background.input.[default]"
226
- }, {
227
- "path": "color.background.subtleBrand.hover",
228
- "state": "deleted",
229
- "replacement": "color.background.selected.[default].hovered"
230
- }, {
231
- "path": "color.background.subtleBrand.pressed",
232
- "state": "deleted",
233
- "replacement": "color.background.selected.[default].pressed"
234
- }, {
235
- "path": "color.background.subtleBrand.resting",
236
- "state": "deleted",
237
- "replacement": "color.background.selected.[default].[default]"
238
- }, {
239
- "path": "color.background.subtleDanger.hover",
240
- "state": "deleted",
241
- "replacement": "color.background.danger.[default].hovered"
242
- }, {
243
- "path": "color.background.subtleDanger.pressed",
244
- "state": "deleted",
245
- "replacement": "color.background.danger.[default].pressed"
246
- }, {
247
- "path": "color.background.subtleDanger.resting",
248
- "state": "deleted",
249
- "replacement": "color.background.danger.[default].[default]"
250
- }, {
251
- "path": "color.background.subtleDiscovery.hover",
252
- "state": "deleted",
253
- "replacement": "color.background.discovery.[default].hovered"
254
- }, {
255
- "path": "color.background.subtleDiscovery.pressed",
256
- "state": "deleted",
257
- "replacement": "color.background.discovery.[default].pressed"
258
- }, {
259
- "path": "color.background.subtleDiscovery.resting",
260
- "state": "deleted",
261
- "replacement": "color.background.discovery.[default].[default]"
262
- }, {
263
- "path": "color.background.subtleNeutral.hover",
264
- "state": "deleted",
265
- "replacement": "color.background.neutral.[default].hovered"
266
- }, {
267
- "path": "color.background.subtleNeutral.pressed",
268
- "state": "deleted",
269
- "replacement": "color.background.neutral.[default].pressed"
270
- }, {
271
- "path": "color.background.subtleNeutral.resting",
272
- "state": "deleted",
273
- "replacement": "color.background.neutral.[default].[default]"
274
- }, {
275
- "path": "color.background.subtleSuccess.hover",
276
- "state": "deleted",
277
- "replacement": "color.background.success.[default].hovered"
278
- }, {
279
- "path": "color.background.subtleSuccess.pressed",
280
- "state": "deleted",
281
- "replacement": "color.background.success.[default].pressed"
282
- }, {
283
- "path": "color.background.subtleSuccess.resting",
284
- "state": "deleted",
285
- "replacement": "color.background.success.[default].[default]"
286
- }, {
287
- "path": "color.background.subtleWarning.hover",
288
- "state": "deleted",
289
- "replacement": "color.background.warning.[default].hovered"
290
- }, {
291
- "path": "color.background.subtleWarning.pressed",
292
- "state": "deleted",
293
- "replacement": "color.background.warning.[default].pressed"
294
- }, {
295
- "path": "color.background.subtleWarning.resting",
296
- "state": "deleted",
297
- "replacement": "color.background.warning.[default].[default]"
298
- }, {
299
- "path": "color.background.sunken",
300
- "state": "deleted",
301
- "replacement": "elevation.surface.sunken"
302
- }, {
303
- "path": "color.background.transparentNeutral.hover",
304
- "state": "deleted",
305
- "replacement": "color.background.neutral.subtle.hovered"
306
- }, {
307
- "path": "color.background.transparentNeutral.pressed",
308
- "state": "deleted",
309
- "replacement": "color.background.neutral.subtle.pressed"
310
- }, {
311
- "path": "color.background.brand.[default].[default]",
312
- "state": "deleted",
313
- "replacement": "color.background.selected.[default].[default]"
314
- }, {
315
- "path": "color.background.brand.[default].hovered",
316
- "state": "deleted",
317
- "replacement": "color.background.selected.[default].hovered"
318
- }, {
319
- "path": "color.background.brand.[default].pressed",
320
- "state": "deleted",
321
- "replacement": "color.background.selected.[default].pressed"
322
- }, {
323
- "path": "color.interaction.inverse.hovered",
324
- "state": "deleted",
325
- "replacement": "color.background.inverse.subtle.hovered"
326
- }, {
327
- "path": "color.interaction.inverse.pressed",
328
- "state": "deleted",
329
- "replacement": "color.background.inverse.subtle.pressed"
330
- }, {
331
- "path": "color.accent.boldBlue",
332
- "state": "deleted",
333
- "replacement": "color.background.accent.blue.bolder"
334
- }, {
335
- "path": "color.accent.boldGreen",
336
- "state": "deleted",
337
- "replacement": "color.background.accent.green.bolder"
338
- }, {
339
- "path": "color.accent.boldOrange",
340
- "state": "deleted",
341
- "replacement": "color.background.accent.orange.bolder"
342
- }, {
343
- "path": "color.accent.boldPurple",
344
- "state": "deleted",
345
- "replacement": "color.background.accent.purple.bolder"
346
- }, {
347
- "path": "color.accent.boldRed",
348
- "state": "deleted",
349
- "replacement": "color.background.accent.red.bolder"
350
- }, {
351
- "path": "color.accent.boldTeal",
352
- "state": "deleted",
353
- "replacement": "color.background.accent.teal.bolder"
354
- }, {
355
- "path": "color.accent.subtleBlue",
356
- "state": "deleted",
357
- "replacement": "color.background.accent.blue.subtler"
358
- }, {
359
- "path": "color.accent.subtleGreen",
360
- "state": "deleted",
361
- "replacement": "color.background.accent.green.subtler"
362
- }, {
363
- "path": "color.accent.subtleMagenta",
364
- "state": "deleted",
365
- "replacement": "color.background.accent.magenta.subtler"
366
- }, {
367
- "path": "color.accent.subtleOrange",
368
- "state": "deleted",
369
- "replacement": "color.background.accent.orange.subtler"
370
- }, {
371
- "path": "color.accent.subtlePurple",
372
- "state": "deleted",
373
- "replacement": "color.background.accent.purple.subtler"
374
- }, {
375
- "path": "color.accent.subtleRed",
376
- "state": "deleted",
377
- "replacement": "color.background.accent.red.subtler"
378
- }, {
379
- "path": "color.accent.subtleTeal",
380
- "state": "deleted",
381
- "replacement": "color.background.accent.teal.subtler"
382
- }, {
383
- "path": "color.iconBorder.brand",
384
- "state": "deleted",
385
- "replacement": "color.icon.brand"
386
- }, {
387
- "path": "color.iconBorder.danger",
388
- "state": "deleted",
389
- "replacement": "color.icon.danger"
390
- }, {
391
- "path": "color.iconBorder.warning",
392
- "state": "deleted",
393
- "replacement": "color.icon.warning.[default]"
394
- }, {
395
- "path": "color.iconBorder.success",
396
- "state": "deleted",
397
- "replacement": "color.icon.success"
398
- }, {
399
- "path": "color.iconBorder.discovery",
400
- "state": "deleted",
401
- "replacement": "color.icon.discovery"
402
- }, {
403
- "path": "color.overlay.hover",
404
- "state": "deleted",
405
- "replacement": "color.interaction.hovered"
406
- }, {
407
- "path": "color.overlay.pressed",
408
- "state": "deleted",
409
- "replacement": "color.interaction.pressed"
410
- }, {
411
- "path": "shadow.card",
412
- "state": "deleted",
413
- "replacement": "elevation.shadow.raised"
414
- }, {
415
- "path": "shadow.overlay",
416
- "state": "deleted",
417
- "replacement": "elevation.shadow.overlay"
418
- }, {
419
20
  "path": "spacing.scaleLinear.0",
420
21
  "state": "experimental",
421
22
  "replacement": "0"
package/dist/esm/artifacts/theme-import-map.js ADDED
@@ -0,0 +1,39 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ *
4
+ * This file contains a dynamic import for each theme this package exports.
5
+ * Themes are loaded asynchronously at runtime to minimise the amount of CSS we send to the client.
6
+ * This allows users to compose their themes and only use the tokens that are requested.
7
+ * When a new theme is created, the import should automatically be added to the map
8
+ *
9
+ * @codegen <<SignedSource::dca5807b567cf95fcec4906be228f65f>>
10
+ * @codegenCommand yarn build tokens
11
+ */
12
+
13
+ var themeImportsMap = {
14
+ 'light': function light() {
15
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-light" */
16
+ './themes/atlassian-light');
17
+ },
18
+ 'dark': function dark() {
19
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark" */
20
+ './themes/atlassian-dark');
21
+ },
22
+ 'legacy-light': function legacyLight() {
23
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-legacy-light" */
24
+ './themes/atlassian-legacy-light');
25
+ },
26
+ 'legacy-dark': function legacyDark() {
27
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-legacy-dark" */
28
+ './themes/atlassian-legacy-dark');
29
+ },
30
+ 'spacing': function spacing() {
31
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-spacing" */
32
+ './themes/atlassian-spacing');
33
+ },
34
+ 'typography': function typography() {
35
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-typography" */
36
+ './themes/atlassian-typography');
37
+ }
38
+ };
39
+ export default themeImportsMap;