@jobber/components-native 0.115.4 → 0.115.5

package/dist/docs/Elevations/Elevations.md

@@ -66,6 +66,13 @@ they map to our low/base/high pattern.
 | `--shadow-base` |        |
 | `--shadow-high` |        |
 
+### Dark mode
+
+On web and iOS, the dark theme keeps the same shadow offsets and blur and only
+raises the opacity, so elevated elements stay distinguishable against dark
+surfaces. On Android, the dark theme raises `elevation`, which makes the shadow
+larger and softer, and uses a fully opaque shadow colour.
+
 ## Mobile
 
 For mobile designs, the concept of elevation applies to both shadows and

package/dist/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/dist/src/AtlantisThemeContext/AtlantisThemeContext.js

@@ -1,4 +1,4 @@
-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";
@@ -7,7 +7,12 @@ const lightTokens = Platform.select({
     android: () => androidTokens,
     default: () => androidTokens,
 })();
-const completeDarkTokens = mergeWith({}, lightTokens, darkTokens, (platformValue, darkValue) => {
+const darkPlatformTokens = Platform.select({
+    ios: () => darkIosTokens,
+    android: () => darkAndroidTokens,
+    default: () => darkAndroidTokens,
+})();
+const completeDarkTokens = mergeWith({}, lightTokens, darkPlatformTokens, (platformValue, darkValue) => {
     const platformValueIsObject = typeof platformValue === "object" && platformValue !== null;
     const darkValueIsObject = typeof darkValue === "object" && darkValue !== null;
     if (platformValueIsObject && !darkValueIsObject)

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.test.js

@@ -9,9 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React from "react";
 import { act, renderHook } from "@testing-library/react-native";
-import { darkTokens, iosTokens } from "@jobber/design";
+import { androidTokens, darkAndroidTokens, darkIosTokens, iosTokens, } from "@jobber/design";
 import merge from "lodash/merge";
-import { useColorScheme } from "react-native";
+import { useColorScheme, } from "react-native";
 import { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
 jest.mock("react-native", () => {
     const actual = jest.requireActual("react-native");
@@ -21,7 +21,7 @@ jest.mock("react-native", () => {
     });
     return actual;
 });
-const expectedDarkTokens = Object.assign(Object.assign({}, 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;
 function Wrapper({ children, theme, onThemeChange, dangerouslyOverrideTheme, }) {
@@ -56,14 +56,35 @@ describe("ThemeContext", () => {
         expect(result.current.effectiveTheme).toBe("light");
         expect(result.current.tokens).toEqual(expectedLightTokens);
     }));
-    it.each(["shadow-low", "shadow-base", "shadow-high"])("keeps the platform-native %s token in dark mode", (shadowToken) => __awaiter(void 0, void 0, void 0, function* () {
+    it.each(["shadow-low", "shadow-base", "shadow-high"])("uses the dark platform-native %s token in dark mode", (shadowToken) => __awaiter(void 0, void 0, void 0, function* () {
         const { result } = renderHook(useAtlantisTheme, {
             wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
         });
         yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
-        expect(result.current.tokens[shadowToken]).toEqual(iosTokens[shadowToken]);
+        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;
+        // 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, } = require("react-native");
+            jest.replaceProperty(Platform, "OS", "android");
+            jest.spyOn(Platform, "select").mockImplementation(spec => spec.android);
+            android = Object.assign(Object.assign({}, require("@testing-library/react-native")), require("./AtlantisThemeContext"));
+        });
+        it.each(["shadow-low", "shadow-base", "shadow-high"])("uses the android %s token in light and dark mode", (shadowToken) => __awaiter(void 0, void 0, void 0, function* () {
+            const { result } = android.renderHook(android.useAtlantisTheme, {
+                wrapper: ({ children }) => (React.createElement(android.AtlantisThemeContextProvider, null, children)),
+            });
+            expect(result.current.tokens[shadowToken]).toEqual(androidTokens[shadowToken]);
+            yield android.act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
+            expect(result.current.tokens[shadowToken]).toEqual(darkAndroidTokens[shadowToken]);
+        }));
+    });
     it("resolves the system theme from the OS color scheme", () => __awaiter(void 0, void 0, void 0, function* () {
         mockUseColorScheme.mockReturnValue("dark");
         const { result, rerender } = renderHook(useAtlantisTheme, {