@atlaskit/tokens 0.10.27 → 0.10.29

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 (84) hide show
  1. package/CHANGELOG.md +67 -0
  2. package/css/atlassian-dark.css +298 -2
  3. package/css/atlassian-legacy-dark.css +298 -2
  4. package/css/atlassian-legacy-light.css +298 -2
  5. package/css/atlassian-light.css +298 -2
  6. package/css/atlassian-spacing.css +3 -3
  7. package/dist/cjs/artifacts/palettes-raw/spacing-scale.js +3 -3
  8. package/dist/cjs/artifacts/rename-mapping/atlassian-spacing.js +1 -49
  9. package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js +26 -50
  10. package/dist/cjs/artifacts/typescript/atlassian-spacing-token-default-values.js +2 -2
  11. package/dist/cjs/constants.js +4 -13
  12. package/dist/cjs/entry-points/spacing-raw.js +15 -0
  13. package/dist/cjs/get-token.js +1 -1
  14. package/dist/cjs/index.js +8 -0
  15. package/dist/cjs/palettes/spacing-scale.js +1 -1
  16. package/dist/cjs/set-global-theme.js +30 -4
  17. package/dist/cjs/theme-change-observer.js +3 -2
  18. package/dist/cjs/theme-config.js +95 -0
  19. package/dist/cjs/tokens/default/spacing/spacing.js +12 -24
  20. package/dist/cjs/version.json +1 -1
  21. package/dist/es2019/artifacts/palettes-raw/spacing-scale.js +3 -3
  22. package/dist/es2019/artifacts/rename-mapping/atlassian-spacing.js +1 -49
  23. package/dist/es2019/artifacts/tokens-raw/atlassian-spacing.js +26 -50
  24. package/dist/es2019/artifacts/typescript/atlassian-spacing-token-default-values.js +2 -2
  25. package/dist/es2019/artifacts/typescript/atlassian-spacing-types-internal.js +0 -6
  26. package/dist/es2019/artifacts/typescript/atlassian-spacing-types.js +0 -6
  27. package/dist/es2019/constants.js +2 -10
  28. package/dist/es2019/entry-points/spacing-raw.js +1 -0
  29. package/dist/es2019/get-token.js +1 -1
  30. package/dist/es2019/index.js +1 -0
  31. package/dist/es2019/palettes/spacing-scale.js +1 -1
  32. package/dist/es2019/set-global-theme.js +25 -5
  33. package/dist/es2019/theme-change-observer.js +5 -3
  34. package/dist/es2019/theme-config.js +87 -0
  35. package/dist/es2019/tokens/default/spacing/spacing.js +12 -24
  36. package/dist/es2019/version.json +1 -1
  37. package/dist/esm/artifacts/palettes-raw/spacing-scale.js +3 -3
  38. package/dist/esm/artifacts/rename-mapping/atlassian-spacing.js +1 -49
  39. package/dist/esm/artifacts/tokens-raw/atlassian-spacing.js +26 -50
  40. package/dist/esm/artifacts/typescript/atlassian-spacing-token-default-values.js +2 -2
  41. package/dist/esm/artifacts/typescript/atlassian-spacing-types-internal.js +0 -6
  42. package/dist/esm/artifacts/typescript/atlassian-spacing-types.js +0 -6
  43. package/dist/esm/constants.js +2 -10
  44. package/dist/esm/entry-points/spacing-raw.js +1 -0
  45. package/dist/esm/get-token.js +1 -1
  46. package/dist/esm/index.js +1 -0
  47. package/dist/esm/palettes/spacing-scale.js +1 -1
  48. package/dist/esm/set-global-theme.js +28 -5
  49. package/dist/esm/theme-change-observer.js +5 -3
  50. package/dist/esm/theme-config.js +87 -0
  51. package/dist/esm/tokens/default/spacing/spacing.js +12 -24
  52. package/dist/esm/version.json +1 -1
  53. package/dist/types/artifacts/palettes-raw/spacing-scale.d.ts +1 -1
  54. package/dist/types/artifacts/rename-mapping/atlassian-spacing.d.ts +1 -1
  55. package/dist/types/artifacts/token-default-values.d.ts +1 -1
  56. package/dist/types/artifacts/tokens-raw/atlassian-spacing.d.ts +26 -3
  57. package/dist/types/artifacts/typescript/atlassian-spacing-token-default-values.d.ts +2 -2
  58. package/dist/types/artifacts/typescript/atlassian-spacing-types-internal.d.ts +2 -2
  59. package/dist/types/artifacts/typescript/atlassian-spacing-types.d.ts +2 -2
  60. package/dist/types/constants.d.ts +1 -8
  61. package/dist/types/entry-points/spacing-raw.d.ts +1 -0
  62. package/dist/types/index.d.ts +2 -1
  63. package/dist/types/set-global-theme.d.ts +2 -2
  64. package/dist/types/theme-change-observer.d.ts +4 -3
  65. package/dist/types/theme-config.d.ts +53 -0
  66. package/dist/types/types.d.ts +0 -3
  67. package/dist/types-ts4.0/artifacts/palettes-raw/spacing-scale.d.ts +1 -1
  68. package/dist/types-ts4.0/artifacts/rename-mapping/atlassian-spacing.d.ts +1 -1
  69. package/dist/types-ts4.0/artifacts/token-default-values.d.ts +1 -1
  70. package/dist/types-ts4.0/artifacts/tokens-raw/atlassian-spacing.d.ts +26 -3
  71. package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-token-default-values.d.ts +2 -2
  72. package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-types-internal.d.ts +2 -2
  73. package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-types.d.ts +2 -2
  74. package/dist/types-ts4.0/constants.d.ts +1 -14
  75. package/dist/types-ts4.0/entry-points/spacing-raw.d.ts +1 -0
  76. package/dist/types-ts4.0/index.d.ts +2 -1
  77. package/dist/types-ts4.0/set-global-theme.d.ts +2 -2
  78. package/dist/types-ts4.0/theme-change-observer.d.ts +4 -3
  79. package/dist/types-ts4.0/theme-config.d.ts +53 -0
  80. package/dist/types-ts4.0/types.d.ts +0 -3
  81. package/package.json +3 -1
  82. package/report.api.md +51 -14
  83. package/spacing-raw/package.json +17 -0
  84. package/tmp/api-report-tmp.d.ts +36 -8
package/dist/esm/theme-change-observer.js CHANGED
@@ -3,10 +3,10 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
3
  import _createClass from "@babel/runtime/helpers/createClass";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  import { useEffect, useState } from 'react';
6
- import { THEME_DATA_ATTRIBUTE } from './constants';
6
+ import { COLOR_MODE_ATTRIBUTE } from './constants';
7
7
 
8
8
  var getGlobalTheme = function getGlobalTheme() {
9
- return typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
9
+ return typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
10
10
  };
11
11
  /**
12
12
  * A MutationObserver which watches the `<html>` element for changes to the theme.
@@ -29,6 +29,8 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
29
29
 
30
30
  _defineProperty(this, "observer", null);
31
31
 
32
+ _defineProperty(this, "mediaObserver", null);
33
+
32
34
  this.callback = callback;
33
35
  }
34
36
 
@@ -44,7 +46,7 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
44
46
  }
45
47
 
46
48
  this.observer.observe(document.documentElement, {
47
- attributeFilter: [THEME_DATA_ATTRIBUTE]
49
+ attributeFilter: [COLOR_MODE_ATTRIBUTE]
48
50
  });
49
51
  }
50
52
  }, {
package/dist/esm/theme-config.js ADDED
@@ -0,0 +1,87 @@
1
+ /**
2
+ * This file contains the source of truth for themes and all associated meta data.
3
+ */
4
+
5
+ /**
6
+ * Themes: The internal identifier of a theme.
7
+ * These ids are what the actual theme files/folders are called.
8
+ * style-dictionary will attempt to locate these in the file-system.
9
+ */
10
+
11
+ /**
12
+ * Theme kinds: The type of theme.
13
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
14
+ * In the future other types may be introduced such as typography.
15
+ */
16
+
17
+ /**
18
+ * Theme modes: The general purpose of a theme.
19
+ * This attr is used to apply the appropriate system-preference media selector
20
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
21
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
22
+ */
23
+
24
+ /**
25
+ * Theme ids: The value that will mounted to the DOM as a data attr
26
+ * For example: `data-theme="light"
27
+ *
28
+ * These ids must be kebab case
29
+ */
30
+
31
+ /**
32
+ * Palettes: The set of base tokens a given theme may be populated with.
33
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
34
+ * previous color set.
35
+ */
36
+
37
+ /**
38
+ * ThemeConfig: the source of truth for all theme meta-data.
39
+ * This object should be used whenever interfacing with themes.
40
+ */
41
+ var themeConfig = {
42
+ 'atlassian-light': {
43
+ id: 'light',
44
+ displayName: 'Light Theme',
45
+ palette: 'defaultPalette',
46
+ attributes: {
47
+ type: 'color',
48
+ mode: 'light'
49
+ }
50
+ },
51
+ 'atlassian-dark': {
52
+ id: 'dark',
53
+ displayName: 'Dark Theme',
54
+ palette: 'defaultPalette',
55
+ attributes: {
56
+ type: 'color',
57
+ mode: 'dark'
58
+ }
59
+ },
60
+ 'atlassian-legacy-light': {
61
+ id: 'legacy-light',
62
+ displayName: 'Light Theme (legacy)',
63
+ palette: 'legacyPalette',
64
+ attributes: {
65
+ type: 'color',
66
+ mode: 'light'
67
+ }
68
+ },
69
+ 'atlassian-legacy-dark': {
70
+ id: 'legacy-dark',
71
+ displayName: 'Dark Theme (legacy)',
72
+ palette: 'legacyPalette',
73
+ attributes: {
74
+ type: 'color',
75
+ mode: 'dark'
76
+ }
77
+ },
78
+ 'atlassian-spacing': {
79
+ id: 'spacing',
80
+ displayName: 'Atlassian Spacing',
81
+ palette: 'spacingScale',
82
+ attributes: {
83
+ type: 'spacing'
84
+ }
85
+ }
86
+ };
87
+ export default themeConfig;
package/dist/esm/tokens/default/spacing/spacing.js CHANGED
@@ -15,8 +15,7 @@ var spacing = {
15
15
  '0': {
16
16
  attributes: {
17
17
  group: 'spacing',
18
- state: 'experimental',
19
- replacement: '0',
18
+ state: 'active',
20
19
  introduced: '0.10.16',
21
20
  description: 'Equates to `0`. Can be used for resetting default spacing styles.'
22
21
  }
@@ -24,8 +23,7 @@ var spacing = {
24
23
  '025': {
25
24
  attributes: {
26
25
  group: 'spacing',
27
- state: 'experimental',
28
- replacement: '2px',
26
+ state: 'active',
29
27
  introduced: '0.10.16',
30
28
  description: 'Use for spacing in compact scenarios. The smallest value in our scale.'
31
29
  }
@@ -33,8 +31,7 @@ var spacing = {
33
31
  '050': {
34
32
  attributes: {
35
33
  group: 'spacing',
36
- state: 'experimental',
37
- replacement: '4px',
34
+ state: 'active',
38
35
  introduced: '0.10.16',
39
36
  description: 'Helpful guidance goes here'
40
37
  }
@@ -42,8 +39,7 @@ var spacing = {
42
39
  '075': {
43
40
  attributes: {
44
41
  group: 'spacing',
45
- state: 'experimental',
46
- replacement: '6px',
42
+ state: 'active',
47
43
  introduced: '0.10.16',
48
44
  description: 'Helpful guidance goes here'
49
45
  }
@@ -51,8 +47,7 @@ var spacing = {
51
47
  '100': {
52
48
  attributes: {
53
49
  group: 'spacing',
54
- state: 'experimental',
55
- replacement: '8px',
50
+ state: 'active',
56
51
  introduced: '0.10.16',
57
52
  description: 'Helpful guidance goes here'
58
53
  }
@@ -60,8 +55,7 @@ var spacing = {
60
55
  '150': {
61
56
  attributes: {
62
57
  group: 'spacing',
63
- state: 'experimental',
64
- replacement: '12px',
58
+ state: 'active',
65
59
  introduced: '0.10.16',
66
60
  description: 'Helpful guidance goes here'
67
61
  }
@@ -69,8 +63,7 @@ var spacing = {
69
63
  '200': {
70
64
  attributes: {
71
65
  group: 'spacing',
72
- state: 'experimental',
73
- replacement: '16px',
66
+ state: 'active',
74
67
  introduced: '0.10.16',
75
68
  description: 'Helpful guidance goes here'
76
69
  }
@@ -78,8 +71,7 @@ var spacing = {
78
71
  '250': {
79
72
  attributes: {
80
73
  group: 'spacing',
81
- state: 'experimental',
82
- replacement: '20px',
74
+ state: 'active',
83
75
  introduced: '0.10.16',
84
76
  description: 'Helpful guidance goes here'
85
77
  }
@@ -87,8 +79,7 @@ var spacing = {
87
79
  '300': {
88
80
  attributes: {
89
81
  group: 'spacing',
90
- state: 'experimental',
91
- replacement: '24px',
82
+ state: 'active',
92
83
  introduced: '0.10.16',
93
84
  description: 'Helpful guidance goes here'
94
85
  }
@@ -96,8 +87,7 @@ var spacing = {
96
87
  '400': {
97
88
  attributes: {
98
89
  group: 'spacing',
99
- state: 'experimental',
100
- replacement: '32px',
90
+ state: 'active',
101
91
  introduced: '0.10.16',
102
92
  description: 'Helpful guidance goes here'
103
93
  }
@@ -105,8 +95,7 @@ var spacing = {
105
95
  '500': {
106
96
  attributes: {
107
97
  group: 'spacing',
108
- state: 'experimental',
109
- replacement: '40px',
98
+ state: 'active',
110
99
  introduced: '0.10.16',
111
100
  description: 'Helpful guidance goes here'
112
101
  }
@@ -114,8 +103,7 @@ var spacing = {
114
103
  '600': {
115
104
  attributes: {
116
105
  group: 'spacing',
117
- state: 'experimental',
118
- replacement: '48px',
106
+ state: 'active',
119
107
  introduced: '0.10.16',
120
108
  description: 'Helpful guidance goes here'
121
109
  }
package/dist/esm/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.27",
3
+ "version": "0.10.29",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/types/artifacts/palettes-raw/spacing-scale.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::08ae35ae5d6bfe790b538db89c5876de>>
3
+ * @codegen <<SignedSource::9ec4d3766ad54f86aa1d9891b0f32317>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: {
package/dist/types/artifacts/rename-mapping/atlassian-spacing.d.ts CHANGED
@@ -12,7 +12,7 @@
12
12
  * These changes will then be picked up by our tooling which will attempt to
13
13
  * migrate as many of these renames as possible.
14
14
  *
15
- * @codegen <<SignedSource::96a569b32686a2088f106c2ec4cd75d3>>
15
+ * @codegen <<SignedSource::a90d6d19262ac37cb4095da71ba3035c>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
  import tokens from '../token-names';
package/dist/types/artifacts/token-default-values.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  declare const defaultTokens: {
2
2
  'spacing.container.gutter': "8px";
3
- 'spacing.scale.0': "0";
3
+ 'spacing.scale.0': "0px";
4
4
  'spacing.scale.100': "8px";
5
5
  'spacing.scale.150': "12px";
6
6
  'spacing.scale.200': "16px";
package/dist/types/artifacts/tokens-raw/atlassian-spacing.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::fd4d0992b574a7a22bc1b95ebcdaafc8>>
3
+ * @codegen <<SignedSource::e19d1d58b2463145dd0eae095e3d0b36>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- declare const tokens: {
6
+ declare const tokens: ({
7
7
  attributes: {
8
8
  group: string;
9
9
  state: string;
@@ -26,5 +26,28 @@ declare const tokens: {
26
26
  };
27
27
  name: string;
28
28
  path: string[];
29
- }[];
29
+ } | {
30
+ attributes: {
31
+ group: string;
32
+ state: string;
33
+ introduced: string;
34
+ description: string;
35
+ replacement?: undefined;
36
+ };
37
+ value: string;
38
+ filePath: string;
39
+ isSource: boolean;
40
+ original: {
41
+ attributes: {
42
+ group: string;
43
+ state: string;
44
+ introduced: string;
45
+ description: string;
46
+ replacement?: undefined;
47
+ };
48
+ value: string;
49
+ };
50
+ name: string;
51
+ path: string[];
52
+ })[];
30
53
  export default tokens;
package/dist/types/artifacts/typescript/atlassian-spacing-token-default-values.d.ts CHANGED
@@ -4,12 +4,12 @@
4
4
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
5
5
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
6
6
  *
7
- * @codegen <<SignedSource::c5f4991ca82e83d24ff38509c8df5121>>
7
+ * @codegen <<SignedSource::e575bc332dcc60d3fe9e378605bc9100>>
8
8
  * @codegenCommand yarn build tokens
9
9
  */
10
10
  declare const defaultTokenValues: {
11
11
  readonly 'spacing.container.gutter': "8px";
12
- readonly 'spacing.scale.0': "0";
12
+ readonly 'spacing.scale.0': "0px";
13
13
  readonly 'spacing.scale.100': "8px";
14
14
  readonly 'spacing.scale.150': "12px";
15
15
  readonly 'spacing.scale.200': "16px";
package/dist/types/artifacts/typescript/atlassian-spacing-types-internal.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
3
+ * @codegen <<SignedSource::953f5e0300c6d0043915d01d2974af58>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export {};
6
+ export declare type InternalTokenIds = 'spacing.scale.0' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075';
package/dist/types/artifacts/typescript/atlassian-spacing-types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
3
+ * @codegen <<SignedSource::0a5838a760fffb6bbb598305116da533>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export {};
6
+ export declare type ActiveTokens = 'spacing.scale.0' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075';
package/dist/types/constants.d.ts CHANGED
@@ -1,13 +1,6 @@
1
- export declare const THEMES: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing"];
2
1
  export declare const THEME_DATA_ATTRIBUTE = "data-theme";
2
+ export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
3
3
  export declare const DEFAULT_THEME = "light spacing";
4
4
  export declare const CSS_PREFIX = "ds";
5
5
  export declare const CSS_VAR_FULL: string[];
6
- export declare const THEME_NAME_MAP: {
7
- 'atlassian-light': string;
8
- 'atlassian-dark': string;
9
- 'atlassian-legacy-light': string;
10
- 'atlassian-legacy-dark': string;
11
- 'atlassian-spacing': string;
12
- };
13
6
  export declare const TOKEN_NOT_FOUND_CSS_VAR: string;
package/dist/types/entry-points/spacing-raw.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from '../artifacts/tokens-raw/atlassian-spacing';
package/dist/types/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as token } from './get-token';
2
2
  export { default as setGlobalTheme } from './set-global-theme';
3
3
  export type { CSSToken } from './artifacts/token-names';
4
- export type { Themes } from './types';
4
+ export type { Themes, ThemeIds } from './theme-config';
5
+ export { default as themeConfig } from './theme-config';
5
6
  export { useThemeObserver, ThemeMutationObserver, } from './theme-change-observer';
package/dist/types/set-global-theme.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import type { Themes } from './types';
2
- declare const setGlobalTheme: (theme: Themes) => void;
1
+ import { ThemeIds } from './theme-config';
2
+ declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
3
3
  export default setGlobalTheme;
package/dist/types/theme-change-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Themes } from './types';
1
+ import { ThemeIds } from './theme-config';
2
2
  /**
3
3
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
4
  *
@@ -15,7 +15,8 @@ import { Themes } from './types';
15
15
  export declare class ThemeMutationObserver {
16
16
  private callback;
17
17
  observer: MutationObserver | null;
18
- constructor(callback: (theme: Themes | null) => unknown);
18
+ mediaObserver: any;
19
+ constructor(callback: (theme: ThemeIds | null) => unknown);
19
20
  observe(): void;
20
21
  disconnect(): void;
21
22
  }
@@ -32,4 +33,4 @@ export declare class ThemeMutationObserver {
32
33
  * }, [theme]);
33
34
  * ```
34
35
  */
35
- export declare const useThemeObserver: () => Themes | null;
36
+ export declare const useThemeObserver: () => ThemeIds | null;
package/dist/types/theme-config.d.ts ADDED
@@ -0,0 +1,53 @@
1
+ /**
2
+ * This file contains the source of truth for themes and all associated meta data.
3
+ */
4
+ /**
5
+ * Themes: The internal identifier of a theme.
6
+ * These ids are what the actual theme files/folders are called.
7
+ * style-dictionary will attempt to locate these in the file-system.
8
+ */
9
+ export declare type Themes = 'atlassian-light' | 'atlassian-dark' | 'atlassian-legacy-light' | 'atlassian-legacy-dark' | 'atlassian-spacing';
10
+ export declare type ThemeFileNames = Themes;
11
+ /**
12
+ * Theme kinds: The type of theme.
13
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
14
+ * In the future other types may be introduced such as typography.
15
+ */
16
+ export declare type ThemeKinds = 'color' | 'spacing';
17
+ /**
18
+ * Theme modes: The general purpose of a theme.
19
+ * This attr is used to apply the appropriate system-preference media selector
20
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
21
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
22
+ */
23
+ export declare type ThemeColorModes = 'light' | 'dark';
24
+ /**
25
+ * Theme ids: The value that will mounted to the DOM as a data attr
26
+ * For example: `data-theme="light"
27
+ *
28
+ * These ids must be kebab case
29
+ */
30
+ export declare type ThemeIds = 'light' | 'dark' | 'legacy-light' | 'legacy-dark' | 'spacing';
31
+ /**
32
+ * Palettes: The set of base tokens a given theme may be populated with.
33
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
34
+ * previous color set.
35
+ */
36
+ export declare type Palettes = 'defaultPalette' | 'legacyPalette' | 'spacingScale';
37
+ /**
38
+ * ThemeConfig: the source of truth for all theme meta-data.
39
+ * This object should be used whenever interfacing with themes.
40
+ */
41
+ interface ThemeConfig {
42
+ id: ThemeIds;
43
+ displayName: string;
44
+ palette: Palettes;
45
+ attributes: {
46
+ type: 'color';
47
+ mode: ThemeColorModes;
48
+ } | {
49
+ type: 'spacing';
50
+ };
51
+ }
52
+ declare const themeConfig: Record<Themes, ThemeConfig>;
53
+ export default themeConfig;
package/dist/types/types.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { InternalTokenIds } from './artifacts/types-internal';
2
- import { THEME_NAME_MAP, THEMES } from './constants';
3
2
  export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette' | 'opacity' | 'spacing' | 'scale';
4
3
  export declare type ActiveTokenState = 'active';
5
4
  export declare type DeprecatedTokenState = 'deprecated';
@@ -10,8 +9,6 @@ export declare type Replacement = InternalTokenIds | InternalTokenIds[];
10
9
  export declare type ExperimentalReplacement = InternalTokenIds | InternalTokenIds[] | string;
11
10
  export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
12
11
  export declare type ValueCategory = 'opacity';
13
- export declare type Themes = typeof THEMES[number];
14
- export declare type ThemesLongName = keyof typeof THEME_NAME_MAP;
15
12
  export interface Token<TValue, Group extends Groups> {
16
13
  value: TValue;
17
14
  attributes: {
package/dist/types-ts4.0/artifacts/palettes-raw/spacing-scale.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::08ae35ae5d6bfe790b538db89c5876de>>
3
+ * @codegen <<SignedSource::9ec4d3766ad54f86aa1d9891b0f32317>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  declare const tokens: {
package/dist/types-ts4.0/artifacts/rename-mapping/atlassian-spacing.d.ts CHANGED
@@ -12,7 +12,7 @@
12
12
  * These changes will then be picked up by our tooling which will attempt to
13
13
  * migrate as many of these renames as possible.
14
14
  *
15
- * @codegen <<SignedSource::96a569b32686a2088f106c2ec4cd75d3>>
15
+ * @codegen <<SignedSource::a90d6d19262ac37cb4095da71ba3035c>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
  import tokens from '../token-names';
package/dist/types-ts4.0/artifacts/token-default-values.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  declare const defaultTokens: {
2
2
  'spacing.container.gutter': "8px";
3
- 'spacing.scale.0': "0";
3
+ 'spacing.scale.0': "0px";
4
4
  'spacing.scale.100': "8px";
5
5
  'spacing.scale.150': "12px";
6
6
  'spacing.scale.200': "16px";
package/dist/types-ts4.0/artifacts/tokens-raw/atlassian-spacing.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::fd4d0992b574a7a22bc1b95ebcdaafc8>>
3
+ * @codegen <<SignedSource::e19d1d58b2463145dd0eae095e3d0b36>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- declare const tokens: {
6
+ declare const tokens: ({
7
7
  attributes: {
8
8
  group: string;
9
9
  state: string;
@@ -26,5 +26,28 @@ declare const tokens: {
26
26
  };
27
27
  name: string;
28
28
  path: string[];
29
- }[];
29
+ } | {
30
+ attributes: {
31
+ group: string;
32
+ state: string;
33
+ introduced: string;
34
+ description: string;
35
+ replacement?: undefined;
36
+ };
37
+ value: string;
38
+ filePath: string;
39
+ isSource: boolean;
40
+ original: {
41
+ attributes: {
42
+ group: string;
43
+ state: string;
44
+ introduced: string;
45
+ description: string;
46
+ replacement?: undefined;
47
+ };
48
+ value: string;
49
+ };
50
+ name: string;
51
+ path: string[];
52
+ })[];
30
53
  export default tokens;
package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-token-default-values.d.ts CHANGED
@@ -4,12 +4,12 @@
4
4
  * Token names mapped to their value in the default Atlassian themes ('light spacing').
5
5
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
6
6
  *
7
- * @codegen <<SignedSource::c5f4991ca82e83d24ff38509c8df5121>>
7
+ * @codegen <<SignedSource::e575bc332dcc60d3fe9e378605bc9100>>
8
8
  * @codegenCommand yarn build tokens
9
9
  */
10
10
  declare const defaultTokenValues: {
11
11
  readonly 'spacing.container.gutter': "8px";
12
- readonly 'spacing.scale.0': "0";
12
+ readonly 'spacing.scale.0': "0px";
13
13
  readonly 'spacing.scale.100': "8px";
14
14
  readonly 'spacing.scale.150': "12px";
15
15
  readonly 'spacing.scale.200': "16px";
package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-types-internal.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
3
+ * @codegen <<SignedSource::953f5e0300c6d0043915d01d2974af58>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export {};
6
+ export declare type InternalTokenIds = 'spacing.scale.0' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075';
package/dist/types-ts4.0/artifacts/typescript/atlassian-spacing-types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::09e6dd0e22e09011160890dfb93241da>>
3
+ * @codegen <<SignedSource::0a5838a760fffb6bbb598305116da533>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
- export {};
6
+ export declare type ActiveTokens = 'spacing.scale.0' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075';
package/dist/types-ts4.0/constants.d.ts CHANGED
@@ -1,19 +1,6 @@
1
- export declare const THEMES: readonly [
2
- "light",
3
- "dark",
4
- "legacy-light",
5
- "legacy-dark",
6
- "spacing"
7
- ];
8
1
  export declare const THEME_DATA_ATTRIBUTE = "data-theme";
2
+ export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
9
3
  export declare const DEFAULT_THEME = "light spacing";
10
4
  export declare const CSS_PREFIX = "ds";
11
5
  export declare const CSS_VAR_FULL: string[];
12
- export declare const THEME_NAME_MAP: {
13
- 'atlassian-light': string;
14
- 'atlassian-dark': string;
15
- 'atlassian-legacy-light': string;
16
- 'atlassian-legacy-dark': string;
17
- 'atlassian-spacing': string;
18
- };
19
6
  export declare const TOKEN_NOT_FOUND_CSS_VAR: string;
package/dist/types-ts4.0/entry-points/spacing-raw.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from '../artifacts/tokens-raw/atlassian-spacing';
package/dist/types-ts4.0/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as token } from './get-token';
2
2
  export { default as setGlobalTheme } from './set-global-theme';
3
3
  export type { CSSToken } from './artifacts/token-names';
4
- export type { Themes } from './types';
4
+ export type { Themes, ThemeIds } from './theme-config';
5
+ export { default as themeConfig } from './theme-config';
5
6
  export { useThemeObserver, ThemeMutationObserver, } from './theme-change-observer';
package/dist/types-ts4.0/set-global-theme.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import type { Themes } from './types';
2
- declare const setGlobalTheme: (theme: Themes) => void;
1
+ import { ThemeIds } from './theme-config';
2
+ declare const setGlobalTheme: (themeId: ThemeIds, shouldMatchSystem?: boolean) => void;
3
3
  export default setGlobalTheme;
package/dist/types-ts4.0/theme-change-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Themes } from './types';
1
+ import { ThemeIds } from './theme-config';
2
2
  /**
3
3
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
4
  *
@@ -15,7 +15,8 @@ import { Themes } from './types';
15
15
  export declare class ThemeMutationObserver {
16
16
  private callback;
17
17
  observer: MutationObserver | null;
18
- constructor(callback: (theme: Themes | null) => unknown);
18
+ mediaObserver: any;
19
+ constructor(callback: (theme: ThemeIds | null) => unknown);
19
20
  observe(): void;
20
21
  disconnect(): void;
21
22
  }
@@ -32,4 +33,4 @@ export declare class ThemeMutationObserver {
32
33
  * }, [theme]);
33
34
  * ```
34
35
  */
35
- export declare const useThemeObserver: () => Themes | null;
36
+ export declare const useThemeObserver: () => ThemeIds | null;