@multiplatform.one/theme 7.74.0 → 7.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.74.0",
+  "version": "7.75.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.74.0",
-    "@multiplatform.one/store": "^7.74.0",
+    "@multiplatform.one/platform": "^7.75.0",
+    "@multiplatform.one/store": "^7.75.0",
     "@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.74.0",
-    "@multiplatform.one/test-utils": "7.74.0",
+    "@multiplatform.one/config": "7.75.0",
+    "@multiplatform.one/test-utils": "7.75.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/IconSlot.spec.tsx

@@ -85,4 +85,18 @@ describe("IconSlot", () => {
     );
     expect(screen.getByTestId("icon").dataset.color).toBe("currentColor");
   });
+
+  it("FZ-8439: a bold glyph's currentColor outline takes the glyph's ink on native", () => {
+    function Stroked({ color, stroke }: { color?: string; stroke?: string }) {
+      return <span data-testid="stroked" data-color={color} data-stroke={stroke} />;
+    }
+    render(
+      <TamaguiProvider config={config.tamagui} defaultTheme="light" disableInjectCSS>
+        <IconSlot icon={<Stroked stroke="currentColor" />} color="#ffffff" />
+      </TamaguiProvider>,
+    );
+    const glyph = screen.getByTestId("stroked");
+    expect(glyph.getAttribute("data-stroke")).toBe(glyph.getAttribute("data-color"));
+    expect(glyph.getAttribute("data-stroke")).not.toBe("currentColor");
+  });
 });

package/src/theme/IconSlot.tsx

@@ -28,12 +28,22 @@ export function IconSlot({
       value && value !== "currentColor" ? value : color === "currentColor" ? undefined : color,
     );
   const render = (value: IconSlotValue): ReactNode => {
-    if (isValidElement<{ color?: string; size?: number; children?: ReactNode }>(value)) {
+    if (
+      isValidElement<{ color?: string; size?: number; stroke?: string; children?: ReactNode }>(
+        value,
+      )
+    ) {
       if (value.type === Fragment)
         return cloneElement(value, {}, Children.map(value.props.children, render));
+      const glyphInk = isWeb ? undefined : ink(value.props.color);
       return cloneElement(value, {
         ...(size == null || value.props.size != null ? {} : { size }),
-        ...(!isWeb ? { color: ink(value.props.color) } : {}),
+        ...(glyphInk === undefined ? {} : { color: glyphInk }),
+        // FZ-8439: react-native-svg resolves currentColor to black, so a bold
+        // glyph's outline stroke would ring its fill in black.
+        ...(glyphInk !== undefined && value.props.stroke === "currentColor"
+          ? { stroke: glyphInk }
+          : {}),
       });
     }
     if (

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

@@ -1 +1 @@
-{"version":3,"file":"IconSlot.d.ts","sourceRoot":"","sources":["../../src/theme/IconSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAI,GACL,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,aA4BA"}
+{"version":3,"file":"IconSlot.d.ts","sourceRoot":"","sources":["../../src/theme/IconSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEzF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAI,GACL,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,aAsCA"}