@atlaskit/tokens 1.22.0 → 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 (73) hide show
  1. package/CHANGELOG.md +15 -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-theme-html-attrs.js +3 -5
  8. package/dist/cjs/get-token-value.js +1 -1
  9. package/dist/cjs/get-token.js +1 -1
  10. package/dist/cjs/index.js +7 -0
  11. package/dist/cjs/load-custom-theme-styles.js +45 -0
  12. package/dist/cjs/set-global-theme.js +50 -94
  13. package/dist/cjs/theme-config.js +6 -1
  14. package/dist/cjs/utils/color-mode-listeners.js +66 -0
  15. package/dist/cjs/utils/configure-page.js +34 -0
  16. package/dist/cjs/utils/get-theme-preferences.js +0 -5
  17. package/dist/es2019/constants.js +1 -0
  18. package/dist/es2019/custom-theme.js +4 -4
  19. package/dist/es2019/enable-global-theme.js +53 -0
  20. package/dist/es2019/entry-points/custom-themes.js +1 -0
  21. package/dist/es2019/get-theme-html-attrs.js +3 -5
  22. package/dist/es2019/get-token-value.js +1 -1
  23. package/dist/es2019/get-token.js +1 -1
  24. package/dist/es2019/index.js +1 -0
  25. package/dist/es2019/load-custom-theme-styles.js +37 -0
  26. package/dist/es2019/set-global-theme.js +34 -65
  27. package/dist/es2019/theme-config.js +7 -1
  28. package/dist/es2019/utils/color-mode-listeners.js +48 -0
  29. package/dist/es2019/utils/configure-page.js +22 -0
  30. package/dist/es2019/utils/get-theme-preferences.js +0 -5
  31. package/dist/esm/constants.js +1 -0
  32. package/dist/esm/custom-theme.js +45 -78
  33. package/dist/esm/enable-global-theme.js +63 -0
  34. package/dist/esm/entry-points/custom-themes.js +1 -0
  35. package/dist/esm/get-theme-html-attrs.js +3 -5
  36. package/dist/esm/get-token-value.js +1 -1
  37. package/dist/esm/get-token.js +1 -1
  38. package/dist/esm/index.js +1 -0
  39. package/dist/esm/load-custom-theme-styles.js +39 -0
  40. package/dist/esm/set-global-theme.js +49 -93
  41. package/dist/esm/theme-config.js +7 -1
  42. package/dist/esm/utils/color-mode-listeners.js +58 -0
  43. package/dist/esm/utils/configure-page.js +28 -0
  44. package/dist/esm/utils/get-theme-preferences.js +0 -5
  45. package/dist/types/constants.d.ts +1 -0
  46. package/dist/types/custom-theme.d.ts +3 -3
  47. package/dist/types/enable-global-theme.d.ts +25 -0
  48. package/dist/types/entry-points/custom-themes.d.ts +1 -0
  49. package/dist/types/get-global-theme.d.ts +1 -1
  50. package/dist/types/index.d.ts +1 -0
  51. package/dist/types/load-custom-theme-styles.d.ts +17 -0
  52. package/dist/types/set-global-theme.d.ts +1 -4
  53. package/dist/types/theme-config.d.ts +8 -1
  54. package/dist/types/theme-mutation-observer.d.ts +1 -1
  55. package/dist/types/use-theme-observer.d.ts +1 -1
  56. package/dist/types/utils/color-mode-listeners.d.ts +13 -0
  57. package/dist/types/utils/configure-page.d.ts +6 -0
  58. package/dist/types-ts4.5/constants.d.ts +1 -0
  59. package/dist/types-ts4.5/custom-theme.d.ts +3 -3
  60. package/dist/types-ts4.5/enable-global-theme.d.ts +25 -0
  61. package/dist/types-ts4.5/entry-points/custom-themes.d.ts +1 -0
  62. package/dist/types-ts4.5/get-global-theme.d.ts +1 -1
  63. package/dist/types-ts4.5/index.d.ts +1 -0
  64. package/dist/types-ts4.5/load-custom-theme-styles.d.ts +17 -0
  65. package/dist/types-ts4.5/set-global-theme.d.ts +1 -4
  66. package/dist/types-ts4.5/theme-config.d.ts +8 -1
  67. package/dist/types-ts4.5/theme-mutation-observer.d.ts +1 -1
  68. package/dist/types-ts4.5/use-theme-observer.d.ts +1 -1
  69. package/dist/types-ts4.5/utils/color-mode-listeners.d.ts +13 -0
  70. package/dist/types-ts4.5/utils/configure-page.d.ts +6 -0
  71. package/package.json +2 -1
  72. package/report.api.md +17 -3
  73. package/tmp/api-report-tmp.d.ts +6 -3
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
@@ -93,7 +93,7 @@ export interface ThemeState {
93
93
  dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
94
94
  colorMode: ThemeColorModes;
95
95
  shape?: Extract<ThemeIds, 'shape'>;
96
- spacing?: Extract<ThemeIds, 'spacing'>;
96
+ spacing: Extract<ThemeIds, 'spacing'>;
97
97
  typography?: Extract<ThemeIds, 'typography' | 'typography-adg3' | 'typography-minor3'>;
98
98
  UNSAFE_themeOptions?: ThemeOptionsSchema;
99
99
  }
@@ -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
@@ -122,7 +122,7 @@ export interface ThemeState {
122
122
  dark: Extract<ThemeIds, 'light' | 'dark' | 'legacy-dark' | 'legacy-light'>;
123
123
  colorMode: ThemeColorModes;
124
124
  shape?: Extract<ThemeIds, 'shape'>;
125
- spacing?: Extract<ThemeIds, 'spacing'>;
125
+ spacing: Extract<ThemeIds, 'spacing'>;
126
126
  typography?: Extract<ThemeIds, 'typography' | 'typography-adg3' | 'typography-minor3'>;
127
127
  UNSAFE_themeOptions?: ThemeOptionsSchema;
128
128
  }
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.22.0",
3
+ "version": "1.23.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -97,6 +97,7 @@
97
97
  },
98
98
  "af:exports": {
99
99
  ".": "./src/index.tsx",
100
+ "./custom-themes": "./src/entry-points/custom-themes.tsx",
100
101
  "./figma/atlassian-light.json": "./figma/atlassian-light.json",
101
102
  "./figma/atlassian-dark.json": "./figma/atlassian-dark.json",
102
103
  "./palettes-raw": "./src/entry-points/palettes-raw.tsx",
package/report.api.md CHANGED
@@ -17,10 +17,10 @@
17
17
  ```ts
18
18
  import { UnbindFn } from 'bind-event-listener';
19
19
 
20
- // @public (undocumented)
20
+ // @public
21
21
  interface ActiveThemeState extends ThemeState {
22
22
  // (undocumented)
23
- colorMode: Exclude<ThemeColorModes, 'auto'>;
23
+ colorMode: DataColorModes;
24
24
  }
25
25
 
26
26
  // @public
@@ -1224,6 +1224,20 @@ interface DesignToken<TValue, Group extends Groups>
1224
1224
  };
1225
1225
  }
1226
1226
 
1227
+ // @public
1228
+ export const enableGlobalTheme: (
1229
+ {
1230
+ colorMode,
1231
+ dark,
1232
+ light,
1233
+ shape,
1234
+ spacing,
1235
+ typography,
1236
+ UNSAFE_themeOptions,
1237
+ }?: Partial<ThemeState>,
1238
+ themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined,
1239
+ ) => UnbindFn;
1240
+
1227
1241
  // @public (undocumented)
1228
1242
  type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
1229
1243
 
@@ -1951,7 +1965,7 @@ export interface ThemeState {
1951
1965
  // (undocumented)
1952
1966
  shape?: Extract<ThemeIds, 'shape'>;
1953
1967
  // (undocumented)
1954
- spacing?: Extract<ThemeIds, 'spacing'>;
1968
+ spacing: Extract<ThemeIds, 'spacing'>;
1955
1969
  // (undocumented)
1956
1970
  typography?: Extract<
1957
1971
  ThemeIds,
package/tmp/api-report-tmp.d.ts CHANGED
@@ -6,10 +6,10 @@
6
6
 
7
7
  import { UnbindFn } from 'bind-event-listener';
8
8
 
9
- // @public (undocumented)
9
+ // @public
10
10
  interface ActiveThemeState extends ThemeState {
11
11
  // (undocumented)
12
- colorMode: Exclude<ThemeColorModes, 'auto'>;
12
+ colorMode: DataColorModes;
13
13
  }
14
14
 
15
15
  // @public
@@ -758,6 +758,9 @@ interface DesignToken<TValue, Group extends Groups> extends Token<TValue, Group>
758
758
  };
759
759
  }
760
760
 
761
+ // @public
762
+ export const enableGlobalTheme: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>, themeLoader?: ((id: ThemeIdsWithOverrides) => void) | undefined) => UnbindFn;
763
+
761
764
  // @public (undocumented)
762
765
  type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
763
766
 
@@ -946,7 +949,7 @@ export interface ThemeState {
946
949
  // (undocumented)
947
950
  shape?: Extract<ThemeIds, 'shape'>;
948
951
  // (undocumented)
949
- spacing?: Extract<ThemeIds, 'spacing'>;
952
+ spacing: Extract<ThemeIds, 'spacing'>;
950
953
  // (undocumented)
951
954
  typography?: Extract<ThemeIds, 'typography' | 'typography-adg3' | 'typography-minor3'>;
952
955
  // (undocumented)