@multiplatform.one/theme 7.79.0 → 7.81.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.79.0",
+  "version": "7.81.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.79.0",
-    "@multiplatform.one/store": "^7.79.0",
+    "@multiplatform.one/platform": "^7.81.0",
+    "@multiplatform.one/store": "^7.81.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.79.0",
-    "@multiplatform.one/test-utils": "7.79.0",
+    "@multiplatform.one/config": "7.81.0",
+    "@multiplatform.one/test-utils": "7.81.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/menuRow.ts

@@ -64,6 +64,23 @@ export function menuRowChecked(scheme: ColorScheme) {
 /** The check mark on a `menuRowChecked` row: the theme's accent (FZ-8557). */
 export const menuRowCheckInk = "$accentColor" as const;
 
+/**
+ * The check mark's glyph on every menu and picker row (LC-262, FZ-8557): the
+ * 14px bold check Clay rated 4/4 in FZ-8355 r6. Forms and components each draw
+ * it through a thin `CheckGlyph` that reads this one recipe, in
+ * `useMenuRowCheckInk`'s paint.
+ */
+export const menuRowCheckGlyph = { size: 14, weight: "bold" } as const;
+
+/**
+ * The glyph a menu row's leading icon draws at (FZ-8557 r3, LC-262). A menu
+ * whose rows carry icons draws its check at this glyph too, so both share one
+ * stroke.
+ */
+export const menuRowIconGlyph = { size: 18, weight: "bold" } as const;
+
+export type MenuRowGlyph = { readonly size: number; readonly weight: "bold" };
+
 type ThemeValues = Record<string, { val?: unknown } | undefined>;
 
 function isHueless(paint: string): boolean {

package/src/theme/overlaySurfaces.tsx

@@ -19,6 +19,35 @@ import {
   type ViewProps,
 } from "tamagui";
 
+/**
+ * The scrim under every modal surface: dialogs, alerts and sheets (FZ-8557).
+ * `$shadow4` is the SHC console's `backgroundScrim` weight (light 0.26, dark
+ * 0.58 there; 0.22 and 0.45 here), the dim an iOS sheet lays over its page.
+ * `$shadow6` read as a heavy grey wash in light.
+ */
+export const overlayScrim = "$shadow4" as const;
+
+/**
+ * A sheet's grabber (HIG, FZ-8557): a 36×5 capsule inside the sheet's top
+ * edge, 6pt down, drawn over the frame rather than floating on the scrim.
+ * Spread on `Sheet.Handle`; the frame keeps `sheetGrabberClearance` clear.
+ */
+export const sheetGrabber = {
+  width: 36,
+  height: 5,
+  borderRadius: 100,
+  backgroundColor: "$color8",
+  opacity: 0.45,
+  alignSelf: "center",
+  marginHorizontal: 0,
+  marginTop: 0,
+  marginBottom: -11,
+  zIndex: 10,
+} as const;
+
+/** The top inset a sheet's content keeps clear of its grabber. */
+export const sheetGrabberClearance = 16;
+
 // ── Overlay frame focus (LC-71) ──────────────────────────────────────────
 // Radix Dialog.Content / Primer Dialog are tabIndex=-1 and auto-focused on
 // open. The frame is not a control: UA :focus-visible must not ring the
@@ -247,7 +276,7 @@ export const DialogOverlay = forwardRef<
   return (
     <Dialog.Overlay
       ref={ref}
-      backgroundColor="$shadow6"
+      backgroundColor={overlayScrim}
       {...transitionProps(knobProps.motion.scrim)}
       enterStyle={scrimFade}
       exitStyle={scrimFade}
@@ -313,7 +342,7 @@ export const AlertDialogOverlay = forwardRef<
   return (
     <AlertDialog.Overlay
       ref={ref}
-      backgroundColor="$shadow6"
+      backgroundColor={overlayScrim}
       {...transitionProps(knobProps.motion.scrim)}
       enterStyle={scrimFade}
       exitStyle={scrimFade}

package/src/theme/useSchemePreference.native.ts

@@ -1,5 +1,5 @@
 import { useEffect, useSyncExternalStore } from "react";
-import { Appearance, useColorScheme } from "react-native";
+import { Appearance } from "react-native";
 import { useDidFinishSSR } from "tamagui";
 import { isWeb } from "@multiplatform.one/platform";
 import { getStoredScheme, setStoredScheme, subscribeStoredScheme } from "./schemeStore";
@@ -12,22 +12,47 @@ export interface SchemePreference {
 }
 const serverScheme = (): ThemeScheme => "system";
 
+// RN's Appearance.setColorScheme("unspecified") writes "unspecified" into the
+// JS cache that getColorScheme/useColorScheme read, with no change event, so
+// System resolved light until the OS flipped (FZ-8708). The native scheme is
+// read once before the first override and then only from change events.
+let nativeScheme: "light" | "dark" | undefined;
+const nativeListeners = new Set<() => void>();
+
+function getNativeScheme(): "light" | "dark" {
+  if (nativeScheme === undefined) {
+    nativeScheme = Appearance.getColorScheme() === "dark" ? "dark" : "light";
+    Appearance.addChangeListener(({ colorScheme }) => {
+      if ((colorScheme !== "light" && colorScheme !== "dark") || colorScheme === nativeScheme) {
+        return;
+      }
+      nativeScheme = colorScheme;
+      nativeListeners.forEach((listener) => listener());
+    });
+  }
+  return nativeScheme;
+}
+
+function subscribeNativeScheme(listener: () => void) {
+  getNativeScheme();
+  nativeListeners.add(listener);
+  return () => {
+    nativeListeners.delete(listener);
+  };
+}
+
 export function useSchemePreference(): SchemePreference {
   const setting = useSyncExternalStore(subscribeStoredScheme, getStoredScheme, serverScheme);
-  const os = useColorScheme();
+  const os = useSyncExternalStore(subscribeNativeScheme, getNativeScheme, getNativeScheme);
   const hydrated = useDidFinishSSR();
   useEffect(() => {
-    if (!isWeb) Appearance.setColorScheme(setting === "system" ? "unspecified" : setting);
+    if (isWeb) return;
+    getNativeScheme();
+    Appearance.setColorScheme(setting === "system" ? "unspecified" : setting);
   }, [setting]);
   return {
     setting: hydrated ? setting : "system",
-    value: !hydrated
-      ? "light"
-      : setting === "system"
-        ? os === "dark"
-          ? "dark"
-          : "light"
-        : setting,
+    value: !hydrated ? "light" : setting === "system" ? os : setting,
     set: setStoredScheme,
   };
 }

package/src/theme/useSchemePreference.spec.tsx

@@ -1,51 +1,118 @@
-import { act, cleanup, renderHook } from "@testing-library/react";
-import { afterEach, expect, it, vi } from "vitest";
+import { act, cleanup, render, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { useSyncExternalStore } from "react";
+import type { SchemePreference } from "./useSchemePreference.native";
 
-const os = vi.hoisted(() => ({
-  value: "light",
-  forced: null as string | null,
-  listeners: new Set<() => void>(),
+// Mirrors react-native 0.83 Libraries/Utilities/Appearance.js over RCTAppearance:
+// the JS side caches the first native read, setColorScheme overwrites that
+// cache with its argument and emits nothing, and native emits a change only
+// when the window's effective style moves.
+const rn = vi.hoisted(() => ({
+  os: "light" as "light" | "dark",
+  override: "unspecified" as string,
+  current: "light" as string,
+  cache: null as { colorScheme: string } | null,
+  listeners: new Set<(value: { colorScheme: string }) => void>(),
 }));
+function syncNative() {
+  const effective = rn.override === "unspecified" ? rn.os : rn.override;
+  if (effective === rn.current) return;
+  rn.current = effective;
+  rn.cache = { colorScheme: effective };
+  rn.listeners.forEach((listener) => listener({ colorScheme: effective }));
+}
 vi.mock("@multiplatform.one/platform", () => ({ isWeb: false }));
 vi.mock("@multiplatform.one/store", () => ({
   storage: { getItem: () => null, setItem: () => {} },
 }));
 vi.mock("tamagui", () => ({ useDidFinishSSR: () => true }));
-vi.mock("react-native", () => ({
-  useColorScheme: () =>
-    useSyncExternalStore(
-      (l) => {
-        os.listeners.add(l);
-        return () => {
-          os.listeners.delete(l);
-        };
-      },
-      () => os.forced ?? os.value,
-    ),
-  Appearance: {
-    setColorScheme: (value: string | null) => {
-      os.forced = value === "unspecified" ? null : value;
-      os.listeners.forEach((l) => l());
+vi.mock("react-native", () => {
+  const Appearance = {
+    getColorScheme: () => {
+      if (rn.cache == null) rn.cache = { colorScheme: rn.current };
+      return rn.cache.colorScheme;
     },
-  },
-}));
-import { useSchemePreference } from "./useSchemePreference.native";
+    setColorScheme: (value: string) => {
+      rn.cache = { colorScheme: value };
+      queueMicrotask(() => {
+        rn.override = value;
+        syncNative();
+      });
+    },
+    addChangeListener: (listener: (value: { colorScheme: string }) => void) => {
+      rn.listeners.add(listener);
+      return { remove: () => rn.listeners.delete(listener) };
+    },
+  };
+  const subscribe = (onChange: () => void) => {
+    const subscription = Appearance.addChangeListener(onChange);
+    return () => subscription.remove();
+  };
+  return {
+    Appearance,
+    useColorScheme: () => useSyncExternalStore(subscribe, Appearance.getColorScheme),
+  };
+});
+
+let useSchemePreference: () => SchemePreference;
+beforeEach(async () => {
+  vi.resetModules();
+  rn.cache = null;
+  rn.listeners.clear();
+  rn.override = "unspecified";
+  ({ useSchemePreference } = await import("./useSchemePreference.native"));
+});
 afterEach(cleanup);
 
-it("shares selection, clears the native override for System and follows subsequent OS changes", () => {
+function flipOs(scheme: "light" | "dark") {
+  rn.os = scheme;
+  syncNative();
+}
+
+it("system follows the OS scheme on first render, before any change event (FZ-8708)", async () => {
+  rn.os = "dark";
+  rn.current = "dark";
+  const seen: string[] = [];
+  function Probe({ tick }: { tick: number }) {
+    const { value } = useSchemePreference();
+    seen.push(`${tick}:${value}`);
+    return null;
+  }
+  const view = render(<Probe tick={0} />);
+  expect(seen[0]).toBe("0:dark");
+  await act(async () => {});
+  expect(rn.cache).toEqual({ colorScheme: "unspecified" });
+  view.rerender(<Probe tick={1} />);
+  expect(seen.at(-1)).toBe("1:dark");
+  expect(seen.filter((entry) => entry.endsWith("light"))).toEqual([]);
+});
+
+it("keeps the OS scheme when Dark goes back to System on a dark OS, and follows later OS flips", async () => {
+  rn.os = "dark";
+  rn.current = "dark";
+  const hook = renderHook(useSchemePreference);
+  await act(async () => hook.result.current.set("dark"));
+  expect(rn.override).toBe("dark");
+  await act(async () => hook.result.current.set("system"));
+  expect(rn.override).toBe("unspecified");
+  expect(hook.result.current.value).toBe("dark");
+  act(() => flipOs("light"));
+  expect(hook.result.current.value).toBe("light");
+  expect(hook.result.current.setting).toBe("system");
+});
+
+it("shares selection, clears the native override for System and follows subsequent OS changes", async () => {
+  rn.os = "light";
+  rn.current = "light";
   const first = renderHook(useSchemePreference);
   const second = renderHook(useSchemePreference);
-  act(() => first.result.current.set("dark"));
+  await act(async () => first.result.current.set("dark"));
   expect(second.result.current.value).toBe("dark");
-  expect(os.forced).toBe("dark");
-  act(() => first.result.current.set("system"));
-  expect(os.forced).toBeNull();
+  expect(rn.override).toBe("dark");
+  await act(async () => first.result.current.set("system"));
+  expect(rn.override).toBe("unspecified");
   expect(second.result.current.value).toBe("light");
-  act(() => {
-    os.value = "dark";
-    os.listeners.forEach((l) => l());
-  });
+  act(() => flipOs("dark"));
   expect(second.result.current.value).toBe("dark");
   expect(second.result.current.setting).toBe("system");
 });

package/src/theme/v3TokenRoles.ts

@@ -14,7 +14,7 @@ export const v3TokenRoles = {
   backgroundChrome: "background",
   backgroundStrong: "color3",
   backgroundSunk: "color3",
-  backgroundScrim: "shadow6",
+  backgroundScrim: "shadow4",
   hairline: "borderColorHairline",
   hairlineStrong: "borderColor",
   colorSubtle: "textMuted",

package/types/menuRow.d.ts

@@ -59,6 +59,29 @@ export declare function menuRowChecked(scheme: ColorScheme): {
 };
 /** The check mark on a `menuRowChecked` row: the theme's accent (FZ-8557). */
 export declare const menuRowCheckInk: "$accentColor";
+/**
+ * The check mark's glyph on every menu and picker row (LC-262, FZ-8557): the
+ * 14px bold check Clay rated 4/4 in FZ-8355 r6. Forms and components each draw
+ * it through a thin `CheckGlyph` that reads this one recipe, in
+ * `useMenuRowCheckInk`'s paint.
+ */
+export declare const menuRowCheckGlyph: {
+    readonly size: 14;
+    readonly weight: "bold";
+};
+/**
+ * The glyph a menu row's leading icon draws at (FZ-8557 r3, LC-262). A menu
+ * whose rows carry icons draws its check at this glyph too, so both share one
+ * stroke.
+ */
+export declare const menuRowIconGlyph: {
+    readonly size: 18;
+    readonly weight: "bold";
+};
+export type MenuRowGlyph = {
+    readonly size: number;
+    readonly weight: "bold";
+};
 type ThemeValues = Record<string, {
     val?: unknown;
 } | undefined>;

package/types/menuRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW;;;;;;;;EAOjD;AAED,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAC;AAEvD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC;AASjE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKjE;AAED,4DAA4D;AAC5D,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}
+{"version":3,"file":"menuRow.d.ts","sourceRoot":"","sources":["../src/menuRow.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW;;;;;;;;EAOjD;AAED,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAG,cAAuB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;;;CAAwC,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;CAAwC,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAAC,CAAC;AASjE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKjE;AAED,4DAA4D;AAC5D,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/types/theme/overlaySurfaces.d.ts

@@ -1,5 +1,31 @@
 import type { ReactNode } from "react";
 import { type DialogContentProps as TamaguiDialogContentProps, type SizeTokens, type TamaguiElement } from "tamagui";
+/**
+ * The scrim under every modal surface: dialogs, alerts and sheets (FZ-8557).
+ * `$shadow4` is the SHC console's `backgroundScrim` weight (light 0.26, dark
+ * 0.58 there; 0.22 and 0.45 here), the dim an iOS sheet lays over its page.
+ * `$shadow6` read as a heavy grey wash in light.
+ */
+export declare const overlayScrim: "$shadow4";
+/**
+ * A sheet's grabber (HIG, FZ-8557): a 36×5 capsule inside the sheet's top
+ * edge, 6pt down, drawn over the frame rather than floating on the scrim.
+ * Spread on `Sheet.Handle`; the frame keeps `sheetGrabberClearance` clear.
+ */
+export declare const sheetGrabber: {
+    readonly width: 36;
+    readonly height: 5;
+    readonly borderRadius: 100;
+    readonly backgroundColor: "$color8";
+    readonly opacity: 0.45;
+    readonly alignSelf: "center";
+    readonly marginHorizontal: 0;
+    readonly marginTop: 0;
+    readonly marginBottom: -11;
+    readonly zIndex: 10;
+};
+/** The top inset a sheet's content keeps clear of its grabber. */
+export declare const sheetGrabberClearance = 16;
 type OpenAutoFocus = (event: Event) => void;
 /**
  * The house open focus for a raw `Dialog.Content`, which `DialogContent` and

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

@@ -1 +1 @@
-{"version":3,"file":"overlaySurfaces.d.ts","sourceRoot":"","sources":["../../src/theme/overlaySurfaces.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAOL,KAAK,kBAAkB,IAAI,yBAAyB,EAEpD,KAAK,UAAU,EACf,KAAK,cAAc,EAEpB,MAAM,SAAS,CAAC;AA6DjB,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAmC5C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAG9F;AAID,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,wBAAgB,sBAAsB,IAAI,wBAAwB,CAEjE;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAQD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa;eAJb,SAAS;WACb,UAAU;kDAcjB,CAAC;AA8DH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;eAEiB,SAAS;kDAelD,CAAC;AAOH,eAAO,MAAM,kBAAkB;eA5GlB,SAAS;WACb,UAAU;kDAqHlB,CAAC;AAgCF,eAAO,MAAM,kBAAkB;;;;;;;;eAEY,SAAS;kDAelD,CAAC;AAiBH,eAAO,MAAM,cAAc;eALd,SAAS;IACpB,iEAAiE;sBAC/C,aAAa;kDA0BhC,CAAC"}
+{"version":3,"file":"overlaySurfaces.d.ts","sourceRoot":"","sources":["../../src/theme/overlaySurfaces.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAOL,KAAK,kBAAkB,IAAI,yBAAyB,EAEpD,KAAK,UAAU,EACf,KAAK,cAAc,EAEpB,MAAM,SAAS,CAAC;AAEjB;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAG,UAAmB,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AA6DxC,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAmC5C;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,IAAI,CAG9F;AAID,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,wBAAgB,sBAAsB,IAAI,wBAAwB,CAEjE;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAQD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC,GAAG;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,aAAa;eAJb,SAAS;WACb,UAAU;kDAcjB,CAAC;AA8DH;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;eAEiB,SAAS;kDAelD,CAAC;AAOH,eAAO,MAAM,kBAAkB;eA5GlB,SAAS;WACb,UAAU;kDAqHlB,CAAC;AAgCF,eAAO,MAAM,kBAAkB;;;;;;;;eAEY,SAAS;kDAelD,CAAC;AAiBH,eAAO,MAAM,cAAc;eALd,SAAS;IACpB,iEAAiE;sBAC/C,aAAa;kDA0BhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSchemePreference.native.d.ts","sourceRoot":"","sources":["../../src/theme/useSchemePreference.native.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;AAGD,wBAAgB,mBAAmB,IAAI,gBAAgB,CAkBtD"}
+{"version":3,"file":"useSchemePreference.native.d.ts","sourceRoot":"","sources":["../../src/theme/useSchemePreference.native.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"}

package/types/theme/v3TokenRoles.d.ts

@@ -14,7 +14,7 @@ export declare const v3TokenRoles: {
     readonly backgroundChrome: "background";
     readonly backgroundStrong: "color3";
     readonly backgroundSunk: "color3";
-    readonly backgroundScrim: "shadow6";
+    readonly backgroundScrim: "shadow4";
     readonly hairline: "borderColorHairline";
     readonly hairlineStrong: "borderColor";
     readonly colorSubtle: "textMuted";