Add conversions to colors (#2496)

* Add conversions to colors

* Add better tests for color

* update notices and ignore statements

* review comments

* fix hsb conversions

* fix ts

* improve accuracy

* add comment

* easier to read converted values

* remove wikipedia math forumlas from notices

* fix some types

* fix remaining types

Author: snowystinger

package.json

@@ -104,11 +104,13 @@
     "chalk": "^4.1.2",
     "chromatic": "^5.4.0",
     "clsx": "^1.1.1",
+    "color-space": "^1.16.0",
     "concurrently": "^6.0.2",
     "core-js": "^3.0.0",
     "cross-env": "^7.0.2",
     "cross-spawn": "^7.0.3",
     "css-loader": "^2.1.1",
+    "delta-e": "^0.0.8",
     "eslint": "^7.10.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.0.2",
@@ -118,6 +120,7 @@
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-rulesdir": "^0.1.0",
+    "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
     "file-loader": "^0.9.0",
     "fs-extra": "^10.0.0",

packages/@react-stately/color/package.json

@@ -18,7 +18,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.9.0",
     "@react-stately/slider": "^3.0.3",
     "@react-stately/utils": "^3.2.2",
     "@react-types/color": "3.0.0-beta.3",

packages/@react-stately/color/src/Color.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {clamp} from '@react-aria/utils';
+import {clamp, toFixedNumber} from '@react-stately/utils';
 import {ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -32,7 +32,7 @@ export function parseColor(value: string): IColor {
 abstract class Color implements IColor {
   abstract toFormat(format: ColorFormat): IColor;
   abstract toString(format: ColorFormat | 'css'): string;
-  abstract clone(): Color;
+  abstract clone(): IColor;
   abstract getChannelRange(channel: ColorChannel): ColorChannelRange;
   abstract formatChannelValue(channel: ColorChannel, locale: string): string;
 
@@ -61,6 +61,8 @@ abstract class Color implements IColor {
   getChannelName(channel: ColorChannel, locale: string) {
     return messages.getStringForLocale(channel, locale);
   }
+
+  abstract getColorSpace(): ColorFormat
 }
 
 const HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
@@ -90,7 +92,9 @@ class RGBColor extends Color {
         let b = parseInt(m[2][4] + m[2][5], 16);
         return new RGBColor(r, g, b, 1);
       }
-    } if ((m = value.match(RGB_REGEX))) {
+    }
+
+    if ((m = value.match(RGB_REGEX))) {
       const [r, g, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim()));
       return new RGBColor(clamp(r, 0, 255), clamp(g, 0, 255), clamp(b, 0, 255), clamp(a ?? 1, 0, 1));
     }
@@ -119,6 +123,12 @@ class RGBColor extends Color {
       case 'rgb':
       case 'rgba':
         return this;
+      case 'hsb':
+      case 'hsba':
+        return this.toHSB();
+      case 'hsl':
+      case 'hsla':
+        return this.toHSL();
       default:
         throw new Error('Unsupported color conversion: rgb -> ' + format);
     }
@@ -128,7 +138,89 @@ class RGBColor extends Color {
     return this.red << 16 | this.green << 8 | this.blue;
   }
 
-  clone(): Color {
+  /**
+   * Converts an RGB color value to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSBColor object.
+   */
+  private toHSB(): IColor {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const brightness = Math.max(red, green, blue);
+    const chroma = brightness - min;
+    const saturation = brightness === 0 ? 0 : chroma / brightness;
+    let hue = 0; // achromatic
+
+    if (chroma !== 0) {
+      switch (brightness) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+
+      hue /= 6;
+    }
+
+    return new HSBColor(
+      toFixedNumber(hue * 360, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(brightness * 100, 2),
+      this.alpha
+    );
+  }
+
+  /**
+   * Converts an RGB color value to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSLColor object.
+   */
+  private toHSL(): IColor {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const max = Math.max(red, green, blue);
+    const lightness = (max + min) / 2;
+    const chroma = max - min;
+    let hue: number;
+    let saturation: number;
+
+    if (chroma === 0) {
+      hue = saturation = 0; // achromatic
+    } else {
+      saturation = chroma / (lightness < .5 ? max + min : 2 - max - min);
+
+      switch (max) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+
+      hue /= 6;
+    }
+
+    return new HSLColor(
+      toFixedNumber(hue * 360, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(lightness * 100, 2),
+      this.alpha);
+  }
+
+  clone(): IColor {
     return new RGBColor(this.red, this.green, this.blue, this.alpha);
   }
 
@@ -162,6 +254,10 @@ class RGBColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'rgb';
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -187,10 +283,14 @@ class HSBColor extends Color {
     switch (format) {
       case 'css':
         return this.toHSL().toString('css');
+      case 'hex':
+        return this.toRGB().toString('hex');
+      case 'hexa':
+        return this.toRGB().toString('hexa');
       case 'hsb':
-        return `hsb(${this.hue}, ${this.saturation}%, ${this.brightness}%)`;
+        return `hsb(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%)`;
       case 'hsba':
-        return `hsba(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha})`;
+        return `hsba(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
       default:
         return this.toFormat(format).toString(format);
     }
@@ -204,29 +304,52 @@ class HSBColor extends Color {
       case 'hsl':
       case 'hsla':
         return this.toHSL();
+      case 'rgb':
+      case 'rgba':
+        return this.toRGB();
       default:
         throw new Error('Unsupported color conversion: hsb -> ' + format);
     }
   }
 
-  private toHSL(): Color {
-    // determine the lightness in the range [0,100]
-    var l = (2 - this.saturation / 100) * this.brightness / 2;
+  /**
+   * Converts a HSB color to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
+   * @returns An HSLColor object.
+   */
+  private toHSL(): IColor {
+    let saturation = this.saturation / 100;
+    let brightness = this.brightness / 100;
+    let lightness = brightness * (1 - saturation / 2);
+    saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+
+    return new HSLColor(
+      toFixedNumber(this.hue, 2),
+      toFixedNumber(saturation * 100, 2),
+        toFixedNumber(lightness * 100, 2),
+      this.alpha
+    );
+  }
 
-    // store the HSL components
+  /**
+   * Converts a HSV color value to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
+  private toRGB(): IColor {
     let hue = this.hue;
-    let saturation = this.saturation * this.brightness / (l < 50 ? l * 2 : 200 - l * 2);
-    let lightness = l;
-
-    // correct a division-by-zero error
-    if (isNaN(saturation)) {
-      saturation = 0;
-    }
-
-    return new HSLColor(hue, saturation, lightness, this.alpha);
+    let saturation = this.saturation / 100;
+    let brightness = this.brightness / 100;
+    let fn = (n: number, k = (n + hue / 60) % 6) => brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
+    return new RGBColor(
+      Math.round(fn(5) * 255),
+      Math.round(fn(3) * 255),
+      Math.round(fn(1) * 255),
+      this.alpha
+    );
   }
 
-  clone(): Color {
+  clone(): IColor {
     return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
   }
 
@@ -264,6 +387,10 @@ class HSBColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'hsb';
+  }
 }
 
 // X = <negative/positive number with/without decimal places>
@@ -276,13 +403,11 @@ function mod(n, m) {
   return ((n % m) + m) % m;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 class HSLColor extends Color {
   constructor(private hue: number, private saturation: number, private lightness: number, private alpha: number) {
     super();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   static parse(value: string): HSLColor | void {
     let m: RegExpMatchArray | void;
     if ((m = value.match(HSL_REGEX))) {
@@ -293,27 +418,73 @@ class HSLColor extends Color {
 
   toString(format: ColorFormat | 'css') {
     switch (format) {
+      case 'hex':
+        return this.toRGB().toString('hex');
+      case 'hexa':
+        return this.toRGB().toString('hexa');
       case 'hsl':
-        return `hsl(${this.hue}, ${this.saturation}%, ${this.lightness}%)`;
+        return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
       case 'css':
       case 'hsla':
-        return `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.alpha})`;
+        return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
       default:
         return this.toFormat(format).toString(format);
     }
   }
-
   toFormat(format: ColorFormat): IColor {
     switch (format) {
       case 'hsl':
       case 'hsla':
         return this;
+      case 'hsb':
+      case 'hsba':
+        return this.toHSB();
+      case 'rgb':
+      case 'rgba':
+        return this.toRGB();
       default:
         throw new Error('Unsupported color conversion: hsl -> ' + format);
     }
   }
 
-  clone(): Color {
+  /**
+   * Converts a HSL color to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
+   * @returns An HSBColor object.
+   */
+  private toHSB(): IColor {
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+    saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+    return new HSBColor(
+      toFixedNumber(this.hue, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(brightness * 100, 2),
+      this.alpha
+    );
+  }
+
+  /**
+   * Converts a HSL color to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
+  private toRGB(): IColor {
+    let hue = this.hue;
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let a = saturation * Math.min(lightness, 1 - lightness);
+    let fn = (n: number, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return new RGBColor(
+      Math.round(fn(0) * 255),
+      Math.round(fn(8) * 255),
+      Math.round(fn(4) * 255),
+      this.alpha
+    );
+  }
+
+  clone(): IColor {
     return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
   }
 
@@ -351,4 +522,8 @@ class HSLColor extends Color {
     }
     return new NumberFormatter(locale, options).format(value);
   }
+
+  getColorSpace(): ColorFormat {
+    return 'hsl';
+  }
 }