@atlaskit/tokens 1.11.3 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/tokens
 
+## 1.12.0
+
+### Minor Changes
+
+- [`beba2779d31`](https://bitbucket.org/atlassian/atlassian-frontend/commits/beba2779d31) - Add experimental support for custom theming via the `UNSAFE_themeOptions` field in `themeState`.
+
+  This option is supported in the following functions:
+
+  - `setGlobalTheme()`: optionally generates and loads customized themes based on the options provided, and sets the `data-custom-theme` attribute on page's HTML tag.
+  - `getThemeStyles()`: returns additional style objects for constructing custom theme `<style>` tags.
+  - `getThemeHtmlAttrs()`: now supports the `data-custom-theme` attribute.
+
+  Custom themes are generated at runtime based on the options provided. The theme generation logic is lazy-loaded only when `UNSAFE_themeOptions` is set.
+
 ## 1.11.3
 
 ### Patch Changes

package/dist/cjs/artifacts/atlassian-dark-token-value-for-contrast-check.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::1ddd5cd744975e8df5a191332ec8a42c>>
+ * @codegenCommand yarn build tokens
+ */
+var tokenValues = {
+  'color.text.brand': '#579DFF',
+  'elevation.surface.overlay': '#282E33',
+  'color.text.selected': '#579DFF',
+  'color.background.selected': '#092957',
+  'color.border.brand': '#579DFF',
+  'color.chart.brand': '#388BFF'
+};
+var _default = tokenValues;
+exports.default = _default;

package/dist/cjs/artifacts/atlassian-light-token-value-for-contrast-check.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Token names mapped to their values, used for contrast checking when generating custom themes
+ *
+ * @codegen <<SignedSource::b59877585fad151840dbf6c212c56e34>>
+ * @codegenCommand yarn build tokens
+ */
+var tokenValues = {
+  'color.text.brand': '#0C66E4',
+  'elevation.surface.sunken': '#F7F8F9',
+  'color.text.selected': '#0C66E4',
+  'color.background.selected': '#E9F2FF',
+  'color.border.brand': '#0C66E4',
+  'color.chart.brand': '#1D7AFC'
+};
+var _default = tokenValues;
+exports.default = _default;

package/dist/cjs/constants.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
+exports.TOKEN_NOT_FOUND_CSS_VAR = exports.THEME_DATA_ATTRIBUTE = exports.DEFAULT_THEME = exports.CUSTOM_THEME_ATTRIBUTE = exports.CSS_VAR_FULL = exports.CSS_PREFIX = exports.COLOR_MODE_ATTRIBUTE = void 0;
 var THEME_DATA_ATTRIBUTE = 'data-theme';
 exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var COLOR_MODE_ATTRIBUTE = 'data-color-mode';
 exports.COLOR_MODE_ATTRIBUTE = COLOR_MODE_ATTRIBUTE;
+var CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
+exports.CUSTOM_THEME_ATTRIBUTE = CUSTOM_THEME_ATTRIBUTE;
 var DEFAULT_THEME = 'light';
 exports.DEFAULT_THEME = DEFAULT_THEME;
 var CSS_PREFIX = 'ds';

package/dist/cjs/custom-theme.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = void 0;
+exports.getCustomThemeStyles = getCustomThemeStyles;
+exports.loadAndAppendCustomThemeCss = loadAndAppendCustomThemeCss;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _constants = require("./constants");
+var _setGlobalTheme = require("./set-global-theme");
+var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _generateCustomColorRamp = require("./utils/generate-custom-color-ramp");
+var _hash = require("./utils/hash");
+var CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
+exports.CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD;
+/**
+ *
+ * @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.
+ */
+function getCustomThemeStyles(_x) {
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+function _getCustomThemeStyles() {
+  _getCustomThemeStyles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeState) {
+    var _themeState$UNSAFE_th;
+    var brandColor, mode, optionString, uniqueId, themeRamp, themes, tokenMaps;
+    return _regenerator.default.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) || _setGlobalTheme.themeStateDefaults['colorMode'];
+          optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+          uniqueId = (0, _hash.hash)(optionString);
+          themeRamp = (0, _generateCustomColorRamp.generateColors)(brandColor); // outputs object to generate to CSS from
+          themes = [];
+          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 _context.abrupt("return", themes);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _getCustomThemeStyles.apply(this, arguments);
+}
+function loadAndAppendCustomThemeCss(_x2) {
+  return _loadAndAppendCustomThemeCss.apply(this, arguments);
+}
+function _loadAndAppendCustomThemeCss() {
+  _loadAndAppendCustomThemeCss = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeState) {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          getCustomThemeStyles(themeState).then(function (themes) {
+            (0, _customThemeLoadingUtils.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);
+}

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.11.3";
+var version = "1.12.0";
 /**
  * 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/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.11.3";
+var version = "1.12.0";
 /**
  * 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/cjs/set-global-theme.js

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThemeStyles = exports.getThemeHtmlAttrs = exports.getSSRAutoScript = exports.default = void 0;
+exports.themeStateDefaults = exports.getThemeStyles = exports.getThemeHtmlAttrs = exports.getSSRAutoScript = exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -15,8 +16,13 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
+var _colorUtils = require("./utils/color-utils");
+var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _hash = require("./utils/hash");
 var _themeLoading = require("./utils/theme-loading");
 var _themeStateTransformer = require("./utils/theme-state-transformer");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Represents theme state once mounted to the page (auto is hidden from observers)
 
 var defaultColorMode = 'light';
@@ -30,7 +36,8 @@ var themeStateDefaults = {
   light: 'light',
   shape: undefined,
   spacing: undefined,
-  typography: undefined
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
 };
 
 /**
@@ -38,6 +45,7 @@ var themeStateDefaults = {
  * to an event listener listening on the '(prefers-color-scheme: dark)' query
  * @param e The event representing a change in system theme.
  */
+exports.themeStateDefaults = themeStateDefaults;
 var checkNativeListener = function checkNativeListener(e) {
   var element = document.documentElement;
   element.setAttribute(_constants.COLOR_MODE_ATTRIBUTE, e.matches ? 'dark' : 'light');
@@ -78,6 +86,7 @@ var getThemePreferences = function 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.
@@ -88,7 +97,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * ```
  */
 var setGlobalTheme = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
     var _ref2,
       _ref2$colorMode,
       colorMode,
@@ -102,16 +111,18 @@ var setGlobalTheme = /*#__PURE__*/function () {
       spacing,
       _ref2$typography,
       typography,
+      _ref2$UNSAFE_themeOpt,
+      UNSAFE_themeOptions,
       themeLoader,
       themePreferences,
       loadingStrategy,
       themeAttributes,
-      _args2 = arguments;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+      _args3 = arguments;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _ref2 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography;
-          themeLoader = _args2.length > 1 ? _args2[1] : undefined;
+          _ref2 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref2$colorMode = _ref2.colorMode, colorMode = _ref2$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref2$colorMode, _ref2$dark = _ref2.dark, dark = _ref2$dark === void 0 ? themeStateDefaults['dark'] : _ref2$dark, _ref2$light = _ref2.light, light = _ref2$light === void 0 ? themeStateDefaults['light'] : _ref2$light, _ref2$shape = _ref2.shape, shape = _ref2$shape === void 0 ? themeStateDefaults['shape'] : _ref2$shape, _ref2$spacing = _ref2.spacing, spacing = _ref2$spacing === void 0 ? themeStateDefaults['spacing'] : _ref2$spacing, _ref2$typography = _ref2.typography, typography = _ref2$typography === void 0 ? themeStateDefaults['typography'] : _ref2$typography, _ref2$UNSAFE_themeOpt = _ref2.UNSAFE_themeOptions, UNSAFE_themeOptions = _ref2$UNSAFE_themeOpt === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref2$UNSAFE_themeOpt;
+          themeLoader = _args3.length > 1 ? _args3[1] : undefined;
           themePreferences = getThemePreferences({
             colorMode: colorMode,
             dark: dark,
@@ -121,8 +132,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
             typography: typography
           });
           loadingStrategy = themeLoader ? themeLoader : _themeLoading.loadAndAppendThemeCss;
-          _context2.next = 6;
-          return Promise.all(themePreferences.map( /*#__PURE__*/function () {
+          _context3.next = 6;
+          return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
               return _regenerator.default.wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
@@ -140,7 +151,44 @@ var setGlobalTheme = /*#__PURE__*/function () {
             return function (_x) {
               return _ref3.apply(this, arguments);
             };
-          }()));
+          }())), [(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+            var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
+            return _regenerator.default.wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  if (!(!themeLoader && UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
+                    _context2.next = 11;
+                    break;
+                  }
+                  mode = colorMode || themeStateDefaults['colorMode'];
+                  attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, mode);
+                  if (!(attrOfMissingCustomStyles.length === 0)) {
+                    _context2.next = 5;
+                    break;
+                  }
+                  return _context2.abrupt("return", false);
+                case 5:
+                  _context2.next = 7;
+                  return Promise.resolve().then(function () {
+                    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                    './custom-theme'));
+                  });
+                case 7:
+                  _yield$import = _context2.sent;
+                  loadAndAppendCustomThemeCss = _yield$import.loadAndAppendCustomThemeCss;
+                  _context2.next = 11;
+                  return loadAndAppendCustomThemeCss({
+                    colorMode: attrOfMissingCustomStyles.length === 2 ? 'auto' :
+                    // only load the missing custom theme styles
+                    attrOfMissingCustomStyles[0],
+                    UNSAFE_themeOptions: UNSAFE_themeOptions
+                  });
+                case 11:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }))()]));
         case 6:
           if (colorMode === 'auto' && darkModeMql) {
             colorMode = darkModeMql.matches ? 'dark' : 'light';
@@ -159,20 +207,21 @@ var setGlobalTheme = /*#__PURE__*/function () {
             light: light,
             shape: shape,
             spacing: spacing,
-            typography: typography
+            typography: typography,
+            UNSAFE_themeOptions: themeLoader ? undefined : UNSAFE_themeOptions
           });
-          Object.entries(themeAttributes).forEach(function (_ref4) {
-            var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
+          Object.entries(themeAttributes).forEach(function (_ref5) {
+            var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+              key = _ref6[0],
+              value = _ref6[1];
             document.documentElement.setAttribute(key, value);
           });
-          return _context2.abrupt("return", unbindThemeChangeListener);
+          return _context3.abrupt("return", unbindThemeChangeListener);
         case 10:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   }));
   return function setGlobalTheme() {
     return _ref.apply(this, arguments);
@@ -189,15 +238,16 @@ var setGlobalTheme = /*#__PURE__*/function () {
  * @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.
  */
 var getThemeStyles = /*#__PURE__*/function () {
-  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(preferences) {
+  var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(preferences) {
     var themePreferences, results;
-    return _regenerator.default.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regenerator.default.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
           if (preferences === 'all') {
             themePreferences = _themeConfig.themeIdsWithOverrides;
@@ -211,19 +261,19 @@ var getThemeStyles = /*#__PURE__*/function () {
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || themeStateDefaults['typography']
             });
           }
-          _context4.next = 3;
-          return Promise.all(themePreferences.map( /*#__PURE__*/function () {
-            var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(themeId) {
+          _context6.next = 3;
+          return Promise.all([].concat((0, _toConsumableArray2.default)(themePreferences.map( /*#__PURE__*/function () {
+            var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(themeId) {
               var css;
-              return _regenerator.default.wrap(function _callee3$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              return _regenerator.default.wrap(function _callee4$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
                   case 0:
-                    _context3.prev = 0;
-                    _context3.next = 3;
+                    _context4.prev = 0;
+                    _context4.next = 3;
                     return (0, _themeLoading.loadThemeCss)(themeId);
                   case 3:
-                    css = _context3.sent;
-                    return _context3.abrupt("return", {
+                    css = _context4.sent;
+                    return _context4.abrupt("return", {
                       id: themeId,
                       attrs: {
                         'data-theme': themeId
@@ -231,32 +281,70 @@ var getThemeStyles = /*#__PURE__*/function () {
                       css: css
                     });
                   case 7:
-                    _context3.prev = 7;
-                    _context3.t0 = _context3["catch"](0);
-                    return _context3.abrupt("return", undefined);
+                    _context4.prev = 7;
+                    _context4.t0 = _context4["catch"](0);
+                    return _context4.abrupt("return", undefined);
                   case 10:
                   case "end":
-                    return _context3.stop();
+                    return _context4.stop();
                 }
-              }, _callee3, null, [[0, 7]]);
+              }, _callee4, null, [[0, 7]]);
             }));
             return function (_x3) {
-              return _ref7.apply(this, arguments);
+              return _ref8.apply(this, arguments);
             };
-          }()));
+          }())), [
+          // Add custom themes if they're present
+          (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+            var _preferences$UNSAFE_t;
+            var _yield$import2, getCustomThemeStyles, customThemeStyles;
+            return _regenerator.default.wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
+                case 0:
+                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.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))) {
+                    _context5.next = 15;
+                    break;
+                  }
+                  _context5.prev = 1;
+                  _context5.next = 4;
+                  return Promise.resolve().then(function () {
+                    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_atlassian-custom-theme" */
+                    './custom-theme'));
+                  });
+                case 4:
+                  _yield$import2 = _context5.sent;
+                  getCustomThemeStyles = _yield$import2.getCustomThemeStyles;
+                  _context5.next = 8;
+                  return getCustomThemeStyles({
+                    colorMode: (preferences === null || preferences === void 0 ? void 0 : preferences.colorMode) || themeStateDefaults['colorMode'],
+                    UNSAFE_themeOptions: preferences === null || preferences === void 0 ? void 0 : preferences.UNSAFE_themeOptions
+                  });
+                case 8:
+                  customThemeStyles = _context5.sent;
+                  return _context5.abrupt("return", customThemeStyles);
+                case 12:
+                  _context5.prev = 12;
+                  _context5.t0 = _context5["catch"](1);
+                  return _context5.abrupt("return", undefined);
+                case 15:
+                case "end":
+                  return _context5.stop();
+              }
+            }, _callee5, null, [[1, 12]]);
+          }))()]));
         case 3:
-          results = _context4.sent;
-          return _context4.abrupt("return", results.filter(function (theme) {
+          results = _context6.sent;
+          return _context6.abrupt("return", results.flat().filter(function (theme) {
             return theme !== undefined;
           }));
         case 5:
         case "end":
-          return _context4.stop();
+          return _context6.stop();
       }
-    }, _callee4);
+    }, _callee6);
   }));
   return function getThemeStyles(_x2) {
-    return _ref6.apply(this, arguments);
+    return _ref7.apply(this, arguments);
   };
 }();
 
@@ -270,25 +358,28 @@ var getThemeStyles = /*#__PURE__*/function () {
  * @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
  */
 exports.getThemeStyles = getThemeStyles;
 var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
-  var _ref9;
-  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref8$colorMode = _ref8.colorMode,
-    colorMode = _ref8$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref8$colorMode,
-    _ref8$dark = _ref8.dark,
-    dark = _ref8$dark === void 0 ? themeStateDefaults['dark'] : _ref8$dark,
-    _ref8$light = _ref8.light,
-    light = _ref8$light === void 0 ? themeStateDefaults['light'] : _ref8$light,
-    _ref8$shape = _ref8.shape,
-    shape = _ref8$shape === void 0 ? themeStateDefaults['shape'] : _ref8$shape,
-    _ref8$spacing = _ref8.spacing,
-    spacing = _ref8$spacing === void 0 ? themeStateDefaults['spacing'] : _ref8$spacing,
-    _ref8$typography = _ref8.typography,
-    typography = _ref8$typography === void 0 ? themeStateDefaults['typography'] : _ref8$typography;
+  var _result;
+  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref10$colorMode = _ref10.colorMode,
+    colorMode = _ref10$colorMode === void 0 ? themeStateDefaults['colorMode'] : _ref10$colorMode,
+    _ref10$dark = _ref10.dark,
+    dark = _ref10$dark === void 0 ? themeStateDefaults['dark'] : _ref10$dark,
+    _ref10$light = _ref10.light,
+    light = _ref10$light === void 0 ? themeStateDefaults['light'] : _ref10$light,
+    _ref10$shape = _ref10.shape,
+    shape = _ref10$shape === void 0 ? themeStateDefaults['shape'] : _ref10$shape,
+    _ref10$spacing = _ref10.spacing,
+    spacing = _ref10$spacing === void 0 ? themeStateDefaults['spacing'] : _ref10$spacing,
+    _ref10$typography = _ref10.typography,
+    typography = _ref10$typography === void 0 ? themeStateDefaults['typography'] : _ref10$typography,
+    _ref10$UNSAFE_themeOp = _ref10.UNSAFE_themeOptions,
+    UNSAFE_themeOptions = _ref10$UNSAFE_themeOp === void 0 ? themeStateDefaults['UNSAFE_themeOptions'] : _ref10$UNSAFE_themeOp;
   var themePreferences = {
     dark: dark,
     light: light,
@@ -308,7 +399,13 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     };
   }
   var themeAttribute = (0, _themeStateTransformer.themeObjectToString)(themePreferences);
-  return _ref9 = {}, (0, _defineProperty2.default)(_ref9, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_ref9, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref9;
+  var result = (_result = {}, (0, _defineProperty2.default)(_result, _constants.THEME_DATA_ATTRIBUTE, themeAttribute), (0, _defineProperty2.default)(_result, _constants.COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
+  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
+    var optionString = JSON.stringify(UNSAFE_themeOptions);
+    var uniqueId = (0, _hash.hash)(optionString);
+    result[_constants.CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
 };
 
 /**