@multiplatform.one/theme 7.20.0 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.20.0",
+  "version": "7.22.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -44,8 +44,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "7.20.0",
-    "@multiplatform.one/store": "7.20.0",
+    "@multiplatform.one/platform": "7.22.0",
+    "@multiplatform.one/store": "7.22.0",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -57,8 +57,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.20.0",
-    "@multiplatform.one/test-utils": "7.20.0",
+    "@multiplatform.one/config": "7.22.0",
+    "@multiplatform.one/test-utils": "7.22.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/defaults/neutralRamp.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * MPO-95, ruled C by Clay 2026-09-26: mpo's neutral ramp is its own hue-270
+ * ramp, signed off as a deliberate divergence from tamagui.dev's achromatic
+ * grays. This pins the design (the stops in `base.ts`), what the builder makes
+ * of it (it quantizes each stop to integer hsla, so 56.5% renders as 56%), and
+ * the file the gallery boards and their verifiers read. Changing the ramp is a
+ * new ruling: update the rulebook, the JSON and the gallery token block with it.
+ */
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+import { createThemesBuilder } from "../createThemes";
+import { defaultAccentTheme } from "./accent";
+import { defaultBaseTheme } from "./base";
+import { defaultBuilderOptions } from "./builderOptions";
+
+const signedOffLightness = {
+  light: [99.5, 98.2, 95.2, 92.5, 90, 87, 82.5, 75, 56.5, 46, 40, 14],
+  dark: [8.7, 10.5, 13.5, 16, 18.5, 21.5, 25.5, 32, 43, 54, 62.5, 94],
+} as const;
+
+/**
+ * Read off the rendered FileUpload dropzone (Storybook, Chromium, DPR 2) when
+ * MPO-95 was filed. These are what a user sees; everything else is derived.
+ */
+const measured = [
+  ["light", 3, "rgb(243, 242, 243)"],
+  ["light", 6, "rgb(222, 220, 224)"],
+  ["light", 9, "rgb(143, 136, 150)"],
+  ["dark", 9, "rgb(110, 103, 116)"],
+  ["light", 12, "rgb(36, 34, 38)"],
+  ["dark", 12, "rgb(240, 239, 241)"],
+] as const;
+
+type Scheme = "light" | "dark";
+type Themes = Record<string, Record<string, string>>;
+
+const built = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Themes;
+
+// Vite rewrites import.meta.url to an http URL; resolve from cwd (public/theme).
+const rampFile = JSON.parse(
+  readFileSync(join(process.cwd(), "../../docs/design/measured/mpo-neutral-ramp.json"), "utf8"),
+) as Record<Scheme, string[]>;
+
+const OPAQUE_HSL = /^hsla?\(\s*([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*1)?\s*\)$/;
+
+function hslaToRgb(value: string): [number, number, number] {
+  const match = value.match(OPAQUE_HSL);
+  if (!match) throw new Error(`not an opaque hsl(a) colour: ${value}`);
+  const [h, s, l] = [Number(match[1]), Number(match[2]) / 100, Number(match[3]) / 100];
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - chroma / 2;
+  const sector = Math.floor(h / 60) % 6;
+  const [r, g, b] = [
+    [chroma, x, 0],
+    [x, chroma, 0],
+    [0, chroma, x],
+    [0, x, chroma],
+    [x, 0, chroma],
+    [chroma, 0, x],
+  ][sector];
+  return [r, g, b].map((channel) => Math.round((channel + m) * 255)) as [number, number, number];
+}
+
+const toHex = (value: string) =>
+  `#${hslaToRgb(value)
+    .map((channel) => channel.toString(16).padStart(2, "0"))
+    .join("")}`;
+
+const builtRamp = (scheme: Scheme) =>
+  Array.from({ length: 12 }, (_, i) => built[scheme][`color${i + 1}`]);
+
+describe("MPO-95: the neutral ramp is mpo's hue-270 ramp", () => {
+  it("base.ts declares the signed-off stops: hue 270, 6% saturation, twelve lightnesses", () => {
+    expect(defaultBaseTheme.lightPalette).toEqual(
+      signedOffLightness.light.map((l) => `hsla(270, 6%, ${l}%, 1)`),
+    );
+    expect(defaultBaseTheme.darkPalette).toEqual(
+      signedOffLightness.dark.map((l) => `hsla(270, 6%, ${l}%, 1)`),
+    );
+  });
+
+  for (const [scheme, step, rgb] of measured) {
+    it(`${scheme} $color${step} builds to the measured ${rgb}`, () => {
+      expect(`rgb(${hslaToRgb(built[scheme][`color${step}`]).join(", ")})`).toBe(rgb);
+    });
+  }
+
+  for (const scheme of ["light", "dark"] as const) {
+    it(`the built ${scheme} ramp is mpo-neutral-ramp.json, step for step`, () => {
+      expect(builtRamp(scheme).map(toHex)).toEqual(rampFile[scheme]);
+    });
+  }
+
+  it("the tint survives the builder's rounding: only light $color1 lands on pure white", () => {
+    const achromatic = (hex: string) =>
+      new Set([hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)]).size === 1;
+    expect(rampFile.light.filter(achromatic)).toEqual(["#ffffff"]);
+    expect(rampFile.dark.filter(achromatic)).toEqual([]);
+  });
+});

package/src/theme/resolveKnobs.spec.ts

@@ -577,6 +577,74 @@ describe("resolveKnobs", () => {
       expect(knobProps.featureSurface.shadowRadius).toBe(12);
       expect(knobProps.featureSurface).not.toHaveProperty("borderWidth");
     });
+
+    it("featureSurface keeps $10 / $6 at the default knobs and every other stop moves them (MPO-21 GL-59)", () => {
+      expect(defaultKnobs.borderRadius).toBe("medium");
+      expect(defaultKnobs.space).toBe("medium");
+      for (const borderRadius of ["none", "small", "large", "full"] as const) {
+        expect(
+          resolveKnobs(knobsWith({ borderRadius })).knobProps.featureSurface.borderRadius,
+          borderRadius,
+        ).not.toBe("$10");
+      }
+      for (const space of ["small", "large"] as const) {
+        expect(resolveKnobs(knobsWith({ space })).knobProps.featureSurface.padding, space).not.toBe(
+          "$6",
+        );
+      }
+    });
+
+    it("featureSurface radius follows the radius knob, one token per stop around $10, uncapped by space", () => {
+      const expected = {
+        none: "$0",
+        small: "$9",
+        medium: "$10",
+        large: "$11",
+        full: "$12",
+      } as const;
+      for (const [borderRadius, token] of Object.entries(expected)) {
+        for (const space of ["small", "medium", "large"] as const) {
+          expect(
+            resolveKnobs(knobsWith({ borderRadius: borderRadius as Knobs["borderRadius"], space }))
+              .knobProps.featureSurface.borderRadius,
+            `${borderRadius}/${space}`,
+          ).toBe(token);
+        }
+      }
+    });
+
+    it("featureSurface padding follows the space knob, one token per stop around $6", () => {
+      const expected = { small: "$5", medium: "$6", large: "$7" } as const;
+      for (const [space, token] of Object.entries(expected)) {
+        for (const borderRadius of ["none", "small", "medium", "large", "full"] as const) {
+          expect(
+            resolveKnobs(knobsWith({ borderRadius, space: space as Knobs["space"] })).knobProps
+              .featureSurface.padding,
+            `${borderRadius}/${space}`,
+          ).toBe(token);
+        }
+      }
+    });
+
+    it("compact density steps featureSurface padding through the space knob", () => {
+      const { knobProps } = resolveKnobs(applyDensity(knobsWith({ density: "compact" })));
+      expect(knobProps.featureSurface.padding).toBe("$5");
+      expect(knobProps.featureSurface.borderRadius).toBe("$10");
+    });
+
+    it("featureSurface never clips a child at its inset: padding >= radius x (1 - 1/sqrt 2) at every stop pair", () => {
+      for (const borderRadius of ["none", "small", "medium", "large", "full"] as const) {
+        for (const space of ["small", "medium", "large"] as const) {
+          const { featureSurface } = resolveKnobs(knobsWith({ borderRadius, space })).knobProps;
+          const radiusPx = (tokens.radius as any)[featureSurface.borderRadius.slice(1)]
+            .val as number;
+          const paddingPx = (tokens.space as any)[featureSurface.padding.slice(1)].val as number;
+          expect(paddingPx, `${borderRadius}/${space}`).toBeGreaterThanOrEqual(
+            radiusPx * (1 - Math.SQRT1_2),
+          );
+        }
+      }
+    });
   });
 
   // ── container radius cap (Axiom 1 CLIP) ──────────────────
@@ -695,7 +763,7 @@ describe("resolveKnobs", () => {
       }
     });
 
-    it("smooth × none: nothing to smooth except the fixed-radius featureSurface", () => {
+    it("smooth × none: nothing to smooth, featureSurface included", () => {
       const { knobProps } = resolveKnobs(
         knobsWith({ cornerSmoothing: "smooth", borderRadius: "none" }),
       );
@@ -705,9 +773,7 @@ describe("resolveKnobs", () => {
       expect(knobProps.containerRadius).not.toHaveProperty("className");
       expect(knobProps.cardSurface).not.toHaveProperty("className");
       expect(knobProps.elevatedSurface).not.toHaveProperty("className");
-      // featureSurface's radius is fixed ($10, knob-independent) — its arc
-      // exists at every knob value, so it smooths.
-      expect(knobProps.featureSurface.className).toBe(cornerSmoothClassName);
+      expect(knobProps.featureSurface).not.toHaveProperty("className");
     });
 
     it("smooth × full: pill/circle identity fragments ignore smoothing (R-BINARY/R-PILL)", () => {

package/src/theme/resolveKnobs.ts

@@ -114,6 +114,24 @@ const panelPaddingMap = {
   large: "$6",
 } as const;
 
+// Feature tier (SF-FEATURE, MPO-21 GL-59 ruling B): the Bento recipe's $10
+// radius and $6 inset at the default stops, one token per stop either side.
+// Uncapped by padding: the tightest pair (full 50 over small 24) still keeps
+// a child corner at the inset inside the arc (padding >= radius x 0.29).
+const featureRadiusMap = {
+  none: "$0",
+  small: "$9",
+  medium: "$10",
+  large: "$11",
+  full: "$12",
+} as const;
+
+const featurePaddingMap = {
+  small: "$5",
+  medium: "$6",
+  large: "$7",
+} as const;
+
 // ── Page-title step (D-11 hero-H1 dial) ───────────────────────
 // The one canonical definition of how big a page title is. On the heading
 // scale (1.4x Inter, defaults/fonts.ts) $8 = 32px and $10 = 64px, so
@@ -590,8 +608,7 @@ export function resolveKnobs(
   // Capped container fragments stay plain arcs at every knob (the Axiom 1
   // cap = padding px, which superellipse corners under-fill, so the cap
   // remains a safe over-approximation) and smooth whenever a nonzero arc
-  // exists. featureSurface's radius is fixed ($10, knob-independent), so it
-  // smooths whenever the knob says smooth.
+  // exists. featureSurface smooths on the same rule: `none` has no arc.
   const smoothing = cornerSmoothingStyle[knobs.cornerSmoothing ?? "round"];
   const scaleSmoothing =
     knobs.borderRadius === "none" || knobs.borderRadius === "full" ? undefined : smoothing;
@@ -704,15 +721,15 @@ export function resolveKnobs(
     },
     featureSurface: {
       backgroundColor: "$background",
-      borderRadius: "$10",
-      padding: "$6",
+      borderRadius: featureRadiusMap[knobs.borderRadius],
+      padding: featurePaddingMap[knobs.space],
       // Bento marketing/auth card shadow: ~0px 9px 12px rgba(0,0,0,0.02) —
       // softer/wider than any elevationMap token, so explicit shadow props.
       shadowColor: "rgba(0,0,0,0.02)",
       shadowOffset: { width: 0, height: 9 },
       shadowOpacity: 1,
       shadowRadius: 12,
-      ...smoothing,
+      ...containerSmoothing,
     },
     inputSurface: { borderWidth: borderWidthValue },
     panelPadding: { padding: paddingToken },

package/types/theme/resolveKnobs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/resolveKnobs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,SAAS,CAAC;AAU9D,OAAO,KAAK,EAA8B,KAAK,EAAE,cAAc,EAAc,MAAM,SAAS,CAAC;AAE7F,OAAO,KAAK,EAOV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,WAAW,CAAC;AAKnB;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAI/D,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAIlE,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAU3E;AAID,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAqDX;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CAErF;AA0BD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,GACpB,MAAM,GAAG,MAAM,CAIjB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,SAAS,CAIrF;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AAErF,MAAM,WAAW,uBAAuB;IACtC,2BAA2B,EAAE,eAAe,CAAC;IAC7C,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,eAAe,EAC1B,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,MAAM,GACZ,uBAAuB,GAAG,SAAS,CAQrC;AAuFD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEL,CAAC;AAEjE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEnB,CAAC;AAE1D,sFAAsF;AACtF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AA8O3C,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,CAAC,EAAE,iBAAiB,EAC5B,MAAM,GAAE,WAAqB,EAC7B,WAAW,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAChC,aAAa,CAyNf"}
+{"version":3,"file":"resolveKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/resolveKnobs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,SAAS,CAAC;AAU9D,OAAO,KAAK,EAA8B,KAAK,EAAE,cAAc,EAAc,MAAM,SAAS,CAAC;AAE7F,OAAO,KAAK,EAOV,iBAAiB,EAEjB,aAAa,EAEd,MAAM,WAAW,CAAC;AAKnB;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAI/D,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAIlE,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAU3E;AAID,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC;AAuEX;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CAErF;AA0BD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,GACpB,MAAM,GAAG,MAAM,CAIjB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,SAAS,CAIrF;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AAErF,MAAM,WAAW,uBAAuB;IACtC,2BAA2B,EAAE,eAAe,CAAC;IAC7C,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC1C,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,eAAe,EAC1B,WAAW,EAAE,OAAO,EACpB,KAAK,EAAE,MAAM,GACZ,uBAAuB,GAAG,SAAS,CAQrC;AAuFD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEL,CAAC;AAEjE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEnB,CAAC;AAE1D,sFAAsF;AACtF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AA8O3C,wBAAgB,YAAY,CAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,CAAC,EAAE,iBAAiB,EAC5B,MAAM,GAAE,WAAqB,EAC7B,WAAW,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAChC,aAAa,CAwNf"}