@atlaskit/tokens 13.1.0 → 13.2.0

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

@@ -9,7 +9,7 @@ exports.tokens = void 0;
  *
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::ecdf4f84ae7b36849943b200af52ee54>>
+ * @codegen <<SignedSource::620de1bdd9882e214dcc9ae141009ae7>>
  * @codegenCommand yarn build tokens
  */
 
@@ -1041,94 +1041,184 @@ var tokens = exports.tokens = [{
   }
 }, {
   name: 'color.border.accent.lime',
-  path: ['color', 'border', 'accent', 'lime'],
+  path: ['color', 'border', 'accent', 'lime', '[default]'],
   description: 'Use for lime borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#6A9A23',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.lime.subtle',
+  path: ['color', 'border', 'accent', 'lime', 'subtle'],
+  description: 'Use for decorative lime borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.red',
-  path: ['color', 'border', 'accent', 'red'],
+  path: ['color', 'border', 'accent', 'red', '[default]'],
   description: 'Use for red borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#E2483D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.red.subtle',
+  path: ['color', 'border', 'accent', 'red', 'subtle'],
+  description: 'Use for decorative red borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.orange',
-  path: ['color', 'border', 'accent', 'orange'],
+  path: ['color', 'border', 'accent', 'orange', '[default]'],
   description: 'Use for orange borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#E06C00',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.orange.subtle',
+  path: ['color', 'border', 'accent', 'orange', 'subtle'],
+  description: 'Use for decorative orange borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.yellow',
-  path: ['color', 'border', 'accent', 'yellow'],
+  path: ['color', 'border', 'accent', 'yellow', '[default]'],
   description: 'Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#B38600',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.yellow.subtle',
+  path: ['color', 'border', 'accent', 'yellow', 'subtle'],
+  description: 'Use for decorative yellow borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#EED12B',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.green',
-  path: ['color', 'border', 'accent', 'green'],
+  path: ['color', 'border', 'accent', 'green', '[default]'],
   description: 'Use for green borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#22A06B',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.green.subtle',
+  path: ['color', 'border', 'accent', 'green', 'subtle'],
+  description: 'Use for decorative green borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#7EE2B8',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.teal',
-  path: ['color', 'border', 'accent', 'teal'],
+  path: ['color', 'border', 'accent', 'teal', '[default]'],
   description: 'Use for teal borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#2898BD',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.teal.subtle',
+  path: ['color', 'border', 'accent', 'teal', 'subtle'],
+  description: 'Use for decorative teal borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#9DD9EE',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.blue',
-  path: ['color', 'border', 'accent', 'blue'],
+  path: ['color', 'border', 'accent', 'blue', '[default]'],
   description: 'Use for blue borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#357DE8',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.blue.subtle',
+  path: ['color', 'border', 'accent', 'blue', 'subtle'],
+  description: 'Use for decorative blue borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.purple',
-  path: ['color', 'border', 'accent', 'purple'],
+  path: ['color', 'border', 'accent', 'purple', '[default]'],
   description: 'Use for purple borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#AF59E1',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.purple.subtle',
+  path: ['color', 'border', 'accent', 'purple', 'subtle'],
+  description: 'Use for decorative purple borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.magenta',
-  path: ['color', 'border', 'accent', 'magenta'],
+  path: ['color', 'border', 'accent', 'magenta', '[default]'],
   description: 'Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color.',
   exampleValue: '#CD519D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.magenta.subtle',
+  path: ['color', 'border', 'accent', 'magenta', 'subtle'],
+  description: 'Use for decorative magenta borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#F797D2',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.accent.gray',
-  path: ['color', 'border', 'accent', 'gray'],
+  path: ['color', 'border', 'accent', 'gray', '[default]'],
   description: 'Use for borders on non-bold gray accent backgrounds.',
   exampleValue: '#7D818A',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.accent.gray.subtle',
+  path: ['color', 'border', 'accent', 'gray', 'subtle'],
+  description: 'Use for decorative gray borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#DDDEE1',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.disabled',
   path: ['color', 'border', 'disabled'],
@@ -1185,49 +1275,94 @@ var tokens = exports.tokens = [{
   }
 }, {
   name: 'color.border.danger',
-  path: ['color', 'border', 'danger'],
+  path: ['color', 'border', 'danger', '[default]'],
   description: 'Use for borders communicating critical information, such as the borders on invalid text fields.',
   exampleValue: '#E2483D',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.danger.subtle',
+  path: ['color', 'border', 'danger', 'subtle'],
+  description: 'Use for decorative danger borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.warning',
-  path: ['color', 'border', 'warning'],
+  path: ['color', 'border', 'warning', '[default]'],
   description: 'Use for borders communicating caution.',
   exampleValue: '#E06C00',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.warning.subtle',
+  path: ['color', 'border', 'warning', 'subtle'],
+  description: 'Use for decorative warning borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#FBC828',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.success',
-  path: ['color', 'border', 'success'],
+  path: ['color', 'border', 'success', '[default]'],
   description: 'Use for borders communicating a favorable outcome, such as the borders on validated text fields.',
   exampleValue: '#6A9A23',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.success.subtle',
+  path: ['color', 'border', 'success', 'subtle'],
+  description: 'Use for decorative success borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.discovery',
-  path: ['color', 'border', 'discovery'],
+  path: ['color', 'border', 'discovery', '[default]'],
   description: 'Use for borders communicating change or something new, such as the borders in onboarding spotlights.',
   exampleValue: '#AF59E1',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.discovery.subtle',
+  path: ['color', 'border', 'discovery', 'subtle'],
+  description: 'Use for decorative discovery borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.information',
-  path: ['color', 'border', 'information'],
+  path: ['color', 'border', 'information', '[default]'],
   description: 'Use for borders communicating information or something in-progress.',
   exampleValue: '#357DE8',
   usageGuidelines: {
     usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
     cssProperties: ['border-color', 'outline-color']
   }
+}, {
+  name: 'color.border.information.subtle',
+  path: ['color', 'border', 'information', 'subtle'],
+  description: 'Use for decorative information borders that do not need to meet 3:1 contrast requirements.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for borders or outlines. Use for border and outline colors on components (e.g. color.border, color.border.focused)',
+    cssProperties: ['border-color', 'outline-color']
+  }
 }, {
   name: 'color.border.bold',
   path: ['color', 'border', 'bold'],
@@ -2650,6 +2785,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.danger.subtle',
+  path: ['color', 'background', 'danger', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states.',
+  exampleValue: '#FD9891',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.danger.bold',
   path: ['color', 'background', 'danger', 'bold', '[default]'],
@@ -2731,6 +2875,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.warning.subtle',
+  path: ['color', 'background', 'warning', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating caution (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states.',
+  exampleValue: '#FBD779',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.warning.bold',
   path: ['color', 'background', 'warning', 'bold', '[default]'],
@@ -2812,6 +2965,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.success.subtle',
+  path: ['color', 'background', 'success', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states.',
+  exampleValue: '#B3DF72',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.success.bold',
   path: ['color', 'background', 'success', 'bold', '[default]'],
@@ -2893,6 +3055,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.discovery.subtle',
+  path: ['color', 'background', 'discovery', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states.',
+  exampleValue: '#D8A0F7',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.discovery.bold',
   path: ['color', 'background', 'discovery', 'bold', '[default]'],
@@ -2974,6 +3145,15 @@ var tokens = exports.tokens = [{
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']
   }
+}, {
+  name: 'color.background.information.subtle',
+  path: ['color', 'background', 'information', 'subtle', '[default]'],
+  description: 'Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states.',
+  exampleValue: '#8FB8F6',
+  usageGuidelines: {
+    usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
+    cssProperties: ['background-color']
+  }
 }, {
   name: 'color.background.information.bold',
   path: ['color', 'background', 'information', 'bold', '[default]'],

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

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCustomThemeStyles = getCustomThemeStyles;
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
-var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
-var _generateCustomColorRamp = require("./utils/generate-custom-color-ramp");
+var _generateColors = require("./utils/generate-colors");
+var _generateTokenMapWithContrastCheck = require("./utils/generate-token-map-with-contrast-check");
 var _hash = require("./utils/hash");
+var _reduceTokenMap = require("./utils/reduce-token-map");
 /**
  * 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.
@@ -26,11 +27,11 @@ function getCustomThemeStyles(themeState) {
   var mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || _themeConfig.themeStateDefaults['colorMode'];
   var optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
   var uniqueId = (0, _hash.hash)(optionString);
-  var themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor).ramp;
+  var themeRamp = (0, _generateColors.generateColors)(brandColor).ramp;
 
   // outputs object to generate to CSS from
   var themes = [];
-  var tokenMaps = (0, _generateCustomColorRamp.generateTokenMapWithContrastCheck)(brandColor, mode, themeRamp);
+  var tokenMaps = (0, _generateTokenMapWithContrastCheck.generateTokenMapWithContrastCheck)(brandColor, mode, themeRamp);
   if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
     // Light mode theming
     themes.push({
@@ -39,7 +40,7 @@ function getCustomThemeStyles(themeState) {
         'data-theme': 'light',
         'data-custom-theme': uniqueId
       },
-      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat((0, _customThemeLoadingUtils.reduceTokenMap)(tokenMaps.light, themeRamp), "\n}")
+      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"light\"][data-theme~=\"light:light\"] {\n  /* Branded tokens */\n    ").concat((0, _reduceTokenMap.reduceTokenMap)(tokenMaps.light, themeRamp), "\n}")
     });
   }
   if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
@@ -50,7 +51,7 @@ function getCustomThemeStyles(themeState) {
         'data-theme': 'dark',
         'data-custom-theme': uniqueId
       },
-      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat((0, _customThemeLoadingUtils.reduceTokenMap)(tokenMaps.dark, themeRamp), "\n}")
+      css: "\nhtml[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(_constants.COLOR_MODE_ATTRIBUTE, "=\"dark\"][data-theme~=\"dark:dark\"] {\n  /* Branded tokens */\n    ").concat((0, _reduceTokenMap.reduceTokenMap)(tokenMaps.dark, themeRamp), "\n}")
     });
   }
   return themes;

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
 var _themeColorModes = require("./theme-color-modes");
-var _themeStateTransformer = require("./theme-state-transformer");
+var _themeStringToObject = require("./theme-string-to-object");
 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) { (0, _defineProperty2.default)(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; }
 var isThemeColorMode = function isThemeColorMode(colorMode) {
@@ -23,7 +23,7 @@ var getGlobalTheme = function getGlobalTheme() {
   var element = document.documentElement;
   var colorMode = element.getAttribute(_constants.COLOR_MODE_ATTRIBUTE) || '';
   var theme = element.getAttribute(_constants.THEME_DATA_ATTRIBUTE) || '';
-  return _objectSpread(_objectSpread({}, (0, _themeStateTransformer.themeStringToObject)(theme)), isThemeColorMode(colorMode) && {
+  return _objectSpread(_objectSpread({}, (0, _themeStringToObject.themeStringToObject)(theme)), isThemeColorMode(colorMode) && {
     colorMode: colorMode
   });
 };

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

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
-var _themeStateTransformer = require("./theme-state-transformer");
+var _themeObjectToString = require("./theme-object-to-string");
 var _hash = require("./utils/hash");
 var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 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; }
@@ -52,7 +52,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     typography = _ref$typography === void 0 ? _themeConfig.themeStateDefaults['typography'] : _ref$typography,
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
-  var themeAttribute = (0, _themeStateTransformer.themeObjectToString)({
+  var themeAttribute = (0, _themeObjectToString.themeObjectToString)({
     dark: dark,
     light: light,
     motion: motion,

package/dist/cjs/index.js

@@ -91,13 +91,13 @@ Object.defineProperty(exports, "themeImportMap", {
 Object.defineProperty(exports, "themeObjectToString", {
   enumerable: true,
   get: function get() {
-    return _themeStateTransformer.themeObjectToString;
+    return _themeObjectToString.themeObjectToString;
   }
 });
 Object.defineProperty(exports, "themeStringToObject", {
   enumerable: true,
   get: function get() {
-    return _themeStateTransformer.themeStringToObject;
+    return _themeStringToObject.themeStringToObject;
   }
 });
 Object.defineProperty(exports, "token", {
@@ -123,6 +123,7 @@ var _getSsrAutoScript = _interopRequireDefault(require("./get-ssr-auto-script"))
 var _useThemeObserver = _interopRequireDefault(require("./use-theme-observer"));
 var _themeMutationObserver = _interopRequireDefault(require("./theme-mutation-observer"));
 var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
-var _themeStateTransformer = require("./theme-state-transformer");
+var _themeStringToObject = require("./theme-string-to-object");
+var _themeObjectToString = require("./theme-object-to-string");
 var _themeImportMap = _interopRequireDefault(require("./artifacts/theme-import-map"));
 var _constants = require("./constants");

package/dist/cjs/is-color-mode.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isColorMode = void 0;
+var isColorMode = exports.isColorMode = function isColorMode(modeId) {
+  return ['light', 'dark', 'auto'].includes(modeId);
+};

package/dist/cjs/is-theme-ids.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isThemeIds = void 0;
+var _themeIds = require("./theme-ids");
+var isThemeIds = exports.isThemeIds = function isThemeIds(themeId) {
+  return _themeIds.themeIds.find(function (id) {
+    return id === themeId;
+  }) !== undefined;
+};

package/dist/cjs/is-theme-kind.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isThemeKind = void 0;
+var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
+var isThemeKind = exports.isThemeKind = function isThemeKind(themeKind) {
+  return themeKinds.find(function (kind) {
+    return kind === themeKind;
+  }) !== undefined;
+};

package/dist/cjs/theme-config.js

@@ -17,11 +17,17 @@ Object.defineProperty(exports, "themeIds", {
     return _themeIds.themeIds;
   }
 });
-exports.themeStateDefaults = exports.themeIdsWithOverrides = void 0;
+exports.themeIdsWithOverrides = void 0;
+Object.defineProperty(exports, "themeStateDefaults", {
+  enumerable: true,
+  get: function get() {
+    return _themeStateDefaults.themeStateDefaults;
+  }
+});
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeIds = require("./theme-ids");
 var _themeColorModes = require("./theme-color-modes");
+var _themeStateDefaults = require("./theme-state-defaults");
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -168,48 +174,6 @@ var themeConfig = {
   }
 };
 
-/**
- * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
- */
-
-/**
- * ThemeState: the standard representation of an app's current theme and preferences
- */
-
-/**
- * Can't evaluate typography feature flags at the module level,
- * it will always resolve to false when server side rendered or when flags are loaded async.
- */
-
-function getShapeDefault() {
-  if ((0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default')) {
-    return 'shape';
-  }
-  return undefined;
-}
-function getMotionDefault() {
-  if ((0, _platformFeatureFlags.fg)('platform-dst-motion-theme-default')) {
-    return 'motion';
-  }
-  return undefined;
-}
-
-/**
- * themeStateDefaults: the default values for ThemeState used by theming utilities
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var themeStateDefaults = exports.themeStateDefaults = {
-  colorMode: 'auto',
-  contrastMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: getShapeDefault,
-  spacing: 'spacing',
-  typography: 'typography',
-  motion: getMotionDefault,
-  UNSAFE_themeOptions: undefined
-};
-
 /**
  * Represents theme state once mounted to the page
  * (the page doesn't have an "auto" color mode, it's either light or dark)

package/dist/cjs/theme-object-to-string.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeObjectToString = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _isColorMode = require("./is-color-mode");
+var _isThemeIds = require("./is-theme-ids");
+var _isThemeKind = require("./is-theme-kind");
+var customThemeOptions = 'UNSAFE_themeOptions';
+
+/**
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
+ *
+ * @param {object} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
+ * // returns 'dark:dark light:light spacing:spacing'
+ * ```
+ */
+var themeObjectToString = exports.themeObjectToString = function themeObjectToString(themeState) {
+  return Object.entries(themeState).reduce(function (themeString, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      kind = _ref2[0],
+      id = _ref2[1];
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && (0, _isColorMode.isColorMode)(id) ||
+    // custom theme state
+    kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
+    // other theme states
+    (0, _isThemeKind.isThemeKind)(kind) && typeof id === 'string' && (0, _isThemeIds.isThemeIds)(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
+  }, '');
+};

package/dist/cjs/theme-options-schema.js

@@ -0,0 +1 @@
+"use strict";