@atlaskit/tokens 0.13.5 → 1.0.0

package/dist/esm/babel-plugin/plugin.js

@@ -11,49 +11,44 @@ export default function plugin() {
               function CallExpression(_x) {
                 return _CallExpression.apply(this, arguments);
               }
-
               CallExpression.toString = function () {
                 return _CallExpression.toString();
               };
-
               return CallExpression;
             }(function (path) {
               var tokenImportScope = getTokenImportScope(path);
-
               if (!tokenImportScope) {
                 return;
-              } // Check arguments have correct format
-
+              }
 
+              // Check arguments have correct format
               if (!path.node.arguments[0]) {
                 throw new Error("token() requires at least one argument");
               } else if (!t.isStringLiteral(path.node.arguments[0])) {
                 throw new Error("token() must have a string as the first argument");
               } else if (path.node.arguments.length > 2) {
                 throw new Error("token() does not accept ".concat(path.node.arguments.length, " arguments"));
-              } // Check the token exists
-
+              }
 
+              // Check the token exists
               var tokenName = path.node.arguments[0].value;
               var cssTokenValue = tokenNames[tokenName];
-
               if (!cssTokenValue) {
                 throw new Error("token '".concat(tokenName, "' does not exist"));
               }
+              var replacementNode;
 
-              var replacementNode; // if no fallback is set, optionally find one from the default theme
-
+              // if no fallback is set, optionally find one from the default theme
               if (path.node.arguments.length < 2) {
                 if (state.opts.shouldUseAutoFallback) {
                   replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ", ").concat(getDefaultFallback(tokenName), ")"));
                 } else {
                   replacementNode = t.stringLiteral("var(".concat(cssTokenValue, ")"));
                 }
-              } // Handle fallbacks
-
+              }
 
+              // Handle fallbacks
               var fallback = path.node.arguments[1];
-
               if (t.isStringLiteral(fallback)) {
                 // String literals can be concatenated into css variable call
                 // Empty string fallbacks are ignored. For now, as the user did specify a fallback, no default is inserted
@@ -68,11 +63,11 @@ export default function plugin() {
                   raw: ')',
                   cooked: ')'
                 }, true)], [fallback]);
-              } // Replace path and call scope.crawl() to refresh the scope bindings + references
-
-
-              replacementNode && path.replaceWith(replacementNode); // @ts-ignore crawl is a valid property
+              }
 
+              // Replace path and call scope.crawl() to refresh the scope bindings + references
+              replacementNode && path.replaceWith(replacementNode);
+              // @ts-ignore crawl is a valid property
               tokenImportScope.crawl();
             })
           });
@@ -84,23 +79,22 @@ export default function plugin() {
               if (path.node.source.value !== '@atlaskit/tokens') {
                 return;
               }
-
               path.get('specifiers').forEach(function (specifier) {
                 if (!specifier.isImportSpecifier()) {
                   return;
                 }
-
                 if (getNonAliasedImportName(specifier.node) !== 'token') {
                   return;
                 }
+                var binding = path.scope.bindings[getAliasedImportName(specifier.node)];
 
-                var binding = path.scope.bindings[getAliasedImportName(specifier.node)]; // if no longer used, remove
-
+                // if no longer used, remove
                 if (!binding.referenced) {
                   specifier.remove();
                 }
-              }); // remove '@atlaskit/tokens' import if it is no longer needed
+              });
 
+              // remove '@atlaskit/tokens' import if it is no longer needed
               if (path.get('specifiers').length === 0) {
                 path.remove();
               }
@@ -111,55 +105,43 @@ export default function plugin() {
     }
   };
 }
-
 function getDefaultFallback(tokenName) {
   return tokenDefaultValues[tokenName];
 }
-
 function getNonAliasedImportName(node) {
   if (t.isIdentifier(node.imported)) {
     return node.imported.name;
   }
-
   return node.imported.value;
 }
-
 function getAliasedImportName(node) {
   return node.local.name;
 }
+
 /**
  * Determine if the current call is to a token function, and
  * return the relevant scope
  */
-
-
 function getTokenImportScope(path) {
   var callee = path.node.callee;
-
   if (!t.isIdentifier(callee)) {
     return undefined;
   }
-
   var binding = getTokenBinding(path.scope, callee.name);
-
   if (!binding || !t.isImportSpecifier(binding.path.node)) {
     return undefined;
   }
-
   if (binding.path.parent && t.isImportDeclaration(binding.path.parent)) {
     if (binding.path.parent.source.value !== '@atlaskit/tokens') {
       return undefined;
     }
   }
-
   return getNonAliasedImportName(binding.path.node) === 'token' ? binding.scope : undefined;
 }
-
 function getTokenBinding(scope, name) {
   if (!scope) {
     return undefined;
   }
-
   if (scope.bindings[name]) {
     return scope.bindings[name];
   } else {

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

@@ -0,0 +1,22 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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';
+var isThemeColorMode = function isThemeColorMode(colorMode) {
+  return themeColorModes.find(function (mode) {
+    return mode === colorMode;
+  }) !== undefined;
+};
+export var getGlobalTheme = function getGlobalTheme() {
+  if (typeof document === 'undefined') {
+    return {};
+  }
+  var element = document.documentElement;
+  var colorMode = element.getAttribute(COLOR_MODE_ATTRIBUTE) || '';
+  var theme = element.getAttribute(THEME_DATA_ATTRIBUTE) || '';
+  return _objectSpread(_objectSpread({}, themeStringToObject(theme)), isThemeColorMode(colorMode) && {
+    colorMode: colorMode
+  });
+};

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

@@ -1,8 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.13.5";
-
+var version = "1.0.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.
@@ -28,18 +27,14 @@ function getTokenValue(tokenId) {
   var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var token = tokens[tokenId];
   var tokenValue = fallback;
-
   if (process.env.NODE_ENV !== 'production' && !token) {
     warnOnce("Unknown token id at path: ".concat(tokenId, " for ").concat(name, "@").concat(version));
   }
-
   if (typeof window === 'undefined') {
     return tokenValue;
   }
-
   tokenValue = window.getComputedStyle(document.documentElement).getPropertyValue(token);
   tokenValue = tokenValue || fallback;
   return tokenValue;
 }
-
 export default getTokenValue;

package/dist/esm/get-token.js

@@ -2,8 +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 = "0.13.5";
-
+var version = "1.0.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.
@@ -28,19 +27,15 @@ var version = "0.13.5";
  */
 function token(path, fallback) {
   var token = tokens[path];
-
   if (process.env.NODE_ENV !== 'production' && !token) {
-    token = tokens['utility.UNSAFE_util.MISSING_TOKEN'];
     warnOnce("Unknown token id at path: ".concat(path, " for ").concat(name, "@").concat(version));
-  } // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
-
+  }
 
+  // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css
   if (!token) {
     token = TOKEN_NOT_FOUND_CSS_VAR;
   }
-
   var tokenCall = fallback ? "var(".concat(token, ", ").concat(fallback, ")") : "var(".concat(token, ")");
   return tokenCall;
 }
-
 export default token;

package/dist/esm/index.js

@@ -1,5 +1,8 @@
 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 setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript } from './set-global-theme';
 export { default as themeConfig } from './theme-config';
-export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';
+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';

package/dist/esm/palettes/legacy-palette.js

@@ -3,6 +3,7 @@
  *
  * This palette should be exclusively used for backwards compatible themes
  */
+
 var palette = {
   value: {
     opacity: {

package/dist/esm/palettes/spacing-scale.js

@@ -1,6 +1,7 @@
 /**
  * Types are inferred from the base tokens below
  */
+
 var baseSpacingTokens = {
   Space0: {
     value: '0',

package/dist/esm/palettes/typography-palette.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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; }
-
 var lineHeightScale = {
   lineHeight: {
     LineHeight100: {

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

@@ -1,49 +1,275 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { bind } from 'bind-event-listener';
+import noop from '@atlaskit/ds-lib/noop';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import themeConfig from './theme-config';
+import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
+import { themeObjectToString } from './utils/theme-state-transformer';
+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;
+var themeStateDefaults = {
+  colorMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  spacing: undefined,
+  typography: undefined
+};
+
+/**
+ * Updates the current theme when the system theme changes. Should be bound
+ * to an event listener listening on the '(prefers-color-scheme: dark)' query
+ * @param e The event representing a change in system theme.
+ */
+var checkNativeListener = function checkNativeListener(e) {
+  var element = document.documentElement;
+  element.setAttribute(COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
+};
+
 /**
- * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-scheme` attributes on your page's <html> tag.
+ * Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
  *
- * @param {string} themeId - Which theme should be used by default.
- * @param {string} [shouldMatchSystem=false] - Whether the theme should automatically switch between themes to match the system preference.
+ * @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.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ *
+ * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
  *
  * @example
  * ```
- * // Set light theme as the default theme, but switch to others based on the system color theme.
- * setGlobalTheme('light', true);
+ * setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
  * ```
  */
+var setGlobalTheme = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _ref2,
+      _ref2$colorMode,
+      colorMode,
+      _ref2$dark,
+      dark,
+      _ref2$light,
+      light,
+      _ref2$spacing,
+      spacing,
+      _ref2$typography,
+      typography,
+      themePreferences,
+      themeAttributes,
+      _args2 = arguments;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
+            // Dedupe list of themes to avoid race condition
+            themePreferences = new Set([dark, light, spacing, typography]);
+            _context2.next = 4;
+            return Promise.all(_toConsumableArray(themePreferences).filter(function (themeId) {
+              return themeId !== undefined;
+            }).map( /*#__PURE__*/function () {
+              var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return loadAndAppendThemeCss(themeId);
+                      case 2:
+                        return _context.abrupt("return", _context.sent);
+                      case 3:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+              return function (_x) {
+                return _ref3.apply(this, arguments);
+              };
+            }()));
+          case 4:
+            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();
+            }
+            themeAttributes = getThemeHtmlAttrs({
+              colorMode: colorMode,
+              dark: dark,
+              light: light,
+              spacing: spacing,
+              typography: typography
+            });
+            Object.entries(themeAttributes).forEach(function (_ref4) {
+              var _ref5 = _slicedToArray(_ref4, 2),
+                key = _ref5[0],
+                value = _ref5[1];
+              document.documentElement.setAttribute(key, value);
+            });
+            return _context2.abrupt("return", unbindThemeChangeListener);
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return function setGlobalTheme() {
+    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.spacing The spacing theme to be applied.
+ * @param {string} themeState.typography The typography theme to be applied.
+ *
+ * @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 arrav will be emptv.
+ */
+export var getThemeStyles = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _ref7,
+      _ref7$colorMode,
+      colorMode,
+      _ref7$dark,
+      dark,
+      _ref7$light,
+      light,
+      _ref7$spacing,
+      spacing,
+      _ref7$typography,
+      typography,
+      themePreferences,
+      results,
+      _args4 = arguments;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$colorMode = _ref7.colorMode, colorMode = _ref7$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref7$colorMode, _ref7$dark = _ref7.dark, dark = _ref7$dark === void 0 ? themeStateDefaults['dark'] : _ref7$dark, _ref7$light = _ref7.light, light = _ref7$light === void 0 ? themeStateDefaults['light'] : _ref7$light, _ref7$spacing = _ref7.spacing, spacing = _ref7$spacing === void 0 ? themeStateDefaults['spacing'] : _ref7$spacing, _ref7$typography = _ref7.typography, typography = _ref7$typography === void 0 ? themeStateDefaults['typography'] : _ref7$typography;
+            themePreferences = colorMode === 'auto' ? [light, dark] : [colorMode];
+            [spacing, typography].forEach(function (themeId) {
+              if (themeId) {
+                themePreferences.push(themeId);
+              }
+            });
+            _context4.next = 5;
+            return Promise.all(themePreferences.map( /*#__PURE__*/function () {
+              var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
+                var css;
+                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                  while (1) {
+                    switch (_context3.prev = _context3.next) {
+                      case 0:
+                        _context3.prev = 0;
+                        _context3.next = 3;
+                        return loadThemeCss(themeId);
+                      case 3:
+                        css = _context3.sent;
+                        return _context3.abrupt("return", {
+                          id: themeId,
+                          attrs: {
+                            'data-theme': themeId
+                          },
+                          css: css
+                        });
+                      case 7:
+                        _context3.prev = 7;
+                        _context3.t0 = _context3["catch"](0);
+                        return _context3.abrupt("return", undefined);
+                      case 10:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }
+                }, _callee3, null, [[0, 7]]);
+              }));
+              return function (_x2) {
+                return _ref8.apply(this, arguments);
+              };
+            }()));
+          case 5:
+            results = _context4.sent;
+            return _context4.abrupt("return", results.filter(function (theme) {
+              return theme !== undefined;
+            }));
+          case 7:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+  return function getThemeStyles() {
+    return _ref6.apply(this, arguments);
+  };
+}();
 
-var setGlobalTheme = function setGlobalTheme(themeId) {
-  var shouldMatchSystem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var theme = Object.values(themeConfig).find(function (_ref) {
-    var id = _ref.id;
-    return id === themeId;
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (!theme) {
-      var themeIds = Object.values(themeConfig).map(function (_ref2) {
-        var id = _ref2.id;
-        return id;
-      });
-      throw new Error("setGlobalTheme only accepts themes: ".concat(themeIds.join(', ')));
-    }
-  }
-
-  if (!theme) {
-    return;
-  }
-
-  var element = document.documentElement;
-  element.setAttribute(THEME_DATA_ATTRIBUTE, theme.id);
-
-  if (theme.attributes.type === 'color') {
-    element.setAttribute(COLOR_MODE_ATTRIBUTE, theme.attributes.mode);
-  }
-
-  if (shouldMatchSystem) {
-    element.setAttribute(COLOR_MODE_ATTRIBUTE, 'auto');
-  }
+/**
+ * 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.
+ *
+ * @returns {Object} Object of HTML attributes to be applied to the document root
+ */
+export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
+  var _ref10;
+  var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref9$colorMode = _ref9.colorMode,
+    colorMode = _ref9$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref9$colorMode,
+    _ref9$dark = _ref9.dark,
+    dark = _ref9$dark === void 0 ? themeStateDefaults['dark'] : _ref9$dark,
+    _ref9$light = _ref9.light,
+    light = _ref9$light === void 0 ? themeStateDefaults['light'] : _ref9$light,
+    _ref9$spacing = _ref9.spacing,
+    spacing = _ref9$spacing === void 0 ? themeStateDefaults['spacing'] : _ref9$spacing,
+    _ref9$typography = _ref9.typography,
+    typography = _ref9$typography === void 0 ? themeStateDefaults['typography'] : _ref9$typography;
+  var themePreferences = {
+    dark: dark,
+    light: light,
+    spacing: spacing,
+    typography: typography
+  };
+  var themeAttribute = themeObjectToString(themePreferences);
+  return _ref10 = {}, _defineProperty(_ref10, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_ref10, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref10;
 };
 
+/**
+ * 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

@@ -16,34 +16,18 @@
 
 /**
  * Theme modes: The general purpose of a theme.
- * This attr is used to apply the appropriate system-preference media selector
+ * This attr is used to apply the appropriate system-preference option
  * It may also be used as a selector for mode-specific overrides such as light/dark images.
  * The idea is there may exist many color themes, but every theme must either fit into light or dark.
  */
-
+export var themeColorModes = ['light', 'dark', 'auto'];
 /**
- * Theme ids: The value that will mounted to the DOM as a data attr
- * For example: `data-theme="light"
+ * Theme ids: The value that will be mounted to the DOM as a data attr
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
  *
  * These ids must be kebab case
  */
-
-/**
- * Theme to use a base. This will create the theme as
- * an extension with all token values marked as optional
- * to allow tokens to be overridden as required.
- */
-
-/**
- * Palettes: The set of base tokens a given theme may be populated with.
- * For example: legacy light & dark themes use the "legacyPalette" containing colors from our
- * previous color set.
- */
-
-/**
- * ThemeConfig: the source of truth for all theme meta-data.
- * This object should be used whenever interfacing with themes.
- */
+export var themeIds = ['light', 'dark', 'legacy-light', 'legacy-dark', 'spacing', 'typography'];
 var themeConfig = {
   'atlassian-light': {
     id: 'light',