@atlaskit/tokens 1.13.1 → 1.14.0

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

@@ -5,76 +5,37 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeStateDefaults = exports.getThemeStyles = exports.getThemeHtmlAttrs = exports.getSSRAutoScript = exports.default = void 0;
+exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
+var _getThemeHtmlAttrs = _interopRequireDefault(require("./get-theme-html-attrs"));
 var _themeConfig = require("./theme-config");
 var _colorUtils = require("./utils/color-utils");
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
-var _hash = require("./utils/hash");
+var _getThemePreferences = require("./utils/get-theme-preferences");
 var _themeLoading = require("./utils/theme-loading");
-var _themeStateTransformer = require("./utils/theme-state-transformer");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Represents theme state once mounted to the page (auto is hidden from observers)
 
-var defaultColorMode = 'light';
 var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-var darkModeMediaQuery = '(prefers-color-scheme: dark)';
-var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
+var darkModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.darkModeMediaQuery);
 var unbindThemeChangeListener = _noop.default;
-var themeStateDefaults = {
-  colorMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: undefined,
-  spacing: undefined,
-  typography: undefined,
-  UNSAFE_themeOptions: undefined
-};
 
 /**
  * Updates the current theme when the system theme changes. Should be bound
  * to an event listener listening on the '(prefers-color-scheme: dark)' query
  * @param e The event representing a change in system theme.
  */
-exports.themeStateDefaults = themeStateDefaults;
 var checkNativeListener = function checkNativeListener(e) {
   var element = document.documentElement;
   element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
 };
-var getThemePreferences = function getThemePreferences(themeState) {
-  var colorMode = themeState.colorMode,
-    dark = themeState.dark,
-    light = themeState.light,
-    shape = themeState.shape,
-    spacing = themeState.spacing,
-    typography = themeState.typography;
-  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [shape, spacing, typography].forEach(function (themeId) {
-    if (themeId) {
-      themePreferences.push(themeId);
-    }
-  });
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu')) {
-    themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
-  }
-
-  // Load shape and spacing by default, currently behind a feature flag
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('spacing')) {
-      themePreferences.push('spacing');
-    }
-  }
-  return (0, _toConsumableArray2.default)(new Set(themePreferences));
-};
 
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -121,9 +82,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _regenerator.default.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[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$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _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, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
+          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? _themeConfig.themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
-          themePreferences = getThemePreferences({
+          themePreferences = (0, _getThemePreferences.getThemePreferences)({
             colorMode: colorMode,
             dark: dark,
             light: light,
@@ -160,7 +121,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
                     _context2.next = 11;
                     break;
                   }
-                  mode = colorMode || themeStateDefaults['colorMode'];
+                  mode = colorMode || _themeConfig.themeStateDefaults['colorMode'];
                   attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, mode);
                   if (!(attrOfMissingCustomStyles.length === 0)) {
                     _context2.next = 5;
@@ -201,7 +162,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
           } else {
             unbindThemeChangeListener();
           }
-          themeAttributes = getThemeHtmlAttrs({
+          themeAttributes = (0, _getThemeHtmlAttrs.default)({
             colorMode: colorMode,
             dark: dark,
             light: light,
@@ -227,199 +188,5 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-/**
- * 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.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns A Promise of 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.
- */
-var getThemeStyles = /*#__PURE__*/function () {
-  var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(preferences) {
-    var themePreferences, results;
-    return _regenerator.default.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          if (preferences === 'all') {
-            themePreferences = _themeConfig.themeIdsWithOverrides;
-          } else {
-            themePreferences = getThemePreferences({
-              colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-              dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
-              light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
-              shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
-              spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
-              typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
-            });
-          }
-          _context6.next = 3;
-          return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
-            var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(themeId) {
-              var css;
-              return _regenerator.default.wrap(function _callee4$(_context4) {
-                while (1) switch (_context4.prev = _context4.next) {
-                  case 0:
-                    _context4.prev = 0;
-                    _context4.next = 3;
-                    return (0, _themeLoading.loadThemeCss)(themeId);
-                  case 3:
-                    css = _context4.sent;
-                    return _context4.abrupt("return", {
-                      id: themeId,
-                      attrs: {
-                        'data-theme': themeId
-                      },
-                      css: css
-                    });
-                  case 7:
-                    _context4.prev = 7;
-                    _context4.t0 = _context4["catch"](0);
-                    return _context4.abrupt("return", undefined);
-                  case 10:
-                  case "end":
-                    return _context4.stop();
-                }
-              }, _callee4, null, [[0, 7]]);
-            }));
-            return function (_x3) {
-              return _ref8.apply(this, arguments);
-            };
-          }())), [
-          // Add custom themes if they're present
-          (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-            var _preferences$UNSAFE_t;
-            var _yield$import2, getCustomThemeStyles, customThemeStyles;
-            return _regenerator.default.wrap(function _callee5$(_context5) {
-              while (1) switch (_context5.prev = _context5.next) {
-                case 0:
-                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
-                    _context5.next = 15;
-                    break;
-                  }
-                  _context5.prev = 1;
-                  _context5.next = 4;
-                  return Promise.resolve().then(function () {
-                    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-                    './custom-theme'));
-                  });
-                case 4:
-                  _yield$import2 = _context5.sent;
-                  getCustomThemeStyles = _yield$import2.getCustomThemeStyles;
-                  _context5.next = 8;
-                  return getCustomThemeStyles({
-                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
-                  });
-                case 8:
-                  customThemeStyles = _context5.sent;
-                  return _context5.abrupt("return", customThemeStyles);
-                case 12:
-                  _context5.prev = 12;
-                  _context5.t0 = _context5["catch"](1);
-                  return _context5.abrupt("return", undefined);
-                case 15:
-                case "end":
-                  return _context5.stop();
-              }
-            }, _callee5, null, [[1, 12]]);
-          }))()]));
-        case 3:
-          results = _context6.sent;
-          return _context6.abrupt("return", results.flat().filter(function (theme) {
-            return theme !== undefined;
-          }));
-        case 5:
-        case "end":
-          return _context6.stop();
-      }
-    }, _callee6);
-  }));
-  return function getThemeStyles(_x2) {
-    return _ref7.apply(this, arguments);
-  };
-}();
-
-/**
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
- * Note: this utility does not handle automatic theme switching.
- *
- * @param {Object<string, string>} themeOptions - Theme options object
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns {Object} Object of HTML attributes to be applied to the document root
- */
-exports.getThemeStyles = getThemeStyles;
-var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
-  var _result;
-  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref10$colorMode = _ref10.colorMode,
-    colorMode = _ref10$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref10$colorMode,
-    _ref10$dark = _ref10.dark,
-    dark = _ref10$dark === void 0 ? themeStateDefaults['dark'] : _ref10$dark,
-    _ref10$light = _ref10.light,
-    light = _ref10$light === void 0 ? themeStateDefaults['light'] : _ref10$light,
-    _ref10$shape = _ref10.shape,
-    shape = _ref10$shape === void 0 ? themeStateDefaults['shape'] : _ref10$shape,
-    _ref10$spacing = _ref10.spacing,
-    spacing = _ref10$spacing === void 0 ? themeStateDefaults['spacing'] : _ref10$spacing,
-    _ref10$typography = _ref10.typography,
-    typography = _ref10$typography === void 0 ? themeStateDefaults['typography'] : _ref10$typography,
-    _ref10$UNSAFE_themeOp = _ref10.UNSAFE_themeOptions,
-    UNSAFE_themeOptions = _ref10$UNSAFE_themeOp === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref10$UNSAFE_themeOp;
-  var themePreferences = {
-    dark: dark,
-    light: light,
-    shape: shape,
-    spacing: spacing,
-    typography: typography
-  };
-
-  // Load spacing by default, currently behind a feature flag
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    themePreferences = {
-      dark: dark,
-      light: light,
-      shape: shape,
-      spacing: 'spacing',
-      typography: typography
-    };
-  }
-  var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
-  var result = (_result = {}, (0, _defineProperty2.default)(_result, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_result, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
-  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
-    var optionString = JSON.stringify(UNSAFE_themeOptions);
-    var uniqueId = (0, _hash.hash)(optionString);
-    result[_constants.CUSTOM_THEME_ATTRIBUTE] = uniqueId;
-  }
-  return result;
-};
-
-/**
- * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
- * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
- *
- * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- *
- * @returns {string} A string to be added to the innerHTML of a script tag in the document head
- */
-exports.getThemeHtmlAttrs = getThemeHtmlAttrs;
-var getSSRAutoScript = function getSSRAutoScript(colorMode) {
-  return colorMode === 'auto' ? "(\n  () => {\n    try {\n      const mql = window.matchMedia('".concat(darkModeMediaQuery, "');\n      const colorMode = mql.matches ? 'dark' : 'light';\n      document.documentElement.setAttribute('").concat(_constants.COLOR_MODE_ATTRIBUTE, "', colorMode);\n    } catch (e) {}\n  }\n)()") : undefined;
-};
-exports.getSSRAutoScript = getSSRAutoScript;
 var _default = setGlobalTheme;
 exports.default = _default;

package/dist/cjs/theme-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeOverrideIds = exports.themeIdsWithOverrides = exports.themeIds = exports.themeColorModes = exports.default = void 0;
+exports.themeStateDefaults = exports.themeOverrideIds = exports.themeIdsWithOverrides = exports.themeIds = exports.themeColorModes = exports.default = void 0;
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -150,5 +150,27 @@ var themeConfig = {
     }
   }
 };
+
+/**
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
+ */
+
+/**
+ * ThemeState: the standard representation of an app's current theme and preferences
+ */
+
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+var themeStateDefaults = {
+  colorMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  shape: undefined,
+  spacing: undefined,
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
+};
+exports.themeStateDefaults = themeStateDefaults;
 var _default = themeConfig;
 exports.default = _default;

package/dist/cjs/theme-mutation-observer.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ThemeMutationObserver = void 0;
+exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
-var _getGlobalTheme = require("./get-global-theme");
+var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -36,7 +36,7 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
       var _this = this;
       if (!this.observer) {
         this.observer = new MutationObserver(function () {
-          _this.callback((0, _getGlobalTheme.getGlobalTheme)());
+          _this.callback((0, _getGlobalTheme.default)());
         });
       }
       this.observer.observe(document.documentElement, {
@@ -51,4 +51,4 @@ var ThemeMutationObserver = /*#__PURE__*/function () {
   }]);
   return ThemeMutationObserver;
 }();
-exports.ThemeMutationObserver = ThemeMutationObserver;
+exports.default = ThemeMutationObserver;

package/dist/cjs/{utils/theme-state-transformer.js → theme-state-transformer.js}

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _themeConfig = require("./theme-config");
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -35,7 +37,7 @@ var isColorMode = function isColorMode(modeId) {
  */
 var themeStringToObject = function themeStringToObject(themeState) {
   return themeState.split(' ').map(function (theme) {
-    return theme.split(':');
+    return theme.split(/:([\s\S]*)/);
   }).reduce(function (themeObject, _ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       kind = _ref2[0],
@@ -47,6 +49,13 @@ var themeStringToObject = function themeStringToObject(themeState) {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -68,7 +77,16 @@ var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+    // custom theme state
+    kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
+    // other theme states
+    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
   }, '');
 };
 exports.themeObjectToString = themeObjectToString;

package/dist/cjs/use-theme-observer.js

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useThemeObserver = void 0;
+exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _getGlobalTheme = require("./get-global-theme");
-var _themeMutationObserver = require("./theme-mutation-observer");
+var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
+var _themeMutationObserver = _interopRequireDefault(require("./theme-mutation-observer"));
 /**
  * A React hook which returns the current themes and color-mode set on `<html>`.
  *
@@ -23,12 +23,12 @@ var _themeMutationObserver = require("./theme-mutation-observer");
  * ```
  */
 var useThemeObserver = function useThemeObserver() {
-  var _useState = (0, _react.useState)((0, _getGlobalTheme.getGlobalTheme)()),
+  var _useState = (0, _react.useState)((0, _getGlobalTheme.default)()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     theme = _useState2[0],
     setTheme = _useState2[1];
   (0, _react.useEffect)(function () {
-    var observer = new _themeMutationObserver.ThemeMutationObserver(function (theme) {
+    var observer = new _themeMutationObserver.default(function (theme) {
       return setTheme(theme);
     });
     observer.observe();
@@ -38,4 +38,5 @@ var useThemeObserver = function useThemeObserver() {
   }, []);
   return theme;
 };
-exports.useThemeObserver = useThemeObserver;
+var _default = useThemeObserver;
+exports.default = _default;

package/dist/cjs/utils/get-theme-preferences.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getThemePreferences = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var getThemePreferences = function getThemePreferences(themeState) {
+  var colorMode = themeState.colorMode,
+    dark = themeState.dark,
+    light = themeState.light,
+    shape = themeState.shape,
+    spacing = themeState.spacing,
+    typography = themeState.typography;
+  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
+  [shape, spacing, typography].forEach(function (themeId) {
+    if (themeId) {
+      themePreferences.push(themeId);
+    }
+  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu')) {
+    themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
+  }
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    if (!themePreferences.includes('spacing')) {
+      themePreferences.push('spacing');
+    }
+  }
+  return (0, _toConsumableArray2.default)(new Set(themePreferences));
+};
+exports.getThemePreferences = getThemePreferences;

package/dist/cjs/utils/theme-loading.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loadThemeCss = exports.loadAndAppendThemeCss = void 0;
+exports.loadThemeCss = exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
@@ -62,4 +62,6 @@ var loadThemeCss = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
-exports.loadThemeCss = loadThemeCss;
+exports.loadThemeCss = loadThemeCss;
+var darkModeMediaQuery = '(prefers-color-scheme: dark)';
+exports.darkModeMediaQuery = darkModeMediaQuery;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.13.1",
+	"version": "1.14.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/custom-theme.js

@@ -1,9 +1,10 @@
 import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
-import { themeStateDefaults } from './set-global-theme';
+import { themeStateDefaults } from './theme-config';
 import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
 import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
 import { hash } from './utils/hash';
 export const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
+
 /**
  *
  * @param themeSchema The schema of available themes
@@ -64,14 +65,13 @@ html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][da
   return themes;
 }
 export async function loadAndAppendCustomThemeCss(themeState) {
-  getCustomThemeStyles(themeState).then(themes => {
-    limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
-    themes.map(theme => {
-      const styleTag = document.createElement('style');
-      document.head.appendChild(styleTag);
-      styleTag.dataset.theme = theme.attrs['data-theme'];
-      styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
-      styleTag.textContent = theme.css;
-    });
+  const themes = await getCustomThemeStyles(themeState);
+  limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+  themes.map(theme => {
+    const styleTag = document.createElement('style');
+    document.head.appendChild(styleTag);
+    styleTag.dataset.theme = theme.attrs['data-theme'];
+    styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
+    styleTag.textContent = theme.css;
   });
 }

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

@@ -1,10 +1,10 @@
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeColorModes } from './theme-config';
-import { themeStringToObject } from './utils/theme-state-transformer';
+import { themeStringToObject } from './theme-state-transformer';
 const isThemeColorMode = colorMode => {
   return themeColorModes.find(mode => mode === colorMode) !== undefined;
 };
-export const getGlobalTheme = () => {
+const getGlobalTheme = () => {
   if (typeof document === 'undefined') {
     return {};
   }
@@ -17,4 +17,5 @@ export const getGlobalTheme = () => {
       colorMode
     })
   };
-};
+};
+export default getGlobalTheme;

package/dist/es2019/get-ssr-auto-script.js

@@ -0,0 +1,23 @@
+import { COLOR_MODE_ATTRIBUTE } from './constants';
+import { darkModeMediaQuery } from './utils/theme-loading';
+
+/**
+ * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
+ * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
+ *
+ * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ *
+ * @returns {string} A string to be added to the innerHTML of a script tag in the document head
+ */
+const getSSRAutoScript = colorMode => {
+  return colorMode === 'auto' ? `(
+  () => {
+    try {
+      const mql = window.matchMedia('${darkModeMediaQuery}');
+      const colorMode = mql.matches ? 'dark' : 'light';
+      document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
+    } catch (e) {}
+  }
+)()` : undefined;
+};
+export default getSSRAutoScript;