@atlaskit/tokens 1.2.7 → 1.2.9

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 (57) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/artifacts/theme-import-map.js +6 -1
  3. package/dist/cjs/artifacts/themes/atlassian-dark-iteration.js +13 -0
  4. package/dist/cjs/babel-plugin/plugin.js +4 -0
  5. package/dist/cjs/get-token-value.js +1 -1
  6. package/dist/cjs/get-token.js +1 -1
  7. package/dist/cjs/set-global-theme.js +13 -6
  8. package/dist/cjs/theme-config.js +14 -1
  9. package/dist/cjs/tokens/atlassian-dark-iteration/color/accent.js +70 -0
  10. package/dist/cjs/tokens/atlassian-dark-iteration/color/background.js +102 -0
  11. package/dist/cjs/tokens/atlassian-dark-iteration/color/chart.js +34 -0
  12. package/dist/cjs/tokens/atlassian-dark-iteration/color/icon.js +30 -0
  13. package/dist/cjs/tokens/atlassian-dark-iteration/color/text.js +43 -0
  14. package/dist/cjs/tokens/atlassian-dark-iteration/elevation/shadow.js +45 -0
  15. package/dist/cjs/tokens/atlassian-dark-iteration/elevation/surface.js +48 -0
  16. package/dist/cjs/version.json +1 -1
  17. package/dist/es2019/artifacts/theme-import-map.js +4 -2
  18. package/dist/es2019/artifacts/themes/atlassian-dark-iteration.js +58 -0
  19. package/dist/es2019/babel-plugin/plugin.js +4 -0
  20. package/dist/es2019/get-token-value.js +1 -1
  21. package/dist/es2019/get-token.js +1 -1
  22. package/dist/es2019/set-global-theme.js +7 -0
  23. package/dist/es2019/theme-config.js +12 -0
  24. package/dist/es2019/tokens/atlassian-dark-iteration/color/accent.js +63 -0
  25. package/dist/es2019/tokens/atlassian-dark-iteration/color/background.js +95 -0
  26. package/dist/es2019/tokens/atlassian-dark-iteration/color/chart.js +27 -0
  27. package/dist/es2019/tokens/atlassian-dark-iteration/color/icon.js +23 -0
  28. package/dist/es2019/tokens/atlassian-dark-iteration/color/text.js +36 -0
  29. package/dist/es2019/tokens/atlassian-dark-iteration/elevation/shadow.js +38 -0
  30. package/dist/es2019/tokens/atlassian-dark-iteration/elevation/surface.js +41 -0
  31. package/dist/es2019/version.json +1 -1
  32. package/dist/esm/artifacts/theme-import-map.js +5 -1
  33. package/dist/esm/artifacts/themes/atlassian-dark-iteration.js +6 -0
  34. package/dist/esm/babel-plugin/plugin.js +4 -0
  35. package/dist/esm/get-token-value.js +1 -1
  36. package/dist/esm/get-token.js +1 -1
  37. package/dist/esm/set-global-theme.js +13 -6
  38. package/dist/esm/theme-config.js +12 -0
  39. package/dist/esm/tokens/atlassian-dark-iteration/color/accent.js +63 -0
  40. package/dist/esm/tokens/atlassian-dark-iteration/color/background.js +95 -0
  41. package/dist/esm/tokens/atlassian-dark-iteration/color/chart.js +27 -0
  42. package/dist/esm/tokens/atlassian-dark-iteration/color/icon.js +23 -0
  43. package/dist/esm/tokens/atlassian-dark-iteration/color/text.js +36 -0
  44. package/dist/esm/tokens/atlassian-dark-iteration/elevation/shadow.js +38 -0
  45. package/dist/esm/tokens/atlassian-dark-iteration/elevation/surface.js +41 -0
  46. package/dist/esm/version.json +1 -1
  47. package/dist/types/artifacts/theme-import-map.d.ts +3 -3
  48. package/dist/types/artifacts/themes/atlassian-dark-iteration.d.ts +7 -0
  49. package/dist/types/theme-config.d.ts +14 -0
  50. package/dist/types/tokens/atlassian-dark-iteration/color/accent.d.ts +4 -0
  51. package/dist/types/tokens/atlassian-dark-iteration/color/background.d.ts +4 -0
  52. package/dist/types/tokens/atlassian-dark-iteration/color/chart.d.ts +4 -0
  53. package/dist/types/tokens/atlassian-dark-iteration/color/icon.d.ts +4 -0
  54. package/dist/types/tokens/atlassian-dark-iteration/color/text.d.ts +4 -0
  55. package/dist/types/tokens/atlassian-dark-iteration/elevation/shadow.d.ts +4 -0
  56. package/dist/types/tokens/atlassian-dark-iteration/elevation/surface.d.ts +4 -0
  57. package/package.json +9 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.2.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [`aef90f8953b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aef90f8953b) - Tweaks to a subset of dark theme tokens behind a feature flag.
8
+
9
+ ## 1.2.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [`de4f079569a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de4f079569a) - The tokens babel-plugin will no longer run on files in node_module directories. This is to avoid attempting to transform legacy tokens from older transitive dependencies.
14
+
3
15
  ## 1.2.7
4
16
 
5
17
  ### Patch Changes
@@ -16,7 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
16
16
  * This allows users to compose their themes and only use the tokens that are requested.
17
17
  * When a new theme is created, the import should automatically be added to the map
18
18
  *
19
- * @codegen <<SignedSource::ce4463df8e613cb4c4a8b24907ce95ae>>
19
+ * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
20
20
  * @codegenCommand yarn build tokens
21
21
  */
22
22
 
@@ -55,6 +55,11 @@ var themeImportsMap = {
55
55
  return Promise.resolve().then(function () {
56
56
  return _interopRequireWildcard(require('./themes/atlassian-shape'));
57
57
  });
58
+ },
59
+ 'dark-iteration': function darkIteration() {
60
+ return Promise.resolve().then(function () {
61
+ return _interopRequireWildcard(require('./themes/atlassian-dark-iteration'));
62
+ });
58
63
  }
59
64
  };
60
65
  var _default = themeImportsMap;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ /**
8
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
9
+ * @codegen <<SignedSource::337e80050595184e7a6198ba1c75e2fc>>
10
+ * @codegenCommand yarn build tokens
11
+ */
12
+ var _default = "\nhtml[data-color-mode=\"light\"][data-theme~=\"light:dark\"],\nhtml[data-color-mode=\"dark\"][data-theme~=\"dark:dark\"] {\n --ds-text: #B6C2CF;\n --ds-text-inverse: #1D2125;\n --ds-text-selected: #6EAAFF;\n --ds-text-warning-inverse: #1D2125;\n --ds-text-subtlest: #8C9BAB;\n --ds-link: #6EAAFF;\n --ds-link-pressed: #A8CCFF;\n --ds-icon-inverse: #1D2125;\n --ds-icon-selected: #6EAAFF;\n --ds-icon-warning-inverse: #1D2125;\n --ds-icon-subtle: #8C9BAB;\n --ds-background-accent-red-subtlest: #4F1C16;\n --ds-background-accent-orange-subtlest: #513010;\n --ds-background-accent-yellow-subtlest: #473602;\n --ds-background-accent-green-subtlest: #143E2C;\n --ds-background-accent-teal-subtlest: #193E42;\n --ds-background-accent-blue-subtlest: #092957;\n --ds-background-accent-purple-subtlest: #2B2451;\n --ds-background-accent-magenta-subtlest: #421F34;\n --ds-background-accent-gray-bolder: #8C9BAB;\n --ds-background-input: #22272B;\n --ds-background-input-hovered: #282E33;\n --ds-background-input-pressed: #22272B;\n --ds-background-selected: #082145;\n --ds-background-selected-pressed: #0055CC;\n --ds-background-danger: #4F1C16;\n --ds-background-danger-pressed: #872518;\n --ds-background-warning: #473602;\n --ds-background-warning-pressed: #6B5103;\n --ds-background-success: #143E2C;\n --ds-background-success-pressed: #1B5A40;\n --ds-background-discovery: #2B2451;\n --ds-background-discovery-pressed: #4A3D8A;\n --ds-background-information: #092957;\n --ds-background-information-pressed: #073A83;\n --ds-blanket: #10121499;\n --ds-chart-neutral-hovered: #8C9BAB;\n --ds-chart-gray-bold-hovered: #8C9BAB;\n --ds-chart-gray-bolder: #8C9BAB;\n --ds-surface: #1D2125;\n --ds-surface-hovered: #22272B;\n --ds-surface-pressed: #282E33;\n --ds-surface-overlay: #282E33;\n --ds-surface-overlay-pressed: #38414A;\n --ds-surface-raised: #22272B;\n --ds-surface-raised-hovered: #282E33;\n --ds-surface-sunken: #161A1D;\n --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;\n}\n";
13
+ exports.default = _default;
@@ -16,6 +16,10 @@ function plugin() {
16
16
  visitor: {
17
17
  Program: {
18
18
  enter: function enter(path, state) {
19
+ var sourceFile = path.hub.file.opts.filename;
20
+ if (sourceFile && sourceFile.includes('node_modules')) {
21
+ return;
22
+ }
19
23
  path.traverse({
20
24
  CallExpression: function (_CallExpression) {
21
25
  function CallExpression(_x) {
@@ -8,7 +8,7 @@ exports.default = void 0;
8
8
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var name = "@atlaskit/tokens";
11
- var version = "1.2.7";
11
+ var version = "1.2.9";
12
12
  /**
13
13
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
14
14
  * resulting CSS Custom Property.
@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
9
9
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
10
10
  var _constants = require("./constants");
11
11
  var name = "@atlaskit/tokens";
12
- var version = "1.2.7";
12
+ var version = "1.2.9";
13
13
  /**
14
14
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
15
15
  * This should be used to implement design decisions throughout your application.
@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
12
12
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
13
  var _bindEventListener = require("bind-event-listener");
14
14
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _constants = require("./constants");
16
17
  var _themeLoading = require("./utils/theme-loading");
17
18
  var _themeStateTransformer = require("./utils/theme-state-transformer");
@@ -78,7 +79,10 @@ var setGlobalTheme = /*#__PURE__*/function () {
78
79
  _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
79
80
  // Dedupe list of themes to avoid race condition
80
81
  themePreferences = new Set([dark, light, spacing, typography]);
81
- _context2.next = 4;
82
+ if ((0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
83
+ themePreferences.add('dark-iteration');
84
+ }
85
+ _context2.next = 5;
82
86
  return Promise.all((0, _toConsumableArray2.default)(themePreferences).filter(function (themeId) {
83
87
  return themeId !== undefined;
84
88
  }).map( /*#__PURE__*/function () {
@@ -102,7 +106,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
102
106
  return _ref3.apply(this, arguments);
103
107
  };
104
108
  }()));
105
- case 4:
109
+ case 5:
106
110
  if (colorMode === 'auto' && darkModeMql) {
107
111
  colorMode = darkModeMql.matches ? 'dark' : 'light';
108
112
  // Add an event listener for changes to the system theme.
@@ -128,7 +132,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
128
132
  document.documentElement.setAttribute(key, value);
129
133
  });
130
134
  return _context2.abrupt("return", unbindThemeChangeListener);
131
- case 8:
135
+ case 9:
132
136
  case "end":
133
137
  return _context2.stop();
134
138
  }
@@ -180,7 +184,10 @@ var getThemeStyles = /*#__PURE__*/function () {
180
184
  themePreferences.push(themeId);
181
185
  }
182
186
  });
183
- _context4.next = 5;
187
+ if ((0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
188
+ themePreferences.push('dark-iteration');
189
+ }
190
+ _context4.next = 6;
184
191
  return Promise.all(themePreferences.map( /*#__PURE__*/function () {
185
192
  var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
186
193
  var css;
@@ -215,12 +222,12 @@ var getThemeStyles = /*#__PURE__*/function () {
215
222
  return _ref8.apply(this, arguments);
216
223
  };
217
224
  }()));
218
- case 5:
225
+ case 6:
219
226
  results = _context4.sent;
220
227
  return _context4.abrupt("return", results.filter(function (theme) {
221
228
  return theme !== undefined;
222
229
  }));
223
- case 7:
230
+ case 8:
224
231
  case "end":
225
232
  return _context4.stop();
226
233
  }
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.themeIds = exports.themeColorModes = exports.default = void 0;
6
+ exports.themeOverrideConfig = exports.themeIds = exports.themeColorModes = exports.default = void 0;
7
7
  /**
8
8
  * This file contains the source of truth for themes and all associated meta data.
9
9
  */
@@ -98,5 +98,18 @@ var themeConfig = {
98
98
  }
99
99
  }
100
100
  };
101
+ var themeOverrideConfig = {
102
+ 'atlassian-dark-iteration': {
103
+ id: 'dark-iteration',
104
+ displayName: 'Dark Theme Iteration',
105
+ palette: 'defaultPalette',
106
+ overrideTheme: 'dark',
107
+ attributes: {
108
+ type: 'color',
109
+ mode: 'dark'
110
+ }
111
+ }
112
+ };
113
+ exports.themeOverrideConfig = themeOverrideConfig;
101
114
  var _default = themeConfig;
102
115
  exports.default = _default;
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ background: {
10
+ accent: {
11
+ blue: {
12
+ subtlest: {
13
+ // @ts-ignore Blue950 not currently available
14
+ value: '#092957'
15
+ }
16
+ },
17
+ red: {
18
+ subtlest: {
19
+ // @ts-ignore Red950 not currently available
20
+ value: '#4F1C16'
21
+ }
22
+ },
23
+ orange: {
24
+ subtlest: {
25
+ // @ts-ignore Orange950 not currently available
26
+ value: '#513010'
27
+ }
28
+ },
29
+ yellow: {
30
+ subtlest: {
31
+ // @ts-ignore Yellow950 not currently available
32
+ value: '#473602'
33
+ }
34
+ },
35
+ green: {
36
+ subtlest: {
37
+ // @ts-ignore Green950 not currently available
38
+ value: '#143E2C'
39
+ }
40
+ },
41
+ purple: {
42
+ subtlest: {
43
+ // @ts-ignore Purple950 not currently available
44
+ value: '#2B2451'
45
+ }
46
+ },
47
+ teal: {
48
+ subtlest: {
49
+ // @ts-ignore Teal950 not currently available
50
+ value: '#193E42'
51
+ }
52
+ },
53
+ magenta: {
54
+ subtlest: {
55
+ // @ts-ignore Magenta950 not currently available
56
+ value: '#421F34'
57
+ }
58
+ },
59
+ gray: {
60
+ bolder: {
61
+ // @ts-ignore new value for DarkNeautral700
62
+ value: '#8C9BAB'
63
+ }
64
+ }
65
+ }
66
+ }
67
+ }
68
+ };
69
+ var _default = color;
70
+ exports.default = _default;
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ blanket: {
10
+ // @ts-ignore DarkNeutral-100 at 60% not currently available
11
+ '[default]': {
12
+ value: '#10121499'
13
+ }
14
+ },
15
+ background: {
16
+ input: {
17
+ '[default]': {
18
+ value: 'DarkNeutral200'
19
+ },
20
+ hovered: {
21
+ // @ts-ignore DarkNeutral250 not currently available
22
+ value: '#282E33'
23
+ },
24
+ pressed: {
25
+ value: 'DarkNeutral200'
26
+ }
27
+ },
28
+ selected: {
29
+ '[default]': {
30
+ '[default]': {
31
+ value: 'Blue1000'
32
+ },
33
+ pressed: {
34
+ value: 'Blue800'
35
+ }
36
+ }
37
+ },
38
+ danger: {
39
+ '[default]': {
40
+ '[default]': {
41
+ // @ts-ignore Red950 not currently available
42
+ value: '#4F1C16'
43
+ },
44
+ pressed: {
45
+ // @ts-ignore Red850 not currently available
46
+ value: '#872518'
47
+ }
48
+ }
49
+ },
50
+ warning: {
51
+ '[default]': {
52
+ '[default]': {
53
+ // @ts-ignore Yellow950 not currently available
54
+ value: '#473602'
55
+ },
56
+ pressed: {
57
+ // @ts-ignore Yellow850 not currently available
58
+ value: '#6B5103'
59
+ }
60
+ }
61
+ },
62
+ success: {
63
+ '[default]': {
64
+ '[default]': {
65
+ // @ts-ignore Green950 not currently available
66
+ value: '#143E2C'
67
+ },
68
+ pressed: {
69
+ // @ts-ignore Green850 not currently available
70
+ value: '#1B5A40'
71
+ }
72
+ }
73
+ },
74
+ discovery: {
75
+ '[default]': {
76
+ '[default]': {
77
+ // @ts-ignore Purple950 not currently available
78
+ value: '#2B2451'
79
+ },
80
+ pressed: {
81
+ // @ts-ignore Purple850 not currently available
82
+ value: '#4A3D8A'
83
+ }
84
+ }
85
+ },
86
+ information: {
87
+ '[default]': {
88
+ '[default]': {
89
+ // @ts-ignore Blue950 not currently available
90
+ value: '#092957'
91
+ },
92
+ pressed: {
93
+ // @ts-ignore Blue850 not currently available
94
+ value: '#073A83'
95
+ }
96
+ }
97
+ }
98
+ }
99
+ }
100
+ };
101
+ var _default = color;
102
+ exports.default = _default;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ chart: {
10
+ neutral: {
11
+ hovered: {
12
+ // @ts-ignore new value for DarkNeautral700
13
+ value: '#8C9BAB'
14
+ }
15
+ },
16
+ gray: {
17
+ bold: {
18
+ hovered: {
19
+ // @ts-ignore new value for DarkNeautral700
20
+ value: '#8C9BAB'
21
+ }
22
+ },
23
+ bolder: {
24
+ '[default]': {
25
+ // @ts-ignore new value for DarkNeautral700
26
+ value: '#8C9BAB'
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ };
33
+ var _default = color;
34
+ exports.default = _default;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ icon: {
10
+ subtle: {
11
+ // @ts-ignore new value for DarkNeautral700
12
+ value: '#8C9BAB'
13
+ },
14
+ inverse: {
15
+ value: 'DarkNeutral100'
16
+ },
17
+ selected: {
18
+ // @ts-ignore Blue350 not currently available
19
+ value: '#6EAAFF'
20
+ },
21
+ warning: {
22
+ inverse: {
23
+ value: 'DarkNeutral100'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ };
29
+ var _default = color;
30
+ exports.default = _default;
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var color = {
8
+ color: {
9
+ text: {
10
+ '[default]': {
11
+ value: 'DarkNeutral900'
12
+ },
13
+ subtlest: {
14
+ // @ts-ignore new value for DarkNeautral700
15
+ value: '#8C9BAB'
16
+ },
17
+ inverse: {
18
+ value: 'DarkNeutral100'
19
+ },
20
+ selected: {
21
+ // @ts-ignore Blue350 not currently available
22
+ value: '#6EAAFF'
23
+ },
24
+ warning: {
25
+ inverse: {
26
+ value: 'DarkNeutral100'
27
+ }
28
+ }
29
+ },
30
+ link: {
31
+ '[default]': {
32
+ // @ts-ignore Blue350 not currently available
33
+ value: '#6EAAFF'
34
+ },
35
+ pressed: {
36
+ // @ts-ignore Blue250 not currently available
37
+ value: '#A8CCFF'
38
+ }
39
+ }
40
+ }
41
+ };
42
+ var _default = color;
43
+ exports.default = _default;
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var shadow = {
8
+ elevation: {
9
+ shadow: {
10
+ overlay: {
11
+ value: [{
12
+ radius: 0,
13
+ spread: 1,
14
+ color: 'DarkNeutral100A',
15
+ offset: {
16
+ x: 0,
17
+ y: 0
18
+ },
19
+ opacity: 0.12,
20
+ inset: true
21
+ }, {
22
+ radius: 12,
23
+ offset: {
24
+ x: 0,
25
+ y: 8
26
+ },
27
+ color: 'DarkNeutral-100A',
28
+ // This opacity overrides the color alpha.
29
+ opacity: 0.36
30
+ }, {
31
+ radius: 1,
32
+ offset: {
33
+ x: 0,
34
+ y: 0
35
+ },
36
+ color: 'DarkNeutral-100A',
37
+ // This opacity overrides the color alpha.
38
+ opacity: 0.5
39
+ }]
40
+ }
41
+ }
42
+ }
43
+ };
44
+ var _default = shadow;
45
+ exports.default = _default;
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var elevation = {
8
+ elevation: {
9
+ surface: {
10
+ '[default]': {
11
+ '[default]': {
12
+ value: 'DarkNeutral100'
13
+ },
14
+ hovered: {
15
+ value: 'DarkNeutral200'
16
+ },
17
+ pressed: {
18
+ // @ts-ignore DarkNeutral250 not currently available
19
+ value: '#282E33'
20
+ }
21
+ },
22
+ sunken: {
23
+ value: 'DarkNeutral0'
24
+ },
25
+ raised: {
26
+ '[default]': {
27
+ value: 'DarkNeutral200'
28
+ },
29
+ hovered: {
30
+ // @ts-ignore DarkNeutral250 not currently available
31
+ value: '#282E33'
32
+ }
33
+ },
34
+ overlay: {
35
+ '[default]': {
36
+ // @ts-ignore DarkNeutral250 not currently available
37
+ value: '#282E33'
38
+ },
39
+ pressed: {
40
+ // @ts-ignore DarkNeutral350 not currently available
41
+ value: '#38414A'
42
+ }
43
+ }
44
+ }
45
+ }
46
+ };
47
+ var _default = elevation;
48
+ exports.default = _default;
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.7",
3
+ "version": "1.2.9",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
@@ -6,7 +6,7 @@
6
6
  * This allows users to compose their themes and only use the tokens that are requested.
7
7
  * When a new theme is created, the import should automatically be added to the map
8
8
  *
9
- * @codegen <<SignedSource::ce4463df8e613cb4c4a8b24907ce95ae>>
9
+ * @codegen <<SignedSource::3466f435e0d35c0443ddeafe9240dbc2>>
10
10
  * @codegenCommand yarn build tokens
11
11
  */
12
12
 
@@ -24,6 +24,8 @@ const themeImportsMap = {
24
24
  'typography': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-typography" */
25
25
  './themes/atlassian-typography'),
26
26
  'shape': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-shape" */
27
- './themes/atlassian-shape')
27
+ './themes/atlassian-shape'),
28
+ 'dark-iteration': () => import( /* webpackChunkName: "@atlaskit-internal_atlassian-dark-iteration" */
29
+ './themes/atlassian-dark-iteration')
28
30
  };
29
31
  export default themeImportsMap;
@@ -0,0 +1,58 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ * @codegen <<SignedSource::337e80050595184e7a6198ba1c75e2fc>>
4
+ * @codegenCommand yarn build tokens
5
+ */
6
+ export default `
7
+ html[data-color-mode="light"][data-theme~="light:dark"],
8
+ html[data-color-mode="dark"][data-theme~="dark:dark"] {
9
+ --ds-text: #B6C2CF;
10
+ --ds-text-inverse: #1D2125;
11
+ --ds-text-selected: #6EAAFF;
12
+ --ds-text-warning-inverse: #1D2125;
13
+ --ds-text-subtlest: #8C9BAB;
14
+ --ds-link: #6EAAFF;
15
+ --ds-link-pressed: #A8CCFF;
16
+ --ds-icon-inverse: #1D2125;
17
+ --ds-icon-selected: #6EAAFF;
18
+ --ds-icon-warning-inverse: #1D2125;
19
+ --ds-icon-subtle: #8C9BAB;
20
+ --ds-background-accent-red-subtlest: #4F1C16;
21
+ --ds-background-accent-orange-subtlest: #513010;
22
+ --ds-background-accent-yellow-subtlest: #473602;
23
+ --ds-background-accent-green-subtlest: #143E2C;
24
+ --ds-background-accent-teal-subtlest: #193E42;
25
+ --ds-background-accent-blue-subtlest: #092957;
26
+ --ds-background-accent-purple-subtlest: #2B2451;
27
+ --ds-background-accent-magenta-subtlest: #421F34;
28
+ --ds-background-accent-gray-bolder: #8C9BAB;
29
+ --ds-background-input: #22272B;
30
+ --ds-background-input-hovered: #282E33;
31
+ --ds-background-input-pressed: #22272B;
32
+ --ds-background-selected: #082145;
33
+ --ds-background-selected-pressed: #0055CC;
34
+ --ds-background-danger: #4F1C16;
35
+ --ds-background-danger-pressed: #872518;
36
+ --ds-background-warning: #473602;
37
+ --ds-background-warning-pressed: #6B5103;
38
+ --ds-background-success: #143E2C;
39
+ --ds-background-success-pressed: #1B5A40;
40
+ --ds-background-discovery: #2B2451;
41
+ --ds-background-discovery-pressed: #4A3D8A;
42
+ --ds-background-information: #092957;
43
+ --ds-background-information-pressed: #073A83;
44
+ --ds-blanket: #10121499;
45
+ --ds-chart-neutral-hovered: #8C9BAB;
46
+ --ds-chart-gray-bold-hovered: #8C9BAB;
47
+ --ds-chart-gray-bolder: #8C9BAB;
48
+ --ds-surface: #1D2125;
49
+ --ds-surface-hovered: #22272B;
50
+ --ds-surface-pressed: #282E33;
51
+ --ds-surface-overlay: #282E33;
52
+ --ds-surface-overlay-pressed: #38414A;
53
+ --ds-surface-raised: #22272B;
54
+ --ds-surface-raised-hovered: #282E33;
55
+ --ds-surface-sunken: #161A1D;
56
+ --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
57
+ }
58
+ `;
@@ -6,6 +6,10 @@ export default function plugin() {
6
6
  visitor: {
7
7
  Program: {
8
8
  enter(path, state) {
9
+ const sourceFile = path.hub.file.opts.filename;
10
+ if (sourceFile && sourceFile.includes('node_modules')) {
11
+ return;
12
+ }
9
13
  path.traverse({
10
14
  CallExpression(path) {
11
15
  const tokenImportScope = getTokenImportScope(path);
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  const name = "@atlaskit/tokens";
4
- const version = "1.2.7";
4
+ const version = "1.2.9";
5
5
  /**
6
6
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
7
7
  * resulting CSS Custom Property.
@@ -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 = "1.2.7";
5
+ const version = "1.2.9";
6
6
  /**
7
7
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
8
8
  * This should be used to implement design decisions throughout your application.