@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/types/set-global-theme.d.ts CHANGED
@@ -1,15 +1,71 @@
1
- import { ThemeIds } from './theme-config';
1
+ import { UnbindFn } from 'bind-event-listener';
2
+ import { ThemeColorModes, ThemeIds } from './theme-config';
3
+ export interface ThemeState {
4
+ light: ThemeIds;
5
+ dark: ThemeIds;
6
+ colorMode: ThemeColorModes;
7
+ spacing?: ThemeIds;
8
+ typography?: ThemeIds;
9
+ }
2
10
  /**
3
- * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
11
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
4
12
  *
5
- * @param {string} themeId - Which theme should be used by default.
6
- * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
13
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
14
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
15
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
16
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
17
+ * @param {string} themeState.spacing The spacing theme to be applied.
18
+ * @param {string} themeState.typography The typography theme to be applied.
19
+ *
20
+ * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
7
21
  *
8
22
  * @example
9
23
  * ```
10
- * // Set light theme as the default theme, but switch to others based on the system color theme.
11
- * setGlobalTheme('light', true);
24
+ * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
12
25
  * ```
13
26
  */
14
- declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
27
+ declare const setGlobalTheme: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<UnbindFn>;
28
+ export interface ThemeStyles {
29
+ id: ThemeIds;
30
+ attrs: Record<string, string>;
31
+ css: string;
32
+ }
33
+ /**
34
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
35
+ * 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.
36
+ *
37
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
38
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
39
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
40
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
41
+ * @param {string} themeState.spacing The spacing theme to be applied.
42
+ * @param {string} themeState.typography The typography theme to be applied.
43
+ *
44
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
45
+ * If an error is encountered while loading themes, the themes arrav will be emptv.
46
+ */
47
+ export declare const getThemeStyles: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
48
+ /**
49
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
50
+ * Note: this utility does not handle automatic theme switching.
51
+ *
52
+ * @param {Object<string, string>} themeOptions - Theme options object
53
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
54
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
55
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
56
+ * @param {string} themeState.spacing The spacing theme to be applied.
57
+ * @param {string} themeState.typography The typography theme to be applied.
58
+ *
59
+ * @returns {Object} Object of HTML attributes to be applied to the document root
60
+ */
61
+ export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
62
+ /**
63
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
64
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
65
+ *
66
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
67
+ *
68
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
69
+ */
70
+ export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
15
71
  export default setGlobalTheme;
package/dist/types/theme-config.d.ts CHANGED
@@ -13,21 +13,24 @@ export declare type ThemeFileNames = Themes;
13
13
  * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
14
14
  * In the future other types may be introduced such as typography.
15
15
  */
16
- export declare type ThemeKinds = 'color' | 'spacing';
16
+ export declare type ThemeKinds = 'color' | 'spacing' | 'typography';
17
17
  /**
18
18
  * Theme modes: The general purpose of a theme.
19
- * This attr is used to apply the appropriate system-preference media selector
19
+ * This attr is used to apply the appropriate system-preference option
20
20
  * It may also be used as a selector for mode-specific overrides such as light/dark images.
21
21
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
22
22
  */
23
- export declare type ThemeColorModes = 'light' | 'dark';
23
+ export declare const themeColorModes: readonly ["light", "dark", "auto"];
24
+ export declare type ThemeColorModes = typeof themeColorModes[number];
25
+ export declare type DataColorModes = Omit<ThemeColorModes, 'auto'>;
24
26
  /**
25
- * Theme ids: The value that will mounted to the DOM as a data attr
26
- * For example: `data-theme="light"
27
+ * Theme ids: The value that will be mounted to the DOM as a data attr
28
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
27
29
  *
28
30
  * These ids must be kebab case
29
31
  */
30
- export declare type ThemeIds = 'light' | 'dark' | 'legacy-light' | 'legacy-dark' | 'spacing' | 'typography';
32
+ export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography"];
33
+ export declare type ThemeIds = typeof themeIds[number];
31
34
  /**
32
35
  * Theme to use a base. This will create the theme as
33
36
  * an extension with all token values marked as optional
@@ -50,7 +53,7 @@ interface ThemeConfig {
50
53
  palette: Palettes;
51
54
  attributes: ({
52
55
  type: 'color';
53
- mode: ThemeColorModes;
56
+ mode: Exclude<ThemeColorModes, 'auto'>;
54
57
  } | {
55
58
  type: 'spacing';
56
59
  } | {
package/dist/types/{theme-change-observer.d.ts → theme-mutation-observer.d.ts} RENAMED
@@ -1,4 +1,4 @@
1
- import { ThemeIds } from './theme-config';
1
+ import { ThemeState } from './set-global-theme';
2
2
  /**
3
3
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
4
  *
@@ -16,21 +16,7 @@ export declare class ThemeMutationObserver {
16
16
  private callback;
17
17
  observer: MutationObserver | null;
18
18
  mediaObserver: any;
19
- constructor(callback: (theme: ThemeIds | null) => unknown);
19
+ constructor(callback: (theme: Partial<ThemeState>) => unknown);
20
20
  observe(): void;
21
21
  disconnect(): void;
22
22
  }
23
- /**
24
- * A React hook which returns the current theme set on `<html>`, or `null` if not set.
25
- *
26
- * @example
27
- * ```
28
- * const theme = useThemeObserver(); // Returns 'light' or 'dark'
29
- *
30
- * // Performing side effects when it changes
31
- * useEffect(() => {
32
- * console.log(`The theme has changed to ${theme}`);
33
- * }, [theme]);
34
- * ```
35
- */
36
- export declare const useThemeObserver: () => ThemeIds | null;
package/dist/types/types.d.ts CHANGED
@@ -696,9 +696,8 @@ export interface ChartColorTokenSchema<BaseToken> {
696
696
  };
697
697
  }
698
698
  export interface UtilTokenSchema<BaseToken> {
699
- UNSAFE_util: {
699
+ UNSAFE: {
700
700
  transparent: RawToken;
701
- MISSING_TOKEN: RawToken;
702
701
  };
703
702
  }
704
703
  export interface SurfaceTokenSchema<BaseToken> {
@@ -742,184 +741,6 @@ export interface OpacityTokenSchema {
742
741
  disabled: OpacityToken;
743
742
  };
744
743
  }
745
- export interface DeprecatedTokenSchema<BaseToken> {
746
- color: {
747
- accent: {
748
- boldBlue: PaintToken<BaseToken>;
749
- boldGreen: PaintToken<BaseToken>;
750
- boldOrange: PaintToken<BaseToken>;
751
- boldPurple: PaintToken<BaseToken>;
752
- boldRed: PaintToken<BaseToken>;
753
- boldTeal: PaintToken<BaseToken>;
754
- subtleBlue: PaintToken<BaseToken>;
755
- subtleRed: PaintToken<BaseToken>;
756
- subtleGreen: PaintToken<BaseToken>;
757
- subtleOrange: PaintToken<BaseToken>;
758
- subtleTeal: PaintToken<BaseToken>;
759
- subtlePurple: PaintToken<BaseToken>;
760
- subtleMagenta: PaintToken<BaseToken>;
761
- };
762
- background: {
763
- accent: {
764
- blue: {
765
- '[default]': PaintToken<BaseToken>;
766
- bold: PaintToken<BaseToken>;
767
- };
768
- red: {
769
- '[default]': PaintToken<BaseToken>;
770
- bold: PaintToken<BaseToken>;
771
- };
772
- orange: {
773
- '[default]': PaintToken<BaseToken>;
774
- bold: PaintToken<BaseToken>;
775
- };
776
- yellow: {
777
- '[default]': PaintToken<BaseToken>;
778
- bold: PaintToken<BaseToken>;
779
- };
780
- green: {
781
- '[default]': PaintToken<BaseToken>;
782
- bold: PaintToken<BaseToken>;
783
- };
784
- teal: {
785
- '[default]': PaintToken<BaseToken>;
786
- bold: PaintToken<BaseToken>;
787
- };
788
- purple: {
789
- '[default]': PaintToken<BaseToken>;
790
- bold: PaintToken<BaseToken>;
791
- };
792
- magenta: {
793
- '[default]': PaintToken<BaseToken>;
794
- bold: PaintToken<BaseToken>;
795
- };
796
- };
797
- default: PaintToken<BaseToken>;
798
- sunken: PaintToken<BaseToken>;
799
- card: PaintToken<BaseToken>;
800
- inverse: {
801
- '[default]': PaintToken<BaseToken>;
802
- };
803
- overlay: PaintToken<BaseToken>;
804
- selected: {
805
- resting: PaintToken<BaseToken>;
806
- hover: PaintToken<BaseToken>;
807
- };
808
- blanket: PaintToken<BaseToken>;
809
- brand: {
810
- '[default]': {
811
- '[default]': PaintToken<BaseToken>;
812
- hovered: PaintToken<BaseToken>;
813
- pressed: PaintToken<BaseToken>;
814
- };
815
- };
816
- boldBrand: {
817
- resting: PaintToken<BaseToken>;
818
- hover: PaintToken<BaseToken>;
819
- pressed: PaintToken<BaseToken>;
820
- };
821
- subtleBrand: {
822
- resting: PaintToken<BaseToken>;
823
- hover: PaintToken<BaseToken>;
824
- pressed: PaintToken<BaseToken>;
825
- };
826
- boldDanger: {
827
- resting: PaintToken<BaseToken>;
828
- hover: PaintToken<BaseToken>;
829
- pressed: PaintToken<BaseToken>;
830
- };
831
- subtleDanger: {
832
- resting: PaintToken<BaseToken>;
833
- hover: PaintToken<BaseToken>;
834
- pressed: PaintToken<BaseToken>;
835
- };
836
- boldWarning: {
837
- resting: PaintToken<BaseToken>;
838
- hover: PaintToken<BaseToken>;
839
- pressed: PaintToken<BaseToken>;
840
- };
841
- subtleWarning: {
842
- resting: PaintToken<BaseToken>;
843
- hover: PaintToken<BaseToken>;
844
- pressed: PaintToken<BaseToken>;
845
- };
846
- boldSuccess: {
847
- resting: PaintToken<BaseToken>;
848
- hover: PaintToken<BaseToken>;
849
- pressed: PaintToken<BaseToken>;
850
- };
851
- subtleSuccess: {
852
- resting: PaintToken<BaseToken>;
853
- hover: PaintToken<BaseToken>;
854
- pressed: PaintToken<BaseToken>;
855
- };
856
- boldDiscovery: {
857
- resting: PaintToken<BaseToken>;
858
- hover: PaintToken<BaseToken>;
859
- pressed: PaintToken<BaseToken>;
860
- };
861
- subtleDiscovery: {
862
- resting: PaintToken<BaseToken>;
863
- hover: PaintToken<BaseToken>;
864
- pressed: PaintToken<BaseToken>;
865
- };
866
- boldNeutral: {
867
- resting: PaintToken<BaseToken>;
868
- hover: PaintToken<BaseToken>;
869
- pressed: PaintToken<BaseToken>;
870
- };
871
- transparentNeutral: {
872
- hover: PaintToken<BaseToken>;
873
- pressed: PaintToken<BaseToken>;
874
- };
875
- subtleNeutral: {
876
- resting: PaintToken<BaseToken>;
877
- hover: PaintToken<BaseToken>;
878
- pressed: PaintToken<BaseToken>;
879
- };
880
- subtleBorderedNeutral: {
881
- resting: PaintToken<BaseToken>;
882
- pressed: PaintToken<BaseToken>;
883
- };
884
- };
885
- border: {
886
- focus: PaintToken<BaseToken>;
887
- neutral: PaintToken<BaseToken>;
888
- };
889
- iconBorder: {
890
- brand: PaintToken<BaseToken>;
891
- danger: PaintToken<BaseToken>;
892
- warning: PaintToken<BaseToken>;
893
- success: PaintToken<BaseToken>;
894
- discovery: PaintToken<BaseToken>;
895
- };
896
- text: {
897
- highEmphasis: PaintToken<BaseToken>;
898
- mediumEmphasis: PaintToken<BaseToken>;
899
- lowEmphasis: PaintToken<BaseToken>;
900
- onBold: PaintToken<BaseToken>;
901
- onBoldWarning: PaintToken<BaseToken>;
902
- link: {
903
- resting: PaintToken<BaseToken>;
904
- pressed: PaintToken<BaseToken>;
905
- };
906
- };
907
- overlay: {
908
- pressed: PaintToken<BaseToken>;
909
- hover: PaintToken<BaseToken>;
910
- };
911
- interaction: {
912
- inverse: {
913
- hovered: PaintToken<BaseToken>;
914
- pressed: PaintToken<BaseToken>;
915
- };
916
- };
917
- };
918
- shadow: {
919
- card: ShadowToken<BaseToken>;
920
- overlay: ShadowToken<BaseToken>;
921
- };
922
- }
923
744
  export declare type ElevationTokenSchema<BaseToken> = SurfaceTokenSchema<BaseToken> & ShadowTokenSchema<BaseToken>;
924
745
  export declare type ColorTokenSchema<BaseToken> = BackgroundColorTokenSchema<BaseToken> & BorderColorTokenSchema<BaseToken> & IconColorTokenSchema<BaseToken> & TextColorTokenSchema<BaseToken> & AccentColorTokenSchema<BaseToken> & UtilTokenSchema<BaseToken>;
925
746
  export declare type TokenSchema<BaseToken> = ColorTokenSchema<BaseToken> & ElevationTokenSchema<BaseToken>;
package/dist/types/use-theme-observer.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { ThemeState } from './set-global-theme';
2
+ /**
3
+ * A React hook which returns the current themes and color-mode set on `<html>`.
4
+ *
5
+ * @example
6
+ * ```
7
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
8
+ *
9
+ * // Performing side effects when it changes
10
+ * useEffect(() => {
11
+ * console.log(`The color mode has changed to ${theme.colorMode}`);
12
+ * }, [theme.colorMode]);
13
+ * ```
14
+ */
15
+ export declare const useThemeObserver: () => Partial<ThemeState>;
package/dist/types/utils/theme-loading.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ThemeIds } from '../theme-config';
2
+ export declare const loadAndAppendThemeCss: (themeId: ThemeIds) => Promise<void>;
3
+ export declare const loadThemeCss: (themeId: ThemeIds) => Promise<string>;
package/dist/types/utils/theme-state-transformer.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import type { ThemeState } from '../set-global-theme';
2
+ /**
3
+ * Converts a string that is formatted for the `data-theme` HTML attribute
4
+ * to an object that can be passed to `setGlobalTheme`.
5
+ *
6
+ * @param {string} themes The themes that should be applied.
7
+ *
8
+ * @example
9
+ * ```
10
+ * themeStringToObject('dark:dark light:legacy-light spacing:spacing');
11
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
12
+ * ```
13
+ */
14
+ export declare const themeStringToObject: (themeState: string) => Partial<ThemeState>;
15
+ /**
16
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
17
+ *
18
+ * @param {object} themes The themes that should be applied.
19
+ *
20
+ * @example
21
+ * ```
22
+ * themeObjectToString({ dark: 'dark', light: 'legacy-light', spacing: 'spacing' });
23
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
24
+ * ```
25
+ */
26
+ export declare const themeObjectToString: (themeState: Partial<ThemeState>) => string;
package/figma/atlassian-dark.json CHANGED
@@ -2628,106 +2628,5 @@
2628
2628
  ]
2629
2629
  }
2630
2630
  },
2631
- "renameMap": {
2632
- "Dark/color.text.highEmphasis": "Dark/color.text",
2633
- "Dark/color.text.link.pressed": "Dark/color.link.pressed",
2634
- "Dark/color.text.link.resting": "Dark/color.link",
2635
- "Dark/color.text.lowEmphasis": "Dark/color.text.subtlest",
2636
- "Dark/color.text.mediumEmphasis": "Dark/color.text.subtle",
2637
- "Dark/color.text.onBold": "Dark/color.text.inverse",
2638
- "Dark/color.text.onBoldWarning": "Dark/color.text.warning.inverse",
2639
- "Dark/color.border.focus": "Dark/color.border.focused",
2640
- "Dark/color.border.neutral": "Dark/color.border",
2641
- "Dark/color.background.accent.blue": "Dark/color.background.accent.blue.subtler",
2642
- "Dark/color.background.accent.blue.bold": "Dark/color.background.accent.blue.subtle",
2643
- "Dark/color.background.accent.red": "Dark/color.background.accent.red.subtler",
2644
- "Dark/color.background.accent.red.bold": "Dark/color.background.accent.red.subtle",
2645
- "Dark/color.background.accent.orange": "Dark/color.background.accent.orange.subtler",
2646
- "Dark/color.background.accent.orange.bold": "Dark/color.background.accent.orange.subtle",
2647
- "Dark/color.background.accent.yellow": "Dark/color.background.accent.yellow.subtler",
2648
- "Dark/color.background.accent.yellow.bold": "Dark/color.background.accent.yellow.subtle",
2649
- "Dark/color.background.accent.green": "Dark/color.background.accent.green.subtler",
2650
- "Dark/color.background.accent.green.bold": "Dark/color.background.accent.green.subtle",
2651
- "Dark/color.background.accent.teal": "Dark/color.background.accent.teal.subtler",
2652
- "Dark/color.background.accent.teal.bold": "Dark/color.background.accent.teal.subtle",
2653
- "Dark/color.background.accent.purple": "Dark/color.background.accent.purple.subtler",
2654
- "Dark/color.background.accent.purple.bold": "Dark/color.background.accent.purple.subtle",
2655
- "Dark/color.background.accent.magenta": "Dark/color.background.accent.magenta.subtler",
2656
- "Dark/color.background.accent.magenta.bold": "Dark/color.background.accent.magenta.subtle",
2657
- "Dark/color.background.inverse": "Dark/color.background.inverse.subtle",
2658
- "Dark/color.background.brand": "Dark/color.background.selected",
2659
- "Dark/color.background.brand.hovered": "Dark/color.background.selected.hovered",
2660
- "Dark/color.background.brand.pressed": "Dark/color.background.selected.pressed",
2661
- "Dark/color.background.selected.resting": "Dark/color.background.selected",
2662
- "Dark/color.background.selected.hover": "Dark/color.background.selected.hovered",
2663
- "Dark/color.background.blanket": "Dark/color.blanket",
2664
- "Dark/color.background.boldBrand.hover": "Dark/color.background.brand.bold.hovered",
2665
- "Dark/color.background.boldBrand.pressed": "Dark/color.background.brand.bold.pressed",
2666
- "Dark/color.background.boldBrand.resting": "Dark/color.background.brand.bold",
2667
- "Dark/color.background.boldDanger.hover": "Dark/color.background.danger.bold.hovered",
2668
- "Dark/color.background.boldDanger.pressed": "Dark/color.background.danger.bold.pressed",
2669
- "Dark/color.background.boldDanger.resting": "Dark/color.background.danger.bold",
2670
- "Dark/color.background.boldDiscovery.hover": "Dark/color.background.discovery.bold.hovered",
2671
- "Dark/color.background.boldDiscovery.pressed": "Dark/color.background.discovery.bold.pressed",
2672
- "Dark/color.background.boldDiscovery.resting": "Dark/color.background.discovery.bold",
2673
- "Dark/color.background.boldNeutral.hover": "Dark/color.background.neutral.bold.hovered",
2674
- "Dark/color.background.boldNeutral.pressed": "Dark/color.background.neutral.bold.pressed",
2675
- "Dark/color.background.boldNeutral.resting": "Dark/color.background.neutral.bold",
2676
- "Dark/color.background.boldSuccess.hover": "Dark/color.background.success.bold.hovered",
2677
- "Dark/color.background.boldSuccess.pressed": "Dark/color.background.success.bold.pressed",
2678
- "Dark/color.background.boldSuccess.resting": "Dark/color.background.success.bold",
2679
- "Dark/color.background.boldWarning.hover": "Dark/color.background.warning.bold.hovered",
2680
- "Dark/color.background.boldWarning.pressed": "Dark/color.background.warning.bold.pressed",
2681
- "Dark/color.background.boldWarning.resting": "Dark/color.background.warning.bold",
2682
- "Dark/color.background.card": "Dark/elevation.surface.raised",
2683
- "Dark/color.background.default": "Dark/elevation.surface",
2684
- "Dark/color.background.overlay": "Dark/elevation.surface.overlay",
2685
- "Dark/color.background.subtleBorderedNeutral.pressed": "Dark/color.background.input.pressed",
2686
- "Dark/color.background.subtleBorderedNeutral.resting": "Dark/color.background.input",
2687
- "Dark/color.background.subtleBrand.hover": "Dark/color.background.selected.hovered",
2688
- "Dark/color.background.subtleBrand.pressed": "Dark/color.background.selected.pressed",
2689
- "Dark/color.background.subtleBrand.resting": "Dark/color.background.selected",
2690
- "Dark/color.background.subtleDanger.hover": "Dark/color.background.danger.hovered",
2691
- "Dark/color.background.subtleDanger.pressed": "Dark/color.background.danger.pressed",
2692
- "Dark/color.background.subtleDanger.resting": "Dark/color.background.danger",
2693
- "Dark/color.background.subtleDiscovery.hover": "Dark/color.background.discovery.hovered",
2694
- "Dark/color.background.subtleDiscovery.pressed": "Dark/color.background.discovery.pressed",
2695
- "Dark/color.background.subtleDiscovery.resting": "Dark/color.background.discovery",
2696
- "Dark/color.background.subtleNeutral.hover": "Dark/color.background.neutral.hovered",
2697
- "Dark/color.background.subtleNeutral.pressed": "Dark/color.background.neutral.pressed",
2698
- "Dark/color.background.subtleNeutral.resting": "Dark/color.background.neutral",
2699
- "Dark/color.background.subtleSuccess.hover": "Dark/color.background.success.hovered",
2700
- "Dark/color.background.subtleSuccess.pressed": "Dark/color.background.success.pressed",
2701
- "Dark/color.background.subtleSuccess.resting": "Dark/color.background.success",
2702
- "Dark/color.background.subtleWarning.hover": "Dark/color.background.warning.hovered",
2703
- "Dark/color.background.subtleWarning.pressed": "Dark/color.background.warning.pressed",
2704
- "Dark/color.background.subtleWarning.resting": "Dark/color.background.warning",
2705
- "Dark/color.background.sunken": "Dark/elevation.surface.sunken",
2706
- "Dark/color.background.transparentNeutral.hover": "Dark/color.background.neutral.subtle.hovered",
2707
- "Dark/color.background.transparentNeutral.pressed": "Dark/color.background.neutral.subtle.pressed",
2708
- "Dark/color.interaction.inverse.hovered": "Dark/color.background.inverse.subtle.hovered",
2709
- "Dark/color.interaction.inverse.pressed": "Dark/color.background.inverse.subtle.pressed",
2710
- "Dark/color.accent.boldBlue": "Dark/color.background.accent.blue.bolder",
2711
- "Dark/color.accent.boldGreen": "Dark/color.background.accent.green.bolder",
2712
- "Dark/color.accent.boldOrange": "Dark/color.background.accent.orange.bolder",
2713
- "Dark/color.accent.boldPurple": "Dark/color.background.accent.purple.bolder",
2714
- "Dark/color.accent.boldRed": "Dark/color.background.accent.red.bolder",
2715
- "Dark/color.accent.boldTeal": "Dark/color.background.accent.teal.bolder",
2716
- "Dark/color.accent.subtleBlue": "Dark/color.background.accent.blue.subtler",
2717
- "Dark/color.accent.subtleGreen": "Dark/color.background.accent.green.subtler",
2718
- "Dark/color.accent.subtleMagenta": "Dark/color.background.accent.magenta.subtler",
2719
- "Dark/color.accent.subtleOrange": "Dark/color.background.accent.orange.subtler",
2720
- "Dark/color.accent.subtlePurple": "Dark/color.background.accent.purple.subtler",
2721
- "Dark/color.accent.subtleRed": "Dark/color.background.accent.red.subtler",
2722
- "Dark/color.accent.subtleTeal": "Dark/color.background.accent.teal.subtler",
2723
- "Dark/color.iconBorder.brand": "Dark/color.icon.brand",
2724
- "Dark/color.iconBorder.danger": "Dark/color.icon.danger",
2725
- "Dark/color.iconBorder.discovery": "Dark/color.icon.discovery",
2726
- "Dark/color.iconBorder.success": "Dark/color.icon.success",
2727
- "Dark/color.iconBorder.warning": "Dark/color.icon.warning",
2728
- "Dark/color.overlay.hover": "Dark/color.interaction.hovered",
2729
- "Dark/color.overlay.pressed": "Dark/color.interaction.pressed",
2730
- "Dark/shadow.card": "Dark/elevation.shadow.raised",
2731
- "Dark/shadow.overlay": "Dark/elevation.shadow.overlay"
2732
- }
2631
+ "renameMap": {}
2733
2632
  }
package/figma/atlassian-legacy-dark.json CHANGED
@@ -2628,106 +2628,5 @@
2628
2628
  ]
2629
2629
  }
2630
2630
  },
2631
- "renameMap": {
2632
- "Legacy dark/color.text.highEmphasis": "Legacy dark/color.text",
2633
- "Legacy dark/color.text.link.pressed": "Legacy dark/color.link.pressed",
2634
- "Legacy dark/color.text.link.resting": "Legacy dark/color.link",
2635
- "Legacy dark/color.text.lowEmphasis": "Legacy dark/color.text.subtlest",
2636
- "Legacy dark/color.text.mediumEmphasis": "Legacy dark/color.text.subtle",
2637
- "Legacy dark/color.text.onBold": "Legacy dark/color.text.inverse",
2638
- "Legacy dark/color.text.onBoldWarning": "Legacy dark/color.text.warning.inverse",
2639
- "Legacy dark/color.border.focus": "Legacy dark/color.border.focused",
2640
- "Legacy dark/color.border.neutral": "Legacy dark/color.border",
2641
- "Legacy dark/color.background.accent.blue": "Legacy dark/color.background.accent.blue.subtler",
2642
- "Legacy dark/color.background.accent.blue.bold": "Legacy dark/color.background.accent.blue.subtle",
2643
- "Legacy dark/color.background.accent.red": "Legacy dark/color.background.accent.red.subtler",
2644
- "Legacy dark/color.background.accent.red.bold": "Legacy dark/color.background.accent.red.subtle",
2645
- "Legacy dark/color.background.accent.orange": "Legacy dark/color.background.accent.orange.subtler",
2646
- "Legacy dark/color.background.accent.orange.bold": "Legacy dark/color.background.accent.orange.subtle",
2647
- "Legacy dark/color.background.accent.yellow": "Legacy dark/color.background.accent.yellow.subtler",
2648
- "Legacy dark/color.background.accent.yellow.bold": "Legacy dark/color.background.accent.yellow.subtle",
2649
- "Legacy dark/color.background.accent.green": "Legacy dark/color.background.accent.green.subtler",
2650
- "Legacy dark/color.background.accent.green.bold": "Legacy dark/color.background.accent.green.subtle",
2651
- "Legacy dark/color.background.accent.teal": "Legacy dark/color.background.accent.teal.subtler",
2652
- "Legacy dark/color.background.accent.teal.bold": "Legacy dark/color.background.accent.teal.subtle",
2653
- "Legacy dark/color.background.accent.purple": "Legacy dark/color.background.accent.purple.subtler",
2654
- "Legacy dark/color.background.accent.purple.bold": "Legacy dark/color.background.accent.purple.subtle",
2655
- "Legacy dark/color.background.accent.magenta": "Legacy dark/color.background.accent.magenta.subtler",
2656
- "Legacy dark/color.background.accent.magenta.bold": "Legacy dark/color.background.accent.magenta.subtle",
2657
- "Legacy dark/color.background.inverse": "Legacy dark/color.background.inverse.subtle",
2658
- "Legacy dark/color.background.brand": "Legacy dark/color.background.selected",
2659
- "Legacy dark/color.background.brand.hovered": "Legacy dark/color.background.selected.hovered",
2660
- "Legacy dark/color.background.brand.pressed": "Legacy dark/color.background.selected.pressed",
2661
- "Legacy dark/color.background.selected.resting": "Legacy dark/color.background.selected",
2662
- "Legacy dark/color.background.selected.hover": "Legacy dark/color.background.selected.hovered",
2663
- "Legacy dark/color.background.blanket": "Legacy dark/color.blanket",
2664
- "Legacy dark/color.background.boldBrand.hover": "Legacy dark/color.background.brand.bold.hovered",
2665
- "Legacy dark/color.background.boldBrand.pressed": "Legacy dark/color.background.brand.bold.pressed",
2666
- "Legacy dark/color.background.boldBrand.resting": "Legacy dark/color.background.brand.bold",
2667
- "Legacy dark/color.background.boldDanger.hover": "Legacy dark/color.background.danger.bold.hovered",
2668
- "Legacy dark/color.background.boldDanger.pressed": "Legacy dark/color.background.danger.bold.pressed",
2669
- "Legacy dark/color.background.boldDanger.resting": "Legacy dark/color.background.danger.bold",
2670
- "Legacy dark/color.background.boldDiscovery.hover": "Legacy dark/color.background.discovery.bold.hovered",
2671
- "Legacy dark/color.background.boldDiscovery.pressed": "Legacy dark/color.background.discovery.bold.pressed",
2672
- "Legacy dark/color.background.boldDiscovery.resting": "Legacy dark/color.background.discovery.bold",
2673
- "Legacy dark/color.background.boldNeutral.hover": "Legacy dark/color.background.neutral.bold.hovered",
2674
- "Legacy dark/color.background.boldNeutral.pressed": "Legacy dark/color.background.neutral.bold.pressed",
2675
- "Legacy dark/color.background.boldNeutral.resting": "Legacy dark/color.background.neutral.bold",
2676
- "Legacy dark/color.background.boldSuccess.hover": "Legacy dark/color.background.success.bold.hovered",
2677
- "Legacy dark/color.background.boldSuccess.pressed": "Legacy dark/color.background.success.bold.pressed",
2678
- "Legacy dark/color.background.boldSuccess.resting": "Legacy dark/color.background.success.bold",
2679
- "Legacy dark/color.background.boldWarning.hover": "Legacy dark/color.background.warning.bold.hovered",
2680
- "Legacy dark/color.background.boldWarning.pressed": "Legacy dark/color.background.warning.bold.pressed",
2681
- "Legacy dark/color.background.boldWarning.resting": "Legacy dark/color.background.warning.bold",
2682
- "Legacy dark/color.background.card": "Legacy dark/elevation.surface.raised",
2683
- "Legacy dark/color.background.default": "Legacy dark/elevation.surface",
2684
- "Legacy dark/color.background.overlay": "Legacy dark/elevation.surface.overlay",
2685
- "Legacy dark/color.background.subtleBorderedNeutral.pressed": "Legacy dark/color.background.input.pressed",
2686
- "Legacy dark/color.background.subtleBorderedNeutral.resting": "Legacy dark/color.background.input",
2687
- "Legacy dark/color.background.subtleBrand.hover": "Legacy dark/color.background.selected.hovered",
2688
- "Legacy dark/color.background.subtleBrand.pressed": "Legacy dark/color.background.selected.pressed",
2689
- "Legacy dark/color.background.subtleBrand.resting": "Legacy dark/color.background.selected",
2690
- "Legacy dark/color.background.subtleDanger.hover": "Legacy dark/color.background.danger.hovered",
2691
- "Legacy dark/color.background.subtleDanger.pressed": "Legacy dark/color.background.danger.pressed",
2692
- "Legacy dark/color.background.subtleDanger.resting": "Legacy dark/color.background.danger",
2693
- "Legacy dark/color.background.subtleDiscovery.hover": "Legacy dark/color.background.discovery.hovered",
2694
- "Legacy dark/color.background.subtleDiscovery.pressed": "Legacy dark/color.background.discovery.pressed",
2695
- "Legacy dark/color.background.subtleDiscovery.resting": "Legacy dark/color.background.discovery",
2696
- "Legacy dark/color.background.subtleNeutral.hover": "Legacy dark/color.background.neutral.hovered",
2697
- "Legacy dark/color.background.subtleNeutral.pressed": "Legacy dark/color.background.neutral.pressed",
2698
- "Legacy dark/color.background.subtleNeutral.resting": "Legacy dark/color.background.neutral",
2699
- "Legacy dark/color.background.subtleSuccess.hover": "Legacy dark/color.background.success.hovered",
2700
- "Legacy dark/color.background.subtleSuccess.pressed": "Legacy dark/color.background.success.pressed",
2701
- "Legacy dark/color.background.subtleSuccess.resting": "Legacy dark/color.background.success",
2702
- "Legacy dark/color.background.subtleWarning.hover": "Legacy dark/color.background.warning.hovered",
2703
- "Legacy dark/color.background.subtleWarning.pressed": "Legacy dark/color.background.warning.pressed",
2704
- "Legacy dark/color.background.subtleWarning.resting": "Legacy dark/color.background.warning",
2705
- "Legacy dark/color.background.sunken": "Legacy dark/elevation.surface.sunken",
2706
- "Legacy dark/color.background.transparentNeutral.hover": "Legacy dark/color.background.neutral.subtle.hovered",
2707
- "Legacy dark/color.background.transparentNeutral.pressed": "Legacy dark/color.background.neutral.subtle.pressed",
2708
- "Legacy dark/color.interaction.inverse.hovered": "Legacy dark/color.background.inverse.subtle.hovered",
2709
- "Legacy dark/color.interaction.inverse.pressed": "Legacy dark/color.background.inverse.subtle.pressed",
2710
- "Legacy dark/color.accent.boldBlue": "Legacy dark/color.background.accent.blue.bolder",
2711
- "Legacy dark/color.accent.boldGreen": "Legacy dark/color.background.accent.green.bolder",
2712
- "Legacy dark/color.accent.boldOrange": "Legacy dark/color.background.accent.orange.bolder",
2713
- "Legacy dark/color.accent.boldPurple": "Legacy dark/color.background.accent.purple.bolder",
2714
- "Legacy dark/color.accent.boldRed": "Legacy dark/color.background.accent.red.bolder",
2715
- "Legacy dark/color.accent.boldTeal": "Legacy dark/color.background.accent.teal.bolder",
2716
- "Legacy dark/color.accent.subtleBlue": "Legacy dark/color.background.accent.blue.subtler",
2717
- "Legacy dark/color.accent.subtleGreen": "Legacy dark/color.background.accent.green.subtler",
2718
- "Legacy dark/color.accent.subtleMagenta": "Legacy dark/color.background.accent.magenta.subtler",
2719
- "Legacy dark/color.accent.subtleOrange": "Legacy dark/color.background.accent.orange.subtler",
2720
- "Legacy dark/color.accent.subtlePurple": "Legacy dark/color.background.accent.purple.subtler",
2721
- "Legacy dark/color.accent.subtleRed": "Legacy dark/color.background.accent.red.subtler",
2722
- "Legacy dark/color.accent.subtleTeal": "Legacy dark/color.background.accent.teal.subtler",
2723
- "Legacy dark/color.iconBorder.brand": "Legacy dark/color.icon.brand",
2724
- "Legacy dark/color.iconBorder.danger": "Legacy dark/color.icon.danger",
2725
- "Legacy dark/color.iconBorder.discovery": "Legacy dark/color.icon.discovery",
2726
- "Legacy dark/color.iconBorder.success": "Legacy dark/color.icon.success",
2727
- "Legacy dark/color.iconBorder.warning": "Legacy dark/color.icon.warning",
2728
- "Legacy dark/color.overlay.hover": "Legacy dark/color.interaction.hovered",
2729
- "Legacy dark/color.overlay.pressed": "Legacy dark/color.interaction.pressed",
2730
- "Legacy dark/shadow.card": "Legacy dark/elevation.shadow.raised",
2731
- "Legacy dark/shadow.overlay": "Legacy dark/elevation.shadow.overlay"
2732
- }
2631
+ "renameMap": {}
2733
2632
  }