@react-stately/color 3.5.4-nightly.4547 → 3.5.4-nightly.4551

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/color",
-  "version": "3.5.4-nightly.4547+8269d9fca",
+  "version": "3.5.4-nightly.4551+17751bb75",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,12 +22,13 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/number": "3.5.2-nightly.4547+8269d9fca",
-    "@internationalized/string": "3.2.2-nightly.4547+8269d9fca",
-    "@react-stately/form": "3.0.2-nightly.4547+8269d9fca",
-    "@react-stately/slider": "3.5.3-nightly.4547+8269d9fca",
-    "@react-stately/utils": "3.0.0-nightly.2835+8269d9fca",
-    "@react-types/color": "3.0.0-nightly.4547+8269d9fca",
+    "@internationalized/number": "3.5.2-nightly.4551+17751bb75",
+    "@internationalized/string": "3.2.2-nightly.4551+17751bb75",
+    "@react-aria/i18n": "3.0.0-nightly.2839+17751bb75",
+    "@react-stately/form": "3.0.2-nightly.4551+17751bb75",
+    "@react-stately/slider": "3.5.3-nightly.4551+17751bb75",
+    "@react-stately/utils": "3.0.0-nightly.2839+17751bb75",
+    "@react-types/color": "3.0.0-nightly.4551+17751bb75",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -36,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8269d9fca8460df96545592d60c6476eade8da0f"
+  "gitHead": "17751bb75cf4b0500e86abe9e1b4561d140f9486"
 }

package/src/Color.ts

@@ -14,7 +14,7 @@ import {clamp, toFixedNumber} from '@react-stately/utils';
 import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {LocalizedStringDictionary} from '@internationalized/string';
+import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';
 import {NumberFormatter} from '@internationalized/number';
 
 let dictionary = new LocalizedStringDictionary(intlMessages);
@@ -37,6 +37,25 @@ export function normalizeColor(v: string | IColor) {
   }
 }
 
+// Lightness threshold between orange and brown.
+const ORANGE_LIGHTNESS_THRESHOLD = 0.68;
+// The maximum lightness considered to be "dark".
+const MAX_DARK_LIGHTNESS = 0.55;
+// The chroma threshold between gray and color.
+const GRAY_THRESHOLD = 0.001;
+const OKLCH_HUES: [number, string][] = [
+  [0, 'pink'],
+  [15, 'red'],
+  [48, 'orange'],
+  [94, 'yellow'],
+  [124, 'green'],
+  [180, 'cyan'],
+  [264, 'blue'],
+  [284, 'purple'],
+  [320, 'magenta'],
+  [349, 'pink']
+];
+
 abstract class Color implements IColor {
   abstract toFormat(format: ColorFormat): IColor;
   abstract toString(format: ColorFormat | 'css'): string;
@@ -80,8 +99,113 @@ abstract class Color implements IColor {
 
     return {xChannel: xCh, yChannel: yCh, zChannel: zCh};
   }
+
   abstract getColorChannels(): [ColorChannel, ColorChannel, ColorChannel]
+
+  getColorName(locale: string): string {
+    // Convert to oklch color space, which has perceptually uniform lightness across all hues.
+    let [l, c, h] = toOKLCH(this);
+
+    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/color') || dictionary;
+    if (l > 0.999) {
+      return strings.getStringForLocale('white', locale);
+    }
+
+    if (l < 0.001) {
+      return strings.getStringForLocale('black', locale);
+    }
+
+    let hue: string;
+    [hue, l] = this.getOklchHue(l, c, h, locale);
+
+    let lightness = '';
+    let chroma = '';
+    if (c <= 0.1 && c >= GRAY_THRESHOLD) {
+      if (l >= 0.7) {
+        chroma = 'pale';
+      } else {
+        chroma = 'grayish';
+      }
+    } else if (c >= 0.15) {
+      chroma = 'vibrant';
+    }
+    
+    if (l < 0.3) {
+      lightness = 'very dark';
+    } else if (l < MAX_DARK_LIGHTNESS) {
+      lightness = 'dark';
+    } else if (l < 0.7) {
+      // none
+    } else if (l < 0.85) {
+      lightness = 'light';
+    } else {
+      lightness = 'very light';
+    }
+
+    if (chroma) {
+      chroma = strings.getStringForLocale(chroma, locale);
+    }
+
+    if (lightness) {
+      lightness = strings.getStringForLocale(lightness, locale);
+    }
+
+    let alpha = this.getChannelValue('alpha');
+    let formatter = new LocalizedStringFormatter(locale, strings);
+    let transparency = '';
+    if (alpha < 1) {
+      let percent = new NumberFormatter(locale, {style: 'percent'}).format(1 - alpha);
+      transparency = formatter.format('transparency', {percent});
+    }
+    
+    return formatter.format('colorName', {
+      lightness,
+      chroma,
+      hue,
+      transparency
+    }).replace(/\s+/g, ' ').trim();
+  }
+
+  private getOklchHue(l: number, c: number, h: number, locale: string): [string, number] {
+    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/color') || dictionary;
+    if (c < GRAY_THRESHOLD) {
+      return [strings.getStringForLocale('gray', locale), l];
+    }
+
+    for (let i = 0; i < OKLCH_HUES.length; i++) {
+      let [hue, hueName] = OKLCH_HUES[i];
+      let [nextHue, nextHueName] = OKLCH_HUES[i + 1] || [360, 'pink'];
+      if (h >= hue && h < nextHue) {
+        // Split orange hue into brown/orange depending on lightness.
+        if (hueName === 'orange') {
+          if (l < ORANGE_LIGHTNESS_THRESHOLD) {
+            hueName = 'brown';
+          } else {
+            // Adjust lightness.
+            l = (l - ORANGE_LIGHTNESS_THRESHOLD) + MAX_DARK_LIGHTNESS;
+          }
+        }
+
+        // If the hue is at least halfway to the next hue, add the next hue name as well.
+        if (h > hue + (nextHue - hue) / 2 && hueName !== nextHueName) {
+          hueName = `${hueName} ${nextHueName}`;
+        }
+
+        let name = strings.getStringForLocale(hueName, locale).toLocaleLowerCase(locale);
+        return [name, l];
+      }
+    }
+
+    throw new Error('Unexpected hue');
+  }
+
+  getHueName(locale: string): string {
+    let [l, c, h] = toOKLCH(this);
+    let [name] = this.getOklchHue(l, c, h, locale);
+    return name;
+  }
 }
+
 class RGBColor extends Color {
   constructor(private red: number, private green: number, private blue: number, private alpha: number) {
     super();
@@ -108,7 +232,6 @@ class RGBColor extends Color {
     return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
   }
 
-
   toString(format: ColorFormat | 'css') {
     switch (format) {
       case 'hex':
@@ -551,3 +674,81 @@ class HSLColor extends Color {
     return HSLColor.colorChannels;
   }
 }
+
+// https://www.w3.org/TR/css-color-4/#color-conversion-code
+function toOKLCH(color: Color) {
+  let rgb = color.toFormat('rgb');
+  let red = rgb.getChannelValue('red') / 255;
+  let green = rgb.getChannelValue('green') / 255;
+  let blue = rgb.getChannelValue('blue') / 255;
+  [red, green, blue] = lin_sRGB(red, green, blue);
+  let [x, y, z] = lin_sRGB_to_XYZ(red, green, blue);
+  let [l, a, b] = XYZ_to_OKLab(x, y, z);
+  return OKLab_to_OKLCH(l, a, b);
+}
+
+function OKLab_to_OKLCH(l: number, a: number, b: number): [number, number, number] {
+  var hue = Math.atan2(b, a) * 180 / Math.PI;
+  return [
+    l,
+    Math.sqrt(a ** 2 + b ** 2), // Chroma
+    hue >= 0 ? hue : hue + 360 // Hue, in degrees [0 to 360)
+  ];
+}
+
+function lin_sRGB(r: number, g: number, b: number): [number, number, number] {
+  // convert an array of sRGB values
+  // where in-gamut values are in the range [0 - 1]
+  // to linear light (un-companded) form.
+  // https://en.wikipedia.org/wiki/SRGB
+  // Extended transfer function:
+  // for negative values,  linear portion is extended on reflection of axis,
+  // then reflected power function is used.
+  return [lin_sRGB_component(r), lin_sRGB_component(g), lin_sRGB_component(b)];
+}
+
+function lin_sRGB_component(val: number) {
+  let sign = val < 0 ? -1 : 1;
+  let abs = Math.abs(val);
+
+  if (abs <= 0.04045) {
+    return val / 12.92;
+  }
+
+  return sign * (Math.pow((abs + 0.055) / 1.055, 2.4));
+}
+
+function lin_sRGB_to_XYZ(r: number, g: number, b: number) {
+  // convert an array of linear-light sRGB values to CIE XYZ
+  // using sRGB's own white, D65 (no chromatic adaptation)
+  const M = [
+    506752 / 1228815, 87881 / 245763,  12673 / 70218,
+    87098 / 409605,   175762 / 245763, 12673 / 175545,
+    7918 / 409605,    87881 / 737289,  1001167 / 1053270
+  ];
+  return multiplyMatrix(M, r, g, b);
+}
+
+function XYZ_to_OKLab(x: number, y: number, z: number) {
+  // Given XYZ relative to D65, convert to OKLab
+  const XYZtoLMS = [
+    0.8190224379967030, 0.3619062600528904, -0.1288737815209879,
+    0.0329836539323885, 0.9292868615863434,  0.0361446663506424,
+    0.0481771893596242, 0.2642395317527308,  0.6335478284694309
+  ];
+  const LMStoOKLab = [
+    0.2104542683093140,  0.7936177747023054, -0.0040720430116193,
+    1.9779985324311684, -2.4285922420485799,  0.4505937096174110,
+    0.0259040424655478,  0.7827717124575296, -0.8086757549230774
+  ];
+
+  let [a, b, c] = multiplyMatrix(XYZtoLMS, x, y, z);
+  return multiplyMatrix(LMStoOKLab, Math.cbrt(a), Math.cbrt(b), Math.cbrt(c));
+}
+
+function multiplyMatrix(m: number[], x: number, y: number, z: number): [number, number, number] {
+  let a = m[0] * x + m[1] * y + m[2] * z;
+  let b = m[3] * x + m[4] * y + m[5] * z;
+  let c = m[6] * x + m[7] * y + m[8] * z;
+  return [a, b, c];
+}