@atlaskit/tokens 13.0.2 → 13.0.4

package/codemods/utils/tokens.tsx

@@ -1,376 +1,2 @@
-export const activeTokens: string[] = [
-	'color.text',
-	'color.text.accent.lime',
-	'color.text.accent.lime.bolder',
-	'color.text.accent.red',
-	'color.text.accent.red.bolder',
-	'color.text.accent.orange',
-	'color.text.accent.orange.bolder',
-	'color.text.accent.yellow',
-	'color.text.accent.yellow.bolder',
-	'color.text.accent.green',
-	'color.text.accent.green.bolder',
-	'color.text.accent.teal',
-	'color.text.accent.teal.bolder',
-	'color.text.accent.blue',
-	'color.text.accent.blue.bolder',
-	'color.text.accent.purple',
-	'color.text.accent.purple.bolder',
-	'color.text.accent.magenta',
-	'color.text.accent.magenta.bolder',
-	'color.text.accent.gray',
-	'color.text.accent.gray.bolder',
-	'color.text.disabled',
-	'color.text.inverse',
-	'color.text.selected',
-	'color.text.brand',
-	'color.text.danger',
-	'color.text.warning',
-	'color.text.warning.inverse',
-	'color.text.success',
-	'color.text.discovery',
-	'color.text.information',
-	'color.text.subtlest',
-	'color.text.subtle',
-	'color.link',
-	'color.link.pressed',
-	'color.link.visited',
-	'color.icon',
-	'color.icon.accent.lime',
-	'color.icon.accent.red',
-	'color.icon.accent.orange',
-	'color.icon.accent.yellow',
-	'color.icon.accent.green',
-	'color.icon.accent.teal',
-	'color.icon.accent.blue',
-	'color.icon.accent.purple',
-	'color.icon.accent.magenta',
-	'color.icon.accent.gray',
-	'color.icon.disabled',
-	'color.icon.inverse',
-	'color.icon.selected',
-	'color.icon.brand',
-	'color.icon.danger',
-	'color.icon.warning',
-	'color.icon.warning.inverse',
-	'color.icon.success',
-	'color.icon.discovery',
-	'color.icon.information',
-	'color.icon.subtle',
-	'color.border',
-	'color.border.accent.lime',
-	'color.border.accent.red',
-	'color.border.accent.orange',
-	'color.border.accent.yellow',
-	'color.border.accent.green',
-	'color.border.accent.teal',
-	'color.border.accent.blue',
-	'color.border.accent.purple',
-	'color.border.accent.magenta',
-	'color.border.accent.gray',
-	'color.border.disabled',
-	'color.border.focused',
-	'color.border.input',
-	'color.border.inverse',
-	'color.border.selected',
-	'color.border.brand',
-	'color.border.danger',
-	'color.border.warning',
-	'color.border.success',
-	'color.border.discovery',
-	'color.border.information',
-	'color.border.bold',
-	'color.background.accent.lime.subtlest',
-	'color.background.accent.lime.subtlest.hovered',
-	'color.background.accent.lime.subtlest.pressed',
-	'color.background.accent.lime.subtler',
-	'color.background.accent.lime.subtler.hovered',
-	'color.background.accent.lime.subtler.pressed',
-	'color.background.accent.lime.subtle',
-	'color.background.accent.lime.subtle.hovered',
-	'color.background.accent.lime.subtle.pressed',
-	'color.background.accent.lime.bolder',
-	'color.background.accent.lime.bolder.hovered',
-	'color.background.accent.lime.bolder.pressed',
-	'color.background.accent.red.subtlest',
-	'color.background.accent.red.subtlest.hovered',
-	'color.background.accent.red.subtlest.pressed',
-	'color.background.accent.red.subtler',
-	'color.background.accent.red.subtler.hovered',
-	'color.background.accent.red.subtler.pressed',
-	'color.background.accent.red.subtle',
-	'color.background.accent.red.subtle.hovered',
-	'color.background.accent.red.subtle.pressed',
-	'color.background.accent.red.bolder',
-	'color.background.accent.red.bolder.hovered',
-	'color.background.accent.red.bolder.pressed',
-	'color.background.accent.orange.subtlest',
-	'color.background.accent.orange.subtlest.hovered',
-	'color.background.accent.orange.subtlest.pressed',
-	'color.background.accent.orange.subtler',
-	'color.background.accent.orange.subtler.hovered',
-	'color.background.accent.orange.subtler.pressed',
-	'color.background.accent.orange.subtle',
-	'color.background.accent.orange.subtle.hovered',
-	'color.background.accent.orange.subtle.pressed',
-	'color.background.accent.orange.bolder',
-	'color.background.accent.orange.bolder.hovered',
-	'color.background.accent.orange.bolder.pressed',
-	'color.background.accent.yellow.subtlest',
-	'color.background.accent.yellow.subtlest.hovered',
-	'color.background.accent.yellow.subtlest.pressed',
-	'color.background.accent.yellow.subtler',
-	'color.background.accent.yellow.subtler.hovered',
-	'color.background.accent.yellow.subtler.pressed',
-	'color.background.accent.yellow.subtle',
-	'color.background.accent.yellow.subtle.hovered',
-	'color.background.accent.yellow.subtle.pressed',
-	'color.background.accent.yellow.bolder',
-	'color.background.accent.yellow.bolder.hovered',
-	'color.background.accent.yellow.bolder.pressed',
-	'color.background.accent.green.subtlest',
-	'color.background.accent.green.subtlest.hovered',
-	'color.background.accent.green.subtlest.pressed',
-	'color.background.accent.green.subtler',
-	'color.background.accent.green.subtler.hovered',
-	'color.background.accent.green.subtler.pressed',
-	'color.background.accent.green.subtle',
-	'color.background.accent.green.subtle.hovered',
-	'color.background.accent.green.subtle.pressed',
-	'color.background.accent.green.bolder',
-	'color.background.accent.green.bolder.hovered',
-	'color.background.accent.green.bolder.pressed',
-	'color.background.accent.teal.subtlest',
-	'color.background.accent.teal.subtlest.hovered',
-	'color.background.accent.teal.subtlest.pressed',
-	'color.background.accent.teal.subtler',
-	'color.background.accent.teal.subtler.hovered',
-	'color.background.accent.teal.subtler.pressed',
-	'color.background.accent.teal.subtle',
-	'color.background.accent.teal.subtle.hovered',
-	'color.background.accent.teal.subtle.pressed',
-	'color.background.accent.teal.bolder',
-	'color.background.accent.teal.bolder.hovered',
-	'color.background.accent.teal.bolder.pressed',
-	'color.background.accent.blue.subtlest',
-	'color.background.accent.blue.subtlest.hovered',
-	'color.background.accent.blue.subtlest.pressed',
-	'color.background.accent.blue.subtler',
-	'color.background.accent.blue.subtler.hovered',
-	'color.background.accent.blue.subtler.pressed',
-	'color.background.accent.blue.subtle',
-	'color.background.accent.blue.subtle.hovered',
-	'color.background.accent.blue.subtle.pressed',
-	'color.background.accent.blue.bolder',
-	'color.background.accent.blue.bolder.hovered',
-	'color.background.accent.blue.bolder.pressed',
-	'color.background.accent.purple.subtlest',
-	'color.background.accent.purple.subtlest.hovered',
-	'color.background.accent.purple.subtlest.pressed',
-	'color.background.accent.purple.subtler',
-	'color.background.accent.purple.subtler.hovered',
-	'color.background.accent.purple.subtler.pressed',
-	'color.background.accent.purple.subtle',
-	'color.background.accent.purple.subtle.hovered',
-	'color.background.accent.purple.subtle.pressed',
-	'color.background.accent.purple.bolder',
-	'color.background.accent.purple.bolder.hovered',
-	'color.background.accent.purple.bolder.pressed',
-	'color.background.accent.magenta.subtlest',
-	'color.background.accent.magenta.subtlest.hovered',
-	'color.background.accent.magenta.subtlest.pressed',
-	'color.background.accent.magenta.subtler',
-	'color.background.accent.magenta.subtler.hovered',
-	'color.background.accent.magenta.subtler.pressed',
-	'color.background.accent.magenta.subtle',
-	'color.background.accent.magenta.subtle.hovered',
-	'color.background.accent.magenta.subtle.pressed',
-	'color.background.accent.magenta.bolder',
-	'color.background.accent.magenta.bolder.hovered',
-	'color.background.accent.magenta.bolder.pressed',
-	'color.background.accent.gray.subtlest',
-	'color.background.accent.gray.subtlest.hovered',
-	'color.background.accent.gray.subtlest.pressed',
-	'color.background.accent.gray.subtler',
-	'color.background.accent.gray.subtler.hovered',
-	'color.background.accent.gray.subtler.pressed',
-	'color.background.accent.gray.subtle',
-	'color.background.accent.gray.subtle.hovered',
-	'color.background.accent.gray.subtle.pressed',
-	'color.background.accent.gray.bolder',
-	'color.background.accent.gray.bolder.hovered',
-	'color.background.accent.gray.bolder.pressed',
-	'color.background.disabled',
-	'color.background.input',
-	'color.background.input.hovered',
-	'color.background.input.pressed',
-	'color.background.inverse.subtle',
-	'color.background.inverse.subtle.hovered',
-	'color.background.inverse.subtle.pressed',
-	'color.background.neutral',
-	'color.background.neutral.hovered',
-	'color.background.neutral.pressed',
-	'color.background.neutral.subtle',
-	'color.background.neutral.subtle.hovered',
-	'color.background.neutral.subtle.pressed',
-	'color.background.neutral.bold',
-	'color.background.neutral.bold.hovered',
-	'color.background.neutral.bold.pressed',
-	'color.background.selected',
-	'color.background.selected.hovered',
-	'color.background.selected.pressed',
-	'color.background.selected.bold',
-	'color.background.selected.bold.hovered',
-	'color.background.selected.bold.pressed',
-	'color.background.brand.subtlest',
-	'color.background.brand.subtlest.hovered',
-	'color.background.brand.subtlest.pressed',
-	'color.background.brand.bold',
-	'color.background.brand.bold.hovered',
-	'color.background.brand.bold.pressed',
-	'color.background.brand.boldest',
-	'color.background.brand.boldest.hovered',
-	'color.background.brand.boldest.pressed',
-	'color.background.danger',
-	'color.background.danger.hovered',
-	'color.background.danger.pressed',
-	'color.background.danger.bold',
-	'color.background.danger.bold.hovered',
-	'color.background.danger.bold.pressed',
-	'color.background.warning',
-	'color.background.warning.hovered',
-	'color.background.warning.pressed',
-	'color.background.warning.bold',
-	'color.background.warning.bold.hovered',
-	'color.background.warning.bold.pressed',
-	'color.background.success',
-	'color.background.success.hovered',
-	'color.background.success.pressed',
-	'color.background.success.bold',
-	'color.background.success.bold.hovered',
-	'color.background.success.bold.pressed',
-	'color.background.discovery',
-	'color.background.discovery.hovered',
-	'color.background.discovery.pressed',
-	'color.background.discovery.bold',
-	'color.background.discovery.bold.hovered',
-	'color.background.discovery.bold.pressed',
-	'color.background.information',
-	'color.background.information.hovered',
-	'color.background.information.pressed',
-	'color.background.information.bold',
-	'color.background.information.bold.hovered',
-	'color.background.information.bold.pressed',
-	'color.blanket',
-	'color.blanket.selected',
-	'color.blanket.danger',
-	'color.skeleton',
-	'color.skeleton.subtle',
-	'elevation.surface',
-	'elevation.surface.hovered',
-	'elevation.surface.pressed',
-	'elevation.surface.overlay',
-	'elevation.surface.overlay.hovered',
-	'elevation.surface.overlay.pressed',
-	'elevation.surface.raised',
-	'elevation.surface.raised.hovered',
-	'elevation.surface.raised.pressed',
-	'elevation.surface.sunken',
-	'elevation.shadow.overlay',
-	'elevation.shadow.raised',
-	'opacity.disabled',
-	'opacity.loading',
-	'utility.elevation.surface.current',
-];
-
-export const uniqueWordsFromTokens: string[] = [
-	'color',
-	'text',
-	'accent',
-	'lime',
-	'bolder',
-	'red',
-	'orange',
-	'yellow',
-	'green',
-	'teal',
-	'blue',
-	'purple',
-	'magenta',
-	'gray',
-	'disabled',
-	'inverse',
-	'selected',
-	'brand',
-	'danger',
-	'warning',
-	'success',
-	'discovery',
-	'information',
-	'subtlest',
-	'subtle',
-	'link',
-	'pressed',
-	'visited',
-	'icon',
-	'border',
-	'focused',
-	'input',
-	'bold',
-	'background',
-	'hovered',
-	'subtler',
-	'neutral',
-	'boldest',
-	'blanket',
-	'interaction',
-	'skeleton',
-	'chart',
-	'categorical',
-	'elevation',
-	'surface',
-	'overlay',
-	'raised',
-	'sunken',
-	'shadow',
-	'overflow',
-	'perimeter',
-	'spread',
-	'opacity',
-	'loading',
-	'utility',
-	'transform',
-	'uppercase',
-	'transparent',
-	'current',
-	'radius',
-	'circle',
-	'width',
-	'indicator',
-	'outline',
-	'space',
-	'negative',
-	'font',
-	'heading',
-	'xxlarge',
-	'xlarge',
-	'large',
-	'medium',
-	'small',
-	'xsmall',
-	'xxsmall',
-	'body',
-	'ui',
-	'code',
-	'letter',
-	'spacing',
-	'family',
-	'monospace',
-	'sans',
-	'size',
-	'weight',
-	'regular',
-	'semibold',
-	'line',
-	'height',
-];
+export { activeTokens } from './active-tokens';
+export { uniqueWordsFromTokens } from './unique-words-from-tokens';

package/codemods/utils/unique-words-from-tokens.tsx

@@ -0,0 +1,91 @@
+export const uniqueWordsFromTokens: string[] = [
+	'color',
+	'text',
+	'accent',
+	'lime',
+	'bolder',
+	'red',
+	'orange',
+	'yellow',
+	'green',
+	'teal',
+	'blue',
+	'purple',
+	'magenta',
+	'gray',
+	'disabled',
+	'inverse',
+	'selected',
+	'brand',
+	'danger',
+	'warning',
+	'success',
+	'discovery',
+	'information',
+	'subtlest',
+	'subtle',
+	'link',
+	'pressed',
+	'visited',
+	'icon',
+	'border',
+	'focused',
+	'input',
+	'bold',
+	'background',
+	'hovered',
+	'subtler',
+	'neutral',
+	'boldest',
+	'blanket',
+	'interaction',
+	'skeleton',
+	'chart',
+	'categorical',
+	'elevation',
+	'surface',
+	'overlay',
+	'raised',
+	'sunken',
+	'shadow',
+	'overflow',
+	'perimeter',
+	'spread',
+	'opacity',
+	'loading',
+	'utility',
+	'transform',
+	'uppercase',
+	'transparent',
+	'current',
+	'radius',
+	'circle',
+	'width',
+	'indicator',
+	'outline',
+	'space',
+	'negative',
+	'font',
+	'heading',
+	'xxlarge',
+	'xlarge',
+	'large',
+	'medium',
+	'small',
+	'xsmall',
+	'xxsmall',
+	'body',
+	'ui',
+	'code',
+	'letter',
+	'spacing',
+	'family',
+	'monospace',
+	'sans',
+	'size',
+	'weight',
+	'regular',
+	'semibold',
+	'line',
+	'height',
+];

package/dist/cjs/artifacts/replacement-mapping.js

@@ -18,9 +18,12 @@ exports.default = void 0;
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::c779b40628532228cae2ec34977f1f8e>>
+ * @codegen <<SignedSource::047b57f2d22a7675431a9f6acb147bf6>>
  * @codegenCommand yarn build tokens
  */
 
-var replacementMapper = [];
+var replacementMapper = [{
+  "path": "motion.easing.spring",
+  "state": "experimental"
+}];
 var _default = exports.default = replacementMapper;

package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f86ddd91a5d48fe256274c50f5d73493>>
+ * @codegen <<SignedSource::33ce7f44e704e6b32332ffdfac5776e4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -427,7 +427,7 @@ var tokens = [{
 }, {
   "attributes": {
     "group": "motionEasing",
-    "state": "active",
+    "state": "experimental",
     "introduced": "11.5.0",
     "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."
   },
@@ -437,7 +437,7 @@ var tokens = [{
   "original": {
     "attributes": {
       "group": "motionEasing",
-      "state": "active",
+      "state": "experimental",
       "introduced": "11.5.0",
       "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."
     },

package/dist/cjs/custom-theme.js

@@ -4,69 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = void 0;
-exports.getCustomThemeStyles = getCustomThemeStyles;
+Object.defineProperty(exports, "getCustomThemeStyles", {
+  enumerable: true,
+  get: function get() {
+    return _getCustomThemeStyles.getCustomThemeStyles;
+  }
+});
 exports.loadAndAppendCustomThemeCss = loadAndAppendCustomThemeCss;
-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 _hash = require("./utils/hash");
+var _getCustomThemeStyles = require("./get-custom-theme-styles");
+var _limitSizeOfCustomStyleElements = require("./utils/limit-size-of-custom-style-elements");
 var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = exports.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.
- */
-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) || _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;
-
-  // outputs object to generate to CSS from
-  var themes = [];
-  var tokenMaps = (0, _generateCustomColorRamp.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(_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}")
-    });
-  }
-  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(_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}")
-    });
-  }
-  return themes;
-}
 function loadAndAppendCustomThemeCss(themeState) {
-  var themes = getCustomThemeStyles(themeState);
-  (0, _customThemeLoadingUtils.limitSizeOfCustomStyleElements)(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+  var themes = (0, _getCustomThemeStyles.getCustomThemeStyles)(themeState);
+  (0, _limitSizeOfCustomStyleElements.limitSizeOfCustomStyleElements)(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
   themes.map(function (theme) {
     var styleTag = document.createElement('style');
     document.head.appendChild(styleTag);

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::84f21045f3136acc13a56a289840c82a>>
+ * @codegen <<SignedSource::8a97395137b2eee0fedb0ac95a7a2528>>
  * @codegenCommand yarn build tokens
  */
 
@@ -166,15 +166,6 @@ var tokens = exports.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'],

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _hash = require("./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.
+ */
+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) || _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;
+
+  // outputs object to generate to CSS from
+  var themes = [];
+  var tokenMaps = (0, _generateCustomColorRamp.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(_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}")
+    });
+  }
+  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(_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}")
+    });
+  }
+  return themes;
+}