@jobber/components-native 0.114.7 → 0.114.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.114.7",
+  "version": "0.114.8",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -123,5 +123,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "96774b47d51dfa7778ca1958ef0fe46cfd5099cf"
+  "gitHead": "849254e4ce108a25e35ab25eab411ab07dad69dd"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.guide.md

@@ -32,6 +32,17 @@ Consumers that need to persist or display the user's choice should use `theme`.
 Consumers that need to style non-Atlantis surfaces should usually use
 `effectiveTheme`.
 
+## Platform token composition
+
+Native themes start with the current platform's iOS or Android token set and
+then apply dark theme overrides. An override must preserve the native token's
+runtime shape. If a dark override is a primitive but the platform token is an
+object, the provider keeps the platform value.
+
+This matters for shadows: web dark shadow tokens are CSS strings, while native
+shadow tokens are React Native style objects. Keeping the platform object means
+consumers can safely continue to spread `tokens["shadow-base"]` in both themes.
+
 ## Controlled vs uncontrolled usage
 
 `AtlantisThemeContextProvider` supports both controlled and uncontrolled usage.

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -23,7 +23,12 @@ jest.mock("react-native", () => {
   return actual;
 });
 
-const expectedDarkTokens = merge({}, iosTokens, darkTokens);
+const expectedDarkTokens = {
+  ...merge({}, iosTokens, darkTokens),
+  "shadow-low": iosTokens["shadow-low"],
+  "shadow-base": iosTokens["shadow-base"],
+  "shadow-high": iosTokens["shadow-high"],
+};
 const expectedLightTokens = iosTokens;
 const mockUseColorScheme = useColorScheme as jest.MockedFunction<
   typeof useColorScheme
@@ -96,6 +101,24 @@ describe("ThemeContext", () => {
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
+  it.each(["shadow-low", "shadow-base", "shadow-high"] as const)(
+    "keeps the platform-native %s token in dark mode",
+    async shadowToken => {
+      const { result } = renderHook(useAtlantisTheme, {
+        wrapper: (props: AtlantisThemeContextProviderProps) => (
+          <Wrapper {...props} />
+        ),
+      });
+
+      await act(async () => result.current.setTheme("dark"));
+
+      expect(result.current.tokens[shadowToken]).toEqual(
+        iosTokens[shadowToken],
+      );
+      expect(typeof result.current.tokens[shadowToken]).toBe("object");
+    },
+  );
+
   it("resolves the system theme from the OS color scheme", async () => {
     mockUseColorScheme.mockReturnValue("dark");
 

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -1,6 +1,6 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
 import React, { createContext, useCallback, useContext, useState } from "react";
-import merge from "lodash/merge";
+import mergeWith from "lodash/mergeWith";
 import { Platform, useColorScheme } from "react-native";
 import type {
   AtlantisThemeContextProviderProps,
@@ -15,7 +15,19 @@ const lightTokens = Platform.select({
   default: () => androidTokens,
 })();
 
-const completeDarkTokens = merge({}, lightTokens, darkTokens);
+const completeDarkTokens = mergeWith(
+  {},
+  lightTokens,
+  darkTokens,
+  (platformValue, darkValue) => {
+    const platformValueIsObject =
+      typeof platformValue === "object" && platformValue !== null;
+    const darkValueIsObject =
+      typeof darkValue === "object" && darkValue !== null;
+
+    if (platformValueIsObject && !darkValueIsObject) return platformValue;
+  },
+);
 
 const defaultAtlantisThemeContextValue: AtlantisThemeContextValue = {
   theme: "light",