@atlaskit/tokens 1.11.2 → 1.12.0

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

@@ -6,8 +6,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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';
 
@@ -18,13 +21,14 @@ var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in win
 var darkModeMediaQuery = '(prefers-color-scheme: dark)';
 var darkModeMql = isMatchMediaAvailable && window.matchMedia(darkModeMediaQuery);
 var unbindThemeChangeListener = noop;
-var themeStateDefaults = {
+export var themeStateDefaults = {
   colorMode: 'auto',
   dark: 'dark',
   light: 'light',
   shape: undefined,
   spacing: undefined,
-  typography: undefined
+  typography: undefined,
+  UNSAFE_themeOptions: undefined
 };
 
 /**
@@ -72,6 +76,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.
@@ -82,7 +87,7 @@ var getThemePreferences = function getThemePreferences(themeState) {
  * ```
  */
 var setGlobalTheme = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _ref2,
       _ref2$colorMode,
       colorMode,
@@ -96,16 +101,18 @@ var setGlobalTheme = /*#__PURE__*/function () {
       spacing,
       _ref2$typography,
       typography,
+      _ref2$UNSAFE_themeOpt,
+      UNSAFE_themeOptions,
       themeLoader,
       themePreferences,
       loadingStrategy,
       themeAttributes,
-      _args2 = arguments;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+      _args3 = arguments;
+    return _regeneratorRuntime.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,
@@ -115,8 +122,8 @@ var setGlobalTheme = /*#__PURE__*/function () {
             typography: typography
           });
           loadingStrategy = themeLoader ? themeLoader : loadAndAppendThemeCss;
-          _context2.next = 6;
-          return Promise.all(themePreferences.map( /*#__PURE__*/function () {
+          _context3.next = 6;
+          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
               return _regeneratorRuntime.wrap(function _callee$(_context) {
                 while (1) switch (_context.prev = _context.next) {
@@ -134,7 +141,42 @@ var setGlobalTheme = /*#__PURE__*/function () {
             return function (_x) {
               return _ref3.apply(this, arguments);
             };
-          }()));
+          }())), [_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+            var mode, attrOfMissingCustomStyles, _yield$import, loadAndAppendCustomThemeCss;
+            return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  if (!(!themeLoader && UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor))) {
+                    _context2.next = 11;
+                    break;
+                  }
+                  mode = colorMode || themeStateDefaults['colorMode'];
+                  attrOfMissingCustomStyles = findMissingCustomStyleElements(UNSAFE_themeOptions, mode);
+                  if (!(attrOfMissingCustomStyles.length === 0)) {
+                    _context2.next = 5;
+                    break;
+                  }
+                  return _context2.abrupt("return", false);
+                case 5:
+                  _context2.next = 7;
+                  return import( /* 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';
@@ -153,20 +195,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 = _slicedToArray(_ref4, 2),
-              key = _ref5[0],
-              value = _ref5[1];
+          Object.entries(themeAttributes).forEach(function (_ref5) {
+            var _ref6 = _slicedToArray(_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);
@@ -183,15 +226,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.
  */
 export var getThemeStyles = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(preferences) {
+  var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(preferences) {
     var themePreferences, results;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
           if (preferences === 'all') {
             themePreferences = themeIdsWithOverrides;
@@ -205,19 +249,19 @@ export 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
+          _context6.next = 3;
+          return Promise.all([].concat(_toConsumableArray(themePreferences.map( /*#__PURE__*/function () {
+            var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(themeId) {
               var css;
-              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                while (1) switch (_context3.prev = _context3.next) {
+              return _regeneratorRuntime.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 loadThemeCss(themeId);
                   case 3:
-                    css = _context3.sent;
-                    return _context3.abrupt("return", {
+                    css = _context4.sent;
+                    return _context4.abrupt("return", {
                       id: themeId,
                       attrs: {
                         'data-theme': themeId
@@ -225,32 +269,68 @@ export 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
+          _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+            var _preferences$UNSAFE_t;
+            var _yield$import2, getCustomThemeStyles, customThemeStyles;
+            return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+              while (1) switch (_context5.prev = _context5.next) {
+                case 0:
+                  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))) {
+                    _context5.next = 15;
+                    break;
+                  }
+                  _context5.prev = 1;
+                  _context5.next = 4;
+                  return import( /* 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);
   };
 }();
 
@@ -264,24 +344,27 @@ export 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
  */
 export 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,
@@ -301,7 +384,13 @@ export var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
     };
   }
   var themeAttribute = themeObjectToString(themePreferences);
-  return _ref9 = {}, _defineProperty(_ref9, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_ref9, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _ref9;
+  var result = (_result = {}, _defineProperty(_result, THEME_DATA_ATTRIBUTE, themeAttribute), _defineProperty(_result, COLOR_MODE_ATTRIBUTE, colorMode === 'auto' ? defaultColorMode : colorMode), _result);
+  if (UNSAFE_themeOptions && isValidBrandHex(UNSAFE_themeOptions.brandColor)) {
+    var optionString = JSON.stringify(UNSAFE_themeOptions);
+    var uniqueId = hash(optionString);
+    result[CUSTOM_THEME_ATTRIBUTE] = uniqueId;
+  }
+  return result;
 };
 
 /**

package/dist/esm/tokens/atlassian-dark-new-input-border/color/border.js

@@ -2,7 +2,7 @@ var color = {
   color: {
     border: {
       input: {
-        value: 'DarkNeutral500'
+        value: 'DarkNeutral600'
       }
     }
   }

package/dist/esm/utils/color-utils.js

@@ -0,0 +1,162 @@
+// valid hex color with 6 digits
+export var isValidBrandHex = function isValidBrandHex(hex) {
+  return /^#[0-9A-F]{6}$/i.test(hex);
+};
+
+// valid hex color with 4, 6 or 8 digits
+var isValidHex = function isValidHex(hex) {
+  return /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+};
+export function rgbToHex(r, g, b) {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+export function getAlpha(hex) {
+  if (hex.length === 9) {
+    var int = parseInt(hex.slice(7, 9), 16) / 255;
+    return Number(parseFloat(int.toString()).toFixed(2));
+  }
+  return 1;
+}
+export function hexToRgbA(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var c;
+  c = hex.substring(1).split('');
+  if (c.length === 3) {
+    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  }
+  c = '0x' + c.join('');
+  return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
+}
+export function hexToRgb(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var c;
+  c = hex.substring(1).split('');
+  if (c.length === 3) {
+    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  }
+  c = '0x' + c.join('');
+  return [c >> 16 & 255, c >> 8 & 255, c & 255];
+}
+export function hexToHSL(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = '0x' + hex[1] + hex[1];
+    g = '0x' + hex[2] + hex[2];
+    b = '0x' + hex[3] + hex[3];
+  } else if (hex.length === 7) {
+    r = '0x' + hex[1] + hex[2];
+    g = '0x' + hex[3] + hex[4];
+    b = '0x' + hex[5] + hex[6];
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h = 0,
+    s = 0,
+    l = 0;
+  if (delta === 0) {
+    h = 0;
+  } else if (cmax === r) {
+    h = (g - b) / delta % 6;
+  } else if (cmax === g) {
+    h = (b - r) / delta + 2;
+  } else {
+    h = (r - g) / delta + 4;
+  }
+  h = Math.round(h * 60);
+  if (h < 0) {
+    h += 360;
+  }
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+}
+export function HSLToRGB(h, s, l) {
+  s /= 100;
+  l /= 100;
+  var k = function k(n) {
+    return (n + h / 30) % 12;
+  };
+  var a = s * Math.min(l, 1 - l);
+  var f = function f(n) {
+    return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  };
+  return [255 * f(0), 255 * f(8), 255 * f(4)];
+}
+export function relativeLuminanceW3C(r, g, b) {
+  var RsRGB = r / 255;
+  var GsRGB = g / 255;
+  var BsRGB = b / 255;
+  var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+
+  // For the sRGB colorspace, the relative luminance of a color is defined as:
+  var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  return L;
+}
+export function getContrastRatio(foreground, background) {
+  if (!isValidHex(foreground) || !isValidHex(background)) {
+    throw new Error('Invalid HEX');
+  }
+  var foregroundRgb = hexToRgb(foreground);
+  var backgroundRgb = hexToRgb(background);
+  var foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  var backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+export function deltaE(rgbA, rgbB) {
+  var labA = rgbToLab(rgbA);
+  var labB = rgbToLab(rgbB);
+  var deltaL = labA[0] - labB[0];
+  var deltaA = labA[1] - labB[1];
+  var deltaB = labA[2] - labB[2];
+  var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+  var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+  var deltaC = c1 - c2;
+  var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+  var sc = 1.0 + 0.045 * c1;
+  var sh = 1.0 + 0.015 * c1;
+  var deltaLKlsl = deltaL / 1.0;
+  var deltaCkcsc = deltaC / sc;
+  var deltaHkhsh = deltaH / sh;
+  var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
+  return i < 0 ? 0 : Math.sqrt(i);
+}
+function rgbToLab(rgb) {
+  var r = rgb[0] / 255,
+    g = rgb[1] / 255,
+    b = rgb[2] / 255,
+    x,
+    y,
+    z;
+  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}

package/dist/esm/utils/custom-theme-loading-utils.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import tokens from '../artifacts/token-names';
+import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
+import { hash } from './hash';
+export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
+  var optionString = JSON.stringify(UNSAFE_themeOptions);
+  var uniqueId = hash(optionString);
+  var attrOfMissingCustomStyles = [];
+  (mode === 'auto' ? ['light', 'dark'] : [mode]).forEach(function (themeId) {
+    var element = document.head.querySelector("style[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"));
+    if (element) {
+      // Append the existing custom styles to take precedence over others
+      document.head.appendChild(element);
+    } else {
+      attrOfMissingCustomStyles.push(themeId);
+    }
+  });
+  return attrOfMissingCustomStyles;
+}
+export function limitSizeOfCustomStyleElements(sizeThreshold) {
+  var styleTags = _toConsumableArray(document.head.querySelectorAll("style[".concat(CUSTOM_THEME_ATTRIBUTE, "][").concat(THEME_DATA_ATTRIBUTE, "]")));
+  if (styleTags.length < sizeThreshold) {
+    return;
+  }
+  styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(function (element) {
+    return element.remove();
+  });
+}
+export function reduceTokenMap(tokenMap, themeRamp) {
+  return Object.entries(tokenMap).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    var cssVar = tokens[key];
+    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(themeRamp[value], ";") : acc;
+  }, '');
+}

package/dist/esm/utils/custom-theme-token-contrast-check.js

@@ -0,0 +1,65 @@
+import tokenValuesDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
+import tokenValuesLight from '../artifacts/atlassian-light-token-value-for-contrast-check';
+import { getContrastRatio } from './color-utils';
+export var additionalChecks = [{
+  foreground: 'color.text.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 4.5,
+  updatedTokens: [
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected']
+}, {
+  foreground: 'color.text.selected',
+  backgroundLight: 'color.background.selected',
+  backgroundDark: 'color.background.selected',
+  desiredContrast: 4.5,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  updatedTokens: ['color.text.selected', 'color.icon.selected']
+}, {
+  foreground: 'color.border.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 3,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base toke
+  updatedTokens: ['color.border.brand', 'color.border.selected']
+}, {
+  foreground: 'color.chart.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 3,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered']
+}];
+var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
+  return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
+};
+export var additionalContrastChecker = function additionalContrastChecker(_ref) {
+  var customThemeTokenMap = _ref.customThemeTokenMap,
+    mode = _ref.mode,
+    themeRamp = _ref.themeRamp;
+  var updatedCustomThemeTokenMap = {};
+  var brandTokens = Object.keys(customThemeTokenMap);
+  additionalChecks.forEach(function (pairing) {
+    var backgroundLight = pairing.backgroundLight,
+      backgroundDark = pairing.backgroundDark,
+      foreground = pairing.foreground,
+      desiredContrast = pairing.desiredContrast,
+      updatedTokens = pairing.updatedTokens;
+    var background = mode === 'light' ? backgroundLight : backgroundDark;
+    var foregroundColor = brandTokens.includes(foreground) ? themeRamp[customThemeTokenMap[foreground]] : getColorFromTokenRaw(foreground, mode);
+    var backgroundColor = brandTokens.includes(background) ? themeRamp[customThemeTokenMap[background]] : getColorFromTokenRaw(background, mode);
+    var contrast = getContrastRatio(foregroundColor, backgroundColor);
+    if (contrast <= desiredContrast) {
+      updatedTokens.forEach(function (token) {
+        var rampValue = customThemeTokenMap[token];
+        updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+      });
+    }
+  });
+  return updatedCustomThemeTokenMap;
+};