@farcaster/snap 1.15.4 → 1.16.0

package/dist/react-native/v2/snap-view.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { SnapThemeProvider, useSnapTheme } from "../theme.js";
+import { SnapViewCoreInner } from "../snap-view-core.js";
+import { validateSnapResponse, } from "@farcaster/snap";
+// ─── Constants ───────────────────────────────────────
+const SNAP_MAX_HEIGHT = 500;
+const SNAP_WARNING_HEIGHT = 700;
+// ─── Validation fallback ─────────────────────────────
+function SnapValidationFallback({ message }) {
+    const { colors } = useSnapTheme();
+    return (_jsx(View, { style: fallbackStyles.container, children: _jsx(Text, { style: [fallbackStyles.text, { color: colors.textSecondary }], children: message ? `Unable to render snap: ${message}` : "Unable to render snap" }) }));
+}
+const fallbackStyles = StyleSheet.create({
+    container: {
+        width: "100%",
+        padding: 16,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    text: {
+        fontSize: 14,
+    },
+});
+// ─── SnapViewV2 (with validation) ────────────────────
+export function SnapViewV2Inner({ snap, handlers, loading = false, onValidationError, validationErrorFallback, }) {
+    const validation = useMemo(() => validateSnapResponse(snap), [snap]);
+    const valid = validation.valid;
+    const validationMessage = validation.issues[0]?.message;
+    useEffect(() => {
+        if (!valid) {
+            if (onValidationError) {
+                onValidationError(validation);
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.warn("[Snap] validation issues:", validation.issues);
+            }
+        }
+    }, [valid, validation, onValidationError]);
+    if (!valid) {
+        if (validationErrorFallback === null)
+            return null;
+        return (_jsx(_Fragment, { children: validationErrorFallback ?? _jsx(SnapValidationFallback, { message: validationMessage }) }));
+    }
+    return (_jsx(SnapViewCoreInner, { snap: snap, handlers: handlers, loading: loading }));
+}
+export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark", colors, onValidationError, validationErrorFallback, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }));
+}
+// ─── SnapCardV2 (card frame + height limits) ─────────
+function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, }) {
+    const { colors } = useSnapTheme();
+    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
+    return (_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
+                cardStyles.card,
+                {
+                    borderRadius,
+                    maxHeight,
+                    borderColor: colors.border,
+                    backgroundColor: colors.surface,
+                },
+            ], children: [_jsx(View, { style: cardStyles.body, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }), showOverflowWarning && (_jsxs(View, { style: cardStyles.warningOverlay, children: [_jsx(View, { style: cardStyles.warningLine }), _jsx(View, { style: cardStyles.warningLabel, children: _jsxs(Text, { style: cardStyles.warningLabelText, children: [SNAP_MAX_HEIGHT, "px"] }) })] }))] }) }));
+}
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV2Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }));
+}
+const cardStyles = StyleSheet.create({
+    frameRing: { alignSelf: "stretch" },
+    card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
+    body: { paddingHorizontal: 16, paddingVertical: 16 },
+    warningOverlay: {
+        position: "absolute",
+        top: SNAP_MAX_HEIGHT,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10,
+    },
+    warningLine: {
+        height: 1,
+        borderTopWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "rgba(255,100,100,0.6)",
+    },
+    warningLabel: {
+        position: "absolute",
+        top: -10,
+        right: 4,
+        backgroundColor: "rgba(0,0,0,0.7)",
+        paddingHorizontal: 4,
+        paddingVertical: 1,
+        borderRadius: 3,
+    },
+    warningLabelText: {
+        fontSize: 10,
+        color: "rgba(255,100,100,0.7)",
+        fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }),
+    },
+});

package/dist/schemas.d.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import type { Spec } from "@json-render/core";
-import { SPEC_VERSION } from "./constants.js";
+import { type SpecVersion } from "./constants.js";
 declare const themeAccentSchema: z.ZodEnum<{
     gray: "gray";
     blue: "blue";
@@ -12,7 +12,10 @@ declare const themeAccentSchema: z.ZodEnum<{
     pink: "pink";
 }>;
 export declare const snapResponseSchema: z.ZodObject<{
-    version: z.ZodLiteral<"1.0">;
+    version: z.ZodEnum<{
+        "1.0": "1.0";
+        "2.0": "2.0";
+    }>;
     theme: z.ZodDefault<z.ZodOptional<z.ZodObject<{
         accent: z.ZodDefault<z.ZodEnum<{
             gray: "gray";
@@ -58,7 +61,7 @@ export type SnapSpecInput = {
  * without type casts. Runtime validation via the Zod schema still catches invalid shapes.
  */
 export type SnapHandlerResult = {
-    version: typeof SPEC_VERSION;
+    version: SpecVersion;
     theme?: {
         accent?: z.input<typeof themeAccentSchema>;
     };
@@ -68,9 +71,10 @@ export type SnapHandlerResult = {
 export declare const payloadSchema: z.ZodObject<{
     fid: z.ZodNumber;
     inputs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodString>]>>>;
-    button_index: z.ZodNumber;
     timestamp: z.ZodNumber;
-}, z.core.$strict>;
+    nonce: z.ZodString;
+    audience: z.ZodString;
+}, z.core.$strip>;
 export type SnapPayload = z.infer<typeof payloadSchema>;
 export declare const ACTION_TYPE_GET: "get";
 export declare const ACTION_TYPE_POST: "post";
@@ -81,20 +85,22 @@ export type SnapGetAction = z.infer<typeof snapGetActionSchema>;
 declare const snapPostActionSchema: z.ZodObject<{
     fid: z.ZodNumber;
     inputs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodString>]>>>;
-    button_index: z.ZodNumber;
     timestamp: z.ZodNumber;
+    nonce: z.ZodString;
+    audience: z.ZodString;
     type: z.ZodLiteral<"post">;
-}, z.core.$strict>;
+}, z.core.$strip>;
 export type SnapPostAction = z.infer<typeof snapPostActionSchema>;
 export declare const snapActionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"get">;
 }, z.core.$strip>, z.ZodObject<{
     fid: z.ZodNumber;
     inputs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodString>]>>>;
-    button_index: z.ZodNumber;
     timestamp: z.ZodNumber;
+    nonce: z.ZodString;
+    audience: z.ZodString;
     type: z.ZodLiteral<"post">;
-}, z.core.$strict>], "type">;
+}, z.core.$strip>], "type">;
 export type SnapAction = z.infer<typeof snapActionSchema>;
 export type SnapContext = {
     action: SnapAction;

package/dist/schemas.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { EFFECT_VALUES, SPEC_VERSION } from "./constants.js";
+import { EFFECT_VALUES, SUPPORTED_SPEC_VERSIONS } from "./constants.js";
 import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES } from "./colors.js";
 // ─── Theme ─────────────────────────────────────────────
 const themeAccentSchema = z.enum(PALETTE_COLOR_VALUES, {
@@ -15,7 +15,7 @@ const themeSchema = z
 // typed here via the json-render Spec type.
 export const snapResponseSchema = z
     .object({
-    version: z.literal(SPEC_VERSION),
+    version: z.enum(SUPPORTED_SPEC_VERSIONS),
     theme: themeSchema.optional().default({ accent: DEFAULT_THEME_ACCENT }),
     effects: z.array(z.enum(EFFECT_VALUES)).optional(),
     ui: z.custom((val) => val != null &&
@@ -35,20 +35,19 @@ export const payloadSchema = z
     .object({
     fid: z.number().int().nonnegative(),
     inputs: z.record(z.string(), postInputValueSchema).default({}),
-    button_index: z.number().int().nonnegative(),
     timestamp: z.number().int(),
+    nonce: z.string(),
+    audience: z.string(),
 })
-    .strict();
+    .strip();
 export const ACTION_TYPE_GET = "get";
 export const ACTION_TYPE_POST = "post";
 const snapGetActionSchema = z.object({
     type: z.literal(ACTION_TYPE_GET),
 });
-const snapPostActionSchema = payloadSchema
-    .extend({
+const snapPostActionSchema = payloadSchema.extend({
     type: z.literal(ACTION_TYPE_POST),
-})
-    .strict();
+});
 export const snapActionSchema = z.discriminatedUnion("type", [
     snapGetActionSchema,
     snapPostActionSchema,

package/dist/server/parseRequest.d.ts

@@ -15,6 +15,9 @@ export type ParseRequestError = {
 } | {
     type: "signature";
     message: string;
+} | {
+    type: "origin_mismatch";
+    message: string;
 };
 export type ParseRequestOptions = {
     /**
@@ -27,6 +30,10 @@ export type ParseRequestOptions = {
      * potential replays. Defaults to 300 (5 minutes) when not provided.
      */
     maxSkewSeconds?: number;
+    /**
+     * The origin of the request. Derived from the request when not provided.
+     */
+    requestOrigin?: string;
 };
 export type ParseRequestResult = {
     success: true;

package/dist/server/parseRequest.js

@@ -77,6 +77,33 @@ export async function parseRequest(request, options = {}) {
             },
         };
     }
+    let expectedOrigin = options.requestOrigin;
+    if (expectedOrigin === undefined) {
+        try {
+            expectedOrigin = new URL(request.url).origin;
+        }
+        catch {
+            // do nothing
+        }
+    }
+    if (expectedOrigin === undefined) {
+        return {
+            success: false,
+            error: {
+                type: "origin_mismatch",
+                message: "request origin is required for validation",
+            },
+        };
+    }
+    if (body.audience !== expectedOrigin) {
+        return {
+            success: false,
+            error: {
+                type: "origin_mismatch",
+                message: `payload audience "${body.audience}" does not match expected origin "${expectedOrigin}"`,
+            },
+        };
+    }
     return {
         success: true,
         action: {

package/dist/ui/schema.js

@@ -25,7 +25,7 @@ export const snapJsonRenderSchema = defineSchema((s) => ({
 }), {
     defaultRules: [
         "You are generating auxiliary UI for a Farcaster Snap. Prefer components matching snap element types (Item, Badge, ButtonGroup, Input, Switch, ToggleGroup, Slider, Progress, Image, Separator).",
-        "Snap pages use a Stack root with at most 6 body children and 1 media element (Image); keep generated trees small.",
+        "Snap structural limits: max 64 elements, max 7 children on root, max 6 children per non-root container, max 4 levels of nesting. Keep generated trees small.",
         "Bottom-of-card snap buttons are Button components; use actions post / link / mini_app / sdk per SPEC.md.",
     ],
 });

package/dist/validator.d.ts

@@ -4,8 +4,9 @@ export type ValidationResult = {
     issues: z.core.$ZodIssue[];
 };
 /**
- * Validates a snap response against the schema.
+ * Validates a snap response against the schema, structural constraints, and URL rules.
  * Element-level prop validation is handled by the json-render catalog.
- * This validates the snap envelope (version, theme, effects, spec shape).
+ * This validates the snap envelope (version, theme, effects, spec shape)
+ * and enforces structural limits (element count, children, depth) and URL validation.
  */
 export declare function validateSnapResponse(json: unknown): ValidationResult;

package/dist/validator.js

@@ -1,8 +1,176 @@
 import { snapResponseSchema } from "./schemas.js";
+import { MAX_CHILDREN, MAX_DEPTH, MAX_ELEMENTS, MAX_ROOT_CHILDREN, SPEC_VERSION_1 } from "./constants.js";
+// ─── Helpers ──────────────────────────────────────────
+/** Actions whose `params.target` must be a valid URL. */
+const URL_TARGET_ACTIONS = new Set(["submit", "open_url", "open_mini_app"]);
+/** Image file extensions allowed in image URLs. */
+const ALLOWED_IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp"]);
 /**
- * Validates a snap response against the schema.
+ * Returns true if the URL is a loopback address (localhost dev exception).
+ */
+function isLoopback(url) {
+    const host = url.hostname;
+    return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "[::1]";
+}
+/**
+ * Validate a URL string: must be HTTPS (or HTTP on loopback for dev).
+ * Returns an error message or null if valid.
+ */
+function validateUrl(raw) {
+    let url;
+    try {
+        url = new URL(raw);
+    }
+    catch {
+        return `Invalid URL: "${raw}"`;
+    }
+    if (url.protocol === "https:")
+        return null;
+    if (url.protocol === "http:" && isLoopback(url))
+        return null;
+    if (url.protocol === "javascript:")
+        return `javascript: URIs are not allowed`;
+    return `URL must use HTTPS (got ${url.protocol.replace(":", "")}): "${raw}"`;
+}
+/**
+ * Validate an image URL: must pass URL validation + have an allowed extension.
+ */
+function validateImageUrl(raw) {
+    const urlError = validateUrl(raw);
+    if (urlError)
+        return urlError;
+    let url;
+    try {
+        url = new URL(raw);
+    }
+    catch {
+        return null; // already caught above
+    }
+    const pathname = url.pathname;
+    const lastDot = pathname.lastIndexOf(".");
+    if (lastDot === -1) {
+        return `Image URL must end with a supported extension (${[...ALLOWED_IMAGE_EXTENSIONS].join(", ")}): "${raw}"`;
+    }
+    const ext = pathname.slice(lastDot + 1).toLowerCase();
+    if (!ALLOWED_IMAGE_EXTENSIONS.has(ext)) {
+        return `Image URL has unsupported extension ".${ext}" (allowed: ${[...ALLOWED_IMAGE_EXTENSIONS].join(", ")}): "${raw}"`;
+    }
+    return null;
+}
+// ─── Depth measurement ────────────────────────────────
+/**
+ * Walk the element tree from `root` and return the max depth reached.
+ * Avoids infinite loops by tracking visited element ids.
+ */
+function measureDepth(elements, id, visited = new Set()) {
+    if (visited.has(id))
+        return 0;
+    visited.add(id);
+    const el = elements[id];
+    if (!el?.children?.length)
+        return 1;
+    let max = 0;
+    for (const childId of el.children) {
+        max = Math.max(max, measureDepth(elements, childId, visited));
+    }
+    return 1 + max;
+}
+// ─── Structural validation ────────────────────────────
+/**
+ * Validate structural constraints on the snap UI tree:
+ * - root must reference an existing element
+ * - Total element count ≤ MAX_ELEMENTS
+ * - Children per element ≤ MAX_CHILDREN
+ * - Nesting depth ≤ MAX_DEPTH
+ */
+function validateStructure(ui) {
+    const issues = [];
+    const elements = ui.elements;
+    const elementCount = Object.keys(elements).length;
+    if (elementCount > MAX_ELEMENTS) {
+        issues.push({
+            code: "custom",
+            message: `Snap exceeds maximum of ${MAX_ELEMENTS} elements (found ${elementCount})`,
+            path: ["ui", "elements"],
+        });
+    }
+    // Root element has a stricter children limit
+    const rootEl = elements[ui.root];
+    if (rootEl?.children && rootEl.children.length > MAX_ROOT_CHILDREN) {
+        issues.push({
+            code: "custom",
+            message: `Root element "${ui.root}" exceeds maximum of ${MAX_ROOT_CHILDREN} children (found ${rootEl.children.length})`,
+            path: ["ui", "elements", ui.root, "children"],
+        });
+    }
+    for (const [id, el] of Object.entries(elements)) {
+        if (id === ui.root)
+            continue; // already checked above
+        if (el.children && el.children.length > MAX_CHILDREN) {
+            issues.push({
+                code: "custom",
+                message: `Element "${id}" exceeds maximum of ${MAX_CHILDREN} children (found ${el.children.length})`,
+                path: ["ui", "elements", id, "children"],
+            });
+        }
+    }
+    const depth = measureDepth(elements, ui.root);
+    if (depth > MAX_DEPTH) {
+        issues.push({
+            code: "custom",
+            message: `Snap exceeds maximum nesting depth of ${MAX_DEPTH} (found ${depth})`,
+            path: ["ui", "root"],
+        });
+    }
+    return issues;
+}
+// ─── URL validation ───────────────────────────────────
+/**
+ * Validate all URLs in the snap:
+ * - image.url: must be HTTPS with allowed extension
+ * - action target URLs (submit, open_url, open_mini_app): must be HTTPS
+ */
+function validateUrls(elements) {
+    const issues = [];
+    const els = elements;
+    for (const [id, el] of Object.entries(els)) {
+        // Validate image URLs
+        if (el.type === "image" && typeof el.props?.url === "string") {
+            const error = validateImageUrl(el.props.url);
+            if (error) {
+                issues.push({
+                    code: "custom",
+                    message: error,
+                    path: ["ui", "elements", id, "props", "url"],
+                });
+            }
+        }
+        // Validate action target URLs
+        if (el.on) {
+            for (const [event, binding] of Object.entries(el.on)) {
+                if (binding &&
+                    URL_TARGET_ACTIONS.has(binding.action ?? "") &&
+                    typeof binding.params?.target === "string") {
+                    const error = validateUrl(binding.params.target);
+                    if (error) {
+                        issues.push({
+                            code: "custom",
+                            message: error,
+                            path: ["ui", "elements", id, "on", event, "params", "target"],
+                        });
+                    }
+                }
+            }
+        }
+    }
+    return issues;
+}
+// ─── Public API ───────────────────────────────────────
+/**
+ * Validates a snap response against the schema, structural constraints, and URL rules.
  * Element-level prop validation is handled by the json-render catalog.
- * This validates the snap envelope (version, theme, effects, spec shape).
+ * This validates the snap envelope (version, theme, effects, spec shape)
+ * and enforces structural limits (element count, children, depth) and URL validation.
  */
 export function validateSnapResponse(json) {
     const parsed = snapResponseSchema.safeParse(json);
@@ -12,5 +180,28 @@ export function validateSnapResponse(json) {
             issues: parsed.error.issues,
         };
     }
+    const ui = parsed.data.ui;
+    // Root reference check applies to all versions
+    if (!(ui.root in ui.elements)) {
+        return {
+            valid: false,
+            issues: [{
+                    code: "custom",
+                    message: `ui.root "${ui.root}" does not exist in ui.elements`,
+                    path: ["ui", "root"],
+                }],
+        };
+    }
+    // Structural limits and URL validation only apply to v2+ snaps
+    if (parsed.data.version !== SPEC_VERSION_1) {
+        const structuralIssues = validateStructure(ui);
+        if (structuralIssues.length > 0) {
+            return { valid: false, issues: structuralIssues };
+        }
+        const urlIssues = validateUrls(ui.elements);
+        if (urlIssues.length > 0) {
+            return { valid: false, issues: urlIssues };
+        }
+    }
     return { valid: true, issues: [] };
 }

package/llms.txt

@@ -30,6 +30,15 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 
 `ui.root` is the ID of the root element. `ui.elements` is a flat map of element ID to element definition.
 
+## Structural Constraints
+
+| Constraint | Limit |
+|------------|-------|
+| Total elements | Max **64** in `ui.elements` |
+| Root children | Max **7** children on the root element |
+| Children per element | Max **6** per non-root container (`stack`, `item_group`) |
+| Nesting depth | Max **4** levels from root to deepest leaf |
+
 ## Components (16 total)
 
 ### Display Components

package/package.json

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

package/src/constants.ts

@@ -1,4 +1,8 @@
-export const SPEC_VERSION = "1.0" as const;
+export const SPEC_VERSION_1 = "1.0" as const;
+export const SPEC_VERSION_2 = "2.0" as const;
+export const SPEC_VERSION = SPEC_VERSION_1;
+export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2] as const;
+export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json" as const;
 
@@ -12,6 +16,12 @@ export const GRID_MIN_ROWS = 2;
 export const GRID_MAX_ROWS = 16;
 export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"] as const;
 
+// ─── Snap structural limits ───────────────────────────
+export const MAX_ELEMENTS = 64;
+export const MAX_ROOT_CHILDREN = 7;
+export const MAX_CHILDREN = 6;
+export const MAX_DEPTH = 4;
+
 // ─── Bar chart ─────────────────────────────────────────
 export const BAR_CHART_MAX_BARS = 6;
 export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/src/index.ts

@@ -4,9 +4,17 @@ export type {
 } from "@json-render/core";
 export {
   SPEC_VERSION,
+  SPEC_VERSION_1,
+  SPEC_VERSION_2,
+  SUPPORTED_SPEC_VERSIONS,
+  type SpecVersion,
   MEDIA_TYPE,
   EFFECT_VALUES,
   POST_GRID_TAP_KEY,
+  MAX_ELEMENTS,
+  MAX_ROOT_CHILDREN,
+  MAX_CHILDREN,
+  MAX_DEPTH,
 } from "./constants";
 export {
   DEFAULT_THEME_ACCENT,

package/src/react/accent-context.tsx

@@ -5,7 +5,7 @@ import { createContext, useContext, type ReactNode } from "react";
 type SnapPreviewContextValue = {
   /** From loaded snap `page.theme.accent` (undefined if the snap omits it). */
   pageAccent: string | undefined;
-  /** Light/dark appearance passed from SnapView. */
+  /** Light/dark appearance passed from SnapCard. */
   appearance: "light" | "dark";
 };
 

package/src/react/components/badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@neynar/ui/badge";
-import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -16,14 +16,13 @@ export function SnapBadge({
   const colors = useSnapColors();
 
   const badgeColor = colors.colorHex(color);
-  const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
   const style =
     variant === "outline"
       ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
-      : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+      : { backgroundColor: `${badgeColor}20`, color: badgeColor, borderColor: "transparent" };
 
   return (
     <Badge variant={variant} className="gap-1" style={style}>