@atlaskit/tokens 13.0.3 → 13.0.4

package/dist/cjs/utils/hct-color-utils/matrix-multiply.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.matrixMultiply = matrixMultiply;
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+function matrixMultiply(row, matrix) {
+  var a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  var b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  var c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

package/dist/cjs/utils/hct-color-utils/sanitize-degrees-double.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeDegreesDouble = sanitizeDegreesDouble;
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+function sanitizeDegreesDouble(degrees) {
+  degrees = degrees % 360.0;
+  if (degrees < 0) {
+    degrees = degrees + 360.0;
+  }
+  return degrees;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.signum = signum;
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+function signum(num) {
+  if (num < 0) {
+    return -1;
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return 1;
+  }
+}

package/dist/cjs/utils/hct-color-utils/viewing-conditions.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewingConditions = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var utils = _interopRequireWildcard(require("./color-utils"));
+var math = _interopRequireWildcard(require("./math-utils"));
+var _ViewingConditions;
+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); }
+var ViewingConditions = exports.ViewingConditions = /*#__PURE__*/function () {
+  function ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
+    (0, _classCallCheck2.default)(this, ViewingConditions);
+    this.n = n;
+    this.aw = aw;
+    this.nbb = nbb;
+    this.ncb = ncb;
+    this.c = c;
+    this.nc = nc;
+    this.rgbD = rgbD;
+    this.fl = fl;
+    this.fLRoot = fLRoot;
+    this.z = z;
+  }
+  return (0, _createClass2.default)(ViewingConditions, null, [{
+    key: "make",
+    value:
+    /**
+     * Create ViewingConditions from a simple, physically relevant, set of
+     * parameters.
+     *
+     * @param whitePoint White point, measured in the XYZ color space.
+     *     default = D65, or sunny day afternoon
+     * @param adaptingLuminance The luminance of the adapting field. Informally,
+     *     how bright it is in the room where the color is viewed. Can be
+     *     calculated from lux by multiplying lux by 0.0586. default = 11.72,
+     *     or 200 lux.
+     * @param backgroundLstar The lightness of the area surrounding the color.
+     *     measured by L* in L*a*b*. default = 50.0
+     * @param surround A general description of the lighting surrounding the
+     *     color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
+     *     dimly light room, like watching TV at home at night. 2.0 means there
+     *     is no difference between the lighting on the color and around it.
+     *     default = 2.0
+     * @param discountingIlluminant Whether the eye accounts for the tint of the
+     *     ambient lighting, such as knowing an apple is still red in green light.
+     *     default = false, the eye does not perform this process on
+     *       self-luminous objects like displays.
+     */
+    function make() {
+      var whitePoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utils.whitePointD65();
+      var adaptingLuminance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0;
+      var backgroundLstar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50.0;
+      var surround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2.0;
+      var discountingIlluminant = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      var xyz = whitePoint;
+      var rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
+      var gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
+      var bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
+      var f = 0.8 + surround / 10.0;
+      var c = f >= 0.9 ? math.lerp(0.59, 0.69, (f - 0.9) * 10.0) : math.lerp(0.525, 0.59, (f - 0.8) * 10.0);
+      var d = discountingIlluminant ? 1.0 : f * (1.0 - 1.0 / 3.6 * Math.exp((-adaptingLuminance - 42.0) / 92.0));
+      d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
+      var nc = f;
+      var rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
+      var k = 1.0 / (5.0 * adaptingLuminance + 1.0);
+      var k4 = k * k * k * k;
+      var k4F = 1.0 - k4;
+      var fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
+      var n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
+      var z = 1.48 + Math.sqrt(n);
+      var nbb = 0.725 / Math.pow(n, 0.2);
+      var ncb = nbb;
+      var rgbAFactors = [Math.pow(fl * rgbD[0] * rW / 100.0, 0.42), Math.pow(fl * rgbD[1] * gW / 100.0, 0.42), Math.pow(fl * rgbD[2] * bW / 100.0, 0.42)];
+      var rgbA = [400.0 * rgbAFactors[0] / (rgbAFactors[0] + 27.13), 400.0 * rgbAFactors[1] / (rgbAFactors[1] + 27.13), 400.0 * rgbAFactors[2] / (rgbAFactors[2] + 27.13)];
+      var aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
+      return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
+    }
+
+    /**
+     * Parameters are intermediate values of the CAM16 conversion process. Their
+     * names are shorthand for technical color science terminology, this class
+     * would not benefit from documenting them individually. A brief overview
+     * is available in the CAM16 specification, and a complete overview requires
+     * a color science textbook, such as Fairchild's Color Appearance Models.
+     */
+  }]);
+}();
+_ViewingConditions = ViewingConditions;
+/**
+ * sRGB-like viewing conditions.
+ */
+(0, _defineProperty2.default)(ViewingConditions, "DEFAULT", _ViewingConditions.make());

package/dist/cjs/utils/hex-to-rgba-values.js

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

package/dist/cjs/utils/hsl-to-rgb.js

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

package/dist/cjs/utils/is-valid-brand-hex.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidBrandHex = void 0;
+var isValidBrandHex = exports.isValidBrandHex = function isValidBrandHex(hex) {
+  return /^#[0-9A-F]{6}$/i.test(hex);
+};

package/dist/cjs/utils/limit-size-of-custom-style-elements.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.limitSizeOfCustomStyleElements = limitSizeOfCustomStyleElements;
+var _constants = require("../constants");
+function limitSizeOfCustomStyleElements(sizeThreshold) {
+  var styleTags = 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();
+  });
+}

package/dist/cjs/utils/load-theme-css.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadThemeCss = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
+var loadThemeCss = exports.loadThemeCss = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
+    var _yield$themeImportMap, themeCss;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return _themeImportMap.default[themeId]();
+        case 2:
+          _yield$themeImportMap = _context.sent;
+          themeCss = _yield$themeImportMap.default;
+          return _context.abrupt("return", themeCss);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function loadThemeCss(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/cjs/utils/relative-luminance-w3-c.js

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

package/dist/cjs/utils/rgb-to-hex.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgbToHex = rgbToHex;
+function rgbToHex(r, g, b) {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}

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

@@ -4,11 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moreContrastMediaQuery = exports.loadThemeCss = exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
+exports.loadAndAppendThemeCss = exports.darkModeMediaQuery = void 0;
+Object.defineProperty(exports, "loadThemeCss", {
+  enumerable: true,
+  get: function get() {
+    return _loadThemeCss.loadThemeCss;
+  }
+});
+exports.moreContrastMediaQuery = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
 var _constants = require("../constants");
+var _loadThemeCss = require("./load-theme-css");
 var loadAndAppendThemeCss = exports.loadAndAppendThemeCss = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
     var themeCss, style;
@@ -28,7 +35,7 @@ var loadAndAppendThemeCss = exports.loadAndAppendThemeCss = /*#__PURE__*/functio
           return _context.abrupt("return");
         case 4:
           _context.next = 6;
-          return loadThemeCss(themeId);
+          return (0, _loadThemeCss.loadThemeCss)(themeId);
         case 6:
           themeCss = _context.sent;
           style = document.createElement('style');
@@ -45,27 +52,5 @@ var loadAndAppendThemeCss = exports.loadAndAppendThemeCss = /*#__PURE__*/functio
     return _ref.apply(this, arguments);
   };
 }();
-var loadThemeCss = exports.loadThemeCss = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeId) {
-    var _yield$themeImportMap, themeCss;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.next = 2;
-          return _themeImportMap.default[themeId]();
-        case 2:
-          _yield$themeImportMap = _context2.sent;
-          themeCss = _yield$themeImportMap.default;
-          return _context2.abrupt("return", themeCss);
-        case 5:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  }));
-  return function loadThemeCss(_x2) {
-    return _ref2.apply(this, arguments);
-  };
-}();
 var darkModeMediaQuery = exports.darkModeMediaQuery = '(prefers-color-scheme: dark)';
 var moreContrastMediaQuery = exports.moreContrastMediaQuery = '(prefers-contrast: more)';

package/dist/cjs/utils/token-ids.js

@@ -1,67 +1,26 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTokenId = exports.getFullyQualifiedTokenId = 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('-'));
-};
-
-/**
- * Transforms a style dictionary token path to a shorthand token id
- * These ids will be typically be how tokens are interacted with via typescript and css
- *
- * All [default] key words will be omitted from the path
- *
- * @example <caption>Passing a path as an array</caption>
- * // Returns color.background.bold
- * getTokenId(['color', 'background', 'bold', '[default]'])
- *
- * @example <caption>Passing a path as a string</caption>
- * // Returns color.background.bold
- * getTokenId('color.background.bold.[default]')
- */
-var getTokenId = exports.getTokenId = function getTokenId(path) {
-  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
-  return normalizedPath.filter(function (el) {
-    return el !== '[default]';
-  }).join('.');
-};
-
-/**
- * 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('.');
-};
+Object.defineProperty(exports, "getCSSCustomProperty", {
+  enumerable: true,
+  get: function get() {
+    return _getCssCustomProperty.getCSSCustomProperty;
+  }
+});
+Object.defineProperty(exports, "getFullyQualifiedTokenId", {
+  enumerable: true,
+  get: function get() {
+    return _getFullyQualifiedTokenId.getFullyQualifiedTokenId;
+  }
+});
+Object.defineProperty(exports, "getTokenId", {
+  enumerable: true,
+  get: function get() {
+    return _getTokenId.getTokenId;
+  }
+});
+var _getCssCustomProperty = require("./get-css-custom-property");
+var _getTokenId = require("./get-token-id");
+var _getFullyQualifiedTokenId = require("./get-fully-qualified-token-id");

package/dist/es2019/artifacts/replacement-mapping.js

@@ -12,9 +12,12 @@
  * These changes will then be picked up by our tooling which will attempt to
  * migrate as many of these renames as possible.
  *
- * @codegen <<SignedSource::c779b40628532228cae2ec34977f1f8e>>
+ * @codegen <<SignedSource::047b57f2d22a7675431a9f6acb147bf6>>
  * @codegenCommand yarn build tokens
  */
 
-const replacementMapper = [];
+const replacementMapper = [{
+  "path": "motion.easing.spring",
+  "state": "experimental"
+}];
 export default replacementMapper;

package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f86ddd91a5d48fe256274c50f5d73493>>
+ * @codegen <<SignedSource::33ce7f44e704e6b32332ffdfac5776e4>>
  * @codegenCommand yarn build tokens
  */
 
@@ -421,7 +421,7 @@ const tokens = [{
 }, {
   "attributes": {
     "group": "motionEasing",
-    "state": "active",
+    "state": "experimental",
     "introduced": "11.5.0",
     "description": "A spring curve that overshoots slightly before settling. Use for playful, tactile feedback on small branded elements such as avatar hover, where the slight overshoot reinforces a sense of life."
   },
@@ -431,7 +431,7 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "motionEasing",
-      "state": "active",
+      "state": "experimental",
       "introduced": "11.5.0",
       "description": "A spring curve that overshoots slightly before settling. Use for playful, tactile feedback on small branded elements such as avatar hover, where the slight overshoot reinforces a sense of life."
     },

package/dist/es2019/custom-theme.js

@@ -1,69 +1,6 @@
-import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
-import { themeStateDefaults } from './theme-config';
-import { limitSizeOfCustomStyleElements, reduceTokenMap } from './utils/custom-theme-loading-utils';
-import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
-import { hash } from './utils/hash';
+import { getCustomThemeStyles } from './get-custom-theme-styles';
+import { limitSizeOfCustomStyleElements } from './utils/limit-size-of-custom-style-elements';
 export const CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD = 10;
-
-/**
- *
- * @param themeSchema The schema of available themes
- * @returns a string with the CSS for the custom theme
- */
-/**
- * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.
- * Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
- *
- * @param {Object<string, string>} themeState The themes and color mode that should be applied.
- * @param {string} themeState.colorMode Determines which color theme is applied
- * @param {Object} themeState.UNSAFE_themeOptions The custom branding options to be used for custom theme generation
- *
- * @returns An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
- * If an error is encountered while loading themes, the themes array will be empty.
- */
-export function getCustomThemeStyles(themeState) {
-  var _themeState$UNSAFE_th;
-  const brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
-  const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
-  const optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
-  const uniqueId = hash(optionString);
-  const themeRamp = generateColors(brandColor).ramp;
-
-  // outputs object to generate to CSS from
-  const themes = [];
-  const tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
-  if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
-    // Light mode theming
-    themes.push({
-      id: 'light',
-      attrs: {
-        'data-theme': 'light',
-        'data-custom-theme': uniqueId
-      },
-      css: `
-html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="light"][data-theme~="light:light"] {
-  /* Branded tokens */
-    ${reduceTokenMap(tokenMaps.light, themeRamp)}
-}`
-    });
-  }
-  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
-    // Dark mode theming
-    themes.push({
-      id: 'dark',
-      attrs: {
-        'data-theme': 'dark',
-        'data-custom-theme': uniqueId
-      },
-      css: `
-html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][data-theme~="dark:dark"] {
-  /* Branded tokens */
-    ${reduceTokenMap(tokenMaps.dark, themeRamp)}
-}`
-    });
-  }
-  return themes;
-}
 export function loadAndAppendCustomThemeCss(themeState) {
   const themes = getCustomThemeStyles(themeState);
   limitSizeOfCustomStyleElements(CUSTOM_STYLE_ELEMENTS_SIZE_THRESHOLD);
@@ -74,4 +11,5 @@ export function loadAndAppendCustomThemeCss(themeState) {
     styleTag.dataset.customTheme = theme.attrs['data-custom-theme'];
     styleTag.textContent = theme.css;
   });
-}
+}
+export { getCustomThemeStyles } from './get-custom-theme-styles';

package/dist/es2019/entry-points/token-metadata.codegen.js

@@ -3,7 +3,7 @@
  *
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
  *
- * @codegen <<SignedSource::84f21045f3136acc13a56a289840c82a>>
+ * @codegen <<SignedSource::8a97395137b2eee0fedb0ac95a7a2528>>
  * @codegenCommand yarn build tokens
  */
 
@@ -160,15 +160,6 @@ export const tokens = [{
     usage: '',
     cssProperties: []
   }
-}, {
-  name: 'motion.easing.spring',
-  path: ['motion', 'easing', 'spring'],
-  description: 'A spring curve that overshoots slightly before settling. Use for playful, tactile feedback on small branded elements such as avatar hover, where the slight overshoot reinforces a sense of life.',
-  exampleValue: 'linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)',
-  usageGuidelines: {
-    usage: '',
-    cssProperties: []
-  }
 }, {
   name: 'motion.flag.enter',
   path: ['motion', 'flag', 'enter'],

package/dist/es2019/get-custom-theme-styles.js

@@ -0,0 +1,60 @@
+import { COLOR_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE } from './constants';
+import { themeStateDefaults } from './theme-config';
+import { reduceTokenMap } from './utils/custom-theme-loading-utils';
+import { generateColors, generateTokenMapWithContrastCheck } from './utils/generate-custom-color-ramp';
+import { hash } from './utils/hash';
+
+/**
+ * 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 An object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
+ * If an error is encountered while loading themes, the themes array will be empty.
+ */
+export function getCustomThemeStyles(themeState) {
+  var _themeState$UNSAFE_th;
+  const brandColor = themeState === null || themeState === void 0 ? void 0 : (_themeState$UNSAFE_th = themeState.UNSAFE_themeOptions) === null || _themeState$UNSAFE_th === void 0 ? void 0 : _themeState$UNSAFE_th.brandColor;
+  const mode = (themeState === null || themeState === void 0 ? void 0 : themeState.colorMode) || themeStateDefaults['colorMode'];
+  const optionString = JSON.stringify(themeState === null || themeState === void 0 ? void 0 : themeState.UNSAFE_themeOptions);
+  const uniqueId = hash(optionString);
+  const themeRamp = generateColors(brandColor).ramp;
+
+  // outputs object to generate to CSS from
+  const themes = [];
+  const tokenMaps = generateTokenMapWithContrastCheck(brandColor, mode, themeRamp);
+  if ((mode === 'light' || mode === 'auto') && tokenMaps.light) {
+    // Light mode theming
+    themes.push({
+      id: 'light',
+      attrs: {
+        'data-theme': 'light',
+        'data-custom-theme': uniqueId
+      },
+      css: `
+html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="light"][data-theme~="light:light"] {
+  /* Branded tokens */
+    ${reduceTokenMap(tokenMaps.light, themeRamp)}
+}`
+    });
+  }
+  if ((mode === 'dark' || mode === 'auto') && tokenMaps.dark) {
+    // Dark mode theming
+    themes.push({
+      id: 'dark',
+      attrs: {
+        'data-theme': 'dark',
+        'data-custom-theme': uniqueId
+      },
+      css: `
+html[${CUSTOM_THEME_ATTRIBUTE}="${uniqueId}"][${COLOR_MODE_ATTRIBUTE}="dark"][data-theme~="dark:dark"] {
+  /* Branded tokens */
+    ${reduceTokenMap(tokenMaps.dark, themeRamp)}
+}`
+    });
+  }
+  return themes;
+}

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

@@ -1,5 +1,5 @@
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
-import { themeColorModes } from './theme-config';
+import { themeColorModes } from './theme-color-modes';
 import { themeStringToObject } from './theme-state-transformer';
 const isThemeColorMode = colorMode => {
   return themeColorModes.find(mode => mode === colorMode) !== undefined;

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

@@ -2,8 +2,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, CONTRAST_MODE_ATTRIBUTE, CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import { themeStateDefaults } from './theme-config';
 import { themeObjectToString } from './theme-state-transformer';
-import { isValidBrandHex } from './utils/color-utils';
 import { hash } from './utils/hash';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 const defaultColorMode = 'light';
 const defaultContrastMode = 'no-preference';