convert colors to HSLuv

config/typescript/hsluv.d.ts

@@ -0,0 +1,23 @@
+declare module 'hsluv' {
+  export type ColorTuple = [number, number, number];
+  export function hsluvToRgb(hsluv: ColorTuple): ColorTuple;
+  export function rgbToHsluv(rgb: ColorTuple): ColorTuple;
+  export function hpluvToRgb(hpluv: ColorTuple): ColorTuple;
+  export function rgbToHpluv(rgb: ColorTuple): ColorTuple;
+  export function hsluvToHex(hsluv: ColorTuple): string;
+  export function hexToHsluv(hex: string): ColorTuple;
+  export function hpluvToHex(hpluv: ColorTuple): string;
+  export function hexToHpluv(hex: string): ColorTuple;
+  export function lchToHpluv(lch: ColorTuple): ColorTuple;
+  export function hpluvToLch(hpluv: ColorTuple): ColorTuple;
+  export function lchToHsluv(lch: ColorTuple): ColorTuple;
+  export function hsluvToLch(hsluv: ColorTuple): ColorTuple;
+  export function lchToLuv(lch: ColorTuple): ColorTuple;
+  export function luvToLch(luv: ColorTuple): ColorTuple;
+  export function xyzToLuv(xyz: ColorTuple): ColorTuple;
+  export function luvToXyz(luv: ColorTuple): ColorTuple;
+  export function xyzToRgb(xyz: ColorTuple): ColorTuple;
+  export function rgbToXyz(rbg: ColorTuple): ColorTuple;
+  export function lchToRgb(lch: ColorTuple): ColorTuple;
+  export function rgbToLch(rgb: ColorTuple): ColorTuple;
+}

package.json

@@ -190,6 +190,7 @@
     "@types/react-dom": "^16.8.4",
     "@types/react-transition-group": "^2.0.7",
     "hoist-non-react-statics": "^3.3.0",
+    "hsluv": "^0.0.3",
     "lodash": "^4.17.4",
     "tslib": "^1.9.3"
   }

src/utilities/color-transformers.ts

@@ -196,7 +196,7 @@ export function rgbToHsl(color: RGBAColor): HSLAColor {
   return {hue, saturation, lightness, alpha};
 }
 
-function hexToRgb(color: string) {
+export function hexToRgb(color: string) {
   if (color.length === 4) {
     const repeatHex = (hex1: number, hex2: number) =>
       color.slice(hex1, hex2).repeat(2);

src/utilities/theme/utils.ts

@@ -1,6 +1,12 @@
 import tokens from '@shopify/polaris-tokens';
+import {hexToHsluv, hsluvToHex} from 'hsluv';
 import {HSLColor, HSLAColor} from '../color-types';
-import {colorToHsla, hslToString, hslToRgb} from '../color-transformers';
+import {
+  colorToHsla,
+  hslToString,
+  hslToRgb,
+  hexToRgb,
+} from '../color-transformers';
 import {isLight} from '../color-validation';
 import {constructColorName} from '../color-names';
 import {createLightColor} from '../color-manipulation';
@@ -83,6 +89,16 @@ export type ColorAdjustments = {
   };
 };
 
+function hexToHsluvObj(hex: string) {
+  const [hue, saturation, lightness] = hexToHsluv(hex);
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+
 export function buildColors(theme: ThemeConfig) {
   const colors = {
     surface: UNSTABLE_Color.Surface,
@@ -97,8 +113,7 @@ export function buildColors(theme: ThemeConfig) {
     ...theme.UNSTABLE_colors,
   };
 
-  const surfaceColor = colorToHsla(colors.surface);
-  const lightSurface = isLight(hslToRgb(surfaceColor));
+  const lightSurface = isLight(hexToRgb(colors.surface));
 
   const colorAdjustments: ColorAdjustments = {};
   Object.assign(colorAdjustments, colorAdjustmentsJson);
@@ -107,20 +122,18 @@ export function buildColors(theme: ThemeConfig) {
     (accumulator, [colorRole, colorAdjustment]) => {
       if (colorAdjustment == null) return accumulator;
 
-      const baseColor = colorToHsla(colors[colorAdjustment.baseColor]);
+      const baseColor = hexToHsluvObj(colors[colorAdjustment.baseColor]);
       const {
         hue = baseColor.hue,
         saturation = baseColor.saturation,
         lightness = baseColor.lightness,
-        alpha = baseColor.alpha,
+        alpha = 1,
       } = colorAdjustment[lightSurface ? 'light' : 'dark'];
 
       return {
         ...accumulator,
         [colorRole]: hslToString({
-          hue,
-          saturation,
-          lightness,
+          ...colorToHsla(hsluvToHex([hue, saturation, lightness])),
           alpha,
         }),
       };

yarn.lock

@@ -8612,6 +8612,11 @@ hsla-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
   integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
 
+hsluv@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c"
+  integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw=
+
 html-comment-regex@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"