@sigx/lynx-zero 0.4.9 → 0.5.0

package/src/theme/color-mix.ts

@@ -1,68 +1,68 @@
-/**
- * Engine-side color mixing.
- *
- * Lynx's CSS engine has no `color-mix()` and can't alpha-compose `var()`
- * colors — but theme palettes are plain JS data, so tints can be computed
- * where the palette lives instead of in CSS. `registerTheme()` uses this to
- * materialize the `*-soft` tokens (see `./registry.ts`).
- *
- * Accepted inputs are the same "engine-safe" color strings themes already
- * use: `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)`, `rgba(r, g, b, a)`.
- * Anything else (named colors, `oklch()`, `var()`) is not parseable here —
- * `mixColors` then falls back to the base color unchanged, which degrades to
- * a neutral surface rather than a wrong tint.
- */
-
-type Rgb = readonly [number, number, number];
-
-function parseColor(value: string): Rgb | undefined {
-  const v = value.trim();
-
-  if (v.startsWith('#')) {
-    const hex = v.slice(1);
-    if (hex.length === 3) {
-      const r = parseInt(hex[0] + hex[0], 16);
-      const g = parseInt(hex[1] + hex[1], 16);
-      const b = parseInt(hex[2] + hex[2], 16);
-      if ([r, g, b].some(Number.isNaN)) return undefined;
-      return [r, g, b];
-    }
-    if (hex.length === 6 || hex.length === 8) {
-      const r = parseInt(hex.slice(0, 2), 16);
-      const g = parseInt(hex.slice(2, 4), 16);
-      const b = parseInt(hex.slice(4, 6), 16);
-      if ([r, g, b].some(Number.isNaN)) return undefined;
-      return [r, g, b];
-    }
-    return undefined;
-  }
-
-  const m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(v);
-  if (m) {
-    const r = Number(m[1]);
-    const g = Number(m[2]);
-    const b = Number(m[3]);
-    if ([r, g, b].some((n) => n > 255)) return undefined;
-    return [r, g, b];
-  }
-
-  return undefined;
-}
-
-const toHex = (n: number): string => Math.round(n).toString(16).padStart(2, '0');
-
-/**
- * Mix `ratio` of `color` into `base` (linear sRGB per-channel, like
- * `color-mix(in srgb, color ratio, base)`), returning a hex string. If either
- * input can't be parsed, returns `base` unchanged.
- */
-export function mixColors(color: string, base: string, ratio: number): string {
-  const fg = parseColor(color);
-  const bg = parseColor(base);
-  // Non-finite ratios (NaN softMix etc.) are unmixable — fall back to the
-  // base rather than emitting `#NaNNaNNaN`.
-  if (!fg || !bg || !Number.isFinite(ratio)) return base;
-  const t = Math.min(1, Math.max(0, ratio));
-  const mix = (i: 0 | 1 | 2) => fg[i] * t + bg[i] * (1 - t);
-  return `#${toHex(mix(0))}${toHex(mix(1))}${toHex(mix(2))}`;
-}
+/**
+ * Engine-side color mixing.
+ *
+ * Lynx's CSS engine has no `color-mix()` and can't alpha-compose `var()`
+ * colors — but theme palettes are plain JS data, so tints can be computed
+ * where the palette lives instead of in CSS. `registerTheme()` uses this to
+ * materialize the `*-soft` tokens (see `./registry.ts`).
+ *
+ * Accepted inputs are the same "engine-safe" color strings themes already
+ * use: `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)`, `rgba(r, g, b, a)`.
+ * Anything else (named colors, `oklch()`, `var()`) is not parseable here —
+ * `mixColors` then falls back to the base color unchanged, which degrades to
+ * a neutral surface rather than a wrong tint.
+ */
+
+type Rgb = readonly [number, number, number];
+
+function parseColor(value: string): Rgb | undefined {
+  const v = value.trim();
+
+  if (v.startsWith('#')) {
+    const hex = v.slice(1);
+    if (hex.length === 3) {
+      const r = parseInt(hex[0] + hex[0], 16);
+      const g = parseInt(hex[1] + hex[1], 16);
+      const b = parseInt(hex[2] + hex[2], 16);
+      if ([r, g, b].some(Number.isNaN)) return undefined;
+      return [r, g, b];
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      if ([r, g, b].some(Number.isNaN)) return undefined;
+      return [r, g, b];
+    }
+    return undefined;
+  }
+
+  const m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(v);
+  if (m) {
+    const r = Number(m[1]);
+    const g = Number(m[2]);
+    const b = Number(m[3]);
+    if ([r, g, b].some((n) => n > 255)) return undefined;
+    return [r, g, b];
+  }
+
+  return undefined;
+}
+
+const toHex = (n: number): string => Math.round(n).toString(16).padStart(2, '0');
+
+/**
+ * Mix `ratio` of `color` into `base` (linear sRGB per-channel, like
+ * `color-mix(in srgb, color ratio, base)`), returning a hex string. If either
+ * input can't be parsed, returns `base` unchanged.
+ */
+export function mixColors(color: string, base: string, ratio: number): string {
+  const fg = parseColor(color);
+  const bg = parseColor(base);
+  // Non-finite ratios (NaN softMix etc.) are unmixable — fall back to the
+  // base rather than emitting `#NaNNaNNaN`.
+  if (!fg || !bg || !Number.isFinite(ratio)) return base;
+  const t = Math.min(1, Math.max(0, ratio));
+  const mix = (i: 0 | 1 | 2) => fg[i] * t + bg[i] * (1 - t);
+  return `#${toHex(mix(0))}${toHex(mix(1))}${toHex(mix(2))}`;
+}