@stigmer/theme 3.1.8 → 3.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stigmer/theme",
-  "version": "3.1.8",
+  "version": "3.1.10",
   "description": "Design tokens, CSS custom properties, and utility functions for Stigmer UI components",
   "license": "Apache-2.0",
   "type": "module",

package/presets/monochrome.css

@@ -77,7 +77,10 @@
   --stgm-accent: oklch(0.25 0 0);
   --stgm-accent-foreground: oklch(0.96 0 0);
   --stgm-border: oklch(0.27 0 0);
-  --stgm-input: oklch(0.27 0 0);
+  /* Sits above border: --stgm-input also fills the Switch off-track, which
+     must clear the surface-separation floor against popover (0.24) — see the
+     contract surface pair in contract/pairs.ts. */
+  --stgm-input: oklch(0.32 0 0);
   --stgm-input-bg: oklch(0.21 0 0);
   --stgm-ring: oklch(0.96 0 0);
   --stgm-chart-1: oklch(0.85 0 0);

package/src/contract/__tests__/color.test.ts

@@ -48,6 +48,19 @@ describe("lightnessDelta", () => {
     expect(lightnessDelta("oklch(0.21 0 0)", "oklch(0.145 0 0)")).toBeCloseTo(0.065, 3);
     expect(lightnessDelta("white", "white")).toBeCloseTo(0, 5);
   });
+
+  it("composites a translucent fill over the surface first", () => {
+    // The default dark --stgm-input (20% white) over the popover surface:
+    // raw white would report a delta near 0.73; the painted fill is far
+    // dimmer but still clearly separated.
+    const delta = lightnessDelta("oklch(1 0 0 / 20%)", "oklch(0.269 0 0)");
+    expect(delta).toBeGreaterThan(0.045);
+    expect(delta).toBeLessThan(0.5);
+  });
+
+  it("rejects a translucent surface (nothing to composite onto)", () => {
+    expect(() => lightnessDelta("white", "oklch(1 0 0 / 14%)")).toThrow(/opaque surface/);
+  });
 });
 
 describe("isColorValue", () => {

package/src/contract/color.ts

@@ -70,10 +70,24 @@ export function contrastRatio(
 }
 
 /**
- * Perceptual lightness difference (OKLCH L, 0..1) between two opaque token
- * values. Used for surface-separation checks where WCAG has no defined
- * threshold.
+ * Perceptual lightness difference (OKLCH L, 0..1) between a fill and the
+ * surface it renders over. Used for surface-separation checks where WCAG
+ * has no defined threshold.
+ *
+ * A translucent fill (e.g. the default dark `--stgm-input: oklch(1 0 0 / 20%)`)
+ * is composited over the surface first, so the delta measures what the user
+ * actually sees — a raw translucent white would otherwise report L=1. The
+ * surface must be opaque; a translucent surface would itself need a backdrop
+ * to resolve, and no declared surface pair renders on one (caller error,
+ * matching {@link contrastRatio}'s posture).
  */
-export function lightnessDelta(valueA: string, valueB: string): number {
-  return Math.abs(toOklch(parseColor(valueA)).l - toOklch(parseColor(valueB)).l);
+export function lightnessDelta(fillValue: string, surfaceValue: string): number {
+  const surface = parseColor(surfaceValue);
+  if ((surface.alpha ?? 1) < 1) {
+    throw new Error(
+      `Surface "${surfaceValue}" is translucent — surface pairs must render on an opaque surface`,
+    );
+  }
+  const fill = compositeOver(parseColor(fillValue), surface);
+  return Math.abs(toOklch(fill).l - toOklch(surface).l);
 }

package/src/contract/pairs.ts

@@ -167,4 +167,6 @@ export const CONTRAST_PAIRS: readonly ContrastPair[] = [
 export const SURFACE_PAIRS: readonly ContrastPair[] = [
   pair("--stgm-muted-subtle", "--stgm-background", "surface", "user message bubble on thread background (borderless)", ["dark"]),
   pair("--stgm-muted", "--stgm-background", "surface", "code blocks, muted panels on the page (borderless)", ["dark"]),
+  pair("--stgm-input", "--stgm-popover", "surface", "Switch off-state track on dialog surface (ShareAgentDialog)", ["dark"]),
+  pair("--stgm-primary", "--stgm-popover", "surface", "Switch on-state track on dialog surface (ShareAgentDialog)", ["dark"]),
 ];

package/src/presets/monochrome.css

@@ -77,7 +77,10 @@
   --stgm-accent: oklch(0.25 0 0);
   --stgm-accent-foreground: oklch(0.96 0 0);
   --stgm-border: oklch(0.27 0 0);
-  --stgm-input: oklch(0.27 0 0);
+  /* Sits above border: --stgm-input also fills the Switch off-track, which
+     must clear the surface-separation floor against popover (0.24) — see the
+     contract surface pair in contract/pairs.ts. */
+  --stgm-input: oklch(0.32 0 0);
   --stgm-input-bg: oklch(0.21 0 0);
   --stgm-ring: oklch(0.96 0 0);
   --stgm-chart-1: oklch(0.85 0 0);