@atlaskit/tokens 0.13.5 → 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 (187) hide show
  1. package/CHANGELOG.md +289 -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 +1 -102
  154. package/figma/atlassian-legacy-dark.json +1 -102
  155. package/figma/atlassian-legacy-light.json +1 -102
  156. package/figma/atlassian-light.json +1 -102
  157. package/package.json +5 -8
  158. package/report.api.md +85 -219
  159. package/tmp/api-report-tmp.d.ts +58 -210
  160. package/css/atlassian-dark.css +0 -786
  161. package/css/atlassian-legacy-dark.css +0 -786
  162. package/css/atlassian-legacy-light.css +0 -786
  163. package/css/atlassian-light.css +0 -786
  164. package/dist/cjs/artifacts/typescript/atlassian-light-token-default-values.js +0 -407
  165. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +0 -435
  166. package/dist/cjs/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -532
  167. package/dist/cjs/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -523
  168. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +0 -421
  169. package/dist/cjs/tokens/default/deprecated/deprecated.js +0 -1186
  170. package/dist/es2019/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  171. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  172. package/dist/es2019/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  173. package/dist/es2019/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  174. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  175. package/dist/es2019/tokens/default/deprecated/deprecated.js +0 -1217
  176. package/dist/esm/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
  177. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
  178. package/dist/esm/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
  179. package/dist/esm/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
  180. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +0 -414
  181. package/dist/esm/tokens/default/deprecated/deprecated.js +0 -1179
  182. package/dist/types/artifacts/typescript/atlassian-light-token-default-values.d.ts +0 -399
  183. package/dist/types/tokens/atlassian-dark/deprecated/deprecated.d.ts +0 -4
  184. package/dist/types/tokens/atlassian-legacy-dark/deprecated/deprecated.d.ts +0 -4
  185. package/dist/types/tokens/atlassian-legacy-light/deprecated/deprecated.d.ts +0 -4
  186. package/dist/types/tokens/atlassian-light/deprecated/deprecated.d.ts +0 -4
  187. package/dist/types/tokens/default/deprecated/deprecated.d.ts +0 -4
package/dist/cjs/set-global-theme.js CHANGED
@@ -1,60 +1,286 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports.default = void 0;
9
-
7
+ exports.getThemeStyles = exports.getThemeHtmlAttrs = exports.getSSRAutoScript = exports.default = void 0;
8
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
12
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
+ var _bindEventListener = require("bind-event-listener");
14
+ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
10
15
  var _constants = require("./constants");
16
+ var _themeLoading = require("./utils/theme-loading");
17
+ var _themeStateTransformer = require("./utils/theme-state-transformer");
18
+ var defaultColorMode = 'light';
19
+ var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
20
+ var darkModeMediaQuery = '(prefers-color-scheme: dark)';
21
+ var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
22
+ var unbindThemeChangeListener = _noop.default;
23
+ var themeStateDefaults = {
24
+ colorMode: 'auto',
25
+ dark: 'dark',
26
+ light: 'light',
27
+ spacing: undefined,
28
+ typography: undefined
29
+ };
11
30
 
12
- var _themeConfig = _interopRequireDefault(require("./theme-config"));
31
+ /**
32
+ * Updates the current theme when the system theme changes. Should be bound
33
+ * to an event listener listening on the '(prefers-color-scheme: dark)' query
34
+ * @param e The event representing a change in system theme.
35
+ */
36
+ var checkNativeListener = function checkNativeListener(e) {
37
+ var element = document.documentElement;
38
+ element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
39
+ };
13
40
 
14
41
  /**
15
- * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
42
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
16
43
  *
17
- * @param {string} themeId - Which theme should be used by default.
18
- * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
44
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
45
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
46
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
47
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
48
+ * @param {string} themeState.spacing The spacing theme to be applied.
49
+ * @param {string} themeState.typography The typography theme to be applied.
50
+ *
51
+ * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
19
52
  *
20
53
  * @example
21
54
  * ```
22
- * // Set light theme as the default theme, but switch to others based on the system color theme.
23
- * setGlobalTheme('light', true);
55
+ * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
24
56
  * ```
25
57
  */
26
- var setGlobalTheme = function setGlobalTheme(themeId) {
27
- var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
28
- var theme = Object.values(_themeConfig.default).find(function (_ref) {
29
- var id = _ref.id;
30
- return id === themeId;
31
- });
32
-
33
- if (process.env.NODE_ENV !== 'production') {
34
- if (!theme) {
35
- var themeIds = Object.values(_themeConfig.default).map(function (_ref2) {
36
- var id = _ref2.id;
37
- return id;
38
- });
39
- throw new Error("setGlobalTheme only accepts themes: ".concat(themeIds.join(', ')));
40
- }
41
- }
42
-
43
- if (!theme) {
44
- return;
45
- }
46
-
47
- var element = document.documentElement;
48
- element.setAttribute(_constants.THEME_DATA_ATTRIBUTE, theme.id);
49
-
50
- if (theme.attributes.type === 'color') {
51
- element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
52
- }
58
+ var setGlobalTheme = /*#__PURE__*/function () {
59
+ var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
60
+ var _ref2,
61
+ _ref2$colorMode,
62
+ colorMode,
63
+ _ref2$dark,
64
+ dark,
65
+ _ref2$light,
66
+ light,
67
+ _ref2$spacing,
68
+ spacing,
69
+ _ref2$typography,
70
+ typography,
71
+ themePreferences,
72
+ themeAttributes,
73
+ _args2 = arguments;
74
+ return _regenerator.default.wrap(function _callee2$(_context2) {
75
+ while (1) {
76
+ switch (_context2.prev = _context2.next) {
77
+ case 0:
78
+ _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
79
+ // Dedupe list of themes to avoid race condition
80
+ themePreferences = new Set([dark, light, spacing, typography]);
81
+ _context2.next = 4;
82
+ return Promise.all((0, _toConsumableArray2.default)(themePreferences).filter(function (themeId) {
83
+ return themeId !== undefined;
84
+ }).map( /*#__PURE__*/function () {
85
+ var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
86
+ return _regenerator.default.wrap(function _callee$(_context) {
87
+ while (1) {
88
+ switch (_context.prev = _context.next) {
89
+ case 0:
90
+ _context.next = 2;
91
+ return (0, _themeLoading.loadAndAppendThemeCss)(themeId);
92
+ case 2:
93
+ return _context.abrupt("return", _context.sent);
94
+ case 3:
95
+ case "end":
96
+ return _context.stop();
97
+ }
98
+ }
99
+ }, _callee);
100
+ }));
101
+ return function (_x) {
102
+ return _ref3.apply(this, arguments);
103
+ };
104
+ }()));
105
+ case 4:
106
+ if (colorMode === 'auto' && darkModeMql) {
107
+ colorMode = darkModeMql.matches ? 'dark' : 'light';
108
+ // Add an event listener for changes to the system theme.
109
+ // If the function exists, it will not be added again.
110
+ unbindThemeChangeListener = (0, _bindEventListener.bind)(darkModeMql, {
111
+ type: 'change',
112
+ listener: checkNativeListener
113
+ });
114
+ } else {
115
+ unbindThemeChangeListener();
116
+ }
117
+ themeAttributes = getThemeHtmlAttrs({
118
+ colorMode: colorMode,
119
+ dark: dark,
120
+ light: light,
121
+ spacing: spacing,
122
+ typography: typography
123
+ });
124
+ Object.entries(themeAttributes).forEach(function (_ref4) {
125
+ var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
126
+ key = _ref5[0],
127
+ value = _ref5[1];
128
+ document.documentElement.setAttribute(key, value);
129
+ });
130
+ return _context2.abrupt("return", unbindThemeChangeListener);
131
+ case 8:
132
+ case "end":
133
+ return _context2.stop();
134
+ }
135
+ }
136
+ }, _callee2);
137
+ }));
138
+ return function setGlobalTheme() {
139
+ return _ref.apply(this, arguments);
140
+ };
141
+ }();
142
+ /**
143
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
144
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
145
+ *
146
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
147
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
148
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
149
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
150
+ * @param {string} themeState.spacing The spacing theme to be applied.
151
+ * @param {string} themeState.typography The typography theme to be applied.
152
+ *
153
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
154
+ * If an error is encountered while loading themes, the themes arrav will be emptv.
155
+ */
156
+ var getThemeStyles = /*#__PURE__*/function () {
157
+ var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
158
+ var _ref7,
159
+ _ref7$colorMode,
160
+ colorMode,
161
+ _ref7$dark,
162
+ dark,
163
+ _ref7$light,
164
+ light,
165
+ _ref7$spacing,
166
+ spacing,
167
+ _ref7$typography,
168
+ typography,
169
+ themePreferences,
170
+ results,
171
+ _args4 = arguments;
172
+ return _regenerator.default.wrap(function _callee4$(_context4) {
173
+ while (1) {
174
+ switch (_context4.prev = _context4.next) {
175
+ case 0:
176
+ _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
177
+ themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
178
+ [spacing, typography].forEach(function (themeId) {
179
+ if (themeId) {
180
+ themePreferences.push(themeId);
181
+ }
182
+ });
183
+ _context4.next = 5;
184
+ return Promise.all(themePreferences.map( /*#__PURE__*/function () {
185
+ var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
186
+ var css;
187
+ return _regenerator.default.wrap(function _callee3$(_context3) {
188
+ while (1) {
189
+ switch (_context3.prev = _context3.next) {
190
+ case 0:
191
+ _context3.prev = 0;
192
+ _context3.next = 3;
193
+ return (0, _themeLoading.loadThemeCss)(themeId);
194
+ case 3:
195
+ css = _context3.sent;
196
+ return _context3.abrupt("return", {
197
+ id: themeId,
198
+ attrs: {
199
+ 'data-theme': themeId
200
+ },
201
+ css: css
202
+ });
203
+ case 7:
204
+ _context3.prev = 7;
205
+ _context3.t0 = _context3["catch"](0);
206
+ return _context3.abrupt("return", undefined);
207
+ case 10:
208
+ case "end":
209
+ return _context3.stop();
210
+ }
211
+ }
212
+ }, _callee3, null, [[0, 7]]);
213
+ }));
214
+ return function (_x2) {
215
+ return _ref8.apply(this, arguments);
216
+ };
217
+ }()));
218
+ case 5:
219
+ results = _context4.sent;
220
+ return _context4.abrupt("return", results.filter(function (theme) {
221
+ return theme !== undefined;
222
+ }));
223
+ case 7:
224
+ case "end":
225
+ return _context4.stop();
226
+ }
227
+ }
228
+ }, _callee4);
229
+ }));
230
+ return function getThemeStyles() {
231
+ return _ref6.apply(this, arguments);
232
+ };
233
+ }();
53
234
 
54
- if (shouldMatchSystem) {
55
- element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, 'auto');
56
- }
235
+ /**
236
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
237
+ * Note: this utility does not handle automatic theme switching.
238
+ *
239
+ * @param {Object<string, string>} themeOptions - Theme options object
240
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
241
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
242
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
243
+ * @param {string} themeState.spacing The spacing theme to be applied.
244
+ * @param {string} themeState.typography The typography theme to be applied.
245
+ *
246
+ * @returns {Object} Object of HTML attributes to be applied to the document root
247
+ */
248
+ exports.getThemeStyles = getThemeStyles;
249
+ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
250
+ var _ref10;
251
+ var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
252
+ _ref9$colorMode = _ref9.colorMode,
253
+ colorMode = _ref9$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref9$colorMode,
254
+ _ref9$dark = _ref9.dark,
255
+ dark = _ref9$dark === void 0 ? themeStateDefaults['dark'] : _ref9$dark,
256
+ _ref9$light = _ref9.light,
257
+ light = _ref9$light === void 0 ? themeStateDefaults['light'] : _ref9$light,
258
+ _ref9$spacing = _ref9.spacing,
259
+ spacing = _ref9$spacing === void 0 ? themeStateDefaults['spacing'] : _ref9$spacing,
260
+ _ref9$typography = _ref9.typography,
261
+ typography = _ref9$typography === void 0 ? themeStateDefaults['typography'] : _ref9$typography;
262
+ var themePreferences = {
263
+ dark: dark,
264
+ light: light,
265
+ spacing: spacing,
266
+ typography: typography
267
+ };
268
+ var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
269
+ return _ref10 = {}, (0, _defineProperty2.default)(_ref10, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref10, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
57
270
  };
58
271
 
272
+ /**
273
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
274
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
275
+ *
276
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
277
+ *
278
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
279
+ */
280
+ exports.getThemeHtmlAttrs = getThemeHtmlAttrs;
281
+ var getSSRAutoScript = function getSSRAutoScript(colorMode) {
282
+ return colorMode === 'auto' ? "(\n () => {\n try {\n const mql = window.matchMedia('".concat(darkModeMediaQuery, "');\n const colorMode = mql.matches ? 'dark' : 'light';\n document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n } catch (e) {}\n }\n)()") : undefined;
283
+ };
284
+ exports.getSSRAutoScript = getSSRAutoScript;
59
285
  var _default = setGlobalTheme;
60
286
  exports.default = _default;
package/dist/cjs/theme-config.js CHANGED
@@ -3,8 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
7
-
6
+ exports.themeIds = exports.themeColorModes = exports.default = void 0;
8
7
  /**
9
8
  * This file contains the source of truth for themes and all associated meta data.
10
9
  */
@@ -23,34 +22,20 @@ exports.default = void 0;
23
22
 
24
23
  /**
25
24
  * Theme modes: The general purpose of a theme.
26
- * This attr is used to apply the appropriate system-preference media selector
25
+ * This attr is used to apply the appropriate system-preference option
27
26
  * It may also be used as a selector for mode-specific overrides such as light/dark images.
28
27
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
29
28
  */
30
-
29
+ var themeColorModes = ['light', 'dark', 'auto'];
30
+ exports.themeColorModes = themeColorModes;
31
31
  /**
32
- * Theme ids: The value that will mounted to the DOM as a data attr
33
- * For example: `data-theme="light"
32
+ * Theme ids: The value that will be mounted to the DOM as a data attr
33
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
34
34
  *
35
35
  * These ids must be kebab case
36
36
  */
37
-
38
- /**
39
- * Theme to use a base. This will create the theme as
40
- * an extension with all token values marked as optional
41
- * to allow tokens to be overridden as required.
42
- */
43
-
44
- /**
45
- * Palettes: The set of base tokens a given theme may be populated with.
46
- * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
47
- * previous color set.
48
- */
49
-
50
- /**
51
- * ThemeConfig: the source of truth for all theme meta-data.
52
- * This object should be used whenever interfacing with themes.
53
- */
37
+ var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography'];
38
+ exports.themeIds = themeIds;
54
39
  var themeConfig = {
55
40
  'atlassian-light': {
56
41
  id: 'light',
package/dist/cjs/{theme-change-observer.js → theme-mutation-observer.js} RENAMED
@@ -1,27 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports.useThemeObserver = exports.ThemeMutationObserver = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
7
+ exports.ThemeMutationObserver = void 0;
12
8
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
9
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
-
16
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
-
18
- var _react = require("react");
19
-
20
11
  var _constants = require("./constants");
21
-
22
- var getGlobalTheme = function getGlobalTheme() {
23
- return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
24
- };
12
+ var _getGlobalTheme = require("./get-global-theme");
25
13
  /**
26
14
  * A MutationObserver which watches the `<html>` element for changes to the theme.
27
15
  *
@@ -35,8 +23,6 @@ var getGlobalTheme = function getGlobalTheme() {
35
23
  * observer.observe();
36
24
  * ```
37
25
  */
38
-
39
-
40
26
  var ThemeMutationObserver = /*#__PURE__*/function () {
41
27
  function ThemeMutationObserver(callback) {
42
28
  (0, _classCallCheck2.default)(this, ThemeMutationObserver);
@@ -44,20 +30,17 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
44
30
  (0, _defineProperty2.default)(this, "mediaObserver", null);
45
31
  this.callback = callback;
46
32
  }
47
-
48
33
  (0, _createClass2.default)(ThemeMutationObserver, [{
49
34
  key: "observe",
50
35
  value: function observe() {
51
36
  var _this = this;
52
-
53
37
  if (!this.observer) {
54
38
  this.observer = new MutationObserver(function () {
55
- _this.callback(getGlobalTheme());
39
+ _this.callback((0, _getGlobalTheme.getGlobalTheme)());
56
40
  });
57
41
  }
58
-
59
42
  this.observer.observe(document.documentElement, {
60
- attributeFilter: [_constants.THEME_DATA_ATTRIBUTE]
43
+ attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
61
44
  });
62
45
  }
63
46
  }, {
@@ -68,39 +51,4 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
68
51
  }]);
69
52
  return ThemeMutationObserver;
70
53
  }();
71
- /**
72
- * A React hook which returns the current theme set on `<html>`, or `null` if not set.
73
- *
74
- * @example
75
- * ```
76
- * const theme = useThemeObserver(); // Returns 'light' or 'dark'
77
- *
78
- * // Performing side effects when it changes
79
- * useEffect(() => {
80
- * console.log(`The theme has changed to ${theme}`);
81
- * }, [theme]);
82
- * ```
83
- */
84
-
85
-
86
- exports.ThemeMutationObserver = ThemeMutationObserver;
87
-
88
- var useThemeObserver = function useThemeObserver() {
89
- var _useState = (0, _react.useState)(getGlobalTheme()),
90
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
91
- theme = _useState2[0],
92
- setTheme = _useState2[1];
93
-
94
- (0, _react.useEffect)(function () {
95
- var observer = new ThemeMutationObserver(function (theme) {
96
- return setTheme(theme);
97
- });
98
- observer.observe();
99
- return function () {
100
- return observer.disconnect();
101
- };
102
- }, []);
103
- return theme;
104
- };
105
-
106
- exports.useThemeObserver = useThemeObserver;
54
+ exports.ThemeMutationObserver = ThemeMutationObserver;
package/dist/cjs/tokens/atlassian-dark/utility/utility.js CHANGED
@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var utility = {
8
- UNSAFE_util: {
8
+ UNSAFE: {
9
9
  transparent: {
10
10
  value: 'transparent'
11
- },
12
- MISSING_TOKEN: {
13
- value: '#FA11F2'
14
11
  }
15
12
  }
16
13
  };
package/dist/cjs/tokens/atlassian-legacy-dark/utility/utility.js CHANGED
@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var utility = {
8
- UNSAFE_util: {
8
+ UNSAFE: {
9
9
  transparent: {
10
10
  value: 'transparent'
11
- },
12
- MISSING_TOKEN: {
13
- value: '#FA11F2'
14
11
  }
15
12
  }
16
13
  };
package/dist/cjs/tokens/atlassian-legacy-light/utility/utility.js CHANGED
@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var utility = {
8
- UNSAFE_util: {
8
+ UNSAFE: {
9
9
  transparent: {
10
10
  value: 'transparent'
11
- },
12
- MISSING_TOKEN: {
13
- value: '#FA11F2'
14
11
  }
15
12
  }
16
13
  };
package/dist/cjs/tokens/atlassian-light/utility/utility.js CHANGED
@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var utility = {
8
- UNSAFE_util: {
8
+ UNSAFE: {
9
9
  transparent: {
10
10
  value: 'transparent'
11
- },
12
- MISSING_TOKEN: {
13
- value: '#FA11F2'
14
11
  }
15
12
  }
16
13
  };
package/dist/cjs/tokens/atlassian-spacing/spacing.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  /**
9
8
  * The spacing value schema is specifically designed to dictate the
10
9
  * possible values a specific key-token pair will have.
package/dist/cjs/tokens/default/spacing/spacing.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  /**
9
8
  * The spacing attribute schema governs the non-value specific metadata to apply to the
10
9
  * spacing theme. This governs the name, description and state
package/dist/cjs/tokens/default/utility/utility.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var utility = {
8
- UNSAFE_util: {
8
+ UNSAFE: {
9
9
  transparent: {
10
10
  attributes: {
11
11
  group: 'raw',
@@ -13,14 +13,6 @@ var utility = {
13
13
  introduced: '0.1.1',
14
14
  description: 'Transparent token used for backwards compatibility between new and old theming solutions'
15
15
  }
16
- },
17
- MISSING_TOKEN: {
18
- attributes: {
19
- group: 'raw',
20
- state: 'active',
21
- introduced: '0.4.0',
22
- description: 'Used as a placeholder when a suitable token does not exist'
23
- }
24
16
  }
25
17
  }
26
18
  };
package/dist/cjs/use-theme-observer.js ADDED
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useThemeObserver = void 0;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = require("react");
10
+ var _getGlobalTheme = require("./get-global-theme");
11
+ var _themeMutationObserver = require("./theme-mutation-observer");
12
+ /**
13
+ * A React hook which returns the current themes and color-mode set on `<html>`.
14
+ *
15
+ * @example
16
+ * ```
17
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
18
+ *
19
+ * // Performing side effects when it changes
20
+ * useEffect(() => {
21
+ * console.log(`The color mode has changed to ${theme.colorMode}`);
22
+ * }, [theme.colorMode]);
23
+ * ```
24
+ */
25
+ var useThemeObserver = function useThemeObserver() {
26
+ var _useState = (0, _react.useState)((0, _getGlobalTheme.getGlobalTheme)()),
27
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
28
+ theme = _useState2[0],
29
+ setTheme = _useState2[1];
30
+ (0, _react.useEffect)(function () {
31
+ var observer = new _themeMutationObserver.ThemeMutationObserver(function (theme) {
32
+ return setTheme(theme);
33
+ });
34
+ observer.observe();
35
+ return function () {
36
+ return observer.disconnect();
37
+ };
38
+ }, []);
39
+ return theme;
40
+ };
41
+ exports.useThemeObserver = useThemeObserver;