@atlaskit/tokens 1.22.1 → 1.23.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 (67) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/custom-themes/package.json +17 -0
  3. package/dist/cjs/constants.js +3 -1
  4. package/dist/cjs/custom-theme.js +45 -79
  5. package/dist/cjs/enable-global-theme.js +70 -0
  6. package/dist/cjs/entry-points/custom-themes.js +13 -0
  7. package/dist/cjs/get-token-value.js +1 -1
  8. package/dist/cjs/get-token.js +1 -1
  9. package/dist/cjs/index.js +7 -0
  10. package/dist/cjs/load-custom-theme-styles.js +45 -0
  11. package/dist/cjs/set-global-theme.js +50 -94
  12. package/dist/cjs/theme-config.js +5 -0
  13. package/dist/cjs/utils/color-mode-listeners.js +66 -0
  14. package/dist/cjs/utils/configure-page.js +34 -0
  15. package/dist/es2019/constants.js +1 -0
  16. package/dist/es2019/custom-theme.js +4 -4
  17. package/dist/es2019/enable-global-theme.js +53 -0
  18. package/dist/es2019/entry-points/custom-themes.js +1 -0
  19. package/dist/es2019/get-token-value.js +1 -1
  20. package/dist/es2019/get-token.js +1 -1
  21. package/dist/es2019/index.js +1 -0
  22. package/dist/es2019/load-custom-theme-styles.js +37 -0
  23. package/dist/es2019/set-global-theme.js +34 -65
  24. package/dist/es2019/theme-config.js +6 -0
  25. package/dist/es2019/utils/color-mode-listeners.js +48 -0
  26. package/dist/es2019/utils/configure-page.js +22 -0
  27. package/dist/esm/constants.js +1 -0
  28. package/dist/esm/custom-theme.js +45 -78
  29. package/dist/esm/enable-global-theme.js +63 -0
  30. package/dist/esm/entry-points/custom-themes.js +1 -0
  31. package/dist/esm/get-token-value.js +1 -1
  32. package/dist/esm/get-token.js +1 -1
  33. package/dist/esm/index.js +1 -0
  34. package/dist/esm/load-custom-theme-styles.js +39 -0
  35. package/dist/esm/set-global-theme.js +49 -93
  36. package/dist/esm/theme-config.js +6 -0
  37. package/dist/esm/utils/color-mode-listeners.js +58 -0
  38. package/dist/esm/utils/configure-page.js +28 -0
  39. package/dist/types/constants.d.ts +1 -0
  40. package/dist/types/custom-theme.d.ts +3 -3
  41. package/dist/types/enable-global-theme.d.ts +25 -0
  42. package/dist/types/entry-points/custom-themes.d.ts +1 -0
  43. package/dist/types/get-global-theme.d.ts +1 -1
  44. package/dist/types/index.d.ts +1 -0
  45. package/dist/types/load-custom-theme-styles.d.ts +17 -0
  46. package/dist/types/set-global-theme.d.ts +1 -4
  47. package/dist/types/theme-config.d.ts +7 -0
  48. package/dist/types/theme-mutation-observer.d.ts +1 -1
  49. package/dist/types/use-theme-observer.d.ts +1 -1
  50. package/dist/types/utils/color-mode-listeners.d.ts +13 -0
  51. package/dist/types/utils/configure-page.d.ts +6 -0
  52. package/dist/types-ts4.5/constants.d.ts +1 -0
  53. package/dist/types-ts4.5/custom-theme.d.ts +3 -3
  54. package/dist/types-ts4.5/enable-global-theme.d.ts +25 -0
  55. package/dist/types-ts4.5/entry-points/custom-themes.d.ts +1 -0
  56. package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
  57. package/dist/types-ts4.5/index.d.ts +1 -0
  58. package/dist/types-ts4.5/load-custom-theme-styles.d.ts +17 -0
  59. package/dist/types-ts4.5/set-global-theme.d.ts +1 -4
  60. package/dist/types-ts4.5/theme-config.d.ts +7 -0
  61. package/dist/types-ts4.5/theme-mutation-observer.d.ts +1 -1
  62. package/dist/types-ts4.5/use-theme-observer.d.ts +1 -1
  63. package/dist/types-ts4.5/utils/color-mode-listeners.d.ts +13 -0
  64. package/dist/types-ts4.5/utils/configure-page.d.ts +6 -0
  65. package/package.json +2 -1
  66. package/report.api.md +16 -2
  67. package/tmp/api-report-tmp.d.ts +5 -2
package/dist/esm/load-custom-theme-styles.js ADDED
@@ -0,0 +1,39 @@
1
+ import { loadAndAppendCustomThemeCss } from './custom-theme';
2
+ import { themeStateDefaults } from './theme-config';
3
+ import { isValidBrandHex } from './utils/color-utils';
4
+ import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
5
+
6
+ /**
7
+ * Synchronously generates and applies custom theme styles to the page.
8
+ *
9
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
10
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
11
+ *
12
+ * @example
13
+ * ```
14
+ * UNSAFE_loadCustomThemeStyles({
15
+ * colorMode: 'auto',
16
+ * UNSAFE_themeOptions: { brandColor: '#FF0000' }
17
+ * });
18
+ * ```
19
+ */
20
+ var UNSAFE_loadCustomThemeStyles = function UNSAFE_loadCustomThemeStyles() {
21
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
22
+ _ref$colorMode = _ref.colorMode,
23
+ colorMode = _ref$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref$colorMode,
24
+ _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
25
+ UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
26
+ // Load custom theme styles
27
+ if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
28
+ var attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, colorMode);
29
+ if (attrOfMissingCustomStyles.length !== 0) {
30
+ loadAndAppendCustomThemeCss({
31
+ colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
32
+ // only load the missing custom theme styles
33
+ attrOfMissingCustomStyles[0],
34
+ UNSAFE_themeOptions: UNSAFE_themeOptions
35
+ });
36
+ }
37
+ }
38
+ };
39
+ export default UNSAFE_loadCustomThemeStyles;
package/dist/esm/set-global-theme.js CHANGED
@@ -1,32 +1,11 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
1
  import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
2
  import _regeneratorRuntime from "@babel/runtime/regenerator";
5
- import { bind } from 'bind-event-listener';
6
- import noop from '@atlaskit/ds-lib/noop';
7
- import { COLOR_MODE_ATTRIBUTE } from './constants';
8
- import getThemeHtmlAttrs from './get-theme-html-attrs';
9
3
  import { themeStateDefaults } from './theme-config';
10
4
  import { isValidBrandHex } from './utils/color-utils';
5
+ import configurePage from './utils/configure-page';
11
6
  import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
12
7
  import { getThemePreferences } from './utils/get-theme-preferences';
13
- import { darkModeMediaQuery, loadAndAppendThemeCss } from './utils/theme-loading';
14
-
15
- // Represents theme state once mounted to the page (auto is hidden from observers)
16
-
17
- var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
18
- var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
19
- var unbindThemeChangeListener = noop;
20
-
21
- /**
22
- * Updates the current theme when the system theme changes. Should be bound
23
- * to an event listener listening on the '(prefers-color-scheme: dark)' query
24
- * @param e The event representing a change in system theme.
25
- */
26
- var checkNativeListener = function checkNativeListener(e) {
27
- var element = document.documentElement;
28
- element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
29
- };
8
+ import { loadAndAppendThemeCss } from './utils/theme-loading';
30
9
 
31
10
  /**
32
11
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -66,26 +45,31 @@ var setGlobalTheme = /*#__PURE__*/function () {
66
45
  _ref2$UNSAFE_themeOpt,
67
46
  UNSAFE_themeOptions,
68
47
  themeLoader,
48
+ themeState,
69
49
  themePreferences,
70
50
  loadingStrategy,
71
- themeAttributes,
51
+ loadingTasks,
52
+ mode,
53
+ attrOfMissingCustomStyles,
54
+ autoUnbind,
72
55
  _args3 = arguments;
73
56
  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
74
57
  while (1) switch (_context3.prev = _context3.next) {
75
58
  case 0:
76
59
  _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[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$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _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, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
77
60
  themeLoader = _args3.length > 1 ? _args3[1] : undefined;
78
- themePreferences = getThemePreferences({
61
+ themeState = {
79
62
  colorMode: colorMode,
80
63
  dark: dark,
81
64
  light: light,
82
65
  shape: shape,
83
66
  spacing: spacing,
84
- typography: typography
85
- });
86
- loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
87
- _context3.next = 6;
88
- return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
67
+ typography: typography,
68
+ UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
69
+ }; // Determine what to load and loading strategy
70
+ themePreferences = getThemePreferences(themeState);
71
+ loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss; // Load standard themes
72
+ loadingTasks = themePreferences.map( /*#__PURE__*/function () {
89
73
  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
90
74
  return _regeneratorRuntime.wrap(function _callee$(_context) {
91
75
  while (1) switch (_context.prev = _context.next) {
@@ -103,71 +87,43 @@ var setGlobalTheme = /*#__PURE__*/function () {
103
87
  return function (_x) {
104
88
  return _ref3.apply(this, arguments);
105
89
  };
106
- }())), [_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
107
- var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
108
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
109
- while (1) switch (_context2.prev = _context2.next) {
110
- case 0:
111
- if (!(!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
112
- _context2.next = 11;
113
- break;
114
- }
115
- mode = colorMode || themeStateDefaults['colorMode'];
116
- attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
117
- if (!(attrOfMissingCustomStyles.length === 0)) {
118
- _context2.next = 5;
119
- break;
90
+ }()); // Load custom themes if needed
91
+ if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
92
+ mode = colorMode || themeStateDefaults['colorMode'];
93
+ attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
94
+ if (attrOfMissingCustomStyles.length > 0) {
95
+ // Load custom theme styles
96
+ loadingTasks.push(_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
97
+ var _yield$import, loadAndAppendCustomThemeCss;
98
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
99
+ while (1) switch (_context2.prev = _context2.next) {
100
+ case 0:
101
+ _context2.next = 2;
102
+ return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
103
+ './custom-theme');
104
+ case 2:
105
+ _yield$import = _context2.sent;
106
+ loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
107
+ loadAndAppendCustomThemeCss({
108
+ colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
109
+ // only load the missing custom theme styles
110
+ attrOfMissingCustomStyles[0],
111
+ UNSAFE_themeOptions: UNSAFE_themeOptions
112
+ });
113
+ case 5:
114
+ case "end":
115
+ return _context2.stop();
120
116
  }
121
- return _context2.abrupt("return", false);
122
- case 5:
123
- _context2.next = 7;
124
- return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
125
- './custom-theme');
126
- case 7:
127
- _yield$import = _context2.sent;
128
- loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
129
- _context2.next = 11;
130
- return loadAndAppendCustomThemeCss({
131
- colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
132
- // only load the missing custom theme styles
133
- attrOfMissingCustomStyles[0],
134
- UNSAFE_themeOptions: UNSAFE_themeOptions
135
- });
136
- case 11:
137
- case "end":
138
- return _context2.stop();
139
- }
140
- }, _callee2);
141
- }))()]));
142
- case 6:
143
- if (colorMode === 'auto' && darkModeMql) {
144
- colorMode = darkModeMql.matches ? 'dark' : 'light';
145
- // Add an event listener for changes to the system theme.
146
- // If the function exists, it will not be added again.
147
- unbindThemeChangeListener = bind(darkModeMql, {
148
- type: 'change',
149
- listener: checkNativeListener
150
- });
151
- } else {
152
- unbindThemeChangeListener();
117
+ }, _callee2);
118
+ }))());
119
+ }
153
120
  }
154
- themeAttributes = getThemeHtmlAttrs({
155
- colorMode: colorMode,
156
- dark: dark,
157
- light: light,
158
- shape: shape,
159
- spacing: spacing,
160
- typography: typography,
161
- UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
162
- });
163
- Object.entries(themeAttributes).forEach(function (_ref5) {
164
- var _ref6 = _slicedToArray(_ref5, 2),
165
- key = _ref6[0],
166
- value = _ref6[1];
167
- document.documentElement.setAttribute(key, value);
168
- });
169
- return _context3.abrupt("return", unbindThemeChangeListener);
170
- case 10:
121
+ _context3.next = 9;
122
+ return Promise.all(loadingTasks);
123
+ case 9:
124
+ autoUnbind = configurePage(themeState);
125
+ return _context3.abrupt("return", autoUnbind);
126
+ case 11:
171
127
  case "end":
172
128
  return _context3.stop();
173
129
  }
package/dist/esm/theme-config.js CHANGED
@@ -178,4 +178,10 @@ export var themeStateDefaults = {
178
178
  typography: undefined,
179
179
  UNSAFE_themeOptions: undefined
180
180
  };
181
+
182
+ /**
183
+ * Represents theme state once mounted to the page
184
+ * (the page doesn't have an "auto" color mode, it's either light or dark)
185
+ */
186
+
181
187
  export default themeConfig;
package/dist/esm/utils/color-mode-listeners.js ADDED
@@ -0,0 +1,58 @@
1
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
+ import _createClass from "@babel/runtime/helpers/createClass";
3
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
+ import { bind as _bind } from 'bind-event-listener';
5
+ import { COLOR_MODE_ATTRIBUTE } from '../constants';
6
+ import { darkModeMediaQuery } from './theme-loading';
7
+ var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
8
+
9
+ /**
10
+ * Updates the current theme when the system theme changes. Should be bound
11
+ * to an event listener listening on the '(prefers-color-scheme: dark)' query
12
+ * @param e The event representing a change in system theme.
13
+ */
14
+ function checkNativeListener(e) {
15
+ var element = document.documentElement;
16
+ element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
17
+ }
18
+ var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
19
+ var ColorModeObserver = /*#__PURE__*/function () {
20
+ function ColorModeObserver() {
21
+ _classCallCheck(this, ColorModeObserver);
22
+ _defineProperty(this, "unbindThemeChangeListener", null);
23
+ }
24
+ _createClass(ColorModeObserver, [{
25
+ key: "getColorMode",
26
+ value: function getColorMode() {
27
+ if (!darkModeMql) {
28
+ return 'light';
29
+ }
30
+ return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
31
+ }
32
+ }, {
33
+ key: "bind",
34
+ value: function bind() {
35
+ if (darkModeMql && this.unbindThemeChangeListener === null) {
36
+ this.unbindThemeChangeListener = _bind(darkModeMql, {
37
+ type: 'change',
38
+ listener: checkNativeListener
39
+ });
40
+ }
41
+ }
42
+ }, {
43
+ key: "unbind",
44
+ value: function unbind() {
45
+ if (this.unbindThemeChangeListener) {
46
+ this.unbindThemeChangeListener();
47
+ this.unbindThemeChangeListener = null;
48
+ }
49
+ }
50
+ }]);
51
+ return ColorModeObserver;
52
+ }();
53
+ /**
54
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
55
+ * that can be unbound by any consumer when no longer needed.
56
+ */
57
+ var SingletonColorModeObserver = new ColorModeObserver();
58
+ export default SingletonColorModeObserver;
package/dist/esm/utils/configure-page.js ADDED
@@ -0,0 +1,28 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import getThemeHtmlAttrs from '../get-theme-html-attrs';
3
+ import ColorModeObserver from './color-mode-listeners';
4
+
5
+ /**
6
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
7
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
8
+ */
9
+ export default function configurePage(themeState) {
10
+ if (themeState.colorMode === 'auto') {
11
+ // Set colorMode based on the user preference
12
+ themeState.colorMode = ColorModeObserver.getColorMode();
13
+ // Bind a listener (if one doesn't already exist) to keep colorMode updated
14
+ ColorModeObserver.bind();
15
+ } else {
16
+ ColorModeObserver.unbind();
17
+ }
18
+ var themeAttributes = getThemeHtmlAttrs(themeState);
19
+ Object.entries(themeAttributes).forEach(function (_ref) {
20
+ var _ref2 = _slicedToArray(_ref, 2),
21
+ key = _ref2[0],
22
+ value = _ref2[1];
23
+ document.documentElement.setAttribute(key, value);
24
+ });
25
+ return function () {
26
+ return ColorModeObserver.unbind;
27
+ };
28
+ }
package/dist/types/constants.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const THEME_DATA_ATTRIBUTE = "data-theme";
2
2
  export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
3
3
  export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
4
+ export declare const DEFAULT_THEME = "light";
4
5
  export declare const CSS_PREFIX = "ds";
5
6
  export declare const CSS_VAR_FULL: string[];
6
7
  export declare const TOKEN_NOT_FOUND_CSS_VAR: string;
package/dist/types/custom-theme.d.ts CHANGED
@@ -14,12 +14,12 @@ export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
14
14
  * @param {string} themeState.colorMode Determines which color theme is applied
15
15
  * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
16
16
  *
17
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
17
+ * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
18
18
  * If an error is encountered while loading themes, the themes array will be empty.
19
19
  */
20
20
  export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
21
21
  UNSAFE_themeOptions: ThemeOptionsSchema;
22
- }): Promise<ThemeStyles[]>;
22
+ }): ThemeStyles[];
23
23
  export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
24
24
  UNSAFE_themeOptions: ThemeOptionsSchema;
25
- }): Promise<void>;
25
+ }): void;
package/dist/types/enable-global-theme.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { UnbindFn } from 'bind-event-listener';
2
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
3
+ /**
4
+ * Synchronously sets the theme globally at runtime. Themes are not loaded;
5
+ * use `getThemeStyles` and other server-side utilities to generate and load them.
6
+ *
7
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
8
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
9
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
10
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
11
+ * @param {string} themeState.shape The shape theme to be applied.
12
+ * @param {string} themeState.spacing The spacing theme to be applied.
13
+ * @param {string} themeState.typography The typography theme to be applied.
14
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
15
+ * @param {function} themeLoader Callback function used to override the default theme loading functionality.
16
+ *
17
+ * @returns An unbind function, that can be used to stop listening for changes to system theme.
18
+ *
19
+ * @example
20
+ * ```
21
+ * enableGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
22
+ * ```
23
+ */
24
+ declare const enableGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined) => UnbindFn;
25
+ export default enableGlobalTheme;
package/dist/types/entry-points/custom-themes.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as UNSAFE_loadCustomThemeStyles } from '../load-custom-theme-styles';
package/dist/types/get-global-theme.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  declare const getGlobalTheme: () => Partial<ActiveThemeState>;
3
3
  export default getGlobalTheme;
package/dist/types/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export { default as themeConfig } from './theme-config';
2
2
  export { default as token } from './get-token';
3
3
  export { default as getTokenValue } from './get-token-value';
4
4
  export { default as setGlobalTheme } from './set-global-theme';
5
+ export { default as enableGlobalTheme } from './enable-global-theme';
5
6
  export { default as getThemeStyles } from './get-theme-styles';
6
7
  export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
7
8
  export { default as getSSRAutoScript } from './get-ssr-auto-script';
package/dist/types/load-custom-theme-styles.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Synchronously generates and applies custom theme styles to the page.
4
+ *
5
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
6
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
7
+ *
8
+ * @example
9
+ * ```
10
+ * UNSAFE_loadCustomThemeStyles({
11
+ * colorMode: 'auto',
12
+ * UNSAFE_themeOptions: { brandColor: '#FF0000' }
13
+ * });
14
+ * ```
15
+ */
16
+ declare const UNSAFE_loadCustomThemeStyles: ({ colorMode, UNSAFE_themeOptions, }?: Partial<ThemeState>) => void;
17
+ export default UNSAFE_loadCustomThemeStyles;
package/dist/types/set-global-theme.d.ts CHANGED
@@ -1,8 +1,5 @@
1
1
  import { UnbindFn } from 'bind-event-listener';
2
- import { ThemeColorModes, ThemeIdsWithOverrides, ThemeState } from './theme-config';
3
- export interface ActiveThemeState extends ThemeState {
4
- colorMode: Exclude<ThemeColorModes, 'auto'>;
5
- }
2
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
6
3
  /**
7
4
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
8
5
  *
package/dist/types/theme-config.d.ts CHANGED
@@ -101,4 +101,11 @@ export interface ThemeState {
101
101
  * themeStateDefaults: the default values for ThemeState used by theming utilities
102
102
  */
103
103
  export declare const themeStateDefaults: ThemeState;
104
+ /**
105
+ * Represents theme state once mounted to the page
106
+ * (the page doesn't have an "auto" color mode, it's either light or dark)
107
+ */
108
+ export interface ActiveThemeState extends ThemeState {
109
+ colorMode: DataColorModes;
110
+ }
104
111
  export default themeConfig;
package/dist/types/theme-mutation-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
4
  *
package/dist/types/use-theme-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A React hook which returns the current themes and color-mode set on `<html>`.
4
4
  *
package/dist/types/utils/color-mode-listeners.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { UnbindFn } from 'bind-event-listener';
2
+ declare class ColorModeObserver {
3
+ unbindThemeChangeListener: UnbindFn | null;
4
+ getColorMode(): "light" | "dark";
5
+ bind(): void;
6
+ unbind(): void;
7
+ }
8
+ /**
9
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
10
+ * that can be unbound by any consumer when no longer needed.
11
+ */
12
+ declare const SingletonColorModeObserver: ColorModeObserver;
13
+ export default SingletonColorModeObserver;
package/dist/types/utils/configure-page.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ThemeState } from '../theme-config';
2
+ /**
3
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
4
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
5
+ */
6
+ export default function configurePage(themeState: ThemeState): () => () => void;
package/dist/types-ts4.5/constants.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare const THEME_DATA_ATTRIBUTE = "data-theme";
2
2
  export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
3
3
  export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
4
+ export declare const DEFAULT_THEME = "light";
4
5
  export declare const CSS_PREFIX = "ds";
5
6
  export declare const CSS_VAR_FULL: string[];
6
7
  export declare const TOKEN_NOT_FOUND_CSS_VAR: string;
package/dist/types-ts4.5/custom-theme.d.ts CHANGED
@@ -14,12 +14,12 @@ export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
14
14
  * @param {string} themeState.colorMode Determines which color theme is applied
15
15
  * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
16
16
  *
17
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
17
+ * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
18
18
  * If an error is encountered while loading themes, the themes array will be empty.
19
19
  */
20
20
  export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
21
21
  UNSAFE_themeOptions: ThemeOptionsSchema;
22
- }): Promise<ThemeStyles[]>;
22
+ }): ThemeStyles[];
23
23
  export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
24
24
  UNSAFE_themeOptions: ThemeOptionsSchema;
25
- }): Promise<void>;
25
+ }): void;
package/dist/types-ts4.5/enable-global-theme.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { UnbindFn } from 'bind-event-listener';
2
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
3
+ /**
4
+ * Synchronously sets the theme globally at runtime. Themes are not loaded;
5
+ * use `getThemeStyles` and other server-side utilities to generate and load them.
6
+ *
7
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
8
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
9
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
10
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
11
+ * @param {string} themeState.shape The shape theme to be applied.
12
+ * @param {string} themeState.spacing The spacing theme to be applied.
13
+ * @param {string} themeState.typography The typography theme to be applied.
14
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
15
+ * @param {function} themeLoader Callback function used to override the default theme loading functionality.
16
+ *
17
+ * @returns An unbind function, that can be used to stop listening for changes to system theme.
18
+ *
19
+ * @example
20
+ * ```
21
+ * enableGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
22
+ * ```
23
+ */
24
+ declare const enableGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined) => UnbindFn;
25
+ export default enableGlobalTheme;
package/dist/types-ts4.5/entry-points/custom-themes.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as UNSAFE_loadCustomThemeStyles } from '../load-custom-theme-styles';
package/dist/types-ts4.5/get-global-theme.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  declare const getGlobalTheme: () => Partial<ActiveThemeState>;
3
3
  export default getGlobalTheme;
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export { default as themeConfig } from './theme-config';
2
2
  export { default as token } from './get-token';
3
3
  export { default as getTokenValue } from './get-token-value';
4
4
  export { default as setGlobalTheme } from './set-global-theme';
5
+ export { default as enableGlobalTheme } from './enable-global-theme';
5
6
  export { default as getThemeStyles } from './get-theme-styles';
6
7
  export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
7
8
  export { default as getSSRAutoScript } from './get-ssr-auto-script';
package/dist/types-ts4.5/load-custom-theme-styles.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ThemeState } from './theme-config';
2
+ /**
3
+ * Synchronously generates and applies custom theme styles to the page.
4
+ *
5
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
6
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
7
+ *
8
+ * @example
9
+ * ```
10
+ * UNSAFE_loadCustomThemeStyles({
11
+ * colorMode: 'auto',
12
+ * UNSAFE_themeOptions: { brandColor: '#FF0000' }
13
+ * });
14
+ * ```
15
+ */
16
+ declare const UNSAFE_loadCustomThemeStyles: ({ colorMode, UNSAFE_themeOptions, }?: Partial<ThemeState>) => void;
17
+ export default UNSAFE_loadCustomThemeStyles;
package/dist/types-ts4.5/set-global-theme.d.ts CHANGED
@@ -1,8 +1,5 @@
1
1
  import { UnbindFn } from 'bind-event-listener';
2
- import { ThemeColorModes, ThemeIdsWithOverrides, ThemeState } from './theme-config';
3
- export interface ActiveThemeState extends ThemeState {
4
- colorMode: Exclude<ThemeColorModes, 'auto'>;
5
- }
2
+ import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
6
3
  /**
7
4
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
8
5
  *
package/dist/types-ts4.5/theme-config.d.ts CHANGED
@@ -130,4 +130,11 @@ export interface ThemeState {
130
130
  * themeStateDefaults: the default values for ThemeState used by theming utilities
131
131
  */
132
132
  export declare const themeStateDefaults: ThemeState;
133
+ /**
134
+ * Represents theme state once mounted to the page
135
+ * (the page doesn't have an "auto" color mode, it's either light or dark)
136
+ */
137
+ export interface ActiveThemeState extends ThemeState {
138
+ colorMode: DataColorModes;
139
+ }
133
140
  export default themeConfig;
package/dist/types-ts4.5/theme-mutation-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
4
  *
package/dist/types-ts4.5/use-theme-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './set-global-theme';
1
+ import { ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A React hook which returns the current themes and color-mode set on `<html>`.
4
4
  *
package/dist/types-ts4.5/utils/color-mode-listeners.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { UnbindFn } from 'bind-event-listener';
2
+ declare class ColorModeObserver {
3
+ unbindThemeChangeListener: UnbindFn | null;
4
+ getColorMode(): "light" | "dark";
5
+ bind(): void;
6
+ unbind(): void;
7
+ }
8
+ /**
9
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
10
+ * that can be unbound by any consumer when no longer needed.
11
+ */
12
+ declare const SingletonColorModeObserver: ColorModeObserver;
13
+ export default SingletonColorModeObserver;
package/dist/types-ts4.5/utils/configure-page.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ThemeState } from '../theme-config';
2
+ /**
3
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
4
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
5
+ */
6
+ export default function configurePage(themeState: ThemeState): () => () => void;