@atlaskit/tokens 13.0.3 → 13.1.0

package/dist/esm/custom-theme.js

@@ -1,61 +1,6 @@
-import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
-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';
+import { getCustomThemeStyles } from './get-custom-theme-styles';
+import { limitSizeOfCustomStyleElements } from './utils/limit-size-of-custom-style-elements';
 export var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-
-/**
- *
- * @param themeSchema The schema of available themes
- * @returns a string with the CSS for the custom theme
- */
-/**
- * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom 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
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export function getCustomThemeStyles(themeState) {
-  var _themeState$UNSAFE_th;
-  var brandColor = themeState === null || themeState === void 0 || (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
-  var mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
-  var optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
-  var uniqueId = hash(optionString);
-  var themeRamp = generateColors(brandColor).ramp;
-
-  // outputs object to generate to CSS from
-  var themes = [];
-  var tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
-  if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
-    // Light mode theming
-    themes.push({
-      id: 'light',
-      attrs: {
-        'data-theme': 'light',
-        'data-custom-theme': uniqueId
-      },
-      css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.light, themeRamp), "\n}")
-    });
-  }
-  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
-    // Dark mode theming
-    themes.push({
-      id: 'dark',
-      attrs: {
-        'data-theme': 'dark',
-        'data-custom-theme': uniqueId
-      },
-      css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.dark, themeRamp), "\n}")
-    });
-  }
-  return themes;
-}
 export function loadAndAppendCustomThemeCss(themeState) {
   var themes = getCustomThemeStyles(themeState);
   limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
@@ -66,4 +11,5 @@ export function loadAndAppendCustomThemeCss(themeState) {
     styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
     styleTag.textContent = theme.css;
   });
-}
+}
+export { getCustomThemeStyles } from './get-custom-theme-styles';

package/dist/esm/entry-points/token-metadata.codegen.js

@@ -3,7 +3,7 @@
  *
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::84f21045f3136acc13a56a289840c82a>>
+ * @codegen <<SignedSource::ecdf4f84ae7b36849943b200af52ee54>>
  * @codegenCommand yarn build tokens
  */
 
@@ -160,15 +160,6 @@ export var tokens = [{
     usage: '',
     cssProperties: []
   }
-}, {
-  name: 'motion.easing.spring',
-  path: ['motion', 'easing', 'spring'],
-  description: 'A spring curve that overshoots slightly before settling. Use for playful, tactile feedback on small branded elements such as avatar hover, where the slight overshoot reinforces a sense of life.',
-  exampleValue: 'linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)',
-  usageGuidelines: {
-    usage: '',
-    cssProperties: []
-  }
 }, {
   name: 'motion.flag.enter',
   path: ['motion', 'flag', 'enter'],
@@ -2324,7 +2315,7 @@ export var tokens = [{
   name: 'color.background.disabled',
   path: ['color', 'background', 'disabled'],
   description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#17171708',
+  exampleValue: '#0515240F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']

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

@@ -0,0 +1,52 @@
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './theme-config';
+import { reduceTokenMap } from './utils/custom-theme-loading-utils';
+import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
+import { hash } from './utils/hash';
+
+/**
+ * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom 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
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
+ *
+ * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+export function getCustomThemeStyles(themeState) {
+  var _themeState$UNSAFE_th;
+  var brandColor = themeState === null || themeState === void 0 || (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
+  var mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
+  var optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+  var uniqueId = hash(optionString);
+  var themeRamp = generateColors(brandColor).ramp;
+
+  // outputs object to generate to CSS from
+  var themes = [];
+  var tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
+  if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
+    // Light mode theming
+    themes.push({
+      id: 'light',
+      attrs: {
+        'data-theme': 'light',
+        'data-custom-theme': uniqueId
+      },
+      css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.light, themeRamp), "\n}")
+    });
+  }
+  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
+    // Dark mode theming
+    themes.push({
+      id: 'dark',
+      attrs: {
+        'data-theme': 'dark',
+        'data-custom-theme': uniqueId
+      },
+      css: "\nhtml[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat(reduceTokenMap(tokenMaps.dark, themeRamp), "\n}")
+    });
+  }
+  return themes;
+}

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { themeColorModes } from './theme-config';
+import { themeColorModes } from './theme-color-modes';
 import { themeStringToObject } from './theme-state-transformer';
 var isThemeColorMode = function isThemeColorMode(colorMode) {
   return themeColorModes.find(function (mode) {

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

@@ -5,8 +5,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, CONTRAST_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';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 var defaultColorMode = 'light';
 var defaultContrastMode = 'no-preference';
 

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

@@ -3,9 +3,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { themeIdsWithOverrides, themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
-import { getThemeOverridePreferences, getThemePreferences } from './utils/get-theme-preferences';
-import { loadThemeCss } from './utils/theme-loading';
+import { getThemeOverridePreferences } from './utils/get-theme-override-preferences';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
+import { loadThemeCss } from './utils/load-theme-css';
 /**
  * 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.
@@ -26,7 +27,7 @@ import { loadThemeCss } from './utils/theme-loading';
 var getThemeStyles = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(preferences) {
     var themePreferences, themeOverridePreferences, themeState, results;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    return _regeneratorRuntime.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           themeOverridePreferences = [];
@@ -53,17 +54,17 @@ var getThemeStyles = /*#__PURE__*/function () {
             themePreferences = getThemePreferences(themeState);
             themeOverridePreferences = getThemeOverridePreferences(themeState);
           }
-          _context3.next = 4;
+          _context3.next = 1;
           return Promise.all([].concat(_toConsumableArray([].concat(_toConsumableArray(themePreferences), _toConsumableArray(themeOverridePreferences)).map( /*#__PURE__*/function () {
             var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
-              var css;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
+              var css, _t;
+              return _regeneratorRuntime.wrap(function (_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
                     _context.prev = 0;
-                    _context.next = 3;
+                    _context.next = 1;
                     return loadThemeCss(themeId);
-                  case 3:
+                  case 1:
                     css = _context.sent;
                     return _context.abrupt("return", {
                       id: themeId,
@@ -72,15 +73,15 @@ var getThemeStyles = /*#__PURE__*/function () {
                       },
                       css: css
                     });
-                  case 7:
-                    _context.prev = 7;
-                    _context.t0 = _context["catch"](0);
+                  case 2:
+                    _context.prev = 2;
+                    _t = _context["catch"](0);
                     return _context.abrupt("return", undefined);
-                  case 10:
+                  case 3:
                   case "end":
                     return _context.stop();
                 }
-              }, _callee, null, [[0, 7]]);
+              }, _callee, null, [[0, 2]]);
             }));
             return function (_x2) {
               return _ref2.apply(this, arguments);
@@ -89,47 +90,47 @@ var getThemeStyles = /*#__PURE__*/function () {
           // 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) {
+            var _yield$import, getCustomThemeStyles, customThemeStyles, _t2;
+            return _regeneratorRuntime.wrap(function (_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 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
-                    _context2.next = 15;
+                    _context2.next = 5;
                     break;
                   }
                   _context2.prev = 1;
-                  _context2.next = 4;
+                  _context2.next = 2;
                   return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
                   './custom-theme');
-                case 4:
+                case 2:
                   _yield$import = _context2.sent;
                   getCustomThemeStyles = _yield$import.getCustomThemeStyles;
-                  _context2.next = 8;
+                  _context2.next = 3;
                   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:
+                case 3:
                   customThemeStyles = _context2.sent;
                   return _context2.abrupt("return", customThemeStyles);
-                case 12:
-                  _context2.prev = 12;
-                  _context2.t0 = _context2["catch"](1);
+                case 4:
+                  _context2.prev = 4;
+                  _t2 = _context2["catch"](1);
                   return _context2.abrupt("return", undefined);
-                case 15:
+                case 5:
                   return _context2.abrupt("return", undefined);
-                case 16:
+                case 6:
                 case "end":
                   return _context2.stop();
               }
-            }, _callee2, null, [[1, 12]]);
+            }, _callee2, null, [[1, 4]]);
           }))()]));
-        case 4:
+        case 1:
           results = _context3.sent;
           return _context3.abrupt("return", results.flat().filter(function (theme) {
             return theme !== undefined;
           }));
-        case 6:
+        case 2:
         case "end":
           return _context3.stop();
       }

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

@@ -1,7 +1,7 @@
 import { loadAndAppendCustomThemeCss } from './custom-theme';
 import { themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 
 /**
  * Synchronously generates and applies custom theme styles to the page.

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

@@ -9,10 +9,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { fg } from '@atlaskit/platform-feature-flags';
 import getGlobalTheme from './get-global-theme';
 import { themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
 import configurePage from './utils/configure-page';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
-import { getThemeOverridePreferences, getThemePreferences } from './utils/get-theme-preferences';
+import { getThemeOverridePreferences } from './utils/get-theme-override-preferences';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 import { loadAndAppendThemeCss } from './utils/theme-loading';
 
 /**
@@ -71,8 +72,9 @@ var setGlobalTheme = /*#__PURE__*/function () {
       _step,
       themeId,
       autoUnbind,
-      _args3 = arguments;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      _args3 = arguments,
+      _t;
+    return _regeneratorRuntime.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           nextThemeState = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {};
@@ -106,14 +108,14 @@ var setGlobalTheme = /*#__PURE__*/function () {
           loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss; // Load standard themes
           loadingTasks = themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
+              return _regeneratorRuntime.wrap(function (_context) {
                 while (1) switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    _context.next = 1;
                     return loadingStrategy(themeId);
-                  case 2:
+                  case 1:
                     return _context.abrupt("return", _context.sent);
-                  case 3:
+                  case 2:
                   case "end":
                     return _context.stop();
                 }
@@ -130,13 +132,13 @@ var setGlobalTheme = /*#__PURE__*/function () {
               // Load custom theme styles
               loadingTasks.push(_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
                 var _yield$import, loadAndAppendCustomThemeCss;
-                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                return _regeneratorRuntime.wrap(function (_context2) {
                   while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _context2.next = 2;
+                      _context2.next = 1;
                       return import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
                       './custom-theme');
-                    case 2:
+                    case 1:
                       _yield$import = _context2.sent;
                       loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
                       loadAndAppendCustomThemeCss({
@@ -145,7 +147,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
                         attrOfMissingCustomStyles[0],
                         UNSAFE_themeOptions: UNSAFE_themeOptions
                       });
-                    case 5:
+                    case 2:
                     case "end":
                       return _context2.stop();
                   }
@@ -153,44 +155,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
               }))());
             }
           }
-          _context3.next = 11;
+          _context3.next = 1;
           return Promise.all(loadingTasks);
-        case 11:
+        case 1:
           // Load override themes after standard themes
           themeOverridePreferences = getThemeOverridePreferences(themeState);
           _iterator = _createForOfIteratorHelper(themeOverridePreferences);
-          _context3.prev = 13;
+          _context3.prev = 2;
           _iterator.s();
-        case 15:
+        case 3:
           if ((_step = _iterator.n()).done) {
-            _context3.next = 21;
+            _context3.next = 5;
             break;
           }
           themeId = _step.value;
-          _context3.next = 19;
+          _context3.next = 4;
           return loadingStrategy(themeId);
-        case 19:
-          _context3.next = 15;
+        case 4:
+          _context3.next = 3;
           break;
-        case 21:
-          _context3.next = 26;
+        case 5:
+          _context3.next = 7;
           break;
-        case 23:
-          _context3.prev = 23;
-          _context3.t0 = _context3["catch"](13);
-          _iterator.e(_context3.t0);
-        case 26:
-          _context3.prev = 26;
+        case 6:
+          _context3.prev = 6;
+          _t = _context3["catch"](2);
+          _iterator.e(_t);
+        case 7:
+          _context3.prev = 7;
           _iterator.f();
-          return _context3.finish(26);
-        case 29:
+          return _context3.finish(7);
+        case 8:
           autoUnbind = configurePage(themeState);
           return _context3.abrupt("return", autoUnbind);
-        case 31:
+        case 9:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[13, 23, 26, 29]]);
+    }, _callee3, null, [[2, 6, 7, 8]]);
   }));
   return function setGlobalTheme() {
     return _ref.apply(this, arguments);

package/dist/esm/theme-color-modes.js

@@ -0,0 +1,7 @@
+/**
+ * Theme modes: The general purpose of a theme.
+ * 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'];

package/dist/esm/theme-config.js

@@ -1,5 +1,6 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { fg } from '@atlaskit/platform-feature-flags';
-
+import { themeIds } from './theme-ids';
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -23,30 +24,16 @@ import { fg } from '@atlaskit/platform-feature-flags';
  * In the future other types may be introduced such as typography.
  */
 
-/**
- * Theme modes: The general purpose of a theme.
- * 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'];
 /**
  * Contrast preferences: The system contrast preference
  */
 var themeContrastModes = ['more', 'no-preference', 'auto'];
-/**
- * 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
- */
-export var themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
  */
 var themeOverrideIds = [];
-export var themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
+export var themeIdsWithOverrides = [].concat(_toConsumableArray(themeIds), themeOverrideIds);
 
 /**
  * Theme to use a base. This will create the theme as
@@ -189,6 +176,7 @@ function getMotionDefault() {
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var themeStateDefaults = {
   colorMode: 'auto',
   contrastMode: 'auto',
@@ -206,4 +194,7 @@ export var themeStateDefaults = {
  * (the page doesn't have an "auto" color mode, it's either light or dark)
  */
 
-export default themeConfig;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export default themeConfig;
+export { themeColorModes } from './theme-color-modes';
+export { themeIds } from './theme-ids';

package/dist/esm/theme-ids.js

@@ -0,0 +1,7 @@
+/**
+ * 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
+ */
+export var themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];

package/dist/esm/theme-state-transformer.js

@@ -1,6 +1,6 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { themeIds } from './theme-config';
+import { themeIds } from './theme-ids';
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
@@ -66,6 +66,7 @@ export var themeStringToObject = function themeStringToObject(themeState) {
  * // returns 'dark:dark light:light spacing:spacing'
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export var themeObjectToString = function themeObjectToString(themeState) {
   return Object.entries(themeState).reduce(function (themeString, _ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),

package/dist/esm/utils/color-detection.js

@@ -1,13 +1,4 @@
-export var hexToRGBAValues = function hexToRGBAValues(hex) {
-  var hexColor = hex.replace('#', '');
-  return {
-    r: parseInt(hexColor.slice(0, 2), 16),
-    g: parseInt(hexColor.slice(2, 4), 16),
-    b: parseInt(hexColor.slice(4, 6), 16),
-    a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
-  };
-};
-
+import { hexToRGBAValues } from './hex-to-rgba-values';
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
@@ -25,4 +16,5 @@ export var getBoxShadow = function getBoxShadow(rawShadow) {
       b = _hexToRGBAValues.b;
     return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
   }).join(',');
-};
+};
+export { hexToRGBAValues } from './hex-to-rgba-values';