Nocturne Lumen Dark Mode

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

:root {
  --background: #080A12;
  --foreground: #F0EDE6;
  --card: #101322;
  --card-foreground: #F0EDE6;
  --popover: #101322;
  --popover-foreground: #F0EDE6;
  --primary: #5B315F;
  --primary-foreground: #ffffff;
  --secondary: #32493B;
  --secondary-foreground: #ffffff;
  --muted: #9B9AAB;
  --muted-foreground: #F0EDE6;
  --accent: #D6F36A;
  --accent-foreground: #111111;
  --destructive: #FF6B7A;
  --border: #2A2F42;
  --input: #2A2F42;
  --ring: #D6F36A;
  --chart-1: #5B315F;
  --chart-2: #32493B;
  --chart-3: #D6F36A;
  --chart-4: #7EDC9A;
  --chart-5: #F3B95F;
  --sidebar: #101322;
  --sidebar-foreground: #F0EDE6;
  --sidebar-primary: #5B315F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #72A8FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2A2F42;
  --sidebar-ring: #D6F36A;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #5B315F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D6F36A;
  --accent-foreground: #111111;
  --destructive: #FF6B7A;
  --border: #303642;
  --input: #303642;
  --ring: #D6F36A;
  --chart-1: #5B315F;
  --chart-2: #32493B;
  --chart-3: #D6F36A;
  --chart-4: #7EDC9A;
  --chart-5: #F3B95F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #5B315F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D6F36A;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #D6F36A;
  --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 NocturneLumenDarkModeShadcnKit() {
  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">Nocturne Lumen Dark Mode</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": "nocturne-lumen-dark-mode",
  "type": "registry:theme",
  "title": "Nocturne Lumen Dark Mode shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#080A12",
      "foreground": "#F0EDE6",
      "card": "#101322",
      "card-foreground": "#F0EDE6",
      "popover": "#101322",
      "popover-foreground": "#F0EDE6",
      "primary": "#5B315F",
      "primary-foreground": "#ffffff",
      "secondary": "#32493B",
      "secondary-foreground": "#ffffff",
      "muted": "#9B9AAB",
      "muted-foreground": "#F0EDE6",
      "accent": "#D6F36A",
      "accent-foreground": "#111111",
      "destructive": "#FF6B7A",
      "border": "#2A2F42",
      "input": "#2A2F42",
      "ring": "#D6F36A",
      "chart-1": "#5B315F",
      "chart-2": "#32493B",
      "chart-3": "#D6F36A",
      "chart-4": "#7EDC9A",
      "chart-5": "#F3B95F",
      "sidebar": "#101322",
      "sidebar-foreground": "#F0EDE6",
      "sidebar-primary": "#5B315F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#72A8FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A2F42",
      "sidebar-ring": "#D6F36A",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#5B315F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D6F36A",
      "accent-foreground": "#111111",
      "destructive": "#FF6B7A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D6F36A",
      "chart-1": "#5B315F",
      "chart-2": "#32493B",
      "chart-3": "#D6F36A",
      "chart-4": "#7EDC9A",
      "chart-5": "#F3B95F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#5B315F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D6F36A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D6F36A",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b4-eafe-7d53-8c15-dc7461ac194d",
    "slug": "nocturne-lumen-dark-mode",
    "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"
      ]
    }
  }
}

# Nocturne Lumen Dark Mode shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the dark-first Nocturne Lumen palette into shadcn/ui screens that feel like polished product software: near-black depth, aubergine/navy atmosphere, oil-green calm, and tiny chartreuse lumen cues for focus, confirmation, and selected edges.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table. Import local primitives from `@/components/ui/*`; do not invent a second component system.

## Token cues
Use background `#080A12`, surface `#101322`, elevated `#15182A`, border `#2A2F42`, text `#F0EDE6`, muted `#9B9AAB`, primary aubergine `#5B315F`, secondary oil green `#32493B`, and accent `#D6F36A`. Accent area must remain below 10% of the screen; glows stay under 18% opacity.

## Visual character to preserve
- Layer dark surfaces with perceptible deltas instead of pure black.
- Use chartreuse as keylines, focus rings, tiny badges, sparklines, and action edges.
- Add double borders: structural navy border plus inset top lumen or aubergine hairline.
- Keep dashboard density compact but rhythmically spaced on the 8px grid.
- Pair editorial headings with pragmatic controls and mono data labels.

## ShadSync visual profile
family: nocturne-product; material: dark-glass-panel; contour: restrained-rounded-rect; border: double-hairline; underlay: radial-aubergine-navy-oil; grain: subtle-grid-noise; stickerBadges: false; motion: calm-lumen-lift; density: balanced-dense; accents: low-area-chartreuse.

## Signature component recipes
- button: Primary buttons use rounded-full shape, dark chartreuse gradient at low opacity, 1px chartreuse border, and soft underglow. Secondary buttons remain #101322 with #2A2F42 border.
- card: Use `bg-card`, `border`, rounded `22px`, inset top hairline via before/after utility or wrapper, and optional radial aubergine corner bloom clipped to the card.
- input: Dark #080A12 fill, #2A2F42 border, 14px radius, mono label; focus uses dark offset plus chartreuse outer ring.
- textarea: Same as input, with quiet placeholder text and no broad accent fills.
- select: Match input styling; selected value may include a tiny chartreuse edge dot only.
- dialog: Elevated #15182A panel, double border, large but not playful radius, dim aubergine/navy overlay.
- sheet: Right-side operational panel with oil-green underlight at the bottom edge and sticky header separator.
- tabs: Selected tab uses a one-pixel chartreuse lumen rail or underline, not a bright filled pill.
- badge: Small mono text; status badges use success/warning/error/info hues, while chartreuse badge only means primary confirmation.
- separator: #2A2F42 default; use translucent aubergine for sectional editorial dividers.
- checkbox: Dark square with chartreuse check and focus ring; never rely on color alone next to labels.
- switch: Oil-green track for enabled, dark navy for disabled, chartreuse rim only on focus.
- slider: Deep navy track, oil-green filled segment, chartreuse thumb ring at focus.
- tooltip: #15182A surface, border hairline, restrained shadow, no neon background.
- dropdown-menu: Compact menu, active item gets left lumen rail plus subtle #101322 fill.
- table: Dense rows, mono headings, alternating surface deltas, status includes icon/text plus safe hue.

## Preview shots
Render application-shell, detail-editor, and data-operations as complete product scenes rather than primitive inventories.

## Implementation contract
Keep accents low-area, preserve AA contrast, use semantic status colors, retain double borders and dark surface deltas, and keep all local imports from `@/components/ui/*`.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function NocturneLumenAudit() {
  return (
    <Card className="relative overflow-hidden rounded-[22px] border-[#2A2F42] bg-[#101322] text-[#F0EDE6] shadow-[inset_0_1px_0_rgba(214,243,106,.12),0_18px_48px_rgba(0,0,0,.42)]">
      <CardHeader>
        <Badge className="w-fit border border-[#D6F36A]/30 bg-[#D6F36A]/10 font-mono text-[#F0EDE6]">AA READY</Badge>
        <CardTitle className="font-serif text-3xl">Lumen budget audit</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-[14px] border-[#2A2F42] bg-[#080A12] focus-visible:ring-[#D6F36A]/60" defaultValue="Accent area ≤ 10%" />
        <Textarea className="rounded-[14px] border-[#2A2F42] bg-[#080A12] focus-visible:ring-[#D6F36A]/60" defaultValue="No broad neon fills; keep glows under 18% opacity." />
        <Tabs defaultValue="tokens"><TabsList className="bg-[#080A12]"><TabsTrigger value="tokens">Tokens</TabsTrigger><TabsTrigger value="charts">Charts</TabsTrigger></TabsList><TabsContent value="tokens"><Table><TableHeader><TableRow><TableHead>Role</TableHead><TableHead>Hex</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Accent</TableCell><TableCell>#D6F36A</TableCell></TableRow></TableBody></Table></TabsContent></Tabs>
        <Button className="rounded-full border border-[#D6F36A]/40 bg-[#D6F36A]/10 text-[#F0EDE6] shadow-[0_0_22px_rgba(214,243,106,.12)]">Run AA audit</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "card",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "input",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "textarea",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "select",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "dialog",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "sheet",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "tabs",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "badge",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "separator",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "checkbox",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "switch",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "slider",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "tooltip",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    },
    {
      "primitive": "table",
      "recipe": "Use dark semantic surfaces, restrained rounded geometry, #2A2F42 structure, and chartreuse only for focus, edge, or primary confirmation state."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoidRules": [
        "no large chartreuse panels",
        "no pure black background",
        "no color-only status"
      ],
      "composition": "Desktop command shell with left navigation lumen rail, top token search, hero audit card, and compact token table.",
      "id": "application-shell",
      "mustShowStates": [
        "selected tab with one-pixel chartreuse edge",
        "primary button glow under 18% opacity",
        "hoverable dropdown item with left rail",
        "AA status badge with icon and text"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Run AA audit",
          "Export CSS"
        ],
        "description": "Audit accent area, surface deltas, and contrast across a production-ready palette system.",
        "eyebrow": "Nocturne Lumen OS",
        "headline": "Dark semantic tokens before light derivation",
        "rows": [
          {
            "role": "Background",
            "state": "base",
            "token": "#080A12"
          },
          {
            "role": "Surface",
            "state": "elevated",
            "token": "#101322"
          },
          {
            "role": "Accent",
            "state": "capped",
            "token": "#D6F36A"
          }
        ],
        "stats": [
          {
            "label": "Accent area",
            "value": "7%"
          },
          {
            "label": "Surface delta",
            "value": "3 steps"
          },
          {
            "label": "Contrast",
            "value": "AA"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "no neon form fields",
        "no unlabeled validation color",
        "no flat same-value surfaces"
      ],
      "composition": "Palette detail editor with elevated sheet, double-border dialog preview, focus-safe form controls, and lumen budget slider.",
      "id": "detail-editor",
      "mustShowStates": [
        "input focus with two-ring chartreuse treatment",
        "enabled switch with oil-green track",
        "slider thumb with chartreuse ring",
        "checkbox with text label"
      ],
      "primitives": [
        "dialog",
        "sheet",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge",
        "separator"
      ],
      "scene": {
        "actions": [
          "Save semantic map",
          "Preview light companion"
        ],
        "description": "Controls constrain the luminous accent to small focus, keyline, and confirmation moments.",
        "eyebrow": "Palette editor",
        "fields": [
          {
            "label": "Accent opacity",
            "value": "12%"
          },
          {
            "label": "Surface role",
            "value": "Elevated card"
          },
          {
            "label": "Constraint note",
            "value": "Chartreuse only on edges and focus rings"
          }
        ],
        "headline": "Tune glow without breaking hierarchy",
        "stats": [
          {
            "label": "Glow cap",
            "value": "18%"
          },
          {
            "label": "Keyboard focus",
            "value": "2 rings"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "do not use accent for every status",
        "do not rely on hue alone",
        "do not overcrowd with gradients"
      ],
      "composition": "Data operations screen with dense table, colorblind-safe statuses, small chart bars, and editorial summary card.",
      "id": "data-operations",
      "mustShowStates": [
        "status badges combine hue plus label",
        "table rows use surface delta not zebra glare",
        "info/warning/success distinct from chartreuse focus",
        "tabs selected by underline rail"
      ],
      "primitives": [
        "card",
        "table",
        "badge",
        "tabs",
        "button",
        "select",
        "tooltip",
        "separator"
      ],
      "scene": {
        "actions": [
          "Inspect rows",
          "Download report"
        ],
        "description": "Status, charts, and focus states remain semantically separate so the palette scales to enterprise dashboards.",
        "eyebrow": "Data-viz safety",
        "headline": "Operational color with restrained chroma",
        "rows": [
          {
            "metric": "Contrast failures",
            "status": "success",
            "value": "0"
          },
          {
            "metric": "Warning tokens",
            "status": "warning",
            "value": "2"
          },
          {
            "metric": "Info series",
            "status": "info",
            "value": "5"
          }
        ],
        "stats": [
          {
            "label": "Rows audited",
            "value": "248"
          },
          {
            "label": "Safe hues",
            "value": "4"
          },
          {
            "label": "Accent collisions",
            "value": "0"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "low-area-chartreuse",
    "border": "double-hairline",
    "contour": "restrained-rounded-rect",
    "density": "balanced-dense",
    "family": "nocturne-product",
    "grain": "subtle-grid-noise",
    "material": "dark-glass-panel",
    "motion": "calm-lumen-lift",
    "stickerBadges": false,
    "underlay": "radial-aubergine-navy-oil"
  }
}