@atlaskit/tokens 13.0.4 → 13.1.1

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a101da74518f6374353a0e1b48115f4f>>
+ * @codegen <<SignedSource::d7798f5da9c5cb814cf6b4e2e6137397>>
  * @codegenCommand yarn build tokens
  */
 
@@ -4587,7 +4587,7 @@ const tokens = [{
     "introduced": "0.0.15",
     "description": "Use for backgrounds of elements in a disabled state."
   },
-  "value": "#17171708",
+  "value": "#0515240F",
   "filePath": "schema/themes/atlassian-light/color/background.tsx",
   "isSource": true,
   "original": {
@@ -4597,7 +4597,7 @@ const tokens = [{
       "introduced": "0.0.15",
       "description": "Use for backgrounds of elements in a disabled state."
     },
-    "value": "Neutral100A"
+    "value": "Neutral200A"
   },
   "name": "color.background.disabled",
   "path": ["color", "background", "disabled"],

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/entry-points/theme-state-transformer.js

@@ -1 +1,2 @@
-export { themeStringToObject, themeObjectToString } from '../theme-state-transformer';
+export { themeStringToObject } from '../theme-string-to-object';
+export { themeObjectToString } from '../theme-object-to-string';

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::8a97395137b2eee0fedb0ac95a7a2528>>
+ * @codegen <<SignedSource::ecdf4f84ae7b36849943b200af52ee54>>
  * @codegenCommand yarn build tokens
  */
 
@@ -2315,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

@@ -1,8 +1,9 @@
 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 { generateColors } from './utils/generate-colors';
+import { generateTokenMapWithContrastCheck } from './utils/generate-token-map-with-contrast-check';
 import { hash } from './utils/hash';
+import { reduceTokenMap } from './utils/reduce-token-map';
 
 /**
  * Takes a color mode and custom branding options, and returns an array of objects for use in applying custom styles to the document head.

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

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

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

@@ -1,7 +1,7 @@
 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 { themeObjectToString } from './theme-object-to-string';
 import { hash } from './utils/hash';
 import { isValidBrandHex } from './utils/is-valid-brand-hex';
 const defaultColorMode = 'light';

package/dist/es2019/index.js

@@ -9,6 +9,7 @@ export { default as getSSRAutoScript } from './get-ssr-auto-script';
 export { default as useThemeObserver } from './use-theme-observer';
 export { default as ThemeMutationObserver } from './theme-mutation-observer';
 export { default as getGlobalTheme } from './get-global-theme';
-export { themeStringToObject, themeObjectToString } from './theme-state-transformer';
+export { themeStringToObject } from './theme-string-to-object';
+export { themeObjectToString } from './theme-object-to-string';
 export { default as themeImportMap } from './artifacts/theme-import-map';
 export { COLOR_MODE_ATTRIBUTE, CURRENT_SURFACE_CSS_VAR, SUBTREE_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';

package/dist/es2019/is-color-mode.js

@@ -0,0 +1,3 @@
+export const isColorMode = modeId => {
+  return ['light', 'dark', 'auto'].includes(modeId);
+};

package/dist/es2019/is-theme-ids.js

@@ -0,0 +1,4 @@
+import { themeIds } from './theme-ids';
+export const isThemeIds = themeId => {
+  return themeIds.find(id => id === themeId) !== undefined;
+};

package/dist/es2019/is-theme-kind.js

@@ -0,0 +1,4 @@
+const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape', 'motion'];
+export const isThemeKind = themeKind => {
+  return themeKinds.find(kind => kind === themeKind) !== undefined;
+};

package/dist/es2019/theme-config.js

@@ -1,9 +1,9 @@
-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.
  */
 
+import { themeIds } from './theme-ids';
+
 /**
  * Themes: The internal identifier of a theme.
  * These ids are what the actual theme files/folders are called.
@@ -146,52 +146,13 @@ const themeConfig = {
   }
 };
 
-/**
- * ThemeOptionsSchema: additional configuration options used to customize Atlassian's themes
- */
-
-/**
- * ThemeState: the standard representation of an app's current theme and preferences
- */
-
-/**
- * Can't evaluate typography feature flags at the module level,
- * it will always resolve to false when server side rendered or when flags are loaded async.
- */
-
-function getShapeDefault() {
-  if (fg('platform-dst-shape-theme-default')) {
-    return 'shape';
-  }
-  return undefined;
-}
-function getMotionDefault() {
-  if (fg('platform-dst-motion-theme-default')) {
-    return 'motion';
-  }
-  return undefined;
-}
-
-/**
- * themeStateDefaults: the default values for ThemeState used by theming utilities
- */
-export const themeStateDefaults = {
-  colorMode: 'auto',
-  contrastMode: 'auto',
-  dark: 'dark',
-  light: 'light',
-  shape: getShapeDefault,
-  spacing: 'spacing',
-  typography: 'typography',
-  motion: getMotionDefault,
-  UNSAFE_themeOptions: undefined
-};
-
 /**
  * Represents theme state once mounted to the page
  * (the page doesn't have an "auto" color mode, it's either light or dark)
  */
 
+// 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';
+export { themeIds } from './theme-ids';
+export { themeStateDefaults } from './theme-state-defaults';

package/dist/es2019/theme-object-to-string.js

@@ -0,0 +1,28 @@
+import { isColorMode } from './is-color-mode';
+import { isThemeIds } from './is-theme-ids';
+import { isThemeKind } from './is-theme-kind';
+const customThemeOptions = 'UNSAFE_themeOptions';
+
+/**
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
+ *
+ * @param {object} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeObjectToString({ dark: 'dark', light: 'light', spacing: 'spacing' });
+ * // returns 'dark:dark light:light spacing:spacing'
+ * ```
+ */
+export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => {
+  if (
+  // colorMode theme state
+  kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+  // custom theme state
+  kind === customThemeOptions && typeof id === 'object' ||
+  // other theme states
+  isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+    return themeString + `${themeString ? ' ' : ''}` + `${kind}:${typeof id === 'object' ? JSON.stringify(id) : id}`;
+  }
+  return themeString;
+}, '');

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

@@ -0,0 +1,34 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Can't evaluate typography feature flags at the module level,
+ * it will always resolve to false when server side rendered or when flags are loaded async.
+ */
+
+function getShapeDefault() {
+  if (fg('platform-dst-shape-theme-default')) {
+    return 'shape';
+  }
+  return undefined;
+}
+function getMotionDefault() {
+  if (fg('platform-dst-motion-theme-default')) {
+    return 'motion';
+  }
+  return undefined;
+}
+
+/**
+ * themeStateDefaults: the default values for ThemeState used by theming utilities
+ */
+export const themeStateDefaults = {
+  colorMode: 'auto',
+  contrastMode: 'auto',
+  dark: 'dark',
+  light: 'light',
+  shape: getShapeDefault,
+  spacing: 'spacing',
+  typography: 'typography',
+  motion: getMotionDefault,
+  UNSAFE_themeOptions: undefined
+};

package/dist/es2019/theme-state.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/theme-string-to-object.js

@@ -0,0 +1,38 @@
+import { isColorMode } from './is-color-mode';
+import { isThemeIds } from './is-theme-ids';
+import { isThemeKind } from './is-theme-kind';
+const customThemeOptions = 'UNSAFE_themeOptions';
+
+/**
+ * Converts a string that is formatted for the `data-theme` HTML attribute
+ * to an object that can be passed to `setGlobalTheme`.
+ *
+ * @param {string} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeStringToObject('dark:dark light:light spacing:spacing');
+ * // returns { dark: 'dark', light: 'light', spacing: 'spacing' }
+ * ```
+ */
+export const themeStringToObject = themeState => {
+  return themeState.split(' ')
+  // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
+  .map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
+    if (kind === 'colorMode' && isColorMode(id)) {
+      themeObject[kind] = id;
+    }
+    if (isThemeKind(kind) && isThemeIds(id)) {
+      // @ts-expect-error FIXME - this is a valid ts error
+      themeObject[kind] = id;
+    }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch {
+        new Error('Invalid custom theme string');
+      }
+    }
+    return themeObject;
+  }, {});
+};

package/dist/es2019/utils/additional-contrast-checker.js

@@ -0,0 +1,39 @@
+import tokenValuesDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
+import tokenValuesLight from '../artifacts/atlassian-light-token-value-for-contrast-check';
+import { additionalChecks } from './custom-theme-token-contrast-check';
+import { getContrastRatio } from './get-contrast-ratio';
+const getColorFromTokenRaw = (tokenName, mode) => {
+  return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
+};
+export const additionalContrastChecker = ({
+  customThemeTokenMap,
+  mode,
+  themeRamp
+}) => {
+  const updatedCustomThemeTokenMap = {};
+  const brandTokens = Object.keys(customThemeTokenMap);
+  additionalChecks.forEach(pairing => {
+    const {
+      backgroundLight,
+      backgroundDark,
+      foreground,
+      desiredContrast,
+      updatedTokens
+    } = pairing;
+    const background = mode === 'light' ? backgroundLight : backgroundDark;
+    const foregroundTokenValue = customThemeTokenMap[foreground];
+    const backgroundTokenValue = customThemeTokenMap[background];
+    const foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
+    const backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
+    const contrast = getContrastRatio(foregroundColor, backgroundColor);
+    if (contrast <= desiredContrast) {
+      updatedTokens.forEach(token => {
+        const rampValue = customThemeTokenMap[token];
+        if (typeof rampValue === 'number') {
+          updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+        }
+      });
+    }
+  });
+  return updatedCustomThemeTokenMap;
+};

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

@@ -1,4 +1,3 @@
-import tokens from '../artifacts/token-names';
 import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
 import { hash } from './hash';
 export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
@@ -15,11 +14,4 @@ export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
     }
   });
   return attrOfMissingCustomStyles;
-}
-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

@@ -1,6 +1,3 @@
-import tokenValuesDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
-import tokenValuesLight from '../artifacts/atlassian-light-token-value-for-contrast-check';
-import { getContrastRatio } from './color-utils';
 export const additionalChecks = [{
   foreground: 'color.text.brand',
   backgroundLight: 'elevation.surface.sunken',
@@ -42,39 +39,4 @@ export const additionalChecks = [{
   // In light mode: darken the following tokens by one base token
   // In dark mode: lighten the following tokens by one base token
   updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered']
-}];
-const getColorFromTokenRaw = (tokenName, mode) => {
-  return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
-};
-export const additionalContrastChecker = ({
-  customThemeTokenMap,
-  mode,
-  themeRamp
-}) => {
-  const updatedCustomThemeTokenMap = {};
-  const brandTokens = Object.keys(customThemeTokenMap);
-  additionalChecks.forEach(pairing => {
-    const {
-      backgroundLight,
-      backgroundDark,
-      foreground,
-      desiredContrast,
-      updatedTokens
-    } = pairing;
-    const background = mode === 'light' ? backgroundLight : backgroundDark;
-    const foregroundTokenValue = customThemeTokenMap[foreground];
-    const backgroundTokenValue = customThemeTokenMap[background];
-    const foregroundColor = brandTokens.includes(foreground) ? typeof foregroundTokenValue === 'string' ? foregroundTokenValue : themeRamp[foregroundTokenValue] : getColorFromTokenRaw(foreground, mode);
-    const backgroundColor = brandTokens.includes(background) ? typeof backgroundTokenValue === 'string' ? backgroundTokenValue : themeRamp[backgroundTokenValue] : getColorFromTokenRaw(background, mode);
-    const contrast = getContrastRatio(foregroundColor, backgroundColor);
-    if (contrast <= desiredContrast) {
-      updatedTokens.forEach(token => {
-        const rampValue = customThemeTokenMap[token];
-        if (typeof rampValue === 'number') {
-          updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
-        }
-      });
-    }
-  });
-  return updatedCustomThemeTokenMap;
-};
+}];

package/dist/es2019/utils/delta-e.js

@@ -0,0 +1,20 @@
+import { rgbToLab } from './rgb-to-lab';
+export function deltaE(rgbA, rgbB) {
+  let labA = rgbToLab(rgbA);
+  let labB = rgbToLab(rgbB);
+  let deltaL = labA[0] - labB[0];
+  let deltaA = labA[1] - labB[1];
+  let deltaB = labA[2] - labB[2];
+  let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+  let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+  let deltaC = c1 - c2;
+  let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+  let sc = 1.0 + 0.045 * c1;
+  let sh = 1.0 + 0.015 * c1;
+  let deltaLKlsl = deltaL / 1.0;
+  let deltaCkcsc = deltaC / sc;
+  let deltaHkhsh = deltaH / sh;
+  let i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
+  return i < 0 ? 0 : Math.sqrt(i);
+}

package/dist/es2019/utils/generate-colors.js

@@ -0,0 +1,39 @@
+import { getClosestColorIndex } from './get-closest-color-index';
+import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
+import { hexToHSL } from './hex-to-hsl';
+import { hexToRgbA } from './hex-to-rgb-a';
+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 generateColors = brandColor => {
+  // Determine luminance
+  const HSLBrandColorHue = hexToHSL(brandColor)[0];
+  const baseRgb = HSLToRGB(HSLBrandColorHue, 100, 60);
+  const isLowLuminance = relativeLuminanceW3C(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
+  // Choose right palette
+  const themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
+  const brandRgba = hexToRgbA(brandColor);
+  const hctColor = Hct.fromInt(argbFromRgba({
+    r: brandRgba[0],
+    g: brandRgba[1],
+    b: brandRgba[2],
+    a: brandRgba[3]
+  }));
+  const themeRamp = themeRatios.map(contrast => {
+    const rgbaColor = rgbaFromArgb(Hct.from(hctColor.hue, hctColor.chroma, Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
+    ).toInt());
+    return rgbToHex(rgbaColor.r, rgbaColor.g, rgbaColor.b);
+  });
+  const closestColorIndex = getClosestColorIndex(themeRamp, brandColor);
+
+  // Replace closet color with brandColor
+  const updatedThemeRamp = [...themeRamp];
+  updatedThemeRamp[closestColorIndex] = brandColor;
+  return {
+    ramp: updatedThemeRamp,
+    // add the replaced color into the result
+    replacedColor: themeRamp[closestColorIndex]
+  };
+};

package/dist/es2019/utils/generate-token-map-with-contrast-check.js

@@ -0,0 +1,21 @@
+import { additionalContrastChecker } from './additional-contrast-checker';
+import { generateColors } from './generate-colors';
+import { generateTokenMap } from './generate-token-map';
+export const generateTokenMapWithContrastCheck = (brandColor, mode, themeRamp) => {
+  const colors = themeRamp || generateColors(brandColor).ramp;
+  const tokenMaps = generateTokenMap(brandColor, mode, colors);
+  const result = {};
+  Object.entries(tokenMaps).forEach(([mode, map]) => {
+    if (mode === 'light' || mode === 'dark') {
+      result[mode] = {
+        ...map,
+        ...additionalContrastChecker({
+          customThemeTokenMap: map,
+          mode,
+          themeRamp: colors
+        })
+      };
+    }
+  });
+  return result;
+};

package/dist/es2019/utils/{generate-custom-color-ramp.js → generate-token-map.js}

@@ -1,44 +1,7 @@
 import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
-import { getContrastRatio, hexToHSL, hexToRgbA } from './color-utils';
-import { additionalContrastChecker } from './custom-theme-token-contrast-check';
+import { generateColors } from './generate-colors';
 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 generateColors = brandColor => {
-  // Determine luminance
-  const HSLBrandColorHue = hexToHSL(brandColor)[0];
-  const baseRgb = HSLToRGB(HSLBrandColorHue, 100, 60);
-  const isLowLuminance = relativeLuminanceW3C(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
-  // Choose right palette
-  const themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
-  const brandRgba = hexToRgbA(brandColor);
-  const hctColor = Hct.fromInt(argbFromRgba({
-    r: brandRgba[0],
-    g: brandRgba[1],
-    b: brandRgba[2],
-    a: brandRgba[3]
-  }));
-  const themeRamp = themeRatios.map(contrast => {
-    const rgbaColor = rgbaFromArgb(Hct.from(hctColor.hue, hctColor.chroma, Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
-    ).toInt());
-    return rgbToHex(rgbaColor.r, rgbaColor.g, rgbaColor.b);
-  });
-  const closestColorIndex = getClosestColorIndex(themeRamp, brandColor);
-
-  // Replace closet color with brandColor
-  const updatedThemeRamp = [...themeRamp];
-  updatedThemeRamp[closestColorIndex] = brandColor;
-  return {
-    ramp: updatedThemeRamp,
-    // add the replaced color into the result
-    replacedColor: themeRamp[closestColorIndex]
-  };
-};
-
+import { getContrastRatio } from './get-contrast-ratio';
 /**
  * Return the interaction tokens for a color, given its ramp position and the number of
  * needed interaction states. Use higher-indexed colors (i.e. darker colors) if possible;
@@ -189,23 +152,4 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
     light: customThemeTokenMapLight,
     dark: customThemeTokenMapDark
   };
-};
-export const generateTokenMapWithContrastCheck = (brandColor, mode, themeRamp) => {
-  const colors = themeRamp || generateColors(brandColor).ramp;
-  const tokenMaps = generateTokenMap(brandColor, mode, colors);
-  const result = {};
-  Object.entries(tokenMaps).forEach(([mode, map]) => {
-    if (mode === 'light' || mode === 'dark') {
-      result[mode] = {
-        ...map,
-        ...additionalContrastChecker({
-          customThemeTokenMap: map,
-          mode,
-          themeRamp: colors
-        })
-      };
-    }
-  });
-  return result;
-};
-export { getClosestColorIndex } from './get-closest-color-index';
+};

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

@@ -1,4 +1,5 @@
-import { deltaE, hexToRgb } from './color-utils';
+import { deltaE } from './delta-e';
+import { hexToRgb } from './hex-to-rgb';
 export const getClosestColorIndex = (themeRamp, brandColor) => {
   // Iterate over themeRamp and find whichever color is closest to brandColor
   let closestColorIndex = 0;

package/dist/es2019/utils/get-contrast-ratio.js

@@ -0,0 +1,16 @@
+import { hexToRgb } from './hex-to-rgb';
+import { isValidHex } from './is-valid-hex';
+import { relativeLuminanceW3C } from './relative-luminance-w3-c';
+export function getContrastRatio(foreground, background) {
+  if (!isValidHex(foreground) || !isValidHex(background)) {
+    throw new Error('Invalid HEX');
+  }
+  const foregroundRgb = hexToRgb(foreground);
+  const backgroundRgb = hexToRgb(background);
+  const foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  const backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+export function alphaFromArgb(argb) {
+  return argb >> 24 & 255;
+}

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

@@ -0,0 +1,12 @@
+import { argbFromRgb } from './argb-from-rgb';
+import { delinearized } from './delinearized';
+
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ */
+export function argbFromLinrgb(linrgb) {
+  const r = delinearized(linrgb[0]);
+  const g = delinearized(linrgb[1]);
+  const b = delinearized(linrgb[2]);
+  return argbFromRgb(r, g, b);
+}

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

@@ -0,0 +1,16 @@
+import { argbFromRgb } from './argb-from-rgb';
+import { delinearized } from './delinearized';
+import { yFromLstar } from './y-from-lstar';
+
+/**
+ * Converts an L* value to an ARGB representation.
+ *
+ * @param lstar L* in L*a*b*
+ * @return ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+export function argbFromLstar(lstar) {
+  const y = yFromLstar(lstar);
+  const component = delinearized(y);
+  return argbFromRgb(component, component, component);
+}

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

@@ -0,0 +1,19 @@
+import { clampComponent } from './clamp-component';
+/**
+ * Return int32 color from a given RGBA component
+ *
+ * @param rgba RGBA representation of a int32 color.
+ * @returns ARGB representation of a int32 color.
+ */
+export function argbFromRgba({
+  r,
+  g,
+  b,
+  a
+}) {
+  const rValue = clampComponent(r);
+  const gValue = clampComponent(g);
+  const bValue = clampComponent(b);
+  const aValue = clampComponent(a);
+  return aValue << 24 | rValue << 16 | gValue << 8 | bValue;
+}