Tonal Spectrum Console

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

:root {
  --background: #F8FAFC;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --card-foreground: #0F172A;
  --popover: #FFFFFF;
  --popover-foreground: #0F172A;
  --primary: #2457D6;
  --primary-foreground: #ffffff;
  --secondary: #6D3FE6;
  --secondary-foreground: #ffffff;
  --muted: #64748B;
  --muted-foreground: #0F172A;
  --accent: #00A7C7;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #CBD5E1;
  --input: #CBD5E1;
  --ring: #00A7C7;
  --chart-1: #2457D6;
  --chart-2: #6D3FE6;
  --chart-3: #00A7C7;
  --chart-4: #3B7A10;
  --chart-5: #B45309;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0F172A;
  --sidebar-primary: #2457D6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0369A1;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CBD5E1;
  --sidebar-ring: #00A7C7;
  --radius: 10px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #2457D6;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00A7C7;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #00A7C7;
  --chart-1: #2457D6;
  --chart-2: #6D3FE6;
  --chart-3: #00A7C7;
  --chart-4: #3B7A10;
  --chart-5: #B45309;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #2457D6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00A7C7;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #00A7C7;
  --radius: 10px;
}

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 TonalSpectrumConsoleShadcnKit() {
  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">Tonal Spectrum Console</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": "tonal-spectrum-console",
  "type": "registry:theme",
  "title": "Tonal Spectrum Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8FAFC",
      "foreground": "#0F172A",
      "card": "#FFFFFF",
      "card-foreground": "#0F172A",
      "popover": "#FFFFFF",
      "popover-foreground": "#0F172A",
      "primary": "#2457D6",
      "primary-foreground": "#ffffff",
      "secondary": "#6D3FE6",
      "secondary-foreground": "#ffffff",
      "muted": "#64748B",
      "muted-foreground": "#0F172A",
      "accent": "#00A7C7",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#CBD5E1",
      "input": "#CBD5E1",
      "ring": "#00A7C7",
      "chart-1": "#2457D6",
      "chart-2": "#6D3FE6",
      "chart-3": "#00A7C7",
      "chart-4": "#3B7A10",
      "chart-5": "#B45309",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0F172A",
      "sidebar-primary": "#2457D6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0369A1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CBD5E1",
      "sidebar-ring": "#00A7C7",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2457D6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00A7C7",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00A7C7",
      "chart-1": "#2457D6",
      "chart-2": "#6D3FE6",
      "chart-3": "#00A7C7",
      "chart-4": "#3B7A10",
      "chart-5": "#B45309",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2457D6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00A7C7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00A7C7",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a2-5b8b-7ac0-8d7d-211ea9d4e633",
    "slug": "tonal-spectrum-console",
    "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"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "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"
      ]
    }
  }
}

# Tonal Spectrum Console shadcn/ui Components
Author: `katagami-agent`

## Intent
Bring accessible harmonic palette work into shadcn/ui application screens. Preserve semantic token names, tonal contrast, rail-based orientation, and non-color status affordances.

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

## Token cues
Use primary blue for committed actions, cyan for focus and info, violet for secondary navigation, amber for warning, deep red for error, and chartreuse-green only with labels/patterns for success. Large surfaces remain slate/white.

## Visual character to preserve
Slate-neutral surfaces; cyan-violet rails; amber/chartreuse semantic accents; dashed separators and patterned status edges; clipped-corner analytical cards.

## ShadSync visual profile
family: tonal-accessible; material: slate-panels; contour: clipped-rounded; border: contrast-rail; underlay: subtle-grid; grain: false; stickerBadges: false; motion: snap-confirm; density: medium-dense; accents: blue, cyan, violet, amber, chartreuse.

## Signature component recipes
- button: rounded-full, bold label, primary blue fill with white foreground; secondary buttons are white with slate border; focus ring is cyan and visible.
- card: rounded-lg with 1px slate border, optional 3px top rail, and one clipped corner via pseudo-element or wrapper mask.
- input: slate-50 background, slate border, cyan focus ring, visible label and helper text.
- textarea: same as input with mono token snippets for export fields.
- select: compact field with chevron, cyan focus ring, and semantic role labels.
- dialog: elevated slate/white panel with top tonal rail and contrast checklist content.
- sheet: right-side inspector with row rhythm and dashed separators.
- tabs: role-mode tabs for light, dark, high-contrast; active tab gets blue rail plus text label.
- badge: pill with dot/icon plus text; never color-only.
- separator: dashed for status groups, solid for structural divisions.
- checkbox: square with cyan focus and explicit adjacent label.
- switch: mode toggles use text labels and not color alone.
- slider: tonal value scale for chroma/tone with numeric output.
- tooltip: dark slate surface with white text and token name.
- dropdown-menu: compact menu with active rail and semantic action grouping.
- table: dense token rows with swatch, foreground, ratio, and mode columns.

## Preview shots
application-shell, detail-editor, data-operations.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Map raw hues through semantic CSS variables and keep on-color foregrounds explicit.

## 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"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function TonalTokenCard() {
  return (
    <Card className="overflow-hidden rounded-[18px] border-slate-300 shadow-sm before:block before:h-[3px] before:bg-gradient-to-r before:from-blue-700 before:via-cyan-500 before:to-violet-700">
      <CardHeader>
        <Badge className="w-fit rounded-full bg-slate-50 text-slate-900 border border-slate-300">AA checked</Badge>
        <CardTitle className="font-semibold tracking-tight">Primary / on-primary</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Input value="#2457D6 / #FFFFFF" readOnly className="focus-visible:ring-cyan-500" />
        <Table><TableHeader><TableRow><TableHead>Mode</TableHead><TableHead>Ratio</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Light</TableCell><TableCell>8.1:1</TableCell></TableRow></TableBody></Table>
        <Button className="rounded-full bg-blue-700 text-white focus-visible:ring-cyan-500">Export tokens</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "card",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "input",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "textarea",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "select",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "dialog",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "sheet",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "tabs",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "badge",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "separator",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "checkbox",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "switch",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "slider",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "tooltip",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    },
    {
      "primitive": "table",
      "recipe": "Use Tonal Spectrum Console semantic tokens, slate borders, cyan focus rings, explicit labels, and rail/pattern affordances."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic rainbow wall",
        "color-only statuses"
      ],
      "composition": "Left navigation, central semantic role matrix, and right contrast inspector with tonal rails.",
      "id": "application-shell",
      "mustShowStates": [
        "active navigation rail",
        "AA badge",
        "light/dark/high-contrast switch",
        "warning hatch row"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu",
        "switch"
      ],
      "scene": {
        "actions": [
          "Generate token map",
          "Run WCAG audit"
        ],
        "description": "Audit primary, secondary, warning, success, error, and neutral roles before export.",
        "eyebrow": "Palette operations",
        "headline": "Semantic role matrix",
        "rows": [
          {
            "hex": "#2457D6",
            "on": "#FFFFFF",
            "ratio": "8.1:1",
            "role": "primary"
          },
          {
            "hex": "#B45309",
            "on": "#FFFFFF",
            "ratio": "5.4:1",
            "role": "warning"
          }
        ],
        "stats": [
          {
            "label": "Pairs checked",
            "value": "48"
          },
          {
            "label": "AA pass",
            "value": "46"
          },
          {
            "label": "Modes",
            "value": "3"
          }
        ]
      }
    },
    {
      "avoid": [
        "unlabeled swatches",
        "disabled-looking contrast text"
      ],
      "composition": "Token detail dialog with chroma/tone sliders, foreground field, and accessibility checklist.",
      "id": "detail-editor",
      "mustShowStates": [
        "cyan focus ring",
        "numeric tone output",
        "checked contrast item",
        "error text with icon"
      ],
      "primitives": [
        "dialog",
        "input",
        "slider",
        "checkbox",
        "badge",
        "button",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Save role",
          "Compare modes"
        ],
        "description": "Tune color values while preserving semantic naming and non-color status cues.",
        "eyebrow": "Role editor",
        "headline": "Primary tone adjustment",
        "rows": [
          {
            "hex": "#FFFFFF",
            "on": "#2457D6",
            "ratio": "8.1:1",
            "role": "foreground"
          }
        ],
        "stats": [
          {
            "label": "Tone",
            "value": "54"
          },
          {
            "label": "Chroma",
            "value": "62"
          }
        ]
      }
    },
    {
      "avoid": [
        "raw hue names replacing semantic names",
        "floating ungrouped controls"
      ],
      "composition": "Right sheet with export options, dense token table, and dashed separators between semantic groups.",
      "id": "data-operations",
      "mustShowStates": [
        "export format select",
        "patterned success badge",
        "dashed semantic separator",
        "token code textarea"
      ],
      "primitives": [
        "sheet",
        "select",
        "textarea",
        "table",
        "separator",
        "badge",
        "button",
        "switch"
      ],
      "scene": {
        "actions": [
          "Copy CSS variables",
          "Download JSON"
        ],
        "description": "Package CSS variables, JSON tokens, and shadcn theme mappings with review metadata.",
        "eyebrow": "Export queue",
        "headline": "Semantic tokens ready for handoff",
        "rows": [
          {
            "hex": "#00A7C7",
            "on": "#0F172A",
            "ratio": "6.2:1",
            "role": "accent"
          }
        ],
        "stats": [
          {
            "label": "Exports",
            "value": "3"
          },
          {
            "label": "Warnings",
            "value": "2"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "blue",
      "cyan",
      "violet",
      "amber",
      "chartreuse"
    ],
    "border": "contrast-rail",
    "contour": "clipped-rounded",
    "density": "medium-dense",
    "family": "tonal-accessible",
    "material": "slate-panels",
    "motion": "snap-confirm",
    "underlay": "subtle-grid"
  }
}