@multiplatform.one/theme 8.2.1 → 8.3.0

package/src/theme/reducedMotion.native.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from "react";
+import { AccessibilityInfo } from "react-native";
+
+let reduced = false;
+let primed = false;
+const listeners = new Set<() => void>();
+
+function set(value: boolean) {
+  if (value === reduced) return;
+  reduced = value;
+  for (const notify of listeners) notify();
+}
+
+function prime() {
+  if (primed) return;
+  primed = true;
+  AccessibilityInfo.isReduceMotionEnabled?.()
+    .then(set)
+    .catch(() => {});
+  AccessibilityInfo.addEventListener?.("reduceMotionChanged", set);
+}
+
+function subscribe(notify: () => void) {
+  prime();
+  listeners.add(notify);
+  return () => {
+    listeners.delete(notify);
+  };
+}
+
+const read = () => reduced;
+
+/** iOS Reduce Motion and Android's remove-animations setting (LC-68 on native, FZ-8075). */
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, read, read);
+}

package/src/theme/reducedMotion.ts

@@ -0,0 +1,27 @@
+import { useSyncExternalStore } from "react";
+
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+const serverReducedMotion = () => false;
+
+function readReducedMotion(): boolean {
+  return typeof window !== "undefined" && !!window.matchMedia?.(reducedMotionQuery).matches;
+}
+
+function subscribeReducedMotion(notify: () => void) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {};
+  const mq = window.matchMedia(reducedMotionQuery);
+  if (typeof mq.addEventListener === "function") {
+    mq.addEventListener("change", notify);
+    return () => mq.removeEventListener("change", notify);
+  }
+  if (typeof mq.addListener === "function") {
+    mq.addListener(notify);
+    return () => mq.removeListener?.(notify);
+  }
+  return () => {};
+}
+
+/** Adopt the OS motion preference after matching the server's initial markup. */
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribeReducedMotion, readReducedMotion, serverReducedMotion);
+}

package/src/theme/sheetGrabber.spec.ts

@@ -6,6 +6,10 @@ describe("sheetGrabber (FZ-8648)", () => {
     expect(sheetGrabber).toMatchObject({ width: 36, height: 5, marginTop: 5, alignSelf: "center" });
   });
 
+  it("draws in the label ink at 30%, iOS's tertiary label, so it reads on a light and a dark sheet", () => {
+    expect(sheetGrabber).toMatchObject({ backgroundColor: "$color12", opacity: 0.3 });
+  });
+
   it("takes no height, so it lands the same above a frame and inside a grab zone", () => {
     expect(sheetGrabber.marginTop + sheetGrabber.height + sheetGrabber.marginBottom).toBe(0);
   });

package/src/theme/useResolvedKnobs.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { type SizeTokens, useThemeName } from "tamagui";
 import { useTouchSurface } from "./useTouchSurface";
 import { defaultKnobs, type Knobs } from "./knobs";
@@ -8,6 +8,7 @@ import { resolveKnobs } from "./resolveKnobs";
 import { usePresetContext } from "./PresetContext";
 import { defaultIntents } from "./intents";
 import { clampSurfaceSize, SurfaceContext } from "./Surface";
+import { usePrefersReducedMotion } from "./reducedMotion";
 
 export const IntentContext = createContext<string | null>(null);
 
@@ -15,32 +16,6 @@ export function useIntentContext(): string | null {
   return useContext(IntentContext);
 }
 
-const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
-const serverReducedMotion = () => false;
-
-function readReducedMotion(): boolean {
-  return typeof window !== "undefined" && !!window.matchMedia?.(reducedMotionQuery).matches;
-}
-
-function subscribeReducedMotion(notify: () => void) {
-  if (typeof window === "undefined" || !window.matchMedia) return () => {};
-  const mq = window.matchMedia(reducedMotionQuery);
-  if (typeof mq.addEventListener === "function") {
-    mq.addEventListener("change", notify);
-    return () => mq.removeEventListener("change", notify);
-  }
-  if (typeof mq.addListener === "function") {
-    mq.addListener(notify);
-    return () => mq.removeListener?.(notify);
-  }
-  return () => {};
-}
-
-/** Adopt the OS motion preference after matching the server's initial markup. */
-function usePrefersReducedMotion(): boolean {
-  return useSyncExternalStore(subscribeReducedMotion, readReducedMotion, serverReducedMotion);
-}
-
 export interface UseResolvedKnobsOptions {
   intent?: string;
   component?: string;

package/types/theme/nativeSchemePreference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeSchemePreference.d.ts","sourceRoot":"","sources":["../../src/theme/nativeSchemePreference.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAgCD,wBAAgB,mBAAmB,IAAI,gBAAgB,CActD"}
+{"version":3,"file":"nativeSchemePreference.d.ts","sourceRoot":"","sources":["../../src/theme/nativeSchemePreference.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AAgCD,wBAAgB,mBAAmB,IAAI,gBAAgB,CAetD"}

package/types/theme/overlaySurfaces.d.ts

@@ -18,8 +18,8 @@ export declare const sheetGrabber: {
     readonly width: 36;
     readonly height: 5;
     readonly borderRadius: 100;
-    readonly backgroundColor: "$color8";
-    readonly opacity: 0.45;
+    readonly backgroundColor: "$color12";
+    readonly opacity: 0.3;
     readonly alignSelf: "center";
     readonly marginHorizontal: 0;
     readonly marginTop: 5;

package/types/theme/reducedMotion.d.ts

@@ -0,0 +1,3 @@
+/** Adopt the OS motion preference after matching the server's initial markup. */
+export declare function usePrefersReducedMotion(): boolean;
+//# sourceMappingURL=reducedMotion.d.ts.map

package/types/theme/reducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducedMotion.d.ts","sourceRoot":"","sources":["../../src/theme/reducedMotion.ts"],"names":[],"mappings":"AAuBA,iFAAiF;AACjF,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}

package/types/theme/reducedMotion.native.d.ts

@@ -0,0 +1,3 @@
+/** iOS Reduce Motion and Android's remove-animations setting (LC-68 on native, FZ-8075). */
+export declare function usePrefersReducedMotion(): boolean;
+//# sourceMappingURL=reducedMotion.native.d.ts.map

package/types/theme/reducedMotion.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducedMotion.native.d.ts","sourceRoot":"","sources":["../../src/theme/reducedMotion.native.ts"],"names":[],"mappings":"AAgCA,4FAA4F;AAC5F,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}

package/types/theme/useResolvedKnobs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResolvedKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/useResolvedKnobs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,SAAS,CAAC;AAIxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAMlE,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAEhE,wBAAgB,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAEhD;AA4BD,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,aAA2C,CAAC;AAE3E;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,aAAsB,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,aAAa,CAgFjF"}
+{"version":3,"file":"useResolvedKnobs.d.ts","sourceRoot":"","sources":["../../src/theme/useResolvedKnobs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,SAAS,CAAC;AAIxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAOlE,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAEhE,wBAAgB,gBAAgB,IAAI,MAAM,GAAG,IAAI,CAEhD;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,aAA2C,CAAC;AAE3E;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,aAAsB,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,aAAa,CAgFjF"}