panelui-native 0.41.0 → 0.43.0

package/src/utils/color.ts

@@ -0,0 +1,246 @@
+/**
+ * Colour arithmetic, in the model a picker is shaped like.
+ *
+ * A picker's controls *are* HSV: a square of saturation against brightness
+ * under one hue, with the hue itself on a separate scale. Storing anything
+ * else means converting on every frame of a drag and, worse, losing the
+ * position of the thumb — a fully black colour is `#000` whatever its hue and
+ * saturation were, so a round trip through RGB throws away where the finger
+ * was. HSV is kept as the truth and everything here converts *out* of it.
+ *
+ * Every function is a worklet. The drag never leaves the UI thread, so the
+ * hue behind the square, the thumb fill and the preview swatch all need these
+ * on the same frame the finger moved, and a JS-only helper would put a bridge
+ * hop in the middle of that.
+ */
+
+/** A colour in the model the picker stores: hue, saturation, value, alpha. */
+export interface HsvaColor {
+  /** Hue in degrees, `0`–`360`. */
+  h: number;
+  /** Saturation, `0`–`1`. */
+  s: number;
+  /** Value — brightness — `0`–`1`. */
+  v: number;
+  /** Alpha, `0`–`1`. */
+  a: number;
+}
+
+/** How a colour is written when it leaves the picker. */
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+
+function clamp01(n: number) {
+  'worklet';
+  return n < 0 ? 0 : n > 1 ? 1 : n;
+}
+
+/** Hue wraps rather than clamps — 370° is 10°, and -10° is 350°. */
+function wrapHue(h: number) {
+  'worklet';
+  return ((h % 360) + 360) % 360;
+}
+
+/** HSV to 8-bit RGB. */
+export function hsvToRgb(h: number, s: number, v: number) {
+  'worklet';
+  const hue = wrapHue(h) / 60;
+  const sat = clamp01(s);
+  const val = clamp01(v);
+  const c = val * sat;
+  const x = c * (1 - Math.abs((hue % 2) - 1));
+  const m = val - c;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hue < 1) {
+    r = c;
+    g = x;
+  } else if (hue < 2) {
+    r = x;
+    g = c;
+  } else if (hue < 3) {
+    g = c;
+    b = x;
+  } else if (hue < 4) {
+    g = x;
+    b = c;
+  } else if (hue < 5) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+  };
+}
+
+/** 8-bit RGB to HSV. Hue is undefined for a grey, and comes back as `0`. */
+export function rgbToHsv(r: number, g: number, b: number) {
+  'worklet';
+  const rr = clamp01(r / 255);
+  const gg = clamp01(g / 255);
+  const bb = clamp01(b / 255);
+  const max = Math.max(rr, gg, bb);
+  const min = Math.min(rr, gg, bb);
+  const d = max - min;
+
+  let h = 0;
+  if (d !== 0) {
+    if (max === rr) h = 60 * (((gg - bb) / d) % 6);
+    else if (max === gg) h = 60 * ((bb - rr) / d + 2);
+    else h = 60 * ((rr - gg) / d + 4);
+  }
+
+  return { h: wrapHue(h), s: max === 0 ? 0 : d / max, v: max };
+}
+
+/** HSV to HSL, for `format="hsl"`. Both are cylinders; only the axis differs. */
+export function hsvToHsl(h: number, s: number, v: number) {
+  'worklet';
+  const val = clamp01(v);
+  const sat = clamp01(s);
+  const l = val * (1 - sat / 2);
+  const denominator = Math.min(l, 1 - l);
+  return { h: wrapHue(h), s: denominator === 0 ? 0 : (val - l) / denominator, l };
+}
+
+/**
+ * An `rgba()` string, which is what a style wants. Used for every animated
+ * fill in the picker, so it stays cheap: no allocation beyond the string, and
+ * no branch on the alpha.
+ */
+export function hsvToCss(h: number, s: number, v: number, a = 1) {
+  'worklet';
+  const { r, g, b } = hsvToRgb(h, s, v);
+  return `rgba(${r}, ${g}, ${b}, ${clamp01(a)})`;
+}
+
+function toHexPair(n: number) {
+  'worklet';
+  const clamped = n < 0 ? 0 : n > 255 ? 255 : Math.round(n);
+  return clamped < 16 ? `0${clamped.toString(16)}` : clamped.toString(16);
+}
+
+/**
+ * A `#rrggbb` string, gaining a `#rrggbbaa` alpha pair only when the colour is
+ * actually translucent — an opaque colour written with a trailing `ff` is the
+ * same colour spelled in a way half the CSS parsers in the world reject.
+ */
+export function hsvToHex(h: number, s: number, v: number, a = 1) {
+  'worklet';
+  const { r, g, b } = hsvToRgb(h, s, v);
+  const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
+  return a >= 1 ? base : `${base}${toHexPair(clamp01(a) * 255)}`;
+}
+
+/** Writes a stored colour out in one of the three formats a consumer asks for. */
+export function formatColor(color: HsvaColor, format: ColorFormat = 'hex') {
+  'worklet';
+  const { h, s, v, a } = color;
+  const alpha = clamp01(a);
+
+  if (format === 'rgb') {
+    const { r, g, b } = hsvToRgb(h, s, v);
+    return alpha >= 1
+      ? `rgb(${r}, ${g}, ${b})`
+      : `rgba(${r}, ${g}, ${b}, ${Math.round(alpha * 100) / 100})`;
+  }
+
+  if (format === 'hsl') {
+    const hsl = hsvToHsl(h, s, v);
+    const sat = Math.round(hsl.s * 100);
+    const light = Math.round(hsl.l * 100);
+    const hue = Math.round(hsl.h);
+    return alpha >= 1
+      ? `hsl(${hue}, ${sat}%, ${light}%)`
+      : `hsla(${hue}, ${sat}%, ${light}%, ${Math.round(alpha * 100) / 100})`;
+  }
+
+  return hsvToHex(h, s, v, alpha);
+}
+
+function expandShorthand(hex: string) {
+  let out = '';
+  for (let i = 0; i < hex.length; i++) out += hex[i]! + hex[i]!;
+  return out;
+}
+
+/**
+ * Reads `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`
+ * and `hsla()`, and returns `null` for anything else — including the named
+ * colours, which would mean shipping a lookup table of 148 words to parse a
+ * string a caller almost never writes.
+ *
+ * `null` rather than a thrown error or a silent black: a picker handed a value
+ * it cannot read should keep the one it has, and only a distinguishable "no"
+ * lets the caller do that.
+ */
+export function parseColor(input: string): HsvaColor | null {
+  const value = input.trim().toLowerCase();
+
+  if (value.startsWith('#')) {
+    let body = value.slice(1);
+    if (body.length === 3 || body.length === 4) body = expandShorthand(body);
+    if ((body.length !== 6 && body.length !== 8) || /[^0-9a-f]/.test(body)) return null;
+
+    const r = parseInt(body.slice(0, 2), 16);
+    const g = parseInt(body.slice(2, 4), 16);
+    const b = parseInt(body.slice(4, 6), 16);
+    const a = body.length === 8 ? parseInt(body.slice(6, 8), 16) / 255 : 1;
+    const { h, s, v } = rgbToHsv(r, g, b);
+    return { h, s, v, a };
+  }
+
+  const fn = /^(rgba?|hsla?)\(([^)]+)\)$/.exec(value);
+  if (!fn) return null;
+
+  // Both the comma and the space syntaxes, and the `/` that separates alpha in
+  // the space one.
+  const parts = fn[2]!.split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+
+  const num = (raw: string, scale: number) => {
+    const n = parseFloat(raw);
+    if (Number.isNaN(n)) return null;
+    return raw.endsWith('%') ? (n / 100) * scale : n;
+  };
+
+  const a = parts[3] === undefined ? 1 : num(parts[3], 1);
+  if (a === null) return null;
+
+  if (fn[1]!.startsWith('rgb')) {
+    const r = num(parts[0]!, 255);
+    const g = num(parts[1]!, 255);
+    const b = num(parts[2]!, 255);
+    if (r === null || g === null || b === null) return null;
+    const { h, s, v } = rgbToHsv(r, g, b);
+    return { h, s, v, a: clamp01(a) };
+  }
+
+  const h = num(parts[0]!, 360);
+  const sl = num(parts[1]!, 1);
+  const l = num(parts[2]!, 1);
+  if (h === null || sl === null || l === null) return null;
+
+  // HSL to HSV, so the picker only ever stores the one model.
+  const light = clamp01(l);
+  const sat = clamp01(parts[1]!.endsWith('%') ? sl : sl > 1 ? sl / 100 : sl);
+  const v = light + sat * Math.min(light, 1 - light);
+  return {
+    h: wrapHue(h),
+    s: v === 0 ? 0 : 2 * (1 - light / v),
+    v,
+    a: clamp01(a),
+  };
+}
+
+/** Whether `parseColor` can read this string. */
+export function isValidColor(input: string) {
+  return parseColor(input) !== null;
+}

package/theme.css

@@ -389,172 +389,185 @@
      * "All themes must have the same variables" otherwise.
      */
 
-    /* Moon — monochrome and high-contrast: pure black/white, electric blue accent,
-       hairline borders, tight corners. */
+    /*
+     * Moon — a near-black canvas under a lavender-blue accent, with elevation
+     * carried by a ladder of barely-separated surfaces and 1px hairlines
+     * rather than by shadow. Corners are tight and the type contrast is high.
+     *
+     * The character of this family lives in the *distance between* the
+     * surfaces, not in any one of them: #0f1011, #141516, #18191a and #191a1b
+     * are within a few points of each other, so a card on a panel on the
+     * canvas reads as three planes without any of them looking lighter than
+     * the room. Flattening that ladder to two values is what makes a dark
+     * theme look like a screenshot with the brightness turned down.
+     */
     @variant moon {
       --color-background: #ffffff;
-      --color-foreground: #171717;
+      --color-foreground: #08090a;
 
       --color-card: #ffffff;
-      --color-card-foreground: #171717;
+      --color-card-foreground: #08090a;
 
       --color-popover: #ffffff;
-      --color-popover-foreground: #171717;
+      --color-popover-foreground: #08090a;
 
       --color-overlay: #ffffff;
-      --color-overlay-foreground: #171717;
+      --color-overlay-foreground: #08090a;
 
-      --color-primary: #171717;
+      --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
 
       --color-secondary: rgba(0, 0, 0, 0.05);
-      --color-secondary-foreground: #171717;
+      --color-secondary-foreground: #08090a;
 
       --color-muted: rgba(0, 0, 0, 0.05);
-      --color-muted-foreground: #666666;
+      --color-muted-foreground: #6b6f76;
 
-      --color-accent: rgba(0, 0, 0, 0.05);
-      --color-accent-foreground: #171717;
+      --color-accent: rgba(0, 0, 0, 0.06);
+      --color-accent-foreground: #08090a;
 
-      --color-destructive: #e5484d;
+      --color-destructive: #eb5757;
       --color-destructive-foreground: #c62b30;
 
-      --color-info: #0070f3;
-      --color-info-foreground: #0060d1;
+      --color-info: #4ea7fc;
+      --color-info-foreground: #0b6ec4;
 
-      --color-success: #45a557;
-      --color-success-foreground: #297c3b;
+      --color-success: #27a644;
+      --color-success-foreground: #1c7a32;
 
-      --color-warning: #f5a623;
-      --color-warning-foreground: #a35200;
+      --color-warning: #f2c94c;
+      --color-warning-foreground: #8a6d0b;
 
-      --color-border: rgba(0, 0, 0, 0.09);
+      --color-border: rgba(0, 0, 0, 0.08);
       --color-input: rgba(0, 0, 0, 0.12);
-      --color-ring: #171717;
-
-      --color-surface: #fafafa;
-      --color-surface-secondary: #f4f4f4;
-      --color-surface-tertiary: #ededed;
-      --color-skeleton: rgba(0, 0, 0, 0.08);
-
-      --color-info-soft: rgba(0, 112, 243, 0.08);
-      --color-info-subtle: rgba(0, 112, 243, 0.06);
-      --color-success-soft: rgba(69, 165, 87, 0.1);
-      --color-success-subtle: rgba(69, 165, 87, 0.08);
-      --color-warning-soft: rgba(245, 166, 35, 0.1);
-      --color-warning-subtle: rgba(245, 166, 35, 0.08);
-      --color-destructive-soft: rgba(229, 72, 77, 0.1);
-      --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+      --color-ring: #5e6ad2;
+
+      --color-surface: #f5f6f6;
+      --color-surface-secondary: #f6f7f7;
+      --color-surface-tertiary: #eeeff1;
+      --color-skeleton: rgba(0, 0, 0, 0.07);
+
+      --color-info-soft: rgba(78, 167, 252, 0.1);
+      --color-info-subtle: rgba(78, 167, 252, 0.08);
+      --color-success-soft: rgba(39, 166, 68, 0.1);
+      --color-success-subtle: rgba(39, 166, 68, 0.08);
+      --color-warning-soft: rgba(242, 201, 76, 0.14);
+      --color-warning-subtle: rgba(242, 201, 76, 0.1);
+      --color-destructive-soft: rgba(235, 87, 87, 0.1);
+      --color-destructive-subtle: rgba(235, 87, 87, 0.08);
 
       /* syntax colours */
-      --color-code-keyword: #8250df;
-      --color-code-string: #0a7d55;
-      --color-code-number: #0550ae;
-      --color-code-comment: #8b949e;
+      --color-code-keyword: #5e6ad2;
+      --color-code-string: #1c7a32;
+      --color-code-number: #0b6ec4;
+      --color-code-comment: #8a8f98;
       --color-code-function: #6639ba;
       --color-code-property: #953800;
-      --color-code-punctuation: #57606a;
-      --color-code-inserted: #0a7d55;
+      --color-code-punctuation: #62666d;
+      --color-code-inserted: #1c7a32;
       --color-code-deleted: #cf222e;
 
       /* chart series, in order of prominence */
-      --color-chart-1: #0070f3;
-      --color-chart-2: #171717;
-      --color-chart-3: #7928ca;
-      --color-chart-4: #f5a623;
-      --color-chart-5: #0a9396;
-    
+      --color-chart-1: #5e6ad2;
+      --color-chart-2: #4ea7fc;
+      --color-chart-3: #27a644;
+      --color-chart-4: #f2c94c;
+      --color-chart-5: #7a7fad;
+
       /* Moon shape scale */
-      --radius-xs: 2px;
-      --radius-sm: 4px;
-      --radius-md: 5px;
-      --radius-lg: 6px;
-      --radius-xl: 8px;
-      --radius-2xl: 10px;
-      --radius-3xl: 14px;
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+      --radius-xl: 16px;
+      --radius-2xl: 24px;
+      --radius-3xl: 32px;
     }
 
     @variant moon-dark {
-      --color-background: #000000;
-      --color-foreground: #ededed;
+      --color-background: #010102;
+      --color-foreground: #f7f8f8;
 
-      --color-card: #0a0a0a;
-      --color-card-foreground: #ededed;
+      --color-card: #0f1011;
+      --color-card-foreground: #f7f8f8;
 
-      --color-popover: #101010;
-      --color-popover-foreground: #ededed;
+      --color-popover: #141516;
+      --color-popover-foreground: #f7f8f8;
 
-      --color-overlay: #191919;
-      --color-overlay-foreground: #ededed;
+      --color-overlay: #18191a;
+      --color-overlay-foreground: #f7f8f8;
 
-      --color-primary: #ededed;
-      --color-primary-foreground: #0a0a0a;
+      --color-primary: #5e6ad2;
+      --color-primary-foreground: #ffffff;
 
-      --color-secondary: rgba(255, 255, 255, 0.09);
-      --color-secondary-foreground: #ededed;
+      --color-secondary: rgba(255, 255, 255, 0.06);
+      --color-secondary-foreground: #f7f8f8;
 
-      --color-muted: rgba(255, 255, 255, 0.09);
-      --color-muted-foreground: #a1a1a1;
+      --color-muted: rgba(255, 255, 255, 0.06);
+      --color-muted-foreground: #8a8f98;
 
-      --color-accent: rgba(255, 255, 255, 0.09);
-      --color-accent-foreground: #ededed;
+      --color-accent: rgba(255, 255, 255, 0.08);
+      --color-accent-foreground: #f7f8f8;
 
-      --color-destructive: #e5484d;
-      --color-destructive-foreground: #ff6369;
+      --color-destructive: #eb5757;
+      --color-destructive-foreground: #ff8a8a;
 
-      --color-info: #0070f3;
-      --color-info-foreground: #52a8ff;
+      --color-info: #4ea7fc;
+      --color-info-foreground: #8ec5ff;
 
-      --color-success: #45a557;
-      --color-success-foreground: #62c073;
+      --color-success: #27a644;
+      --color-success-foreground: #4cc061;
 
-      --color-warning: #f5a623;
-      --color-warning-foreground: #f1a10d;
+      --color-warning: #f2c94c;
+      --color-warning-foreground: #f5d97a;
 
-      --color-border: rgba(255, 255, 255, 0.09);
-      --color-input: rgba(255, 255, 255, 0.14);
-      --color-ring: #ededed;
+      /* The hairlines are opaque, not translucent: the surface ladder is only
+         a few points wide, so a border mixed with whatever is under it would
+         read as a different line on each of them. */
+      --color-border: #23252a;
+      --color-input: #34343a;
+      --color-ring: #5e6ad2;
 
-      --color-surface: #0f0f0f;
-      --color-surface-secondary: #161616;
-      --color-surface-tertiary: #1d1d1d;
-      --color-skeleton: rgba(255, 255, 255, 0.11);
+      --color-surface: #0f1011;
+      --color-surface-secondary: #141516;
+      --color-surface-tertiary: #18191a;
+      --color-skeleton: rgba(255, 255, 255, 0.08);
 
-      --color-info-soft: rgba(0, 112, 243, 0.12);
-      --color-info-subtle: rgba(0, 112, 243, 0.18);
-      --color-success-soft: rgba(69, 165, 87, 0.1);
-      --color-success-subtle: rgba(69, 165, 87, 0.16);
-      --color-warning-soft: rgba(245, 166, 35, 0.1);
-      --color-warning-subtle: rgba(245, 166, 35, 0.16);
-      --color-destructive-soft: rgba(229, 72, 77, 0.1);
-      --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+      --color-info-soft: rgba(78, 167, 252, 0.16);
+      --color-info-subtle: rgba(78, 167, 252, 0.1);
+      --color-success-soft: rgba(39, 166, 68, 0.18);
+      --color-success-subtle: rgba(39, 166, 68, 0.12);
+      --color-warning-soft: rgba(242, 201, 76, 0.16);
+      --color-warning-subtle: rgba(242, 201, 76, 0.1);
+      --color-destructive-soft: rgba(235, 87, 87, 0.16);
+      --color-destructive-subtle: rgba(235, 87, 87, 0.1);
 
       /* syntax colours */
-      --color-code-keyword: #d2a8ff;
-      --color-code-string: #7ee787;
-      --color-code-number: #79c0ff;
-      --color-code-comment: #8b949e;
+      --color-code-keyword: #828fff;
+      --color-code-string: #4cc061;
+      --color-code-number: #8ec5ff;
+      --color-code-comment: #62666d;
       --color-code-function: #d2a8ff;
       --color-code-property: #ffa657;
-      --color-code-punctuation: #8b949e;
-      --color-code-inserted: #7ee787;
-      --color-code-deleted: #ff7b72;
+      --color-code-punctuation: #8a8f98;
+      --color-code-inserted: #4cc061;
+      --color-code-deleted: #ff8a8a;
 
       /* chart series, in order of prominence */
-      --color-chart-1: #3291ff;
-      --color-chart-2: #ededed;
-      --color-chart-3: #a855f7;
-      --color-chart-4: #fbbf24;
-      --color-chart-5: #2dd4bf;
-    
+      --color-chart-1: #5e6ad2;
+      --color-chart-2: #4ea7fc;
+      --color-chart-3: #27a644;
+      --color-chart-4: #f2c94c;
+      --color-chart-5: #7a7fad;
+
       /* Moon shape scale */
-      --radius-xs: 2px;
-      --radius-sm: 4px;
-      --radius-md: 5px;
-      --radius-lg: 6px;
-      --radius-xl: 8px;
-      --radius-2xl: 10px;
-      --radius-3xl: 14px;
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+      --radius-xl: 16px;
+      --radius-2xl: 24px;
+      --radius-3xl: 32px;
     }
 
     /* Grass — green accent on warm-neutral greys, with soft generous corners. */