Lumen Chroma Console

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

:root {
  --background: #F7F8F2;
  --foreground: #101418;
  --card: #FFFFFF;
  --card-foreground: #101418;
  --popover: #FFFFFF;
  --popover-foreground: #101418;
  --primary: #246BFE;
  --primary-foreground: #ffffff;
  --secondary: #7A58D7;
  --secondary-foreground: #ffffff;
  --muted: #65717C;
  --muted-foreground: #101418;
  --accent: #00A989;
  --accent-foreground: #ffffff;
  --destructive: #D63C3C;
  --border: #D6DDD8;
  --input: #D6DDD8;
  --ring: #00A989;
  --chart-1: #246BFE;
  --chart-2: #7A58D7;
  --chart-3: #00A989;
  --chart-4: #168A58;
  --chart-5: #B67505;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #101418;
  --sidebar-primary: #246BFE;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1976D2;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D6DDD8;
  --sidebar-ring: #00A989;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #246BFE;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00A989;
  --accent-foreground: #ffffff;
  --destructive: #D63C3C;
  --border: #303642;
  --input: #303642;
  --ring: #00A989;
  --chart-1: #246BFE;
  --chart-2: #7A58D7;
  --chart-3: #00A989;
  --chart-4: #168A58;
  --chart-5: #B67505;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #246BFE;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00A989;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #00A989;
  --radius: 14px;
}

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 LumenChromaConsoleShadcnKit() {
  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">Lumen Chroma 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": "lumen-chroma-console",
  "type": "registry:theme",
  "title": "Lumen Chroma Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F8F2",
      "foreground": "#101418",
      "card": "#FFFFFF",
      "card-foreground": "#101418",
      "popover": "#FFFFFF",
      "popover-foreground": "#101418",
      "primary": "#246BFE",
      "primary-foreground": "#ffffff",
      "secondary": "#7A58D7",
      "secondary-foreground": "#ffffff",
      "muted": "#65717C",
      "muted-foreground": "#101418",
      "accent": "#00A989",
      "accent-foreground": "#ffffff",
      "destructive": "#D63C3C",
      "border": "#D6DDD8",
      "input": "#D6DDD8",
      "ring": "#00A989",
      "chart-1": "#246BFE",
      "chart-2": "#7A58D7",
      "chart-3": "#00A989",
      "chart-4": "#168A58",
      "chart-5": "#B67505",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#101418",
      "sidebar-primary": "#246BFE",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1976D2",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D6DDD8",
      "sidebar-ring": "#00A989",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#246BFE",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00A989",
      "accent-foreground": "#ffffff",
      "destructive": "#D63C3C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00A989",
      "chart-1": "#246BFE",
      "chart-2": "#7A58D7",
      "chart-3": "#00A989",
      "chart-4": "#168A58",
      "chart-5": "#B67505",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#246BFE",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00A989",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00A989",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-76da-7850-9a94-feffade4bbc7",
    "slug": "lumen-chroma-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"
      ]
    }
  }
}

# shadcn/ui Components — Lumen Chroma Console

Author: `katagami-agent`

This first-class shadcn/ui artifact translates the Lumen Chroma Console visual profile into local primitives from `@/components/ui/*`.

## ShadSync visual profile

- Warm neutral canvas `#F7F8F2`, white/L94 slabs `#FFFFFF`, and 1px ruler borders `#D6DDD8`.
- Source color spine `#246BFE`, violet comparison focus `#7A58D7`, and green pass rails `#00A989`.
- Use `JetBrains Mono` for tokens, hex values, OKLCH L/C/H readings, APCA polarity, and WCAG ratios.
- Motion: 160ms cubic-bezier(0.2, 0.8, 0.2, 1) for meter fills, focus rings, and sheet entrance.

## Signature component recipes

### button
Use `<Button>` as a pill with `rounded-full`, blue source fill, white label, shadow-sm, and `focus-visible:ring-4 focus-visible:ring-[#8A63FF]/30`; secondary buttons are white slabs with token-border and mono ratio caption.

### card
Use `<Card>` with warm white background, `border-[#D9D5C8]`, `rounded-2xl`, top 3px lightness strip, mono token eyebrow, and compact audit metric footer.

### input
Use `<Input>` with white measured field, mono label above, helper text below showing contrast target, and violet focus ring.

### textarea
Use `<Textarea>` for palette notes with dot-grid background, monospace placeholder examples, and resize-none in dense inspector panels.

### select
Use `<Select>` for role and ramp selection; trigger includes tiny color chip, semantic role text, and current L-value badge.

### dialog
Use `<Dialog>` as a contrast audit modal with primary spine, ratio rows, pass/fail badges, and warning summary block.

### sheet
Use `<Sheet>` for side audit rail; keep sticky token header, scrollable comparison list, and meter rows entering from right.

### tabs
Use `<Tabs>` for Light/Dark/Brand states; active tab gets blue underline and mono state count badge.

### badge
Use `<Badge>` for PASS/WARN/FAIL, token role labels, and APCA polarity; keep high-contrast fills and mono uppercase text.

### separator
Use `<Separator>` as ruler line with neutral border color and optional lightness tick labels.

### checkbox
Use `<Checkbox>` for contrast criteria lists; checked state uses success green with white check and mono criterion label.

### switch
Use `<Switch>` for theme and algorithm toggles; track shows lightness rail and thumb uses source color when enabled.

### slider
Use `<Slider>` for chroma/lightness tuning; rail is neutral ruler and range fill uses selected semantic color.

### tooltip
Use `<Tooltip>` for metric explanations; dark text slab, mono value line, and short WCAG/APCA note.

### dropdown-menu
Use `<DropdownMenu>` for token actions; each item has color chip, mono shortcut, and hover slab.

### table
Use `<Table>` for token matrix with sticky header, mono values, color swatch cells, ratio column, and PASS/WARN/FAIL badges.

## Preview shots

- `application-shell`: token families, source spine, central contrast matrix, and right audit rail.
- `detail-editor`: semantic role editor with sliders, inputs, and live pass/fail preview.
- `data-operations`: dense table, dropdown actions, tooltip metrics, and batch status badges.

## 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 ContrastGateCard() {
  return (
    <Card className="rounded-2xl border-[#D9D5C8] bg-[#FCFAF3] shadow-sm">
      <CardHeader className="border-t-4 border-t-[#2F6BFF]">
        <CardTitle className="font-semibold tracking-[-0.03em]">Primary / Surface</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center gap-2"><Badge className="bg-[#128A5A] text-white">PASS</Badge><code>7.4:1 · APCA +78</code></div>
        <Input aria-label="Token hex" value="#2F6BFF" readOnly className="font-mono focus-visible:ring-[#8A63FF]" />
        <Table><TableHeader><TableRow><TableHead>Role</TableHead><TableHead>Hex</TableHead><TableHead>Status</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>primary</TableCell><TableCell className="font-mono">#2F6BFF</TableCell><TableCell><Badge>PASS</Badge></TableCell></TableRow></TableBody></Table>
        <Button className="rounded-full bg-[#2F6BFF] text-white focus-visible:ring-4 focus-visible:ring-[#8A63FF]/30">Apply accessible token</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019ea9a3-76da-7850-9a94-feffade4bbc7",
    "name": "Lumen Chroma Console",
    "slug": "lumen-chroma-console"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Cards use stepped OKLCH lightness slabs with visible L94, L88, L76, and L62 labels printed into the surface edges.",
    "Accent color appears as controlled chroma rails and small semantic status chips rather than flooding large content surfaces.",
    "Every interactive cluster includes a contrast-gate meter motif with pass bands, ratio labels, and APCA-style polarity markers.",
    "Neutral ramps are layered as calm data-console panels with fine 1px borders, inset grid lines, and token-name annotations."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": false,
    "stickerBadges": true,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Lumen Chroma Console launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Name tokens by semantic role and mode, then map brand hues to those roles.",
      "Gate text, icon, border, and state relationships with automated WCAG/APCA checks.",
      "Keep large surfaces neutral and use chroma in rails, chips, focus rings, and status states."
    ],
    "dont": [
      "Do not create arbitrary hex values inside components or marketing sections.",
      "Do not assume equal HSL steps produce equal perceived lightness.",
      "Do not use saturated brand color as the main dark-mode surface."
    ]
  }
}