omgkit 2.28.0 → 2.30.0

package/plugin/skills/frontend/design-system-context/SKILL.md

@@ -0,0 +1,252 @@
+---
+name: design-system-context
+description: Automatic design system context injection for UI consistency
+category: frontend
+level: foundational
+commands:
+  - /design:preview
+  - /design:themes
+---
+
+# Design System Context Injection
+
+This skill ensures all UI/UX work automatically follows the project's design system without explicit user specification.
+
+## Automatic Context Loading
+
+**CRITICAL**: Before ANY UI/component work, you MUST:
+
+1. Check if `.omgkit/design/theme.json` exists
+2. If exists, read it and use its colors
+3. If not exists, suggest running `/design:theme <id>` first
+
+```bash
+# Always check first
+if [ -f ".omgkit/design/theme.json" ]; then
+  # Read and use theme colors
+else
+  # Suggest: "No design system detected. Run /design:themes to select one."
+fi
+```
+
+## Theme Context Structure
+
+When theme.json exists, extract these key values:
+
+```json
+{
+  "name": "Theme Name",
+  "id": "theme-id",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "primary": "346.8 77.2% 49.8%",
+      "primary-foreground": "355.7 100% 97.3%",
+      "secondary": "240 4.8% 95.9%",
+      "muted": "240 4.8% 95.9%",
+      "accent": "240 4.8% 95.9%",
+      "destructive": "0 84.2% 60.2%",
+      "border": "240 5.9% 90%",
+      "ring": "346.8 77.2% 49.8%"
+    }
+  },
+  "radius": "0.5rem"
+}
+```
+
+## Mandatory Color Usage
+
+**NEVER hardcode colors**. Always use CSS variables via Tailwind:
+
+### ✅ CORRECT - Use Theme Variables
+```tsx
+// Backgrounds
+<div className="bg-background">       // Main background
+<div className="bg-card">             // Card background
+<div className="bg-muted">            // Subtle background
+<div className="bg-primary">          // Primary action background
+<div className="bg-secondary">        // Secondary background
+<div className="bg-destructive">      // Error/danger background
+
+// Text
+<p className="text-foreground">       // Primary text
+<p className="text-muted-foreground"> // Secondary/subtle text
+<p className="text-primary">          // Accent text
+<p className="text-destructive">      // Error text
+
+// Borders
+<div className="border-border">       // Standard border
+<div className="border-input">        // Input border
+<div className="ring-ring">           // Focus ring
+
+// Interactive states
+<button className="bg-primary hover:bg-primary/90">
+<button className="bg-secondary hover:bg-secondary/80">
+```
+
+### ❌ WRONG - Never Hardcode
+```tsx
+// NEVER do this
+<div className="bg-[#E11D48]">        // Hardcoded hex
+<div className="bg-rose-500">         // Tailwind default color
+<div className="text-gray-900">       // Not from theme
+<div style={{ color: '#333' }}>       // Inline style
+```
+
+## Component Generation Rules
+
+When generating ANY UI component:
+
+### 1. Button Component
+```tsx
+// Always use theme colors
+<Button className="bg-primary text-primary-foreground hover:bg-primary/90">
+  Primary Action
+</Button>
+
+<Button variant="secondary" className="bg-secondary text-secondary-foreground">
+  Secondary
+</Button>
+
+<Button variant="destructive" className="bg-destructive text-destructive-foreground">
+  Delete
+</Button>
+
+<Button variant="outline" className="border-border bg-background hover:bg-accent">
+  Outline
+</Button>
+```
+
+### 2. Card Component
+```tsx
+<Card className="bg-card text-card-foreground border-border">
+  <CardHeader>
+    <CardTitle className="text-foreground">Title</CardTitle>
+    <CardDescription className="text-muted-foreground">Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    Content with <span className="text-primary">accent</span> color
+  </CardContent>
+</Card>
+```
+
+### 3. Form Component
+```tsx
+<form className="space-y-4">
+  <div>
+    <Label className="text-foreground">Email</Label>
+    <Input
+      className="border-input bg-background focus:ring-ring"
+      placeholder="Enter email"
+    />
+  </div>
+  <Button className="bg-primary text-primary-foreground">
+    Submit
+  </Button>
+</form>
+```
+
+### 4. Navigation Component
+```tsx
+<nav className="bg-background border-b border-border">
+  <div className="flex items-center gap-4">
+    <a className="text-foreground hover:text-primary">Home</a>
+    <a className="text-muted-foreground hover:text-foreground">About</a>
+    <a className="text-muted-foreground hover:text-foreground">Contact</a>
+  </div>
+</nav>
+```
+
+### 5. Alert/Notification
+```tsx
+// Success - use primary or custom success color
+<Alert className="bg-primary/10 text-primary border-primary">
+  <CheckIcon className="text-primary" />
+  <AlertDescription>Success message</AlertDescription>
+</Alert>
+
+// Error - use destructive
+<Alert className="bg-destructive/10 text-destructive border-destructive">
+  <XIcon className="text-destructive" />
+  <AlertDescription>Error message</AlertDescription>
+</Alert>
+
+// Info - use muted
+<Alert className="bg-muted text-muted-foreground border-border">
+  <InfoIcon />
+  <AlertDescription>Info message</AlertDescription>
+</Alert>
+```
+
+## Dark Mode Handling
+
+Theme CSS includes `.dark` class overrides. Just ensure:
+
+```tsx
+// This automatically works - colors swap in dark mode
+<div className="bg-background text-foreground">
+  Content adapts to light/dark automatically
+</div>
+
+// For dark mode toggle
+<button onClick={() => document.documentElement.classList.toggle('dark')}>
+  Toggle Dark Mode
+</button>
+```
+
+## Border Radius Consistency
+
+Use theme's radius value via CSS variable:
+
+```tsx
+// These use --radius from theme
+<div className="rounded-lg">   // var(--radius)
+<div className="rounded-md">   // calc(var(--radius) - 2px)
+<div className="rounded-sm">   // calc(var(--radius) - 4px)
+```
+
+## Pre-Task Checklist
+
+Before generating ANY UI code, mentally check:
+
+- [ ] Read `.omgkit/design/theme.json` if exists
+- [ ] All colors use CSS variables (bg-primary, text-foreground, etc.)
+- [ ] No hardcoded hex values
+- [ ] No Tailwind default colors (gray-500, blue-600, etc.)
+- [ ] Border radius uses theme's radius
+- [ ] Dark mode compatible (no light-only or dark-only colors)
+
+## Error Prevention
+
+If you catch yourself writing:
+- `bg-blue-500` → Change to `bg-primary`
+- `text-gray-600` → Change to `text-muted-foreground`
+- `border-gray-200` → Change to `border-border`
+- `#E11D48` → Change to CSS variable reference
+
+## Integration with shadcn/ui
+
+shadcn/ui components automatically use CSS variables:
+
+```tsx
+// These already use theme colors
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+
+// Just use them - they read from theme.css
+<Button>Uses --primary automatically</Button>
+<Card>Uses --card automatically</Card>
+<Input />  // Uses --input, --border, --ring automatically
+```
+
+## Summary
+
+**The Golden Rule**: If you're writing a color class, it MUST be one of:
+- `bg-{background|foreground|card|popover|primary|secondary|muted|accent|destructive|border|input|ring}`
+- `text-{foreground|card-foreground|popover-foreground|primary-foreground|secondary-foreground|muted-foreground|accent-foreground|destructive-foreground}`
+- `border-{border|input|ring}`
+- Opacity variants like `bg-primary/90`, `text-muted-foreground/80`
+
+**NO EXCEPTIONS**.

package/templates/design/schema/theme.schema.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "OMGKIT Theme Schema",
+  "description": "Schema for OMGKIT design system themes (shadcn/ui compatible)",
+  "type": "object",
+  "required": ["name", "id", "category", "colors"],
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Display name of the theme"
+    },
+    "id": {
+      "type": "string",
+      "pattern": "^[a-z0-9-]+$",
+      "description": "Unique identifier (kebab-case)"
+    },
+    "category": {
+      "type": "string",
+      "enum": ["tech-ai", "minimal-clean", "corporate-enterprise", "creative-bold", "nature-organic"],
+      "description": "Theme category"
+    },
+    "description": {
+      "type": "string",
+      "description": "Brief description of the theme aesthetic"
+    },
+    "colors": {
+      "type": "object",
+      "required": ["light", "dark"],
+      "properties": {
+        "light": { "$ref": "#/definitions/colorPalette" },
+        "dark": { "$ref": "#/definitions/colorPalette" }
+      }
+    },
+    "radius": {
+      "type": "string",
+      "default": "0.5rem",
+      "description": "Border radius for components"
+    },
+    "fontFamily": {
+      "type": "object",
+      "properties": {
+        "sans": { "type": "string", "default": "Inter, system-ui, sans-serif" },
+        "mono": { "type": "string", "default": "JetBrains Mono, monospace" }
+      }
+    }
+  },
+  "definitions": {
+    "colorPalette": {
+      "type": "object",
+      "required": [
+        "background", "foreground",
+        "primary", "primary-foreground",
+        "secondary", "secondary-foreground",
+        "muted", "muted-foreground",
+        "accent", "accent-foreground",
+        "destructive", "destructive-foreground",
+        "border", "input", "ring",
+        "card", "card-foreground",
+        "popover", "popover-foreground"
+      ],
+      "properties": {
+        "background": { "$ref": "#/definitions/hslColor" },
+        "foreground": { "$ref": "#/definitions/hslColor" },
+        "primary": { "$ref": "#/definitions/hslColor" },
+        "primary-foreground": { "$ref": "#/definitions/hslColor" },
+        "secondary": { "$ref": "#/definitions/hslColor" },
+        "secondary-foreground": { "$ref": "#/definitions/hslColor" },
+        "muted": { "$ref": "#/definitions/hslColor" },
+        "muted-foreground": { "$ref": "#/definitions/hslColor" },
+        "accent": { "$ref": "#/definitions/hslColor" },
+        "accent-foreground": { "$ref": "#/definitions/hslColor" },
+        "destructive": { "$ref": "#/definitions/hslColor" },
+        "destructive-foreground": { "$ref": "#/definitions/hslColor" },
+        "border": { "$ref": "#/definitions/hslColor" },
+        "input": { "$ref": "#/definitions/hslColor" },
+        "ring": { "$ref": "#/definitions/hslColor" },
+        "card": { "$ref": "#/definitions/hslColor" },
+        "card-foreground": { "$ref": "#/definitions/hslColor" },
+        "popover": { "$ref": "#/definitions/hslColor" },
+        "popover-foreground": { "$ref": "#/definitions/hslColor" },
+        "chart-1": { "$ref": "#/definitions/hslColor" },
+        "chart-2": { "$ref": "#/definitions/hslColor" },
+        "chart-3": { "$ref": "#/definitions/hslColor" },
+        "chart-4": { "$ref": "#/definitions/hslColor" },
+        "chart-5": { "$ref": "#/definitions/hslColor" },
+        "sidebar-background": { "$ref": "#/definitions/hslColor" },
+        "sidebar-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-primary": { "$ref": "#/definitions/hslColor" },
+        "sidebar-primary-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-accent": { "$ref": "#/definitions/hslColor" },
+        "sidebar-accent-foreground": { "$ref": "#/definitions/hslColor" },
+        "sidebar-border": { "$ref": "#/definitions/hslColor" },
+        "sidebar-ring": { "$ref": "#/definitions/hslColor" }
+      }
+    },
+    "hslColor": {
+      "type": "string",
+      "pattern": "^\\d+(\\.\\d+)?\\s+\\d+(\\.\\d+)?%\\s+\\d+(\\.\\d+)?%$",
+      "description": "HSL color without hsl() wrapper, e.g., '220 14.3% 95.9%'"
+    }
+  }
+}

package/templates/design/themes/corporate-enterprise/consulting.json

@@ -0,0 +1,81 @@
+{
+  "name": "Consulting",
+  "id": "consulting",
+  "category": "corporate-enterprise",
+  "description": "Management consulting aesthetic like McKinsey and BCG",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222 47% 11%",
+      "primary": "222 80% 28%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "220 20% 96%",
+      "secondary-foreground": "222 47% 15%",
+      "muted": "220 20% 96%",
+      "muted-foreground": "220 15% 45%",
+      "accent": "35 80% 45%",
+      "accent-foreground": "0 0% 100%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "220 15% 90%",
+      "input": "220 15% 90%",
+      "ring": "222 80% 28%",
+      "card": "0 0% 100%",
+      "card-foreground": "222 47% 11%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222 47% 11%",
+      "chart-1": "222 80% 28%",
+      "chart-2": "35 80% 45%",
+      "chart-3": "160 70% 40%",
+      "chart-4": "0 70% 55%",
+      "chart-5": "270 60% 55%",
+      "sidebar-background": "220 20% 98%",
+      "sidebar-foreground": "222 47% 15%",
+      "sidebar-primary": "222 80% 28%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "220 20% 94%",
+      "sidebar-accent-foreground": "222 47% 15%",
+      "sidebar-border": "220 15% 90%",
+      "sidebar-ring": "222 80% 28%"
+    },
+    "dark": {
+      "background": "222 47% 6%",
+      "foreground": "220 20% 96%",
+      "primary": "222 60% 50%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "222 30% 15%",
+      "secondary-foreground": "220 20% 96%",
+      "muted": "222 30% 15%",
+      "muted-foreground": "220 15% 55%",
+      "accent": "35 80% 55%",
+      "accent-foreground": "222 47% 6%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "222 30% 18%",
+      "input": "222 30% 18%",
+      "ring": "222 60% 50%",
+      "card": "222 47% 8%",
+      "card-foreground": "220 20% 96%",
+      "popover": "222 47% 6%",
+      "popover-foreground": "220 20% 96%",
+      "chart-1": "222 60% 60%",
+      "chart-2": "35 80% 65%",
+      "chart-3": "160 70% 50%",
+      "chart-4": "0 70% 65%",
+      "chart-5": "270 60% 65%",
+      "sidebar-background": "222 47% 6%",
+      "sidebar-foreground": "220 20% 96%",
+      "sidebar-primary": "222 60% 50%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "222 30% 15%",
+      "sidebar-accent-foreground": "220 20% 96%",
+      "sidebar-border": "222 30% 18%",
+      "sidebar-ring": "222 60% 50%"
+    }
+  },
+  "radius": "0.375rem",
+  "fontFamily": {
+    "sans": "Inter, system-ui, sans-serif",
+    "mono": "JetBrains Mono, monospace"
+  }
+}

package/templates/design/themes/corporate-enterprise/corporate-indigo.json

@@ -0,0 +1,81 @@
+{
+  "name": "Corporate Indigo",
+  "id": "corporate-indigo",
+  "category": "corporate-enterprise",
+  "description": "Professional SaaS aesthetic like Stripe and Intercom",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "primary": "238.7 83.5% 66.7%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "238.7 83.5% 66.7%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "chart-1": "238.7 83.5% 66.7%",
+      "chart-2": "173 58% 39%",
+      "chart-3": "197 37% 24%",
+      "chart-4": "43 74% 66%",
+      "chart-5": "27 87% 67%",
+      "sidebar-background": "0 0% 98%",
+      "sidebar-foreground": "240 5.3% 26.1%",
+      "sidebar-primary": "238.7 83.5% 66.7%",
+      "sidebar-primary-foreground": "0 0% 98%",
+      "sidebar-accent": "240 4.8% 95.9%",
+      "sidebar-accent-foreground": "240 5.9% 10%",
+      "sidebar-border": "220 13% 91%",
+      "sidebar-ring": "238.7 83.5% 66.7%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "primary": "238.7 83.5% 66.7%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "238.7 83.5% 66.7%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "chart-1": "220 70% 50%",
+      "chart-2": "160 60% 45%",
+      "chart-3": "30 80% 55%",
+      "chart-4": "280 65% 60%",
+      "chart-5": "340 75% 55%",
+      "sidebar-background": "224 71.4% 4.1%",
+      "sidebar-foreground": "210 20% 98%",
+      "sidebar-primary": "238.7 83.5% 66.7%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "215 27.9% 16.9%",
+      "sidebar-accent-foreground": "210 20% 98%",
+      "sidebar-border": "215 27.9% 16.9%",
+      "sidebar-ring": "238.7 83.5% 66.7%"
+    }
+  },
+  "radius": "0.5rem",
+  "fontFamily": {
+    "sans": "Inter, system-ui, sans-serif",
+    "mono": "JetBrains Mono, monospace"
+  }
+}

package/templates/design/themes/corporate-enterprise/finance.json

@@ -0,0 +1,81 @@
+{
+  "name": "Finance",
+  "id": "finance",
+  "category": "corporate-enterprise",
+  "description": "Banking and fintech aesthetic like Bloomberg and Robinhood",
+  "colors": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "175 60% 8%",
+      "primary": "173 80% 30%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "170 30% 95%",
+      "secondary-foreground": "175 60% 12%",
+      "muted": "170 30% 95%",
+      "muted-foreground": "175 20% 45%",
+      "accent": "45 93% 47%",
+      "accent-foreground": "175 60% 8%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "170 20% 88%",
+      "input": "170 20% 88%",
+      "ring": "173 80% 30%",
+      "card": "0 0% 100%",
+      "card-foreground": "175 60% 8%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "175 60% 8%",
+      "chart-1": "142.1 76.2% 36.3%",
+      "chart-2": "0 84.2% 60.2%",
+      "chart-3": "173 80% 30%",
+      "chart-4": "45 93% 47%",
+      "chart-5": "221.2 83.2% 53.3%",
+      "sidebar-background": "170 30% 97%",
+      "sidebar-foreground": "175 60% 12%",
+      "sidebar-primary": "173 80% 30%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "170 30% 93%",
+      "sidebar-accent-foreground": "175 60% 12%",
+      "sidebar-border": "170 20% 88%",
+      "sidebar-ring": "173 80% 30%"
+    },
+    "dark": {
+      "background": "175 60% 5%",
+      "foreground": "170 30% 95%",
+      "primary": "173 80% 40%",
+      "primary-foreground": "175 60% 5%",
+      "secondary": "175 30% 12%",
+      "secondary-foreground": "170 30% 95%",
+      "muted": "175 30% 12%",
+      "muted-foreground": "175 20% 55%",
+      "accent": "45 93% 47%",
+      "accent-foreground": "175 60% 5%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "175 30% 15%",
+      "input": "175 30% 15%",
+      "ring": "173 80% 40%",
+      "card": "175 60% 7%",
+      "card-foreground": "170 30% 95%",
+      "popover": "175 60% 5%",
+      "popover-foreground": "170 30% 95%",
+      "chart-1": "142.1 76.2% 46.3%",
+      "chart-2": "0 84.2% 70.2%",
+      "chart-3": "173 80% 50%",
+      "chart-4": "45 93% 57%",
+      "chart-5": "221.2 83.2% 63.3%",
+      "sidebar-background": "175 60% 5%",
+      "sidebar-foreground": "170 30% 95%",
+      "sidebar-primary": "173 80% 40%",
+      "sidebar-primary-foreground": "175 60% 5%",
+      "sidebar-accent": "175 30% 12%",
+      "sidebar-accent-foreground": "170 30% 95%",
+      "sidebar-border": "175 30% 15%",
+      "sidebar-ring": "173 80% 40%"
+    }
+  },
+  "radius": "0.375rem",
+  "fontFamily": {
+    "sans": "Inter, system-ui, sans-serif",
+    "mono": "JetBrains Mono, monospace"
+  }
+}

package/templates/design/themes/corporate-enterprise/healthcare.json

@@ -0,0 +1,81 @@
+{
+  "name": "Healthcare",
+  "id": "healthcare",
+  "category": "corporate-enterprise",
+  "description": "Medical and health aesthetic for clean, trustworthy applications",
+  "colors": {
+    "light": {
+      "background": "200 50% 99%",
+      "foreground": "200 50% 8%",
+      "primary": "192 91% 36%",
+      "primary-foreground": "0 0% 100%",
+      "secondary": "200 30% 95%",
+      "secondary-foreground": "200 50% 12%",
+      "muted": "200 30% 95%",
+      "muted-foreground": "200 20% 45%",
+      "accent": "160 84% 39%",
+      "accent-foreground": "0 0% 100%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "200 20% 88%",
+      "input": "200 20% 88%",
+      "ring": "192 91% 36%",
+      "card": "0 0% 100%",
+      "card-foreground": "200 50% 8%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "200 50% 8%",
+      "chart-1": "192 91% 36%",
+      "chart-2": "160 84% 39%",
+      "chart-3": "38 92% 50%",
+      "chart-4": "0 84.2% 60.2%",
+      "chart-5": "262.1 83.3% 57.8%",
+      "sidebar-background": "200 50% 97%",
+      "sidebar-foreground": "200 50% 12%",
+      "sidebar-primary": "192 91% 36%",
+      "sidebar-primary-foreground": "0 0% 100%",
+      "sidebar-accent": "200 30% 93%",
+      "sidebar-accent-foreground": "200 50% 12%",
+      "sidebar-border": "200 20% 88%",
+      "sidebar-ring": "192 91% 36%"
+    },
+    "dark": {
+      "background": "200 50% 5%",
+      "foreground": "200 30% 95%",
+      "primary": "192 91% 46%",
+      "primary-foreground": "200 50% 5%",
+      "secondary": "200 30% 12%",
+      "secondary-foreground": "200 30% 95%",
+      "muted": "200 30% 12%",
+      "muted-foreground": "200 20% 55%",
+      "accent": "160 84% 49%",
+      "accent-foreground": "200 50% 5%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "200 30% 15%",
+      "input": "200 30% 15%",
+      "ring": "192 91% 46%",
+      "card": "200 50% 7%",
+      "card-foreground": "200 30% 95%",
+      "popover": "200 50% 5%",
+      "popover-foreground": "200 30% 95%",
+      "chart-1": "192 91% 56%",
+      "chart-2": "160 84% 59%",
+      "chart-3": "38 92% 60%",
+      "chart-4": "0 84.2% 70.2%",
+      "chart-5": "262.1 83.3% 67.8%",
+      "sidebar-background": "200 50% 5%",
+      "sidebar-foreground": "200 30% 95%",
+      "sidebar-primary": "192 91% 46%",
+      "sidebar-primary-foreground": "200 50% 5%",
+      "sidebar-accent": "200 30% 12%",
+      "sidebar-accent-foreground": "200 30% 95%",
+      "sidebar-border": "200 30% 15%",
+      "sidebar-ring": "192 91% 46%"
+    }
+  },
+  "radius": "0.5rem",
+  "fontFamily": {
+    "sans": "Inter, system-ui, sans-serif",
+    "mono": "JetBrains Mono, monospace"
+  }
+}