@atlaskit/tokens 1.22.1 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/tokens
 
+## 1.23.0
+
+### Minor Changes
+
+- [`5a967ac2397`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a967ac2397) - Adds two new synchronous theme configuration utilities:
+
+  - `enableGlobalTheme` is a synchronous version of `setGlobalTheme` that sets data attributes on the page and takes a themeLoader
+  - `UNSAFE_loadCustomThemeStyles` provides a synchronous way to generate and apply custom theme styles to the page. It can be accessed from a new entrypoint, `@atlaskit/tokens/custom-themes`
+
 ## 1.22.1
 
 ### Patch Changes

package/custom-themes/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/tokens/custom-themes",
+  "main": "../dist/cjs/entry-points/custom-themes.js",
+  "module": "../dist/esm/entry-points/custom-themes.js",
+  "module:es2019": "../dist/es2019/entry-points/custom-themes.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "../dist/types/entry-points/custom-themes.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/custom-themes.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/constants.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.CUSTOM_THEME_ATTRIBUTE = exports.CURRENT_SURFACE_CSS_VAR = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CURRENT_SURFACE_CSS_VAR = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
 exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 exports.COLOR_MODE_ATTRIBUTE = COLOR_MODE_ATTRIBUTE;
 var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 exports.CUSTOM_THEME_ATTRIBUTE = CUSTOM_THEME_ATTRIBUTE;
+var DEFAULT_THEME = 'light';
+exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds';
 exports.CSS_PREFIX = CSS_PREFIX;
 var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];

package/dist/cjs/custom-theme.js

@@ -1,14 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = void 0;
 exports.getCustomThemeStyles = getCustomThemeStyles;
 exports.loadAndAppendCustomThemeCss = loadAndAppendCustomThemeCss;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
@@ -29,84 +26,53 @@ 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.
  */
 exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD;
-function getCustomThemeStyles(_x) {
-  return _getCustomThemeStyles.apply(this, arguments);
-}
-function _getCustomThemeStyles() {
-  _getCustomThemeStyles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeState) {
-    var _themeState$UNSAFE_th;
-    var brandColor, mode, optionString, uniqueId, themeRamp, themes, tokenMaps;
-    return _regenerator.default.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) || _themeConfig.themeStateDefaults['colorMode'];
-          optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
-          uniqueId = (0, _hash.hash)(optionString);
-          themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor).ramp; // outputs object to generate to CSS from
-          themes = [];
-          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 _context.abrupt("return", themes);
-        case 10:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _getCustomThemeStyles.apply(this, arguments);
-}
-function loadAndAppendCustomThemeCss(_x2) {
-  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+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) || _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;
 }
-function _loadAndAppendCustomThemeCss() {
-  _loadAndAppendCustomThemeCss = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeState) {
-    var themes;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.next = 2;
-          return getCustomThemeStyles(themeState);
-        case 2:
-          themes = _context2.sent;
-          (0, _customThemeLoadingUtils.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);
+function loadAndAppendCustomThemeCss(themeState) {
+  var themes = getCustomThemeStyles(themeState);
+  (0, _customThemeLoadingUtils.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/cjs/enable-global-theme.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _themeConfig = require("./theme-config");
+var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
+var _getThemePreferences = require("./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 ? _themeConfig.themeStateDefaults['colorMode'] : _ref$colorMode,
+    _ref$dark = _ref.dark,
+    dark = _ref$dark === void 0 ? _themeConfig.themeStateDefaults['dark'] : _ref$dark,
+    _ref$light = _ref.light,
+    light = _ref$light === void 0 ? _themeConfig.themeStateDefaults['light'] : _ref$light,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? _themeConfig.themeStateDefaults['shape'] : _ref$shape,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? _themeConfig.themeStateDefaults['spacing'] : _ref$spacing,
+    _ref$typography = _ref.typography,
+    typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref$typography,
+    _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.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 = (0, _getThemePreferences.getThemePreferences)(themeState);
+  if (themeLoader) {
+    themePreferences.map(function (themeId) {
+      return themeLoader(themeId);
+    });
+  }
+  var autoUnbind = (0, _configurePage.default)(themeState);
+  return autoUnbind;
+};
+var _default = enableGlobalTheme;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UNSAFE_loadCustomThemeStyles", {
+  enumerable: true,
+  get: function get() {
+    return _loadCustomThemeStyles.default;
+  }
+});
+var _loadCustomThemeStyles = _interopRequireDefault(require("../load-custom-theme-styles"));

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.22.1";
+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/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.22.1";
+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/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "ThemeMutationObserver", {
     return _themeMutationObserver.default;
   }
 });
+Object.defineProperty(exports, "enableGlobalTheme", {
+  enumerable: true,
+  get: function get() {
+    return _enableGlobalTheme.default;
+  }
+});
 Object.defineProperty(exports, "getGlobalTheme", {
   enumerable: true,
   get: function get() {
@@ -86,6 +92,7 @@ var _themeConfig = _interopRequireDefault(require("./theme-config"));
 var _getToken = _interopRequireDefault(require("./get-token"));
 var _getTokenValue = _interopRequireDefault(require("./get-token-value"));
 var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+var _enableGlobalTheme = _interopRequireDefault(require("./enable-global-theme"));
 var _getThemeStyles = _interopRequireDefault(require("./get-theme-styles"));
 var _getThemeHtmlAttrs = _interopRequireDefault(require("./get-theme-html-attrs"));
 var _getSsrAutoScript = _interopRequireDefault(require("./get-ssr-auto-script"));

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+/**
+ * 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 ? _themeConfig.themeStateDefaults['colorMode'] : _ref$colorMode,
+    _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)) {
+    var attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, colorMode);
+    if (attrOfMissingCustomStyles.length !== 0) {
+      (0, _customTheme.loadAndAppendCustomThemeCss)({
+        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+        // only load the missing custom theme styles
+        attrOfMissingCustomStyles[0],
+        UNSAFE_themeOptions: UNSAFE_themeOptions
+      });
+    }
+  }
+};
+var _default = UNSAFE_loadCustomThemeStyles;
+exports.default = _default;

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

@@ -7,36 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-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 _constants = require("./constants");
-var _getThemeHtmlAttrs = _interopRequireDefault(require("./get-theme-html-attrs"));
 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 _getThemePreferences = require("./utils/get-theme-preferences");
 var _themeLoading = require("./utils/theme-loading");
 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 isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-var darkModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.darkModeMediaQuery);
-var unbindThemeChangeListener = _noop.default;
-
-/**
- * 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(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
-};
-
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
@@ -75,26 +54,31 @@ var setGlobalTheme = /*#__PURE__*/function () {
       _ref2$UNSAFE_themeOpt,
       UNSAFE_themeOptions,
       themeLoader,
+      themeState,
       themePreferences,
       loadingStrategy,
-      themeAttributes,
+      loadingTasks,
+      mode,
+      attrOfMissingCustomStyles,
+      autoUnbind,
       _args3 = arguments;
     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 ? _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 = (0, _getThemePreferences.getThemePreferences)({
+          themeState = {
             colorMode: colorMode,
             dark: dark,
             light: light,
             shape: shape,
             spacing: spacing,
-            typography: typography
-          });
-          loadingStrategy = themeLoader ? themeLoader : _themeLoading.loadAndAppendThemeCss;
-          _context3.next = 6;
-          return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
+            typography: typography,
+            UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+          }; // Determine what to load and loading strategy
+          themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
+          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) {
                 while (1) switch (_context.prev = _context.next) {
@@ -112,73 +96,45 @@ var setGlobalTheme = /*#__PURE__*/function () {
             return function (_x) {
               return _ref3.apply(this, arguments);
             };
-          }())), [(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-            var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
-            return _regenerator.default.wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
-                case 0:
-                  if (!(!themeLoader && UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
-                    _context2.next = 11;
-                    break;
-                  }
-                  mode = colorMode || _themeConfig.themeStateDefaults['colorMode'];
-                  attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, mode);
-                  if (!(attrOfMissingCustomStyles.length === 0)) {
-                    _context2.next = 5;
-                    break;
+          }()); // Load custom themes if needed
+          if (!themeLoader && UNSAFE_themeOptions && (0, _colorUtils.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) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.next = 2;
+                      return Promise.resolve().then(function () {
+                        return _interopRequireWildcard(require( /* 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 Promise.resolve().then(function () {
-                    return _interopRequireWildcard(require( /* 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 = (0, _bindEventListener.bind)(darkModeMql, {
-              type: 'change',
-              listener: checkNativeListener
-            });
-          } else {
-            unbindThemeChangeListener();
+                }, _callee2);
+              }))());
+            }
           }
-          themeAttributes = (0, _getThemeHtmlAttrs.default)({
-            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 = (0, _slicedToArray2.default)(_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 = (0, _configurePage.default)(themeState);
+          return _context3.abrupt("return", autoUnbind);
+        case 11:
         case "end":
           return _context3.stop();
       }

package/dist/cjs/theme-config.js

@@ -187,6 +187,11 @@ var themeStateDefaults = {
   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)
+ */
 exports.themeStateDefaults = themeStateDefaults;
 var _default = themeConfig;
 exports.default = _default;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _bindEventListener = require("bind-event-listener");
+var _constants = require("../constants");
+var _themeLoading = require("./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(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+var darkModeMql = isMatchMediaAvailable && window.matchMedia(_themeLoading.darkModeMediaQuery);
+var ColorModeObserver = /*#__PURE__*/function () {
+  function ColorModeObserver() {
+    (0, _classCallCheck2.default)(this, ColorModeObserver);
+    (0, _defineProperty2.default)(this, "unbindThemeChangeListener", null);
+  }
+  (0, _createClass2.default)(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 = (0, _bindEventListener.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();
+var _default = SingletonColorModeObserver;
+exports.default = _default;