shadcn-phlex 0.1.0

data/lib/shadcn/themes/accent_colors.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Themes
+    # All 17 accent color themes from shadcn v4
+    # Each overrides only primary, secondary, chart, and sidebar-primary
+    # Merged on top of a base color palette
+    ACCENT_COLORS = {
+      blue: {
+        light: { primary: "oklch(0.546 0.245 262.881)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.944 0.032 255.585)", secondary_foreground: "oklch(0.379 0.146 265.522)" },
+        dark: { primary: "oklch(0.623 0.214 259.815)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.268 0.058 264.695)", secondary_foreground: "oklch(0.809 0.105 251.813)" }
+      },
+      red: {
+        light: { primary: "oklch(0.577 0.245 27.325)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.956 0.042 17.717)", secondary_foreground: "oklch(0.444 0.177 26.899)" },
+        dark: { primary: "oklch(0.637 0.237 25.331)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.279 0.065 26.935)", secondary_foreground: "oklch(0.795 0.124 19.25)" }
+      },
+      green: {
+        light: { primary: "oklch(0.595 0.18 163.319)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.952 0.043 166.913)", secondary_foreground: "oklch(0.448 0.119 163.331)" },
+        dark: { primary: "oklch(0.648 0.2 163.122)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.268 0.058 163.564)", secondary_foreground: "oklch(0.809 0.108 163.599)" }
+      },
+      orange: {
+        light: { primary: "oklch(0.705 0.213 47.604)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.954 0.043 48.561)", secondary_foreground: "oklch(0.533 0.164 48.998)" },
+        dark: { primary: "oklch(0.705 0.213 47.604)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.282 0.06 47.917)", secondary_foreground: "oklch(0.822 0.107 47.857)" }
+      },
+      violet: {
+        light: { primary: "oklch(0.541 0.281 293.009)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.943 0.05 294.588)", secondary_foreground: "oklch(0.408 0.208 292.361)" },
+        dark: { primary: "oklch(0.624 0.249 292.717)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.265 0.075 293.141)", secondary_foreground: "oklch(0.802 0.128 293.051)" }
+      },
+      amber: {
+        light: { primary: "oklch(0.769 0.188 70.08)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.963 0.043 76.318)", secondary_foreground: "oklch(0.555 0.163 48.998)" },
+        dark: { primary: "oklch(0.769 0.188 70.08)", primary_foreground: "oklch(0.296 0.07 45.622)", secondary: "oklch(0.282 0.059 50.058)", secondary_foreground: "oklch(0.822 0.107 56.366)" }
+      },
+      cyan: {
+        light: { primary: "oklch(0.6 0.118 184.714)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.952 0.032 190.9)", secondary_foreground: "oklch(0.448 0.098 184.364)" },
+        dark: { primary: "oklch(0.648 0.145 184.525)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.263 0.048 184.525)", secondary_foreground: "oklch(0.797 0.08 184.525)" }
+      },
+      emerald: {
+        light: { primary: "oklch(0.596 0.145 163.225)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.952 0.037 166.913)", secondary_foreground: "oklch(0.448 0.107 163.331)" },
+        dark: { primary: "oklch(0.648 0.178 163.122)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.268 0.048 163.564)", secondary_foreground: "oklch(0.809 0.093 163.599)" }
+      },
+      fuchsia: {
+        light: { primary: "oklch(0.591 0.293 322.896)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.952 0.05 325.661)", secondary_foreground: "oklch(0.444 0.222 323.29)" },
+        dark: { primary: "oklch(0.667 0.295 322.15)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.274 0.076 322.827)", secondary_foreground: "oklch(0.814 0.151 322.827)" }
+      },
+      indigo: {
+        light: { primary: "oklch(0.508 0.242 274.966)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.943 0.04 272.788)", secondary_foreground: "oklch(0.377 0.178 275.513)" },
+        dark: { primary: "oklch(0.585 0.233 277.117)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.264 0.066 275.513)", secondary_foreground: "oklch(0.793 0.118 274.373)" }
+      },
+      lime: {
+        light: { primary: "oklch(0.768 0.233 130.85)", primary_foreground: "oklch(0.296 0.1 130.85)", secondary: "oklch(0.959 0.058 131.684)", secondary_foreground: "oklch(0.487 0.174 131.684)" },
+        dark: { primary: "oklch(0.768 0.233 130.85)", primary_foreground: "oklch(0.296 0.1 130.85)", secondary: "oklch(0.276 0.06 131.175)", secondary_foreground: "oklch(0.813 0.116 131.175)" }
+      },
+      pink: {
+        light: { primary: "oklch(0.592 0.249 0.584)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.953 0.04 0.584)", secondary_foreground: "oklch(0.445 0.187 0.584)" },
+        dark: { primary: "oklch(0.656 0.241 354.308)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.275 0.065 354.308)", secondary_foreground: "oklch(0.81 0.12 354.308)" }
+      },
+      purple: {
+        light: { primary: "oklch(0.546 0.245 292.881)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.943 0.05 292.588)", secondary_foreground: "oklch(0.408 0.182 292.881)" },
+        dark: { primary: "oklch(0.624 0.249 292.717)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.265 0.065 292.717)", secondary_foreground: "oklch(0.802 0.128 292.717)" }
+      },
+      rose: {
+        light: { primary: "oklch(0.585 0.247 17.585)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.955 0.04 17.585)", secondary_foreground: "oklch(0.444 0.183 17.585)" },
+        dark: { primary: "oklch(0.645 0.246 16.439)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.278 0.063 16.439)", secondary_foreground: "oklch(0.807 0.122 16.439)" }
+      },
+      sky: {
+        light: { primary: "oklch(0.585 0.187 227.392)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.946 0.036 230.9)", secondary_foreground: "oklch(0.432 0.14 227.392)" },
+        dark: { primary: "oklch(0.63 0.178 230.902)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.265 0.054 230.902)", secondary_foreground: "oklch(0.801 0.094 230.902)" }
+      },
+      teal: {
+        light: { primary: "oklch(0.6 0.118 184.714)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.952 0.032 190.9)", secondary_foreground: "oklch(0.448 0.098 184.364)" },
+        dark: { primary: "oklch(0.648 0.145 184.525)", primary_foreground: "oklch(0.985 0 0)", secondary: "oklch(0.263 0.048 184.525)", secondary_foreground: "oklch(0.797 0.08 184.525)" }
+      },
+      yellow: {
+        light: { primary: "oklch(0.795 0.184 86.047)", primary_foreground: "oklch(0.296 0.07 45.622)", secondary: "oklch(0.963 0.043 86.318)", secondary_foreground: "oklch(0.555 0.163 68.998)" },
+        dark: { primary: "oklch(0.795 0.184 86.047)", primary_foreground: "oklch(0.296 0.07 45.622)", secondary: "oklch(0.282 0.059 86.058)", secondary_foreground: "oklch(0.822 0.107 86.366)" }
+      }
+    }.freeze
+
+    # Generate CSS for a theme by merging base + accent
+    def self.generate_css(base_color: :neutral, accent_color: nil, radius: "0.625rem")
+      base = BASE_COLORS[base_color]
+      raise ArgumentError, "Unknown base color: #{base_color}" unless base
+
+      light_vars = base[:light].dup
+      dark_vars = base[:dark].dup
+
+      if accent_color
+        accent = ACCENT_COLORS[accent_color]
+        raise ArgumentError, "Unknown accent color: #{accent_color}" unless accent
+        light_vars.merge!(accent[:light])
+        dark_vars.merge!(accent[:dark])
+      end
+
+      css = ":root {\n  --radius: #{radius};\n"
+      light_vars.each do |key, value|
+        css << "  --#{key.to_s.tr('_', '-')}: #{value};\n"
+      end
+      css << "}\n\n.dark {\n"
+      dark_vars.each do |key, value|
+        css << "  --#{key.to_s.tr('_', '-')}: #{value};\n"
+      end
+      css << "}\n"
+      css
+    end
+  end
+end

data/lib/shadcn/themes/base_colors.rb

@@ -0,0 +1,313 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Themes
+    # All 7 base color palettes from shadcn v4
+    # Each defines the full set of CSS variables for light and dark modes
+    BASE_COLORS = {
+      neutral: {
+        light: {
+          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)",
+          border: "oklch(0.922 0 0)",
+          input: "oklch(0.922 0 0)",
+          ring: "oklch(0.708 0 0)",
+          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)",
+          border: "oklch(1 0 0 / 10%)",
+          input: "oklch(1 0 0 / 15%)",
+          ring: "oklch(0.556 0 0)",
+          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)"
+        }
+      },
+      stone: {
+        light: {
+          background: "oklch(1 0 75)",
+          foreground: "oklch(0.147 0.004 49.25)",
+          card: "oklch(1 0 75)",
+          card_foreground: "oklch(0.147 0.004 49.25)",
+          popover: "oklch(1 0 75)",
+          popover_foreground: "oklch(0.147 0.004 49.25)",
+          primary: "oklch(0.216 0.006 56.043)",
+          primary_foreground: "oklch(0.985 0.001 106.423)",
+          secondary: "oklch(0.97 0.001 106.424)",
+          secondary_foreground: "oklch(0.216 0.006 56.043)",
+          muted: "oklch(0.97 0.001 106.424)",
+          muted_foreground: "oklch(0.553 0.013 58.071)",
+          accent: "oklch(0.97 0.001 106.424)",
+          accent_foreground: "oklch(0.216 0.006 56.043)",
+          destructive: "oklch(0.577 0.245 27.325)",
+          border: "oklch(0.923 0.003 48.717)",
+          input: "oklch(0.923 0.003 48.717)",
+          ring: "oklch(0.709 0.01 56.259)",
+          sidebar: "oklch(0.985 0.001 106.423)",
+          sidebar_foreground: "oklch(0.147 0.004 49.25)",
+          sidebar_primary: "oklch(0.216 0.006 56.043)",
+          sidebar_primary_foreground: "oklch(0.985 0.001 106.423)",
+          sidebar_accent: "oklch(0.97 0.001 106.424)",
+          sidebar_accent_foreground: "oklch(0.216 0.006 56.043)",
+          sidebar_border: "oklch(0.923 0.003 48.717)",
+          sidebar_ring: "oklch(0.709 0.01 56.259)"
+        },
+        dark: {
+          background: "oklch(0.147 0.004 49.25)",
+          foreground: "oklch(0.985 0.001 106.423)",
+          card: "oklch(0.216 0.006 56.043)",
+          card_foreground: "oklch(0.985 0.001 106.423)",
+          popover: "oklch(0.216 0.006 56.043)",
+          popover_foreground: "oklch(0.985 0.001 106.423)",
+          primary: "oklch(0.923 0.003 48.717)",
+          primary_foreground: "oklch(0.216 0.006 56.043)",
+          secondary: "oklch(0.268 0.007 34.298)",
+          secondary_foreground: "oklch(0.985 0.001 106.423)",
+          muted: "oklch(0.268 0.007 34.298)",
+          muted_foreground: "oklch(0.709 0.01 56.259)",
+          accent: "oklch(0.268 0.007 34.298)",
+          accent_foreground: "oklch(0.985 0.001 106.423)",
+          destructive: "oklch(0.704 0.191 22.216)",
+          border: "oklch(1 0 0 / 10%)",
+          input: "oklch(1 0 0 / 15%)",
+          ring: "oklch(0.553 0.013 58.071)",
+          sidebar: "oklch(0.216 0.006 56.043)",
+          sidebar_foreground: "oklch(0.985 0.001 106.423)",
+          sidebar_primary: "oklch(0.488 0.243 264.376)",
+          sidebar_primary_foreground: "oklch(0.985 0 0)",
+          sidebar_accent: "oklch(0.268 0.007 34.298)",
+          sidebar_accent_foreground: "oklch(0.985 0.001 106.423)",
+          sidebar_border: "oklch(1 0 0 / 10%)",
+          sidebar_ring: "oklch(0.553 0.013 58.071)"
+        }
+      },
+      zinc: {
+        light: {
+          background: "oklch(1 0 0)",
+          foreground: "oklch(0.141 0.005 285.823)",
+          card: "oklch(1 0 0)",
+          card_foreground: "oklch(0.141 0.005 285.823)",
+          popover: "oklch(1 0 0)",
+          popover_foreground: "oklch(0.141 0.005 285.823)",
+          primary: "oklch(0.21 0.006 285.885)",
+          primary_foreground: "oklch(0.985 0.002 247.839)",
+          secondary: "oklch(0.967 0.001 264.542)",
+          secondary_foreground: "oklch(0.21 0.006 285.885)",
+          muted: "oklch(0.967 0.001 264.542)",
+          muted_foreground: "oklch(0.552 0.016 285.938)",
+          accent: "oklch(0.967 0.001 264.542)",
+          accent_foreground: "oklch(0.21 0.006 285.885)",
+          destructive: "oklch(0.577 0.245 27.325)",
+          border: "oklch(0.92 0.004 264.532)",
+          input: "oklch(0.92 0.004 264.532)",
+          ring: "oklch(0.705 0.015 286.067)",
+          sidebar: "oklch(0.985 0 0)",
+          sidebar_foreground: "oklch(0.141 0.005 285.823)",
+          sidebar_primary: "oklch(0.21 0.006 285.885)",
+          sidebar_primary_foreground: "oklch(0.985 0.002 247.839)",
+          sidebar_accent: "oklch(0.967 0.001 264.542)",
+          sidebar_accent_foreground: "oklch(0.21 0.006 285.885)",
+          sidebar_border: "oklch(0.92 0.004 264.532)",
+          sidebar_ring: "oklch(0.705 0.015 286.067)"
+        },
+        dark: {
+          background: "oklch(0.141 0.005 285.823)",
+          foreground: "oklch(0.985 0.002 247.839)",
+          card: "oklch(0.21 0.006 285.885)",
+          card_foreground: "oklch(0.985 0.002 247.839)",
+          popover: "oklch(0.21 0.006 285.885)",
+          popover_foreground: "oklch(0.985 0.002 247.839)",
+          primary: "oklch(0.92 0.004 264.532)",
+          primary_foreground: "oklch(0.21 0.006 285.885)",
+          secondary: "oklch(0.274 0.006 286.033)",
+          secondary_foreground: "oklch(0.985 0.002 247.839)",
+          muted: "oklch(0.274 0.006 286.033)",
+          muted_foreground: "oklch(0.705 0.015 286.067)",
+          accent: "oklch(0.274 0.006 286.033)",
+          accent_foreground: "oklch(0.985 0.002 247.839)",
+          destructive: "oklch(0.704 0.191 22.216)",
+          border: "oklch(1 0 0 / 10%)",
+          input: "oklch(1 0 0 / 15%)",
+          ring: "oklch(0.552 0.016 285.938)",
+          sidebar: "oklch(0.21 0.006 285.885)",
+          sidebar_foreground: "oklch(0.985 0.002 247.839)",
+          sidebar_primary: "oklch(0.488 0.243 264.376)",
+          sidebar_primary_foreground: "oklch(0.985 0 0)",
+          sidebar_accent: "oklch(0.274 0.006 286.033)",
+          sidebar_accent_foreground: "oklch(0.985 0.002 247.839)",
+          sidebar_border: "oklch(1 0 0 / 10%)",
+          sidebar_ring: "oklch(0.552 0.016 285.938)"
+        }
+      },
+      mauve: {
+        light: {
+          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)"
+        }
+      },
+      olive: {
+        light: {
+          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)"
+        }
+      },
+      mist: {
+        light: {
+          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)"
+        }
+      },
+      taupe: {
+        light: {
+          background: "oklch(1 0 0)", foreground: "oklch(0.15 0.008 75)",
+          card: "oklch(1 0 0)", card_foreground: "oklch(0.15 0.008 75)",
+          popover: "oklch(1 0 0)", popover_foreground: "oklch(0.15 0.008 75)",
+          primary: "oklch(0.218 0.012 75)", primary_foreground: "oklch(0.985 0.002 75)",
+          secondary: "oklch(0.968 0.003 75)", secondary_foreground: "oklch(0.218 0.012 75)",
+          muted: "oklch(0.968 0.003 75)", muted_foreground: "oklch(0.556 0.016 75)",
+          accent: "oklch(0.968 0.003 75)", accent_foreground: "oklch(0.218 0.012 75)",
+          destructive: "oklch(0.577 0.245 27.325)",
+          border: "oklch(0.923 0.005 75)", input: "oklch(0.923 0.005 75)", ring: "oklch(0.708 0.014 75)",
+          sidebar: "oklch(0.985 0.002 75)", sidebar_foreground: "oklch(0.15 0.008 75)",
+          sidebar_primary: "oklch(0.218 0.012 75)", sidebar_primary_foreground: "oklch(0.985 0.002 75)",
+          sidebar_accent: "oklch(0.968 0.003 75)", sidebar_accent_foreground: "oklch(0.218 0.012 75)",
+          sidebar_border: "oklch(0.923 0.005 75)", sidebar_ring: "oklch(0.708 0.014 75)"
+        },
+        dark: {
+          background: "oklch(0.15 0.008 75)", foreground: "oklch(0.985 0.002 75)",
+          card: "oklch(0.218 0.012 75)", card_foreground: "oklch(0.985 0.002 75)",
+          popover: "oklch(0.218 0.012 75)", popover_foreground: "oklch(0.985 0.002 75)",
+          primary: "oklch(0.923 0.005 75)", primary_foreground: "oklch(0.218 0.012 75)",
+          secondary: "oklch(0.274 0.012 75)", secondary_foreground: "oklch(0.985 0.002 75)",
+          muted: "oklch(0.274 0.012 75)", muted_foreground: "oklch(0.708 0.014 75)",
+          accent: "oklch(0.274 0.012 75)", accent_foreground: "oklch(0.985 0.002 75)",
+          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.016 75)",
+          sidebar: "oklch(0.218 0.012 75)", sidebar_foreground: "oklch(0.985 0.002 75)",
+          sidebar_primary: "oklch(0.488 0.243 264.376)", sidebar_primary_foreground: "oklch(0.985 0 0)",
+          sidebar_accent: "oklch(0.274 0.012 75)", sidebar_accent_foreground: "oklch(0.985 0.002 75)",
+          sidebar_border: "oklch(1 0 0 / 10%)", sidebar_ring: "oklch(0.556 0.016 75)"
+        }
+      }
+    }.freeze
+  end
+end

data/lib/shadcn/ui/accordion.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Accordion
+    # Wired to shadcn--accordion Stimulus controller
+    # type: "single" (default) or "multiple"
+    # collapsible: true allows closing all items in single mode
+    class Accordion < Base
+      def initialize(type: "single", collapsible: false, **attrs)
+        @type = type
+        @collapsible = collapsible
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("w-full", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "accordion",
+          data_controller: "shadcn--accordion",
+          data_shadcn__accordion_type_value: @type,
+          data_shadcn__accordion_collapsible_value: @collapsible,
+          class: classes
+        )
+      end
+    end
+
+    class AccordionItem < Base
+      def initialize(open: false, **attrs)
+        @open = open
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("border-b last:border-b-0", @attrs.delete(:class))
+        @attrs.merge(
+          data_slot: "accordion-item",
+          data_state: @open ? "open" : "closed",
+          data_shadcn__accordion_target: "item",
+          class: classes
+        )
+      end
+    end
+
+    class AccordionTrigger < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        h3(data_slot: "accordion-header", class: "flex") do
+          button(**build_attrs) do
+            yield if block_given?
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16", height: "16",
+              viewbox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              stroke_width: "2",
+              stroke_linecap: "round",
+              stroke_linejoin: "round",
+              class: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180"
+            ) do |s|
+              s.path(d: "m6 9 6 6 6-6")
+            end
+          end
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "group flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium",
+          "transition-all outline-none",
+          "hover:underline",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "[&[data-state=open]>svg]:rotate-180",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "accordion-trigger",
+          data_shadcn__accordion_target: "trigger",
+          data_action: "click->shadcn--accordion#toggle keydown->shadcn--accordion#keydown",
+          type: "button",
+          aria_expanded: "false",
+          class: classes
+        )
+      end
+    end
+
+    class AccordionContent < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs) do
+          div(class: "pb-4 pt-0", &block)
+        end
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "overflow-hidden text-sm",
+          "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(
+          data_slot: "accordion-content",
+          data_shadcn__accordion_target: "content",
+          role: "region",
+          hidden: true,
+          class: classes
+        )
+      end
+    end
+  end
+end

data/lib/shadcn/ui/alert.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module UI
+    # Port of shadcn/ui Alert
+    # Variants: default, destructive
+    class Alert < Base
+      VARIANTS = ClassVariants.build(
+        base: [
+          "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm",
+          "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3",
+          "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+        ].join(" "),
+        variants: {
+          variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+          }
+        },
+        defaults: {
+          variant: :default
+        }
+      )
+
+      def initialize(variant: :default, **attrs)
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(VARIANTS.render(variant: @variant), @attrs.delete(:class))
+        @attrs.merge(data_slot: "alert", role: "alert", class: classes)
+      end
+    end
+
+    class AlertTitle < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", @attrs.delete(:class))
+        @attrs.merge(data_slot: "alert-title", class: classes)
+      end
+    end
+
+    class AlertDescription < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&block)
+        div(**build_attrs, &block)
+      end
+
+      private
+
+      def build_attrs
+        classes = cn(
+          "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+          @attrs.delete(:class)
+        )
+        @attrs.merge(data_slot: "alert-description", class: classes)
+      end
+    end
+  end
+end