@atlaskit/tokens 13.0.3 → 13.1.0

package/dist/cjs/get-custom-theme-styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCustomThemeStyles = getCustomThemeStyles;
+var _constants = require("./constants");
+var _themeConfig = require("./theme-config");
+var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _generateCustomColorRamp = require("./utils/generate-custom-color-ramp");
+var _hash = require("./utils/hash");
+/**
+ * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+function getCustomThemeStyles(themeState) {
+  var _themeState$UNSAFE_th;
+  var brandColor = themeState === null || themeState === void 0 || (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
+  var mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || _themeConfig.themeStateDefaults['colorMode'];
+  var optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+  var uniqueId = (0, _hash.hash)(optionString);
+  var themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor).ramp;
+
+  // outputs object to generate to CSS from
+  var themes = [];
+  var tokenMaps = (0, _generateCustomColorRamp.generateTokenMapWithContrastCheck)(brandColor, mode, themeRamp);
+  if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
+    // Light mode theming
+    themes.push({
+      id: 'light',
+      attrs: {
+        'data-theme': 'light',
+        'data-custom-theme': uniqueId
+      },
+      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat((0, _customThemeLoadingUtils.reduceTokenMap)(tokenMaps.light, themeRamp), "\n}")
+    });
+  }
+  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
+    // Dark mode theming
+    themes.push({
+      id: 'dark',
+      attrs: {
+        'data-theme': 'dark',
+        'data-custom-theme': uniqueId
+      },
+      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat((0, _customThemeLoadingUtils.reduceTokenMap)(tokenMaps.dark, themeRamp), "\n}")
+    });
+  }
+  return themes;
+}

package/dist/cjs/get-global-theme.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
-var _themeConfig = require("./theme-config");
+var _themeColorModes = require("./theme-color-modes");
 var _themeStateTransformer = require("./theme-state-transformer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isThemeColorMode = function isThemeColorMode(colorMode) {
-  return _themeConfig.themeColorModes.find(function (mode) {
+  return _themeColorModes.themeColorModes.find(function (mode) {
     return mode === colorMode;
   }) !== undefined;
 };

package/dist/cjs/get-theme-html-attrs.js

@@ -10,8 +10,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
 var _themeStateTransformer = require("./theme-state-transformer");
-var _colorUtils = require("./utils/color-utils");
 var _hash = require("./utils/hash");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultColorMode = 'light';
@@ -64,7 +64,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
     result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, _constants.CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
   }
-  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
+  if (UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
     var optionString = JSON.stringify(UNSAFE_themeOptions);
     var uniqueId = (0, _hash.hash)(optionString);
     result[_constants.CUSTOM_THEME_ATTRIBUTE] = uniqueId;

package/dist/cjs/get-theme-styles.js

@@ -11,10 +11,11 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
+var _getThemeOverridePreferences = require("./utils/get-theme-override-preferences");
 var _getThemePreferences = require("./utils/get-theme-preferences");
-var _themeLoading = require("./utils/theme-loading");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
+var _loadThemeCss = require("./utils/load-theme-css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
 /**
  * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
  * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
@@ -35,7 +36,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var getThemeStyles = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(preferences) {
     var themePreferences, themeOverridePreferences, themeState, results;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
+    return _regenerator.default.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           themeOverridePreferences = [];
@@ -60,19 +61,19 @@ var getThemeStyles = /*#__PURE__*/function () {
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']
             };
             themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
-            themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
+            themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
           }
-          _context3.next = 4;
+          _context3.next = 1;
           return Promise.all([].concat((0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(themePreferences), (0, _toConsumableArray2.default)(themeOverridePreferences)).map( /*#__PURE__*/function () {
             var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
-              var css;
-              return _regenerator.default.wrap(function _callee$(_context) {
+              var css, _t;
+              return _regenerator.default.wrap(function (_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
                     _context.prev = 0;
-                    _context.next = 3;
-                    return (0, _themeLoading.loadThemeCss)(themeId);
-                  case 3:
+                    _context.next = 1;
+                    return (0, _loadThemeCss.loadThemeCss)(themeId);
+                  case 1:
                     css = _context.sent;
                     return _context.abrupt("return", {
                       id: themeId,
@@ -81,15 +82,15 @@ var getThemeStyles = /*#__PURE__*/function () {
                       },
                       css: css
                     });
-                  case 7:
-                    _context.prev = 7;
-                    _context.t0 = _context["catch"](0);
+                  case 2:
+                    _context.prev = 2;
+                    _t = _context["catch"](0);
                     return _context.abrupt("return", undefined);
-                  case 10:
+                  case 3:
                   case "end":
                     return _context.stop();
                 }
-              }, _callee, null, [[0, 7]]);
+              }, _callee, null, [[0, 2]]);
             }));
             return function (_x2) {
               return _ref2.apply(this, arguments);
@@ -98,49 +99,49 @@ var getThemeStyles = /*#__PURE__*/function () {
           // Add custom themes if they're present
           (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
             var _preferences$UNSAFE_t;
-            var _yield$import, getCustomThemeStyles, customThemeStyles;
-            return _regenerator.default.wrap(function _callee2$(_context2) {
+            var _yield$import, getCustomThemeStyles, customThemeStyles, _t2;
+            return _regenerator.default.wrap(function (_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
-                    _context2.next = 15;
+                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
+                    _context2.next = 5;
                     break;
                   }
                   _context2.prev = 1;
-                  _context2.next = 4;
+                  _context2.next = 2;
                   return Promise.resolve().then(function () {
                     return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
                     './custom-theme'));
                   });
-                case 4:
+                case 2:
                   _yield$import = _context2.sent;
                   getCustomThemeStyles = _yield$import.getCustomThemeStyles;
-                  _context2.next = 8;
+                  _context2.next = 3;
                   return getCustomThemeStyles({
                     colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || _themeConfig.themeStateDefaults['colorMode'],
                     UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
                   });
-                case 8:
+                case 3:
                   customThemeStyles = _context2.sent;
                   return _context2.abrupt("return", customThemeStyles);
-                case 12:
-                  _context2.prev = 12;
-                  _context2.t0 = _context2["catch"](1);
+                case 4:
+                  _context2.prev = 4;
+                  _t2 = _context2["catch"](1);
                   return _context2.abrupt("return", undefined);
-                case 15:
+                case 5:
                   return _context2.abrupt("return", undefined);
-                case 16:
+                case 6:
                 case "end":
                   return _context2.stop();
               }
-            }, _callee2, null, [[1, 12]]);
+            }, _callee2, null, [[1, 4]]);
           }))()]));
-        case 4:
+        case 1:
           results = _context3.sent;
           return _context3.abrupt("return", results.flat().filter(function (theme) {
             return theme !== undefined;
           }));
-        case 6:
+        case 2:
         case "end":
           return _context3.stop();
       }

package/dist/cjs/load-custom-theme-styles.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _customTheme = require("./custom-theme");
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 /**
  * Synchronously generates and applies custom theme styles to the page.
  *
@@ -29,7 +29,7 @@ var UNSAFE_loadCustomThemeStyles = function UNSAFE_loadCustomThemeStyles() {
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   // Load custom theme styles
-  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+  if (UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
     var attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, colorMode);
     if (attrOfMissingCustomStyles.length !== 0) {
       (0, _customTheme.loadAndAppendCustomThemeCss)({

package/dist/cjs/set-global-theme.js

@@ -12,15 +12,16 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
 var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _getThemeOverridePreferences = require("./utils/get-theme-override-preferences");
 var _getThemePreferences = require("./utils/get-theme-preferences");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 var _themeLoading = require("./utils/theme-loading");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -79,8 +80,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
       _step,
       themeId,
       autoUnbind,
-      _args3 = arguments;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
+      _args3 = arguments,
+      _t;
+    return _regenerator.default.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
@@ -114,14 +116,14 @@ var setGlobalTheme = /*#__PURE__*/function () {
           loadingStrategy = themeLoader ? themeLoader : _themeLoading.loadAndAppendThemeCss; // Load standard themes
           loadingTasks = themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
-              return _regenerator.default.wrap(function _callee$(_context) {
+              return _regenerator.default.wrap(function (_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    _context.next = 1;
                     return loadingStrategy(themeId);
-                  case 2:
+                  case 1:
                     return _context.abrupt("return", _context.sent);
-                  case 3:
+                  case 2:
                   case "end":
                     return _context.stop();
                 }
@@ -131,22 +133,22 @@ var setGlobalTheme = /*#__PURE__*/function () {
               return _ref3.apply(this, arguments);
             };
           }()); // Load custom themes if needed
-          if (!themeLoader && UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+          if (!themeLoader && UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
             mode = colorMode || _themeConfig.themeStateDefaults['colorMode'];
             attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, mode);
             if (attrOfMissingCustomStyles.length > 0) {
               // Load custom theme styles
               loadingTasks.push((0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
                 var _yield$import, loadAndAppendCustomThemeCss;
-                return _regenerator.default.wrap(function _callee2$(_context2) {
+                return _regenerator.default.wrap(function (_context2) {
                   while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _context2.next = 2;
+                      _context2.next = 1;
                       return Promise.resolve().then(function () {
                         return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
                         './custom-theme'));
                       });
-                    case 2:
+                    case 1:
                       _yield$import = _context2.sent;
                       loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
                       loadAndAppendCustomThemeCss({
@@ -155,7 +157,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
                         attrOfMissingCustomStyles[0],
                         UNSAFE_themeOptions: UNSAFE_themeOptions
                       });
-                    case 5:
+                    case 2:
                     case "end":
                       return _context2.stop();
                   }
@@ -163,44 +165,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
               }))());
             }
           }
-          _context3.next = 11;
+          _context3.next = 1;
           return Promise.all(loadingTasks);
-        case 11:
+        case 1:
           // Load override themes after standard themes
-          themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
+          themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
           _iterator = _createForOfIteratorHelper(themeOverridePreferences);
-          _context3.prev = 13;
+          _context3.prev = 2;
           _iterator.s();
-        case 15:
+        case 3:
           if ((_step = _iterator.n()).done) {
-            _context3.next = 21;
+            _context3.next = 5;
             break;
           }
           themeId = _step.value;
-          _context3.next = 19;
+          _context3.next = 4;
           return loadingStrategy(themeId);
-        case 19:
-          _context3.next = 15;
+        case 4:
+          _context3.next = 3;
           break;
-        case 21:
-          _context3.next = 26;
+        case 5:
+          _context3.next = 7;
           break;
-        case 23:
-          _context3.prev = 23;
-          _context3.t0 = _context3["catch"](13);
-          _iterator.e(_context3.t0);
-        case 26:
-          _context3.prev = 26;
+        case 6:
+          _context3.prev = 6;
+          _t = _context3["catch"](2);
+          _iterator.e(_t);
+        case 7:
+          _context3.prev = 7;
           _iterator.f();
-          return _context3.finish(26);
-        case 29:
+          return _context3.finish(7);
+        case 8:
           autoUnbind = (0, _configurePage.default)(themeState);
           return _context3.abrupt("return", autoUnbind);
-        case 31:
+        case 9:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[13, 23, 26, 29]]);
+    }, _callee3, null, [[2, 6, 7, 8]]);
   }));
   return function setGlobalTheme() {
     return _ref.apply(this, arguments);

package/dist/cjs/theme-color-modes.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeColorModes = void 0;
+/**
+ * Theme modes: The general purpose of a theme.
+ * This attr is used to apply the appropriate system-preference option
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
+ */
+var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];

package/dist/cjs/theme-config.js

@@ -1,10 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeStateDefaults = exports.themeIdsWithOverrides = exports.themeIds = exports.themeColorModes = exports.default = void 0;
+exports.default = void 0;
+Object.defineProperty(exports, "themeColorModes", {
+  enumerable: true,
+  get: function get() {
+    return _themeColorModes.themeColorModes;
+  }
+});
+Object.defineProperty(exports, "themeIds", {
+  enumerable: true,
+  get: function get() {
+    return _themeIds.themeIds;
+  }
+});
+exports.themeStateDefaults = exports.themeIdsWithOverrides = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _themeIds = require("./theme-ids");
+var _themeColorModes = require("./theme-color-modes");
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -28,30 +45,16 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
  * In the future other types may be introduced such as typography.
  */
 
-/**
- * Theme modes: The general purpose of a theme.
- * This attr is used to apply the appropriate system-preference option
- * It may also be used as a selector for mode-specific overrides such as light/dark images.
- * The idea is there may exist many color themes, but every theme must either fit into light or dark.
- */
-var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];
 /**
  * Contrast preferences: The system contrast preference
  */
 var themeContrastModes = ['more', 'no-preference', 'auto'];
-/**
- * Theme ids: The value that will be mounted to the DOM as a data attr
- * For example: `data-theme="light:light dark:dark spacing:spacing"
- *
- * These ids must be kebab case
- */
-var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
  */
 var themeOverrideIds = [];
-var themeIdsWithOverrides = exports.themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
+var themeIdsWithOverrides = exports.themeIdsWithOverrides = [].concat((0, _toConsumableArray2.default)(_themeIds.themeIds), themeOverrideIds);
 
 /**
  * Theme to use a base. This will create the theme as
@@ -194,6 +197,7 @@ function getMotionDefault() {
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var themeStateDefaults = exports.themeStateDefaults = {
   colorMode: 'auto',
   contrastMode: 'auto',
@@ -210,4 +214,5 @@ var themeStateDefaults = exports.themeStateDefaults = {
  * Represents theme state once mounted to the page
  * (the page doesn't have an "auto" color mode, it's either light or dark)
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = themeConfig;

package/dist/cjs/theme-ids.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeIds = void 0;
+/**
+ * Theme ids: The value that will be mounted to the DOM as a data attr
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
+ *
+ * These ids must be kebab case
+ */
+var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];

package/dist/cjs/theme-state-transformer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.themeStringToObject = exports.themeObjectToString = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _themeConfig = require("./theme-config");
+var _themeIds = require("./theme-ids");
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
@@ -16,7 +16,7 @@ var isThemeKind = function isThemeKind(themeKind) {
   }) !== undefined;
 };
 var isThemeIds = function isThemeIds(themeId) {
-  return _themeConfig.themeIds.find(function (id) {
+  return _themeIds.themeIds.find(function (id) {
     return id === themeId;
   }) !== undefined;
 };
@@ -73,6 +73,7 @@ var themeStringToObject = exports.themeStringToObject = function themeStringToOb
  * // returns 'dark:dark light:light spacing:spacing'
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
   return Object.entries(themeState).reduce(function (themeString, _ref3) {
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),

package/dist/cjs/utils/color-detection.js

@@ -3,17 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hexToRGBAValues = exports.getBoxShadow = void 0;
-var hexToRGBAValues = exports.hexToRGBAValues = function hexToRGBAValues(hex) {
-  var hexColor = hex.replace('#', '');
-  return {
-    r: parseInt(hexColor.slice(0, 2), 16),
-    g: parseInt(hexColor.slice(2, 4), 16),
-    b: parseInt(hexColor.slice(4, 6), 16),
-    a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
-  };
-};
-
+exports.getBoxShadow = void 0;
+Object.defineProperty(exports, "hexToRGBAValues", {
+  enumerable: true,
+  get: function get() {
+    return _hexToRgbaValues.hexToRGBAValues;
+  }
+});
+var _hexToRgbaValues = require("./hex-to-rgba-values");
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
@@ -25,7 +22,7 @@ var getBoxShadow = exports.getBoxShadow = function getBoxShadow(rawShadow) {
       offset = _ref.offset,
       color = _ref.color,
       opacity = _ref.opacity;
-    var _hexToRGBAValues = hexToRGBAValues(color),
+    var _hexToRGBAValues = (0, _hexToRgbaValues.hexToRGBAValues)(color),
       r = _hexToRGBAValues.r,
       g = _hexToRGBAValues.g,
       b = _hexToRGBAValues.b;