@slowclap/rezi-core 0.1.0-fork.1

package/dist/ui/recipes.js

@@ -0,0 +1,960 @@
+/**
+ * packages/core/src/ui/recipes.ts — Style recipes for all widget families.
+ *
+ * Why: Centralizes style computation so widgets never specify raw colors.
+ * Each recipe takes design tokens (theme, variant, state, size, tone)
+ * and returns TextStyle objects ready for the drawlist builder.
+ *
+ * Performance: All functions are pure and allocation-light. Frozen objects
+ * are returned for common paths. No closures or maps created per call.
+ *
+ * @see docs/design-system.md
+ */
+import { blendRgb } from "../theme/blend.js";
+import { resolveBorderVariant, resolveDensityGap, resolveSize, resolveSurface, resolveToneColor, resolveToneFg, resolveTypography, } from "./designTokens.js";
+export function buttonRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const density = params.density ?? "comfortable";
+    const spacing = resolveSize(size, params.spacing);
+    const px = density === "compact" ? Math.max(0, spacing.px - 1) : spacing.px;
+    const accentColor = resolveToneColor(colors, tone);
+    // Disabled overrides everything
+    if (state === "disabled") {
+        const outlineLike = variant === "outline" || variant === "soft";
+        return {
+            label: { fg: colors.disabled.fg },
+            bg: { bg: colors.disabled.bg },
+            px,
+            border: outlineLike ? "rounded" : "none",
+            borderStyle: outlineLike ? { fg: colors.disabled.fg } : undefined,
+        };
+    }
+    // Loading shows muted
+    if (state === "loading") {
+        return {
+            label: { fg: colors.fg.muted, dim: true },
+            bg: { bg: colors.bg.subtle },
+            px,
+            border: "none",
+            borderStyle: undefined,
+        };
+    }
+    // Focus adds underline + bold
+    const focusAttrs = state === "focus" ? { underline: true, bold: true } : {};
+    // Pressed adds dim
+    const pressedAttrs = state === "pressed" ? { dim: true } : {};
+    switch (variant) {
+        case "solid": {
+            const bg = state === "pressed" ? blendRgb(accentColor, colors.bg.base, 0.2) : accentColor;
+            return {
+                label: { fg: colors.fg.inverse, ...focusAttrs },
+                bg: { bg },
+                px,
+                border: "none",
+                borderStyle: undefined,
+            };
+        }
+        case "soft": {
+            const bgColor = state === "focus" || state === "active-item" ? colors.bg.subtle : colors.bg.elevated;
+            return {
+                label: { fg: accentColor, ...focusAttrs, ...pressedAttrs },
+                bg: { bg: bgColor },
+                px,
+                border: "rounded",
+                borderStyle: { fg: colors.border.subtle },
+            };
+        }
+        case "outline": {
+            const borderColor = state === "focus" ? accentColor : colors.border.default;
+            return {
+                label: { fg: colors.fg.primary, ...focusAttrs, ...pressedAttrs },
+                bg: { bg: colors.bg.base },
+                px,
+                border: "rounded",
+                borderStyle: { fg: borderColor },
+            };
+        }
+        case "ghost": {
+            const fg = tone === "default" ? colors.fg.secondary : accentColor;
+            return {
+                label: { fg, ...focusAttrs, ...pressedAttrs },
+                bg: state === "focus"
+                    ? { bg: colors.bg.elevated }
+                    : state === "active-item"
+                        ? { bg: colors.bg.subtle }
+                        : {},
+                px,
+                border: "none",
+                borderStyle: undefined,
+            };
+        }
+    }
+}
+export function inputRecipe(colors, params = {}) {
+    const state = params.state ?? "default";
+    const size = params.size ?? "md";
+    const density = params.density ?? "comfortable";
+    const spacing = resolveSize(size, params.spacing);
+    const px = density === "compact" ? Math.max(0, spacing.px - 1) : spacing.px;
+    if (state === "disabled") {
+        return {
+            text: { fg: colors.disabled.fg },
+            placeholder: { fg: colors.disabled.fg, dim: true, italic: true },
+            bg: { bg: colors.disabled.bg },
+            border: "single",
+            borderStyle: { fg: colors.disabled.fg },
+            px,
+        };
+    }
+    if (state === "error") {
+        return {
+            text: { fg: colors.fg.primary },
+            placeholder: { fg: colors.fg.muted, dim: true, italic: true },
+            bg: { bg: colors.bg.elevated },
+            border: "single",
+            borderStyle: { fg: colors.error },
+            px,
+        };
+    }
+    if (state === "focus") {
+        return {
+            text: { fg: colors.fg.primary },
+            placeholder: { fg: colors.fg.muted, dim: true, italic: true },
+            bg: { bg: colors.bg.elevated },
+            border: "heavy",
+            borderStyle: { fg: colors.accent.primary, bold: true },
+            px,
+        };
+    }
+    return {
+        text: { fg: colors.fg.primary },
+        placeholder: { fg: colors.fg.muted, dim: true, italic: true },
+        bg: { bg: colors.bg.elevated },
+        border: "single",
+        borderStyle: { fg: colors.border.default },
+        px,
+    };
+}
+export function surfaceRecipe(colors, params = {}) {
+    const elevation = params.elevation ?? 1;
+    const focused = params.focused ?? false;
+    const cardLike = params.cardLike ?? false;
+    const surface = resolveSurface(colors, elevation);
+    const borderVariant = resolveBorderVariant(elevation, focused);
+    let borderStyle;
+    if (surface.border !== null) {
+        borderStyle = focused ? { fg: colors.accent.primary, bold: true } : { fg: surface.border };
+    }
+    const borderStyleSides = cardLike && elevation >= 1 ? { top: { fg: colors.accent.primary } } : undefined;
+    return {
+        bg: { bg: surface.bg },
+        border: borderVariant,
+        borderStyle,
+        borderStyleSides,
+        shadow: surface.shadow,
+    };
+}
+export function selectRecipe(colors, params = {}) {
+    const state = params.state ?? "default";
+    const size = params.size ?? "md";
+    const spacing = resolveSize(size, params.spacing);
+    if (state === "disabled") {
+        return {
+            trigger: { fg: colors.disabled.fg },
+            triggerBg: { bg: colors.disabled.bg },
+            option: { fg: colors.disabled.fg },
+            activeOption: { fg: colors.disabled.fg },
+            border: "single",
+            borderStyle: { fg: colors.disabled.fg },
+            px: spacing.px,
+        };
+    }
+    if (state === "error") {
+        return {
+            trigger: { fg: colors.fg.primary },
+            triggerBg: { bg: colors.bg.elevated },
+            option: { fg: colors.fg.primary },
+            activeOption: { fg: colors.selected.fg, bg: colors.selected.bg, bold: true },
+            border: "single",
+            borderStyle: { fg: colors.error },
+            px: spacing.px,
+        };
+    }
+    const isFocused = state === "focus";
+    return {
+        trigger: isFocused
+            ? { fg: colors.fg.primary, underline: true, bold: true }
+            : { fg: colors.fg.primary },
+        triggerBg: { bg: colors.bg.elevated },
+        option: { fg: colors.fg.primary },
+        activeOption: { fg: colors.selected.fg, bg: colors.selected.bg, bold: true },
+        border: isFocused ? "heavy" : "single",
+        borderStyle: isFocused ? { fg: colors.accent.primary } : { fg: colors.border.default },
+        px: spacing.px,
+    };
+}
+export function tabsRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    const pressed = state === "pressed";
+    const accentColor = resolveToneColor(colors, tone);
+    if (state === "disabled") {
+        return {
+            item: { fg: colors.disabled.fg },
+            bg: { bg: colors.disabled.bg },
+            border: variant === "outline" ? "single" : "none",
+            borderStyle: variant === "outline" ? { fg: colors.disabled.fg } : undefined,
+            px: spacing.px,
+        };
+    }
+    const focusAttrs = focused ? { underline: true, bold: true } : {};
+    const pressAttrs = pressed ? { dim: true } : {};
+    switch (variant) {
+        case "solid":
+            return {
+                item: {
+                    fg: colors.fg.inverse,
+                    ...(active || focused ? { bold: true } : {}),
+                    ...focusAttrs,
+                    ...pressAttrs,
+                },
+                bg: { bg: active || focused ? accentColor : colors.bg.subtle },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "outline":
+            return {
+                item: {
+                    fg: active || focused ? accentColor : colors.fg.secondary,
+                    ...(active || focused ? { bold: true } : {}),
+                    ...focusAttrs,
+                    ...pressAttrs,
+                },
+                bg: { bg: colors.bg.base },
+                border: active || focused ? "heavy" : "single",
+                borderStyle: { fg: active || focused ? accentColor : colors.border.default },
+                px: spacing.px,
+            };
+        case "ghost":
+            return {
+                item: {
+                    fg: active || focused ? accentColor : colors.fg.secondary,
+                    ...(active || focused ? { bold: true } : {}),
+                    ...focusAttrs,
+                    ...pressAttrs,
+                },
+                bg: active || focused ? { bg: colors.bg.subtle } : {},
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "soft":
+            return {
+                item: {
+                    fg: active || focused ? accentColor : colors.fg.primary,
+                    ...(active || focused ? { bold: true } : {}),
+                    ...focusAttrs,
+                    ...pressAttrs,
+                },
+                bg: { bg: active || focused ? colors.bg.subtle : colors.bg.elevated },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+    }
+}
+export function accordionRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    const accentColor = resolveToneColor(colors, tone);
+    if (state === "disabled") {
+        return {
+            header: { fg: colors.disabled.fg },
+            content: { fg: colors.disabled.fg, dim: true },
+            bg: { bg: colors.disabled.bg },
+            border: variant === "outline" ? "single" : "none",
+            borderStyle: variant === "outline" ? { fg: colors.disabled.fg } : undefined,
+            px: spacing.px,
+        };
+    }
+    const headerStyle = {
+        fg: active || focused ? accentColor : colors.fg.primary,
+        ...(active || focused ? { bold: true } : {}),
+        ...(focused ? { underline: true } : {}),
+    };
+    switch (variant) {
+        case "solid":
+            return {
+                header: { ...headerStyle, fg: colors.fg.inverse },
+                content: { fg: colors.fg.primary },
+                bg: { bg: active || focused ? accentColor : colors.bg.subtle },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "outline":
+            return {
+                header: headerStyle,
+                content: { fg: colors.fg.primary },
+                bg: { bg: colors.bg.base },
+                border: active || focused ? "heavy" : "single",
+                borderStyle: { fg: active || focused ? accentColor : colors.border.default },
+                px: spacing.px,
+            };
+        case "ghost":
+            return {
+                header: {
+                    ...headerStyle,
+                    fg: active || focused ? accentColor : colors.fg.secondary,
+                },
+                content: { fg: colors.fg.primary },
+                bg: active || focused ? { bg: colors.bg.subtle } : {},
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "soft":
+            return {
+                header: headerStyle,
+                content: { fg: colors.fg.primary },
+                bg: { bg: active || focused ? colors.bg.subtle : colors.bg.elevated },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+    }
+}
+export function breadcrumbRecipe(colors, params = {}) {
+    const variant = params.variant ?? "ghost";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    if (state === "disabled") {
+        return {
+            item: { fg: colors.disabled.fg },
+            separator: { fg: colors.disabled.fg, dim: true },
+            bg: { bg: colors.disabled.bg },
+            px: spacing.px,
+        };
+    }
+    const itemStyle = {
+        fg: active ? colors.fg.primary : accentColor,
+        ...(active || focused ? { bold: true } : {}),
+        ...(focused ? { underline: true } : {}),
+    };
+    const bg = variant === "solid"
+        ? { bg: active || focused ? accentColor : colors.bg.subtle }
+        : variant === "soft"
+            ? { bg: active || focused ? colors.bg.subtle : colors.bg.elevated }
+            : active || focused
+                ? { bg: colors.bg.subtle }
+                : {};
+    return {
+        item: variant === "solid" ? { ...itemStyle, fg: colors.fg.inverse } : itemStyle,
+        separator: { fg: colors.fg.muted, dim: true },
+        bg,
+        px: spacing.px,
+    };
+}
+export function paginationRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    if (state === "disabled") {
+        return {
+            control: { fg: colors.disabled.fg },
+            bg: { bg: colors.disabled.bg },
+            border: variant === "outline" ? "single" : "none",
+            borderStyle: variant === "outline" ? { fg: colors.disabled.fg } : undefined,
+            px: spacing.px,
+        };
+    }
+    const controlStyle = {
+        fg: active || focused ? accentColor : colors.fg.primary,
+        ...(active || focused ? { bold: true } : {}),
+        ...(focused ? { underline: true } : {}),
+    };
+    switch (variant) {
+        case "solid":
+            return {
+                control: { ...controlStyle, fg: colors.fg.inverse },
+                bg: { bg: active || focused ? accentColor : colors.bg.subtle },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "outline":
+            return {
+                control: controlStyle,
+                bg: { bg: colors.bg.base },
+                border: active || focused ? "heavy" : "single",
+                borderStyle: { fg: active || focused ? accentColor : colors.border.default },
+                px: spacing.px,
+            };
+        case "ghost":
+            return {
+                control: {
+                    ...controlStyle,
+                    fg: active || focused ? accentColor : colors.fg.secondary,
+                },
+                bg: active || focused ? { bg: colors.bg.subtle } : {},
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "soft":
+            return {
+                control: controlStyle,
+                bg: { bg: active || focused ? colors.bg.subtle : colors.bg.elevated },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+    }
+}
+export function kbdRecipe(colors, params = {}) {
+    const variant = params.variant ?? "outline";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    if (state === "disabled") {
+        return {
+            key: { fg: colors.disabled.fg, bold: false },
+            separator: { fg: colors.disabled.fg, dim: true },
+            bracket: { fg: colors.disabled.fg, dim: true },
+            bg: { bg: colors.disabled.bg },
+            border: "single",
+            borderStyle: { fg: colors.disabled.fg },
+            px: spacing.px,
+        };
+    }
+    const focused = state === "focus";
+    const keyStyle = {
+        fg: accentColor,
+        bold: true,
+        ...(focused ? { underline: true } : {}),
+    };
+    switch (variant) {
+        case "solid":
+            return {
+                key: { ...keyStyle, fg: colors.fg.inverse },
+                separator: { fg: colors.fg.inverse, dim: true },
+                bracket: { fg: colors.fg.inverse, dim: true },
+                bg: { bg: accentColor },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "ghost":
+            return {
+                key: { ...keyStyle, fg: colors.fg.primary },
+                separator: { fg: colors.fg.muted },
+                bracket: { fg: colors.fg.muted },
+                bg: {},
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "soft":
+            return {
+                key: keyStyle,
+                separator: { fg: colors.fg.muted },
+                bracket: { fg: colors.fg.muted },
+                bg: { bg: colors.bg.subtle },
+                border: "none",
+                borderStyle: undefined,
+                px: spacing.px,
+            };
+        case "outline":
+            return {
+                key: keyStyle,
+                separator: { fg: colors.fg.muted },
+                bracket: { fg: colors.fg.muted },
+                bg: { bg: colors.bg.elevated },
+                border: focused ? "heavy" : "single",
+                borderStyle: focused ? { fg: accentColor } : { fg: colors.border.default },
+                px: spacing.px,
+            };
+    }
+}
+export function sidebarRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    if (state === "disabled") {
+        return {
+            item: { fg: colors.disabled.fg },
+            bg: { bg: colors.disabled.bg },
+            border: "single",
+            borderStyle: { fg: colors.disabled.fg },
+            px: spacing.px,
+            gap: resolveDensityGap("compact"),
+        };
+    }
+    const item = {
+        fg: active || focused ? accentColor : colors.fg.primary,
+        ...(active || focused ? { bold: true } : {}),
+        ...(focused ? { underline: true } : {}),
+    };
+    return {
+        item: variant === "solid" ? { ...item, fg: colors.fg.inverse } : item,
+        bg: variant === "solid"
+            ? { bg: active || focused ? accentColor : colors.bg.subtle }
+            : variant === "ghost"
+                ? active || focused
+                    ? { bg: colors.bg.subtle }
+                    : {}
+                : { bg: active || focused ? colors.bg.subtle : colors.bg.elevated },
+        border: variant === "outline" ? (focused ? "heavy" : "single") : "rounded",
+        borderStyle: variant === "outline"
+            ? { fg: focused ? accentColor : colors.border.default }
+            : { fg: colors.border.subtle },
+        px: spacing.px,
+        gap: resolveDensityGap(size === "sm" ? "compact" : "comfortable"),
+    };
+}
+export function toolbarRecipe(colors, params = {}) {
+    const variant = params.variant ?? "ghost";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    const active = state === "active-item" || state === "selected";
+    const focused = state === "focus";
+    if (state === "disabled") {
+        return {
+            item: { fg: colors.disabled.fg },
+            bg: { bg: colors.disabled.bg },
+            border: "none",
+            borderStyle: undefined,
+            px: spacing.px,
+            gap: resolveDensityGap("compact"),
+        };
+    }
+    const item = {
+        fg: active || focused ? accentColor : colors.fg.secondary,
+        ...(active || focused ? { bold: true } : {}),
+        ...(focused ? { underline: true } : {}),
+    };
+    return {
+        item: variant === "solid" ? { ...item, fg: colors.fg.inverse } : item,
+        bg: variant === "solid"
+            ? { bg: active || focused ? accentColor : colors.bg.subtle }
+            : variant === "soft"
+                ? { bg: active || focused ? colors.bg.subtle : colors.bg.elevated }
+                : active || focused
+                    ? { bg: colors.bg.subtle }
+                    : {},
+        border: variant === "outline" && focused ? "single" : "none",
+        borderStyle: variant === "outline" && focused ? { fg: accentColor } : undefined,
+        px: spacing.px,
+        gap: resolveDensityGap(size === "sm" ? "compact" : "comfortable"),
+    };
+}
+export function dropdownRecipe(colors, params = {}) {
+    const variant = params.variant ?? "soft";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    if (state === "disabled") {
+        return {
+            item: { fg: colors.disabled.fg },
+            shortcut: { fg: colors.disabled.fg, dim: true },
+            bg: { bg: colors.disabled.bg },
+            border: "single",
+            borderStyle: { fg: colors.disabled.fg },
+            shadow: false,
+            px: spacing.px,
+        };
+    }
+    if (state === "active-item") {
+        return {
+            item: { fg: colors.fg.inverse, bg: accentColor, bold: true },
+            shortcut: { fg: colors.fg.inverse, bg: accentColor, dim: true },
+            bg: { bg: accentColor },
+            border: "single",
+            borderStyle: { fg: accentColor },
+            shadow: { density: "light", offsetX: 1, offsetY: 1 },
+            px: spacing.px,
+        };
+    }
+    if (state === "focus") {
+        return {
+            item: { fg: colors.fg.primary, underline: true, bold: true },
+            shortcut: { fg: colors.fg.muted },
+            bg: { bg: colors.bg.overlay },
+            border: "heavy",
+            borderStyle: { fg: accentColor, bold: true },
+            shadow: { density: "light", offsetX: 1, offsetY: 1 },
+            px: spacing.px,
+        };
+    }
+    const baseBg = variant === "solid"
+        ? accentColor
+        : variant === "ghost"
+            ? colors.bg.base
+            : variant === "outline"
+                ? colors.bg.base
+                : colors.bg.overlay;
+    return {
+        item: {
+            fg: variant === "solid" ? colors.fg.inverse : colors.fg.primary,
+        },
+        shortcut: {
+            fg: variant === "solid" ? colors.fg.inverse : colors.fg.muted,
+            dim: variant !== "solid",
+        },
+        bg: { bg: baseBg },
+        border: "single",
+        borderStyle: {
+            fg: variant === "outline" ? colors.border.default : colors.border.strong,
+        },
+        shadow: { density: "light", offsetX: 1, offsetY: 1 },
+        px: spacing.px,
+    };
+}
+export function treeRecipe(colors, params = {}) {
+    const variant = params.variant ?? "ghost";
+    const tone = params.tone ?? "default";
+    const size = params.size ?? "md";
+    const state = params.state ?? "default";
+    const spacing = resolveSize(size, params.spacing);
+    const accentColor = resolveToneColor(colors, tone);
+    const selected = state === "selected" || state === "active-item";
+    if (state === "disabled") {
+        return {
+            node: { fg: colors.disabled.fg },
+            prefix: { fg: colors.disabled.fg, dim: true },
+            bg: { bg: colors.disabled.bg },
+            border: "none",
+            borderStyle: undefined,
+            px: spacing.px,
+        };
+    }
+    if (state === "focus") {
+        return {
+            node: { fg: accentColor, underline: true, bold: true },
+            prefix: { fg: accentColor, dim: true },
+            bg: { bg: colors.focus.bg },
+            border: "none",
+            borderStyle: undefined,
+            px: spacing.px,
+        };
+    }
+    if (selected) {
+        return {
+            node: {
+                fg: colors.selected.fg,
+                bg: colors.selected.bg,
+                bold: true,
+            },
+            prefix: {
+                fg: variant === "solid" ? colors.selected.fg : colors.fg.muted,
+                ...(variant === "solid" ? { bg: colors.selected.bg } : {}),
+            },
+            bg: { bg: colors.selected.bg },
+            border: "none",
+            borderStyle: undefined,
+            px: spacing.px,
+        };
+    }
+    return {
+        node: {
+            fg: variant === "solid" ? colors.fg.inverse : colors.fg.primary,
+        },
+        prefix: { fg: colors.fg.muted },
+        bg: variant === "solid"
+            ? { bg: accentColor }
+            : variant === "soft"
+                ? { bg: colors.bg.subtle }
+                : {},
+        border: "none",
+        borderStyle: undefined,
+        px: spacing.px,
+    };
+}
+export function tableRecipe(colors, params = {}) {
+    const state = params.state ?? "row";
+    const size = params.size ?? "md";
+    const tone = params.tone ?? "default";
+    const density = params.density ?? "comfortable";
+    const spacing = resolveSize(size, params.spacing);
+    const px = density === "compact" ? Math.max(0, spacing.px - 1) : spacing.px;
+    const headerToneFg = tone === "default" ? colors.fg.secondary : resolveToneColor(colors, tone);
+    switch (state) {
+        case "header":
+            return {
+                cell: { fg: headerToneFg, bold: true },
+                bg: { bg: colors.bg.elevated },
+                px,
+            };
+        case "row":
+            return {
+                cell: { fg: colors.fg.primary },
+                bg: { bg: colors.bg.base },
+                px,
+            };
+        case "stripe":
+            return {
+                cell: { fg: colors.fg.primary },
+                bg: { bg: colors.bg.subtle },
+                px,
+            };
+        case "selectedRow":
+            return {
+                cell: { fg: colors.selected.fg, bold: true },
+                bg: { bg: colors.selected.bg },
+                px,
+            };
+        case "focusedRow":
+            return {
+                cell: { fg: colors.fg.primary, bold: true },
+                bg: { bg: colors.focus.bg },
+                px,
+            };
+    }
+}
+export function modalRecipe(colors, params = {}) {
+    const focused = params.focused ?? true;
+    return {
+        frame: { bg: colors.bg.overlay },
+        backdrop: { bg: colors.bg.base, dim: true },
+        border: focused ? "heavy" : "rounded",
+        borderStyle: focused ? { fg: colors.accent.primary, bold: true } : { fg: colors.border.strong },
+        shadow: true,
+        title: { fg: colors.fg.primary, bold: true },
+    };
+}
+export function badgeRecipe(colors, params = {}) {
+    const tone = params.tone ?? "default";
+    const resolvedTone = tone === "info" ? "primary" : tone;
+    let color;
+    switch (tone) {
+        case "danger":
+            color = colors.error;
+            break;
+        case "success":
+            color = colors.success;
+            break;
+        case "warning":
+            color = colors.warning;
+            break;
+        case "info":
+            color = colors.info;
+            break;
+        case "default":
+        case "primary":
+            color = colors.accent.primary;
+            break;
+    }
+    return {
+        text: { fg: resolveToneFg(colors, resolvedTone), bold: true },
+        bg: { bg: color },
+    };
+}
+export function tagRecipe(colors, params = {}) {
+    const tone = params.tone ?? "default";
+    const resolvedTone = tone === "info" ? "primary" : tone;
+    let bg;
+    switch (tone) {
+        case "danger":
+            bg = colors.error;
+            break;
+        case "success":
+            bg = colors.success;
+            break;
+        case "warning":
+            bg = colors.warning;
+            break;
+        case "info":
+            bg = colors.info;
+            break;
+        case "primary":
+            bg = colors.accent.primary;
+            break;
+        case "default":
+            bg = colors.accent.secondary;
+            break;
+    }
+    return {
+        text: { fg: resolveToneFg(colors, resolvedTone), bold: true },
+        bg: { bg },
+    };
+}
+export function textRecipe(colors, params = {}) {
+    const role = params.role ?? "body";
+    const typo = resolveTypography(colors, role);
+    return { style: typo };
+}
+export function dividerRecipe(colors) {
+    return {
+        style: { fg: colors.border.subtle },
+    };
+}
+export function checkboxRecipe(colors, params = {}) {
+    const state = params.state ?? "default";
+    const checked = params.checked ?? false;
+    const tone = params.tone ?? "default";
+    const large = params.size === "lg";
+    const selected = checked || state === "selected";
+    const selectedColor = resolveToneColor(colors, tone);
+    if (state === "disabled") {
+        return {
+            indicator: { fg: colors.disabled.fg },
+            label: { fg: colors.disabled.fg },
+        };
+    }
+    const isFocused = state === "focus";
+    return {
+        indicator: {
+            fg: selected ? selectedColor : colors.fg.secondary,
+            bold: isFocused || large,
+            ...(isFocused ? { underline: true } : {}),
+        },
+        label: {
+            fg: colors.fg.primary,
+            bold: isFocused || large,
+            ...(isFocused ? { underline: true } : {}),
+        },
+    };
+}
+export function sliderRecipe(colors, params = {}) {
+    const state = params.state ?? "default";
+    if (state === "disabled") {
+        return {
+            track: { fg: colors.disabled.fg },
+            filled: { fg: colors.disabled.fg },
+            thumb: { fg: colors.disabled.fg },
+        };
+    }
+    if (state === "readonly") {
+        return {
+            track: { fg: colors.border.subtle, dim: true },
+            filled: { fg: colors.accent.primary, dim: true },
+            thumb: { fg: colors.accent.primary, dim: true },
+        };
+    }
+    const focused = state === "focus";
+    return {
+        track: { fg: colors.border.subtle },
+        filled: focused ? { fg: colors.accent.primary, bold: true } : { fg: colors.accent.primary },
+        thumb: focused ? { fg: colors.accent.primary, bold: true } : { fg: colors.accent.primary },
+    };
+}
+export function progressRecipe(colors, params = {}) {
+    const tone = params.tone ?? "primary";
+    const accentColor = resolveToneColor(colors, tone);
+    return {
+        filled: { fg: accentColor },
+        track: { fg: colors.border.subtle },
+    };
+}
+export function calloutRecipe(colors, params = {}) {
+    const tone = params.tone ?? "info";
+    let accentColor;
+    switch (tone) {
+        case "danger":
+            accentColor = colors.error;
+            break;
+        case "success":
+            accentColor = colors.success;
+            break;
+        case "warning":
+            accentColor = colors.warning;
+            break;
+        case "info":
+            accentColor = colors.info;
+            break;
+        case "default":
+        case "primary":
+            accentColor = colors.accent.primary;
+            break;
+    }
+    return {
+        text: { fg: colors.fg.primary },
+        borderStyle: { fg: accentColor },
+        bg: { bg: colors.bg.elevated },
+    };
+}
+export function scrollbarRecipe(colors) {
+    return {
+        track: { fg: colors.border.subtle },
+        thumb: { fg: colors.fg.muted },
+    };
+}
+// ---------------------------------------------------------------------------
+// Public recipe namespace
+// ---------------------------------------------------------------------------
+/**
+ * Recipe namespace — the primary API for computing widget styles
+ * from design tokens. All recipes take a ColorTokens set (from ThemeDefinition)
+ * and return TextStyle objects.
+ *
+ * @example
+ * ```typescript
+ * const colors = darkTheme.colors;
+ * const btn = recipe.button(colors, { variant: "solid", tone: "primary", state: "focus" });
+ * // btn.label: { fg: ..., underline: true, bold: true }
+ * // btn.bg: { bg: ... }
+ * ```
+ */
+export const recipe = {
+    button: buttonRecipe,
+    input: inputRecipe,
+    surface: surfaceRecipe,
+    select: selectRecipe,
+    tabs: tabsRecipe,
+    accordion: accordionRecipe,
+    breadcrumb: breadcrumbRecipe,
+    pagination: paginationRecipe,
+    kbd: kbdRecipe,
+    sidebar: sidebarRecipe,
+    toolbar: toolbarRecipe,
+    dropdown: dropdownRecipe,
+    tree: treeRecipe,
+    table: tableRecipe,
+    modal: modalRecipe,
+    badge: badgeRecipe,
+    tag: tagRecipe,
+    text: textRecipe,
+    divider: dividerRecipe,
+    checkbox: checkboxRecipe,
+    slider: sliderRecipe,
+    progress: progressRecipe,
+    callout: calloutRecipe,
+    scrollbar: scrollbarRecipe,
+};
+//# sourceMappingURL=recipes.js.map