@atlaskit/tokens 1.11.3 → 1.13.0

package/dist/es2019/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
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const 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 @@ const 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 @@ const 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 @@ const 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 @@ const 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/es2019/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
  */
 const tokens = [{
@@ -3127,6 +3127,72 @@ const 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 @@ const 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 @@ const 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 @@ const 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 @@ const 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/es2019/constants.js

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

package/dist/es2019/custom-theme.js

@@ -0,0 +1,77 @@
+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 const 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 async function getCustomThemeStyles(themeState) {
+  var _themeState$UNSAFE_th;
+  const 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;
+  const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
+  const optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+  const uniqueId = hash(optionString);
+  const themeRamp = generateColors(brandColor);
+
+  // outputs object to generate to CSS from
+  const themes = [];
+  const 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: `
+html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="light"][data-theme~="light:light"] {
+  /* Branded tokens */
+    ${reduceTokenMap(tokenMaps.light, themeRamp)}
+}`
+    });
+  }
+  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
+    // Dark mode theming
+    themes.push({
+      id: 'dark',
+      attrs: {
+        'data-theme': 'dark',
+        'data-custom-theme': uniqueId
+      },
+      css: `
+html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][data-theme~="dark:dark"] {
+  /* Branded tokens */
+    ${reduceTokenMap(tokenMaps.dark, themeRamp)}
+}`
+    });
+  }
+  return themes;
+}
+export async function loadAndAppendCustomThemeCss(themeState) {
+  getCustomThemeStyles(themeState).then(themes => {
+    limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
+    themes.map(theme => {
+      const 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;
+    });
+  });
+}

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.11.3";
+const version = "0.0.0-development";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.11.3";
+const version = "0.0.0-development";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

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

@@ -1,8 +1,11 @@
 import { bind } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeIdsWithOverrides } from './theme-config';
+import { isValidBrandHex } from './utils/color-utils';
+import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+import { hash } from './utils/hash';
 import { loadAndAppendThemeCss, loadThemeCss } from './utils/theme-loading';
 import { themeObjectToString } from './utils/theme-state-transformer';
 
@@ -13,13 +16,14 @@ const isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in w
 const darkModeMediaQuery = '(prefers-color-scheme: dark)';
 const darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
 let unbindThemeChangeListener = noop;
-const themeStateDefaults = {
+export const themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
   shape: undefined,
   spacing: undefined,
-  typography: undefined
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
 };
 
 /**
@@ -69,6 +73,7 @@ const getThemePreferences = themeState => {
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  * @param {function} themeLoader Callback function used to override the default theme loading functionality.
  *
  * @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
@@ -84,7 +89,8 @@ const setGlobalTheme = async ({
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography']
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}, themeLoader) => {
   const themePreferences = getThemePreferences({
     colorMode,
@@ -95,7 +101,25 @@ const setGlobalTheme = async ({
     typography
   });
   const loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-  await Promise.all(themePreferences.map(async themeId => await loadingStrategy(themeId)));
+  await Promise.all([...themePreferences.map(async themeId => await loadingStrategy(themeId)), (async () => {
+    if (!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+      const mode = colorMode || themeStateDefaults['colorMode'];
+      const attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+      if (attrOfMissingCustomStyles.length === 0) {
+        return false;
+      }
+      const {
+        loadAndAppendCustomThemeCss
+      } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+      './custom-theme');
+      await loadAndAppendCustomThemeCss({
+        colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+        // only load the missing custom theme styles
+        attrOfMissingCustomStyles[0],
+        UNSAFE_themeOptions
+      });
+    }
+  })()]);
   if (colorMode === 'auto' && darkModeMql) {
     colorMode = darkModeMql.matches ? 'dark' : 'light';
     // Add an event listener for changes to the system theme.
@@ -113,7 +137,8 @@ const setGlobalTheme = async ({
     light,
     shape,
     spacing,
-    typography
+    typography,
+    UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
   });
   Object.entries(themeAttributes).forEach(([key, value]) => {
     document.documentElement.setAttribute(key, value);
@@ -131,9 +156,10 @@ const setGlobalTheme = async ({
  * @param {string} themeState.shape The shape theme to be applied.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be 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 arrav will be emptv.
+ * If an error is encountered while loading themes, the themes array will be empty.
  */
 export const getThemeStyles = async preferences => {
   let themePreferences;
@@ -149,7 +175,7 @@ export const getThemeStyles = async preferences => {
       typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
     });
   }
-  const results = await Promise.all(themePreferences.map(async themeId => {
+  const results = await Promise.all([...themePreferences.map(async themeId => {
     try {
       const css = await loadThemeCss(themeId);
       return {
@@ -160,11 +186,31 @@ export const getThemeStyles = async preferences => {
         css
       };
     } catch {
-      // Return an empty string if there's an error loading it.
+      // Return undefined if there's an error loading it, will be filtered out later.
       return undefined;
     }
-  }));
-  return results.filter(theme => theme !== undefined);
+  }),
+  // Add custom themes if they're present
+  (async () => {
+    var _preferences$UNSAFE_t;
+    if (preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && isValidBrandHex(preferences === null || preferences === void 0 ? void 0 : (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor)) {
+      try {
+        const {
+          getCustomThemeStyles
+        } = await import( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+        './custom-theme');
+        const customThemeStyles = await 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
+        });
+        return customThemeStyles;
+      } catch {
+        // Return undefined if there's an error loading it, will be filtered out later.
+        return undefined;
+      }
+    }
+  })()]);
+  return results.flat().filter(theme => theme !== undefined);
 };
 
 /**
@@ -177,6 +223,7 @@ export const getThemeStyles = async preferences => {
  * @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
  * @param {string} themeState.spacing The spacing theme to be applied.
  * @param {string} themeState.typography The typography theme to be applied.
+ * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
  *
  * @returns {Object} Object of HTML attributes to be applied to the document root
  */
@@ -186,7 +233,8 @@ export const getThemeHtmlAttrs = ({
   light = themeStateDefaults['light'],
   shape = themeStateDefaults['shape'],
   spacing = themeStateDefaults['spacing'],
-  typography = themeStateDefaults['typography']
+  typography = themeStateDefaults['typography'],
+  UNSAFE_themeOptions = themeStateDefaults['UNSAFE_themeOptions']
 } = {}) => {
   let themePreferences = {
     dark,
@@ -207,10 +255,16 @@ export const getThemeHtmlAttrs = ({
     };
   }
   const themeAttribute = themeObjectToString(themePreferences);
-  return {
+  const result = {
     [THEME_DATA_ATTRIBUTE]: themeAttribute,
     [COLOR_MODE_ATTRIBUTE]: colorMode === 'auto' ? defaultColorMode : colorMode
   };
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
+    const optionString = JSON.stringify(UNSAFE_themeOptions);
+    const uniqueId = hash(optionString);
+    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
 };
 
 /**