@srcroot/ui 0.0.30 → 0.0.32

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

@@ -0,0 +1,183 @@
+/**
+ * @srcroot/ui - Stone Theme (Tailwind 4)
+ * Warm gray with subtle brown undertones
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(24 9.8% 10%);
+
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(24 9.8% 10%);
+
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(24 9.8% 10%);
+
+    --primary: hsl(24 9.8% 10%);
+    --primary-foreground: hsl(60 9.1% 97.8%);
+
+    --secondary: hsl(60 4.8% 95.9%);
+    --secondary-foreground: hsl(24 9.8% 10%);
+
+    --muted: hsl(60 4.8% 95.9%);
+    --muted-foreground: hsl(25 5.3% 44.7%);
+
+    --accent: hsl(60 4.8% 95.9%);
+    --accent-foreground: hsl(24 9.8% 10%);
+
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(60 9.1% 97.8%);
+
+    --success: hsl(142.1 76.2% 36.3%);
+    --success-foreground: hsl(60 9.1% 97.8%);
+
+    --warning: hsl(45.4 93.4% 47.5%);
+    --warning-foreground: hsl(24 9.8% 10%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(60 9.1% 97.8%);
+
+    --border: hsl(20 5.9% 90%);
+    --input: hsl(20 5.9% 90%);
+    --ring: hsl(24 9.8% 10%);
+
+    --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(24 9.8% 10%);
+    --sidebar-primary: hsl(24 9.8% 10%);
+    --sidebar-primary-foreground: hsl(60 9.1% 97.8%);
+    --sidebar-accent: hsl(60 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(24 9.8% 10%);
+    --sidebar-border: hsl(20 5.9% 90%);
+    --sidebar-ring: hsl(24 9.8% 10%);
+}
+
+@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(24 9.8% 10%);
+        --foreground: hsl(60 9.1% 97.8%);
+
+        --card: hsl(24 9.8% 10%);
+        --card-foreground: hsl(60 9.1% 97.8%);
+
+        --popover: hsl(24 9.8% 10%);
+        --popover-foreground: hsl(60 9.1% 97.8%);
+
+        --primary: hsl(60 9.1% 97.8%);
+        --primary-foreground: hsl(24 9.8% 10%);
+
+        --secondary: hsl(12 6.5% 15.1%);
+        --secondary-foreground: hsl(60 9.1% 97.8%);
+
+        --muted: hsl(12 6.5% 15.1%);
+        --muted-foreground: hsl(24 5.4% 63.9%);
+
+        --accent: hsl(12 6.5% 15.1%);
+        --accent-foreground: hsl(60 9.1% 97.8%);
+
+        --destructive: hsl(0 62.8% 30.6%);
+        --destructive-foreground: hsl(60 9.1% 97.8%);
+
+        --success: hsl(142.1 70.6% 45.3%);
+        --success-foreground: hsl(24 9.8% 10%);
+
+        --warning: hsl(48 96.5% 53.1%);
+        --warning-foreground: hsl(24 9.8% 10%);
+
+        --info: hsl(199.4 95.5% 53.8%);
+        --info-foreground: hsl(24 9.8% 10%);
+
+        --border: hsl(12 6.5% 15.1%);
+        --input: hsl(12 6.5% 15.1%);
+        --ring: hsl(24 5.7% 82.9%);
+
+        --sidebar-background: hsl(24 9.8% 14%);
+        --sidebar-foreground: hsl(60 9.1% 97.8%);
+        --sidebar-primary: hsl(60 9.1% 97.8%);
+        --sidebar-primary-foreground: hsl(24 9.8% 10%);
+        --sidebar-accent: hsl(12 6.5% 15.1%);
+        --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
+        --sidebar-border: hsl(12 6.5% 15.1%);
+        --sidebar-ring: hsl(24 5.7% 82.9%);
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}

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

@@ -0,0 +1,183 @@
+/**
+ * @srcroot/ui - Zinc Theme (Tailwind 4)
+ * Cool gray with subtle blue undertones
+ */
+
+@import "tailwindcss";
+
+:root {
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(240 10% 3.9%);
+
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+
+    --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(240 5.9% 10%);
+
+    --info: hsl(201.3 96.3% 32.2%);
+    --info-foreground: hsl(0 0% 98%);
+
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --ring: hsl(240 10% 3.9%);
+
+    --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(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@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(240 10% 3.9%);
+        --foreground: hsl(0 0% 98%);
+
+        --card: hsl(240 10% 3.9%);
+        --card-foreground: hsl(0 0% 98%);
+
+        --popover: hsl(240 10% 3.9%);
+        --popover-foreground: hsl(0 0% 98%);
+
+        --primary: hsl(0 0% 98%);
+        --primary-foreground: hsl(240 5.9% 10%);
+
+        --secondary: hsl(240 3.7% 15.9%);
+        --secondary-foreground: hsl(0 0% 98%);
+
+        --muted: hsl(240 3.7% 15.9%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
+        --accent: hsl(240 3.7% 15.9%);
+        --accent-foreground: hsl(0 0% 98%);
+
+        --destructive: hsl(0 62.8% 30.6%);
+        --destructive-foreground: hsl(0 0% 98%);
+
+        --success: hsl(142.1 70.6% 45.3%);
+        --success-foreground: hsl(240 5.9% 10%);
+
+        --warning: hsl(48 96.5% 53.1%);
+        --warning-foreground: hsl(240 5.9% 10%);
+
+        --info: hsl(199.4 95.5% 53.8%);
+        --info-foreground: hsl(240 5.9% 10%);
+
+        --border: hsl(240 3.7% 15.9%);
+        --input: hsl(240 3.7% 15.9%);
+        --ring: hsl(240 4.9% 83.9%);
+
+        --sidebar-background: hsl(240 5.9% 10%);
+        --sidebar-foreground: hsl(240 4.8% 95.9%);
+        --sidebar-primary: hsl(224.3 76.3% 48%);
+        --sidebar-primary-foreground: hsl(0 0% 100%);
+        --sidebar-accent: hsl(240 3.7% 15.9%);
+        --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+        --sidebar-border: hsl(240 3.7% 15.9%);
+        --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    }
+}
+
+body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: Arial, Helvetica, sans-serif;
+}

package/src/registry/ui/chatbot.tsx

@@ -0,0 +1,96 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+const Chatbot = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "flex flex-col w-full h-[500px] border rounded-lg bg-background text-foreground shadow-sm overflow-hidden",
+            className
+        )}
+        {...props}
+    />
+))
+Chatbot.displayName = "Chatbot"
+
+const ChatbotHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "flex items-center px-4 py-3 border-b bg-muted/40",
+            className
+        )}
+        {...props}
+    />
+))
+ChatbotHeader.displayName = "ChatbotHeader"
+
+const ChatbotContent = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <ScrollArea
+        ref={ref}
+        className={cn("flex-1 p-2 space-y-4 flex flex-col", className)}
+        scrollbarSize="thin"
+        {...props}
+    />
+))
+ChatbotContent.displayName = "ChatbotContent"
+
+const chatbotMessageVariants = cva(
+    "max-w-[80%] rounded-2xl px-4 py-2 text-sm break-words",
+    {
+        variants: {
+            variant: {
+                user: "bg-primary text-primary-foreground rounded-br-none ml-auto",
+                bot: "bg-muted text-foreground rounded-bl-none mr-auto",
+            },
+        },
+        defaultVariants: {
+            variant: "bot",
+        },
+    }
+)
+
+const ChatbotMessage = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof chatbotMessageVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(chatbotMessageVariants({ variant }), className)}
+        {...props}
+    />
+))
+ChatbotMessage.displayName = "ChatbotMessage"
+
+const ChatbotFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn("flex items-center p-3 border-t bg-background rounded-b-lg", className)}
+        {...props}
+    />
+))
+ChatbotFooter.displayName = "ChatbotFooter"
+
+export {
+    Chatbot,
+    ChatbotHeader,
+    ChatbotContent,
+    ChatbotMessage,
+    ChatbotFooter,
+}

package/registry/design-tokens.css

@@ -1,217 +0,0 @@
-/**
- * @srcroot/ui Design Tokens
- * 
- * A comprehensive design token system for consistent styling.
- * Copy this file to your project and import it in your main CSS file.
- */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    :root {
-        /* ========================================
-       COLOR TOKENS (HSL format for Tailwind)
-       ======================================== */
-
-        /* Semantic Colors */
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-
-        /* Surfaces */
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-
-        /* Brand Colors */
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-
-        /* UI Colors */
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
-        /* Status Colors */
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-        --success: 142.1 76.2% 36.3%;
-        --success-foreground: 355.7 100% 97.3%;
-        --warning: 45.4 93.4% 47.5%;
-        --warning-foreground: 26 83.3% 14.1%;
-        --info: 201.3 96.3% 32.2%;
-        --info-foreground: 210 40% 98%;
-
-        /* Form & Border Colors */
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
-
-        /* ========================================
-       RADIUS TOKENS
-       ======================================== */
-        --radius: 0.5rem;
-        --radius-sm: 0.25rem;
-        --radius-md: 0.5rem;
-        --radius-lg: 0.75rem;
-        --radius-xl: 1rem;
-        --radius-2xl: 1.5rem;
-        --radius-full: 9999px;
-
-        /* ========================================
-       SPACING TOKENS
-       ======================================== */
-        --spacing-0: 0;
-        --spacing-1: 0.25rem;
-        --spacing-2: 0.5rem;
-        --spacing-3: 0.75rem;
-        --spacing-4: 1rem;
-        --spacing-6: 1.5rem;
-        --spacing-8: 2rem;
-        --spacing-12: 3rem;
-        --spacing-16: 4rem;
-
-        /* ========================================
-       TYPOGRAPHY TOKENS
-       ======================================== */
-        --font-sans: ui-sans-serif, system-ui, sans-serif;
-        --font-mono: ui-monospace, monospace;
-
-        --text-xs: 0.75rem;
-        --text-sm: 0.875rem;
-        --text-base: 1rem;
-        --text-lg: 1.125rem;
-        --text-xl: 1.25rem;
-        --text-2xl: 1.5rem;
-        --text-3xl: 1.875rem;
-        --text-4xl: 2.25rem;
-
-        /* ========================================
-       SHADOW TOKENS
-       ======================================== */
-        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-        /* ========================================
-       COMPONENT TOKENS
-       ======================================== */
-        --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: 240 5.3% 26.1%;
-        --sidebar-primary: 240 5.9% 10%;
-        --sidebar-primary-foreground: 0 0% 98%;
-        --sidebar-accent: 240 4.8% 95.9%;
-        --sidebar-accent-foreground: 240 5.9% 10%;
-        --sidebar-border: 220 13% 91%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
-    }
-
-    /* ========================================
-     DARK MODE TOKENS
-     ======================================== */
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-        --success: 142.1 70.6% 45.3%;
-        --success-foreground: 144.9 80.4% 10%;
-        --warning: 48 96.5% 53.1%;
-        --warning-foreground: 20.9 91.7% 14.1%;
-        --info: 199.4 95.5% 53.8%;
-        --info-foreground: 204.9 73.1% 12.9%;
-
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
-
-        --sidebar-background: 240 5.9% 10%;
-        --sidebar-foreground: 240 4.8% 95.9%;
-        --sidebar-primary: 224.3 76.3% 48%;
-        --sidebar-primary-foreground: 0 0% 100%;
-        --sidebar-accent: 240 3.7% 15.9%;
-        --sidebar-accent-foreground: 240 4.8% 95.9%;
-        --sidebar-border: 240 3.7% 15.9%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
-
-        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
-        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
-        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
-    }
-}
-
-/* ========================================
-   BASE STYLES
-   ======================================== */
-@layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-        font-feature-settings: "rlig" 1, "calt" 1;
-    }
-}
-
-/* ========================================
-   ACCORDION ANIMATION (required)
-   ======================================== */
-@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;
-    }
-}

package/registry/themes/index.css

@@ -1,19 +0,0 @@
-/**
- * @srcroot/ui Theme Index
- * 
- * Available themes:
- * - neutral.css  - Pure gray, no undertones
- * - stone.css    - Warm gray with brown undertones
- * - zinc.css     - Cool gray with subtle blue undertones
- * - gray.css     - True neutral gray
- * - slate.css    - Cool gray with strong blue undertones (default)
- * 
- * Usage:
- * Copy the theme file contents into your globals.css or import it:
- * 
- * @import '@srcroot/ui/themes/slate.css';
- * 
- * Or with the base tokens:
- * @import '@srcroot/ui/design-tokens.css';
- * @import '@srcroot/ui/themes/zinc.css';
- */