@atlaskit/tokens 0.10.28 → 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 (42) hide show
  1. package/CHANGELOG.md +61 -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 +2 -2
  7. package/dist/cjs/constants.js +4 -13
  8. package/dist/cjs/get-token.js +1 -1
  9. package/dist/cjs/index.js +8 -0
  10. package/dist/cjs/set-global-theme.js +30 -4
  11. package/dist/cjs/theme-change-observer.js +3 -2
  12. package/dist/cjs/theme-config.js +95 -0
  13. package/dist/cjs/version.json +1 -1
  14. package/dist/es2019/constants.js +2 -10
  15. package/dist/es2019/get-token.js +1 -1
  16. package/dist/es2019/index.js +1 -0
  17. package/dist/es2019/set-global-theme.js +25 -5
  18. package/dist/es2019/theme-change-observer.js +5 -3
  19. package/dist/es2019/theme-config.js +87 -0
  20. package/dist/es2019/version.json +1 -1
  21. package/dist/esm/constants.js +2 -10
  22. package/dist/esm/get-token.js +1 -1
  23. package/dist/esm/index.js +1 -0
  24. package/dist/esm/set-global-theme.js +28 -5
  25. package/dist/esm/theme-change-observer.js +5 -3
  26. package/dist/esm/theme-config.js +87 -0
  27. package/dist/esm/version.json +1 -1
  28. package/dist/types/constants.d.ts +1 -8
  29. package/dist/types/index.d.ts +2 -1
  30. package/dist/types/set-global-theme.d.ts +2 -2
  31. package/dist/types/theme-change-observer.d.ts +4 -3
  32. package/dist/types/theme-config.d.ts +53 -0
  33. package/dist/types/types.d.ts +0 -3
  34. package/dist/types-ts4.0/constants.d.ts +1 -14
  35. package/dist/types-ts4.0/index.d.ts +2 -1
  36. package/dist/types-ts4.0/set-global-theme.d.ts +2 -2
  37. package/dist/types-ts4.0/theme-change-observer.d.ts +4 -3
  38. package/dist/types-ts4.0/theme-config.d.ts +53 -0
  39. package/dist/types-ts4.0/types.d.ts +0 -3
  40. package/package.json +2 -1
  41. package/report.api.md +51 -14
  42. package/tmp/api-report-tmp.d.ts +36 -8
package/dist/cjs/index.js CHANGED
@@ -17,6 +17,12 @@ Object.defineProperty(exports, "setGlobalTheme", {
17
17
  return _setGlobalTheme.default;
18
18
  }
19
19
  });
20
+ Object.defineProperty(exports, "themeConfig", {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return _themeConfig.default;
24
+ }
25
+ });
20
26
  Object.defineProperty(exports, "token", {
21
27
  enumerable: true,
22
28
  get: function get() {
@@ -34,4 +40,6 @@ var _getToken = _interopRequireDefault(require("./get-token"));
34
40
 
35
41
  var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
36
42
 
43
+ var _themeConfig = _interopRequireDefault(require("./theme-config"));
44
+
37
45
  var _themeChangeObserver = require("./theme-change-observer");
package/dist/cjs/set-global-theme.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
@@ -7,15 +9,39 @@ exports.default = void 0;
7
9
 
8
10
  var _constants = require("./constants");
9
11
 
10
- var setGlobalTheme = function setGlobalTheme(theme) {
12
+ var _themeConfig = _interopRequireDefault(require("./theme-config"));
13
+
14
+ var setGlobalTheme = function setGlobalTheme(themeId) {
15
+ var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
16
+ var theme = Object.values(_themeConfig.default).find(function (_ref) {
17
+ var id = _ref.id;
18
+ return id === themeId;
19
+ });
20
+
11
21
  if (process.env.NODE_ENV !== 'production') {
12
- if (!_constants.THEMES.includes(theme)) {
13
- throw new Error("setGlobalTheme only accepts themes: ".concat(_constants.THEMES.join(', ')));
22
+ if (!theme) {
23
+ var themeIds = Object.values(_themeConfig.default).map(function (_ref2) {
24
+ var id = _ref2.id;
25
+ return id;
26
+ });
27
+ throw new Error("setGlobalTheme only accepts themes: ".concat(themeIds.join(', ')));
14
28
  }
15
29
  }
16
30
 
31
+ if (!theme) {
32
+ return;
33
+ }
34
+
17
35
  var element = document.documentElement;
18
- element.setAttribute('data-theme', theme);
36
+ element.setAttribute(_constants.THEME_DATA_ATTRIBUTE, theme.id);
37
+
38
+ if (theme.attributes.type === 'color') {
39
+ element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
40
+ }
41
+
42
+ if (shouldMatchSystem) {
43
+ element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, 'auto');
44
+ }
19
45
  };
20
46
 
21
47
  var _default = setGlobalTheme;
package/dist/cjs/theme-change-observer.js CHANGED
@@ -20,7 +20,7 @@ var _react = require("react");
20
20
  var _constants = require("./constants");
21
21
 
22
22
  var getGlobalTheme = function getGlobalTheme() {
23
- return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
23
+ return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.COLOR_MODE_ATTRIBUTE) : null;
24
24
  };
25
25
  /**
26
26
  * A MutationObserver which watches the `<html>` element for changes to the theme.
@@ -41,6 +41,7 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
41
41
  function ThemeMutationObserver(callback) {
42
42
  (0, _classCallCheck2.default)(this, ThemeMutationObserver);
43
43
  (0, _defineProperty2.default)(this, "observer", null);
44
+ (0, _defineProperty2.default)(this, "mediaObserver", null);
44
45
  this.callback = callback;
45
46
  }
46
47
 
@@ -56,7 +57,7 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
56
57
  }
57
58
 
58
59
  this.observer.observe(document.documentElement, {
59
- attributeFilter: [_constants.THEME_DATA_ATTRIBUTE]
60
+ attributeFilter: [_constants.COLOR_MODE_ATTRIBUTE]
60
61
  });
61
62
  }
62
63
  }, {
package/dist/cjs/theme-config.js ADDED
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ /**
9
+ * This file contains the source of truth for themes and all associated meta data.
10
+ */
11
+
12
+ /**
13
+ * Themes: The internal identifier of a theme.
14
+ * These ids are what the actual theme files/folders are called.
15
+ * style-dictionary will attempt to locate these in the file-system.
16
+ */
17
+
18
+ /**
19
+ * Theme kinds: The type of theme.
20
+ * Some themes are entirely focused on Color, whilst others are purely focused on spacing.
21
+ * In the future other types may be introduced such as typography.
22
+ */
23
+
24
+ /**
25
+ * Theme modes: The general purpose of a theme.
26
+ * This attr is used to apply the appropriate system-preference media selector
27
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
28
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
29
+ */
30
+
31
+ /**
32
+ * Theme ids: The value that will mounted to the DOM as a data attr
33
+ * For example: `data-theme="light"
34
+ *
35
+ * These ids must be kebab case
36
+ */
37
+
38
+ /**
39
+ * Palettes: The set of base tokens a given theme may be populated with.
40
+ * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
41
+ * previous color set.
42
+ */
43
+
44
+ /**
45
+ * ThemeConfig: the source of truth for all theme meta-data.
46
+ * This object should be used whenever interfacing with themes.
47
+ */
48
+ var themeConfig = {
49
+ 'atlassian-light': {
50
+ id: 'light',
51
+ displayName: 'Light Theme',
52
+ palette: 'defaultPalette',
53
+ attributes: {
54
+ type: 'color',
55
+ mode: 'light'
56
+ }
57
+ },
58
+ 'atlassian-dark': {
59
+ id: 'dark',
60
+ displayName: 'Dark Theme',
61
+ palette: 'defaultPalette',
62
+ attributes: {
63
+ type: 'color',
64
+ mode: 'dark'
65
+ }
66
+ },
67
+ 'atlassian-legacy-light': {
68
+ id: 'legacy-light',
69
+ displayName: 'Light Theme (legacy)',
70
+ palette: 'legacyPalette',
71
+ attributes: {
72
+ type: 'color',
73
+ mode: 'light'
74
+ }
75
+ },
76
+ 'atlassian-legacy-dark': {
77
+ id: 'legacy-dark',
78
+ displayName: 'Dark Theme (legacy)',
79
+ palette: 'legacyPalette',
80
+ attributes: {
81
+ type: 'color',
82
+ mode: 'dark'
83
+ }
84
+ },
85
+ 'atlassian-spacing': {
86
+ id: 'spacing',
87
+ displayName: 'Atlassian Spacing',
88
+ palette: 'spacingScale',
89
+ attributes: {
90
+ type: 'spacing'
91
+ }
92
+ }
93
+ };
94
+ var _default = themeConfig;
95
+ exports.default = _default;
package/dist/cjs/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.28",
3
+ "version": "0.10.29",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/es2019/constants.js CHANGED
@@ -1,14 +1,6 @@
1
- export const THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing'];
2
1
  export const THEME_DATA_ATTRIBUTE = 'data-theme';
2
+ export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
3
3
  export const DEFAULT_THEME = 'light spacing';
4
4
  export const CSS_PREFIX = 'ds';
5
- export const CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
6
-
7
- export const THEME_NAME_MAP = {
8
- 'atlassian-light': 'light',
9
- 'atlassian-dark': 'dark',
10
- 'atlassian-legacy-light': 'legacy-light',
11
- 'atlassian-legacy-dark': 'legacy-dark',
12
- 'atlassian-spacing': 'spacing'
13
- };
5
+ export const CSS_VAR_FULL = ['opacity'];
14
6
  export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;
package/dist/es2019/get-token.js CHANGED
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "0.10.28";
5
+ const version = "0.10.29";
6
6
 
7
7
  function token(path, fallback) {
8
8
  let token = tokens[path];
package/dist/es2019/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as token } from './get-token';
2
2
  export { default as setGlobalTheme } from './set-global-theme';
3
+ export { default as themeConfig } from './theme-config';
3
4
  export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';
package/dist/es2019/set-global-theme.js CHANGED
@@ -1,14 +1,34 @@
1
- import { THEMES } from './constants';
1
+ import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
2
+ import themeConfig from './theme-config';
3
+
4
+ const setGlobalTheme = (themeId, shouldMatchSystem = false) => {
5
+ const theme = Object.values(themeConfig).find(({
6
+ id
7
+ }) => id === themeId);
2
8
 
3
- const setGlobalTheme = theme => {
4
9
  if (process.env.NODE_ENV !== 'production') {
5
- if (!THEMES.includes(theme)) {
6
- throw new Error(`setGlobalTheme only accepts themes: ${THEMES.join(', ')}`);
10
+ if (!theme) {
11
+ const themeIds = Object.values(themeConfig).map(({
12
+ id
13
+ }) => id);
14
+ throw new Error(`setGlobalTheme only accepts themes: ${themeIds.join(', ')}`);
7
15
  }
8
16
  }
9
17
 
18
+ if (!theme) {
19
+ return;
20
+ }
21
+
10
22
  const element = document.documentElement;
11
- element.setAttribute('data-theme', theme);
23
+ element.setAttribute(THEME_DATA_ATTRIBUTE, theme.id);
24
+
25
+ if (theme.attributes.type === 'color') {
26
+ element.setAttribute(COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
27
+ }
28
+
29
+ if (shouldMatchSystem) {
30
+ element.setAttribute(COLOR_MODE_ATTRIBUTE, 'auto');
31
+ }
12
32
  };
13
33
 
14
34
  export default setGlobalTheme;
package/dist/es2019/theme-change-observer.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { useEffect, useState } from 'react';
3
- import { THEME_DATA_ATTRIBUTE } from './constants';
3
+ import { COLOR_MODE_ATTRIBUTE } from './constants';
4
4
 
5
- const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
5
+ const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(COLOR_MODE_ATTRIBUTE) : null;
6
6
  /**
7
7
  * A MutationObserver which watches the `<html>` element for changes to the theme.
8
8
  *
@@ -22,6 +22,8 @@ export class ThemeMutationObserver {
22
22
  constructor(callback) {
23
23
  _defineProperty(this, "observer", null);
24
24
 
25
+ _defineProperty(this, "mediaObserver", null);
26
+
25
27
  this.callback = callback;
26
28
  }
27
29
 
@@ -33,7 +35,7 @@ export class ThemeMutationObserver {
33
35
  }
34
36
 
35
37
  this.observer.observe(document.documentElement, {
36
- attributeFilter: [THEME_DATA_ATTRIBUTE]
38
+ attributeFilter: [COLOR_MODE_ATTRIBUTE]
37
39
  });
38
40
  }
39
41
 
package/dist/es2019/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
+ const 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/es2019/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.28",
3
+ "version": "0.10.29",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/esm/constants.js CHANGED
@@ -1,14 +1,6 @@
1
- export var THEMES = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing'];
2
1
  export var THEME_DATA_ATTRIBUTE = 'data-theme';
2
+ export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
3
3
  export var DEFAULT_THEME = 'light spacing';
4
4
  export var CSS_PREFIX = 'ds';
5
- export var CSS_VAR_FULL = ['opacity']; // Maps the longer theme name to a shorthand used in css/code
6
-
7
- export var THEME_NAME_MAP = {
8
- 'atlassian-light': 'light',
9
- 'atlassian-dark': 'dark',
10
- 'atlassian-legacy-light': 'legacy-light',
11
- 'atlassian-legacy-dark': 'legacy-dark',
12
- 'atlassian-spacing': 'spacing'
13
- };
5
+ export var CSS_VAR_FULL = ['opacity'];
14
6
  export var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");
package/dist/esm/get-token.js CHANGED
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "0.10.28";
5
+ var version = "0.10.29";
6
6
 
7
7
  function token(path, fallback) {
8
8
  var token = tokens[path];
package/dist/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as token } from './get-token';
2
2
  export { default as setGlobalTheme } from './set-global-theme';
3
+ export { default as themeConfig } from './theme-config';
3
4
  export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';
package/dist/esm/set-global-theme.js CHANGED
@@ -1,14 +1,37 @@
1
- import { THEMES } from './constants';
1
+ import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
2
+ import themeConfig from './theme-config';
3
+
4
+ var setGlobalTheme = function setGlobalTheme(themeId) {
5
+ var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
6
+ var theme = Object.values(themeConfig).find(function (_ref) {
7
+ var id = _ref.id;
8
+ return id === themeId;
9
+ });
2
10
 
3
- var setGlobalTheme = function setGlobalTheme(theme) {
4
11
  if (process.env.NODE_ENV !== 'production') {
5
- if (!THEMES.includes(theme)) {
6
- throw new Error("setGlobalTheme only accepts themes: ".concat(THEMES.join(', ')));
12
+ if (!theme) {
13
+ var themeIds = Object.values(themeConfig).map(function (_ref2) {
14
+ var id = _ref2.id;
15
+ return id;
16
+ });
17
+ throw new Error("setGlobalTheme only accepts themes: ".concat(themeIds.join(', ')));
7
18
  }
8
19
  }
9
20
 
21
+ if (!theme) {
22
+ return;
23
+ }
24
+
10
25
  var element = document.documentElement;
11
- element.setAttribute('data-theme', theme);
26
+ element.setAttribute(THEME_DATA_ATTRIBUTE, theme.id);
27
+
28
+ if (theme.attributes.type === 'color') {
29
+ element.setAttribute(COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
30
+ }
31
+
32
+ if (shouldMatchSystem) {
33
+ element.setAttribute(COLOR_MODE_ATTRIBUTE, 'auto');
34
+ }
12
35
  };
13
36
 
14
37
  export default setGlobalTheme;
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/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.10.28",
3
+ "version": "0.10.29",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
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/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;