@proyecto-viviana/solid-stately 0.4.0 → 0.4.1

package/src/color/Color.ts

@@ -16,6 +16,11 @@ import type {
   HSLColor,
   HSBColor,
 } from "./types";
+import {
+  getColorStringForLocale,
+  formatColorMessage,
+  type ColorStringKey,
+} from "./intl";
 
 // Channel ranges
 const RGB_CHANNEL_RANGE: ColorChannelRange = {
@@ -46,18 +51,6 @@ const PERCENT_CHANNEL_RANGE: ColorChannelRange = {
   pageSize: 10,
 };
 
-// Channel names (English only for now)
-const CHANNEL_NAMES: Record<ColorChannel, string> = {
-  hue: "Hue",
-  saturation: "Saturation",
-  brightness: "Brightness",
-  lightness: "Lightness",
-  red: "Red",
-  green: "Green",
-  blue: "Blue",
-  alpha: "Alpha",
-};
-
 // React Stately uses OKLCH for color names so that lightness is perceptually
 // consistent across hues.
 const ORANGE_LIGHTNESS_THRESHOLD = 0.68;
@@ -122,46 +115,36 @@ function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: n
     }
   }
 
+  // 2-decimal precision mirrors upstream RGBColor.toHSL (toFixedNumber(_, 2)); the
+  // old integer rounding silently shifted converted hues by up to half a degree,
+  // which surfaced as a 1-LSB gradient divergence in ColorArea.
   return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100),
+    h: toFixed(h * 360, 2),
+    s: toFixed(s * 100, 2),
+    l: toFixed(l * 100, 2),
   };
 }
 
 /**
- * Convert HSL to RGB.
+ * Convert HSL to RGB. Mirrors upstream @react-stately/color HSLColor.toRGB
+ * bit-for-bit — the Wikipedia "HSL to RGB alternative" formula
+ * (https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative) — so the
+ * float64 LSB rounding matches the oracle exactly. The classic hue2rgb algorithm
+ * is equivalent in the reals but rounds a channel differently at .5 boundaries
+ * (e.g. hsl(50,100%,50%) green computes to 212.5 → 213 here, 212 upstream).
+ * h is in degrees [0,360]; s and l are percentages [0,100].
  */
 function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
-  h /= 360;
-  s /= 100;
-  l /= 100;
-
-  let r: number, g: number, b: number;
-
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
+  const saturation = s / 100;
+  const lightness = l / 100;
+  const a = saturation * Math.min(lightness, 1 - lightness);
+  const fn = (n: number, k = (n + h / 30) % 12) =>
+    lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
 
   return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255),
+    r: Math.round(fn(0) * 255),
+    g: Math.round(fn(8) * 255),
+    b: Math.round(fn(4) * 255),
   };
 }
 
@@ -194,72 +177,38 @@ function rgbToHsb(r: number, g: number, b: number): { h: number; s: number; b: n
     }
   }
 
+  // 2-decimal precision mirrors upstream RGBColor.toHSB (toFixedNumber(_, 2)).
   return {
-    h: Math.round(h * 360),
-    s: Math.round(s * 100),
-    b: Math.round(v * 100),
+    h: toFixed(h * 360, 2),
+    s: toFixed(s * 100, 2),
+    b: toFixed(v * 100, 2),
   };
 }
 
 /**
- * Convert HSB to RGB.
+ * Convert HSB (HSV) to RGB. Mirrors upstream @react-stately/color HSBColor.toRGB
+ * bit-for-bit — the Wikipedia "HSV to RGB alternative" formula
+ * (https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative) — so the
+ * float64 LSB rounding matches the oracle exactly. The classic sextant algorithm
+ * is equivalent in the reals but can round a channel differently at .5 boundaries.
+ * h is in degrees [0,360]; s and b are percentages [0,100].
  */
 function hsbToRgb(h: number, s: number, b: number): { r: number; g: number; b: number } {
-  h /= 360;
-  s /= 100;
-  b /= 100;
-
-  let r: number, g: number, bl: number;
-
-  const i = Math.floor(h * 6);
-  const f = h * 6 - i;
-  const p = b * (1 - s);
-  const q = b * (1 - f * s);
-  const t = b * (1 - (1 - f) * s);
-
-  switch (i % 6) {
-    case 0:
-      r = b;
-      g = t;
-      bl = p;
-      break;
-    case 1:
-      r = q;
-      g = b;
-      bl = p;
-      break;
-    case 2:
-      r = p;
-      g = b;
-      bl = t;
-      break;
-    case 3:
-      r = p;
-      g = q;
-      bl = b;
-      break;
-    case 4:
-      r = t;
-      g = p;
-      bl = b;
-      break;
-    default:
-      r = b;
-      g = p;
-      bl = q;
-      break;
-  }
+  const saturation = s / 100;
+  const brightness = b / 100;
+  const fn = (n: number, k = (n + h / 60) % 6) =>
+    brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
 
   return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(bl * 255),
+    r: Math.round(fn(5) * 255),
+    g: Math.round(fn(3) * 255),
+    b: Math.round(fn(1) * 255),
   };
 }
 
-function getOklchHueName(l: number, c: number, h: number): [string, number] {
+function getOklchHueName(l: number, c: number, h: number, locale: string): [string, number] {
   if (c < GRAY_THRESHOLD) {
-    return ["gray", l];
+    return [getColorStringForLocale("gray", locale), l];
   }
 
   for (let i = 0; i < OKLCH_HUES.length; i += 1) {
@@ -280,27 +229,29 @@ function getOklchHueName(l: number, c: number, h: number): [string, number] {
         hueName = "yellow green";
       }
 
-      return [hueName.toLocaleLowerCase(), l];
+      const name = getColorStringForLocale(hueName as ColorStringKey, locale).toLocaleLowerCase(
+        locale
+      );
+      return [name, l];
     }
   }
 
-  return ["pink", l];
+  return [getColorStringForLocale("pink", locale).toLocaleLowerCase(locale), l];
 }
 
-function getColorNameFromColor(color: Color): string {
+function getColorNameFromColor(color: Color, locale: string): string {
   let [l, c, h] = toOKLCH(color);
-  const alpha = color.getChannelValue("alpha");
 
   if (l > 0.999) {
-    return alpha < 1 ? `white ${Math.round((1 - alpha) * 100)}% transparent` : "white";
+    return getColorStringForLocale("white", locale);
   }
 
   if (l < 0.001) {
-    return alpha < 1 ? `black ${Math.round((1 - alpha) * 100)}% transparent` : "black";
+    return getColorStringForLocale("black", locale);
   }
 
   let hue: string;
-  [hue, l] = getOklchHueName(l, c, h);
+  [hue, l] = getOklchHueName(l, c, h, locale);
 
   let chroma = "";
   if (c <= 0.1 && c >= GRAY_THRESHOLD) {
@@ -322,17 +273,34 @@ function getColorNameFromColor(color: Color): string {
     lightness = "very light";
   }
 
-  const name = [lightness, chroma, hue].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
-  if (alpha < 1) {
-    return `${Math.round((1 - alpha) * 100)}% transparent ${name}`.trim();
+  if (chroma) {
+    chroma = getColorStringForLocale(chroma as ColorStringKey, locale);
+  }
+  if (lightness) {
+    lightness = getColorStringForLocale(lightness as ColorStringKey, locale);
   }
 
-  return name;
+  const alpha = color.getChannelValue("alpha");
+  if (alpha < 1) {
+    const percentTransparent = new Intl.NumberFormat(locale, { style: "percent" }).format(1 - alpha);
+    return formatColorMessage("transparentColorName", locale, {
+      lightness,
+      chroma,
+      hue,
+      percentTransparent,
+    })
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
+  return formatColorMessage("colorName", locale, { lightness, chroma, hue })
+    .replace(/\s+/g, " ")
+    .trim();
 }
 
-function getHueNameFromColor(color: Color): string {
+function getHueNameFromColor(color: Color, locale: string): string {
   const [l, c, h] = toOKLCH(color);
-  const [name] = getOklchHueName(l, c, h);
+  const [name] = getOklchHueName(l, c, h, locale);
   return name;
 }
 
@@ -543,8 +511,8 @@ class RGBColorImpl implements Color {
     }
   }
 
-  getChannelName(channel: ColorChannel, _locale: string): string {
-    return CHANNEL_NAMES[channel] || channel;
+  getChannelName(channel: ColorChannel, locale: string): string {
+    return getColorStringForLocale(channel as ColorStringKey, locale);
   }
 
   getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
@@ -576,12 +544,12 @@ class RGBColorImpl implements Color {
     return ["red", "green", "blue"];
   }
 
-  getColorName(_locale: string): string {
-    return getColorNameFromColor(this);
+  getColorName(locale: string): string {
+    return getColorNameFromColor(this, locale);
   }
 
-  getHueName(_locale: string): string {
-    return getHueNameFromColor(this);
+  getHueName(locale: string): string {
+    return getHueNameFromColor(this, locale);
   }
 }
 
@@ -595,9 +563,11 @@ class HSLColorImpl implements Color {
   private alpha: number;
 
   constructor(hue: number, saturation: number, lightness: number, alpha: number = 1) {
-    this.hue = clamp(Math.round(hue) % 360, 0, 360);
-    this.saturation = clamp(Math.round(saturation), 0, 100);
-    this.lightness = clamp(Math.round(lightness), 0, 100);
+    // Store raw like upstream HSLColor's constructor — precision comes from the
+    // conversion (toFixed(_, 2)); rounding to integers here diverged from S2.
+    this.hue = clamp(hue % 360, 0, 360);
+    this.saturation = clamp(saturation, 0, 100);
+    this.lightness = clamp(lightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
   }
 
@@ -711,8 +681,8 @@ class HSLColorImpl implements Color {
     }
   }
 
-  getChannelName(channel: ColorChannel, _locale: string): string {
-    return CHANNEL_NAMES[channel] || channel;
+  getChannelName(channel: ColorChannel, locale: string): string {
+    return getColorStringForLocale(channel as ColorStringKey, locale);
   }
 
   getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
@@ -750,12 +720,12 @@ class HSLColorImpl implements Color {
     return ["hue", "saturation", "lightness"];
   }
 
-  getColorName(_locale: string): string {
-    return getColorNameFromColor(this);
+  getColorName(locale: string): string {
+    return getColorNameFromColor(this, locale);
   }
 
-  getHueName(_locale: string): string {
-    return getHueNameFromColor(this);
+  getHueName(locale: string): string {
+    return getHueNameFromColor(this, locale);
   }
 }
 
@@ -769,9 +739,10 @@ class HSBColorImpl implements Color {
   private alpha: number;
 
   constructor(hue: number, saturation: number, brightness: number, alpha: number = 1) {
-    this.hue = clamp(Math.round(hue) % 360, 0, 360);
-    this.saturation = clamp(Math.round(saturation), 0, 100);
-    this.brightness = clamp(Math.round(brightness), 0, 100);
+    // Store raw like upstream HSBColor's constructor (see HSLColorImpl).
+    this.hue = clamp(hue % 360, 0, 360);
+    this.saturation = clamp(saturation, 0, 100);
+    this.brightness = clamp(brightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
   }
 
@@ -884,8 +855,8 @@ class HSBColorImpl implements Color {
     }
   }
 
-  getChannelName(channel: ColorChannel, _locale: string): string {
-    return CHANNEL_NAMES[channel] || channel;
+  getChannelName(channel: ColorChannel, locale: string): string {
+    return getColorStringForLocale(channel as ColorStringKey, locale);
   }
 
   getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
@@ -923,12 +894,12 @@ class HSBColorImpl implements Color {
     return ["hue", "saturation", "brightness"];
   }
 
-  getColorName(_locale: string): string {
-    return getColorNameFromColor(this);
+  getColorName(locale: string): string {
+    return getColorNameFromColor(this, locale);
   }
 
-  getHueName(_locale: string): string {
-    return getHueNameFromColor(this);
+  getHueName(locale: string): string {
+    return getHueNameFromColor(this, locale);
   }
 }