@atlaskit/tokens 1.22.0 → 1.23.0

package/dist/esm/custom-theme.js

@@ -1,5 +1,3 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
 import { themeStateDefaults } from './theme-config';
 import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
@@ -20,83 +18,52 @@ export var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
  * @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 A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * @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.
  */
-export function getCustomThemeStyles(_x) {
-  return _getCustomThemeStyles.apply(this, arguments);
-}
-function _getCustomThemeStyles() {
-  _getCustomThemeStyles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeState) {
-    var _themeState$UNSAFE_th;
-    var brandColor, mode, optionString, uniqueId, themeRamp, themes, tokenMaps;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
-          mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
-          optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
-          uniqueId = hash(optionString);
-          themeRamp = generateColors(brandColor).ramp; // outputs object to generate to CSS from
-          themes = [];
-          tokenMaps = 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(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat(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(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.dark, themeRamp), "\n}")
-            });
-          }
-          return _context.abrupt("return", themes);
-        case 10:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _getCustomThemeStyles.apply(this, arguments);
-}
-export function loadAndAppendCustomThemeCss(_x2) {
-  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+export function getCustomThemeStyles(themeState) {
+  var _themeState$UNSAFE_th;
+  var brandColor = themeState === null || themeState === void 0 ? 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) || themeStateDefaults['colorMode'];
+  var optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+  var uniqueId = hash(optionString);
+  var themeRamp = generateColors(brandColor).ramp;
+
+  // outputs object to generate to CSS from
+  var themes = [];
+  var tokenMaps = 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(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat(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(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.dark, themeRamp), "\n}")
+    });
+  }
+  return themes;
 }
-function _loadAndAppendCustomThemeCss() {
-  _loadAndAppendCustomThemeCss = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeState) {
-    var themes;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.next = 2;
-          return getCustomThemeStyles(themeState);
-        case 2:
-          themes = _context2.sent;
-          limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
-          themes.map(function (theme) {
-            var 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;
-          });
-        case 5:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+export function loadAndAppendCustomThemeCss(themeState) {
+  var themes = getCustomThemeStyles(themeState);
+  limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+  themes.map(function (theme) {
+    var 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/esm/enable-global-theme.js

@@ -0,0 +1,63 @@
+import { themeStateDefaults } from './theme-config';
+import configurePage from './utils/configure-page';
+import { getThemePreferences } from './utils/get-theme-preferences';
+
+/**
+ * Synchronously sets the theme globally at runtime. Themes are not loaded;
+ * use `getThemeStyles` and other server-side utilities to generate and load them.
+ *
+ * @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
+ * @param {function} themeLoader Callback function used to override the default theme loading functionality.
+ *
+ * @returns An unbind function, that can be used to stop listening for changes to system theme.
+ *
+ * @example
+ * ```
+ * enableGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
+ * ```
+ */
+var enableGlobalTheme = function enableGlobalTheme() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$colorMode = _ref.colorMode,
+    colorMode = _ref$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref$colorMode,
+    _ref$dark = _ref.dark,
+    dark = _ref$dark === void 0 ? themeStateDefaults['dark'] : _ref$dark,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? themeStateDefaults['light'] : _ref$light,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? themeStateDefaults['shape'] : _ref$shape,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? themeStateDefaults['spacing'] : _ref$spacing,
+    _ref$typography = _ref.typography,
+    typography = _ref$typography === void 0 ? themeStateDefaults['typography'] : _ref$typography,
+    _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
+  var themeLoader = arguments.length > 1 ? arguments[1] : undefined;
+  var themeState = {
+    colorMode: colorMode,
+    dark: dark,
+    light: light,
+    shape: shape,
+    spacing: spacing,
+    typography: typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+  };
+
+  // Determine what to load and call theme loader
+  var themePreferences = getThemePreferences(themeState);
+  if (themeLoader) {
+    themePreferences.map(function (themeId) {
+      return themeLoader(themeId);
+    });
+  }
+  var autoUnbind = configurePage(themeState);
+  return autoUnbind;
+};
+export default enableGlobalTheme;

package/dist/esm/entry-points/custom-themes.js

@@ -0,0 +1 @@
+export { default as UNSAFE_loadCustomThemeStyles } from '../load-custom-theme-styles';

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

@@ -37,15 +37,13 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     typography = _ref$typography === void 0 ? themeStateDefaults['typography'] : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
-  var themePreferences = {
+  var themeAttribute = themeObjectToString({
     dark: dark,
     light: light,
     shape: shape,
-    // Load spacing by default
-    spacing: spacing || 'spacing',
+    spacing: spacing,
     typography: typography
-  };
-  var themeAttribute = themeObjectToString(themePreferences);
+  });
   var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
   if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
     var optionString = JSON.stringify(UNSAFE_themeOptions);

package/dist/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.22.0";
+var version = "1.23.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.22.0";
+var version = "1.23.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { default as themeConfig } from './theme-config';
 export { default as token } from './get-token';
 export { default as getTokenValue } from './get-token-value';
 export { default as setGlobalTheme } from './set-global-theme';
+export { default as enableGlobalTheme } from './enable-global-theme';
 export { default as getThemeStyles } from './get-theme-styles';
 export { default as getThemeHtmlAttrs } from './get-theme-html-attrs';
 export { default as getSSRAutoScript } from './get-ssr-auto-script';

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

@@ -0,0 +1,39 @@
+import { loadAndAppendCustomThemeCss } from './custom-theme';
+import { themeStateDefaults } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+
+/**
+ * Synchronously generates and applies custom theme styles to the page.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @example
+ * ```
+ * UNSAFE_loadCustomThemeStyles({
+ *    colorMode: 'auto',
+ *    UNSAFE_themeOptions: { brandColor: '#FF0000' }
+ * });
+ * ```
+ */
+var UNSAFE_loadCustomThemeStyles = function UNSAFE_loadCustomThemeStyles() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$colorMode = _ref.colorMode,
+    colorMode = _ref$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref$colorMode,
+    _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
+  // Load custom theme styles
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+    var attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, colorMode);
+    if (attrOfMissingCustomStyles.length !== 0) {
+      loadAndAppendCustomThemeCss({
+        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+        // only load the missing custom theme styles
+        attrOfMissingCustomStyles[0],
+        UNSAFE_themeOptions: UNSAFE_themeOptions
+      });
+    }
+  }
+};
+export default UNSAFE_loadCustomThemeStyles;

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

@@ -1,32 +1,11 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { bind } from 'bind-event-listener';
-import noop from '@atlaskit/ds-lib/noop';
-import { COLOR_MODE_ATTRIBUTE } from './constants';
-import getThemeHtmlAttrs from './get-theme-html-attrs';
 import { themeStateDefaults } from './theme-config';
 import { isValidBrandHex } from './utils/color-utils';
+import configurePage from './utils/configure-page';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
 import { getThemePreferences } from './utils/get-theme-preferences';
-import { darkModeMediaQuery, loadAndAppendThemeCss } from './utils/theme-loading';
-
-// Represents theme state once mounted to the page (auto is hidden from observers)
-
-var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
-var unbindThemeChangeListener = noop;
-
-/**
- * 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.
- */
-var checkNativeListener = function checkNativeListener(e) {
-  var element = document.documentElement;
-  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
-};
+import { loadAndAppendThemeCss } from './utils/theme-loading';
 
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -66,26 +45,31 @@ var setGlobalTheme = /*#__PURE__*/function () {
       _ref2$UNSAFE_themeOpt,
       UNSAFE_themeOptions,
       themeLoader,
+      themeState,
       themePreferences,
       loadingStrategy,
-      themeAttributes,
+      loadingTasks,
+      mode,
+      attrOfMissingCustomStyles,
+      autoUnbind,
       _args3 = arguments;
     return _regeneratorRuntime.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;
           themeLoader = _args3.length > 1 ? _args3[1] : undefined;
-          themePreferences = getThemePreferences({
+          themeState = {
             colorMode: colorMode,
             dark: dark,
             light: light,
             shape: shape,
             spacing: spacing,
-            typography: typography
-          });
-          loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-          _context3.next = 6;
-          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
+            typography: typography,
+            UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+          }; // Determine what to load and loading strategy
+          themePreferences = getThemePreferences(themeState);
+          loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss; // Load standard themes
+          loadingTasks = themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
               return _regeneratorRuntime.wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
@@ -103,71 +87,43 @@ var setGlobalTheme = /*#__PURE__*/function () {
             return function (_x) {
               return _ref3.apply(this, arguments);
             };
-          }())), [_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-            var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
-            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
-                case 0:
-                  if (!(!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
-                    _context2.next = 11;
-                    break;
-                  }
-                  mode = colorMode || themeStateDefaults['colorMode'];
-                  attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
-                  if (!(attrOfMissingCustomStyles.length === 0)) {
-                    _context2.next = 5;
-                    break;
+          }()); // Load custom themes if needed
+          if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+            mode = colorMode || themeStateDefaults['colorMode'];
+            attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+            if (attrOfMissingCustomStyles.length > 0) {
+              // Load custom theme styles
+              loadingTasks.push(_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                var _yield$import, loadAndAppendCustomThemeCss;
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.next = 2;
+                      return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                      './custom-theme');
+                    case 2:
+                      _yield$import = _context2.sent;
+                      loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
+                      loadAndAppendCustomThemeCss({
+                        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+                        // only load the missing custom theme styles
+                        attrOfMissingCustomStyles[0],
+                        UNSAFE_themeOptions: UNSAFE_themeOptions
+                      });
+                    case 5:
+                    case "end":
+                      return _context2.stop();
                   }
-                  return _context2.abrupt("return", false);
-                case 5:
-                  _context2.next = 7;
-                  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-                  './custom-theme');
-                case 7:
-                  _yield$import = _context2.sent;
-                  loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
-                  _context2.next = 11;
-                  return loadAndAppendCustomThemeCss({
-                    colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
-                    // only load the missing custom theme styles
-                    attrOfMissingCustomStyles[0],
-                    UNSAFE_themeOptions: UNSAFE_themeOptions
-                  });
-                case 11:
-                case "end":
-                  return _context2.stop();
-              }
-            }, _callee2);
-          }))()]));
-        case 6:
-          if (colorMode === 'auto' && darkModeMql) {
-            colorMode = darkModeMql.matches ? 'dark' : 'light';
-            // Add an event listener for changes to the system theme.
-            // If the function exists, it will not be added again.
-            unbindThemeChangeListener = bind(darkModeMql, {
-              type: 'change',
-              listener: checkNativeListener
-            });
-          } else {
-            unbindThemeChangeListener();
+                }, _callee2);
+              }))());
+            }
           }
-          themeAttributes = getThemeHtmlAttrs({
-            colorMode: colorMode,
-            dark: dark,
-            light: light,
-            shape: shape,
-            spacing: spacing,
-            typography: typography,
-            UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
-          });
-          Object.entries(themeAttributes).forEach(function (_ref5) {
-            var _ref6 = _slicedToArray(_ref5, 2),
-              key = _ref6[0],
-              value = _ref6[1];
-            document.documentElement.setAttribute(key, value);
-          });
-          return _context3.abrupt("return", unbindThemeChangeListener);
-        case 10:
+          _context3.next = 9;
+          return Promise.all(loadingTasks);
+        case 9:
+          autoUnbind = configurePage(themeState);
+          return _context3.abrupt("return", autoUnbind);
+        case 11:
         case "end":
           return _context3.stop();
       }

package/dist/esm/theme-config.js

@@ -174,8 +174,14 @@ export var themeStateDefaults = {
   dark: 'dark',
   light: 'light',
   shape: undefined,
-  spacing: undefined,
+  spacing: 'spacing',
   typography: undefined,
   UNSAFE_themeOptions: undefined
 };
+
+/**
+ * Represents theme state once mounted to the page
+ * (the page doesn't have an "auto" color mode, it's either light or dark)
+ */
+
 export default themeConfig;

package/dist/esm/utils/color-mode-listeners.js

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind as _bind } from 'bind-event-listener';
+import { COLOR_MODE_ATTRIBUTE } from '../constants';
+import { darkModeMediaQuery } from './theme-loading';
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+
+/**
+ * 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.
+ */
+function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
+var ColorModeObserver = /*#__PURE__*/function () {
+  function ColorModeObserver() {
+    _classCallCheck(this, ColorModeObserver);
+    _defineProperty(this, "unbindThemeChangeListener", null);
+  }
+  _createClass(ColorModeObserver, [{
+    key: "getColorMode",
+    value: function getColorMode() {
+      if (!darkModeMql) {
+        return 'light';
+      }
+      return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
+    }
+  }, {
+    key: "bind",
+    value: function bind() {
+      if (darkModeMql && this.unbindThemeChangeListener === null) {
+        this.unbindThemeChangeListener = _bind(darkModeMql, {
+          type: 'change',
+          listener: checkNativeListener
+        });
+      }
+    }
+  }, {
+    key: "unbind",
+    value: function unbind() {
+      if (this.unbindThemeChangeListener) {
+        this.unbindThemeChangeListener();
+        this.unbindThemeChangeListener = null;
+      }
+    }
+  }]);
+  return ColorModeObserver;
+}();
+/**
+ * A singleton color mode observer - binds "auto" switching logic to a single `mediaQueryList` listener
+ * that can be unbound by any consumer when no longer needed.
+ */
+var SingletonColorModeObserver = new ColorModeObserver();
+export default SingletonColorModeObserver;

package/dist/esm/utils/configure-page.js

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import getThemeHtmlAttrs from '../get-theme-html-attrs';
+import ColorModeObserver from './color-mode-listeners';
+
+/**
+ * Given ThemeState, sets appropriate html attributes on the documentElement,
+ * adds a listener to keep colorMode updated, and returns a function to unbind.
+ */
+export default function configurePage(themeState) {
+  if (themeState.colorMode === 'auto') {
+    // Set colorMode based on the user preference
+    themeState.colorMode = ColorModeObserver.getColorMode();
+    // Bind a listener (if one doesn't already exist) to keep colorMode updated
+    ColorModeObserver.bind();
+  } else {
+    ColorModeObserver.unbind();
+  }
+  var themeAttributes = getThemeHtmlAttrs(themeState);
+  Object.entries(themeAttributes).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    document.documentElement.setAttribute(key, value);
+  });
+  return function () {
+    return ColorModeObserver.unbind;
+  };
+}

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

@@ -16,10 +16,5 @@ export var getThemePreferences = function getThemePreferences(themeState) {
   if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
     themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
   }
-
-  // Load spacing by default
-  if (!themePreferences.includes('spacing')) {
-    themePreferences.push('spacing');
-  }
   return _toConsumableArray(new Set(themePreferences));
 };

package/dist/types/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const COLOR_MODE_ATTRIBUTE = "data-color-mode";
 export declare const CUSTOM_THEME_ATTRIBUTE = "data-custom-theme";
+export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
 export declare const CSS_VAR_FULL: string[];
 export declare const TOKEN_NOT_FOUND_CSS_VAR: string;

package/dist/types/custom-theme.d.ts

@@ -14,12 +14,12 @@ export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
  * @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 A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * @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.
  */
 export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
     UNSAFE_themeOptions: ThemeOptionsSchema;
-}): Promise<ThemeStyles[]>;
+}): ThemeStyles[];
 export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
     UNSAFE_themeOptions: ThemeOptionsSchema;
-}): Promise<void>;
+}): void;