@multiplatform.one/theme 7.21.0 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.21.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.21.0",
-    "@multiplatform.one/store": "7.21.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.21.0",
-    "@multiplatform.one/test-utils": "7.21.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/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"}