@atlaskit/tokens 1.13.1 → 1.14.0

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

@@ -0,0 +1,62 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './theme-config';
+import { themeObjectToString } from './theme-state-transformer';
+import { isValidBrandHex } from './utils/color-utils';
+import { hash } from './utils/hash';
+const defaultColorMode = 'light';
+
+/**
+ * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
+ * Note: this utility does not handle automatic theme switching.
+ *
+ * @param {Object<string, string>} themeOptions - Theme options object
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+const getThemeHtmlAttrs = ({
+  colorMode = themeStateDefaults['colorMode'],
+  dark = themeStateDefaults['dark'],
+  light = themeStateDefaults['light'],
+  shape = themeStateDefaults['shape'],
+  spacing = themeStateDefaults['spacing'],
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
+} = {}) => {
+  let themePreferences = {
+    dark,
+    light,
+    shape,
+    spacing,
+    typography
+  };
+
+  // Load spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    themePreferences = {
+      dark,
+      light,
+      shape,
+      spacing: 'spacing',
+      typography
+    };
+  }
+  const themeAttribute = themeObjectToString(themePreferences);
+  const result = {
+    [THEME_DATA_ATTRIBUTE]: themeAttribute,
+    [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
+  };
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
+    const optionString = JSON.stringify(UNSAFE_themeOptions);
+    const uniqueId = hash(optionString);
+    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
+};
+export default getThemeHtmlAttrs;

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

@@ -0,0 +1,72 @@
+import { themeIdsWithOverrides, themeStateDefaults } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { loadThemeCss } from './utils/theme-loading';
+/**
+ * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
+ * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
+ *
+ * @param {Object<string, string>} themeState The themes and color mode that should be applied.
+ * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
+ * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
+ * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
+ * @param {string} themeState.shape The shape theme to be applied.
+ * @param {string} themeState.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+const getThemeStyles = async preferences => {
+  let themePreferences;
+  if (preferences === 'all') {
+    themePreferences = themeIdsWithOverrides;
+  } else {
+    themePreferences = getThemePreferences({
+      colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+      dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
+      light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
+      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
+      spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
+      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
+    });
+  }
+  const results = await Promise.all([...themePreferences.map(async themeId => {
+    try {
+      const css = await loadThemeCss(themeId);
+      return {
+        id: themeId,
+        attrs: {
+          'data-theme': themeId
+        },
+        css
+      };
+    } catch {
+      // Return undefined if there's an error loading it, will be filtered out later.
+      return undefined;
+    }
+  }),
+  // Add custom themes if they're present
+  (async () => {
+    var _preferences$UNSAFE_t;
+    if (preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor)) {
+      try {
+        const {
+          getCustomThemeStyles
+        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+        './custom-theme');
+        const customThemeStyles = await getCustomThemeStyles({
+          colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+          UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+        });
+        return customThemeStyles;
+      } catch {
+        // Return undefined if there's an error loading it, will be filtered out later.
+        return undefined;
+      }
+    }
+  })()]);
+  return results.flat().filter(theme => theme !== undefined);
+};
+export default getThemeStyles;

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.13.1";
+const version = "1.14.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.13.1";
+const version = "1.14.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

@@ -1,8 +1,11 @@
+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, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript } from './set-global-theme';
-export { default as themeConfig } from './theme-config';
-export { useThemeObserver } from './use-theme-observer';
-export { ThemeMutationObserver } from './theme-mutation-observer';
-export { getGlobalTheme } from './get-global-theme';
-export { themeStringToObject, themeObjectToString } from './utils/theme-state-transformer';
+export { default as setGlobalTheme } from './set-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';
+export { default as useThemeObserver } from './use-theme-observer';
+export { default as ThemeMutationObserver } from './theme-mutation-observer';
+export { default as getGlobalTheme } from './get-global-theme';
+export { themeStringToObject, themeObjectToString } from './theme-state-transformer';

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

@@ -1,30 +1,18 @@
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { themeIdsWithOverrides } from './theme-config';
+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 { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
-import { hash } from './utils/hash';
-import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
-import { themeObjectToString } from './utils/theme-state-transformer';
+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 defaultColorMode = 'light';
 const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-const darkModeMediaQuery = '(prefers-color-scheme: dark)';
 const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
 let unbindThemeChangeListener = noop;
-export const themeStateDefaults = {
-  colorMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: undefined,
-  spacing: undefined,
-  typography: undefined,
-  UNSAFE_themeOptions: undefined
-};
 
 /**
  * Updates the current theme when the system theme changes. Should be bound
@@ -35,33 +23,6 @@ const checkNativeListener = function (e) {
   const element = document.documentElement;
   element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
 };
-const getThemePreferences = themeState => {
-  const {
-    colorMode,
-    dark,
-    light,
-    shape,
-    spacing,
-    typography
-  } = themeState;
-  const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [shape, spacing, typography].forEach(themeId => {
-    if (themeId) {
-      themePreferences.push(themeId);
-    }
-  });
-  if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
-    themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
-  }
-
-  // Load shape and spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('spacing')) {
-      themePreferences.push('spacing');
-    }
-  }
-  return [...new Set(themePreferences)];
-};
 
 /**
  * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
@@ -145,145 +106,4 @@ const setGlobalTheme = async ({
   });
   return unbindThemeChangeListener;
 };
-/**
- * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
- * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export const getThemeStyles = async preferences => {
-  let themePreferences;
-  if (preferences === 'all') {
-    themePreferences = themeIdsWithOverrides;
-  } else {
-    themePreferences = getThemePreferences({
-      colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-      dark: (preferences === null || preferences === void 0 ? void 0 : preferences.dark) || themeStateDefaults['dark'],
-      light: (preferences === null || preferences === void 0 ? void 0 : preferences.light) || themeStateDefaults['light'],
-      shape: (preferences === null || preferences === void 0 ? void 0 : preferences.shape) || themeStateDefaults['shape'],
-      spacing: (preferences === null || preferences === void 0 ? void 0 : preferences.spacing) || themeStateDefaults['spacing'],
-      typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
-    });
-  }
-  const results = await Promise.all([...themePreferences.map(async themeId => {
-    try {
-      const css = await loadThemeCss(themeId);
-      return {
-        id: themeId,
-        attrs: {
-          'data-theme': themeId
-        },
-        css
-      };
-    } catch {
-      // Return undefined if there's an error loading it, will be filtered out later.
-      return undefined;
-    }
-  }),
-  // Add custom themes if they're present
-  (async () => {
-    var _preferences$UNSAFE_t;
-    if (preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor)) {
-      try {
-        const {
-          getCustomThemeStyles
-        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-        './custom-theme');
-        const customThemeStyles = await getCustomThemeStyles({
-          colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-          UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
-        });
-        return customThemeStyles;
-      } catch {
-        // Return undefined if there's an error loading it, will be filtered out later.
-        return undefined;
-      }
-    }
-  })()]);
-  return results.flat().filter(theme => theme !== undefined);
-};
-
-/**
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
- * Note: this utility does not handle automatic theme switching.
- *
- * @param {Object<string, string>} themeOptions - Theme options object
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns {Object} Object of HTML attributes to be applied to the document root
- */
-export const getThemeHtmlAttrs = ({
-  colorMode = themeStateDefaults['colorMode'],
-  dark = themeStateDefaults['dark'],
-  light = themeStateDefaults['light'],
-  shape = themeStateDefaults['shape'],
-  spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography'],
-  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
-} = {}) => {
-  let themePreferences = {
-    dark,
-    light,
-    shape,
-    spacing,
-    typography
-  };
-
-  // Load spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    themePreferences = {
-      dark,
-      light,
-      shape,
-      spacing: 'spacing',
-      typography
-    };
-  }
-  const themeAttribute = themeObjectToString(themePreferences);
-  const result = {
-    [THEME_DATA_ATTRIBUTE]: themeAttribute,
-    [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
-  };
-  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
-    const optionString = JSON.stringify(UNSAFE_themeOptions);
-    const uniqueId = hash(optionString);
-    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
-  }
-  return result;
-};
-
-/**
- * Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
- * to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
- *
- * @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- *
- * @returns {string} A string to be added to the innerHTML of a script tag in the document head
- */
-export const getSSRAutoScript = colorMode => {
-  return colorMode === 'auto' ? `(
-  () => {
-    try {
-      const mql = window.matchMedia('${darkModeMediaQuery}');
-      const colorMode = mql.matches ? 'dark' : 'light';
-      document.documentElement.setAttribute('${COLOR_MODE_ATTRIBUTE}', colorMode);
-    } catch (e) {}
-  }
-)()` : undefined;
-};
 export default setGlobalTheme;

package/dist/es2019/theme-config.js

@@ -141,4 +141,25 @@ const themeConfig = {
     }
   }
 };
+
+/**
+ * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
+ */
+
+/**
+ * ThemeState: the standard representation of an app's current theme and preferences
+ */
+
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+export const themeStateDefaults = {
+  colorMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  shape: undefined,
+  spacing: undefined,
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
+};
 export default themeConfig;

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { getGlobalTheme } from './get-global-theme';
+import getGlobalTheme from './get-global-theme';
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -14,7 +14,7 @@ import { getGlobalTheme } from './get-global-theme';
  * observer.observe();
  * ```
  */
-export class ThemeMutationObserver {
+export default class ThemeMutationObserver {
   constructor(callback) {
     _defineProperty(this, "observer", null);
     _defineProperty(this, "mediaObserver", null);

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

@@ -1,5 +1,6 @@
-import { themeIds } from '../theme-config';
+import { themeIds } from './theme-config';
 const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+const customThemeOptions = 'UNSAFE_themeOptions';
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;
 };
@@ -22,7 +23,7 @@ const isColorMode = modeId => {
  * ```
  */
 export const themeStringToObject = themeState => {
-  return themeState.split(' ').map(theme => theme.split(':')).reduce((themeObject, [kind, id]) => {
+  return themeState.split(' ').map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
     if (kind === 'colorMode' && isColorMode(id)) {
       themeObject[kind] = id;
     }
@@ -30,6 +31,13 @@ export const themeStringToObject = themeState => {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -45,6 +53,15 @@ export const themeStringToObject = themeState => {
  * // returns 'dark:dark light:legacy-light spacing:spacing'
  * ```
  */
-export const themeObjectToString = themeState => {
-  return Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');
-};
+export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => {
+  if (
+  // colorMode theme state
+  kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+  // custom theme state
+  kind === customThemeOptions && typeof id === 'object' ||
+  // other theme states
+  isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+    return themeString + `${themeString ? ' ' : ''}` + `${kind}:${typeof id === 'object' ? JSON.stringify(id) : id}`;
+  }
+  return themeString;
+}, '');

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { getGlobalTheme } from './get-global-theme';
-import { ThemeMutationObserver } from './theme-mutation-observer';
+import getGlobalTheme from './get-global-theme';
+import ThemeMutationObserver from './theme-mutation-observer';
 
 /**
  * A React hook which returns the current themes and color-mode set on `<html>`.
@@ -15,7 +15,7 @@ import { ThemeMutationObserver } from './theme-mutation-observer';
  * }, [theme.colorMode]);
  * ```
  */
-export const useThemeObserver = () => {
+const useThemeObserver = () => {
   const [theme, setTheme] = useState(getGlobalTheme());
   useEffect(() => {
     const observer = new ThemeMutationObserver(theme => setTheme(theme));
@@ -23,4 +23,5 @@ export const useThemeObserver = () => {
     return () => observer.disconnect();
   }, []);
   return theme;
-};
+};
+export default useThemeObserver;

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

@@ -0,0 +1,28 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export const getThemePreferences = themeState => {
+  const {
+    colorMode,
+    dark,
+    light,
+    shape,
+    spacing,
+    typography
+  } = themeState;
+  const themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
+  [shape, spacing, typography].forEach(themeId => {
+    if (themeId) {
+      themePreferences.push(themeId);
+    }
+  });
+  if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
+    themePreferences.push(`${themePreferences.includes('dark') ? 'dark' : 'light'}-new-input-border`);
+  }
+
+  // Load shape and spacing by default, currently behind a feature flag
+  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
+    if (!themePreferences.includes('spacing')) {
+      themePreferences.push('spacing');
+    }
+  }
+  return [...new Set(themePreferences)];
+};

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

@@ -15,4 +15,5 @@ export const loadThemeCss = async themeId => {
     default: themeCss
   } = await themeImportMap[themeId]();
   return themeCss;
-};
+};
+export const darkModeMediaQuery = '(prefers-color-scheme: dark)';

package/dist/es2019/version.json

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

package/dist/esm/custom-theme.js

@@ -1,11 +1,12 @@
 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 './set-global-theme';
+import { themeStateDefaults } from './theme-config';
 import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
 import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
 import { hash } from './utils/hash';
 export var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
+
 /**
  *
  * @param themeSchema The schema of available themes
@@ -75,20 +76,23 @@ export function loadAndAppendCustomThemeCss(_x2) {
 }
 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:
-          getCustomThemeStyles(themeState).then(function (themes) {
-            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;
-            });
+          _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 1:
+        case 5:
         case "end":
           return _context2.stop();
       }

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

@@ -3,13 +3,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeColorModes } from './theme-config';
-import { themeStringToObject } from './utils/theme-state-transformer';
+import { themeStringToObject } from './theme-state-transformer';
 var isThemeColorMode = function isThemeColorMode(colorMode) {
   return themeColorModes.find(function (mode) {
     return mode === colorMode;
   }) !== undefined;
 };
-export var getGlobalTheme = function getGlobalTheme() {
+var getGlobalTheme = function getGlobalTheme() {
   if (typeof document === 'undefined') {
     return {};
   }
@@ -19,4 +19,5 @@ export var getGlobalTheme = function getGlobalTheme() {
   return _objectSpread(_objectSpread({}, themeStringToObject(theme)), isThemeColorMode(colorMode) && {
     colorMode: colorMode
   });
-};
+};
+export default getGlobalTheme;

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

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