@srcroot/ui 0.0.37 → 0.0.39

package/src/registry/themes/v3/violet.css

@@ -0,0 +1,187 @@
+/**
+ * @srcroot/ui - Violet Theme (Tailwind 4)
+ * Vibrant purple and magenta connected to the brand identity
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(246 80% 60%);
+
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(246 80% 60%);
+
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(246 80% 60%);
+
+    --primary: hsl(246 80% 60%);
+    --primary-foreground: hsl(0 0% 100%);
+
+    --secondary: hsl(320 85% 55%);
+    --secondary-foreground: hsl(0 0% 100%);
+
+    --muted: hsl(246 20% 96%);
+    --muted-foreground: hsl(246 10% 45%);
+
+    --accent: hsl(320 85% 55%);
+    --accent-foreground: hsl(0 0% 100%);
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 98%);
+
+    --success: hsl(142.1 76.2% 36.3%);
+    --success-foreground: hsl(0 0% 98%);
+
+    --warning: hsl(45.4 93.4% 47.5%);
+    --warning-foreground: hsl(246 80% 60%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(0 0% 98%);
+
+    --border: hsl(246 15% 90%);
+    --input: hsl(246 15% 90%);
+    --ring: hsl(246 80% 60%);
+
+    --radius: 0.5rem;
+
+    --sidebar-width: 16rem;
+    --sidebar-width-mobile: 18rem;
+    --sidebar-width-collapsed: 3rem;
+    --sidebar-width-icon: 3rem;
+    --header-height: 3.5rem;
+
+    --sidebar-background: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(246 80% 60%);
+    --sidebar-primary: hsl(246 80% 60%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(320 85% 55%);
+    --sidebar-accent-foreground: hsl(0 0% 98%);
+    --sidebar-border: hsl(246 15% 90%);
+    --sidebar-ring: hsl(246 80% 60%);
+}
+
+@theme inline {
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-sidebar: var(--sidebar-background);
+    --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-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: hsl(246 20% 6%);
+        --foreground: hsl(0 0% 98%);
+
+        --card: hsl(246 20% 8%);
+        --card-foreground: hsl(0 0% 98%);
+
+        --popover: hsl(246 20% 8%);
+        --popover-foreground: hsl(0 0% 98%);
+
+        --primary: hsl(246 80% 65%);
+        --primary-foreground: hsl(0, 0%, 100%);
+
+        --secondary: hsl(320 85% 60%);
+        --secondary-foreground: hsl(0 0% 100%);
+
+        --muted: hsl(246 20% 15%);
+        --muted-foreground: hsl(246 10% 60%);
+
+        --accent: hsl(320 85% 60%);
+        --accent-foreground: hsl(0 0% 100%);
+
+        --destructive: hsl(0 62.8% 30.6%);
+        --destructive-foreground: hsl(0 0% 98%);
+
+        --success: hsl(142.1 70.6% 45.3%);
+        --success-foreground: hsl(246 80% 60%);
+
+        --warning: hsl(48 96.5% 53.1%);
+        --warning-foreground: hsl(246 80% 60%);
+
+        --info: hsl(199.4 95.5% 53.8%);
+        --info-foreground: hsl(246 80% 60%);
+
+        --border: hsl(246 20% 18%);
+        --input: hsl(246 20% 18%);
+        --ring: hsl(246 80% 65%);
+
+        --sidebar-background: hsl(246 20% 10%);
+        --sidebar-foreground: hsl(0 0% 98%);
+        --sidebar-primary: hsl(246 80% 65%);
+        --sidebar-primary-foreground: hsl(246 20% 6%);
+        --sidebar-accent: hsl(320 85% 60%);
+        --sidebar-accent-foreground: hsl(0 0% 100%);
+        --sidebar-border: hsl(246 20% 18%);
+        --sidebar-ring: hsl(246 80% 65%);
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.bg-gradient-brand {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+}

package/src/registry/themes/v3/zinc.css

@@ -151,4 +151,8 @@
     .animate-accordion-up {
         animation: accordion-up 0.2s ease-out;
     }
+
+    .bg-gradient-brand {
+        background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+    }
 }

package/src/registry/themes/v4/blue.css

@@ -0,0 +1,187 @@
+/**
+ * @srcroot/ui - Blue Theme (Tailwind 4)
+ * Trustworthy corporate blue
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(221.2 83.2% 53.3%);
+
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(221.2 83.2% 53.3%);
+
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(221.2 83.2% 53.3%);
+
+    --primary: hsl(221.2 83.2% 53.3%);
+    --primary-foreground: hsl(210 40% 98%);
+
+    --secondary: hsl(221.2 30% 96.1%);
+    --secondary-foreground: hsl(221.2 83.2% 53.3%);
+
+    --muted: hsl(221.2 30% 96.1%);
+    --muted-foreground: hsl(221.2 10% 45%);
+
+    --accent: hsl(221.2 30% 96.1%);
+    --accent-foreground: hsl(221.2 83.2% 53.3%);
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 100%);
+
+    --success: hsl(142.1 76.2% 36.3%);
+    --success-foreground: hsl(0 0% 100%);
+
+    --warning: hsl(45.4 93.4% 47.5%);
+    --warning-foreground: hsl(221.2 83.2% 53.3%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(0 0% 100%);
+
+    --border: hsl(221.2 20% 90%);
+    --input: hsl(221.2 20% 90%);
+    --ring: hsl(221.2 83.2% 53.3%);
+
+    --radius: 0.5rem;
+
+    --sidebar-width: 16rem;
+    --sidebar-width-mobile: 18rem;
+    --sidebar-width-collapsed: 3rem;
+    --sidebar-width-icon: 3rem;
+    --header-height: 3.5rem;
+
+    --sidebar-background: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(221.2 83.2% 53.3%);
+    --sidebar-primary: hsl(221.2 83.2% 53.3%);
+    --sidebar-primary-foreground: hsl(210 40% 98%);
+    --sidebar-accent: hsl(221.2 30% 96.1%);
+    --sidebar-accent-foreground: hsl(221.2 83.2% 53.3%);
+    --sidebar-border: hsl(221.2 20% 90%);
+    --sidebar-ring: hsl(221.2 83.2% 53.3%);
+}
+
+@theme inline {
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-sidebar: var(--sidebar-background);
+    --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-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: hsl(221.2 40% 6%);
+        --foreground: hsl(210 40% 98%);
+
+        --card: hsl(221.2 40% 8%);
+        --card-foreground: hsl(210 40% 98%);
+
+        --popover: hsl(221.2 40% 8%);
+        --popover-foreground: hsl(210 40% 98%);
+
+        --primary: hsl(221.2 83.2% 53.3%);
+        --primary-foreground: hsl(210 40% 98%);
+
+        --secondary: hsl(221.2 30% 15%);
+        --secondary-foreground: hsl(210 40% 98%);
+
+        --muted: hsl(221.2 30% 15%);
+        --muted-foreground: hsl(221.2 20% 65%);
+
+        --accent: hsl(221.2 30% 15%);
+        --accent-foreground: hsl(210 40% 98%);
+
+        --destructive: hsl(0 62.8% 30.6%);
+        --destructive-foreground: hsl(0 0% 100%);
+
+        --success: hsl(142.1 70.6% 45.3%);
+        --success-foreground: hsl(221.2 83.2% 53.3%);
+
+        --warning: hsl(48 96.5% 53.1%);
+        --warning-foreground: hsl(221.2 83.2% 53.3%);
+
+        --info: hsl(199.4 95.5% 53.8%);
+        --info-foreground: hsl(221.2 83.2% 53.3%);
+
+        --border: hsl(221.2 30% 18%);
+        --input: hsl(221.2 30% 18%);
+        --ring: hsl(221.2 83.2% 53.3%);
+
+        --sidebar-background: hsl(221.2 40% 10%);
+        --sidebar-foreground: hsl(210 40% 98%);
+        --sidebar-primary: hsl(221.2 83.2% 53.3%);
+        --sidebar-primary-foreground: hsl(210 40% 98%);
+        --sidebar-accent: hsl(221.2 30% 15%);
+        --sidebar-accent-foreground: hsl(210 40% 98%);
+        --sidebar-border: hsl(221.2 30% 18%);
+        --sidebar-ring: hsl(221.2 83.2% 53.3%);
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.bg-gradient-brand {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+}

package/src/registry/themes/v4/gray.css

@@ -180,4 +180,8 @@ body {
     background: var(--background);
     color: var(--foreground);
     font-family: Arial, Helvetica, sans-serif;
+}
+
+.bg-gradient-brand {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
 }

package/src/registry/themes/v4/green.css

@@ -0,0 +1,187 @@
+/**
+ * @srcroot/ui - Green Theme (Tailwind 4)
+ * Nature and success green
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(142.1 76.2% 36.3%);
+
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(142.1 76.2% 36.3%);
+
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(142.1 76.2% 36.3%);
+
+    --primary: hsl(142.1 76.2% 36.3%);
+    --primary-foreground: hsl(355.7 100% 97.3%);
+
+    --secondary: hsl(142.1 30% 96.1%);
+    --secondary-foreground: hsl(142.1 76.2% 36.3%);
+
+    --muted: hsl(142.1 30% 96.1%);
+    --muted-foreground: hsl(142.1 10% 45%);
+
+    --accent: hsl(142.1 30% 96.1%);
+    --accent-foreground: hsl(142.1 76.2% 36.3%);
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(0 0% 100%);
+
+    --success: hsl(142.1 76.2% 36.3%);
+    --success-foreground: hsl(0 0% 100%);
+
+    --warning: hsl(45.4 93.4% 47.5%);
+    --warning-foreground: hsl(142.1 76.2% 36.3%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(0 0% 100%);
+
+    --border: hsl(142.1 20% 90%);
+    --input: hsl(142.1 20% 90%);
+    --ring: hsl(142.1 76.2% 36.3%);
+
+    --radius: 0.5rem;
+
+    --sidebar-width: 16rem;
+    --sidebar-width-mobile: 18rem;
+    --sidebar-width-collapsed: 3rem;
+    --sidebar-width-icon: 3rem;
+    --header-height: 3.5rem;
+
+    --sidebar-background: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(142.1 76.2% 36.3%);
+    --sidebar-primary: hsl(142.1 76.2% 36.3%);
+    --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
+    --sidebar-accent: hsl(142.1 30% 96.1%);
+    --sidebar-accent-foreground: hsl(142.1 76.2% 36.3%);
+    --sidebar-border: hsl(142.1 20% 90%);
+    --sidebar-ring: hsl(142.1 76.2% 36.3%);
+}
+
+@theme inline {
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-sidebar: var(--sidebar-background);
+    --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-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: hsl(142.1 40% 6%);
+        --foreground: hsl(355.7 100% 97.3%);
+
+        --card: hsl(142.1 40% 8%);
+        --card-foreground: hsl(355.7 100% 97.3%);
+
+        --popover: hsl(142.1 40% 8%);
+        --popover-foreground: hsl(355.7 100% 97.3%);
+
+        --primary: hsl(142.1 76.2% 36.3%);
+        --primary-foreground: hsl(355.7 100% 97.3%);
+
+        --secondary: hsl(142.1 30% 15%);
+        --secondary-foreground: hsl(355.7 100% 97.3%);
+
+        --muted: hsl(142.1 30% 15%);
+        --muted-foreground: hsl(142.1 20% 65%);
+
+        --accent: hsl(142.1 30% 15%);
+        --accent-foreground: hsl(355.7 100% 97.3%);
+
+        --destructive: hsl(0 62.8% 30.6%);
+        --destructive-foreground: hsl(0 0% 100%);
+
+        --success: hsl(142.1 70.6% 45.3%);
+        --success-foreground: hsl(142.1 76.2% 36.3%);
+
+        --warning: hsl(48 96.5% 53.1%);
+        --warning-foreground: hsl(142.1 76.2% 36.3%);
+
+        --info: hsl(199.4 95.5% 53.8%);
+        --info-foreground: hsl(142.1 76.2% 36.3%);
+
+        --border: hsl(142.1 30% 18%);
+        --input: hsl(142.1 30% 18%);
+        --ring: hsl(142.1 76.2% 36.3%);
+
+        --sidebar-background: hsl(142.1 40% 10%);
+        --sidebar-foreground: hsl(355.7 100% 97.3%);
+        --sidebar-primary: hsl(142.1 76.2% 36.3%);
+        --sidebar-primary-foreground: hsl(355.7 100% 97.3%);
+        --sidebar-accent: hsl(142.1 30% 15%);
+        --sidebar-accent-foreground: hsl(355.7 100% 97.3%);
+        --sidebar-border: hsl(142.1 30% 18%);
+        --sidebar-ring: hsl(142.1 76.2% 36.3%);
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.bg-gradient-brand {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+}

package/src/registry/themes/v4/neutral.css

@@ -180,4 +180,8 @@ body {
     background: var(--background);
     color: var(--foreground);
     font-family: Arial, Helvetica, sans-serif;
+}
+
+.bg-gradient-brand {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
 }