Platform-Native Adaptive Color

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

:root {
  --background: #F7F8FA;
  --foreground: #1D1D1F;
  --card: #FFFFFF;
  --card-foreground: #1D1D1F;
  --popover: #FFFFFF;
  --popover-foreground: #1D1D1F;
  --primary: #0A84FF;
  --primary-foreground: #ffffff;
  --secondary: #30D158;
  --secondary-foreground: #ffffff;
  --muted: #6B7280;
  --muted-foreground: #1D1D1F;
  --accent: #5E5CE6;
  --accent-foreground: #ffffff;
  --destructive: #D92D20;
  --border: #D7DAE0;
  --input: #D7DAE0;
  --ring: #5E5CE6;
  --chart-1: #0A84FF;
  --chart-2: #30D158;
  --chart-3: #5E5CE6;
  --chart-4: #12805C;
  --chart-5: #B7791F;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1D1D1F;
  --sidebar-primary: #0A84FF;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2563EB;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D7DAE0;
  --sidebar-ring: #5E5CE6;
  --radius: 10px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0A84FF;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #5E5CE6;
  --accent-foreground: #ffffff;
  --destructive: #D92D20;
  --border: #303642;
  --input: #303642;
  --ring: #5E5CE6;
  --chart-1: #0A84FF;
  --chart-2: #30D158;
  --chart-3: #5E5CE6;
  --chart-4: #12805C;
  --chart-5: #B7791F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0A84FF;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #5E5CE6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #5E5CE6;
  --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 PlatformNativeAdaptiveColorShadcnKit() {
  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">Platform-Native Adaptive Color</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": "platform-native-adaptive-color",
  "type": "registry:theme",
  "title": "Platform-Native Adaptive Color shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F8FA",
      "foreground": "#1D1D1F",
      "card": "#FFFFFF",
      "card-foreground": "#1D1D1F",
      "popover": "#FFFFFF",
      "popover-foreground": "#1D1D1F",
      "primary": "#0A84FF",
      "primary-foreground": "#ffffff",
      "secondary": "#30D158",
      "secondary-foreground": "#ffffff",
      "muted": "#6B7280",
      "muted-foreground": "#1D1D1F",
      "accent": "#5E5CE6",
      "accent-foreground": "#ffffff",
      "destructive": "#D92D20",
      "border": "#D7DAE0",
      "input": "#D7DAE0",
      "ring": "#5E5CE6",
      "chart-1": "#0A84FF",
      "chart-2": "#30D158",
      "chart-3": "#5E5CE6",
      "chart-4": "#12805C",
      "chart-5": "#B7791F",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#1D1D1F",
      "sidebar-primary": "#0A84FF",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2563EB",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D7DAE0",
      "sidebar-ring": "#5E5CE6",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0A84FF",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#5E5CE6",
      "accent-foreground": "#ffffff",
      "destructive": "#D92D20",
      "border": "#303642",
      "input": "#303642",
      "ring": "#5E5CE6",
      "chart-1": "#0A84FF",
      "chart-2": "#30D158",
      "chart-3": "#5E5CE6",
      "chart-4": "#12805C",
      "chart-5": "#B7791F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0A84FF",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5E5CE6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#5E5CE6",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b5-03c8-7be0-a172-fc613a20eeab",
    "slug": "platform-native-adaptive-color",
    "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"
      ]
    }
  }
}

# Platform-Native Adaptive Color shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate a restrained platform-native adaptive palette into shadcn/ui without over-branding basic affordances. Components reference semantic tokens only, preserve neutral foundations, and pair all color states with labels, icons, borders, or patterns.

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

## Token cues
Use primary for default action/focus, secondary/success for valid completion, warning/error/info for explicit states, surface/background/border/muted for structure. Do not create component-local rainbow roles.

## Visual character to preserve
Adaptive CSS variables; native hairline borders; compact rounded controls; 3px semantic side rails; visible focus rings; status labels that include text and icon cues; low-chroma dark mode.

## ShadSync visual profile
family: platform-native; material: adaptive-neutral; contour: rounded-rect; border: hairline-plus-semantic-rail; underlay: false; grain: false; stickerBadges: false; motion: native-160ms; density: balanced-compact; accents: blue, green, amber, red, violet, teal.

## Signature component recipes
- button: neutral outline by default; primary uses bg-primary text-primary-foreground; focus-visible ring-primary/25; destructive only for destructive intent.
- card: bg-card border-border rounded-lg shadow-sm; optional border-l-4 semantic rail for state cards.
- input, textarea, select: neutral surface, 1px border, rounded-md, placeholder-muted, focus ring plus border-primary.
- dialog and sheet: surface panel, neutral overlay, compact title rows, semantic footer actions; no decorative gradient panel.
- tabs: segmented-control style on muted background with selected tab on surface and text-primary.
- badge: include icon or text prefix; success/warning/error/info variants have border and label cue.
- separator: hairline neutral divider; never use colored separators except semantic rail.
- checkbox, switch, slider: familiar native geometry; checked state primary or success only when semantically valid.
- tooltip and dropdown-menu: surface, hairline border, shadow-md, compact spacing.
- table: readable row separators, muted uppercase headers, status badge cells with icon plus text.

## Preview shots
application-shell, detail-editor, and data-operations must look like product screens, not inventories.

## Implementation contract
Import local primitives from `@/components/ui/*`. Use the Katagami DESIGN.with-shadcn.md, shadcn.json, shadcn-components.md, and shadcn-shots.json files. Do not invent a second component system.

## 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 NativeAdaptiveReleaseCard() {
  return <Card className="border-l-4 border-l-primary shadow-sm">
    <CardHeader className="space-y-1"><CardTitle>Deployment queue</CardTitle></CardHeader>
    <CardContent className="space-y-4">
      <div className="flex gap-2"><Input value="Semantic tokens only" readOnly /><Button>Approve</Button></div>
      <Table><TableHeader><TableRow><TableHead>Service</TableHead><TableHead>Status</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Payment API</TableCell><TableCell><Badge variant="outline">● Ready</Badge></TableCell></TableRow></TableBody></Table>
    </CardContent>
  </Card>
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to button."
    },
    {
      "component": "card",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to card."
    },
    {
      "component": "input",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to input."
    },
    {
      "component": "textarea",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to textarea."
    },
    {
      "component": "select",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to select."
    },
    {
      "component": "dialog",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to dialog."
    },
    {
      "component": "sheet",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to sheet."
    },
    {
      "component": "tabs",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to tabs."
    },
    {
      "component": "badge",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to badge."
    },
    {
      "component": "separator",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to separator."
    },
    {
      "component": "checkbox",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to checkbox."
    },
    {
      "component": "switch",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to switch."
    },
    {
      "component": "slider",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to slider."
    },
    {
      "component": "tooltip",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to tooltip."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to dropdown-menu."
    },
    {
      "component": "table",
      "recipe": "Use semantic tokens, neutral surfaces, visible focus rings, compact rounded geometry, and redundant state cues appropriate to table."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow nav",
        "color-only status",
        "decorative gradients"
      ],
      "composition": "Navigation rail, top toolbar, metric cards with semantic side rails, and release table.",
      "id": "application-shell",
      "mustShowStates": [
        "primary action focus",
        "success badge",
        "warning badge",
        "error badge",
        "info row"
      ],
      "primitives": [
        "button",
        "card",
        "badge",
        "separator",
        "dropdown-menu",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Approve release",
          "Export report"
        ],
        "description": "A credible product shell using semantic color roles and neutral platform surfaces.",
        "eyebrow": "Operations workspace",
        "headline": "Adaptive release cockpit",
        "rows": [
          {
            "owner": "Kim",
            "service": "Payment API",
            "status": "Ready"
          },
          {
            "owner": "Mina",
            "service": "Identity sync",
            "status": "Blocked"
          }
        ],
        "stats": [
          {
            "label": "Healthy services",
            "state": "success",
            "value": "42"
          },
          {
            "label": "Needs review",
            "state": "warning",
            "value": "7"
          },
          {
            "label": "Blocked",
            "state": "error",
            "value": "2"
          }
        ]
      }
    },
    {
      "avoid": [
        "brand-tinted fields",
        "missing labels",
        "low contrast placeholders"
      ],
      "composition": "Policy detail editor with segmented tabs, form controls, toggles, and a confirmation dialog.",
      "id": "detail-editor",
      "mustShowStates": [
        "focus ring",
        "disabled neutral",
        "warning helper text",
        "success confirmation"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "tabs",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save policy",
          "Open sheet"
        ],
        "description": "Form controls stay neutral until focus or explicit state changes require color.",
        "eyebrow": "Policy editor",
        "fields": [
          {
            "label": "Primary reviewer",
            "value": "Operations design"
          },
          {
            "label": "Risk level",
            "value": "Warning — manual check required"
          },
          {
            "label": "Notes",
            "value": "Use semantic tokens only."
          }
        ],
        "headline": "Review semantic release policy"
      }
    },
    {
      "avoid": [
        "unlabelled chart hues",
        "neon dark mode",
        "decorative rainbow series"
      ],
      "composition": "Data operations table with colorblind-safe statuses and patterned chart cues.",
      "id": "data-operations",
      "mustShowStates": [
        "chart series with labels",
        "striped warning/error marks",
        "selected row",
        "dropdown action"
      ],
      "primitives": [
        "card",
        "table",
        "badge",
        "separator",
        "button",
        "dropdown-menu",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Filter",
          "Download CSV"
        ],
        "description": "Series use distinct hues, labels, and patterns rather than hue alone.",
        "eyebrow": "Data safety",
        "headline": "Chart-safe operations review",
        "rows": [
          {
            "metric": "Latency",
            "series": "Info blue",
            "value": "128ms"
          },
          {
            "metric": "Retry risk",
            "series": "Warning amber striped",
            "value": "7 jobs"
          },
          {
            "metric": "Failures",
            "series": "Error red striped",
            "value": "2 jobs"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "blue",
      "green",
      "amber",
      "red",
      "violet",
      "teal"
    ],
    "border": "hairline-plus-semantic-rail",
    "contour": "rounded-rect",
    "density": "balanced-compact",
    "family": "platform-native",
    "grain": false,
    "material": "adaptive-neutral",
    "motion": "native-160ms",
    "stickerBadges": false,
    "underlay": false
  }
}