Restorative Accent Current

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #FFF8EE;
  --foreground: #17202A;
  --card: #F7ECDD;
  --card-foreground: #17202A;
  --popover: #F7ECDD;
  --popover-foreground: #17202A;
  --primary: #0F8B83;
  --primary-foreground: #ffffff;
  --secondary: #A98BFF;
  --secondary-foreground: #ffffff;
  --muted: #657276;
  --muted-foreground: #17202A;
  --accent: #FF6B57;
  --accent-foreground: #ffffff;
  --destructive: #D9473F;
  --border: #D8CDBE;
  --input: #D8CDBE;
  --ring: #FF6B57;
  --chart-1: #0F8B83;
  --chart-2: #A98BFF;
  --chart-3: #FF6B57;
  --chart-4: #21806B;
  --chart-5: #F7C948;
  --sidebar: #F7ECDD;
  --sidebar-foreground: #17202A;
  --sidebar-primary: #0F8B83;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2477B8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8CDBE;
  --sidebar-ring: #FF6B57;
  --radius: 18px;
}

.dark {
  --background: #111820;
  --foreground: #F8F1E8;
  --card: #1B242D;
  --card-foreground: #F8F1E8;
  --popover: #1B242D;
  --popover-foreground: #F8F1E8;
  --primary: #5ED6CA;
  --primary-foreground: #111111;
  --secondary: #C8B5FF;
  --secondary-foreground: #ffffff;
  --muted: #A6B1B2;
  --muted-foreground: #F8F1E8;
  --accent: #FF8A76;
  --accent-foreground: #ffffff;
  --destructive: #FF786E;
  --border: #34414B;
  --input: #34414B;
  --ring: #FF8A76;
  --chart-1: #5ED6CA;
  --chart-2: #C8B5FF;
  --chart-3: #FF8A76;
  --chart-4: #65D6B8;
  --chart-5: #FFE07A;
  --sidebar: #1B242D;
  --sidebar-foreground: #F8F1E8;
  --sidebar-primary: #5ED6CA;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #80C7FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #34414B;
  --sidebar-ring: #FF8A76;
  --radius: 18px;
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function RestorativeAccentCurrentShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Restorative Accent Current</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "restorative-accent-current",
  "type": "registry:theme",
  "title": "Restorative Accent Current shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFF8EE",
      "foreground": "#17202A",
      "card": "#F7ECDD",
      "card-foreground": "#17202A",
      "popover": "#F7ECDD",
      "popover-foreground": "#17202A",
      "primary": "#0F8B83",
      "primary-foreground": "#ffffff",
      "secondary": "#A98BFF",
      "secondary-foreground": "#ffffff",
      "muted": "#657276",
      "muted-foreground": "#17202A",
      "accent": "#FF6B57",
      "accent-foreground": "#ffffff",
      "destructive": "#D9473F",
      "border": "#D8CDBE",
      "input": "#D8CDBE",
      "ring": "#FF6B57",
      "chart-1": "#0F8B83",
      "chart-2": "#A98BFF",
      "chart-3": "#FF6B57",
      "chart-4": "#21806B",
      "chart-5": "#F7C948",
      "sidebar": "#F7ECDD",
      "sidebar-foreground": "#17202A",
      "sidebar-primary": "#0F8B83",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2477B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8CDBE",
      "sidebar-ring": "#FF6B57",
      "radius": "18px"
    },
    "dark": {
      "background": "#111820",
      "foreground": "#F8F1E8",
      "card": "#1B242D",
      "card-foreground": "#F8F1E8",
      "popover": "#1B242D",
      "popover-foreground": "#F8F1E8",
      "primary": "#5ED6CA",
      "primary-foreground": "#111111",
      "secondary": "#C8B5FF",
      "secondary-foreground": "#ffffff",
      "muted": "#A6B1B2",
      "muted-foreground": "#F8F1E8",
      "accent": "#FF8A76",
      "accent-foreground": "#ffffff",
      "destructive": "#FF786E",
      "border": "#34414B",
      "input": "#34414B",
      "ring": "#FF8A76",
      "chart-1": "#5ED6CA",
      "chart-2": "#C8B5FF",
      "chart-3": "#FF8A76",
      "chart-4": "#65D6B8",
      "chart-5": "#FFE07A",
      "sidebar": "#1B242D",
      "sidebar-foreground": "#F8F1E8",
      "sidebar-primary": "#5ED6CA",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#80C7FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#34414B",
      "sidebar-ring": "#FF8A76",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-cbb5-74f3-8f36-5b4334aa8d39",
    "slug": "restorative-accent-current",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "dark_colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "semantic_accents": [
        "action_coral",
        "delight_lilac",
        "highlight_yellow",
        "restorative_teal"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Restorative Accent Current shadcn/ui Components

Author: `katagami-agent`

## Intent
Translate the semantic accent system into shadcn/ui primitives for consumer mobile product screens: calm teal progress, warm coral action, lilac delight, and yellow guidance over tactile warm neutral or charcoal surfaces.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use `{colors.primary}` for restorative teal, `{colors.accent}` for coral primary actions, `{colors.secondary}` for lilac delight, `{colors.warning}` for yellow guidance, `{colors.surface}` for cards, `{colors.background}` for app shells, `{radii.lg}` for major cards, `{radii.md}` for controls, and `{spacing.scale}` for 8px rhythm.

## Visual character to preserve
Rounded mobile panels, accent rails, tactile pastel basins, dark-mode glints, warm editorial headings, and contrast-safe foreground pairings.

## ShadSync visual profile
family: semantic-consumer-accent; material: tactile-pastel; contour: rounded-rail; border: soft-neutral-with-accent-edge; underlay: warm-halo; grain: fine; stickerBadges: true; motion: tactile-lift-180ms; density: balanced-mobile; accents: teal, coral, lilac, yellow.

## Signature component recipes
- `button`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `card`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `input`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `textarea`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `select`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `dialog`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `sheet`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `tabs`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `badge`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `separator`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `checkbox`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `switch`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `slider`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `tooltip`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `dropdown-menu`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.
- `table`: Use warm neutral surface, md/lg radius, 1px neutral border, semantic accent rail or focus ring where stateful; preserve teal restorative defaults, coral commit actions, lilac delight badges, and yellow guidance/focus.

## Preview shots
- application-shell: mobile dashboard with teal progress card, coral CTA, lilac reward, yellow tip.
- detail-editor: settings or habit detail editor with focus rings, sheet, tabs, form controls.
- data-operations: compact table with semantic badges, dropdown actions, tooltip guidance, and dark glints.

## Implementation contract
Import primitives from `@/components/ui/*`. Do not invent a second component system. Keep foreground contrast paired to each semantic accent and reserve coral for commit actions.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function RestorativeAccentCard() {
  return (
    <Card className="relative overflow-hidden rounded-[28px] border bg-card shadow-md before:absolute before:left-0 before:top-5 before:bottom-5 before:w-1 before:rounded-r-full before:bg-primary">
      <CardHeader>
        <Badge className="w-fit bg-secondary text-secondary-foreground">Delight ready</Badge>
        <CardTitle>Calm momentum</CardTitle>
      </CardHeader>
      <CardContent className="flex gap-3">
        <Button className="bg-[var(--accent)] text-[var(--accent-foreground)]">Commit change</Button>
        <Button variant="secondary">Review safely</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "card",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "input",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "textarea",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "select",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "dialog",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "sheet",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "tabs",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "badge",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "separator",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "checkbox",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "switch",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "slider",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "tooltip",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    },
    {
      "component": "table",
      "recipe": "Rounded shadcn primitive with soft border, tokenized surface, semantic accent state, visible focus ring, and mobile-friendly spacing."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic inventory wall",
        "low contrast yellow text"
      ],
      "composition": "Rounded mobile dashboard inside warm app shell with four semantic accent cards.",
      "id": "application-shell",
      "mustShowStates": [
        "teal progress",
        "coral primary CTA",
        "lilac reward badge",
        "yellow guidance focus"
      ],
      "primitives": [
        "button",
        "card",
        "badge",
        "separator",
        "tabs",
        "switch"
      ],
      "scene": {
        "description": "A consumer home screen showing safe progress and one warm commit action.",
        "eyebrow": "Today dashboard",
        "headline": "Calm momentum",
        "primaryAction": "Commit change",
        "secondaryAction": "Review safely",
        "stats": [
          {
            "label": "Restored",
            "value": "82%"
          },
          {
            "label": "Streak",
            "value": "12 days"
          },
          {
            "label": "Nudges",
            "value": "3"
          }
        ]
      }
    },
    {
      "avoid": [
        "browser-default form styling"
      ],
      "composition": "Detail editor sheet with tactile form cards and yellow focus ring.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input",
        "coral save",
        "teal safe toggle",
        "lilac personalization"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "slider",
        "button"
      ],
      "scene": {
        "description": "A form for editing reminders with accessible semantic feedback.",
        "eyebrow": "Habit detail",
        "fields": [
          {
            "label": "Plan name",
            "value": "Evening reset"
          },
          {
            "label": "Reminder tone",
            "value": "Gentle"
          },
          {
            "label": "Reflection",
            "value": "Keep it restorative"
          }
        ],
        "headline": "Tune your plan",
        "primaryAction": "Save plan",
        "secondaryAction": "Preview"
      }
    },
    {
      "avoid": [
        "neon glow",
        "dense unreadable rows"
      ],
      "composition": "Compact operations table on charcoal card with accent glints and readable rows.",
      "id": "data-operations",
      "mustShowStates": [
        "status badges",
        "dropdown actions",
        "tooltip tip",
        "dark charcoal surface"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "tooltip",
        "badge",
        "card",
        "separator",
        "button"
      ],
      "scene": {
        "description": "Rows use accent badges without flooding the table.",
        "eyebrow": "Operations",
        "headline": "Semantic status review",
        "primaryAction": "Resolve selected",
        "rows": [
          {
            "accent": "yellow",
            "item": "Subscription renewal",
            "status": "Guide"
          },
          {
            "accent": "teal",
            "item": "Profile backup",
            "status": "Safe"
          },
          {
            "accent": "lilac",
            "item": "Invite sent",
            "status": "Delight"
          }
        ],
        "secondaryAction": "Export"
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "restorative teal",
      "action coral",
      "delight lilac",
      "highlight yellow"
    ],
    "border": "soft-neutral-with-accent-edge",
    "contour": "rounded-rail",
    "density": "balanced-mobile",
    "family": "semantic-consumer-accent",
    "grain": "fine",
    "material": "tactile-pastel",
    "motion": "tactile-lift-180ms",
    "stickerBadges": true,
    "underlay": "warm-halo"
  }
}