@atlaskit/tokens 13.0.3 → 13.1.0

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/constants.js

@@ -6,4 +6,5 @@ export const CUSTOM_THEME_ATTRIBUTE = 'data-custom-theme';
 export const CSS_PREFIX = 'ds';
 export const CSS_VAR_FULL = ['opacity', 'font', 'space', 'border', 'radius'];
 export const TOKEN_NOT_FOUND_CSS_VAR = `--${CSS_PREFIX}-token-not-found`;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const CURRENT_SURFACE_CSS_VAR = `--${CSS_PREFIX}-elevation-surface-current`;

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::ecdf4f84ae7b36849943b200af52ee54>>
  * @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'],
@@ -2324,7 +2315,7 @@ export const tokens = [{
   name: 'color.background.disabled',
   path: ['color', 'background', 'disabled'],
   description: 'Use for backgrounds of elements in a disabled state.',
-  exampleValue: '#17171708',
+  exampleValue: '#0515240F',
   usageGuidelines: {
     usage: 'The color for backgrounds. Use for areas behind content (e.g. color.background.neutral, color.background.selected)',
     cssProperties: ['background-color']

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';
 

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

@@ -1,8 +1,9 @@
 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/es2019/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/es2019/set-global-theme.js

@@ -1,10 +1,11 @@
 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/es2019/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 const themeColorModes = ['light', 'dark', 'auto'];

package/dist/es2019/theme-config.js

@@ -1,5 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags';
-
+import { themeIds } from './theme-ids';
 /**
  * This file contains the source of truth for themes and all associated meta data.
  */
@@ -23,24 +23,10 @@ import { fg } from '@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.
- */
-export const themeColorModes = ['light', 'dark', 'auto'];
 /**
  * Contrast preferences: The system contrast preference
  */
 const 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
- */
-export const 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.
@@ -189,6 +175,7 @@ function getMotionDefault() {
 /**
  * themeStateDefaults: the default values for ThemeState used by theming utilities
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const themeStateDefaults = {
   colorMode: 'auto',
   contrastMode: 'auto',
@@ -206,4 +193,7 @@ export const themeStateDefaults = {
  * (the page doesn't have an "auto" color mode, it's either light or dark)
  */
 
-export default themeConfig;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export default themeConfig;
+export { themeColorModes } from './theme-color-modes';
+export { themeIds } from './theme-ids';

package/dist/es2019/theme-ids.js

@@ -0,0 +1,7 @@
+/**
+ * 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
+ */
+export const themeIds = ['light-increased-contrast', 'light', 'light-future', 'dark', 'dark-future', 'dark-increased-contrast', 'spacing', 'shape', 'typography', 'motion'];

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

@@ -1,4 +1,4 @@
-import { themeIds } from './theme-config';
+import { themeIds } from './theme-ids';
 const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
 const customThemeOptions = 'UNSAFE_themeOptions';
 const isThemeKind = themeKind => {
@@ -55,6 +55,7 @@ export const themeStringToObject = themeState => {
  * // returns 'dark:dark light:light spacing:spacing'
  * ```
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => {
   if (
   // colorMode theme state

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

@@ -1,13 +1,4 @@
-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))
-  };
-};
-
+import { hexToRGBAValues } from './hex-to-rgba-values';
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
@@ -25,4 +16,5 @@ export const getBoxShadow = rawShadow => rawShadow.map(({
     b
   } = hexToRGBAValues(color);
   return `${offset.x}px ${offset.y}px ${radius}px rgba(${r}, ${g}, ${b}, ${opacity})`;
-}).join(',');
+}).join(',');
+export { hexToRGBAValues } from './hex-to-rgba-values';

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

@@ -1,18 +1,7 @@
-// valid hex color with 6 digits
-export const isValidBrandHex = hex => /^#[0-9A-F]{6}$/i.test(hex);
-
+import { getAlpha } from './get-alpha';
+import { relativeLuminanceW3C } from './relative-luminance-w3-c';
 // valid hex color with 4, 6 or 8 digits
 const isValidHex = hex => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-export function rgbToHex(r, g, b) {
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
-export function getAlpha(hex) {
-  if (hex.length === 9) {
-    const int = parseInt(hex.slice(7, 9), 16) / 255;
-    return Number(parseFloat(int.toString()).toFixed(2));
-  }
-  return 1;
-}
 export function hexToRgbA(hex) {
   if (!isValidHex(hex)) {
     throw new Error('Invalid HEX');
@@ -25,6 +14,8 @@ export function hexToRgbA(hex) {
   c = '0x' + c.join('');
   return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
 }
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function hexToRgb(hex) {
   if (!isValidHex(hex)) {
     throw new Error('Invalid HEX');
@@ -37,6 +28,8 @@ export function hexToRgb(hex) {
   c = '0x' + c.join('');
   return [c >> 16 & 255, c >> 8 & 255, c & 255];
 }
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function hexToHSL(hex) {
   if (!isValidHex(hex)) {
     throw new Error('Invalid HEX');
@@ -82,26 +75,8 @@ export function hexToHSL(hex) {
   l = +(l * 100).toFixed(1);
   return [h, s, l];
 }
-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)];
-}
-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;
-}
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function getContrastRatio(foreground, background) {
   if (!isValidHex(foreground) || !isValidHex(background)) {
     throw new Error('Invalid HEX');
@@ -115,6 +90,8 @@ export function getContrastRatio(foreground, background) {
   var darkest = Math.min(foregroundLuminance, backgroundLuminance);
   return (brightest + 0.05) / (darkest + 0.05);
 }
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function deltaE(rgbA, rgbB) {
   let labA = rgbToLab(rgbA);
   let labB = rgbToLab(rgbB);
@@ -151,4 +128,9 @@ function rgbToLab(rgb) {
   y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
   z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
   return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
-}
+}
+export { isValidBrandHex } from './is-valid-brand-hex';
+export { rgbToHex } from './rgb-to-hex';
+export { getAlpha } from './get-alpha';
+export { HSLToRGB } from './hsl-to-rgb';
+export { relativeLuminanceW3C } from './relative-luminance-w3-c';

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

@@ -16,16 +16,12 @@ export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
   });
   return attrOfMissingCustomStyles;
 }
-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());
-}
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function reduceTokenMap(tokenMap, themeRamp) {
   return Object.entries(tokenMap).reduce((acc, [key, value]) => {
     const cssVar = tokens[key];
     return cssVar ? `${acc}\n  ${cssVar}: ${typeof value === 'string' ? value : themeRamp[value]};` : acc;
   }, '');
-}
+}
+export { limitSizeOfCustomStyleElements } from './limit-size-of-custom-style-elements';

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

@@ -46,6 +46,8 @@ export const additionalChecks = [{
 const getColorFromTokenRaw = (tokenName, mode) => {
   return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const additionalContrastChecker = ({
   customThemeTokenMap,
   mode,

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

@@ -1,22 +1,13 @@
 import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
-import { deltaE, getContrastRatio, hexToHSL, hexToRgb, hexToRgbA, HSLToRGB, relativeLuminanceW3C, rgbToHex } from './color-utils';
+import { getContrastRatio, hexToHSL, hexToRgbA } from './color-utils';
 import { additionalContrastChecker } from './custom-theme-token-contrast-check';
+import { getClosestColorIndex } from './get-closest-color-index';
 import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
+import { HSLToRGB } from './hsl-to-rgb';
+import { relativeLuminanceW3C } from './relative-luminance-w3-c';
+import { rgbToHex } from './rgb-to-hex';
 const lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
 const highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
-export const getClosestColorIndex = (themeRamp, brandColor) => {
-  // Iterate over themeRamp and find whichever color is closest to brandColor
-  let closestColorIndex = 0;
-  let closestColorDistance = null;
-  themeRamp.forEach((value, index) => {
-    const distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
-    if (closestColorDistance === null || distance < closestColorDistance) {
-      closestColorIndex = index;
-      closestColorDistance = distance;
-    }
-  });
-  return closestColorIndex;
-};
 export const generateColors = brandColor => {
   // Determine luminance
   const HSLBrandColorHue = hexToHSL(brandColor)[0];
@@ -67,6 +58,8 @@ function getInteractionStates(rampPosition, number, colors) {
   }
   return result;
 }
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const generateTokenMap = (brandColor, mode, themeRamp) => {
   const {
     ramp,
@@ -199,6 +192,8 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
     dark: customThemeTokenMapDark
   };
 };
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const generateTokenMapWithContrastCheck = (brandColor, mode, themeRamp) => {
   const colors = themeRamp || generateColors(brandColor).ramp;
   const tokenMaps = generateTokenMap(brandColor, mode, colors);
@@ -216,4 +211,5 @@ export const generateTokenMapWithContrastCheck = (brandColor, mode, themeRamp) =
     }
   });
   return result;
-};
+};
+export { getClosestColorIndex } from './get-closest-color-index';

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

@@ -0,0 +1,7 @@
+export function getAlpha(hex) {
+  if (hex.length === 9) {
+    const int = parseInt(hex.slice(7, 9), 16) / 255;
+    return Number(parseFloat(int.toString()).toFixed(2));
+  }
+  return 1;
+}

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

@@ -0,0 +1,14 @@
+import { deltaE, hexToRgb } from './color-utils';
+export const getClosestColorIndex = (themeRamp, brandColor) => {
+  // Iterate over themeRamp and find whichever color is closest to brandColor
+  let closestColorIndex = 0;
+  let closestColorDistance = null;
+  themeRamp.forEach((value, index) => {
+    const distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
+    if (closestColorDistance === null || distance < closestColorDistance) {
+      closestColorIndex = index;
+      closestColorDistance = distance;
+    }
+  });
+  return closestColorIndex;
+};

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

@@ -0,0 +1,23 @@
+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('-')}`;
+};

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

@@ -0,0 +1,11 @@
+/**
+ * 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('.');

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

@@ -0,0 +1,4 @@
+export const getThemeOverridePreferences = _themeState => {
+  const themeOverridePreferences = [];
+  return [...new Set(themeOverridePreferences)];
+};

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

@@ -39,7 +39,4 @@ export const getThemePreferences = themeState => {
   });
   return [...new Set(themePreferences)];
 };
-export const getThemeOverridePreferences = _themeState => {
-  const themeOverridePreferences = [];
-  return [...new Set(themeOverridePreferences)];
-};
+export { getThemeOverridePreferences } from './get-theme-override-preferences';

package/dist/es2019/utils/get-token-id.js

@@ -0,0 +1,18 @@
+/**
+ * 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('.');
+};

package/dist/es2019/utils/hct-color-utils/argb-from-rgb.js

@@ -0,0 +1,6 @@
+/**
+ * Converts a color from RGB components to ARGB format.
+ */
+export function argbFromRgb(red, green, blue) {
+  return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
+}