@atlaskit/tokens 13.0.2 → 13.0.4

package/dist/cjs/get-global-theme.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("./constants");
-var _themeConfig = require("./theme-config");
+var _themeColorModes = require("./theme-color-modes");
 var _themeStateTransformer = require("./theme-state-transformer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isThemeColorMode = function isThemeColorMode(colorMode) {
-  return _themeConfig.themeColorModes.find(function (mode) {
+  return _themeColorModes.themeColorModes.find(function (mode) {
     return mode === colorMode;
   }) !== undefined;
 };

package/dist/cjs/get-theme-html-attrs.js

@@ -10,8 +10,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _themeConfig = require("./theme-config");
 var _themeStateTransformer = require("./theme-state-transformer");
-var _colorUtils = require("./utils/color-utils");
 var _hash = require("./utils/hash");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultColorMode = 'light';
@@ -64,7 +64,7 @@ var getThemeHtmlAttrs = function getThemeHtmlAttrs() {
   if ((0, _platformFeatureFlags.fg)('platform_increased-contrast-themes')) {
     result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, _constants.CONTRAST_MODE_ATTRIBUTE, contrastMode === 'auto' ? defaultContrastMode : contrastMode));
   }
-  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
+  if (UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions.brandColor)) {
     var optionString = JSON.stringify(UNSAFE_themeOptions);
     var uniqueId = (0, _hash.hash)(optionString);
     result[_constants.CUSTOM_THEME_ATTRIBUTE] = uniqueId;

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

@@ -11,9 +11,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
+var _getThemeOverridePreferences = require("./utils/get-theme-override-preferences");
 var _getThemePreferences = require("./utils/get-theme-preferences");
-var _themeLoading = require("./utils/theme-loading");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
+var _loadThemeCss = require("./utils/load-theme-css");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
@@ -60,7 +61,7 @@ var getThemeStyles = /*#__PURE__*/function () {
               typography: (preferences === null || preferences === void 0 ? void 0 : preferences.typography) || _themeConfig.themeStateDefaults['typography']
             };
             themePreferences = (0, _getThemePreferences.getThemePreferences)(themeState);
-            themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
+            themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
           }
           _context3.next = 4;
           return Promise.all([].concat((0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(themePreferences), (0, _toConsumableArray2.default)(themeOverridePreferences)).map( /*#__PURE__*/function () {
@@ -71,7 +72,7 @@ var getThemeStyles = /*#__PURE__*/function () {
                   case 0:
                     _context.prev = 0;
                     _context.next = 3;
-                    return (0, _themeLoading.loadThemeCss)(themeId);
+                    return (0, _loadThemeCss.loadThemeCss)(themeId);
                   case 3:
                     css = _context.sent;
                     return _context.abrupt("return", {
@@ -102,7 +103,7 @@ var getThemeStyles = /*#__PURE__*/function () {
             return _regenerator.default.wrap(function _callee2$(_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
+                  if (!(preferences !== 'all' && preferences !== null && preferences !== void 0 && preferences.UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(preferences === null || preferences === void 0 || (_preferences$UNSAFE_t = preferences.UNSAFE_themeOptions) === null || _preferences$UNSAFE_t === void 0 ? void 0 : _preferences$UNSAFE_t.brandColor))) {
                     _context2.next = 15;
                     break;
                   }

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _customTheme = require("./custom-theme");
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 /**
  * Synchronously generates and applies custom theme styles to the page.
  *
@@ -29,7 +29,7 @@ var UNSAFE_loadCustomThemeStyles = function UNSAFE_loadCustomThemeStyles() {
     _ref$UNSAFE_themeOpti = _ref.UNSAFE_themeOptions,
     UNSAFE_themeOptions = _ref$UNSAFE_themeOpti === void 0 ? _themeConfig.themeStateDefaults['UNSAFE_themeOptions'] : _ref$UNSAFE_themeOpti;
   // Load custom theme styles
-  if (UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+  if (UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
     var attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, colorMode);
     if (attrOfMissingCustomStyles.length !== 0) {
       (0, _customTheme.loadAndAppendCustomThemeCss)({

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

@@ -12,10 +12,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 var _themeConfig = require("./theme-config");
-var _colorUtils = require("./utils/color-utils");
 var _configurePage = _interopRequireDefault(require("./utils/configure-page"));
 var _customThemeLoadingUtils = require("./utils/custom-theme-loading-utils");
+var _getThemeOverridePreferences = require("./utils/get-theme-override-preferences");
 var _getThemePreferences = require("./utils/get-theme-preferences");
+var _isValidBrandHex = require("./utils/is-valid-brand-hex");
 var _themeLoading = require("./utils/theme-loading");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -131,7 +132,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
               return _ref3.apply(this, arguments);
             };
           }()); // Load custom themes if needed
-          if (!themeLoader && UNSAFE_themeOptions && (0, _colorUtils.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
+          if (!themeLoader && UNSAFE_themeOptions && (0, _isValidBrandHex.isValidBrandHex)(UNSAFE_themeOptions === null || UNSAFE_themeOptions === void 0 ? void 0 : UNSAFE_themeOptions.brandColor)) {
             mode = colorMode || _themeConfig.themeStateDefaults['colorMode'];
             attrOfMissingCustomStyles = (0, _customThemeLoadingUtils.findMissingCustomStyleElements)(UNSAFE_themeOptions, mode);
             if (attrOfMissingCustomStyles.length > 0) {
@@ -167,7 +168,7 @@ var setGlobalTheme = /*#__PURE__*/function () {
           return Promise.all(loadingTasks);
         case 11:
           // Load override themes after standard themes
-          themeOverridePreferences = (0, _getThemePreferences.getThemeOverridePreferences)(themeState);
+          themeOverridePreferences = (0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState);
           _iterator = _createForOfIteratorHelper(themeOverridePreferences);
           _context3.prev = 13;
           _iterator.s();

package/dist/cjs/theme-color-modes.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeColorModes = void 0;
+/**
+ * Theme modes: The general purpose of a theme.
+ * This attr is used to apply the appropriate system-preference option
+ * It may also be used as a selector for mode-specific overrides such as light/dark images.
+ * The idea is there may exist many color themes, but every theme must either fit into light or dark.
+ */
+var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];

package/dist/cjs/theme-config.js

@@ -1,10 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeStateDefaults = exports.themeIdsWithOverrides = exports.themeIds = exports.themeColorModes = exports.default = void 0;
+exports.default = void 0;
+Object.defineProperty(exports, "themeColorModes", {
+  enumerable: true,
+  get: function get() {
+    return _themeColorModes.themeColorModes;
+  }
+});
+Object.defineProperty(exports, "themeIds", {
+  enumerable: true,
+  get: function get() {
+    return _themeIds.themeIds;
+  }
+});
+exports.themeStateDefaults = exports.themeIdsWithOverrides = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _themeIds = require("./theme-ids");
+var _themeColorModes = require("./theme-color-modes");
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -28,30 +45,16 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
  * In the future other types may be introduced such as typography.
  */
 
-/**
- * Theme modes: The general purpose of a theme.
- * This attr is used to apply the appropriate system-preference option
- * It may also be used as a selector for mode-specific overrides such as light/dark images.
- * The idea is there may exist many color themes, but every theme must either fit into light or dark.
- */
-var themeColorModes = exports.themeColorModes = ['light', 'dark', 'auto'];
 /**
  * Contrast preferences: The system contrast preference
  */
 var themeContrastModes = ['more', 'no-preference', 'auto'];
-/**
- * Theme ids: The value that will be mounted to the DOM as a data attr
- * For example: `data-theme="light:light dark:dark spacing:spacing"
- *
- * These ids must be kebab case
- */
-var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];
 /**
  * Theme override ids: the equivalent of themeIds for theme overrides.
  * Theme overrides are temporary and there may not be any defined at times.
  */
 var themeOverrideIds = [];
-var themeIdsWithOverrides = exports.themeIdsWithOverrides = [].concat(themeIds, themeOverrideIds);
+var themeIdsWithOverrides = exports.themeIdsWithOverrides = [].concat((0, _toConsumableArray2.default)(_themeIds.themeIds), themeOverrideIds);
 
 /**
  * Theme to use a base. This will create the theme as

package/dist/cjs/theme-ids.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeIds = void 0;
+/**
+ * Theme ids: The value that will be mounted to the DOM as a data attr
+ * For example: `data-theme="light:light dark:dark spacing:spacing"
+ *
+ * These ids must be kebab case
+ */
+var themeIds = exports.themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];

package/dist/cjs/theme-state-transformer.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.themeStringToObject = exports.themeObjectToString = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _themeConfig = require("./theme-config");
+var _themeIds = require("./theme-ids");
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
@@ -16,7 +16,7 @@ var isThemeKind = function isThemeKind(themeKind) {
   }) !== undefined;
 };
 var isThemeIds = function isThemeIds(themeId) {
-  return _themeConfig.themeIds.find(function (id) {
+  return _themeIds.themeIds.find(function (id) {
     return id === themeId;
   }) !== undefined;
 };

package/dist/cjs/utils/color-detection.js

@@ -3,17 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hexToRGBAValues = exports.getBoxShadow = void 0;
-var hexToRGBAValues = exports.hexToRGBAValues = function hexToRGBAValues(hex) {
-  var hexColor = hex.replace('#', '');
-  return {
-    r: parseInt(hexColor.slice(0, 2), 16),
-    g: parseInt(hexColor.slice(2, 4), 16),
-    b: parseInt(hexColor.slice(4, 6), 16),
-    a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
-  };
-};
-
+exports.getBoxShadow = void 0;
+Object.defineProperty(exports, "hexToRGBAValues", {
+  enumerable: true,
+  get: function get() {
+    return _hexToRgbaValues.hexToRGBAValues;
+  }
+});
+var _hexToRgbaValues = require("./hex-to-rgba-values");
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
@@ -25,7 +22,7 @@ var getBoxShadow = exports.getBoxShadow = function getBoxShadow(rawShadow) {
       offset = _ref.offset,
       color = _ref.color,
       opacity = _ref.opacity;
-    var _hexToRGBAValues = hexToRGBAValues(color),
+    var _hexToRGBAValues = (0, _hexToRgbaValues.hexToRGBAValues)(color),
       r = _hexToRGBAValues.r,
       g = _hexToRGBAValues.g,
       b = _hexToRGBAValues.b;

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

@@ -3,35 +3,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HSLToRGB = HSLToRGB;
+Object.defineProperty(exports, "HSLToRGB", {
+  enumerable: true,
+  get: function get() {
+    return _hslToRgb.HSLToRGB;
+  }
+});
 exports.deltaE = deltaE;
-exports.getAlpha = getAlpha;
+Object.defineProperty(exports, "getAlpha", {
+  enumerable: true,
+  get: function get() {
+    return _getAlpha.getAlpha;
+  }
+});
 exports.getContrastRatio = getContrastRatio;
 exports.hexToHSL = hexToHSL;
 exports.hexToRgb = hexToRgb;
 exports.hexToRgbA = hexToRgbA;
-exports.isValidBrandHex = void 0;
-exports.relativeLuminanceW3C = relativeLuminanceW3C;
-exports.rgbToHex = rgbToHex;
-// valid hex color with 6 digits
-var isValidBrandHex = exports.isValidBrandHex = function isValidBrandHex(hex) {
-  return /^#[0-9A-F]{6}$/i.test(hex);
-};
-
+Object.defineProperty(exports, "isValidBrandHex", {
+  enumerable: true,
+  get: function get() {
+    return _isValidBrandHex.isValidBrandHex;
+  }
+});
+Object.defineProperty(exports, "relativeLuminanceW3C", {
+  enumerable: true,
+  get: function get() {
+    return _relativeLuminanceW3C.relativeLuminanceW3C;
+  }
+});
+Object.defineProperty(exports, "rgbToHex", {
+  enumerable: true,
+  get: function get() {
+    return _rgbToHex.rgbToHex;
+  }
+});
+var _getAlpha = require("./get-alpha");
+var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
+var _isValidBrandHex = require("./is-valid-brand-hex");
+var _rgbToHex = require("./rgb-to-hex");
+var _hslToRgb = require("./hsl-to-rgb");
 // 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);
 };
-function rgbToHex(r, g, b) {
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
-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;
-}
 function hexToRgbA(hex) {
   if (!isValidHex(hex)) {
     throw new Error('Invalid HEX');
@@ -42,7 +57,7 @@ function hexToRgbA(hex) {
     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)];
+  return [c >> 16 & 255, c >> 8 & 255, c & 255, (0, _getAlpha.getAlpha)(hex)];
 }
 function hexToRgb(hex) {
   if (!isValidHex(hex)) {
@@ -101,38 +116,14 @@ function hexToHSL(hex) {
   l = +(l * 100).toFixed(1);
   return [h, s, l];
 }
-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)];
-}
-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;
-}
 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]);
+  var foregroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  var backgroundLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
   // calculate the color contrast ratio
   var brightest = Math.max(foregroundLuminance, backgroundLuminance);
   var darkest = Math.min(foregroundLuminance, backgroundLuminance);

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

@@ -5,13 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findMissingCustomStyleElements = findMissingCustomStyleElements;
-exports.limitSizeOfCustomStyleElements = limitSizeOfCustomStyleElements;
+Object.defineProperty(exports, "limitSizeOfCustomStyleElements", {
+  enumerable: true,
+  get: function get() {
+    return _limitSizeOfCustomStyleElements.limitSizeOfCustomStyleElements;
+  }
+});
 exports.reduceTokenMap = reduceTokenMap;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
 var _constants = require("../constants");
 var _hash = require("./hash");
+var _limitSizeOfCustomStyleElements = require("./limit-size-of-custom-style-elements");
 function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
   var optionString = JSON.stringify(UNSAFE_themeOptions);
   var uniqueId = (0, _hash.hash)(optionString);
@@ -27,15 +32,6 @@ function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
   });
   return attrOfMissingCustomStyles;
 }
-function limitSizeOfCustomStyleElements(sizeThreshold) {
-  var styleTags = (0, _toConsumableArray2.default)(Array.from(document.head.querySelectorAll("style[".concat(_constants.CUSTOM_THEME_ATTRIBUTE, "][").concat(_constants.THEME_DATA_ATTRIBUTE, "]"))));
-  if (styleTags.length < sizeThreshold) {
-    return;
-  }
-  styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(function (element) {
-    return element.remove();
-  });
-}
 function reduceTokenMap(tokenMap, themeRamp) {
   return Object.entries(tokenMap).reduce(function (acc, _ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),

package/dist/cjs/utils/generate-custom-color-ramp.js

@@ -4,36 +4,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getClosestColorIndex = exports.generateTokenMapWithContrastCheck = exports.generateTokenMap = exports.generateColors = void 0;
+exports.generateTokenMapWithContrastCheck = exports.generateTokenMap = exports.generateColors = void 0;
+Object.defineProperty(exports, "getClosestColorIndex", {
+  enumerable: true,
+  get: function get() {
+    return _getClosestColorIndex.getClosestColorIndex;
+  }
+});
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _atlassianDarkTokenValueForContrastCheck = _interopRequireDefault(require("../artifacts/atlassian-dark-token-value-for-contrast-check"));
 var _colorUtils = require("./color-utils");
 var _customThemeTokenContrastCheck = require("./custom-theme-token-contrast-check");
+var _getClosestColorIndex = require("./get-closest-color-index");
 var _hctColorUtils = require("./hct-color-utils");
+var _hslToRgb = require("./hsl-to-rgb");
+var _relativeLuminanceW3C = require("./relative-luminance-w3-c");
+var _rgbToHex = require("./rgb-to-hex");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
 var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
-var getClosestColorIndex = exports.getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
-  // Iterate over themeRamp and find whichever color is closest to brandColor
-  var closestColorIndex = 0;
-  var closestColorDistance = null;
-  themeRamp.forEach(function (value, index) {
-    var distance = (0, _colorUtils.deltaE)((0, _colorUtils.hexToRgb)(value), (0, _colorUtils.hexToRgb)(brandColor));
-    if (closestColorDistance === null || distance < closestColorDistance) {
-      closestColorIndex = index;
-      closestColorDistance = distance;
-    }
-  });
-  return closestColorIndex;
-};
 var generateColors = exports.generateColors = function generateColors(brandColor) {
   // Determine luminance
   var HSLBrandColorHue = (0, _colorUtils.hexToHSL)(brandColor)[0];
-  var baseRgb = (0, _colorUtils.HSLToRGB)(HSLBrandColorHue, 100, 60);
-  var isLowLuminance = (0, _colorUtils.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
+  var baseRgb = (0, _hslToRgb.HSLToRGB)(HSLBrandColorHue, 100, 60);
+  var isLowLuminance = (0, _relativeLuminanceW3C.relativeLuminanceW3C)(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
   // Choose right palette
   var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
   var brandRgba = (0, _colorUtils.hexToRgbA)(brandColor);
@@ -46,9 +43,9 @@ var generateColors = exports.generateColors = function generateColors(brandColor
   var themeRamp = themeRatios.map(function (contrast) {
     var rgbaColor = (0, _hctColorUtils.rgbaFromArgb)(_hctColorUtils.Hct.from(hctColor.hue, hctColor.chroma, _hctColorUtils.Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
     ).toInt());
-    return (0, _colorUtils.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
+    return (0, _rgbToHex.rgbToHex)(rgbaColor.r, rgbaColor.g, rgbaColor.b);
   });
-  var closestColorIndex = getClosestColorIndex(themeRamp, brandColor);
+  var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(themeRamp, brandColor);
 
   // Replace closet color with brandColor
   var updatedThemeRamp = (0, _toConsumableArray2.default)(themeRamp);
@@ -84,7 +81,7 @@ var generateTokenMap = exports.generateTokenMap = function generateTokenMap(bran
     ramp = _generateColors.ramp,
     replacedColor = _generateColors.replacedColor;
   var colors = themeRamp || ramp;
-  var closestColorIndex = getClosestColorIndex(colors, brandColor);
+  var closestColorIndex = (0, _getClosestColorIndex.getClosestColorIndex)(colors, brandColor);
   var customThemeTokenMapLight = {};
   var customThemeTokenMapDark = {};
   var inputContrast = (0, _colorUtils.getContrastRatio)(brandColor, '#FFFFFF');

package/dist/cjs/utils/get-alpha.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAlpha = getAlpha;
+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;
+}

package/dist/cjs/utils/get-closest-color-index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClosestColorIndex = void 0;
+var _colorUtils = require("./color-utils");
+var getClosestColorIndex = exports.getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
+  // Iterate over themeRamp and find whichever color is closest to brandColor
+  var closestColorIndex = 0;
+  var closestColorDistance = null;
+  themeRamp.forEach(function (value, index) {
+    var distance = (0, _colorUtils.deltaE)((0, _colorUtils.hexToRgb)(value), (0, _colorUtils.hexToRgb)(brandColor));
+    if (closestColorDistance === null || distance < closestColorDistance) {
+      closestColorIndex = index;
+      closestColorDistance = distance;
+    }
+  });
+  return closestColorIndex;
+};

package/dist/cjs/utils/get-css-custom-property.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCSSCustomProperty = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _constants = require("../constants");
+/**
+ * Transforms a style dictionary token path to a CSS custom property.
+ *
+ * A css prefix will be prepended and all [default] key words will be omitted
+ * from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty('color.background.bold.[default]')
+ */
+var getCSSCustomProperty = exports.getCSSCustomProperty = function getCSSCustomProperty(path) {
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
+
+  // Opacity and other 'shallow' groups are more readable when not trimmed
+  var slice = _constants.CSS_VAR_FULL.includes(normalizedPath[0]) ? 0 : 1;
+  return "--".concat([_constants.CSS_PREFIX].concat((0, _toConsumableArray2.default)(normalizedPath.slice(slice))).filter(function (el) {
+    return el !== '[default]';
+  }).join('-'));
+};

package/dist/cjs/utils/get-fully-qualified-token-id.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFullyQualifiedTokenId = void 0;
+/**
+ * Transforms a style dictionary token path to a fully qualified token id
+ * These Ids are intended to be used internal to this package by style-dictionary
+ *
+ * [default] key words will NOT be omitted from the path
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold.[default]
+ * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
+ */
+var getFullyQualifiedTokenId = exports.getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
+  return path.join('.');
+};

package/dist/cjs/utils/get-theme-override-preferences.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getThemeOverridePreferences = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var getThemeOverridePreferences = exports.getThemeOverridePreferences = function getThemeOverridePreferences(_themeState) {
+  var themeOverridePreferences = [];
+  return (0, _toConsumableArray2.default)(new Set(themeOverridePreferences));
+};

package/dist/cjs/utils/get-theme-preferences.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThemePreferences = exports.getThemeOverridePreferences = void 0;
+Object.defineProperty(exports, "getThemeOverridePreferences", {
+  enumerable: true,
+  get: function get() {
+    return _getThemeOverridePreferences.getThemeOverridePreferences;
+  }
+});
+exports.getThemePreferences = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getIncreasedContrastTheme = _interopRequireDefault(require("./get-increased-contrast-theme"));
+var _getThemeOverridePreferences = require("./get-theme-override-preferences");
 var getThemePreferences = exports.getThemePreferences = function getThemePreferences(themeState) {
   var colorMode = themeState.colorMode,
     contrastMode = themeState.contrastMode,
@@ -44,8 +51,4 @@ var getThemePreferences = exports.getThemePreferences = function getThemePrefere
     }
   });
   return (0, _toConsumableArray2.default)(new Set(themePreferences));
-};
-var getThemeOverridePreferences = exports.getThemeOverridePreferences = function getThemeOverridePreferences(_themeState) {
-  var themeOverridePreferences = [];
-  return (0, _toConsumableArray2.default)(new Set(themeOverridePreferences));
 };