@atlaskit/tokens 1.2.17 → 1.2.18

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 (14) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/get-token-value.js +1 -1
  3. package/dist/cjs/get-token.js +1 -1
  4. package/dist/cjs/set-global-theme.js +40 -27
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/get-token-value.js +1 -1
  7. package/dist/es2019/get-token.js +1 -1
  8. package/dist/es2019/set-global-theme.js +35 -18
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/get-token-value.js +1 -1
  11. package/dist/esm/get-token.js +1 -1
  12. package/dist/esm/set-global-theme.js +40 -27
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.2.18
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ea8c1af425d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea8c1af425d) - Fixes a bug in `setGlobalTheme()` that caused both the light and dark themes to load when auto theme switching was disabled — only one of the themes should be loaded in this case. It also fixes a bug in `getThemeStyles()`, where the default color themes were loaded instead of the specified theme.
8
+
3
9
  ## 1.2.17
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/get-token-value.js CHANGED
@@ -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.17";
11
+ var version = "1.2.18";
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.
package/dist/cjs/get-token.js CHANGED
@@ -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.17";
12
+ var version = "1.2.18";
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.
package/dist/cjs/set-global-theme.js CHANGED
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.getThemeStyles = exports.getThemeHtmlAttrs = exports.getSSRAutoScript = exports.default = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
12
11
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
13
  var _bindEventListener = require("bind-event-listener");
14
14
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -41,6 +41,25 @@ var checkNativeListener = function checkNativeListener(e) {
41
41
  var element = document.documentElement;
42
42
  element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
43
43
  };
44
+ var getThemePreferences = function getThemePreferences(themeState) {
45
+ var colorMode = themeState.colorMode,
46
+ dark = themeState.dark,
47
+ light = themeState.light,
48
+ spacing = themeState.spacing,
49
+ typography = themeState.typography;
50
+ var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
51
+ [spacing, typography].forEach(function (themeId) {
52
+ if (themeId) {
53
+ themePreferences.push(themeId);
54
+ }
55
+ });
56
+ if (
57
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
58
+ (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
59
+ themePreferences.push('dark-iteration');
60
+ }
61
+ return (0, _toConsumableArray2.default)(new Set(themePreferences));
62
+ };
44
63
 
45
64
  /**
46
65
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -80,17 +99,15 @@ var setGlobalTheme = /*#__PURE__*/function () {
80
99
  switch (_context2.prev = _context2.next) {
81
100
  case 0:
82
101
  _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;
83
- // Dedupe list of themes to avoid race condition
84
- themePreferences = new Set([dark, light, spacing, typography]);
85
- if (
86
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
87
- (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
88
- themePreferences.add('dark-iteration');
89
- }
90
- _context2.next = 5;
91
- return Promise.all((0, _toConsumableArray2.default)(themePreferences).filter(function (themeId) {
92
- return themeId !== undefined;
93
- }).map( /*#__PURE__*/function () {
102
+ themePreferences = getThemePreferences({
103
+ colorMode: colorMode,
104
+ dark: dark,
105
+ light: light,
106
+ spacing: spacing,
107
+ typography: typography
108
+ });
109
+ _context2.next = 4;
110
+ return Promise.all(themePreferences.map( /*#__PURE__*/function () {
94
111
  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(themeId) {
95
112
  return _regeneratorRuntime().wrap(function _callee$(_context) {
96
113
  while (1) {
@@ -111,7 +128,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
111
128
  return _ref3.apply(this, arguments);
112
129
  };
113
130
  }()));
114
- case 5:
131
+ case 4:
115
132
  if (colorMode === 'auto' && darkModeMql) {
116
133
  colorMode = darkModeMql.matches ? 'dark' : 'light';
117
134
  // Add an event listener for changes to the system theme.
@@ -137,7 +154,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
137
154
  document.documentElement.setAttribute(key, value);
138
155
  });
139
156
  return _context2.abrupt("return", unbindThemeChangeListener);
140
- case 9:
157
+ case 8:
141
158
  case "end":
142
159
  return _context2.stop();
143
160
  }
@@ -183,18 +200,14 @@ var getThemeStyles = /*#__PURE__*/function () {
183
200
  switch (_context4.prev = _context4.next) {
184
201
  case 0:
185
202
  _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
186
- themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
187
- [spacing, typography].forEach(function (themeId) {
188
- if (themeId) {
189
- themePreferences.push(themeId);
190
- }
203
+ themePreferences = getThemePreferences({
204
+ colorMode: colorMode,
205
+ dark: dark,
206
+ light: light,
207
+ spacing: spacing,
208
+ typography: typography
191
209
  });
192
- if (
193
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
194
- (0, _platformFeatureFlags.getBooleanFF)('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
195
- themePreferences.push('dark-iteration');
196
- }
197
- _context4.next = 6;
210
+ _context4.next = 4;
198
211
  return Promise.all(themePreferences.map( /*#__PURE__*/function () {
199
212
  var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(themeId) {
200
213
  var css;
@@ -229,12 +242,12 @@ var getThemeStyles = /*#__PURE__*/function () {
229
242
  return _ref8.apply(this, arguments);
230
243
  };
231
244
  }()));
232
- case 6:
245
+ case 4:
233
246
  results = _context4.sent;
234
247
  return _context4.abrupt("return", results.filter(function (theme) {
235
248
  return theme !== undefined;
236
249
  }));
237
- case 8:
250
+ case 6:
238
251
  case "end":
239
252
  return _context4.stop();
240
253
  }
package/dist/cjs/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.17",
3
+ "version": "1.2.18",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/es2019/get-token-value.js CHANGED
@@ -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.17";
4
+ const version = "1.2.18";
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.
package/dist/es2019/get-token.js CHANGED
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  const name = "@atlaskit/tokens";
5
- const version = "1.2.17";
5
+ const version = "1.2.18";
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.
package/dist/es2019/set-global-theme.js CHANGED
@@ -29,6 +29,27 @@ const checkNativeListener = function (e) {
29
29
  const element = document.documentElement;
30
30
  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
31
31
  };
32
+ const getThemePreferences = themeState => {
33
+ const {
34
+ colorMode,
35
+ dark,
36
+ light,
37
+ spacing,
38
+ typography
39
+ } = themeState;
40
+ const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
41
+ [spacing, typography].forEach(themeId => {
42
+ if (themeId) {
43
+ themePreferences.push(themeId);
44
+ }
45
+ });
46
+ if (
47
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
48
+ getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
49
+ themePreferences.push('dark-iteration');
50
+ }
51
+ return [...new Set(themePreferences)];
52
+ };
32
53
 
33
54
  /**
34
55
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -54,14 +75,14 @@ const setGlobalTheme = async ({
54
75
  spacing = themeStateDefaults['spacing'],
55
76
  typography = themeStateDefaults['typography']
56
77
  } = {}) => {
57
- // Dedupe list of themes to avoid race condition
58
- const themePreferences = new Set([dark, light, spacing, typography]);
59
- if (
60
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
61
- getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
62
- themePreferences.add('dark-iteration');
63
- }
64
- await Promise.all([...themePreferences].filter(themeId => themeId !== undefined).map(async themeId => await loadAndAppendThemeCss(themeId)));
78
+ const themePreferences = getThemePreferences({
79
+ colorMode,
80
+ dark,
81
+ light,
82
+ spacing,
83
+ typography
84
+ });
85
+ await Promise.all(themePreferences.map(async themeId => await loadAndAppendThemeCss(themeId)));
65
86
  if (colorMode === 'auto' && darkModeMql) {
66
87
  colorMode = darkModeMql.matches ? 'dark' : 'light';
67
88
  // Add an event listener for changes to the system theme.
@@ -106,17 +127,13 @@ export const getThemeStyles = async ({
106
127
  spacing = themeStateDefaults['spacing'],
107
128
  typography = themeStateDefaults['typography']
108
129
  } = {}) => {
109
- const themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
110
- [spacing, typography].forEach(themeId => {
111
- if (themeId) {
112
- themePreferences.push(themeId);
113
- }
130
+ const themePreferences = getThemePreferences({
131
+ colorMode,
132
+ dark,
133
+ light,
134
+ spacing,
135
+ typography
114
136
  });
115
- if (
116
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
117
- getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
118
- themePreferences.push('dark-iteration');
119
- }
120
137
  const results = await Promise.all(themePreferences.map(async themeId => {
121
138
  try {
122
139
  const css = await loadThemeCss(themeId);
package/dist/es2019/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.17",
3
+ "version": "1.2.18",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/dist/esm/get-token-value.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  var name = "@atlaskit/tokens";
4
- var version = "1.2.17";
4
+ var version = "1.2.18";
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.
package/dist/esm/get-token.js CHANGED
@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
2
2
  import tokens from './artifacts/token-names';
3
3
  import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
4
4
  var name = "@atlaskit/tokens";
5
- var version = "1.2.17";
5
+ var version = "1.2.18";
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.
package/dist/esm/set-global-theme.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import _typeof from "@babel/runtime/helpers/typeof";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
5
4
  import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
5
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
6
6
  function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
7
7
  import { bind } from 'bind-event-listener';
8
8
  import noop from '@atlaskit/ds-lib/noop';
@@ -35,6 +35,25 @@ var checkNativeListener = function checkNativeListener(e) {
35
35
  var element = document.documentElement;
36
36
  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
37
37
  };
38
+ var getThemePreferences = function getThemePreferences(themeState) {
39
+ var colorMode = themeState.colorMode,
40
+ dark = themeState.dark,
41
+ light = themeState.light,
42
+ spacing = themeState.spacing,
43
+ typography = themeState.typography;
44
+ var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
45
+ [spacing, typography].forEach(function (themeId) {
46
+ if (themeId) {
47
+ themePreferences.push(themeId);
48
+ }
49
+ });
50
+ if (
51
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
52
+ getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
53
+ themePreferences.push('dark-iteration');
54
+ }
55
+ return _toConsumableArray(new Set(themePreferences));
56
+ };
38
57
 
39
58
  /**
40
59
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -74,17 +93,15 @@ var setGlobalTheme = /*#__PURE__*/function () {
74
93
  switch (_context2.prev = _context2.next) {
75
94
  case 0:
76
95
  _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;
77
- // Dedupe list of themes to avoid race condition
78
- themePreferences = new Set([dark, light, spacing, typography]);
79
- if (
80
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
81
- getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.has('dark')) {
82
- themePreferences.add('dark-iteration');
83
- }
84
- _context2.next = 5;
85
- return Promise.all(_toConsumableArray(themePreferences).filter(function (themeId) {
86
- return themeId !== undefined;
87
- }).map( /*#__PURE__*/function () {
96
+ themePreferences = getThemePreferences({
97
+ colorMode: colorMode,
98
+ dark: dark,
99
+ light: light,
100
+ spacing: spacing,
101
+ typography: typography
102
+ });
103
+ _context2.next = 4;
104
+ return Promise.all(themePreferences.map( /*#__PURE__*/function () {
88
105
  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(themeId) {
89
106
  return _regeneratorRuntime().wrap(function _callee$(_context) {
90
107
  while (1) {
@@ -105,7 +122,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
105
122
  return _ref3.apply(this, arguments);
106
123
  };
107
124
  }()));
108
- case 5:
125
+ case 4:
109
126
  if (colorMode === 'auto' && darkModeMql) {
110
127
  colorMode = darkModeMql.matches ? 'dark' : 'light';
111
128
  // Add an event listener for changes to the system theme.
@@ -131,7 +148,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
131
148
  document.documentElement.setAttribute(key, value);
132
149
  });
133
150
  return _context2.abrupt("return", unbindThemeChangeListener);
134
- case 9:
151
+ case 8:
135
152
  case "end":
136
153
  return _context2.stop();
137
154
  }
@@ -177,18 +194,14 @@ export var getThemeStyles = /*#__PURE__*/function () {
177
194
  switch (_context4.prev = _context4.next) {
178
195
  case 0:
179
196
  _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
180
- themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
181
- [spacing, typography].forEach(function (themeId) {
182
- if (themeId) {
183
- themePreferences.push(themeId);
184
- }
197
+ themePreferences = getThemePreferences({
198
+ colorMode: colorMode,
199
+ dark: dark,
200
+ light: light,
201
+ spacing: spacing,
202
+ typography: typography
185
203
  });
186
- if (
187
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
188
- getBooleanFF('design-system-team.dark-theme-iteration_dk1ln') && themePreferences.includes('dark')) {
189
- themePreferences.push('dark-iteration');
190
- }
191
- _context4.next = 6;
204
+ _context4.next = 4;
192
205
  return Promise.all(themePreferences.map( /*#__PURE__*/function () {
193
206
  var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(themeId) {
194
207
  var css;
@@ -223,12 +236,12 @@ export var getThemeStyles = /*#__PURE__*/function () {
223
236
  return _ref8.apply(this, arguments);
224
237
  };
225
238
  }()));
226
- case 6:
239
+ case 4:
227
240
  results = _context4.sent;
228
241
  return _context4.abrupt("return", results.filter(function (theme) {
229
242
  return theme !== undefined;
230
243
  }));
231
- case 8:
244
+ case 6:
232
245
  case "end":
233
246
  return _context4.stop();
234
247
  }
package/dist/esm/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.17",
3
+ "version": "1.2.18",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.2.17",
3
+ "version": "1.2.18",
4
4
  "author": "Atlassian Pty Ltd",
5
5
  "description": "Design tokens are the single source of truth to name and store design decisions.",
6
6
  "license": "Apache-2.0",