@atlaskit/tokens 13.1.0 → 13.2.0

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,13 +14,4 @@ export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
     }
   });
   return attrOfMissingCustomStyles;
-}
-
-// 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

@@ -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,41 +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];
-};
-
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-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;
@@ -58,8 +21,6 @@ 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,
@@ -191,25 +152,4 @@ export const generateTokenMap = (brandColor, mode, themeRamp) => {
     light: customThemeTokenMapLight,
     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);
-  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;
+}

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

@@ -0,0 +1,24 @@
+import { argbFromRgb } from './argb-from-rgb';
+import { delinearized } from './delinearized';
+
+/**
+ * Color science utilities.
+ *
+ * Utility methods for color science constants and color space
+ * conversions that aren't HCT or CAM16.
+ */
+const XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
+
+/**
+ * Converts a color from ARGB to XYZ.
+ */
+export function argbFromXyz(x, y, z) {
+  const matrix = XYZ_TO_SRGB;
+  const linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
+  const linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
+  const linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
+  const r = delinearized(linearR);
+  const g = delinearized(linearG);
+  const b = delinearized(linearB);
+  return argbFromRgb(r, g, b);
+}

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

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

package/dist/es2019/utils/hct-color-utils/clamp-component.js

@@ -0,0 +1,9 @@
+export function clampComponent(value) {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 255) {
+    return 255;
+  }
+  return value;
+}

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

@@ -26,9 +26,9 @@
 //
 // tslint:disable:class-as-namespace
 
-import * as utils from './color-utils';
-import * as math from './math-utils';
-
+import { clampDouble } from './clamp-double';
+import { lstarFromY } from './lstar-from-y';
+import { yFromLstar } from './y-from-lstar';
 /**
  * Utility methods for calculating contrast given two colors, or calculating a
  * color given one color and a contrast ratio.
@@ -49,9 +49,9 @@ export class Contrast {
    * @param toneB Tone between 0 and 100. Values outside will be clamped.
    */
   static ratioOfTones(toneA, toneB) {
-    toneA = math.clampDouble(0.0, 100.0, toneA);
-    toneB = math.clampDouble(0.0, 100.0, toneB);
-    return Contrast.ratioOfYs(utils.yFromLstar(toneA), utils.yFromLstar(toneB));
+    toneA = clampDouble(0.0, 100.0, toneA);
+    toneB = clampDouble(0.0, 100.0, toneB);
+    return Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB));
   }
   static ratioOfYs(y1, y2) {
     const lighter = y1 > y2 ? y1 : y2;
@@ -73,7 +73,7 @@ export class Contrast {
     if (tone < 0.0 || tone > 100.0) {
       return -1.0;
     }
-    const darkY = utils.yFromLstar(tone);
+    const darkY = yFromLstar(tone);
     const lightY = ratio * (darkY + 5.0) - 5.0;
     const realContrast = Contrast.ratioOfYs(lightY, darkY);
     const delta = Math.abs(realContrast - ratio);
@@ -83,7 +83,7 @@ export class Contrast {
 
     // Ensure gamut mapping, which requires a 'range' on tone, will still result
     // the correct ratio by darkening slightly.
-    const returnValue = utils.lstarFromY(lightY) + 0.4;
+    const returnValue = lstarFromY(lightY) + 0.4;
     if (returnValue < 0 || returnValue > 100) {
       return -1;
     }
@@ -104,7 +104,7 @@ export class Contrast {
     if (tone < 0.0 || tone > 100.0) {
       return -1.0;
     }
-    const lightY = utils.yFromLstar(tone);
+    const lightY = yFromLstar(tone);
     const darkY = (lightY + 5.0) / ratio - 5.0;
     const realContrast = Contrast.ratioOfYs(lightY, darkY);
     const delta = Math.abs(realContrast - ratio);
@@ -114,7 +114,7 @@ export class Contrast {
 
     // Ensure gamut mapping, which requires a 'range' on tone, will still result
     // the correct ratio by darkening slightly.
-    const returnValue = utils.lstarFromY(darkY) - 0.4;
+    const returnValue = lstarFromY(darkY) - 0.4;
     if (returnValue < 0 || returnValue > 100) {
       return -1;
     }

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

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

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

@@ -21,9 +21,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * limitations under the License.
  */
 
-import * as utils from './color-utils';
+import { argbFromLinrgb } from './argb-from-linrgb';
+import { argbFromLstar } from './argb-from-lstar';
+import { argbFromXyz } from './argb-from-xyz';
+import { linearized } from './linearized';
+import { lstarFromArgb } from './lstar-from-argb';
+import { lstarFromY } from './lstar-from-y';
 import * as math from './math-utils';
 import { ViewingConditions } from './viewing-conditions';
+import { yFromLstar } from './y-from-lstar';
+
 /**
  * A color system built using CAM16 hue and chroma, and L* from
  * L*a*b*.
@@ -119,13 +126,13 @@ export class Hct {
     const cam = Cam16.fromInt(argb);
     this.internalHue = cam.hue;
     this.internalChroma = cam.chroma;
-    this.internalTone = utils.lstarFromArgb(argb);
+    this.internalTone = lstarFromArgb(argb);
   }
   setInternalState(argb) {
     const cam = Cam16.fromInt(argb);
     this.internalHue = cam.hue;
     this.internalChroma = cam.chroma;
-    this.internalTone = utils.lstarFromArgb(argb);
+    this.internalTone = lstarFromArgb(argb);
     this.argb = argb;
   }
 
@@ -154,7 +161,7 @@ export class Hct {
     // 3. Create HCT from:
     // - CAM16 using default VC with XYZ coordinates in specified VC.
     // - L* converted from Y in XYZ coordinates in specified VC.
-    const recastHct = Hct.from(recastInVc.hue, recastInVc.chroma, utils.lstarFromY(viewedInVc[1]));
+    const recastHct = Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1]));
     return recastHct;
   }
 }
@@ -243,9 +250,9 @@ class Cam16 {
     const red = (argb & 0x00ff0000) >> 16;
     const green = (argb & 0x0000ff00) >> 8;
     const blue = argb & 0x000000ff;
-    const redL = utils.linearized(red);
-    const greenL = utils.linearized(green);
-    const blueL = utils.linearized(blue);
+    const redL = linearized(red);
+    const greenL = linearized(green);
+    const blueL = linearized(blue);
     const x = 0.41233895 * redL + 0.35762064 * greenL + 0.18051042 * blueL;
     const y = 0.2126 * redL + 0.7152 * greenL + 0.0722 * blueL;
     const z = 0.01932141 * redL + 0.11916382 * greenL + 0.95034478 * blueL;
@@ -392,7 +399,7 @@ class Cam16 {
     const x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
     const y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
     const z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
-    const argb = utils.argbFromXyz(x, y, z);
+    const argb = argbFromXyz(x, y, z);
     return argb;
   }
 
@@ -801,7 +808,7 @@ class HctSolver {
         if (linrgb[0] > 100.01 || linrgb[1] > 100.01 || linrgb[2] > 100.01) {
           return 0;
         }
-        return utils.argbFromLinrgb(linrgb);
+        return argbFromLinrgb(linrgb);
       }
       // Iterates with Newton method,
       // Using 2 * fn(j) / j as the approximation of fn'(j)
@@ -824,17 +831,17 @@ class HctSolver {
    */
   static solveToInt(hueDegrees, chroma, lstar) {
     if (chroma < 0.0001 || lstar < 0.0001 || lstar > 99.9999) {
-      return utils.argbFromLstar(lstar);
+      return argbFromLstar(lstar);
     }
     hueDegrees = math.sanitizeDegreesDouble(hueDegrees);
     const hueRadians = hueDegrees / 180 * Math.PI;
-    const y = utils.yFromLstar(lstar);
+    const y = yFromLstar(lstar);
     const exactAnswer = HctSolver.findResultByJ(hueRadians, chroma, y);
     if (exactAnswer !== 0) {
       return exactAnswer;
     }
     const linrgb = HctSolver.bisectToLimit(y, hueRadians);
-    return utils.argbFromLinrgb(linrgb);
+    return argbFromLinrgb(linrgb);
   }
 
   /**

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

@@ -1,3 +1,4 @@
 export { Hct } from './hct';
 export { Contrast } from './contrast';
-export { argbFromRgba, rgbaFromArgb } from './color-utils';
+export { argbFromRgba } from './argb-from-rgba';
+export { rgbaFromArgb } from './rgba-from-argb';

package/dist/es2019/utils/hct-color-utils/lab-f.js

@@ -0,0 +1,9 @@
+export function labF(t) {
+  const e = 216.0 / 24389.0;
+  const kappa = 24389.0 / 27.0;
+  if (t > e) {
+    return Math.pow(t, 1.0 / 3.0);
+  } else {
+    return (kappa * t + 16) / 116;
+  }
+}

package/dist/es2019/utils/hct-color-utils/lab-invf.js

@@ -0,0 +1,10 @@
+export function labInvf(ft) {
+  const e = 216.0 / 24389.0;
+  const kappa = 24389.0 / 27.0;
+  const ft3 = ft * ft * ft;
+  if (ft3 > e) {
+    return ft3;
+  } else {
+    return (116 * ft - 16) / kappa;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { blueFromArgb } from './blue-from-argb';
+import { greenFromArgb } from './green-from-argb';
+import { labF } from './lab-f';
+import { linearized } from './linearized';
+import { matrixMultiply } from './matrix-multiply';
+import { redFromArgb } from './red-from-argb';
+const SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722], [0.01932141, 0.11916382, 0.95034478]];
+
+/**
+ * Converts a color from XYZ to ARGB.
+ */
+function xyzFromArgb(argb) {
+  const r = linearized(redFromArgb(argb));
+  const g = linearized(greenFromArgb(argb));
+  const b = linearized(blueFromArgb(argb));
+  return matrixMultiply([r, g, b], SRGB_TO_XYZ);
+}
+
+/**
+ * Computes the L* value of a color in ARGB representation.
+ *
+ * @param argb ARGB representation of a color
+ * @return L*, from L*a*b*, coordinate of the color
+ */
+export function lstarFromArgb(argb) {
+  const y = xyzFromArgb(argb)[1];
+  return 116.0 * labF(y / 100.0) - 16.0;
+}

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

@@ -0,0 +1,16 @@
+import { labF } from './lab-f';
+
+/**
+ * Converts a Y value to an L* value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param y Y in XYZ
+ * @return L* in L*a*b*
+ */
+export function lstarFromY(y) {
+  return labF(y / 100.0) * 116.0 - 16.0;
+}

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

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