@atlaskit/tokens 1.11.3 → 1.13.0

package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0752455125a2970afd988a456ef7a00b>>
+ * @codegen <<SignedSource::6601df15e45294ebfb575b1b034a2aa7>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -3127,6 +3127,72 @@ var tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#0052CC",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "B400"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0065FF",
   "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
@@ -3164,7 +3230,7 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "B300"
   },
@@ -3176,7 +3242,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#0747A6",
   "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
@@ -3186,13 +3252,79 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "B500"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#B3D4FF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "B75"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#DEEBFF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "B50"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#4C9AFF",
+  "filePath": "src/tokens/atlassian-legacy-dark/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "B100"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0b9efb6f5e343e1cbb90bf2ead8a25da>>
+ * @codegen <<SignedSource::8b7aab21b157bced2314e03774c8445e>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -3127,6 +3127,72 @@ var tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#B3D4FF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "B75"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#DEEBFF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "B50"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#4C9AFF",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "B100"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0065FF",
   "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
@@ -3164,7 +3230,7 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "B300"
   },
@@ -3176,7 +3242,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#0747A6",
   "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
@@ -3186,13 +3252,79 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "B500"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#0052CC",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "B400"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#0747A6",
+  "filePath": "src/tokens/atlassian-legacy-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "B500"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

package/dist/esm/artifacts/tokens-raw/atlassian-light.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d67f95200a3e54c2a2adadc78198392e>>
+ * @codegen <<SignedSource::c96324369c8a09e129803eff1f33d1e8>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -3127,6 +3127,72 @@ var tokens = [{
   "name": "color.background.selected.bold.pressed",
   "path": ["color", "background", "selected", "bold", "pressed"],
   "cleanName": "color.background.selected.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+  },
+  "value": "#E9F2FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, but with less emphasis."
+    },
+    "value": "Blue100"
+  },
+  "name": "color.background.brand.subtlest.[default]",
+  "path": ["color", "background", "brand", "subtlest", "[default]"],
+  "cleanName": "color.background.brand.subtlest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.subtlest."
+  },
+  "value": "#CCE0FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.subtlest."
+    },
+    "value": "Blue200"
+  },
+  "name": "color.background.brand.subtlest.hovered",
+  "path": ["color", "background", "brand", "subtlest", "hovered"],
+  "cleanName": "color.background.brand.subtlest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.subtlest"
+  },
+  "value": "#85B8FF",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.subtlest"
+    },
+    "value": "Blue300"
+  },
+  "name": "color.background.brand.subtlest.pressed",
+  "path": ["color", "background", "brand", "subtlest", "pressed"],
+  "cleanName": "color.background.brand.subtlest.pressed"
 }, {
   "attributes": {
     "group": "paint",
@@ -3154,7 +3220,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Hovered state of color.background.brand.bold"
+    "description": "Hovered state of color.background.brand.bold."
   },
   "value": "#0055CC",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
@@ -3164,7 +3230,7 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Hovered state of color.background.brand.bold"
+      "description": "Hovered state of color.background.brand.bold."
     },
     "value": "Blue800"
   },
@@ -3176,7 +3242,7 @@ var tokens = [{
     "group": "paint",
     "state": "active",
     "introduced": "0.6.0",
-    "description": "Pressed state of color.background.brand.bold"
+    "description": "Pressed state of color.background.brand.bold."
   },
   "value": "#09326C",
   "filePath": "src/tokens/atlassian-light/color/background.tsx",
@@ -3186,13 +3252,79 @@ var tokens = [{
       "group": "paint",
       "state": "active",
       "introduced": "0.6.0",
-      "description": "Pressed state of color.background.brand.bold"
+      "description": "Pressed state of color.background.brand.bold."
     },
     "value": "Blue900"
   },
   "name": "color.background.brand.bold.pressed",
   "path": ["color", "background", "brand", "bold", "pressed"],
   "cleanName": "color.background.brand.bold.pressed"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+  },
+  "value": "#092957",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot."
+    },
+    "value": "Blue1000"
+  },
+  "name": "color.background.brand.boldest.[default]",
+  "path": ["color", "background", "brand", "boldest", "[default]"],
+  "cleanName": "color.background.brand.boldest"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Hovered state of color.background.brand.boldest."
+  },
+  "value": "#09326C",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Hovered state of color.background.brand.boldest."
+    },
+    "value": "Blue900"
+  },
+  "name": "color.background.brand.boldest.hovered",
+  "path": ["color", "background", "brand", "boldest", "hovered"],
+  "cleanName": "color.background.brand.boldest.hovered"
+}, {
+  "attributes": {
+    "group": "paint",
+    "state": "active",
+    "introduced": "1.13.0",
+    "description": "Pressed state of color.background.brand.boldest."
+  },
+  "value": "#0055CC",
+  "filePath": "src/tokens/atlassian-light/color/background.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "paint",
+      "state": "active",
+      "introduced": "1.13.0",
+      "description": "Pressed state of color.background.brand.boldest."
+    },
+    "value": "Blue800"
+  },
+  "name": "color.background.brand.boldest.pressed",
+  "path": ["color", "background", "brand", "boldest", "pressed"],
+  "cleanName": "color.background.brand.boldest.pressed"
 }, {
   "attributes": {
     "group": "paint",

package/dist/esm/constants.js

@@ -1,5 +1,6 @@
 export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
+export var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 export var DEFAULT_THEME = 'light';
 export var CSS_PREFIX = 'ds';
 export var CSS_VAR_FULL = ['opacity', 'font', 'space', 'border'];

package/dist/esm/custom-theme.js

@@ -0,0 +1,98 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './set-global-theme';
+import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
+import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
+import { hash } from './utils/hash';
+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 A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+export function getCustomThemeStyles(_x) {
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+function _getCustomThemeStyles() {
+  _getCustomThemeStyles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeState) {
+    var _themeState$UNSAFE_th;
+    var brandColor, mode, optionString, uniqueId, themeRamp, themes, tokenMaps;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
+          mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
+          optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+          uniqueId = hash(optionString);
+          themeRamp = generateColors(brandColor); // outputs object to generate to CSS from
+          themes = [];
+          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 _context.abrupt("return", themes);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+export function loadAndAppendCustomThemeCss(_x2) {
+  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+}
+function _loadAndAppendCustomThemeCss() {
+  _loadAndAppendCustomThemeCss = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeState) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          getCustomThemeStyles(themeState).then(function (themes) {
+            limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+            themes.map(function (theme) {
+              var styleTag = document.createElement('style');
+              document.head.appendChild(styleTag);
+              styleTag.dataset.theme = theme.attrs['data-theme'];
+              styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
+              styleTag.textContent = theme.css;
+            });
+          });
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+}