@srcroot/ui 0.0.28 → 0.0.32

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';
- */