@atlaskit/tokens 13.0.3 → 13.0.4

package/dist/es2019/utils/hct-color-utils/math-utils.js

@@ -1,105 +1,6 @@
-/**
- * Below lines are copied from @material/material-color-utilities.
- * Do not modify it.
- */
-
-/**
- * @license
- * Copyright 2021 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// This file is automatically generated. Do not modify it.
-
-/**
- * Utility methods for mathematical operations.
- */
-
-/**
- * The signum function.
- *
- * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
- */
-export function signum(num) {
-  if (num < 0) {
-    return -1;
-  } else if (num === 0) {
-    return 0;
-  } else {
-    return 1;
-  }
-}
-
-/**
- * The linear interpolation function.
- *
- * @return start if amount = 0 and stop if amount = 1
- */
-export function lerp(start, stop, amount) {
-  return (1.0 - amount) * start + amount * stop;
-}
-
-/**
- * Clamps an integer between two integers.
- *
- * @return input when min <= input <= max, and either min or max
- * otherwise.
- */
-export function clampInt(min, max, input) {
-  if (input < min) {
-    return min;
-  } else if (input > max) {
-    return max;
-  }
-  return input;
-}
-
-/**
- * Clamps an integer between two floating-point numbers.
- *
- * @return input when min <= input <= max, and either min or max
- * otherwise.
- */
-export function clampDouble(min, max, input) {
-  if (input < min) {
-    return min;
-  } else if (input > max) {
-    return max;
-  }
-  return input;
-}
-
-/**
- * Sanitizes a degree measure as a floating-point number.
- *
- * @return a degree measure between 0.0 (inclusive) and 360.0
- * (exclusive).
- */
-export function sanitizeDegreesDouble(degrees) {
-  degrees = degrees % 360.0;
-  if (degrees < 0) {
-    degrees = degrees + 360.0;
-  }
-  return degrees;
-}
-
-/**
- * Multiplies a 1x3 row vector with a 3x3 matrix.
- */
-export function matrixMultiply(row, matrix) {
-  const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
-  const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
-  const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
-  return [a, b, c];
-}
+export { signum } from './signum';
+export { lerp } from './lerp';
+export { clampInt } from './clamp-int';
+export { clampDouble } from './clamp-double';
+export { sanitizeDegreesDouble } from './sanitize-degrees-double';
+export { matrixMultiply } from './matrix-multiply';

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

@@ -0,0 +1,9 @@
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+export function matrixMultiply(row, matrix) {
+  const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees) {
+  degrees = degrees % 360.0;
+  if (degrees < 0) {
+    degrees = degrees + 360.0;
+  }
+  return degrees;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num) {
+  if (num < 0) {
+    return -1;
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return 1;
+  }
+}

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

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _ViewingConditions;
+import * as utils from './color-utils';
+import * as math from './math-utils';
+export class ViewingConditions {
+  /**
+   * 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.
+   */
+  static make(whitePoint = utils.whitePointD65(), adaptingLuminance = 200.0 / Math.PI * utils.yFromLstar(50.0) / 100.0, backgroundLstar = 50.0, surround = 2.0, discountingIlluminant = false) {
+    const xyz = whitePoint;
+    const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
+    const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
+    const bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
+    const f = 0.8 + surround / 10.0;
+    const 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);
+    let 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;
+    const nc = f;
+    const rgbD = [d * (100.0 / rW) + 1.0 - d, d * (100.0 / gW) + 1.0 - d, d * (100.0 / bW) + 1.0 - d];
+    const k = 1.0 / (5.0 * adaptingLuminance + 1.0);
+    const k4 = k * k * k * k;
+    const k4F = 1.0 - k4;
+    const fl = k4 * adaptingLuminance + 0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
+    const n = utils.yFromLstar(backgroundLstar) / whitePoint[1];
+    const z = 1.48 + Math.sqrt(n);
+    const nbb = 0.725 / Math.pow(n, 0.2);
+    const ncb = nbb;
+    const 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)];
+    const 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)];
+    const 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.
+   */
+
+  constructor(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
+    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;
+  }
+}
+_ViewingConditions = ViewingConditions;
+/**
+ * sRGB-like viewing conditions.
+ */
+_defineProperty(ViewingConditions, "DEFAULT", _ViewingConditions.make());

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

@@ -0,0 +1,9 @@
+export const hexToRGBAValues = hex => {
+  const 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/es2019/utils/hsl-to-rgb.js

@@ -0,0 +1,8 @@
+export function HSLToRGB(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const k = n => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = n => 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/es2019/utils/is-valid-brand-hex.js

@@ -0,0 +1 @@
+export const isValidBrandHex = hex => /^#[0-9A-F]{6}$/i.test(hex);

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

@@ -0,0 +1,8 @@
+import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
+export function limitSizeOfCustomStyleElements(sizeThreshold) {
+  const styleTags = Array.from(document.head.querySelectorAll(`style[${CUSTOM_THEME_ATTRIBUTE}][${THEME_DATA_ATTRIBUTE}]`));
+  if (styleTags.length < sizeThreshold) {
+    return;
+  }
+  styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(element => element.remove());
+}

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

@@ -0,0 +1,7 @@
+import themeImportMap from '../artifacts/theme-import-map';
+export const loadThemeCss = async themeId => {
+  const {
+    default: themeCss
+  } = await themeImportMap[themeId]();
+  return themeCss;
+};

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

@@ -0,0 +1,12 @@
+export function relativeLuminanceW3C(r, g, b) {
+  const RsRGB = r / 255;
+  const GsRGB = g / 255;
+  const BsRGB = b / 255;
+  const R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  const G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  const 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:
+  const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  return L;
+}

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

@@ -0,0 +1,3 @@
+export function rgbToHex(r, g, b) {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}

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

@@ -1,5 +1,5 @@
-import themeImportMap from '../artifacts/theme-import-map';
 import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
+import { loadThemeCss } from './load-theme-css';
 export const loadAndAppendThemeCss = async themeId => {
   if (document.head.querySelector(`style[${THEME_DATA_ATTRIBUTE}="${themeId}"]:not([${CUSTOM_THEME_ATTRIBUTE}])`)) {
     return;
@@ -16,11 +16,6 @@ export const loadAndAppendThemeCss = async themeId => {
   style.dataset.theme = themeId;
   document.head.appendChild(style);
 };
-export const loadThemeCss = async themeId => {
-  const {
-    default: themeCss
-  } = await themeImportMap[themeId]();
-  return themeCss;
-};
 export const darkModeMediaQuery = '(prefers-color-scheme: dark)';
-export const moreContrastMediaQuery = '(prefers-contrast: more)';
+export const moreContrastMediaQuery = '(prefers-contrast: more)';
+export { loadThemeCss } from './load-theme-css';

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

@@ -1,54 +1,3 @@
-import { CSS_PREFIX, CSS_VAR_FULL } from '../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]')
- */
-export const getCSSCustomProperty = path => {
-  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
-
-  // Opacity and other 'shallow' groups are more readable when not trimmed
-  const slice = CSS_VAR_FULL.includes(normalizedPath[0]) ? 0 : 1;
-  return `--${[CSS_PREFIX, ...normalizedPath.slice(slice)].filter(el => 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]')
- */
-export const getTokenId = path => {
-  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
-  return normalizedPath.filter(el => 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]'])
- */
-export const getFullyQualifiedTokenId = path => path.join('.');
+export { getCSSCustomProperty } from './get-css-custom-property';
+export { getTokenId } from './get-token-id';
+export { getFullyQualifiedTokenId } from './get-fully-qualified-token-id';

package/dist/esm/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
  */
 
-var replacementMapper = [];
+var replacementMapper = [{
+  "path": "motion.easing.spring",
+  "state": "experimental"
+}];
 export default replacementMapper;

package/dist/esm/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 @@ var 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 @@ var 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/esm/custom-theme.js

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

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

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 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';
 var isThemeColorMode = function isThemeColorMode(colorMode) {
   return themeColorModes.find(function (mode) {

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

@@ -5,8 +5,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';
 var defaultColorMode = 'light';
 var defaultContrastMode = 'no-preference';
 

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

@@ -3,9 +3,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { themeIdsWithOverrides, themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
-import { getThemeOverridePreferences, getThemePreferences } from './utils/get-theme-preferences';
-import { loadThemeCss } from './utils/theme-loading';
+import { getThemeOverridePreferences } from './utils/get-theme-override-preferences';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
+import { loadThemeCss } from './utils/load-theme-css';
 /**
  * Takes an object containing theme preferences, and returns an array of objects for use in applying 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.

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

@@ -1,7 +1,7 @@
 import { loadAndAppendCustomThemeCss } from './custom-theme';
 import { themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 
 /**
  * Synchronously generates and applies custom theme styles to the page.

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

@@ -9,10 +9,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { fg } from '@atlaskit/platform-feature-flags';
 import getGlobalTheme from './get-global-theme';
 import { themeStateDefaults } from './theme-config';
-import { isValidBrandHex } from './utils/color-utils';
 import configurePage from './utils/configure-page';
 import { findMissingCustomStyleElements } from './utils/custom-theme-loading-utils';
-import { getThemeOverridePreferences, getThemePreferences } from './utils/get-theme-preferences';
+import { getThemeOverridePreferences } from './utils/get-theme-override-preferences';
+import { getThemePreferences } from './utils/get-theme-preferences';
+import { isValidBrandHex } from './utils/is-valid-brand-hex';
 import { loadAndAppendThemeCss } from './utils/theme-loading';
 
 /**

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export var themeColorModes = ['light', 'dark', 'auto'];