@jobber/components-native 0.113.4-implement--94d34f8.2 → 0.113.5

package/dist/types/src/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
-export declare function AtlantisThemeContextProvider({ children, theme, onThemeChange, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/types/src/AtlantisThemeContext/index.d.ts

@@ -1,3 +1,3 @@
 export { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
-export type { EffectiveTheme, Theme, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";
+export type { Theme, AtlantisThemeContextProviderProps, AtlantisThemeContextValue, } from "./types";
 export { buildThemedStyles } from "./buildThemedStyles";

package/dist/types/src/AtlantisThemeContext/types.d.ts

@@ -1,13 +1,9 @@
 import type { iosTokens } from "@jobber/design";
 export interface AtlantisThemeContextValue {
     /**
-     * The selected theme.
+     * The active theme.
      */
     readonly theme: Theme;
-    /**
-     * The resolved theme used to select tokens.
-     */
-    readonly effectiveTheme: EffectiveTheme;
     /**
      * The design tokens for the current theme.
      */
@@ -22,19 +18,10 @@ export interface AtlantisThemeContextProviderProps {
      * The children to render.
      */
     readonly children: React.ReactNode;
-    /**
-     * Control the selected theme for this provider.
-     */
-    readonly theme?: Theme;
-    /**
-     * Called when children request a selected theme change through setTheme.
-     */
-    readonly onThemeChange?: (theme: Theme) => void;
     /**
      * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
      * This is dangerous because the children in this provider will not be able to change the theme.
      */
-    readonly dangerouslyOverrideTheme?: EffectiveTheme;
+    readonly dangerouslyOverrideTheme?: Theme;
 }
-export type Theme = "system" | EffectiveTheme;
-export type EffectiveTheme = "light" | "dark";
+export type Theme = "light" | "dark";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.113.4-implement--94d34f8.2+94d34f81",
+  "version": "0.113.5",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "94d34f81c5579bf7aec109cd129a94ea91aadf56"
+  "gitHead": "a39de5621289f06a4d21d021130ff191937cd851"
 }

package/src/ActivityIndicator/ActivityIndicator.stories.tsx

@@ -84,8 +84,8 @@ function OnSurfacesExample() {
  *     Rendering pane → "Emulate CSS media feature prefers-reduced-motion"
  *
  * The component will hide the rocking arcs and render a single static
- * ring in `color-icon` whose opacity pulses between 1.0 and 0.35 over a
- * 2-second alternate cycle.
+ * ring in `color-text--secondary` whose opacity pulses between 1.0 and 0.35
+ * over a 2-second alternate cycle.
  */
 export const ReducedMotion: Story = {
   render: () => <ActivityIndicator />,

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -160,7 +160,7 @@ export function ActivityIndicator({
       <ReducedMotionRing
         pixelSize={pixelSize}
         strokeWidth={strokeWidth}
-        ringColor={themeTokens["color-icon"]}
+        ringColor={themeTokens["color-text--secondary"]}
         style={style}
         testID={testID}
         a11yProps={a11yProps}
@@ -173,7 +173,7 @@ export function ActivityIndicator({
       size={resolvedSize}
       pixelSize={pixelSize}
       strokeWidth={strokeWidth}
-      arcColor={themeTokens["color-icon"]}
+      arcColor={themeTokens["color-text--secondary"]}
       trackColor={themeTokens["color-surface--active"]}
       style={style}
       testID={testID}

package/src/ActivityIndicator/guide.md

@@ -49,8 +49,8 @@ interface ActivityIndicatorProps {
 The previous wrapper accepted React Native's full `ActivityIndicatorProps` via
 spread. The new public API drops the following intentionally:
 
-- `color` — replaced by semantic theme tokens (`color-icon` for the arcs,
-  `color-surface--active` for the track). The single known consumer of
+- `color` — replaced by semantic theme tokens (`color-text--secondary` for the
+  arcs, `color-surface--active` for the track). The single known consumer of
   `color="white"` (`jobber-mobile/GalleryHeader`) is migrated as part of the
   `migrate-activityindicator` change in the jobber-mobile repository.
 - numeric `size` — sizing is constrained to the two design-system sizes (28px /
@@ -161,7 +161,9 @@ duration is a CSS literal on web and a matching constant on native (`1000ms`).
 When the operating system reports reduce-motion is enabled, the component:
 
 - Skips rendering the rotating layers and rocking arcs.
-- Renders a single static `<Circle>` ring in `tokens["color-icon"]`.
+- Renders a single static `<Circle>` ring in `tokens["color-text--secondary"]`.
+  The ring stands in for the hidden arcs, so it deliberately tracks the arc
+  colour.
 - Animates the ring's opacity between 1.0 and 0.35 over a 4-second ease-in-out
   alternate cycle (2s down, 2s up) so the indicator still reads as "busy"
   without rotational motion.
@@ -203,8 +205,8 @@ Both components share:
 - Sizes (28 px small, 44 px base)
 - Motion durations (`timing-indicator-arc`, `timing-indicator-cycle`,
   `timing-indicator-linear-rotate`) from the same `@jobber/design` source
-- Color tokens (`color-icon` for arcs, `color-surface--active` for track) from
-  the same `@jobber/design` source
+- Color tokens (`color-text--secondary` for arcs, `color-surface--active` for
+  track) from the same `@jobber/design` source
 - Reduced-motion fallback (opacity 1.0 ↔ 0.35, 2 s ease-in-out alternate)
 
 Documented divergences:

package/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx

@@ -2,43 +2,21 @@ import React from "react";
 import { act, renderHook } from "@testing-library/react-native";
 import { darkTokens, iosTokens } from "@jobber/design";
 import merge from "lodash/merge";
-import { type ColorSchemeName, useColorScheme } from "react-native";
 import {
   AtlantisThemeContextProvider,
   useAtlantisTheme,
 } from "./AtlantisThemeContext";
-import type {
-  AtlantisThemeContextProviderProps,
-  EffectiveTheme,
-} from "./types";
-
-jest.mock("react-native", () => {
-  const actual = jest.requireActual("react-native");
-
-  Object.defineProperty(actual, "useColorScheme", {
-    configurable: true,
-    value: jest.fn(),
-  });
-
-  return actual;
-});
+import type { AtlantisThemeContextProviderProps, Theme } from "./types";
 
 const expectedDarkTokens = merge({}, iosTokens, darkTokens);
 const expectedLightTokens = iosTokens;
-const mockUseColorScheme = useColorScheme as jest.MockedFunction<
-  typeof useColorScheme
->;
 
 function Wrapper({
   children,
-  theme,
-  onThemeChange,
   dangerouslyOverrideTheme,
 }: AtlantisThemeContextProviderProps) {
   return (
     <AtlantisThemeContextProvider
-      theme={theme}
-      onThemeChange={onThemeChange}
       dangerouslyOverrideTheme={dangerouslyOverrideTheme}
     >
       {children}
@@ -62,10 +40,6 @@ function WrapperWithOverride({
 }
 
 describe("ThemeContext", () => {
-  beforeEach(() => {
-    mockUseColorScheme.mockReturnValue("light");
-  });
-
   it("defaults to the light theme", () => {
     const { result } = renderHook(useAtlantisTheme, {
       wrapper: (props: AtlantisThemeContextProviderProps) => (
@@ -74,7 +48,6 @@ describe("ThemeContext", () => {
     });
 
     expect(result.current.theme).toBe("light");
-    expect(result.current.effectiveTheme).toBe("light");
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
@@ -87,81 +60,10 @@ describe("ThemeContext", () => {
 
     await act(async () => result.current.setTheme("dark"));
     expect(result.current.theme).toBe("dark");
-    expect(result.current.effectiveTheme).toBe("dark");
     expect(result.current.tokens).toEqual(expectedDarkTokens);
 
     await act(async () => result.current.setTheme("light"));
     expect(result.current.theme).toBe("light");
-    expect(result.current.effectiveTheme).toBe("light");
-    expect(result.current.tokens).toEqual(expectedLightTokens);
-  });
-
-  it("resolves the system theme from the OS color scheme", async () => {
-    mockUseColorScheme.mockReturnValue("dark");
-
-    const { result, rerender } = renderHook(useAtlantisTheme, {
-      wrapper: (props: AtlantisThemeContextProviderProps) => (
-        <Wrapper {...props} />
-      ),
-    });
-
-    await act(async () => result.current.setTheme("system"));
-    expect(result.current.theme).toBe("system");
-    expect(result.current.effectiveTheme).toBe("dark");
-    expect(result.current.tokens).toEqual(expectedDarkTokens);
-
-    mockUseColorScheme.mockReturnValue("light");
-    rerender({});
-
-    expect(result.current.theme).toBe("system");
-    expect(result.current.effectiveTheme).toBe("light");
-    expect(result.current.tokens).toEqual(expectedLightTokens);
-  });
-
-  it("uses a controlled selected theme", () => {
-    mockUseColorScheme.mockReturnValue("dark");
-
-    const { result } = renderHook(useAtlantisTheme, {
-      wrapper: (props: AtlantisThemeContextProviderProps) => (
-        <Wrapper {...props} theme="system" />
-      ),
-    });
-
-    expect(result.current.theme).toBe("system");
-    expect(result.current.effectiveTheme).toBe("dark");
-    expect(result.current.tokens).toEqual(expectedDarkTokens);
-  });
-
-  it("reports selected theme changes from a controlled provider", async () => {
-    const onThemeChange = jest.fn();
-    const { result } = renderHook(useAtlantisTheme, {
-      wrapper: (props: AtlantisThemeContextProviderProps) => (
-        <Wrapper {...props} theme="light" onThemeChange={onThemeChange} />
-      ),
-    });
-
-    await act(async () => result.current.setTheme("system"));
-
-    expect(onThemeChange).toHaveBeenCalledWith("system");
-    expect(result.current.theme).toBe("light");
-    expect(result.current.effectiveTheme).toBe("light");
-    expect(result.current.tokens).toEqual(expectedLightTokens);
-  });
-
-  it("falls back to light when system color scheme is unavailable", async () => {
-    mockUseColorScheme.mockReturnValue(
-      null as unknown as ReturnType<typeof useColorScheme>,
-    );
-
-    const { result } = renderHook(useAtlantisTheme, {
-      wrapper: (props: AtlantisThemeContextProviderProps) => (
-        <Wrapper {...props} />
-      ),
-    });
-
-    await act(async () => result.current.setTheme("system"));
-    expect(result.current.theme).toBe("system");
-    expect(result.current.effectiveTheme).toBe("light");
     expect(result.current.tokens).toEqual(expectedLightTokens);
   });
 
@@ -178,38 +80,15 @@ describe("ThemeContext", () => {
 
       // This hook shouldn't be affected by it because it's set to the light theme
       expect(result.current.theme).toBe("light");
-      expect(result.current.effectiveTheme).toBe("light");
       expect(result.current.tokens).toEqual(expectedLightTokens);
     });
 
     it.each([
-      {
-        defaultTheme: "light",
-        colorScheme: "dark",
-        expectedEffectiveTheme: "light",
-        expectedTokens: expectedLightTokens,
-      },
-      {
-        defaultTheme: "dark",
-        colorScheme: "light",
-        expectedEffectiveTheme: "dark",
-        expectedTokens: expectedDarkTokens,
-      },
-    ] as {
-      defaultTheme: EffectiveTheme;
-      colorScheme: ColorSchemeName;
-      expectedEffectiveTheme: EffectiveTheme;
-      expectedTokens: typeof iosTokens;
-    }[])(
+      { defaultTheme: "light", expectedTokens: expectedLightTokens },
+      { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+    ] as { defaultTheme: Theme; expectedTokens: typeof iosTokens }[])(
       "provides the dangerouslyOverrideTheme $defaultTheme tokens",
-      ({
-        defaultTheme,
-        colorScheme,
-        expectedEffectiveTheme,
-        expectedTokens,
-      }) => {
-        mockUseColorScheme.mockReturnValue(colorScheme);
-
+      ({ defaultTheme, expectedTokens }) => {
         const { result } = renderHook(useAtlantisTheme, {
           wrapper: (props: AtlantisThemeContextProviderProps) => (
             <WrapperWithOverride
@@ -220,7 +99,6 @@ describe("ThemeContext", () => {
         });
 
         expect(result.current.theme).toBe(defaultTheme);
-        expect(result.current.effectiveTheme).toBe(expectedEffectiveTheme);
         expect(result.current.tokens).toEqual(expectedTokens);
       },
     );

package/src/AtlantisThemeContext/AtlantisThemeContext.tsx

@@ -1,11 +1,10 @@
 import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
-import React, { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useContext, useState } from "react";
 import merge from "lodash/merge";
-import { Platform, useColorScheme } from "react-native";
+import { Platform } from "react-native";
 import type {
   AtlantisThemeContextProviderProps,
   AtlantisThemeContextValue,
-  EffectiveTheme,
   Theme,
 } from "./types";
 
@@ -19,7 +18,6 @@ const completeDarkTokens = merge({}, lightTokens, darkTokens);
 
 const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
   theme: "light",
-  effectiveTheme: "light",
   tokens: lightTokens,
   setTheme: () => {
     console.error(
@@ -30,36 +28,22 @@ const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
 
 export function AtlantisThemeContextProvider({
   children,
-  theme,
-  onThemeChange,
   dangerouslyOverrideTheme,
 }: AtlantisThemeContextProviderProps) {
-  const [uncontrolledTheme, setUncontrolledTheme] = useState<Theme>("light");
-  const colorScheme = useColorScheme();
+  // TODO: check last saved theme from local/device storage
+  const initialTheme: Theme = "light";
+  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
 
-  const setTheme = useCallback(
-    (nextTheme: Theme) => {
-      onThemeChange?.(nextTheme);
-
-      if (theme === undefined) {
-        setUncontrolledTheme(nextTheme);
-      }
-    },
-    [onThemeChange, theme],
-  );
-
-  const currentTheme = dangerouslyOverrideTheme ?? theme ?? uncontrolledTheme;
-  const effectiveTheme = resolveEffectiveTheme(currentTheme, colorScheme);
+  const currentTheme = dangerouslyOverrideTheme ?? globalTheme;
   const currentTokens =
-    effectiveTheme === "dark" ? completeDarkTokens : lightTokens;
+    currentTheme === "dark" ? completeDarkTokens : lightTokens;
 
   return (
     <AtlantisThemeContext.Provider
       value={{
         theme: currentTheme,
-        effectiveTheme,
         tokens: currentTokens,
-        setTheme,
+        setTheme: setGlobalTheme,
       }}
     >
       {children}
@@ -70,12 +54,3 @@ export function AtlantisThemeContextProvider({
 export function useAtlantisTheme() {
   return useContext(AtlantisThemeContext);
 }
-
-function resolveEffectiveTheme(
-  theme: Theme,
-  colorScheme: ReturnType<typeof useColorScheme>,
-): EffectiveTheme {
-  if (theme !== "system") return theme;
-
-  return colorScheme === "dark" ? "dark" : "light";
-}

package/src/AtlantisThemeContext/docs/AtlantisThemeContextBasicExample.tsx

@@ -14,17 +14,15 @@ function ChildrenComponent({
 }: {
   readonly message?: string;
 }) {
-  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, tokens, setTheme } = useAtlantisTheme();
 
   return (
     <View style={{ backgroundColor: tokens["color-surface"] }}>
       <Content>
         <Text>{message}</Text>
-        <Text>{`Selected theme: ${theme}`}</Text>
-        <Text>{`Effective theme: ${effectiveTheme}`}</Text>
+        <Text>{`Current theme: ${theme}`}</Text>
         <Text>Tokens can be accessed using tokens[token-name]</Text>
         <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
-        <Button label="Set system theme" onPress={() => setTheme("system")} />
         <Button label="Set dark theme" onPress={() => setTheme("dark")} />
         <Button label="Set light theme" onPress={() => setTheme("light")} />
       </Content>

package/src/AtlantisThemeContext/docs/AtlantisThemeContextForceThemeForProviderExample.tsx

@@ -14,17 +14,15 @@ function ChildrenComponent({
 }: {
   readonly message?: string;
 }) {
-  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, tokens, setTheme } = useAtlantisTheme();
 
   return (
     <View style={{ backgroundColor: tokens["color-surface"] }}>
       <Content>
         <Text>{message}</Text>
-        <Text>{`Selected theme: ${theme}`}</Text>
-        <Text>{`Effective theme: ${effectiveTheme}`}</Text>
+        <Text>{`Current theme: ${theme}`}</Text>
         <Text>Tokens can be accessed using tokens[token-name]</Text>
         <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
-        <Button label="Set system theme" onPress={() => setTheme("system")} />
         <Button label="Set dark theme" onPress={() => setTheme("dark")} />
         <Button label="Set light theme" onPress={() => setTheme("light")} />
       </Content>

package/src/AtlantisThemeContext/index.ts

@@ -3,7 +3,6 @@ export {
   useAtlantisTheme,
 } from "./AtlantisThemeContext";
 export type {
-  EffectiveTheme,
   Theme,
   AtlantisThemeContextProviderProps,
   AtlantisThemeContextValue,

package/src/AtlantisThemeContext/types.ts

@@ -2,15 +2,10 @@ import type { iosTokens } from "@jobber/design";
 
 export interface AtlantisThemeContextValue {
   /**
-   * The selected theme.
+   * The active theme.
    */
   readonly theme: Theme;
 
-  /**
-   * The resolved theme used to select tokens.
-   */
-  readonly effectiveTheme: EffectiveTheme;
-
   /**
    * The design tokens for the current theme.
    */
@@ -28,23 +23,11 @@ export interface AtlantisThemeContextProviderProps {
    */
   readonly children: React.ReactNode;
 
-  /**
-   * Control the selected theme for this provider.
-   */
-  readonly theme?: Theme;
-
-  /**
-   * Called when children request a selected theme change through setTheme.
-   */
-  readonly onThemeChange?: (theme: Theme) => void;
-
   /**
    * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
    * This is dangerous because the children in this provider will not be able to change the theme.
    */
-  readonly dangerouslyOverrideTheme?: EffectiveTheme;
+  readonly dangerouslyOverrideTheme?: Theme;
 }
 
-export type Theme = "system" | EffectiveTheme;
-
-export type EffectiveTheme = "light" | "dark";
+export type Theme = "light" | "dark";

package/src/Button/Button.tsx

@@ -231,7 +231,7 @@ function getIconColorVariation(
   }
 
   if (type === "primary" && variation !== "cancel") {
-    return "white";
+    return "surface"; // This should be a text color token instead, but the action label also uses this
   }
 
   switch (variation) {

package/src/ContentOverlay/ContentOverlay.tsx

@@ -99,7 +99,7 @@ export function ContentOverlay({
 
   const styles = useStyles();
   const { t } = useAtlantisI18n();
-  const { effectiveTheme, tokens } = useAtlantisTheme();
+  const { theme, tokens } = useAtlantisTheme();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   const behavior = computeContentOverlayBehavior(
@@ -327,7 +327,7 @@ export function ContentOverlay({
         the active theme here so descendants (e.g. the header title) resolve the
         correct themed tokens.
       */}
-      <AtlantisThemeContextProvider dangerouslyOverrideTheme={effectiveTheme}>
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme={theme}>
         <ContentOverlayKeyboardContext.Provider value={scrollEnabled}>
           {scrollEnabled ? (
             <BottomSheetKeyboardAwareScrollView