@atlaskit/tokens 1.13.1 → 1.13.2

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

@@ -0,0 +1,126 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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.
+ */
+var getThemeStyles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(preferences) {
+    var themePreferences, results;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          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']
+            });
+          }
+          _context3.next = 3;
+          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
+            var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
+              var css;
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return loadThemeCss(themeId);
+                  case 3:
+                    css = _context.sent;
+                    return _context.abrupt("return", {
+                      id: themeId,
+                      attrs: {
+                        'data-theme': themeId
+                      },
+                      css: css
+                    });
+                  case 7:
+                    _context.prev = 7;
+                    _context.t0 = _context["catch"](0);
+                    return _context.abrupt("return", undefined);
+                  case 10:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 7]]);
+            }));
+            return function (_x2) {
+              return _ref2.apply(this, arguments);
+            };
+          }())), [
+          // Add custom themes if they're present
+          _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+            var _preferences$UNSAFE_t;
+            var _yield$import, getCustomThemeStyles, customThemeStyles;
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  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))) {
+                    _context2.next = 15;
+                    break;
+                  }
+                  _context2.prev = 1;
+                  _context2.next = 4;
+                  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                  './custom-theme');
+                case 4:
+                  _yield$import = _context2.sent;
+                  getCustomThemeStyles = _yield$import.getCustomThemeStyles;
+                  _context2.next = 8;
+                  return getCustomThemeStyles({
+                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+                  });
+                case 8:
+                  customThemeStyles = _context2.sent;
+                  return _context2.abrupt("return", customThemeStyles);
+                case 12:
+                  _context2.prev = 12;
+                  _context2.t0 = _context2["catch"](1);
+                  return _context2.abrupt("return", undefined);
+                case 15:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2, null, [[1, 12]]);
+          }))()]));
+        case 3:
+          results = _context3.sent;
+          return _context3.abrupt("return", results.flat().filter(function (theme) {
+            return theme !== undefined;
+          }));
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function getThemeStyles(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export default getThemeStyles;

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.13.1";
+var version = "1.13.2";
 /**
  * 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.13.1";
+var version = "1.13.2";
 /**
  * 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

@@ -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/esm/set-global-theme.js

@@ -1,35 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
-import { 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)
 
-var defaultColorMode = 'light';
 var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
-var darkModeMediaQuery = '(prefers-color-scheme: dark)';
 var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
 var unbindThemeChangeListener = noop;
-export var themeStateDefaults = {
-  colorMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: undefined,
-  spacing: undefined,
-  typography: undefined,
-  UNSAFE_themeOptions: undefined
-};
 
 /**
  * Updates the current theme when the system theme changes. Should be bound
@@ -40,31 +27,6 @@ var checkNativeListener = function checkNativeListener(e) {
   var element = document.documentElement;
   element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
 };
-var getThemePreferences = function getThemePreferences(themeState) {
-  var colorMode = themeState.colorMode,
-    dark = themeState.dark,
-    light = themeState.light,
-    shape = themeState.shape,
-    spacing = themeState.spacing,
-    typography = themeState.typography;
-  var themePreferences = colorMode === 'auto' ? [light, dark] : [themeState[colorMode]];
-  [shape, spacing, typography].forEach(function (themeId) {
-    if (themeId) {
-      themePreferences.push(themeId);
-    }
-  });
-  if (getBooleanFF('platform.design-system-team.border-checkbox_nyoiu')) {
-    themePreferences.push("".concat(themePreferences.includes('dark') ? 'dark' : 'light', "-new-input-border"));
-  }
-
-  // Load shape and spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    if (!themePreferences.includes('spacing')) {
-      themePreferences.push('spacing');
-    }
-  }
-  return _toConsumableArray(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.
@@ -215,193 +177,4 @@ var setGlobalTheme = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-/**
- * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
- * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.shape The shape theme to be applied.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export var getThemeStyles = /*#__PURE__*/function () {
-  var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(preferences) {
-    var themePreferences, results;
-    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          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']
-            });
-          }
-          _context6.next = 3;
-          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
-            var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(themeId) {
-              var css;
-              return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-                while (1) switch (_context4.prev = _context4.next) {
-                  case 0:
-                    _context4.prev = 0;
-                    _context4.next = 3;
-                    return loadThemeCss(themeId);
-                  case 3:
-                    css = _context4.sent;
-                    return _context4.abrupt("return", {
-                      id: themeId,
-                      attrs: {
-                        'data-theme': themeId
-                      },
-                      css: css
-                    });
-                  case 7:
-                    _context4.prev = 7;
-                    _context4.t0 = _context4["catch"](0);
-                    return _context4.abrupt("return", undefined);
-                  case 10:
-                  case "end":
-                    return _context4.stop();
-                }
-              }, _callee4, null, [[0, 7]]);
-            }));
-            return function (_x3) {
-              return _ref8.apply(this, arguments);
-            };
-          }())), [
-          // Add custom themes if they're present
-          _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-            var _preferences$UNSAFE_t;
-            var _yield$import2, getCustomThemeStyles, customThemeStyles;
-            return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-              while (1) switch (_context5.prev = _context5.next) {
-                case 0:
-                  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))) {
-                    _context5.next = 15;
-                    break;
-                  }
-                  _context5.prev = 1;
-                  _context5.next = 4;
-                  return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
-                  './custom-theme');
-                case 4:
-                  _yield$import2 = _context5.sent;
-                  getCustomThemeStyles = _yield$import2.getCustomThemeStyles;
-                  _context5.next = 8;
-                  return getCustomThemeStyles({
-                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
-                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
-                  });
-                case 8:
-                  customThemeStyles = _context5.sent;
-                  return _context5.abrupt("return", customThemeStyles);
-                case 12:
-                  _context5.prev = 12;
-                  _context5.t0 = _context5["catch"](1);
-                  return _context5.abrupt("return", undefined);
-                case 15:
-                case "end":
-                  return _context5.stop();
-              }
-            }, _callee5, null, [[1, 12]]);
-          }))()]));
-        case 3:
-          results = _context6.sent;
-          return _context6.abrupt("return", results.flat().filter(function (theme) {
-            return theme !== undefined;
-          }));
-        case 5:
-        case "end":
-          return _context6.stop();
-      }
-    }, _callee6);
-  }));
-  return function getThemeStyles(_x2) {
-    return _ref7.apply(this, arguments);
-  };
-}();
-
-/**
- * Server-side rendering utility. Generates the valid HTML attributes for a given theme.
- * Note: this utility does not handle automatic theme switching.
- *
- * @param {Object<string, string>} themeOptions - Theme options object
- * @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
- * @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
- * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
- * @param {string} themeState.spacing The spacing theme to be applied.
- * @param {string} themeState.typography The typography theme to be applied.
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns {Object} Object of HTML attributes to be applied to the document root
- */
-export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
-  var _result;
-  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref10$colorMode = _ref10.colorMode,
-    colorMode = _ref10$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref10$colorMode,
-    _ref10$dark = _ref10.dark,
-    dark = _ref10$dark === void 0 ? themeStateDefaults['dark'] : _ref10$dark,
-    _ref10$light = _ref10.light,
-    light = _ref10$light === void 0 ? themeStateDefaults['light'] : _ref10$light,
-    _ref10$shape = _ref10.shape,
-    shape = _ref10$shape === void 0 ? themeStateDefaults['shape'] : _ref10$shape,
-    _ref10$spacing = _ref10.spacing,
-    spacing = _ref10$spacing === void 0 ? themeStateDefaults['spacing'] : _ref10$spacing,
-    _ref10$typography = _ref10.typography,
-    typography = _ref10$typography === void 0 ? themeStateDefaults['typography'] : _ref10$typography,
-    _ref10$UNSAFE_themeOp = _ref10.UNSAFE_themeOptions,
-    UNSAFE_themeOptions = _ref10$UNSAFE_themeOp === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref10$UNSAFE_themeOp;
-  var themePreferences = {
-    dark: dark,
-    light: light,
-    shape: shape,
-    spacing: spacing,
-    typography: typography
-  };
-
-  // Load spacing by default, currently behind a feature flag
-  if (getBooleanFF('platform.design-system-team.space-and-shape-tokens_q5me6')) {
-    themePreferences = {
-      dark: dark,
-      light: light,
-      shape: shape,
-      spacing: 'spacing',
-      typography: typography
-    };
-  }
-  var themeAttribute = themeObjectToString(themePreferences);
-  var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
-  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
-    var optionString = JSON.stringify(UNSAFE_themeOptions);
-    var 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 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 setGlobalTheme;

package/dist/esm/theme-config.js

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

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

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 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.
  *
@@ -16,7 +16,7 @@ import { getGlobalTheme } from './get-global-theme';
  * observer.observe();
  * ```
  */
-export var ThemeMutationObserver = /*#__PURE__*/function () {
+var ThemeMutationObserver = /*#__PURE__*/function () {
   function ThemeMutationObserver(callback) {
     _classCallCheck(this, ThemeMutationObserver);
     _defineProperty(this, "observer", null);
@@ -43,4 +43,5 @@ export var ThemeMutationObserver = /*#__PURE__*/function () {
     }
   }]);
   return ThemeMutationObserver;
-}();
+}();
+export { ThemeMutationObserver as default };

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

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { themeIds } from '../theme-config';
+import { themeIds } from './theme-config';
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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>`.
@@ -16,7 +16,7 @@ import { ThemeMutationObserver } from './theme-mutation-observer';
  * }, [theme.colorMode]);
  * ```
  */
-export var useThemeObserver = function useThemeObserver() {
+var useThemeObserver = function useThemeObserver() {
   var _useState = useState(getGlobalTheme()),
     _useState2 = _slicedToArray(_useState, 2),
     theme = _useState2[0],
@@ -31,4 +31,5 @@ export var useThemeObserver = function useThemeObserver() {
     };
   }, []);
   return theme;
-};
+};
+export default useThemeObserver;

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

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

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

@@ -53,4 +53,5 @@ export var loadThemeCss = /*#__PURE__*/function () {
   return function loadThemeCss(_x2) {
     return _ref2.apply(this, arguments);
   };
-}();
+}();
+export var darkModeMediaQuery = '(prefers-color-scheme: dark)';

package/dist/esm/version.json

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

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

@@ -1,10 +1,6 @@
-import { ThemeState, ThemeStyles } from './set-global-theme';
+import { ThemeStyles } from './get-theme-styles';
+import { ThemeOptionsSchema, ThemeState } from './theme-config';
 export declare const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-type HEX = `#${string}`;
-export type CSSColor = HEX;
-export interface CustomBrandSchema {
-    brandColor: CSSColor;
-}
 /**
  *
  * @param themeSchema The schema of available themes
@@ -22,9 +18,8 @@ export interface CustomBrandSchema {
  * If an error is encountered while loading themes, the themes array will be empty.
  */
 export declare function getCustomThemeStyles(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<ThemeStyles[]>;
 export declare function loadAndAppendCustomThemeCss(themeState: Partial<ThemeState> & {
-    UNSAFE_themeOptions: CustomBrandSchema;
+    UNSAFE_themeOptions: ThemeOptionsSchema;
 }): Promise<void>;
-export {};

package/dist/types/get-global-theme.d.ts

@@ -1,2 +1,3 @@
 import { ActiveThemeState } from './set-global-theme';
-export declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+declare const getGlobalTheme: () => Partial<ActiveThemeState>;
+export default getGlobalTheme;

package/dist/types/get-ssr-auto-script.d.ts

@@ -0,0 +1,11 @@
+import { ThemeState } from './theme-config';
+/**
+ * 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
+ */
+declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
+export default getSSRAutoScript;

package/dist/types/get-theme-html-attrs.d.ts

@@ -0,0 +1,17 @@
+import { ThemeState } from './theme-config';
+/**
+ * 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
+ */
+declare const getThemeHtmlAttrs: ({ colorMode, dark, light, shape, spacing, typography, UNSAFE_themeOptions, }?: Partial<ThemeState>) => Record<string, string>;
+export default getThemeHtmlAttrs;

package/dist/types/get-theme-styles.d.ts

@@ -0,0 +1,24 @@
+import { ThemeIdsWithOverrides, ThemeState } from './theme-config';
+export interface ThemeStyles {
+    id: ThemeIdsWithOverrides;
+    attrs: Record<string, string>;
+    css: string;
+}
+/**
+ * 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.
+ */
+declare const getThemeStyles: (preferences?: Partial<ThemeState> | 'all') => Promise<ThemeStyles[]>;
+export default getThemeStyles;