shadcn-phlex 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a8ad4a8df10b424812b620f66c8a434b0a769f69432e97129aa9ed4169fef053
+  data.tar.gz: 98aacd9c16b51d265ae620daae49ae83f0bed79a19151c2194492b062f904e21
+SHA512:
+  metadata.gz: 8568e0f3cc0a4bd83af716d54d58b95d619b68202f8aecca14657ab4682c3bbb08ffc34cccf961f1937bd830ed459eb0ed022cfaacf352b1ea202c424ebc70dd
+  data.tar.gz: 830d647f15781c6ed95feb5e14148fb425f3ce5d68757e8963c539856fc152df83c926c07e2855f81e5dcea120496128cbc51c50e1b7a9b003196b081918b9b5

data/README.md

@@ -0,0 +1,195 @@
+# shadcn-phlex
+
+A complete port of [shadcn/ui](https://ui.shadcn.com) to [Phlex](https://www.phlex.fun/) for Ruby on Rails. Every component, every Tailwind class, every variant — with Stimulus controllers that replicate Radix UI behavior and full compatibility with standard shadcn theming.
+
+## Features
+
+- **55 Phlex components** — every shadcn/ui v4 component with exact Tailwind classes
+- **25 Stimulus controllers** — full Radix UI behavior (focus trap, keyboard nav, positioning, animations, drag/swipe)
+- **7 base color themes + 17 accent colors** — compatible with [ui.shadcn.com/themes](https://ui.shadcn.com/themes)
+- **Kit module** — `ui_button(variant: :destructive) { "Delete" }` short syntax
+- **Form integration** — hidden inputs for Checkbox, Switch, Select, RadioGroup, Slider, Combobox
+- **Compound field helpers** — `TextField`, `TextareaField` for one-liner form fields
+- **Dark mode** — drop-in toggle with localStorage persistence
+- **Turbo compatible** — all controllers handle page transitions correctly
+- **Rails generators** — fully automated setup
+- **AI skills** — agent skill for Claude Code, Cursor, and 40+ coding agents
+
+## Quick Start
+
+Two commands to get started:
+
+```ruby
+# Gemfile
+gem "shadcn-phlex"
+```
+
+```bash
+rails g shadcn_phlex:install --base-color=zinc --accent-color=violet
+```
+
+The generator sets up everything automatically:
+
+- `app/views/application_view.rb` — base view with `Shadcn::Kit` included
+- `app/assets/stylesheets/shadcn.css` — Tailwind entrypoint with theme
+- `app/assets/stylesheets/shadcn-tailwind.css` — custom variants and keyframes
+- `app/assets/stylesheets/shadcn-theme.css` — theme variables (swappable)
+- `app/javascript/controllers/shadcn/` — all 25 Stimulus controllers
+- `config/application.rb` — autoload path for Phlex views
+- `controllers/index.js` — Stimulus registration injected
+
+Start building immediately:
+
+```ruby
+class SettingsView < ApplicationView
+  def view_template
+    ui_card do
+      ui_card_header do
+        ui_card_title { "Settings" }
+        ui_card_description { "Manage your preferences." }
+      end
+      ui_card_content do
+        ui_text_field(
+          label: "Display Name",
+          name: "user[name]",
+          placeholder: "Enter your name"
+        )
+        ui_text_field(
+          label: "Email",
+          name: "user[email]",
+          type: "email",
+          description: "We'll never share your email."
+        )
+      end
+      ui_card_footer do
+        ui_button(variant: :outline) { "Cancel" }
+        ui_button { "Save" }
+      end
+    end
+  end
+end
+```
+
+## Usage
+
+All components are available as `ui_*` helpers when `Shadcn::Kit` is included (the generator does this for you):
+
+```ruby
+ui_button(variant: :destructive) { "Delete" }
+ui_badge(variant: :outline) { "Beta" }
+ui_separator
+ui_skeleton(class: "h-4 w-[200px]")
+```
+
+Or use direct render calls:
+
+```ruby
+render Shadcn::UI::Button.new(variant: :destructive) { "Delete" }
+```
+
+## Components
+
+### Layout & Structure
+`Card` `CardHeader` `CardTitle` `CardDescription` `CardAction` `CardContent` `CardFooter` `Separator` `AspectRatio` `ResizablePanelGroup` `ResizablePanel` `ResizableHandle` `ScrollArea` `ScrollBar`
+
+### Forms
+`Input` `Textarea` `Label` `Checkbox` `Switch` `RadioGroup` `RadioGroupItem` `Select` `SelectTrigger` `SelectValue` `SelectContent` `SelectItem` `Slider` `Combobox` `NativeSelect` `InputOTP` `InputGroup` `Field` `FieldControl` `FieldDescription` `FieldError` `Fieldset` `TextField` `TextareaField`
+
+### Buttons & Actions
+`Button` `ButtonGroup` `Toggle` `ToggleGroup` `ToggleGroupItem`
+
+### Navigation
+`Tabs` `TabsList` `TabsTrigger` `TabsContent` `Breadcrumb` `BreadcrumbList` `BreadcrumbItem` `BreadcrumbLink` `BreadcrumbPage` `BreadcrumbSeparator` `Pagination` `NavigationMenu` `Menubar` `Sidebar`
+
+### Feedback
+`Alert` `AlertTitle` `AlertDescription` `Badge` `Progress` `Skeleton` `Spinner` `Toaster` `Toast`
+
+### Overlays
+`Dialog` `DialogTrigger` `DialogContent` `DialogHeader` `DialogFooter` `DialogTitle` `DialogDescription` `AlertDialog` `Sheet` `SheetContent` `Drawer` `DrawerContent` `Popover` `PopoverContent` `Tooltip` `TooltipContent` `HoverCard` `HoverCardContent` `DropdownMenu` `DropdownMenuContent` `DropdownMenuItem` `ContextMenu` `Command` `CommandDialog` `CommandInput` `CommandList` `CommandItem`
+
+### Data Display
+`Table` `TableHeader` `TableBody` `TableRow` `TableHead` `TableCell` `Avatar` `AvatarImage` `AvatarFallback` `AvatarGroup` `Kbd` `Empty`
+
+### Utility
+`Direction` `ThemeToggle` `Typography*`
+
+## Form Integration
+
+Custom controls accept a `name:` parameter for form submission:
+
+```ruby
+ui_checkbox(name: "user[terms]", checked: @user.terms)
+ui_switch(name: "user[notifications]", checked: true)
+ui_select(name: "user[role]") do
+  ui_select_trigger { ui_select_value(placeholder: "Pick a role") }
+  ui_select_content do
+    ui_select_item(value: "admin") { "Admin" }
+    ui_select_item(value: "user") { "User" }
+  end
+end
+ui_slider(name: "user[volume]", value: 50, min: 0, max: 100)
+```
+
+## Theming
+
+Themes use the **exact same CSS variable format** as shadcn/ui. To change themes:
+
+1. Go to [ui.shadcn.com/themes](https://ui.shadcn.com/themes)
+2. Pick a theme and copy the CSS
+3. Paste into `app/assets/stylesheets/shadcn-theme.css`
+
+Or generate from Ruby:
+
+```ruby
+css = Shadcn::Themes.generate_css(
+  base_color: :zinc,
+  accent_color: :violet,
+  radius: "0.5rem"
+)
+```
+
+### Available themes
+
+**Base colors:** `neutral` `stone` `zinc` `mauve` `olive` `mist` `taupe`
+
+**Accent colors:** `blue` `red` `green` `orange` `violet` `amber` `cyan` `emerald` `fuchsia` `indigo` `lime` `pink` `purple` `rose` `sky` `teal` `yellow`
+
+## Dark Mode
+
+```ruby
+ui_theme_toggle # renders sun/moon button, persists to localStorage
+```
+
+## Generators
+
+```bash
+# Full automated setup
+rails g shadcn_phlex:install
+
+# With theme options
+rails g shadcn_phlex:install --base-color=zinc --accent-color=blue --radius=0.5rem
+```
+
+## AI / LLM Support
+
+Install the agent skill so LLMs know how to use the library:
+
+```bash
+npx skills add shadcn-phlex/shadcn-phlex
+```
+
+This uses the standard [agent skills](https://agentskills.io) ecosystem — one command installs into `.claude/skills/`, `.cursor/skills/`, etc. for 40+ coding agents. After installation, any LLM entering the project knows every component, composition pattern, and best practice.
+
+The skill follows the same structure as [shadcn's own agent skill](https://github.com/shadcn-ui/ui/tree/main/skills/shadcn) — component selection tables, composition rules, form rules, styling rules, and Incorrect/Correct Ruby/Phlex code pairs for every rule.
+
+## Testing
+
+```bash
+bundle exec rspec
+```
+
+142 specs covering all components, variants, ARIA, Stimulus wiring, form integration, themes, and the Kit module.
+
+## License
+
+MIT

data/app.css

@@ -0,0 +1,20 @@
+/*
+ * Example app.css for shadcn-phlex
+ *
+ * This is the recommended structure. It matches the standard shadcn setup:
+ *   1. Import Tailwind + animations
+ *   2. Import shadcn Tailwind config (custom variants, @theme inline, etc.)
+ *   3. Import or paste your theme (from ui.shadcn.com/themes or css/themes/)
+ *
+ * To swap themes, just replace the theme import — or paste CSS from
+ * ui.shadcn.com/themes directly. The :root / .dark format is identical.
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* shadcn Tailwind config: custom variants, @theme inline, keyframes */
+@import "./css/shadcn-tailwind.css";
+
+/* Theme: swap this import or paste from ui.shadcn.com/themes */
+@import "./css/themes/neutral.css";

data/css/shadcn-source.css

@@ -0,0 +1,3 @@
+/* Include this in your Tailwind entrypoint to ensure component classes aren't purged */
+@source "../../lib/shadcn/ui/*.rb";
+@source "../../lib/shadcn/base.rb";

data/css/shadcn-tailwind.css

@@ -0,0 +1,160 @@
+/*
+ * shadcn/tailwind.css equivalent for Phlex Rails
+ *
+ * This file provides the Tailwind v4 config that shadcn components need.
+ * It does NOT include theme colors — those come from your theme file.
+ *
+ * Usage in your app's main CSS:
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "shadcn-phlex/css/shadcn-tailwind.css";
+ *   @import "shadcn-phlex/css/themes/neutral.css";  /* or paste from ui.shadcn.com/themes */
+ */
+
+/* ============================================================
+   Custom variants — required by all shadcn components
+   ============================================================ */
+@custom-variant dark (&:is(.dark *));
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+/* ============================================================
+   Custom utilities
+   ============================================================ */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ============================================================
+   @theme inline — maps CSS variables to Tailwind tokens
+   The actual values come from your theme's :root / .dark blocks
+   ============================================================ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+  --animate-collapsible-down: collapsible-down 200ms ease-out;
+  --animate-collapsible-up: collapsible-up 200ms ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto)); }
+    to { height: 0; }
+  }
+  @keyframes collapsible-down {
+    from { height: 0; }
+    to { height: var(--radix-collapsible-content-height, var(--collapsible-panel-height)); }
+  }
+  @keyframes collapsible-up {
+    from { height: var(--radix-collapsible-content-height, var(--collapsible-panel-height)); }
+    to { height: 0; }
+  }
+}
+
+/* ============================================================
+   Base layer
+   ============================================================ */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

data/css/themes/mauve.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: mauve
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.153 0.014 302);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.153 0.014 302);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.153 0.014 302);
+  --primary: oklch(0.218 0.019 302);
+  --primary-foreground: oklch(0.985 0.003 302);
+  --secondary: oklch(0.968 0.005 302);
+  --secondary-foreground: oklch(0.218 0.019 302);
+  --muted: oklch(0.968 0.005 302);
+  --muted-foreground: oklch(0.554 0.022 302);
+  --accent: oklch(0.968 0.005 302);
+  --accent-foreground: oklch(0.218 0.019 302);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.921 0.008 302);
+  --input: oklch(0.921 0.008 302);
+  --ring: oklch(0.706 0.02 302);
+  --sidebar: oklch(0.985 0.003 302);
+  --sidebar-foreground: oklch(0.153 0.014 302);
+  --sidebar-primary: oklch(0.218 0.019 302);
+  --sidebar-primary-foreground: oklch(0.985 0.003 302);
+  --sidebar-accent: oklch(0.968 0.005 302);
+  --sidebar-accent-foreground: oklch(0.218 0.019 302);
+  --sidebar-border: oklch(0.921 0.008 302);
+  --sidebar-ring: oklch(0.706 0.02 302);
+}
+
+.dark {
+  --background: oklch(0.153 0.014 302);
+  --foreground: oklch(0.985 0.003 302);
+  --card: oklch(0.218 0.019 302);
+  --card-foreground: oklch(0.985 0.003 302);
+  --popover: oklch(0.218 0.019 302);
+  --popover-foreground: oklch(0.985 0.003 302);
+  --primary: oklch(0.921 0.008 302);
+  --primary-foreground: oklch(0.218 0.019 302);
+  --secondary: oklch(0.274 0.019 302);
+  --secondary-foreground: oklch(0.985 0.003 302);
+  --muted: oklch(0.274 0.019 302);
+  --muted-foreground: oklch(0.706 0.02 302);
+  --accent: oklch(0.274 0.019 302);
+  --accent-foreground: oklch(0.985 0.003 302);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.554 0.022 302);
+  --sidebar: oklch(0.218 0.019 302);
+  --sidebar-foreground: oklch(0.985 0.003 302);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.019 302);
+  --sidebar-accent-foreground: oklch(0.985 0.003 302);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.554 0.022 302);
+}

data/css/themes/mist.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: mist
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.15 0.01 230);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.01 230);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.01 230);
+  --primary: oklch(0.215 0.015 230);
+  --primary-foreground: oklch(0.985 0.002 230);
+  --secondary: oklch(0.968 0.004 230);
+  --secondary-foreground: oklch(0.215 0.015 230);
+  --muted: oklch(0.968 0.004 230);
+  --muted-foreground: oklch(0.555 0.018 230);
+  --accent: oklch(0.968 0.004 230);
+  --accent-foreground: oklch(0.215 0.015 230);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0.006 230);
+  --input: oklch(0.922 0.006 230);
+  --ring: oklch(0.707 0.016 230);
+  --sidebar: oklch(0.985 0.002 230);
+  --sidebar-foreground: oklch(0.15 0.01 230);
+  --sidebar-primary: oklch(0.215 0.015 230);
+  --sidebar-primary-foreground: oklch(0.985 0.002 230);
+  --sidebar-accent: oklch(0.968 0.004 230);
+  --sidebar-accent-foreground: oklch(0.215 0.015 230);
+  --sidebar-border: oklch(0.922 0.006 230);
+  --sidebar-ring: oklch(0.707 0.016 230);
+}
+
+.dark {
+  --background: oklch(0.15 0.01 230);
+  --foreground: oklch(0.985 0.002 230);
+  --card: oklch(0.215 0.015 230);
+  --card-foreground: oklch(0.985 0.002 230);
+  --popover: oklch(0.215 0.015 230);
+  --popover-foreground: oklch(0.985 0.002 230);
+  --primary: oklch(0.922 0.006 230);
+  --primary-foreground: oklch(0.215 0.015 230);
+  --secondary: oklch(0.272 0.015 230);
+  --secondary-foreground: oklch(0.985 0.002 230);
+  --muted: oklch(0.272 0.015 230);
+  --muted-foreground: oklch(0.707 0.016 230);
+  --accent: oklch(0.272 0.015 230);
+  --accent-foreground: oklch(0.985 0.002 230);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.555 0.018 230);
+  --sidebar: oklch(0.215 0.015 230);
+  --sidebar-foreground: oklch(0.985 0.002 230);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.272 0.015 230);
+  --sidebar-accent-foreground: oklch(0.985 0.002 230);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.555 0.018 230);
+}

data/css/themes/neutral.css

@@ -0,0 +1,74 @@
+/*
+ * shadcn theme: neutral (default)
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

data/css/themes/olive.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: olive
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.155 0.014 155);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.155 0.014 155);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.155 0.014 155);
+  --primary: oklch(0.22 0.018 155);
+  --primary-foreground: oklch(0.985 0.003 155);
+  --secondary: oklch(0.968 0.005 155);
+  --secondary-foreground: oklch(0.22 0.018 155);
+  --muted: oklch(0.968 0.005 155);
+  --muted-foreground: oklch(0.556 0.02 155);
+  --accent: oklch(0.968 0.005 155);
+  --accent-foreground: oklch(0.22 0.018 155);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.008 155);
+  --input: oklch(0.923 0.008 155);
+  --ring: oklch(0.708 0.018 155);
+  --sidebar: oklch(0.985 0.003 155);
+  --sidebar-foreground: oklch(0.155 0.014 155);
+  --sidebar-primary: oklch(0.22 0.018 155);
+  --sidebar-primary-foreground: oklch(0.985 0.003 155);
+  --sidebar-accent: oklch(0.968 0.005 155);
+  --sidebar-accent-foreground: oklch(0.22 0.018 155);
+  --sidebar-border: oklch(0.923 0.008 155);
+  --sidebar-ring: oklch(0.708 0.018 155);
+}
+
+.dark {
+  --background: oklch(0.155 0.014 155);
+  --foreground: oklch(0.985 0.003 155);
+  --card: oklch(0.22 0.018 155);
+  --card-foreground: oklch(0.985 0.003 155);
+  --popover: oklch(0.22 0.018 155);
+  --popover-foreground: oklch(0.985 0.003 155);
+  --primary: oklch(0.923 0.008 155);
+  --primary-foreground: oklch(0.22 0.018 155);
+  --secondary: oklch(0.276 0.018 155);
+  --secondary-foreground: oklch(0.985 0.003 155);
+  --muted: oklch(0.276 0.018 155);
+  --muted-foreground: oklch(0.708 0.018 155);
+  --accent: oklch(0.276 0.018 155);
+  --accent-foreground: oklch(0.985 0.003 155);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0.02 155);
+  --sidebar: oklch(0.22 0.018 155);
+  --sidebar-foreground: oklch(0.985 0.003 155);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.276 0.018 155);
+  --sidebar-accent-foreground: oklch(0.985 0.003 155);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0.02 155);
+}