convert colors to HSLuv

Shopify · Oct 25, 2019 · 24fa4e6 · 24fa4e6
1 parent 7432632
commit 24fa4e6
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 30 deletions.
diff --git a/config/typescript/hsluv.d.ts b/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;
+}
diff --git a/package.json b/package.json
@@ -191,6 +191,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"
   }

diff --git a/src/utilities/color-transformers.ts b/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);

diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts
@@ -1,6 +1,12 @@
 import tokens from '@shopify/polaris-tokens';
-import {HSLColor, HSLAColor} from '../color-types';
-import {colorToHsla, hslToString, hslToRgb} from '../color-transformers';
+import {hexToHsluv, ColorTuple, hsluvToHex} from 'hsluv';
+import {HSLColor} from '../color-types';
+import {
+  colorToHsla,
+  hslToString,
+  hslToRgb,
+  hexToRgb,
+} from '../color-transformers';
 import {isLight} from '../color-validation';
 import {constructColorName} from '../color-names';
 import {createLightColor} from '../color-manipulation';
@@ -70,25 +76,25 @@ export function buildColors(theme: ThemeConfig) {
   } = UNSTABLE_colors;
   /* eslint-enable babel/camelcase */
 
-  const lightSurface = isLight(hslToRgb(colorToHsla(surface)));
+  const lightSurface = isLight(hexToRgb(surface));
 
   return {
     ...customPropertyTransformer({
-      ...surfaceColors(colorToHsla(surface), lightSurface),
-      ...onSurfaceColors(colorToHsla(onSurface), lightSurface),
-      ...interactiveColors(colorToHsla(interactive), lightSurface),
-      ...neutralColors(colorToHsla(neutral), lightSurface),
-      ...brandedColors(colorToHsla(branded), lightSurface),
-      ...criticalColors(colorToHsla(critical), lightSurface),
-      ...warningColors(colorToHsla(warning), lightSurface),
-      ...highlightColors(colorToHsla(highlight), lightSurface),
-      ...successColors(colorToHsla(success), lightSurface),
+      ...surfaceColors(hexToHsluv(surface), lightSurface),
+      ...onSurfaceColors(hexToHsluv(onSurface), lightSurface),
+      ...interactiveColors(hexToHsluv(interactive), lightSurface),
+      ...neutralColors(hexToHsluv(neutral), lightSurface),
+      ...brandedColors(hexToHsluv(branded), lightSurface),
+      ...criticalColors(hexToHsluv(critical), lightSurface),
+      ...warningColors(hexToHsluv(warning), lightSurface),
+      ...highlightColors(hexToHsluv(highlight), lightSurface),
+      ...successColors(hexToHsluv(success), lightSurface),
     }),
     ...overrides(),
   };
 }
 
-function surfaceColors(color: HSLAColor, lightSurface: boolean) {
+function surfaceColors(color: ColorTuple, lightSurface: boolean) {
   return {
     surface: color,
     surfaceBackground: setLightness(color, lightSurface ? 98 : 7),
@@ -100,7 +106,7 @@ function surfaceColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function onSurfaceColors(color: HSLAColor, lightSurface: boolean) {
+function onSurfaceColors(color: ColorTuple, lightSurface: boolean) {
   return {
     onSurface: color,
     actionOnDark: setLightness(color, 76),
@@ -158,7 +164,7 @@ function onSurfaceColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function interactiveColors(color: HSLAColor, lightSurface: boolean) {
+function interactiveColors(color: ColorTuple, lightSurface: boolean) {
   return {
     interactive: color,
     interactiveAction: setLightness(color, lightSurface ? 44 : 56),
@@ -173,7 +179,7 @@ function interactiveColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function neutralColors(color: HSLAColor, lightSurface: boolean) {
+function neutralColors(color: ColorTuple, lightSurface: boolean) {
   return {
     neutral: color,
     neutralActionDisabled: setLightness(color, lightSurface ? 94 : 13),
@@ -183,7 +189,7 @@ function neutralColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function brandedColors(color: HSLAColor, lightSurface: boolean) {
+function brandedColors(color: ColorTuple, lightSurface: boolean) {
   return {
     branded: color,
     brandedAction: setLightness(color, 25),
@@ -209,7 +215,7 @@ function brandedColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function criticalColors(color: HSLAColor, lightSurface: boolean) {
+function criticalColors(color: ColorTuple, lightSurface: boolean) {
   return {
     critical: color,
     criticalDivider: setLightness(color, lightSurface ? 52 : 48),
@@ -225,7 +231,7 @@ function criticalColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function warningColors(color: HSLAColor, lightSurface: boolean) {
+function warningColors(color: ColorTuple, lightSurface: boolean) {
   return {
     warning: color,
     warningDivider: setLightness(color, lightSurface ? 66 : 34),
@@ -236,7 +242,7 @@ function warningColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function highlightColors(color: HSLAColor, lightSurface: boolean) {
+function highlightColors(color: ColorTuple, lightSurface: boolean) {
   return {
     highlight: color,
     highlightDivider: setLightness(color, lightSurface ? 58 : 42),
@@ -247,7 +253,7 @@ function highlightColors(color: HSLAColor, lightSurface: boolean) {
   };
 }
 
-function successColors(color: HSLAColor, lightSurface: boolean) {
+function successColors(color: ColorTuple, lightSurface: boolean) {
   return {
     success: color,
     successDivider: setLightness(color, lightSurface ? 25 : 35),
@@ -298,11 +304,13 @@ function overrides() {
   };
 }
 
-function customPropertyTransformer(colors: {[key: string]: HSLAColor}) {
+function customPropertyTransformer(colors: {[key: string]: ColorTuple}) {
   return Object.entries(colors).reduce(
     (transformed, [key, value]) => ({
       ...transformed,
-      [toCssCustomPropertySyntax(key)]: hslToString(value),
+      [toCssCustomPropertySyntax(key)]: hslToString(
+        colorToHsla(hsluvToHex(value)),
+      ),
     }),
     {},
   );
@@ -313,17 +321,17 @@ function toCssCustomPropertySyntax(camelCase: string) {
 }
 
 function setLightness(
-  {hue, saturation, alpha}: HSLAColor,
+  [hue, saturation, _lightness]: ColorTuple,
   lightness: number,
-): HSLAColor {
-  return {hue, saturation, lightness, alpha};
+): ColorTuple {
+  return [hue, saturation, lightness];
 }
 
 function setSaturation(
-  {hue, lightness, alpha}: HSLAColor,
+  [hue, _saturation, lightness]: ColorTuple,
   saturation: number,
-): HSLAColor {
-  return {hue, saturation, lightness, alpha};
+): ColorTuple {
+  return [hue, saturation, lightness];
 }
 
 function buildLegacyColors(theme?: ThemeConfig): CustomPropertiesLike {

diff --git a/yarn.lock b/yarn.lock
@@ -8681,6 +8681,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"