@farcaster/snap 1.13.0 → 1.14.0

package/dist/react-native/components/snap-switch.js

@@ -13,7 +13,7 @@ export function SnapSwitch({ element: { props }, }) {
     const fallback = Boolean(props.defaultChecked ?? false);
     const raw = get(path);
     const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
-    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.border, true: accentHex }, thumbColor: "#fff" })] }));
+    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.muted, true: accentHex }, thumbColor: "#fff" })] }));
 }
 const styles = StyleSheet.create({
     row: {

package/dist/react-native/components/snap-toggle-group.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapToggleGroup({ element: { props }, }) {
     const { get, set } = useStateStore();
-    const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const name = String(props.name ?? "toggle_group");
     const path = `/inputs/${name}`;
@@ -49,19 +47,23 @@ export function SnapToggleGroup({ element: { props }, }) {
     };
     return (_jsxs(View, { style: styles.wrap, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(View, { style: [
                     styles.group,
-                    { backgroundColor: colors.border + "33" },
+                    { backgroundColor: colors.muted },
                     isVertical ? styles.groupVertical : styles.groupHorizontal,
                 ], children: options.map((opt, index) => {
                     const isSelected = selected.includes(opt);
                     return (_jsx(Pressable, { style: ({ pressed }) => [
                             styles.option,
-                            isSelected && { backgroundColor: accentHex },
-                            pressed && styles.pressed,
+                            {
+                                backgroundColor: isSelected
+                                    ? colors.mutedSelected
+                                    : pressed
+                                        ? colors.mutedHover
+                                        : colors.mutedSubtle,
+                            },
                             !isVertical && styles.optionHorizontal,
                         ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
                                 styles.optionText,
                                 { color: colors.text },
-                                isSelected && styles.optionTextSelected,
                             ], children: opt }) }, index));
                 }) })] }));
 }
@@ -89,12 +91,8 @@ const styles = StyleSheet.create({
     optionHorizontal: {
         flex: 1,
     },
-    pressed: { opacity: 0.88 },
     optionText: {
         fontSize: 13,
         fontWeight: "500",
     },
-    optionTextSelected: {
-        color: "#fff",
-    },
 });

package/dist/react-native/theme.d.ts

@@ -7,6 +7,12 @@ export type SnapNativeColors = {
     border: string;
     inputBg: string;
     muted: string;
+    /** Subtle tint for toggle button resting state */
+    mutedSubtle: string;
+    /** Slightly stronger tint for hover/press state */
+    mutedHover: string;
+    /** Stronger tint for selected state (toggle group) */
+    mutedSelected: string;
 };
 interface SnapThemeValue {
     mode: "light" | "dark";

package/dist/react-native/theme.js

@@ -5,18 +5,24 @@ const DEFAULT_LIGHT = {
     surface: "#ffffff",
     text: "#111111",
     textSecondary: "#6b7280",
-    border: "#d1d5db",
-    inputBg: "#ffffff",
-    muted: "#f9fafb",
+    border: "#E5E7EB",
+    inputBg: "rgba(0,0,0,0.12)",
+    muted: "rgba(0,0,0,0.12)",
+    mutedSubtle: "rgba(0,0,0,0.06)",
+    mutedHover: "rgba(0,0,0,0.10)",
+    mutedSelected: "rgba(0,0,0,0.18)",
 };
 const DEFAULT_DARK = {
     bg: "#111318",
     surface: "#1a1d24",
     text: "#fafafa",
     textSecondary: "#a1a1aa",
-    border: "#374151",
-    inputBg: "#1a1d24",
-    muted: "#27272a",
+    border: "#2D2D44",
+    inputBg: "rgba(255,255,255,0.03)",
+    muted: "rgba(255,255,255,0.03)",
+    mutedSubtle: "rgba(255,255,255,0.02)",
+    mutedHover: "rgba(255,255,255,0.04)",
+    mutedSelected: "rgba(255,255,255,0.10)",
 };
 const SnapThemeContext = createContext({
     mode: "dark",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/components/action-button.tsx

@@ -1,15 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
-const VARIANT_MAP: Record<string, "default" | "secondary"> = {
-  primary: "default",
-  secondary: "secondary",
-};
-
 export function SnapActionButton({
   element: { props },
   emit,
@@ -18,25 +14,36 @@ export function SnapActionButton({
   emit: (name: string) => void;
 }) {
   const label = String(props.label ?? "Action");
-  const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
+  const variant = String(props.variant ?? "secondary");
+  const isPrimary = variant === "primary";
   const iconName = props.icon ? String(props.icon) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
+  const [hovered, setHovered] = useState(false);
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style = isPrimary
+    ? {
+        backgroundColor: hovered ? colors.accentHover : colors.accent,
+        color: colors.accentFg,
+        borderColor: "transparent",
+      }
+    : {
+        backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+        color: colors.text,
+        borderColor: "transparent",
+      };
+
   return (
-    <div className="w-full min-w-0 flex-1" style={accentStyle}>
+    <div className="w-full min-w-0 flex-1">
       <Button
         type="button"
-        variant={variant}
-        className={cn(
-          "w-full gap-2",
-          variant === "default" &&
-            "hover:!bg-[var(--snap-action-primary-hover)]",
-          variant !== "default" &&
-            "hover:!bg-[var(--snap-action-outline-hover)]",
-        )}
+        variant={isPrimary ? "default" : "secondary"}
+        className={cn("w-full gap-2")}
+        style={style}
         onClick={() => emit("press")}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
       >
         {Icon && <Icon size={16} />}
         {label}

package/src/react/components/badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@neynar/ui/badge";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -13,25 +13,22 @@ export function SnapBadge({
   const variant = String(props.variant ?? "default") as "default" | "outline";
   const color = props.color ? String(props.color) : undefined;
   const iconName = props.icon ? String(props.icon) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
+
+  const badgeColor = colors.colorHex(color);
+  const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
 
-  const isAccent = !color || color === "accent";
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style =
+    variant === "outline"
+      ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
+      : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+
   return (
-    <span style={isAccent ? accentStyle : undefined}>
-      <Badge
-        variant={variant}
-        className="gap-1"
-        style={
-          variant === "outline" && !isAccent
-            ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
-            : undefined
-        }
-      >
-        {Icon && <Icon size={12} />}
-        {content}
-      </Badge>
-    </span>
+    <Badge variant={variant} className="gap-1" style={style}>
+      {Icon && <Icon size={12} />}
+      {content}
+    </Badge>
   );
 }

package/src/react/components/bar-chart.tsx

@@ -1,17 +1,15 @@
 "use client";
 
-import type { PaletteColor } from "@farcaster/snap";
-import { PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapBarChart({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   const bars = Array.isArray(props.bars) ? props.bars : [];
-  const chartColor = String(props.color ?? "accent");
+  const chartColor = props.color ? String(props.color) : undefined;
   const maxVal =
     props.max != null
       ? Number(props.max)
@@ -20,18 +18,13 @@ export function SnapBarChart({
           1,
         );
 
-  function barColor(bar: { color?: string }): string {
-    if (bar.color && bar.color in PALETTE_LIGHT_HEX) {
-      return `var(--snap-color-${bar.color}, ${PALETTE_LIGHT_HEX[bar.color as PaletteColor]})`;
-    }
-    if (chartColor !== "accent" && chartColor in PALETTE_LIGHT_HEX) {
-      return `var(--snap-color-${chartColor}, ${PALETTE_LIGHT_HEX[chartColor as PaletteColor]})`;
-    }
-    return "var(--primary)";
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return colors.colorHex(bar.color);
+    return colors.colorHex(chartColor);
   }
 
   return (
-    <div className="flex w-full flex-col gap-2" style={accentStyle}>
+    <div className="flex w-full flex-col gap-2">
       {bars.map(
         (
           bar: { label?: string; value?: number; color?: string },
@@ -39,23 +32,32 @@ export function SnapBarChart({
         ) => {
           const value = Number(bar.value ?? 0);
           const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
-          const fill = barColor(bar);
+          const fill = barFill(bar);
           return (
             <div key={i} className="flex w-full items-center gap-2">
-              <span className="text-muted-foreground w-20 shrink-0 truncate text-right text-xs">
+              <span
+                className="w-20 shrink-0 truncate text-right text-xs"
+                style={{ color: colors.textMuted }}
+              >
                 {String(bar.label ?? "")}
               </span>
-              <div className="bg-muted h-2.5 flex-1 overflow-hidden rounded-full">
+              <div
+                className="h-2.5 flex-1 overflow-hidden rounded-full"
+                style={{ backgroundColor: colors.muted }}
+              >
                 <div
                   className="h-full rounded-full transition-all"
                   style={{
                     width: `${pct}%`,
                     minWidth: pct > 0 ? 4 : 0,
-                    background: fill,
+                    backgroundColor: fill,
                   }}
                 />
               </div>
-              <span className="text-muted-foreground w-8 shrink-0 text-xs tabular-nums">
+              <span
+                className="w-8 shrink-0 text-xs tabular-nums"
+                style={{ color: colors.textMuted }}
+              >
                 {value}
               </span>
             </div>

package/src/react/components/cell-grid.tsx

@@ -3,10 +3,8 @@
 import type { ReactNode } from "react";
 import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
-import { POST_GRID_TAP_KEY, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import type { PaletteColor } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
-import { useColorMode } from "@neynar/ui/color-mode";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapCellGrid({
   element: { props },
@@ -14,8 +12,7 @@ export function SnapCellGrid({
   element: { props: Record<string, unknown> };
 }) {
   const { get, set } = useStateStore();
-  const accentStyle = useSnapAccentScopeStyle();
-  const { mode: appearance } = useColorMode();
+  const colors = useSnapColors();
   const cols = Number(props.cols ?? 2);
   const rows = Number(props.rows ?? 2);
   const select = String(props.select ?? "off");
@@ -60,17 +57,12 @@ export function SnapCellGrid({
     });
   }
 
-  const ringColor = appearance === "dark" ? "#fff" : "#000";
-
   const cellEls: ReactNode[] = [];
   for (let r = 0; r < rows; r++) {
     for (let c = 0; c < cols; c++) {
       const cell = cellMap.get(`${r},${c}`);
       const selected = interactive && isSelected(r, c);
-      const bg =
-        cell?.color && cell.color in PALETTE_LIGHT_HEX
-          ? `var(--snap-color-${cell.color}, ${PALETTE_LIGHT_HEX[cell.color as PaletteColor]})`
-          : "transparent";
+      const bg = cell?.color ? colors.colorHex(cell.color) : "transparent";
 
       cellEls.push(
         <div
@@ -96,7 +88,7 @@ export function SnapCellGrid({
             background: bg,
             // Two-layer ring: 1px white/black inner + 2px accent outer
             boxShadow: selected
-              ? `inset 0 0 0 1px ${appearance === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${appearance === "dark" ? "#fff" : "#000"}`
+              ? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
               : undefined,
           }}
         >
@@ -111,18 +103,19 @@ export function SnapCellGrid({
     : null;
 
   return (
-    <div style={accentStyle}>
+    <div>
       <div
-        className="grid w-full"
+        className="grid w-full rounded-lg p-1"
         style={{
           gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
           gap: gapPx,
+          backgroundColor: colors.muted,
         }}
       >
         {cellEls}
       </div>
       {selectionLabel && (
-        <div className="text-muted-foreground mt-1.5 truncate text-xs font-mono">
+        <div className="mt-1.5 truncate text-xs font-mono" style={{ color: colors.textMuted }}>
           {selectionLabel}
         </div>
       )}

package/src/react/components/icon.tsx

@@ -36,7 +36,7 @@ import {
   TrendingDown,
   type LucideIcon,
 } from "lucide-react";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export const ICON_MAP: Record<string, LucideIcon> = {
   "arrow-right": ArrowRight,
@@ -87,29 +87,16 @@ export function SnapIcon({
   const name = String(props.name ?? "info");
   const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
   const color = props.color ? String(props.color) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
 
   const Icon = ICON_MAP[name];
   if (!Icon) return null;
 
-  const isAccent = !color || color === "accent";
+  const iconColor = colors.colorHex(color);
 
   return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        ...(isAccent ? accentStyle : {}),
-      }}
-    >
-      <Icon
-        size={size}
-        style={
-          isAccent
-            ? { color: "var(--snap-accent, currentColor)" }
-            : { color: `var(--snap-color-${color}, currentColor)` }
-        }
-      />
+    <span style={{ display: "inline-flex", alignItems: "center" }}>
+      <Icon size={size} style={{ color: iconColor }} />
     </span>
   );
 }

package/src/react/components/input.tsx

@@ -4,32 +4,43 @@ import { useId } from "react";
 import { useStateStore } from "@json-render/react";
 import { Input } from "@neynar/ui/input";
 import { Label } from "@neynar/ui/label";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapInput({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const id = useId();
   const { get, set } = useStateStore();
+  const colors = useSnapColors();
   const name = String(props.name ?? "input");
-  const path = `/inputs/${name}`;
+  const type = String(props.type ?? "text");
   const label = props.label ? String(props.label) : undefined;
   const placeholder = props.placeholder ? String(props.placeholder) : undefined;
-  const maxLength =
-    typeof props.maxLength === "number" ? props.maxLength : undefined;
-  const raw = get(path);
-  const value = typeof raw === "string" ? raw : "";
+  const maxLength = props.maxLength ? Number(props.maxLength) : undefined;
+  const path = `/inputs/${name}`;
+  const value = (get(path) as string) ?? (props.defaultValue != null ? String(props.defaultValue) : "");
+  const id = useId();
 
   return (
     <div className="w-full space-y-1.5">
-      {label && <Label htmlFor={id}>{label}</Label>}
+      {label && (
+        <Label htmlFor={id} style={{ color: colors.text }}>
+          {label}
+        </Label>
+      )}
       <Input
         id={id}
-        value={value}
-        onChange={(e) => set(path, e.target.value)}
+        type={type === "number" ? "number" : "text"}
         placeholder={placeholder}
         maxLength={maxLength}
+        value={value}
+        onChange={(e) => set(path, e.target.value)}
+        style={{
+          backgroundColor: colors.inputBg,
+          borderColor: colors.inputBorder,
+          color: colors.text,
+        }}
       />
     </div>
   );

package/src/react/components/item-group.tsx

@@ -2,6 +2,7 @@
 
 import { Children, type ReactNode, Fragment } from "react";
 import { cn } from "@neynar/ui/utils";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 const GAP_MAP: Record<string, string> = {
   none: "gap-0",
@@ -21,6 +22,7 @@ export function SnapItemGroup({
   const separator = Boolean(props.separator);
   const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
   const items = Children.toArray(children);
+  const colors = useSnapColors();
 
   return (
     <div
@@ -29,11 +31,12 @@ export function SnapItemGroup({
         border && "rounded-lg border",
         gap,
       )}
+      style={border ? { borderColor: colors.border } : undefined}
     >
       {items.map((child, i) => (
         <Fragment key={i}>
           {separator && i > 0 && (
-            <div className="h-px bg-border" />
+            <div className="h-px" style={{ backgroundColor: colors.border }} />
           )}
           {child}
         </Fragment>

package/src/react/components/item.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ReactNode } from "react";
 import {
   Item,
   ItemContent,
@@ -8,26 +7,30 @@ import {
   ItemDescription,
   ItemActions,
 } from "@neynar/ui/item";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapItem({
-  element: { props },
+  element: { props, children: childIds },
   children,
 }: {
-  element: { props: Record<string, unknown> };
-  children?: ReactNode;
+  element: { props: Record<string, unknown>; children?: string[] };
+  children?: React.ReactNode;
 }) {
   const title = String(props.title ?? "");
   const description = props.description ? String(props.description) : undefined;
-  const variant =
-    (props.variant as "default") ?? "default";
+  const colors = useSnapColors();
 
   return (
-    <Item variant={variant} className="flex-1 py-1.5 px-2.5">
+    <Item className="flex-1 py-1.5 px-2.5">
       <ItemContent className="gap-0.5">
-        <ItemTitle>{title}</ItemTitle>
-        {description && <ItemDescription className="mt-0">{description}</ItemDescription>}
+        <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
+        {description && (
+          <ItemDescription className="mt-0" style={{ color: colors.textMuted }}>
+            {description}
+          </ItemDescription>
+        )}
       </ItemContent>
-      {children && <ItemActions>{children}</ItemActions>}
+      {childIds && childIds.length > 0 && <ItemActions>{children}</ItemActions>}
     </Item>
   );
 }

package/src/react/components/progress.tsx

@@ -1,27 +1,32 @@
 "use client";
 
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapProgress({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   const value = Number(props.value ?? 0);
   const max = Math.max(1, Number(props.max ?? 100));
   const percent = Math.min(100, Math.max(0, (value / max) * 100));
   const label = props.label ? String(props.label) : null;
 
   return (
-    <div className="flex w-full flex-1 flex-col gap-1" style={accentStyle}>
+    <div className="flex w-full flex-1 flex-col gap-1">
       {label && (
-        <span className="text-muted-foreground text-xs">{label}</span>
+        <span className="text-xs" style={{ color: colors.textMuted }}>
+          {label}
+        </span>
       )}
-      <div className="bg-muted h-2.5 w-full overflow-hidden rounded-full">
+      <div
+        className="h-2.5 w-full overflow-hidden rounded-full"
+        style={{ backgroundColor: colors.muted }}
+      >
         <div
-          className="h-full rounded-full bg-primary transition-all"
-          style={{ width: `${percent}%` }}
+          className="h-full rounded-full transition-all"
+          style={{ width: `${percent}%`, backgroundColor: colors.accent }}
         />
       </div>
     </div>

package/src/react/components/separator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Separator } from "@neynar/ui/separator";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSeparator({
   element: { props },
@@ -9,6 +10,12 @@ export function SnapSeparator({
 }) {
   const orientation =
     (props.orientation as "horizontal" | "vertical") ?? "horizontal";
+  const colors = useSnapColors();
 
-  return <Separator orientation={orientation} />;
+  return (
+    <Separator
+      orientation={orientation}
+      style={{ backgroundColor: colors.border }}
+    />
+  );
 }