@farcaster/snap 1.6.0 → 1.7.1

package/src/react-native/theme.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+// ─── Color tokens ─────────────────────────────────────
+
+export type SnapNativeColors = {
+  bg: string;
+  surface: string;
+  text: string;
+  textSecondary: string;
+  border: string;
+  inputBg: string;
+  muted: string;
+};
+
+const DEFAULT_LIGHT: SnapNativeColors = {
+  bg: "#dfe3e8",
+  surface: "#ffffff",
+  text: "#111111",
+  textSecondary: "#6b7280",
+  border: "#d1d5db",
+  inputBg: "#ffffff",
+  muted: "#f9fafb",
+};
+
+const DEFAULT_DARK: SnapNativeColors = {
+  bg: "#111318",
+  surface: "#1a1d24",
+  text: "#fafafa",
+  textSecondary: "#a1a1aa",
+  border: "#374151",
+  inputBg: "#1a1d24",
+  muted: "#27272a",
+};
+
+// ─── Context ──────────────────────────────────────────
+
+interface SnapThemeValue {
+  mode: "light" | "dark";
+  colors: SnapNativeColors;
+}
+
+const SnapThemeContext = createContext<SnapThemeValue>({
+  mode: "dark",
+  colors: DEFAULT_DARK,
+});
+
+export function SnapThemeProvider({
+  appearance,
+  colors,
+  children,
+}: {
+  appearance: "light" | "dark";
+  colors?: Partial<SnapNativeColors>;
+  children: ReactNode;
+}) {
+  const value = useMemo<SnapThemeValue>(() => {
+    const defaults = appearance === "dark" ? DEFAULT_DARK : DEFAULT_LIGHT;
+    return {
+      mode: appearance,
+      colors: colors ? { ...defaults, ...colors } : defaults,
+    };
+  }, [appearance, colors]);
+
+  return (
+    <SnapThemeContext.Provider value={value}>
+      {children}
+    </SnapThemeContext.Provider>
+  );
+}
+
+export function useSnapTheme(): SnapThemeValue {
+  return useContext(SnapThemeContext);
+}

package/src/react-native/use-snap-palette.ts

@@ -0,0 +1,64 @@
+import {
+  DEFAULT_THEME_ACCENT,
+  PALETTE_COLOR_VALUES,
+  PALETTE_LIGHT_HEX,
+  PALETTE_DARK_HEX,
+  type PaletteColor,
+} from "@farcaster/snap";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapTheme } from "./theme";
+
+function resolveHex(name: string, appearance: "light" | "dark"): string {
+  const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+  if (Object.hasOwn(map, name)) {
+    return map[name as PaletteColor];
+  }
+  return map.purple;
+}
+
+function isPaletteColor(s: string): s is PaletteColor {
+  return (PALETTE_COLOR_VALUES as readonly string[]).includes(s);
+}
+
+function themeAccentFromStore(get: (path: string) => unknown): PaletteColor {
+  const raw = get("/theme/accent");
+  if (typeof raw === "string" && isPaletteColor(raw)) {
+    return raw;
+  }
+  return DEFAULT_THEME_ACCENT;
+}
+
+export function useSnapPalette() {
+  const { mode } = useSnapTheme();
+  const { get } = useStateStore();
+  const accentName = themeAccentFromStore(get);
+  const accentHex = resolveHex(accentName, mode);
+
+  const hex = (semantic: string) =>
+    semantic === "accent" ? accentHex : resolveHex(semantic, mode);
+
+  return { appearance: mode, accentName, accentHex, hex };
+}
+
+/** `#RRGGBB` + alpha → `rgba(...)` for React Native styles. */
+export function hexToRgba(hex: string, alpha: number): string {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (!m) {
+    return `rgba(0,0,0,${alpha})`;
+  }
+  const n = Number.parseInt(m[1]!, 16);
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+export function useSnapPreviewChromePalette(themeAccent: string | undefined) {
+  const { mode } = useSnapTheme();
+  const accentName =
+    typeof themeAccent === "string" && isPaletteColor(themeAccent)
+      ? themeAccent
+      : DEFAULT_THEME_ACCENT;
+  const accentHex = resolveHex(accentName, mode);
+  return { appearance: mode, accentName, accentHex };
+}