@srcroot/ui 0.0.37 → 0.0.39

package/dist/index.js

@@ -22,7 +22,12 @@ var THEME_METADATA = {
   neutral: { name: "Neutral", description: "Pure gray, no undertones" },
   stone: { name: "Stone", description: "Warm gray with brown undertones" },
   zinc: { name: "Zinc", description: "Cool gray with subtle blue undertones" },
-  gray: { name: "Gray", description: "True neutral gray" }
+  gray: { name: "Gray", description: "True neutral gray" },
+  violet: { name: "Violet", description: "Vibrant purple and magenta" },
+  rose: { name: "Rose", description: "Soft and elegant pinkish-red" },
+  blue: { name: "Blue", description: "Trustworthy corporate blue" },
+  green: { name: "Green", description: "Nature and success green" },
+  orange: { name: "Orange", description: "Energetic and creative orange" }
 };
 var ThemeService = class {
   registryThemesPath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

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

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Blue Theme (Tailwind 3)
+ * Trustworthy corporate blue
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 221.2 83.2% 53.3%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 221.2 83.2% 53.3%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 221.2 83.2% 53.3%;
+
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 221.2 30% 96.1%;
+        --secondary-foreground: 221.2 83.2% 53.3%;
+
+        --muted: 221.2 30% 96.1%;
+        --muted-foreground: 221.2 10% 45%;
+
+        --accent: 221.2 30% 96.1%;
+        --accent-foreground: 221.2 83.2% 53.3%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 221.2 83.2% 53.3%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 221.2 20% 90%;
+        --input: 221.2 20% 90%;
+        --ring: 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: 0 0% 98%;
+        --sidebar-foreground: 221.2 83.2% 53.3%;
+        --sidebar-primary: 221.2 83.2% 53.3%;
+        --sidebar-primary-foreground: 210 40% 98%;
+        --sidebar-accent: 221.2 30% 96.1%;
+        --sidebar-accent-foreground: 221.2 83.2% 53.3%;
+        --sidebar-border: 221.2 20% 90%;
+        --sidebar-ring: 221.2 83.2% 53.3%;
+    }
+
+    .dark {
+        --background: 221.2 40% 6%;
+        --foreground: 210 40% 98%;
+
+        --card: 221.2 40% 8%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 221.2 40% 8%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 221.2 30% 15%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 221.2 30% 15%;
+        --muted-foreground: 221.2 20% 65%;
+
+        --accent: 221.2 30% 15%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 221.2 83.2% 53.3%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 221.2 83.2% 53.3%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 221.2 83.2% 53.3%;
+
+        --border: 221.2 30% 18%;
+        --input: 221.2 30% 18%;
+        --ring: 221.2 83.2% 53.3%;
+
+        --sidebar-background: 221.2 40% 10%;
+        --sidebar-foreground: 210 40% 98%;
+        --sidebar-primary: 221.2 83.2% 53.3%;
+        --sidebar-primary-foreground: 210 40% 98%;
+        --sidebar-accent: 221.2 30% 15%;
+        --sidebar-accent-foreground: 210 40% 98%;
+        --sidebar-border: 221.2 30% 18%;
+        --sidebar-ring: 221.2 83.2% 53.3%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @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;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .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/v3/gray.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/v3/green.css

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Green Theme (Tailwind 3)
+ * Nature and success green
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 142.1 76.2% 36.3%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 142.1 76.2% 36.3%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 142.1 76.2% 36.3%;
+
+        --primary: 142.1 76.2% 36.3%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 142.1 30% 96.1%;
+        --secondary-foreground: 142.1 76.2% 36.3%;
+
+        --muted: 142.1 30% 96.1%;
+        --muted-foreground: 142.1 10% 45%;
+
+        --accent: 142.1 30% 96.1%;
+        --accent-foreground: 142.1 76.2% 36.3%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 142.1 76.2% 36.3%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 142.1 20% 90%;
+        --input: 142.1 20% 90%;
+        --ring: 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: 0 0% 98%;
+        --sidebar-foreground: 142.1 76.2% 36.3%;
+        --sidebar-primary: 142.1 76.2% 36.3%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 142.1 30% 96.1%;
+        --sidebar-accent-foreground: 142.1 76.2% 36.3%;
+        --sidebar-border: 142.1 20% 90%;
+        --sidebar-ring: 142.1 76.2% 36.3%;
+    }
+
+    .dark {
+        --background: 142.1 40% 6%;
+        --foreground: 355.7 100% 97.3%;
+
+        --card: 142.1 40% 8%;
+        --card-foreground: 355.7 100% 97.3%;
+
+        --popover: 142.1 40% 8%;
+        --popover-foreground: 355.7 100% 97.3%;
+
+        --primary: 142.1 76.2% 36.3%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 142.1 30% 15%;
+        --secondary-foreground: 355.7 100% 97.3%;
+
+        --muted: 142.1 30% 15%;
+        --muted-foreground: 142.1 20% 65%;
+
+        --accent: 142.1 30% 15%;
+        --accent-foreground: 355.7 100% 97.3%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 142.1 76.2% 36.3%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 142.1 76.2% 36.3%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 142.1 76.2% 36.3%;
+
+        --border: 142.1 30% 18%;
+        --input: 142.1 30% 18%;
+        --ring: 142.1 76.2% 36.3%;
+
+        --sidebar-background: 142.1 40% 10%;
+        --sidebar-foreground: 355.7 100% 97.3%;
+        --sidebar-primary: 142.1 76.2% 36.3%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 142.1 30% 15%;
+        --sidebar-accent-foreground: 355.7 100% 97.3%;
+        --sidebar-border: 142.1 30% 18%;
+        --sidebar-ring: 142.1 76.2% 36.3%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @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;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .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/v3/neutral.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/v3/orange.css

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Orange Theme (Tailwind 3)
+ * Energetic and creative orange
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 24.6 95% 53.1%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 24.6 95% 53.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 24.6 95% 53.1%;
+
+        --primary: 24.6 95% 53.1%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 24.6 30% 96.1%;
+        --secondary-foreground: 24.6 95% 53.1%;
+
+        --muted: 24.6 30% 96.1%;
+        --muted-foreground: 24.6 10% 45%;
+
+        --accent: 24.6 30% 96.1%;
+        --accent-foreground: 24.6 95% 53.1%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 24.6 95% 53.1%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 24.6 20% 90%;
+        --input: 24.6 20% 90%;
+        --ring: 24.6 95% 53.1%;
+
+        --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 24.6 95% 53.1%;
+        --sidebar-primary: 24.6 95% 53.1%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 24.6 30% 96.1%;
+        --sidebar-accent-foreground: 24.6 95% 53.1%;
+        --sidebar-border: 24.6 20% 90%;
+        --sidebar-ring: 24.6 95% 53.1%;
+    }
+
+    .dark {
+        --background: 24.6 40% 6%;
+        --foreground: 355.7 100% 97.3%;
+
+        --card: 24.6 40% 8%;
+        --card-foreground: 355.7 100% 97.3%;
+
+        --popover: 24.6 40% 8%;
+        --popover-foreground: 355.7 100% 97.3%;
+
+        --primary: 24.6 95% 53.1%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 24.6 30% 15%;
+        --secondary-foreground: 355.7 100% 97.3%;
+
+        --muted: 24.6 30% 15%;
+        --muted-foreground: 24.6 20% 65%;
+
+        --accent: 24.6 30% 15%;
+        --accent-foreground: 355.7 100% 97.3%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 24.6 95% 53.1%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 24.6 95% 53.1%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 24.6 95% 53.1%;
+
+        --border: 24.6 30% 18%;
+        --input: 24.6 30% 18%;
+        --ring: 24.6 95% 53.1%;
+
+        --sidebar-background: 24.6 40% 10%;
+        --sidebar-foreground: 355.7 100% 97.3%;
+        --sidebar-primary: 24.6 95% 53.1%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 24.6 30% 15%;
+        --sidebar-accent-foreground: 355.7 100% 97.3%;
+        --sidebar-border: 24.6 30% 18%;
+        --sidebar-ring: 24.6 95% 53.1%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @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;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .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/v3/rose.css

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Rose Theme (Tailwind 3)
+ * Soft and elegant pinkish-red
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 346.8 77.2% 49.8%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 346.8 77.2% 49.8%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 346.8 77.2% 49.8%;
+
+        --primary: 346.8 77.2% 49.8%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 346.8 30% 96.1%;
+        --secondary-foreground: 346.8 77.2% 49.8%;
+
+        --muted: 346.8 30% 96.1%;
+        --muted-foreground: 346.8 10% 45%;
+
+        --accent: 346.8 30% 96.1%;
+        --accent-foreground: 346.8 77.2% 49.8%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 346.8 77.2% 49.8%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 346.8 20% 90%;
+        --input: 346.8 20% 90%;
+        --ring: 346.8 77.2% 49.8%;
+
+        --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 346.8 77.2% 49.8%;
+        --sidebar-primary: 346.8 77.2% 49.8%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 346.8 30% 96.1%;
+        --sidebar-accent-foreground: 346.8 77.2% 49.8%;
+        --sidebar-border: 346.8 20% 90%;
+        --sidebar-ring: 346.8 77.2% 49.8%;
+    }
+
+    .dark {
+        --background: 346.8 40% 6%;
+        --foreground: 355.7 100% 97.3%;
+
+        --card: 346.8 40% 8%;
+        --card-foreground: 355.7 100% 97.3%;
+
+        --popover: 346.8 40% 8%;
+        --popover-foreground: 355.7 100% 97.3%;
+
+        --primary: 346.8 77.2% 49.8%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 346.8 30% 15%;
+        --secondary-foreground: 355.7 100% 97.3%;
+
+        --muted: 346.8 30% 15%;
+        --muted-foreground: 346.8 20% 65%;
+
+        --accent: 346.8 30% 15%;
+        --accent-foreground: 355.7 100% 97.3%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 346.8 77.2% 49.8%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 346.8 77.2% 49.8%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 346.8 77.2% 49.8%;
+
+        --border: 346.8 30% 18%;
+        --input: 346.8 30% 18%;
+        --ring: 346.8 77.2% 49.8%;
+
+        --sidebar-background: 346.8 40% 10%;
+        --sidebar-foreground: 355.7 100% 97.3%;
+        --sidebar-primary: 346.8 77.2% 49.8%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 346.8 30% 15%;
+        --sidebar-accent-foreground: 355.7 100% 97.3%;
+        --sidebar-border: 346.8 30% 18%;
+        --sidebar-ring: 346.8 77.2% 49.8%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @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;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .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/v3/slate.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/v3/stone.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%);
+    }
 }