Merge pull request #2361 from Shopify/color-system/hsluv

[Color system] Convert colors to HSLuv

UNRELEASED.md

@@ -8,6 +8,8 @@
 
 ### Bug fixes
 
+- Fixed an issue where types were not generated for a JSON config file [#2361](https://github.com/Shopify/polaris-react/pull/2361))
+
 ### Documentation
 
 ### Development workflow

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/components/Backdrop/Backdrop.scss

@@ -11,7 +11,7 @@ $backdrop-color: rgba(33, 43, 54, 0.4);
   bottom: 0;
   left: 0;
   display: block;
-  background-color: $backdrop-color;
+  background-color: var(--p-backdrop, $backdrop-color);
   animation: fade-in duration() $entry-iterations forwards;
   opacity: 1;
   will-change: opacity;

src/components/Card/Card.scss

@@ -3,7 +3,7 @@
 .Card {
   overflow: hidden;
   background-color: var(--p-surface-foreground, color('white'));
-  box-shadow: shadow();
+  box-shadow: var(--p-card-shadow, shadow());
 
   + .Card {
     margin-top: spacing(loose);

src/components/Modal/components/Dialog/Dialog.scss

@@ -33,7 +33,7 @@ $large-width: rem(980px);
   width: 100vw;
   max-height: calc(100vh - #{$vertical-spacing});
   background: var(--p-surface-foreground, color('white'));
-  box-shadow: shadow(layer);
+  box-shadow: var(--p-modal-shadow, shadow(layer));
 
   @media (-ms-high-contrast: active) {
     border: 1px solid ms-high-contrast-color('text');

src/components/Popover/Popover.scss

@@ -8,7 +8,7 @@ $content-max-width: rem(400px);
 .Popover {
   max-width: calc(100vw - #{2 * spacing()});
   margin: $visible-portion-of-arrow spacing(tight) spacing();
-  box-shadow: shadow(deep);
+  box-shadow: var(--p-popover-shadow, shadow(deep));
   border-radius: var(--p-border-radius-wide, border-radius());
   will-change: left, top;
 }

src/components/Sheet/Sheet.scss

@@ -8,7 +8,7 @@ $sheet-desktop-width: rem(380px);
   width: 100%;
   height: 100%;
   background-color: var(--p-surface-foreground, color('white'));
-  box-shadow: shadow('layer');
+  box-shadow: var(--p-modal-shadow, shadow(layer));
 
   @media screen and (-ms-high-contrast: active) {
     border-left: border();

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