@jobber/components-native 0.115.4 → 0.115.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.115.4",
+  "version": "0.115.5",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,11 +73,12 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.121.0",
+    "@jobber/design": "0.121.1",
     "@jobber/hooks": "2.21.1",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
     "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-mcp": "^0.4.2",
     "@storybook/react-native-web-vite": "10.3.5",
     "@testing-library/react-native": "^13.3.3",
@@ -123,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "8efe7ed48c2c677ef66802b64d945c259f22a343"
+  "gitHead": "9b27100be34c36aa1d4717f298cea4388ab9277d"
 }

package/src/AtlantisThemeContext/AtlantisThemeContext.guide.md

@@ -35,13 +35,21 @@ Consumers that need to style non-Atlantis surfaces should usually use
 ## 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.
+then apply that platform's dark token set (`darkIosTokens` or
+`darkAndroidTokens` from `@jobber/design`). Each dark platform set is the web
+dark token set with dark platform overrides layered on top, defined in
+`packages/design/src/tokens/darkPlatformOverride.tokens.json`.
 
 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.
+shadow tokens are React Native style objects. The dark platform overrides
+replace the dark shadow strings with native shadow objects tuned for dark
+surfaces, so consumers can safely continue to spread `tokens["shadow-base"]` in
+both themes.
+
+An override must preserve the native token's runtime shape. If a dark token is a
+primitive but the platform token is an object, the provider keeps the platform
+value. Add a dark platform override when a token needs a different native value
+in dark mode.
 
 ## Controlled vs uncontrolled usage
 

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -1,12 +1,23 @@
 import React from "react";
 import { act, renderHook } from "@testing-library/react-native";
-import { darkTokens, iosTokens } from "@jobber/design";
+import type * as TestingLibrary from "@testing-library/react-native";
+import {
+  androidTokens,
+  darkAndroidTokens,
+  darkIosTokens,
+  iosTokens,
+} from "@jobber/design";
 import merge from "lodash/merge";
-import { type ColorSchemeName, useColorScheme } from "react-native";
+import {
+  type ColorSchemeName,
+  type Platform as PlatformModule,
+  useColorScheme,
+} from "react-native";
 import {
   AtlantisThemeContextProvider,
   useAtlantisTheme,
 } from "./AtlantisThemeContext";
+import type * as ThemeContextModule from "./AtlantisThemeContext";
 import type {
   AtlantisThemeContextProviderProps,
   EffectiveTheme,
@@ -23,12 +34,7 @@ jest.mock("react-native", () => {
   return actual;
 });
 
-const expectedDarkTokens = {
-  ...merge({}, iosTokens, darkTokens),
-  "shadow-low": iosTokens["shadow-low"],
-  "shadow-base": iosTokens["shadow-base"],
-  "shadow-high": iosTokens["shadow-high"],
-};
+const expectedDarkTokens = merge({}, iosTokens, darkIosTokens);
 const expectedLightTokens = iosTokens;
 const mockUseColorScheme = useColorScheme as jest.MockedFunction<
   typeof useColorScheme
@@ -102,7 +108,7 @@ describe("ThemeContext", () => {
   });
 
   it.each(["shadow-low", "shadow-base", "shadow-high"] as const)(
-    "keeps the platform-native %s token in dark mode",
+    "uses the dark platform-native %s token in dark mode",
     async shadowToken => {
       const { result } = renderHook(useAtlantisTheme, {
         wrapper: (props: AtlantisThemeContextProviderProps) => (
@@ -113,12 +119,58 @@ describe("ThemeContext", () => {
       await act(async () => result.current.setTheme("dark"));
 
       expect(result.current.tokens[shadowToken]).toEqual(
+        darkIosTokens[shadowToken],
+      );
+      expect(result.current.tokens[shadowToken]).not.toEqual(
         iosTokens[shadowToken],
       );
       expect(typeof result.current.tokens[shadowToken]).toBe("object");
     },
   );
 
+  describe("on android", () => {
+    let android!: typeof TestingLibrary & typeof ThemeContextModule;
+
+    // The provider picks platform tokens at import time, so it is loaded in an
+    // isolated registry after Platform is switched to android. This runs while
+    // collecting tests because the testing library registers cleanup hooks.
+    jest.isolateModules(() => {
+      const {
+        Platform,
+      }: { Platform: typeof PlatformModule } = require("react-native");
+      jest.replaceProperty(Platform, "OS", "android");
+      jest.spyOn(Platform, "select").mockImplementation(spec => spec.android);
+
+      android = {
+        ...require("@testing-library/react-native"),
+        ...require("./AtlantisThemeContext"),
+      };
+    });
+
+    it.each(["shadow-low", "shadow-base", "shadow-high"] as const)(
+      "uses the android %s token in light and dark mode",
+      async shadowToken => {
+        const { result } = android.renderHook(android.useAtlantisTheme, {
+          wrapper: ({ children }: AtlantisThemeContextProviderProps) => (
+            <android.AtlantisThemeContextProvider>
+              {children}
+            </android.AtlantisThemeContextProvider>
+          ),
+        });
+
+        expect(result.current.tokens[shadowToken]).toEqual(
+          androidTokens[shadowToken],
+        );
+
+        await android.act(async () => result.current.setTheme("dark"));
+
+        expect(result.current.tokens[shadowToken]).toEqual(
+          darkAndroidTokens[shadowToken],
+        );
+      },
+    );
+  });
+
   it("resolves the system theme from the OS color scheme", async () => {
     mockUseColorScheme.mockReturnValue("dark");
 

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -1,4 +1,9 @@
-import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
+import {
+  androidTokens,
+  darkAndroidTokens,
+  darkIosTokens,
+  iosTokens,
+} from "@jobber/design";
 import React, { createContext, useCallback, useContext, useState } from "react";
 import mergeWith from "lodash/mergeWith";
 import { Platform, useColorScheme } from "react-native";
@@ -15,10 +20,16 @@ const lightTokens = Platform.select({
   default: () => androidTokens,
 })();
 
+const darkPlatformTokens = Platform.select({
+  ios: () => darkIosTokens,
+  android: () => darkAndroidTokens,
+  default: () => darkAndroidTokens,
+})();
+
 const completeDarkTokens = mergeWith(
   {},
   lightTokens,
-  darkTokens,
+  darkPlatformTokens,
   (platformValue, darkValue) => {
     const platformValueIsObject =
       typeof platformValue === "object" && platformValue !== null;