@atlaskit/tokens 1.22.1 → 1.23.0

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = configurePage;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _getThemeHtmlAttrs = _interopRequireDefault(require("../get-theme-html-attrs"));
+var _colorModeListeners = _interopRequireDefault(require("./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.
+ */
+function configurePage(themeState) {
+  if (themeState.colorMode === 'auto') {
+    // Set colorMode based on the user preference
+    themeState.colorMode = _colorModeListeners.default.getColorMode();
+    // Bind a listener (if one doesn't already exist) to keep colorMode updated
+    _colorModeListeners.default.bind();
+  } else {
+    _colorModeListeners.default.unbind();
+  }
+  var themeAttributes = (0, _getThemeHtmlAttrs.default)(themeState);
+  Object.entries(themeAttributes).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    document.documentElement.setAttribute(key, value);
+  });
+  return function () {
+    return _colorModeListeners.default.unbind;
+  };
+}

package/dist/es2019/constants.js

@@ -1,6 +1,7 @@
 export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
+export const DEFAULT_THEME = 'light';
 export const CSS_PREFIX = 'ds';
 export const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;

package/dist/es2019/custom-theme.js

@@ -18,10 +18,10 @@ export 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 async function getCustomThemeStyles(themeState) {
+export function getCustomThemeStyles(themeState) {
   var _themeState$UNSAFE_th;
   const 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;
   const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
@@ -64,8 +64,8 @@ html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][da
   }
   return themes;
 }
-export async function loadAndAppendCustomThemeCss(themeState) {
-  const themes = await getCustomThemeStyles(themeState);
+export function loadAndAppendCustomThemeCss(themeState) {
+  const themes = getCustomThemeStyles(themeState);
   limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
   themes.map(theme => {
     const styleTag = document.createElement('style');

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

@@ -0,0 +1,53 @@
+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'});
+ * ```
+ */
+const enableGlobalTheme = ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}, themeLoader) => {
+  const themeState = {
+    colorMode,
+    dark,
+    light,
+    shape,
+    spacing,
+    typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+  };
+
+  // Determine what to load and call theme loader
+  const themePreferences = getThemePreferences(themeState);
+  if (themeLoader) {
+    themePreferences.map(themeId => themeLoader(themeId));
+  }
+  const autoUnbind = configurePage(themeState);
+  return autoUnbind;
+};
+export default enableGlobalTheme;

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

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

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.22.1";
+const 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/es2019/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';
 const name = "@atlaskit/tokens";
-const version = "1.22.1";
+const 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/es2019/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/es2019/load-custom-theme-styles.js

@@ -0,0 +1,37 @@
+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' }
+ * });
+ * ```
+ */
+const UNSAFE_loadCustomThemeStyles = ({
+  colorMode = themeStateDefaults['colorMode'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}) => {
+  // Load custom theme styles
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+    const 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
+      });
+    }
+  }
+};
+export default UNSAFE_loadCustomThemeStyles;

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

@@ -1,28 +1,9 @@
-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)
-
-const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
-let 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.
- */
-const checkNativeListener = function (e) {
-  const 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.
@@ -53,57 +34,45 @@ const setGlobalTheme = async ({
   typography = themeStateDefaults['typography'],
   UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, themeLoader) => {
-  const themePreferences = getThemePreferences({
+  const themeState = {
     colorMode,
     dark,
     light,
     shape,
     spacing,
-    typography
-  });
+    typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
+  };
+
+  // Determine what to load and loading strategy
+  const themePreferences = getThemePreferences(themeState);
   const loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-  await Promise.all([...themePreferences.map(async themeId => await loadingStrategy(themeId)), (async () => {
-    if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
-      const mode = colorMode || themeStateDefaults['colorMode'];
-      const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
-      if (attrOfMissingCustomStyles.length === 0) {
-        return false;
-      }
-      const {
-        loadAndAppendCustomThemeCss
-      } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-      './custom-theme');
-      await loadAndAppendCustomThemeCss({
-        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
-        // only load the missing custom theme styles
-        attrOfMissingCustomStyles[0],
-        UNSAFE_themeOptions
-      });
+
+  // Load standard themes
+  const loadingTasks = themePreferences.map(async themeId => await loadingStrategy(themeId));
+
+  // Load custom themes if needed
+  if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+    const mode = colorMode || themeStateDefaults['colorMode'];
+    const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+    if (attrOfMissingCustomStyles.length > 0) {
+      // Load custom theme styles
+      loadingTasks.push((async () => {
+        const {
+          loadAndAppendCustomThemeCss
+        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+        './custom-theme');
+        loadAndAppendCustomThemeCss({
+          colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+          // only load the missing custom theme styles
+          attrOfMissingCustomStyles[0],
+          UNSAFE_themeOptions
+        });
+      })());
     }
-  })()]);
-  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();
   }
-  const themeAttributes = getThemeHtmlAttrs({
-    colorMode,
-    dark,
-    light,
-    shape,
-    spacing,
-    typography,
-    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
-  });
-  Object.entries(themeAttributes).forEach(([key, value]) => {
-    document.documentElement.setAttribute(key, value);
-  });
-  return unbindThemeChangeListener;
+  await Promise.all(loadingTasks);
+  const autoUnbind = configurePage(themeState);
+  return autoUnbind;
 };
 export default setGlobalTheme;

package/dist/es2019/theme-config.js

@@ -178,4 +178,10 @@ export const 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)
+ */
+
 export default themeConfig;

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

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
+import { COLOR_MODE_ATTRIBUTE } from '../constants';
+import { darkModeMediaQuery } from './theme-loading';
+const 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) {
+  const element = document.documentElement;
+  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+}
+const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
+class ColorModeObserver {
+  constructor() {
+    _defineProperty(this, "unbindThemeChangeListener", null);
+  }
+  getColorMode() {
+    if (!darkModeMql) {
+      return 'light';
+    }
+    return darkModeMql !== null && darkModeMql !== void 0 && darkModeMql.matches ? 'dark' : 'light';
+  }
+  bind() {
+    if (darkModeMql && this.unbindThemeChangeListener === null) {
+      this.unbindThemeChangeListener = bind(darkModeMql, {
+        type: 'change',
+        listener: checkNativeListener
+      });
+    }
+  }
+  unbind() {
+    if (this.unbindThemeChangeListener) {
+      this.unbindThemeChangeListener();
+      this.unbindThemeChangeListener = null;
+    }
+  }
+}
+
+/**
+ * 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.
+ */
+const SingletonColorModeObserver = new ColorModeObserver();
+export default SingletonColorModeObserver;

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

@@ -0,0 +1,22 @@
+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();
+  }
+  const themeAttributes = getThemeHtmlAttrs(themeState);
+  Object.entries(themeAttributes).forEach(([key, value]) => {
+    document.documentElement.setAttribute(key, value);
+  });
+  return () => ColorModeObserver.unbind;
+}

package/dist/esm/constants.js

@@ -1,6 +1,7 @@
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 export var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
+export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds';
 export var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];
 export var TOKEN_NOT_FOUND_CSS_VAR = "--".concat(CSS_PREFIX, "-token-not-found");

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-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.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/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.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/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';