@jobber/components-native 0.106.0 → 0.107.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.106.0",
+  "version": "0.107.0",
   "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": "b13d0074cac7624ef3b8efa7e79e26697d9e15a6"
+  "gitHead": "5e02a8ecc5f282d152c92e18dde04a27d401ecf5"
 }

package/src/ActivityIndicator/ActivityIndicator.stories.tsx

@@ -1,6 +1,11 @@
 import React from "react";
+import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { ActivityIndicator } from "@jobber/components-native";
+import {
+  ActivityIndicator,
+  Text,
+  useAtlantisTheme,
+} from "@jobber/components-native";
 import { ActivityIndicatorBasicExample } from "./docs";
 
 const meta = {
@@ -28,6 +33,46 @@ export const CustomAccessibilityLabel: Story = {
   render: () => <ActivityIndicator accessibilityLabel="Uploading file" />,
 };
 
+/**
+ * The track ring uses `color-surface--active`, which is designed to read as
+ * a muted tint of the surface beneath it. This story renders the indicator
+ * on each of the standard application surfaces so the contrast between the
+ * track and its background can be reviewed at a glance.
+ */
+export const OnSurfaces: Story = {
+  render: () => <OnSurfacesExample />,
+};
+
+function OnSurfacesExample() {
+  const { tokens } = useAtlantisTheme();
+  const surfaces = [
+    { token: "color-surface", label: "surface" },
+    { token: "color-surface--background", label: "surface--background" },
+    {
+      token: "color-surface--background--subtle",
+      label: "surface--background--subtle",
+    },
+  ] as const;
+
+  return (
+    <View style={{ gap: tokens["space-base"] }}>
+      {surfaces.map(({ token, label }) => (
+        <View
+          key={token}
+          style={{
+            backgroundColor: tokens[token],
+            padding: tokens["space-large"],
+            gap: tokens["space-small"],
+          }}
+        >
+          <Text>{label}</Text>
+          <ActivityIndicator size="base" />
+        </View>
+      ))}
+    </View>
+  );
+}
+
 /**
  * The reduced-motion presentation is driven by the OS-level
  * "Reduce Motion" setting, not a Storybook control. To preview it:

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -146,7 +146,7 @@ export function ActivityIndicator({
       pixelSize={pixelSize}
       strokeWidth={strokeWidth}
       arcColor={themeTokens["color-icon"]}
-      trackColor={themeTokens["color-disabled--secondary"]}
+      trackColor={themeTokens["color-surface--active"]}
       style={style}
       testID={testID}
       a11yProps={a11yProps}

package/src/ActivityIndicator/guide.md

@@ -50,7 +50,7 @@ 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-disabled-secondary` for the track). The single known consumer of
+  `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 /
@@ -124,7 +124,9 @@ The three concurrent animations:
    second arc renders 180° out of phase.
 
 A static `<Circle>` of the same dimensions renders the track ring beneath the
-active arcs, filled with `tokens["color-disabled-secondary"]`.
+active arcs, filled with `themeTokens["color-surface--active"]` so the track
+adapts to whichever surface (`surface`, `surface--background`,
+`surface--background--subtle`) the indicator is placed on.
 
 The literal durations match Material Web's published progress motion spec; the
 same values ship from `@jobber/design`'s `timing.tokens.json` to both web and
@@ -177,8 +179,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-disabled-secondary` for track)
-  from the same `@jobber/design` source
+- Color tokens (`color-icon` 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: