@multiplatform.one/theme 7.82.0 → 7.82.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.82.0",
+  "version": "7.82.2",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.82.0",
-    "@multiplatform.one/store": "^7.82.0",
+    "@multiplatform.one/platform": "^7.82.2",
+    "@multiplatform.one/store": "^7.82.2",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.82.0",
-    "@multiplatform.one/test-utils": "7.82.0",
+    "@multiplatform.one/config": "7.82.2",
+    "@multiplatform.one/test-utils": "7.82.2",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/hairlineToken.spec.ts

@@ -57,7 +57,7 @@ describe("LC-148 HAIRLINE-TOKEN: borderWidth small is the theme's hairline", ()
   });
 
   it("every other stop keeps the theme's own edge colour", () => {
-    for (const borderWidth of ["none", "medium", "large"] as const) {
+    for (const borderWidth of ["medium", "large"] as const) {
       expect(edges({ borderWidth })).toEqual({
         borderRadius: "$borderColor",
         surface: "$borderColor",
@@ -68,6 +68,16 @@ describe("LC-148 HAIRLINE-TOKEN: borderWidth small is the theme's hairline", ()
     }
   });
 
+  it("an overlay floored to the hairline at none paints the small stop's colour (LC-85)", () => {
+    expect(edges({ borderWidth: "none" })).toEqual({
+      borderRadius: "$borderColor",
+      surface: "$borderColor",
+      controlBorderOutlined: "$borderColor",
+      elevatedSurface: "$borderColorHairline",
+    });
+    expect(edges({ borderWidth: "none" }, "dark").elevatedSurface).toBe("transparent");
+  });
+
   it("a component's own edge colour takes the same step at small, and only there (FZ-7797)", () => {
     expect(edgeColorAt("$borderColor", "small")).toBe("$borderColorHairline");
     expect(edgeColorAt("$color6", "small")).toBe("$color5");

package/src/theme/resolveKnobs.spec.ts

@@ -743,15 +743,16 @@ describe("resolveKnobs", () => {
       expect(flat.borderWidth).toBe(hairlineBorderWidth);
     });
 
-    it("cardSurface edge follows borderWidth none (Axiom 3) and stays a hairline otherwise", () => {
-      expect(
-        resolveKnobs(knobsWith({ borderWidth: "none" })).knobProps.cardSurface.borderWidth,
-      ).toBe(0);
-      for (const borderWidth of ["small", "medium", "large"] as const) {
-        expect(resolveKnobs(knobsWith({ borderWidth })).knobProps.cardSurface.borderWidth).toBe(
-          hairlineBorderWidth,
-        );
+    it("cardSurface edge is 0 at none, the hairline at small and medium, the stop at large", () => {
+      const card = (borderWidth: Knobs["borderWidth"]) =>
+        resolveKnobs(knobsWith({ borderWidth })).knobProps.cardSurface;
+      expect(card("none").borderWidth).toBe(0);
+      for (const borderWidth of ["small", "medium"] as const) {
+        expect(card(borderWidth).borderWidth).toBe(hairlineBorderWidth);
+        expect(card(borderWidth).borderColor).toBe("$borderColorHairline");
       }
+      expect(card("large").borderWidth).toBe(2);
+      expect(card("large").borderColor).toBe("$borderColor");
     });
 
     it("cardSurface tracks the borderRadius knob (cap bites at full: 44px > the 16px panelPadding)", () => {
@@ -1087,7 +1088,7 @@ describe("resolveKnobs", () => {
         "light",
       );
       expect(light.knobProps.elevatedSurface.borderWidth).toBe(hairlineBorderWidth);
-      expect(light.knobProps.elevatedSurface.borderColor).toBe("$borderColor");
+      expect(light.knobProps.elevatedSurface.borderColor).toBe("$borderColorHairline");
       const dark = resolveKnobs(
         knobsWith({ fillStyle: "filled", borderWidth: "none" }),
         undefined,

package/src/theme/resolveKnobs.ts

@@ -707,6 +707,11 @@ export function resolveKnobs(
   const overlayElevationToken = overlayElevationMap[knobs.elevation];
   const overlayPaintProps = elevationPaint(overlayElevationToken);
   const overlayEdgeWidth = Math.max(borderWidthValue, borderWidthMap.small);
+  // LC-85's floor is the small stop, so the floored edge takes its colour too.
+  const overlayEdge = (color: string) =>
+    (smallEdge || knobs.borderWidth === "none") && overlayEdgeWidth >= borderWidthMap.medium
+      ? fainterEdge(color)
+      : color;
   const elevationChrome = elevationChromeFor(elevationToken);
   const textAccentColor = textAccentColorMap[knobs.textAccent] ?? "$color";
   // One input surface (DF-19 / Axiom 5 ONE SOURCE): Timeline's composer,
@@ -790,8 +795,14 @@ export function resolveKnobs(
         }
       : {
           backgroundColor: "$background",
-          borderColor: edgeColorAt("$borderColor", "small"),
-          borderWidth: knobs.borderWidth === "none" ? 0 : borderWidthMap.small,
+          borderColor:
+            knobs.borderWidth === "large" ? "$borderColor" : edgeColorAt("$borderColor", "small"),
+          borderWidth:
+            knobs.borderWidth === "none"
+              ? 0
+              : knobs.borderWidth === "large"
+                ? borderWidthMap.large
+                : borderWidthMap.small,
           borderRadius: containerRadiusValue,
           padding: paddingToken,
           ...cardLiftFor(cardElevationMap[knobs.elevation], scheme),
@@ -800,8 +811,8 @@ export function resolveKnobs(
     elevatedSurface: painted
       ? {
           backgroundColor: "$background",
-          borderColor: edge("$borderColor", Math.max(borderWidthValue, borderWidthMap.small)),
-          borderWidth: Math.max(borderWidthValue, borderWidthMap.small),
+          borderColor: overlayEdge("$borderColor"),
+          borderWidth: overlayEdgeWidth,
           borderRadius: radiusToken,
           elevation: undefined,
           ...scaleSmoothing,
@@ -810,7 +821,7 @@ export function resolveKnobs(
           backgroundColor: scheme === "dark" ? surface2.fill : "$background",
           // Light: an overlay fills the page's own white, so it always keeps at
           // least the hairline, even on a chromeless preset (FZ-8116).
-          borderColor: scheme === "dark" ? "transparent" : edge("$borderColor", overlayEdgeWidth),
+          borderColor: scheme === "dark" ? "transparent" : overlayEdge("$borderColor"),
           // Dark draws no edge at all: on iOS a transparent border on a sheet
           // mounted under a light OS painted the light $borderColor (FZ-8116).
           borderWidth: scheme === "dark" ? 0 : overlayEdgeWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"resolveKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/resolveKnobs.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"resolveKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/resolveKnobs.ts"],"names":[],"mappings":"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"}