@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/esm/{theme-change-observer.js → theme-mutation-observer.js} RENAMED
@@ -1,13 +1,8 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
1
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
2
  import _createClass from "@babel/runtime/helpers/createClass";
4
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
- import { useEffect, useState } from 'react';
6
- import { THEME_DATA_ATTRIBUTE } from './constants';
7
-
8
- var getGlobalTheme = function getGlobalTheme() {
9
- return typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
10
- };
4
+ import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
5
+ import { getGlobalTheme } from './get-global-theme';
11
6
  /**
12
7
  * A MutationObserver which watches the `<html>` element for changes to the theme.
13
8
  *
@@ -21,32 +16,24 @@ var getGlobalTheme = function getGlobalTheme() {
21
16
  * observer.observe();
22
17
  * ```
23
18
  */
24
-
25
-
26
19
  export var ThemeMutationObserver = /*#__PURE__*/function () {
27
20
  function ThemeMutationObserver(callback) {
28
21
  _classCallCheck(this, ThemeMutationObserver);
29
-
30
22
  _defineProperty(this, "observer", null);
31
-
32
23
  _defineProperty(this, "mediaObserver", null);
33
-
34
24
  this.callback = callback;
35
25
  }
36
-
37
26
  _createClass(ThemeMutationObserver, [{
38
27
  key: "observe",
39
28
  value: function observe() {
40
29
  var _this = this;
41
-
42
30
  if (!this.observer) {
43
31
  this.observer = new MutationObserver(function () {
44
32
  _this.callback(getGlobalTheme());
45
33
  });
46
34
  }
47
-
48
35
  this.observer.observe(document.documentElement, {
49
- attributeFilter: [THEME_DATA_ATTRIBUTE]
36
+ attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
50
37
  });
51
38
  }
52
39
  }, {
@@ -55,37 +42,5 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
55
42
  this.observer && this.observer.disconnect();
56
43
  }
57
44
  }]);
58
-
59
45
  return ThemeMutationObserver;
60
- }();
61
- /**
62
- * A React hook which returns the current theme set on `<html>`, or `null` if not set.
63
- *
64
- * @example
65
- * ```
66
- * const theme = useThemeObserver(); // Returns 'light' or 'dark'
67
- *
68
- * // Performing side effects when it changes
69
- * useEffect(() => {
70
- * console.log(`The theme has changed to ${theme}`);
71
- * }, [theme]);
72
- * ```
73
- */
74
-
75
- export var useThemeObserver = function useThemeObserver() {
76
- var _useState = useState(getGlobalTheme()),
77
- _useState2 = _slicedToArray(_useState, 2),
78
- theme = _useState2[0],
79
- setTheme = _useState2[1];
80
-
81
- useEffect(function () {
82
- var observer = new ThemeMutationObserver(function (theme) {
83
- return setTheme(theme);
84
- });
85
- observer.observe();
86
- return function () {
87
- return observer.disconnect();
88
- };
89
- }, []);
90
- return theme;
91
- };
46
+ }();
package/dist/esm/tokens/atlassian-dark/utility/utility.js CHANGED
@@ -1,10 +1,7 @@
1
1
  var utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  value: 'transparent'
5
- },
6
- MISSING_TOKEN: {
7
- value: '#FA11F2'
8
5
  }
9
6
  }
10
7
  };
package/dist/esm/tokens/atlassian-legacy-dark/utility/utility.js CHANGED
@@ -1,10 +1,7 @@
1
1
  var utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  value: 'transparent'
5
- },
6
- MISSING_TOKEN: {
7
- value: '#FA11F2'
8
5
  }
9
6
  }
10
7
  };
package/dist/esm/tokens/atlassian-legacy-light/utility/utility.js CHANGED
@@ -1,10 +1,7 @@
1
1
  var utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  value: 'transparent'
5
- },
6
- MISSING_TOKEN: {
7
- value: '#FA11F2'
8
5
  }
9
6
  }
10
7
  };
package/dist/esm/tokens/atlassian-light/utility/utility.js CHANGED
@@ -1,10 +1,7 @@
1
1
  var utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  value: 'transparent'
5
- },
6
- MISSING_TOKEN: {
7
- value: '#FA11F2'
8
5
  }
9
6
  }
10
7
  };
package/dist/esm/tokens/default/utility/utility.js CHANGED
@@ -1,5 +1,5 @@
1
1
  var utility = {
2
- UNSAFE_util: {
2
+ UNSAFE: {
3
3
  transparent: {
4
4
  attributes: {
5
5
  group: 'raw',
@@ -7,14 +7,6 @@ var utility = {
7
7
  introduced: '0.1.1',
8
8
  description: 'Transparent token used for backwards compatibility between new and old theming solutions'
9
9
  }
10
- },
11
- MISSING_TOKEN: {
12
- attributes: {
13
- group: 'raw',
14
- state: 'active',
15
- introduced: '0.4.0',
16
- description: 'Used as a placeholder when a suitable token does not exist'
17
- }
18
10
  }
19
11
  }
20
12
  };
package/dist/esm/use-theme-observer.js ADDED
@@ -0,0 +1,34 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import { useEffect, useState } from 'react';
3
+ import { getGlobalTheme } from './get-global-theme';
4
+ import { ThemeMutationObserver } from './theme-mutation-observer';
5
+
6
+ /**
7
+ * A React hook which returns the current themes and color-mode set on `<html>`.
8
+ *
9
+ * @example
10
+ * ```
11
+ * const { colorMode, dark, light, spacing, typography } = useThemeObserver();
12
+ *
13
+ * // Performing side effects when it changes
14
+ * useEffect(() => {
15
+ * console.log(`The color mode has changed to ${theme.colorMode}`);
16
+ * }, [theme.colorMode]);
17
+ * ```
18
+ */
19
+ export var useThemeObserver = function useThemeObserver() {
20
+ var _useState = useState(getGlobalTheme()),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ theme = _useState2[0],
23
+ setTheme = _useState2[1];
24
+ useEffect(function () {
25
+ var observer = new ThemeMutationObserver(function (theme) {
26
+ return setTheme(theme);
27
+ });
28
+ observer.observe();
29
+ return function () {
30
+ return observer.disconnect();
31
+ };
32
+ }, []);
33
+ return theme;
34
+ };
package/dist/esm/utils/color-detection.js CHANGED
@@ -10,19 +10,19 @@ export var hexToRGBAValues = function hexToRGBAValues(hex) {
10
10
  };
11
11
  export var hexToRGBA = function hexToRGBA(hex) {
12
12
  var _hexToRGBAValues = hexToRGBAValues(hex),
13
- r = _hexToRGBAValues.r,
14
- g = _hexToRGBAValues.g,
15
- b = _hexToRGBAValues.b,
16
- a = _hexToRGBAValues.a;
17
-
13
+ r = _hexToRGBAValues.r,
14
+ g = _hexToRGBAValues.g,
15
+ b = _hexToRGBAValues.b,
16
+ a = _hexToRGBAValues.a;
18
17
  return "rgb".concat(a ? 'a' : '', "(").concat(r, ",").concat(g, ",").concat(b).concat(a ? ",".concat(a) : '', ")");
19
18
  };
20
19
  export var getLuminance = function getLuminance(_ref) {
21
20
  var r = _ref.r,
22
- g = _ref.g,
23
- b = _ref.b;
21
+ g = _ref.g,
22
+ b = _ref.b;
24
23
  return (r * 299 + g * 587 + b * 114) / 1000;
25
24
  };
25
+
26
26
  /**
27
27
  * Returns an accessible hard-coded text color based on the color contrast with
28
28
  * the background.
@@ -32,14 +32,12 @@ export var getLuminance = function getLuminance(_ref) {
32
32
  * of a hard-coded color. This is to support more transparent backgrounds
33
33
  * to allow the text to invert colors depending on the current theme's surface color.
34
34
  */
35
-
36
35
  export var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
37
36
  var _hexToRGBAValues2 = hexToRGBAValues(hex),
38
- r = _hexToRGBAValues2.r,
39
- g = _hexToRGBAValues2.g,
40
- b = _hexToRGBAValues2.b,
41
- a = _hexToRGBAValues2.a;
42
-
37
+ r = _hexToRGBAValues2.r,
38
+ g = _hexToRGBAValues2.g,
39
+ b = _hexToRGBAValues2.b,
40
+ a = _hexToRGBAValues2.a;
43
41
  var lum = getLuminance({
44
42
  r: r,
45
43
  g: g,
@@ -51,29 +49,26 @@ export var getTextColorForBackground = function getTextColorForBackground(hex, o
51
49
  dark: a > alphaLimit
52
50
  };
53
51
  var alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
54
-
55
52
  if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
56
53
  // This color is transparent, so the text will mainly cast onto the surface behind.
57
54
  // Needs to use tokens otherwise Dark mode would cause black text on black surface
58
55
  return token('color.text', 'black');
59
56
  }
60
-
61
57
  return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
62
58
  };
59
+
63
60
  /**
64
61
  * Returns a border if determined to be required based on the color contrast with
65
62
  * the background.
66
63
  *
67
64
  * @param hex - The Hex color code of the background
68
65
  */
69
-
70
66
  export var getBorderForBackground = function getBorderForBackground(hex) {
71
67
  var _hexToRGBAValues3 = hexToRGBAValues(hex),
72
- r = _hexToRGBAValues3.r,
73
- g = _hexToRGBAValues3.g,
74
- b = _hexToRGBAValues3.b,
75
- a = _hexToRGBAValues3.a;
76
-
68
+ r = _hexToRGBAValues3.r,
69
+ g = _hexToRGBAValues3.g,
70
+ b = _hexToRGBAValues3.b,
71
+ a = _hexToRGBAValues3.a;
77
72
  var lum = getLuminance({
78
73
  r: r,
79
74
  g: g,
@@ -81,24 +76,22 @@ export var getBorderForBackground = function getBorderForBackground(hex) {
81
76
  });
82
77
  return lum > 240 || a < 0.2 ? "1px solid ".concat(token('color.border', '#091E4224')) : undefined;
83
78
  };
79
+
84
80
  /**
85
81
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
86
82
  *
87
83
  * @param rawShadow - ShadowToken raw value
88
84
  */
89
-
90
85
  export var getBoxShadow = function getBoxShadow(rawShadow) {
91
86
  return rawShadow.map(function (_ref2) {
92
87
  var radius = _ref2.radius,
93
- offset = _ref2.offset,
94
- color = _ref2.color,
95
- opacity = _ref2.opacity;
96
-
88
+ offset = _ref2.offset,
89
+ color = _ref2.color,
90
+ opacity = _ref2.opacity;
97
91
  var _hexToRGBAValues4 = hexToRGBAValues(color),
98
- r = _hexToRGBAValues4.r,
99
- g = _hexToRGBAValues4.g,
100
- b = _hexToRGBAValues4.b;
101
-
92
+ r = _hexToRGBAValues4.r,
93
+ g = _hexToRGBAValues4.g,
94
+ b = _hexToRGBAValues4.b;
102
95
  return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
103
96
  }).join(',');
104
97
  };
package/dist/esm/utils/theme-loading.js ADDED
@@ -0,0 +1,60 @@
1
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
3
+ import themeImportMap from '../artifacts/theme-import-map';
4
+ import { THEME_DATA_ATTRIBUTE } from '../constants';
5
+ export var loadAndAppendThemeCss = /*#__PURE__*/function () {
6
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
7
+ var themeCss, style;
8
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
9
+ while (1) {
10
+ switch (_context.prev = _context.next) {
11
+ case 0:
12
+ if (!document.head.querySelector("style[".concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"))) {
13
+ _context.next = 2;
14
+ break;
15
+ }
16
+ return _context.abrupt("return");
17
+ case 2:
18
+ _context.next = 4;
19
+ return loadThemeCss(themeId);
20
+ case 4:
21
+ themeCss = _context.sent;
22
+ style = document.createElement('style');
23
+ style.textContent = themeCss;
24
+ style.dataset.theme = themeId;
25
+ document.head.appendChild(style);
26
+ case 9:
27
+ case "end":
28
+ return _context.stop();
29
+ }
30
+ }
31
+ }, _callee);
32
+ }));
33
+ return function loadAndAppendThemeCss(_x) {
34
+ return _ref.apply(this, arguments);
35
+ };
36
+ }();
37
+ export var loadThemeCss = /*#__PURE__*/function () {
38
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeId) {
39
+ var _yield$themeImportMap, themeCss;
40
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
41
+ while (1) {
42
+ switch (_context2.prev = _context2.next) {
43
+ case 0:
44
+ _context2.next = 2;
45
+ return themeImportMap[themeId]();
46
+ case 2:
47
+ _yield$themeImportMap = _context2.sent;
48
+ themeCss = _yield$themeImportMap.default;
49
+ return _context2.abrupt("return", themeCss);
50
+ case 5:
51
+ case "end":
52
+ return _context2.stop();
53
+ }
54
+ }
55
+ }, _callee2);
56
+ }));
57
+ return function loadThemeCss(_x2) {
58
+ return _ref2.apply(this, arguments);
59
+ };
60
+ }();
package/dist/esm/utils/theme-state-transformer.js ADDED
@@ -0,0 +1,64 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import { themeIds } from '../theme-config';
3
+ var themeKinds = ['light', 'dark', 'spacing', 'typography'];
4
+ var isThemeKind = function isThemeKind(themeKind) {
5
+ return themeKinds.find(function (kind) {
6
+ return kind === themeKind;
7
+ }) !== undefined;
8
+ };
9
+ var isThemeIds = function isThemeIds(themeId) {
10
+ return themeIds.find(function (id) {
11
+ return id === themeId;
12
+ }) !== undefined;
13
+ };
14
+ var isColorMode = function isColorMode(modeId) {
15
+ return ['light', 'dark', 'auto'].includes(modeId);
16
+ };
17
+ /**
18
+ * Converts a string that is formatted for the `data-theme` HTML attribute
19
+ * to an object that can be passed to `setGlobalTheme`.
20
+ *
21
+ * @param {string} themes The themes that should be applied.
22
+ *
23
+ * @example
24
+ * ```
25
+ * themeStringToObject('dark:dark light:legacy-light spacing:spacing');
26
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
27
+ * ```
28
+ */
29
+ export var themeStringToObject = function themeStringToObject(themeState) {
30
+ return themeState.split(' ').map(function (theme) {
31
+ return theme.split(':');
32
+ }).reduce(function (themeObject, _ref) {
33
+ var _ref2 = _slicedToArray(_ref, 2),
34
+ kind = _ref2[0],
35
+ id = _ref2[1];
36
+ if (kind === 'colorMode' && isColorMode(id)) {
37
+ themeObject[kind] = id;
38
+ }
39
+ if (isThemeKind(kind) && isThemeIds(id)) {
40
+ themeObject[kind] = id;
41
+ }
42
+ return themeObject;
43
+ }, {});
44
+ };
45
+
46
+ /**
47
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
48
+ *
49
+ * @param {object} themes The themes that should be applied.
50
+ *
51
+ * @example
52
+ * ```
53
+ * themeObjectToString({ dark: 'dark', light: 'legacy-light', spacing: 'spacing' });
54
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
55
+ * ```
56
+ */
57
+ export var themeObjectToString = function themeObjectToString(themeState) {
58
+ return Object.entries(themeState).reduce(function (themeString, _ref3) {
59
+ var _ref4 = _slicedToArray(_ref3, 2),
60
+ kind = _ref4[0],
61
+ id = _ref4[1];
62
+ return (kind === 'colorMode' || isThemeKind(kind)) && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
63
+ }, '');
64
+ };
package/dist/esm/utils/token-ids.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
3
+
3
4
  /**
4
5
  * Transforms a style dictionary token path to a CSS custom property.
5
6
  *
@@ -14,15 +15,16 @@ import { CSS_PREFIX, CSS_VAR_FULL } from '../constants';
14
15
  * // Returns ds-background-bold
15
16
  * getCSSCustomProperty('color.background.bold.[default]')
16
17
  */
17
-
18
18
  export var getCSSCustomProperty = function getCSSCustomProperty(path) {
19
- var normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
19
+ var normalizedPath = typeof path === 'string' ? path.split('.') : path;
20
20
 
21
+ // Opacity and other 'shallow' groups are more readable when not trimmed
21
22
  var slice = CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
22
23
  return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(slice))).filter(function (el) {
23
24
  return el !== '[default]';
24
25
  }).join('-'));
25
26
  };
27
+
26
28
  /**
27
29
  * Transforms a style dictionary token path to a shorthand token id
28
30
  * These ids will be typically be how tokens are interacted with via typescript and css
@@ -37,13 +39,13 @@ export var getCSSCustomProperty = function getCSSCustomProperty(path) {
37
39
  * // Returns color.background.bold
38
40
  * getTokenId('color.background.bold.[default]')
39
41
  */
40
-
41
42
  export var getTokenId = function getTokenId(path) {
42
43
  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
43
44
  return normalizedPath.filter(function (el) {
44
45
  return el !== '[default]';
45
46
  }).join('.');
46
47
  };
48
+
47
49
  /**
48
50
  * Transforms a style dictionary token path to a fully qualified token id
49
51
  * These Ids are intended to be used internal to this package by style-dictionary
@@ -54,7 +56,6 @@ export var getTokenId = function getTokenId(path) {
54
56
  * // Returns color.background.bold.[default]
55
57
  * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
56
58
  */
57
-
58
59
  export var getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
59
60
  return path.join('.');
60
61
  };
package/dist/esm/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.13.5",
3
+ "version": "1.0.0",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/types/artifacts/replacement-mapping.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::f641b000c13ad37f0b16624edf778c41>>
15
+ * @codegen <<SignedSource::6b49e32a168095446e0fc8a0f9b4ca39>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
  import tokens from './token-names';
package/dist/types/artifacts/theme-import-map.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ *
4
+ * This file contains a dynamic import for each theme this package exports.
5
+ * Themes are loaded asynchronously at runtime to minimise the amount of CSS we send to the client.
6
+ * This allows users to compose their themes and only use the tokens that are requested.
7
+ * When a new theme is created, the import should automatically be added to the map
8
+ *
9
+ * @codegen <<SignedSource::dca5807b567cf95fcec4906be228f65f>>
10
+ * @codegenCommand yarn build tokens
11
+ */
12
+ import { ThemeIds } from '../theme-config';
13
+ declare const themeImportsMap: Record<ThemeIds, () => Promise<{
14
+ default: string;
15
+ }>>;
16
+ export default themeImportsMap;
package/dist/types/artifacts/themes/atlassian-dark.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n --ds-text: #C7D1DB;\n --ds-text-accent-red: #FF9C8F;\n --ds-text-accent-red-bolder: #FFD2CC;\n --ds-text-accent-orange: #FEC57B;\n --ds-text-accent-orange-bolder: #FFE2BD;\n --ds-text-accent-yellow: #F5CD47;\n --ds-text-accent-yellow-bolder: #F8E6A0;\n --ds-text-accent-green: #7EE2B8;\n --ds-text-accent-green-bolder: #BAF3DB;\n --ds-text-accent-teal: #8BDBE5;\n --ds-text-accent-teal-bolder: #C1F0F5;\n --ds-text-accent-blue: #85B8FF;\n --ds-text-accent-blue-bolder: #CCE0FF;\n --ds-text-accent-purple: #B8ACF6;\n --ds-text-accent-purple-bolder: #DFD8FD;\n --ds-text-accent-magenta: #F797D2;\n --ds-text-accent-magenta-bolder: #FDD0EC;\n --ds-text-accent-gray: #9FADBC;\n --ds-text-accent-gray-bolder: #C7D1DB;\n --ds-text-disabled: #BFDBF847;\n --ds-text-inverse: #161A1D;\n --ds-text-selected: #579DFF;\n --ds-text-brand: #579DFF;\n --ds-text-danger: #FF9C8F;\n --ds-text-warning: #F5CD47;\n --ds-text-warning-inverse: #161A1D;\n --ds-text-success: #7EE2B8;\n --ds-text-discovery: #B8ACF6;\n --ds-text-information: #85B8FF;\n --ds-text-subtlest: #8696A7;\n --ds-text-subtle: #9FADBC;\n --ds-link: #579DFF;\n --ds-link-pressed: #85B8FF;\n --ds-icon: #9FADBC;\n --ds-icon-accent-red: #EF5C48;\n --ds-icon-accent-orange: #F18D13;\n --ds-icon-accent-yellow: #CF9F02;\n --ds-icon-accent-green: #2ABB7F;\n --ds-icon-accent-teal: #37B4C3;\n --ds-icon-accent-blue: #388BFF;\n --ds-icon-accent-purple: #8F7EE7;\n --ds-icon-accent-magenta: #DA62AC;\n --ds-icon-accent-gray: #738496;\n --ds-icon-disabled: #BFDBF847;\n --ds-icon-inverse: #161A1D;\n --ds-icon-selected: #579DFF;\n --ds-icon-brand: #579DFF;\n --ds-icon-danger: #EF5C48;\n --ds-icon-warning: #CF9F02;\n --ds-icon-warning-inverse: #161A1D;\n --ds-icon-success: #2ABB7F;\n --ds-icon-discovery: #8F7EE7;\n --ds-icon-information: #388BFF;\n --ds-icon-subtle: #8696A7;\n --ds-border: #A6C5E229;\n --ds-border-accent-red: #EF5C48;\n --ds-border-accent-orange: #F18D13;\n --ds-border-accent-yellow: #CF9F02;\n --ds-border-accent-green: #2ABB7F;\n --ds-border-accent-teal: #37B4C3;\n --ds-border-accent-blue: #388BFF;\n --ds-border-accent-purple: #8F7EE7;\n --ds-border-accent-magenta: #DA62AC;\n --ds-border-accent-gray: #738496;\n --ds-border-disabled: #A1BDD914;\n --ds-border-focused: #85B8FF;\n --ds-border-input: #A6C5E229;\n --ds-border-inverse: #161A1D;\n --ds-border-selected: #579DFF;\n --ds-border-brand: #579DFF;\n --ds-border-danger: #EF5C48;\n --ds-border-warning: #CF9F02;\n --ds-border-success: #2ABB7F;\n --ds-border-discovery: #8F7EE7;\n --ds-border-information: #388BFF;\n --ds-border-bold: #738496;\n --ds-background-accent-red-subtlest: #391813;\n --ds-background-accent-red-subtler: #601E16;\n --ds-background-accent-red-subtle: #AE2A19;\n --ds-background-accent-red-bolder: #F87462;\n --ds-background-accent-orange-subtlest: #43290F;\n --ds-background-accent-orange-subtler: #5F3811;\n --ds-background-accent-orange-subtle: #974F0C;\n --ds-background-accent-orange-bolder: #FAA53D;\n --ds-background-accent-yellow-subtlest: #3D2E00;\n --ds-background-accent-yellow-subtler: #533F04;\n --ds-background-accent-yellow-subtle: #7F5F01;\n --ds-background-accent-yellow-bolder: #E2B203;\n --ds-background-accent-green-subtlest: #133527;\n --ds-background-accent-green-subtler: #164B35;\n --ds-background-accent-green-subtle: #216E4E;\n --ds-background-accent-green-bolder: #4BCE97;\n --ds-background-accent-teal-subtlest: #153337;\n --ds-background-accent-teal-subtler: #1D474C;\n --ds-background-accent-teal-subtle: #206B74;\n --ds-background-accent-teal-bolder: #60C6D2;\n --ds-background-accent-blue-subtlest: #082145;\n --ds-background-accent-blue-subtler: #09326C;\n --ds-background-accent-blue-subtle: #0055CC;\n --ds-background-accent-blue-bolder: #579DFF;\n --ds-background-accent-purple-subtlest: #231C3F;\n --ds-background-accent-purple-subtler: #352C63;\n --ds-background-accent-purple-subtle: #5E4DB2;\n --ds-background-accent-purple-bolder: #9F8FEF;\n --ds-background-accent-magenta-subtlest: #341829;\n --ds-background-accent-magenta-subtler: #50253F;\n --ds-background-accent-magenta-subtle: #943D73;\n --ds-background-accent-magenta-bolder: #E774BB;\n --ds-background-accent-gray-subtlest: #2C333A;\n --ds-background-accent-gray-subtler: #454F59;\n --ds-background-accent-gray-subtle: #596773;\n --ds-background-accent-gray-bolder: #8696A7;\n --ds-background-disabled: #BCD6F00A;\n --ds-background-input: #1D2125;\n --ds-background-input-hovered: #22272B;\n --ds-background-input-pressed: #1D2125;\n --ds-background-inverse-subtle: #FFFFFF29;\n --ds-background-inverse-subtle-hovered: #FFFFFF3D;\n --ds-background-inverse-subtle-pressed: #FFFFFF52;\n --ds-background-neutral: #A1BDD914;\n --ds-background-neutral-hovered: #A6C5E229;\n --ds-background-neutral-pressed: #BFDBF847;\n --ds-background-neutral-subtle: #00000000;\n --ds-background-neutral-subtle-hovered: #A1BDD914;\n --ds-background-neutral-subtle-pressed: #A6C5E229;\n --ds-background-neutral-bold: #9FADBC;\n --ds-background-neutral-bold-hovered: #B6C2CF;\n --ds-background-neutral-bold-pressed: #C7D1DB;\n --ds-background-selected: #082145;\n --ds-background-selected-hovered: #09326C;\n --ds-background-selected-pressed: #0055CC;\n --ds-background-selected-bold: #579DFF;\n --ds-background-selected-bold-hovered: #85B8FF;\n --ds-background-selected-bold-pressed: #CCE0FF;\n --ds-background-brand-bold: #579DFF;\n --ds-background-brand-bold-hovered: #85B8FF;\n --ds-background-brand-bold-pressed: #CCE0FF;\n --ds-background-danger: #391813;\n --ds-background-danger-hovered: #601E16;\n --ds-background-danger-pressed: #AE2A19;\n --ds-background-danger-bold: #F87462;\n --ds-background-danger-bold-hovered: #FF9C8F;\n --ds-background-danger-bold-pressed: #FFD2CC;\n --ds-background-warning: #3D2E00;\n --ds-background-warning-hovered: #533F04;\n --ds-background-warning-pressed: #7F5F01;\n --ds-background-warning-bold: #E2B203;\n --ds-background-warning-bold-hovered: #F5CD47;\n --ds-background-warning-bold-pressed: #F8E6A0;\n --ds-background-success: #133527;\n --ds-background-success-hovered: #164B35;\n --ds-background-success-pressed: #216E4E;\n --ds-background-success-bold: #4BCE97;\n --ds-background-success-bold-hovered: #7EE2B8;\n --ds-background-success-bold-pressed: #BAF3DB;\n --ds-background-discovery: #231C3F;\n --ds-background-discovery-hovered: #352C63;\n --ds-background-discovery-pressed: #5E4DB2;\n --ds-background-discovery-bold: #9F8FEF;\n --ds-background-discovery-bold-hovered: #B8ACF6;\n --ds-background-discovery-bold-pressed: #DFD8FD;\n --ds-background-information: #082145;\n --ds-background-information-hovered: #09326C;\n --ds-background-information-pressed: #0055CC;\n --ds-background-information-bold: #579DFF;\n --ds-background-information-bold-hovered: #85B8FF;\n --ds-background-information-bold-pressed: #CCE0FF;\n --ds-blanket: #03040442;\n --ds-blanket-selected: #1D7AFC14;\n --ds-blanket-danger: #E3493514;\n --ds-interaction-hovered: #ffffff33;\n --ds-interaction-pressed: #ffffff5c;\n --ds-skeleton: #A1BDD914;\n --ds-skeleton-subtle: #BCD6F00A;\n --ds-chart-categorical-1: #1D9AAA;\n --ds-chart-categorical-1-hovered: #37B4C3;\n --ds-chart-categorical-2: #B8ACF6;\n --ds-chart-categorical-2-hovered: #DFD8FD;\n --ds-chart-categorical-3: #D97008;\n --ds-chart-categorical-3-hovered: #F18D13;\n --ds-chart-categorical-4: #F797D2;\n --ds-chart-categorical-4-hovered: #FDD0EC;\n --ds-chart-categorical-5: #CCE0FF;\n --ds-chart-categorical-5-hovered: #E9F2FF;\n --ds-chart-categorical-6: #8270DB;\n --ds-chart-categorical-6-hovered: #8F7EE7;\n --ds-chart-categorical-7: #FDD0EC;\n --ds-chart-categorical-7-hovered: #FFECF8;\n --ds-chart-categorical-8: #FEC57B;\n --ds-chart-categorical-8-hovered: #FFE2BD;\n --ds-chart-neutral: #738496;\n --ds-chart-neutral-hovered: #8696A7;\n --ds-chart-red-bold: #E34935;\n --ds-chart-red-bold-hovered: #EF5C48;\n --ds-chart-red-bolder: #EF5C48;\n --ds-chart-red-bolder-hovered: #F87462;\n --ds-chart-red-boldest: #FF9C8F;\n --ds-chart-red-boldest-hovered: #FFD2CC;\n --ds-chart-orange-bold: #F18D13;\n --ds-chart-orange-bold-hovered: #FAA53D;\n --ds-chart-orange-bolder: #FAA53D;\n --ds-chart-orange-bolder-hovered: #FEC57B;\n --ds-chart-orange-boldest: #FEC57B;\n --ds-chart-orange-boldest-hovered: #FFE2BD;\n --ds-chart-yellow-bold: #CF9F02;\n --ds-chart-yellow-bold-hovered: #E2B203;\n --ds-chart-yellow-bolder: #E2B203;\n --ds-chart-yellow-bolder-hovered: #F5CD47;\n --ds-chart-yellow-boldest: #F5CD47;\n --ds-chart-yellow-boldest-hovered: #F8E6A0;\n --ds-chart-green-bold: #2ABB7F;\n --ds-chart-green-bold-hovered: #4BCE97;\n --ds-chart-green-bolder: #4BCE97;\n --ds-chart-green-bolder-hovered: #7EE2B8;\n --ds-chart-green-boldest: #7EE2B8;\n --ds-chart-green-boldest-hovered: #BAF3DB;\n --ds-chart-teal-bold: #37B4C3;\n --ds-chart-teal-bold-hovered: #60C6D2;\n --ds-chart-teal-bolder: #60C6D2;\n --ds-chart-teal-bolder-hovered: #8BDBE5;\n --ds-chart-teal-boldest: #8BDBE5;\n --ds-chart-teal-boldest-hovered: #C1F0F5;\n --ds-chart-blue-bold: #1D7AFC;\n --ds-chart-blue-bold-hovered: #388BFF;\n --ds-chart-blue-bolder: #388BFF;\n --ds-chart-blue-bolder-hovered: #579DFF;\n --ds-chart-blue-boldest: #85B8FF;\n --ds-chart-blue-boldest-hovered: #CCE0FF;\n --ds-chart-purple-bold: #8270DB;\n --ds-chart-purple-bold-hovered: #8F7EE7;\n --ds-chart-purple-bolder: #8F7EE7;\n --ds-chart-purple-bolder-hovered: #9F8FEF;\n --ds-chart-purple-boldest: #B8ACF6;\n --ds-chart-purple-boldest-hovered: #DFD8FD;\n --ds-chart-magenta-bold: #CD519D;\n --ds-chart-magenta-bold-hovered: #DA62AC;\n --ds-chart-magenta-bolder: #DA62AC;\n --ds-chart-magenta-bolder-hovered: #E774BB;\n --ds-chart-magenta-boldest: #F797D2;\n --ds-chart-magenta-boldest-hovered: #FDD0EC;\n --ds-chart-gray-bold: #738496;\n --ds-chart-gray-bold-hovered: #8696A7;\n --ds-chart-gray-bolder: #8696A7;\n --ds-chart-gray-bolder-hovered: #9FADBC;\n --ds-chart-gray-boldest: #9FADBC;\n --ds-chart-gray-boldest-hovered: #B6C2CF;\n --ds-chart-brand: #388BFF;\n --ds-chart-brand-hovered: #579DFF;\n --ds-chart-danger: #E34935;\n --ds-chart-danger-hovered: #EF5C48;\n --ds-chart-danger-bold: #FF9C8F;\n --ds-chart-danger-bold-hovered: #FFD2CC;\n --ds-chart-warning: #CF9F02;\n --ds-chart-warning-hovered: #E2B203;\n --ds-chart-warning-bold: #F5CD47;\n --ds-chart-warning-bold-hovered: #F8E6A0;\n --ds-chart-success: #2ABB7F;\n --ds-chart-success-hovered: #4BCE97;\n --ds-chart-success-bold: #7EE2B8;\n --ds-chart-success-bold-hovered: #BAF3DB;\n --ds-chart-discovery: #8270DB;\n --ds-chart-discovery-hovered: #8F7EE7;\n --ds-chart-discovery-bold: #B8ACF6;\n --ds-chart-discovery-bold-hovered: #DFD8FD;\n --ds-chart-information: #1D7AFC;\n --ds-chart-information-hovered: #388BFF;\n --ds-chart-information-bold: #85B8FF;\n --ds-chart-information-bold-hovered: #CCE0FF;\n --ds-surface: #161A1D;\n --ds-surface-hovered: #1D2125;\n --ds-surface-pressed: #22272B;\n --ds-surface-overlay: #22272B;\n --ds-surface-overlay-hovered: #2C333A;\n --ds-surface-overlay-pressed: #454F59;\n --ds-surface-raised: #1D2125;\n --ds-surface-raised-hovered: #22272B;\n --ds-surface-raised-pressed: #2C333A;\n --ds-surface-sunken: #101214;\n --ds-shadow-overflow: 0px 0px 12px #0304048F, 0px 0px 1px #03040480;\n --ds-shadow-overflow-perimeter: #03040480;\n --ds-shadow-overflow-spread: #0304048f;\n --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F00A, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;\n --ds-shadow-raised: inset 0px 0px 0px 1px #00000000, 0px 1px 1px #03040480, 0px 0px 1px #03040480;\n --ds-opacity-disabled: 0.4;\n --ds-opacity-loading: 0.2;\n --ds-UNSAFE-transparent: transparent;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::5ebc0ca923ac9d720dfbb56f051b5f17>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;
package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-dark\"] {\n --ds-text: #E6EDFA;\n --ds-text-accent-red: #FF5630;\n --ds-text-accent-red-bolder: #FF7452;\n --ds-text-accent-orange: #FEC57B;\n --ds-text-accent-orange-bolder: #F18D13;\n --ds-text-accent-yellow: #FFAB00;\n --ds-text-accent-yellow-bolder: #FFC400;\n --ds-text-accent-green: #36B37E;\n --ds-text-accent-green-bolder: #57D9A3;\n --ds-text-accent-teal: #00B8D9;\n --ds-text-accent-teal-bolder: #00C7E6;\n --ds-text-accent-blue: #0065FF;\n --ds-text-accent-blue-bolder: #2684FF;\n --ds-text-accent-purple: #6554C0;\n --ds-text-accent-purple-bolder: #8777D9;\n --ds-text-accent-magenta: #F797D2;\n --ds-text-accent-magenta-bolder: #FDD0EC;\n --ds-text-accent-gray: #8C9CB8;\n --ds-text-accent-gray-bolder: #ABBBD6;\n --ds-text-disabled: #1B2638;\n --ds-text-inverse: #0D1424;\n --ds-text-selected: #0052CC;\n --ds-text-brand: #0052CC;\n --ds-text-danger: #FF5630;\n --ds-text-warning: #172B4D;\n --ds-text-warning-inverse: #0D1424;\n --ds-text-success: #36B37E;\n --ds-text-discovery: #6554C0;\n --ds-text-information: #0065FF;\n --ds-text-subtlest: #7988A3;\n --ds-text-subtle: #9FB0CC;\n --ds-link: #0052CC;\n --ds-link-pressed: #0065FF;\n --ds-icon: #DCE5F5;\n --ds-icon-accent-red: #BF2600;\n --ds-icon-accent-orange: #F18D13;\n --ds-icon-accent-yellow: #FF8B00;\n --ds-icon-accent-green: #006644;\n --ds-icon-accent-teal: #008DA6;\n --ds-icon-accent-blue: #0747A6;\n --ds-icon-accent-purple: #403294;\n --ds-icon-accent-magenta: #DA62AC;\n --ds-icon-accent-gray: #B8C7E0;\n --ds-icon-disabled: #0d14245b;\n --ds-icon-inverse: #202B3D;\n --ds-icon-selected: #4C9AFF;\n --ds-icon-brand: #4C9AFF;\n --ds-icon-danger: #FF8F73;\n --ds-icon-warning: #FFF0B3;\n --ds-icon-warning-inverse: #202B3D;\n --ds-icon-success: #57D9A3;\n --ds-icon-discovery: #998DD9;\n --ds-icon-information: #B3D4FF;\n --ds-icon-subtle: #202B3D;\n --ds-border: #202B3D;\n --ds-border-accent-red: #BF2600;\n --ds-border-accent-orange: #F18D13;\n --ds-border-accent-yellow: #FF8B00;\n --ds-border-accent-green: #006644;\n --ds-border-accent-teal: #008DA6;\n --ds-border-accent-blue: #0747A6;\n --ds-border-accent-purple: #403294;\n --ds-border-accent-magenta: #DA62AC;\n --ds-border-accent-gray: #B8C7E0;\n --ds-border-disabled: #0E1624;\n --ds-border-focused: #B3D4FF;\n --ds-border-input: #202B3D;\n --ds-border-inverse: #0D1424;\n --ds-border-selected: #0052CC;\n --ds-border-brand: #0052CC;\n --ds-border-danger: #DE350B;\n --ds-border-warning: #FF8B00;\n --ds-border-success: #006644;\n --ds-border-discovery: #403294;\n --ds-border-information: #0747A6;\n --ds-border-bold: #7988A3;\n --ds-background-accent-red-subtlest: #BF2600;\n --ds-background-accent-red-subtler: #DE350B;\n --ds-background-accent-red-subtle: #FF5630;\n --ds-background-accent-red-bolder: #FF8F73;\n --ds-background-accent-orange-subtlest: #43290F;\n --ds-background-accent-orange-subtler: #5F3811;\n --ds-background-accent-orange-subtle: #974F0C;\n --ds-background-accent-orange-bolder: #F18D13;\n --ds-background-accent-yellow-subtlest: #FF8B00;\n --ds-background-accent-yellow-subtler: #FF991F;\n --ds-background-accent-yellow-subtle: #FFAB00;\n --ds-background-accent-yellow-bolder: #FFE380;\n --ds-background-accent-green-subtlest: #006644;\n --ds-background-accent-green-subtler: #00875A;\n --ds-background-accent-green-subtle: #36B37E;\n --ds-background-accent-green-bolder: #79F2C0;\n --ds-background-accent-teal-subtlest: #008DA6;\n --ds-background-accent-teal-subtler: #00A3BF;\n --ds-background-accent-teal-subtle: #00B8D9;\n --ds-background-accent-teal-bolder: #79E2F2;\n --ds-background-accent-blue-subtlest: #0747A6;\n --ds-background-accent-blue-subtler: #0052CC;\n --ds-background-accent-blue-subtle: #0065FF;\n --ds-background-accent-blue-bolder: #4C9AFF;\n --ds-background-accent-purple-subtlest: #403294;\n --ds-background-accent-purple-subtler: #5243AA;\n --ds-background-accent-purple-subtle: #6554C0;\n --ds-background-accent-purple-bolder: #998DD9;\n --ds-background-accent-magenta-subtlest: #341829;\n --ds-background-accent-magenta-subtler: #50253F;\n --ds-background-accent-magenta-subtle: #943D73;\n --ds-background-accent-magenta-bolder: #E774BB;\n --ds-background-accent-gray-subtlest: #8C9CB8;\n --ds-background-accent-gray-subtler: #9FB0CC;\n --ds-background-accent-gray-subtle: #ABBBD6;\n --ds-background-accent-gray-bolder: #CED9EB;\n --ds-background-disabled: #3B475C;\n --ds-background-input: #0E1624;\n --ds-background-input-hovered: #1B2638;\n --ds-background-input-pressed: #0D1424;\n --ds-background-inverse-subtle: #FFFFFF29;\n --ds-background-inverse-subtle-hovered: #FFFFFF3D;\n --ds-background-inverse-subtle-pressed: #FFFFFF52;\n --ds-background-neutral: #3B475C;\n --ds-background-neutral-hovered: #313D52;\n --ds-background-neutral-pressed: #B3D4FF;\n --ds-background-neutral-subtle: transparent;\n --ds-background-neutral-subtle-hovered: #313D52;\n --ds-background-neutral-subtle-pressed: #B3D4FF;\n --ds-background-neutral-bold: #CED9EB;\n --ds-background-neutral-bold-hovered: #B8C7E0;\n --ds-background-neutral-bold-pressed: #DCE5F5;\n --ds-background-selected: #DEEBFF;\n --ds-background-selected-hovered: #B3D4FF;\n --ds-background-selected-pressed: #4C9AFF;\n --ds-background-selected-bold: #0052CC;\n --ds-background-selected-bold-hovered: #0065FF;\n --ds-background-selected-bold-pressed: #0747A6;\n --ds-background-brand-bold: #0052CC;\n --ds-background-brand-bold-hovered: #0065FF;\n --ds-background-brand-bold-pressed: #0747A6;\n --ds-background-danger: #FFEBE6;\n --ds-background-danger-hovered: #FFBDAD;\n --ds-background-danger-pressed: #FF8F73;\n --ds-background-danger-bold: #FF5630;\n --ds-background-danger-bold-hovered: #FF7452;\n --ds-background-danger-bold-pressed: #DE350B;\n --ds-background-warning: #FFFAE6;\n --ds-background-warning-hovered: #FFF0B3;\n --ds-background-warning-pressed: #FFE380;\n --ds-background-warning-bold: #FFAB00;\n --ds-background-warning-bold-hovered: #FFC400;\n --ds-background-warning-bold-pressed: #FF991F;\n --ds-background-success: #E3FCEF;\n --ds-background-success-hovered: #ABF5D1;\n --ds-background-success-pressed: #79F2C0;\n --ds-background-success-bold: #00875A;\n --ds-background-success-bold-hovered: #36B37E;\n --ds-background-success-bold-pressed: #006644;\n --ds-background-discovery: #EAE6FF;\n --ds-background-discovery-hovered: #C0B6F2;\n --ds-background-discovery-pressed: #998DD9;\n --ds-background-discovery-bold: #5243AA;\n --ds-background-discovery-bold-hovered: #6554C0;\n --ds-background-discovery-bold-pressed: #403294;\n --ds-background-information: #DEEBFF;\n --ds-background-information-hovered: #B3D4FF;\n --ds-background-information-pressed: #4C9AFF;\n --ds-background-information-bold: #0052CC;\n --ds-background-information-bold-hovered: #0065FF;\n --ds-background-information-bold-pressed: #0747A6;\n --ds-blanket: #0d1424a0;\n --ds-blanket-selected: #1D7AFC14;\n --ds-blanket-danger: #E3493514;\n --ds-interaction-hovered: #ffffff33;\n --ds-interaction-pressed: #ffffff5c;\n --ds-skeleton: #0d1424f2;\n --ds-skeleton-subtle: #0d1424f7;\n --ds-chart-categorical-1: #00B8D9;\n --ds-chart-categorical-1-hovered: #00C7E6;\n --ds-chart-categorical-2: #6554C0;\n --ds-chart-categorical-2-hovered: #8777D9;\n --ds-chart-categorical-3: #D97008;\n --ds-chart-categorical-3-hovered: #F18D13;\n --ds-chart-categorical-4: #F797D2;\n --ds-chart-categorical-4-hovered: #FDD0EC;\n --ds-chart-categorical-5: #0065FF;\n --ds-chart-categorical-5-hovered: #2684FF;\n --ds-chart-categorical-6: #6554C0;\n --ds-chart-categorical-6-hovered: #8777D9;\n --ds-chart-categorical-7: #FDD0EC;\n --ds-chart-categorical-7-hovered: #FFECF8;\n --ds-chart-categorical-8: #FEC57B;\n --ds-chart-categorical-8-hovered: #FFE2BD;\n --ds-chart-neutral: #B8C7E0;\n --ds-chart-neutral-hovered: #ABBBD6;\n --ds-chart-red-bold: #BF2600;\n --ds-chart-red-bold-hovered: #DE350B;\n --ds-chart-red-bolder: #DE350B;\n --ds-chart-red-bolder-hovered: #FF5630;\n --ds-chart-red-boldest: #FF5630;\n --ds-chart-red-boldest-hovered: #FF7452;\n --ds-chart-orange-bold: #F18D13;\n --ds-chart-orange-bold-hovered: #FAA53D;\n --ds-chart-orange-bolder: #FAA53D;\n --ds-chart-orange-bolder-hovered: #FEC57B;\n --ds-chart-orange-boldest: #FEC57B;\n --ds-chart-orange-boldest-hovered: #FFE2BD;\n --ds-chart-yellow-bold: #FF8B00;\n --ds-chart-yellow-bold-hovered: #FF991F;\n --ds-chart-yellow-bolder: #FF991F;\n --ds-chart-yellow-bolder-hovered: #FFAB00;\n --ds-chart-yellow-boldest: #FFAB00;\n --ds-chart-yellow-boldest-hovered: #FFC400;\n --ds-chart-green-bold: #006644;\n --ds-chart-green-bold-hovered: #00875A;\n --ds-chart-green-bolder: #00875A;\n --ds-chart-green-bolder-hovered: #36B37E;\n --ds-chart-green-boldest: #36B37E;\n --ds-chart-green-boldest-hovered: #57D9A3;\n --ds-chart-teal-bold: #008DA6;\n --ds-chart-teal-bold-hovered: #00A3BF;\n --ds-chart-teal-bolder: #00A3BF;\n --ds-chart-teal-bolder-hovered: #00B8D9;\n --ds-chart-teal-boldest: #00B8D9;\n --ds-chart-teal-boldest-hovered: #00C7E6;\n --ds-chart-blue-bold: #0747A6;\n --ds-chart-blue-bold-hovered: #0052CC;\n --ds-chart-blue-bolder: #0052CC;\n --ds-chart-blue-bolder-hovered: #0065FF;\n --ds-chart-blue-boldest: #0065FF;\n --ds-chart-blue-boldest-hovered: #2684FF;\n --ds-chart-purple-bold: #403294;\n --ds-chart-purple-bold-hovered: #5243AA;\n --ds-chart-purple-bolder: #5243AA;\n --ds-chart-purple-bolder-hovered: #6554C0;\n --ds-chart-purple-boldest: #6554C0;\n --ds-chart-purple-boldest-hovered: #8777D9;\n --ds-chart-magenta-bold: #CD519D;\n --ds-chart-magenta-bold-hovered: #DA62AC;\n --ds-chart-magenta-bolder: #DA62AC;\n --ds-chart-magenta-bolder-hovered: #E774BB;\n --ds-chart-magenta-boldest: #F797D2;\n --ds-chart-magenta-boldest-hovered: #FDD0EC;\n --ds-chart-gray-bold: #B8C7E0;\n --ds-chart-gray-bold-hovered: #CED9EB;\n --ds-chart-gray-bolder: #CED9EB;\n --ds-chart-gray-bolder-hovered: #DCE5F5;\n --ds-chart-gray-boldest: #DCE5F5;\n --ds-chart-gray-boldest-hovered: #E6EDFA;\n --ds-chart-brand: #0052CC;\n --ds-chart-brand-hovered: #0065FF;\n --ds-chart-danger: #DE350B;\n --ds-chart-danger-hovered: #FF5630;\n --ds-chart-danger-bold: #FF5630;\n --ds-chart-danger-bold-hovered: #FF7452;\n --ds-chart-warning: #FF991F;\n --ds-chart-warning-hovered: #FFAB00;\n --ds-chart-warning-bold: #FFAB00;\n --ds-chart-warning-bold-hovered: #FFC400;\n --ds-chart-success: #00875A;\n --ds-chart-success-hovered: #36B37E;\n --ds-chart-success-bold: #36B37E;\n --ds-chart-success-bold-hovered: #57D9A3;\n --ds-chart-discovery: #5243AA;\n --ds-chart-discovery-hovered: #6554C0;\n --ds-chart-discovery-bold: #6554C0;\n --ds-chart-discovery-bold-hovered: #8777D9;\n --ds-chart-information: #0052CC;\n --ds-chart-information-hovered: #0065FF;\n --ds-chart-information-bold: #0065FF;\n --ds-chart-information-bold-hovered: #2684FF;\n --ds-surface: #1B2638;\n --ds-surface-hovered: #202B3D;\n --ds-surface-pressed: #283447;\n --ds-surface-overlay: #7988A3;\n --ds-surface-overlay-hovered: #8C9CB8;\n --ds-surface-overlay-pressed: #9FB0CC;\n --ds-surface-raised: #455166;\n --ds-surface-raised-hovered: #56637A;\n --ds-surface-raised-pressed: #67758F;\n --ds-surface-sunken: #67758F;\n --ds-shadow-overflow: 0px 0px 12px #0304048F, 0px 0px 1px #03040480;\n --ds-shadow-overflow-perimeter: #03040480;\n --ds-shadow-overflow-spread: #0304048f;\n --ds-shadow-overlay: inset 0px 0px 0px 1px #0d14240A, 0px 8px 12px #0d14245C, 0px 0px 1px #0d142480;\n --ds-shadow-raised: inset 0px 0px 0px 1px #00000000, 0px 1px 1px #0d142480, 0px 0px 1px #0d142480;\n --ds-opacity-disabled: 0.4;\n --ds-opacity-loading: 0.2;\n --ds-UNSAFE-transparent: transparent;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::1c3f659ac4c8889e3e380cbceeca3bae>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;
package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ declare const _default: "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:legacy-light\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:legacy-light\"] {\n --ds-text: #172B4D;\n --ds-text-accent-red: #DE350B;\n --ds-text-accent-red-bolder: #BF2600;\n --ds-text-accent-orange: #F18D13;\n --ds-text-accent-orange-bolder: #B65C02;\n --ds-text-accent-yellow: #FF991F;\n --ds-text-accent-yellow-bolder: #FF8B00;\n --ds-text-accent-green: #00875A;\n --ds-text-accent-green-bolder: #006644;\n --ds-text-accent-teal: #00A3BF;\n --ds-text-accent-teal-bolder: #008DA6;\n --ds-text-accent-blue: #0052CC;\n --ds-text-accent-blue-bolder: #0747A6;\n --ds-text-accent-purple: #5243AA;\n --ds-text-accent-purple-bolder: #403294;\n --ds-text-accent-magenta: #E774BB;\n --ds-text-accent-magenta-bolder: #DA62AC;\n --ds-text-accent-gray: #505F79;\n --ds-text-accent-gray-bolder: #172B4D;\n --ds-text-disabled: #A5ADBA;\n --ds-text-inverse: #FFFFFF;\n --ds-text-selected: #0052CC;\n --ds-text-brand: #0065FF;\n --ds-text-danger: #DE350B;\n --ds-text-warning: #974F0C;\n --ds-text-warning-inverse: #172B4D;\n --ds-text-success: #006644;\n --ds-text-discovery: #403294;\n --ds-text-information: #0052CC;\n --ds-text-subtlest: #7A869A;\n --ds-text-subtle: #42526E;\n --ds-link: #0052CC;\n --ds-link-pressed: #0747A6;\n --ds-icon: #505F79;\n --ds-icon-accent-red: #FF5630;\n --ds-icon-accent-orange: #D94008;\n --ds-icon-accent-yellow: #FFAB00;\n --ds-icon-accent-green: #36B37E;\n --ds-icon-accent-teal: #00B8D9;\n --ds-icon-accent-blue: #0065FF;\n --ds-icon-accent-purple: #6554C0;\n --ds-icon-accent-magenta: #CD519D;\n --ds-icon-accent-gray: #5E6C84;\n --ds-icon-disabled: #8993A4;\n --ds-icon-inverse: #FFFFFF;\n --ds-icon-selected: #0052CC;\n --ds-icon-brand: #0065FF;\n --ds-icon-danger: #DE350B;\n --ds-icon-warning: #FFC400;\n --ds-icon-warning-inverse: #253858;\n --ds-icon-success: #00875A;\n --ds-icon-discovery: #8777D9;\n --ds-icon-information: #0747A6;\n --ds-icon-subtle: #6B778C;\n --ds-border: #091e4221;\n --ds-border-accent-red: #FF5630;\n --ds-border-accent-orange: #D94008;\n --ds-border-accent-yellow: #FFAB00;\n --ds-border-accent-green: #36B37E;\n --ds-border-accent-teal: #00B8D9;\n --ds-border-accent-blue: #0065FF;\n --ds-border-accent-purple: #6554C0;\n --ds-border-accent-magenta: #CD519D;\n --ds-border-accent-gray: #5E6C84;\n --ds-border-disabled: #FAFBFC;\n --ds-border-focused: #4C9AFF;\n --ds-border-input: #FAFBFC;\n --ds-border-inverse: #FFFFFF;\n --ds-border-selected: #0052CC;\n --ds-border-brand: #0052CC;\n --ds-border-danger: #FF5630;\n --ds-border-warning: #FFC400;\n --ds-border-success: #00875A;\n --ds-border-discovery: #998DD9;\n --ds-border-information: #0065FF;\n --ds-border-bold: #344563;\n --ds-background-accent-red-subtlest: #FF8F73;\n --ds-background-accent-red-subtler: #FF7452;\n --ds-background-accent-red-subtle: #DE350B;\n --ds-background-accent-red-bolder: #DE350B;\n --ds-background-accent-orange-subtlest: #F18D13;\n --ds-background-accent-orange-subtler: #B65C02;\n --ds-background-accent-orange-subtle: #5F3811;\n --ds-background-accent-orange-bolder: #43290F;\n --ds-background-accent-yellow-subtlest: #FFE380;\n --ds-background-accent-yellow-subtler: #FFC400;\n --ds-background-accent-yellow-subtle: #FF991F;\n --ds-background-accent-yellow-bolder: #FF991F;\n --ds-background-accent-green-subtlest: #79F2C0;\n --ds-background-accent-green-subtler: #57D9A3;\n --ds-background-accent-green-subtle: #00875A;\n --ds-background-accent-green-bolder: #00875A;\n --ds-background-accent-teal-subtlest: #79E2F2;\n --ds-background-accent-teal-subtler: #00C7E6;\n --ds-background-accent-teal-subtle: #00A3BF;\n --ds-background-accent-teal-bolder: #00A3BF;\n --ds-background-accent-blue-subtlest: #4C9AFF;\n --ds-background-accent-blue-subtler: #2684FF;\n --ds-background-accent-blue-subtle: #0052CC;\n --ds-background-accent-blue-bolder: #0052CC;\n --ds-background-accent-purple-subtlest: #998DD9;\n --ds-background-accent-purple-subtler: #8777D9;\n --ds-background-accent-purple-subtle: #5243AA;\n --ds-background-accent-purple-bolder: #5243AA;\n --ds-background-accent-magenta-subtlest: #E774BB;\n --ds-background-accent-magenta-subtler: #E774BB;\n --ds-background-accent-magenta-subtle: #E774BB;\n --ds-background-accent-magenta-bolder: #E774BB;\n --ds-background-accent-gray-subtlest: #6B778C;\n --ds-background-accent-gray-subtler: #5E6C84;\n --ds-background-accent-gray-subtle: #42526E;\n --ds-background-accent-gray-bolder: #505F79;\n --ds-background-disabled: #091e4289;\n --ds-background-input: #FAFBFC;\n --ds-background-input-hovered: #EBECF0;\n --ds-background-input-pressed: #FFFFFF;\n --ds-background-inverse-subtle: #00000029;\n --ds-background-inverse-subtle-hovered: #0000003D;\n --ds-background-inverse-subtle-pressed: #00000052;\n --ds-background-neutral: #DFE1E6;\n --ds-background-neutral-hovered: #091e4214;\n --ds-background-neutral-pressed: #B3D4FF;\n --ds-background-neutral-subtle: transparent;\n --ds-background-neutral-subtle-hovered: #091e4214;\n --ds-background-neutral-subtle-pressed: #B3D4FF;\n --ds-background-neutral-bold: #42526E;\n --ds-background-neutral-bold-hovered: #505F79;\n --ds-background-neutral-bold-pressed: #344563;\n --ds-background-selected: #DEEBFF;\n --ds-background-selected-hovered: #B3D4FF;\n --ds-background-selected-pressed: #4C9AFF;\n --ds-background-selected-bold: #0052CC;\n --ds-background-selected-bold-hovered: #2684FF;\n --ds-background-selected-bold-pressed: #0052CC;\n --ds-background-brand-bold: #0052CC;\n --ds-background-brand-bold-hovered: #0065FF;\n --ds-background-brand-bold-pressed: #0747A6;\n --ds-background-danger: #FFEBE6;\n --ds-background-danger-hovered: #FFBDAD;\n --ds-background-danger-pressed: #FF8F73;\n --ds-background-danger-bold: #DE350B;\n --ds-background-danger-bold-hovered: #FF5630;\n --ds-background-danger-bold-pressed: #BF2600;\n --ds-background-warning: #FFFAE6;\n --ds-background-warning-hovered: #FFF0B3;\n --ds-background-warning-pressed: #FFE380;\n --ds-background-warning-bold: #FFAB00;\n --ds-background-warning-bold-hovered: #FFC400;\n --ds-background-warning-bold-pressed: #FF991F;\n --ds-background-success: #E3FCEF;\n --ds-background-success-hovered: #ABF5D1;\n --ds-background-success-pressed: #79F2C0;\n --ds-background-success-bold: #00875A;\n --ds-background-success-bold-hovered: #57D9A3;\n --ds-background-success-bold-pressed: #00875A;\n --ds-background-discovery: #EAE6FF;\n --ds-background-discovery-hovered: #C0B6F2;\n --ds-background-discovery-pressed: #998DD9;\n --ds-background-discovery-bold: #5243AA;\n --ds-background-discovery-bold-hovered: #8777D9;\n --ds-background-discovery-bold-pressed: #5243AA;\n --ds-background-information: #DEEBFF;\n --ds-background-information-hovered: #B3D4FF;\n --ds-background-information-pressed: #4C9AFF;\n --ds-background-information-bold: #0052CC;\n --ds-background-information-bold-hovered: #2684FF;\n --ds-background-information-bold-pressed: #0052CC;\n --ds-blanket: #091e4289;\n --ds-blanket-selected: #388BFF14;\n --ds-blanket-danger: #EF5C4814;\n --ds-interaction-hovered: #00000029;\n --ds-interaction-pressed: #00000052;\n --ds-skeleton: #F4F5F7;\n --ds-skeleton-subtle: #091e420a;\n --ds-chart-categorical-1: #00B8D9;\n --ds-chart-categorical-1-hovered: #00A3BF;\n --ds-chart-categorical-2: #5243AA;\n --ds-chart-categorical-2-hovered: #403294;\n --ds-chart-categorical-3: #D94008;\n --ds-chart-categorical-3-hovered: #B65C02;\n --ds-chart-categorical-4: #943D73;\n --ds-chart-categorical-4-hovered: #50253F;\n --ds-chart-categorical-5: #0052CC;\n --ds-chart-categorical-5-hovered: #0747A6;\n --ds-chart-categorical-6: #5243AA;\n --ds-chart-categorical-6-hovered: #403294;\n --ds-chart-categorical-7: #50253F;\n --ds-chart-categorical-7-hovered: #341829;\n --ds-chart-categorical-8: #974F0C;\n --ds-chart-categorical-8-hovered: #5F3811;\n --ds-chart-neutral: #5E6C84;\n --ds-chart-neutral-hovered: #505F79;\n --ds-chart-red-bold: #FF5630;\n --ds-chart-red-bold-hovered: #DE350B;\n --ds-chart-red-bolder: #DE350B;\n --ds-chart-red-bolder-hovered: #BF2600;\n --ds-chart-red-boldest: #BF2600;\n --ds-chart-red-boldest-hovered: #BF2600;\n --ds-chart-orange-bold: #D97008;\n --ds-chart-orange-bold-hovered: #B65C02;\n --ds-chart-orange-bolder: #B65C02;\n --ds-chart-orange-bolder-hovered: #974F0C;\n --ds-chart-orange-boldest: #974F0C;\n --ds-chart-orange-boldest-hovered: #5F3811;\n --ds-chart-yellow-bold: #FFAB00;\n --ds-chart-yellow-bold-hovered: #FF991F;\n --ds-chart-yellow-bolder: #FF991F;\n --ds-chart-yellow-bolder-hovered: #FF8B00;\n --ds-chart-yellow-boldest: #FF8B00;\n --ds-chart-yellow-boldest-hovered: #FF8B00;\n --ds-chart-green-bold: #36B37E;\n --ds-chart-green-bold-hovered: #00875A;\n --ds-chart-green-bolder: #00875A;\n --ds-chart-green-bolder-hovered: #006644;\n --ds-chart-green-boldest: #006644;\n --ds-chart-green-boldest-hovered: #006644;\n --ds-chart-teal-bold: #00B8D9;\n --ds-chart-teal-bold-hovered: #00A3BF;\n --ds-chart-teal-bolder: #00A3BF;\n --ds-chart-teal-bolder-hovered: #008DA6;\n --ds-chart-teal-boldest: #008DA6;\n --ds-chart-teal-boldest-hovered: #008DA6;\n --ds-chart-blue-bold: #0065FF;\n --ds-chart-blue-bold-hovered: #0052CC;\n --ds-chart-blue-bolder: #0052CC;\n --ds-chart-blue-bolder-hovered: #0747A6;\n --ds-chart-blue-boldest: #0747A6;\n --ds-chart-blue-boldest-hovered: #0747A6;\n --ds-chart-purple-bold: #6554C0;\n --ds-chart-purple-bold-hovered: #5243AA;\n --ds-chart-purple-bolder: #5243AA;\n --ds-chart-purple-bolder-hovered: #403294;\n --ds-chart-purple-boldest: #403294;\n --ds-chart-purple-boldest-hovered: #403294;\n --ds-chart-magenta-bold: #DA62AC;\n --ds-chart-magenta-bold-hovered: #CD519D;\n --ds-chart-magenta-bolder: #CD519D;\n --ds-chart-magenta-bolder-hovered: #AE4787;\n --ds-chart-magenta-boldest: #943D73;\n --ds-chart-magenta-boldest-hovered: #50253F;\n --ds-chart-gray-bold: #5E6C84;\n --ds-chart-gray-bold-hovered: #505F79;\n --ds-chart-gray-bolder: #505F79;\n --ds-chart-gray-bolder-hovered: #42526E;\n --ds-chart-gray-boldest: #42526E;\n --ds-chart-gray-boldest-hovered: #42526E;\n --ds-chart-brand: #0065FF;\n --ds-chart-brand-hovered: #0052CC;\n --ds-chart-danger: #FF5630;\n --ds-chart-danger-hovered: #DE350B;\n --ds-chart-danger-bold: #DE350B;\n --ds-chart-danger-bold-hovered: #BF2600;\n --ds-chart-warning: #FFAB00;\n --ds-chart-warning-hovered: #FF991F;\n --ds-chart-warning-bold: #FF991F;\n --ds-chart-warning-bold-hovered: #FF8B00;\n --ds-chart-success: #36B37E;\n --ds-chart-success-hovered: #00875A;\n --ds-chart-success-bold: #00875A;\n --ds-chart-success-bold-hovered: #006644;\n --ds-chart-discovery: #6554C0;\n --ds-chart-discovery-hovered: #5243AA;\n --ds-chart-discovery-bold: #5243AA;\n --ds-chart-discovery-bold-hovered: #403294;\n --ds-chart-information: #0065FF;\n --ds-chart-information-hovered: #0052CC;\n --ds-chart-information-bold: #0052CC;\n --ds-chart-information-bold-hovered: #0747A6;\n --ds-surface: #FFFFFF;\n --ds-surface-hovered: #FAFBFC;\n --ds-surface-pressed: #F4F5F7;\n --ds-surface-overlay: #FFFFFF;\n --ds-surface-overlay-hovered: #FAFBFC;\n --ds-surface-overlay-pressed: #F4F5F7;\n --ds-surface-raised: #FFFFFF;\n --ds-surface-raised-hovered: #FAFBFC;\n --ds-surface-raised-pressed: #F4F5F7;\n --ds-surface-sunken: #F4F5F7;\n --ds-shadow-overflow: 0px 0px 8px #091e4229, 0px 0px 1px #091e421F;\n --ds-shadow-overflow-perimeter: #091e421f;\n --ds-shadow-overflow-spread: #091e4229;\n --ds-shadow-overlay: 0px 8px 12px #091e4226, 0px 0px 1px #091e424F;\n --ds-shadow-raised: 0px 1px 1px #091e4240, 0px 0px 1px #091e424F;\n --ds-opacity-disabled: 0.4;\n --ds-opacity-loading: 0.2;\n --ds-UNSAFE-transparent: transparent;\n}\n";
2
+ /**
3
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
+ * @codegen <<SignedSource::40cedef971cd5ad5fd9fe662859ac836>>
5
+ * @codegenCommand yarn build tokens
6
+ */
7
+ export default _default;