Operational Slate Semantics

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

:root {
  --background: #F6F8FA;
  --foreground: #17202A;
  --card: #FFFFFF;
  --card-foreground: #17202A;
  --popover: #FFFFFF;
  --popover-foreground: #17202A;
  --primary: #1F63C6;
  --primary-foreground: #ffffff;
  --secondary: #6B7280;
  --secondary-foreground: #ffffff;
  --muted: #647181;
  --muted-foreground: #17202A;
  --accent: #3B82F6;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #D8DEE6;
  --input: #D8DEE6;
  --ring: #3B82F6;
  --chart-1: #1F63C6;
  --chart-2: #6B7280;
  --chart-3: #3B82F6;
  --chart-4: #0E7A4F;
  --chart-5: #B85C00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #17202A;
  --sidebar-primary: #1F63C6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #255FCF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8DEE6;
  --sidebar-ring: #3B82F6;
  --radius: 6px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F63C6;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #3B82F6;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #3B82F6;
  --chart-1: #1F63C6;
  --chart-2: #6B7280;
  --chart-3: #3B82F6;
  --chart-4: #0E7A4F;
  --chart-5: #B85C00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F63C6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3B82F6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #3B82F6;
  --radius: 6px;
}

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 OperationalSlateSemanticsShadcnKit() {
  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">Operational Slate Semantics</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": "operational-slate-semantics",
  "type": "registry:theme",
  "title": "Operational Slate Semantics shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F8FA",
      "foreground": "#17202A",
      "card": "#FFFFFF",
      "card-foreground": "#17202A",
      "popover": "#FFFFFF",
      "popover-foreground": "#17202A",
      "primary": "#1F63C6",
      "primary-foreground": "#ffffff",
      "secondary": "#6B7280",
      "secondary-foreground": "#ffffff",
      "muted": "#647181",
      "muted-foreground": "#17202A",
      "accent": "#3B82F6",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#D8DEE6",
      "input": "#D8DEE6",
      "ring": "#3B82F6",
      "chart-1": "#1F63C6",
      "chart-2": "#6B7280",
      "chart-3": "#3B82F6",
      "chart-4": "#0E7A4F",
      "chart-5": "#B85C00",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#17202A",
      "sidebar-primary": "#1F63C6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#255FCF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8DEE6",
      "sidebar-ring": "#3B82F6",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F63C6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3B82F6",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3B82F6",
      "chart-1": "#1F63C6",
      "chart-2": "#6B7280",
      "chart-3": "#3B82F6",
      "chart-4": "#0E7A4F",
      "chart-5": "#B85C00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F63C6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3B82F6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3B82F6",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b3-61cf-73e2-9626-34e714d84791",
    "slug": "operational-slate-semantics",
    "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"
      ]
    }
  }
}

# Operational Slate Semantics shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate a disciplined enterprise semantic palette into shadcn/ui without inventing a second component system. The preview must feel like a credible control plane: neutral first, one blue action path, and status states that always include icon or text redundancy.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table from `@/components/ui/*`.

## Token cues
Use `{colors.background}` as the cool canvas, `{colors.surface}` for panels, `{colors.primary}` only for primary actions, active navigation, and focus rings. Use `{colors.success}`, `{colors.warning}`, `{colors.error}`, and `{colors.info}` only inside labeled state rails, badges, and icon chips. Borders use `{colors.border}` by default.

## Visual character to preserve
- Cool gray application canvas with warm white or bone task slabs.
- 1px neutral panel borders, 4px semantic rails on state cards, and compact headers.
- Dense tables with tabular numbers, zebra bands, and status labels rather than colored cells.
- Blue focus halos outside the control border.

## ShadSync visual profile
family: enterprise-semantic; material: flat-slate; contour: rectilinear-soft; border: hairline-plus-state-rail; underlay: calibration-grid; grain: false; stickerBadges: false; motion: fast-confirmation; density: compact; accents: trusted-blue-plus-semantic-ramps.

## Signature component recipes
- button: 40px height, 6px radius, primary filled blue, secondary white with neutral border, focus ring `0 0 0 3px rgba(31,99,198,.18)`.
- card: white surface, 1px neutral border, 10px radius, optional 4px left semantic rail for status cards.
- input: 38-40px height, white fill, neutral border, blue border and halo on focus; never tint whole field for errors.
- textarea: same field treatment, 14px body text, validation message below with icon and text.
- select: same as input with mono or compact label above in dense forms.
- dialog: white slab, 1px border, 10px radius, restrained medium shadow, semantic alert rail when needed.
- sheet: warm bone header, white body, neutral separators, no decorative gradient.
- tabs: active tab uses blue text and 2px bottom rule; inactive tabs remain gray.
- badge: compact mono label, icon optional, semantic foreground plus pale background only after contrast testing.
- separator: 1px neutral rule; never use colored separators except semantic rail boundaries.
- checkbox: 16px square, 3px radius, blue checked state, visible focus halo.
- switch: neutral track, blue checked thumb track, text label required for state meaning.
- slider: blue active track, gray remaining track, visible numeric value.
- tooltip: dark slate background, white text, concise operational copy.
- dropdown-menu: white card, 1px border, compact 8px item rhythm, blue focus item background.
- table: sticky mono headers, 44px rows, neutral zebra bands, status cell includes icon chip and label.

## Preview shots
application-shell shows nav, metrics, table, and decision rail. detail-editor shows token edit form with dialog and validation. data-operations shows table, chart, filters, dropdown, slider, switches, and tooltips.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not create bespoke buttons, inputs, or tables. Use semantic aliases and class composition to express rails, focus rings, density, and neutral surfaces. Do not place raw hex in feature components except inside the generated theme layer.

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

export function SemanticRailCard() {
  return (
    <Card className="border-l-4 border-l-warning bg-card text-card-foreground shadow-sm">
      <CardHeader className="border-b bg-muted/40 py-3">
        <CardTitle className="text-base tracking-tight">Billing table needs label redundancy</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 pt-4">
        <Badge variant="outline" className="font-mono text-[11px]">! Warning state</Badge>
        <Table>
          <TableHeader><TableRow><TableHead>Token</TableHead><TableHead>Ratio</TableHead></TableRow></TableHeader>
          <TableBody><TableRow><TableCell>warning.bg / text</TableCell><TableCell className="font-mono">7.1</TableCell></TableRow></TableBody>
        </Table>
        <Button>Open token diff</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "decorative chroma",
        "color-only status",
        "gradient panels"
      ],
      "composition": "Three-zone SaaS control plane with navigation, exception table, and semantic decision rail.",
      "id": "application-shell",
      "mustShowStates": [
        "primary blue action",
        "warning rail with icon label",
        "error badge with text",
        "keyboard focus halo"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Approve release",
          "Export audit"
        ],
        "description": "Design systems team reviews token coverage, contrast, and table chroma discipline before release.",
        "eyebrow": "Production readiness",
        "headline": "Semantic palette audit queue",
        "rows": [
          {
            "ratio": "7.1",
            "status": "Warning: label missing",
            "team": "Billing Ops"
          },
          {
            "ratio": "3.2",
            "status": "Error: failing foreground",
            "team": "Support"
          },
          {
            "ratio": "5.8",
            "status": "Success: ready",
            "team": "Identity"
          }
        ],
        "stats": [
          {
            "label": "Passing contrast pairs",
            "value": "98.7%"
          },
          {
            "label": "Raw hex debt",
            "value": "0"
          },
          {
            "label": "Dark aliases",
            "value": "128"
          }
        ]
      }
    },
    {
      "avoid": [
        "tinted form backgrounds",
        "raw hex in labels",
        "missing helper text"
      ],
      "composition": "Token detail editor with warm header, neutral form fields, validation copy, and semantic rail summary.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input",
        "checked checkbox",
        "enabled switch",
        "warning validation text"
      ],
      "primitives": [
        "dialog",
        "sheet",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "button",
        "badge",
        "separator"
      ],
      "scene": {
        "actions": [
          "Save aliases",
          "Cancel"
        ],
        "description": "Edit brand.blue aliases with accessible foreground, background, border, icon, and focus roles.",
        "eyebrow": "Token editor",
        "fields": [
          {
            "label": "Primitive ramp",
            "value": "brand.blue.50-1000"
          },
          {
            "label": "Owner",
            "value": "Design Systems"
          },
          {
            "label": "Validation note",
            "value": "Pair warning state with icon and text label."
          }
        ],
        "headline": "Register OKLCH-ready primitive ramp"
      }
    },
    {
      "avoid": [
        "rainbow charts",
        "colored body cells",
        "unlabeled toggles"
      ],
      "composition": "Dense operations screen combining chart controls, colorblind-safe hatch series, and neutral rows.",
      "id": "data-operations",
      "mustShowStates": [
        "chart hatch encoding",
        "active filter badge",
        "slider numeric value",
        "neutral zebra table"
      ],
      "primitives": [
        "card",
        "table",
        "slider",
        "switch",
        "select",
        "badge",
        "button",
        "tooltip",
        "dropdown-menu",
        "separator"
      ],
      "scene": {
        "actions": [
          "Run sweep",
          "Open chart menu"
        ],
        "description": "Operational analytics validates hue plus pattern encodings and isolates chart tokens from product semantics.",
        "eyebrow": "Data visualization safety",
        "headline": "Chart token compliance sweep",
        "rows": [
          {
            "encoding": "blue solid + label",
            "result": "Ready",
            "series": "Revenue forecast"
          },
          {
            "encoding": "blue hatch + marker",
            "result": "Ready",
            "series": "Incident risk"
          }
        ],
        "stats": [
          {
            "label": "Hatched series",
            "value": "6"
          },
          {
            "label": "Color-only findings",
            "value": "0"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "trusted-blue with labeled success warning error info ramps",
    "border": "hairline-plus-state-rail",
    "contour": "rectilinear-soft",
    "density": "compact",
    "family": "enterprise-semantic",
    "grain": false,
    "material": "flat-slate",
    "motion": "fast-confirmation",
    "stickerBadges": false,
    "underlay": "calibration-grid"
  }
}