@j3m-quantum/ui 0.1.0 → 0.2.0

package/dist/styles/base-theme.css

@@ -0,0 +1,124 @@
+/* ========================================
+   SHADCN BASE THEME
+   Required CSS variables for Tailwind v4 theme colors.
+   These map to the Tailwind classes used by components.
+   ======================================== */
+
+@theme {
+  /* Core colors */
+  --color-background: #ffffff;
+  --color-foreground: #09090b;
+
+  /* Card */
+  --color-card: #ffffff;
+  --color-card-foreground: #09090b;
+
+  /* Popover */
+  --color-popover: #ffffff;
+  --color-popover-foreground: #09090b;
+
+  /* Primary - J3M Orange */
+  --color-primary: var(--j3m-primary-300, #F36C21);
+  --color-primary-foreground: #ffffff;
+
+  /* Secondary */
+  --color-secondary: #f4f4f5;
+  --color-secondary-foreground: #18181b;
+
+  /* Muted */
+  --color-muted: #f4f4f5;
+  --color-muted-foreground: #71717a;
+
+  /* Accent */
+  --color-accent: #f4f4f5;
+  --color-accent-foreground: #18181b;
+
+  /* Destructive */
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+
+  /* Border & Input */
+  --color-border: #e4e4e7;
+  --color-input: #e4e4e7;
+  --color-ring: var(--j3m-primary-300, #F36C21);
+
+  /* Sidebar */
+  --color-sidebar: #fafafa;
+  --color-sidebar-foreground: #09090b;
+  --color-sidebar-primary: var(--j3m-primary-300, #F36C21);
+  --color-sidebar-primary-foreground: #ffffff;
+  --color-sidebar-accent: #f4f4f5;
+  --color-sidebar-accent-foreground: #18181b;
+  --color-sidebar-border: #e4e4e7;
+  --color-sidebar-ring: var(--j3m-primary-300, #F36C21);
+
+  /* Chart colors - J3M branded */
+  --color-chart-1: var(--j3m-primary-300, #F36C21);
+  --color-chart-2: var(--j3m-green-200, #1FC16B);
+  --color-chart-3: var(--j3m-neutral-700, #777777);
+  --color-chart-4: var(--j3m-yellow-100, #FFDB43);
+  --color-chart-5: var(--j3m-primary-200, #F79D6B);
+
+  /* Default radius */
+  --radius: 0.5rem;
+}
+
+/* ========================================
+   DARK MODE
+   ======================================== */
+
+.dark {
+  --color-background: #09090b;
+  --color-foreground: #fafafa;
+
+  --color-card: #09090b;
+  --color-card-foreground: #fafafa;
+
+  --color-popover: #09090b;
+  --color-popover-foreground: #fafafa;
+
+  --color-primary: var(--j3m-primary-250, #F58446);
+  --color-primary-foreground: #18181b;
+
+  --color-secondary: #27272a;
+  --color-secondary-foreground: #fafafa;
+
+  --color-muted: #27272a;
+  --color-muted-foreground: #a1a1aa;
+
+  --color-accent: #27272a;
+  --color-accent-foreground: #fafafa;
+
+  --color-destructive: #7f1d1d;
+  --color-destructive-foreground: #fafafa;
+
+  --color-border: #27272a;
+  --color-input: #27272a;
+  --color-ring: var(--j3m-primary-250, #F58446);
+
+  --color-sidebar: #09090b;
+  --color-sidebar-foreground: #fafafa;
+  --color-sidebar-primary: var(--j3m-primary-250, #F58446);
+  --color-sidebar-primary-foreground: #18181b;
+  --color-sidebar-accent: #27272a;
+  --color-sidebar-accent-foreground: #fafafa;
+  --color-sidebar-border: #27272a;
+  --color-sidebar-ring: var(--j3m-primary-250, #F58446);
+}
+
+/* ========================================
+   BASE STYLES
+   ======================================== */
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  }
+}
+

package/dist/styles/index.css

@@ -5,12 +5,15 @@
    Import this in your app to get the full J3M theme.
    
    Usage:
-     import '@j3m-quantum/ui/styles'
+     @import "tailwindcss";
+     @import "@j3m-quantum/ui/styles";
    ======================================== */
 
-/* 1. J3M Design Tokens (primitives, scales) */
+/* 1. Shadcn Base Theme (Tailwind v4 theme colors) */
+@import "./base-theme.css";
+
+/* 2. J3M Design Tokens (primitives, scales) */
 @import "./tokens.css";
 
-/* 2. J3M Theme Overrides (shadcn variable customizations) */
+/* 3. J3M Theme Overrides (component customizations) */
 @import "./theme.css";
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -92,16 +92,36 @@
     "vaul": "^1.0.0"
   },
   "peerDependenciesMeta": {
-    "cmdk": { "optional": true },
-    "date-fns": { "optional": true },
-    "embla-carousel-react": { "optional": true },
-    "input-otp": { "optional": true },
-    "react-day-picker": { "optional": true },
-    "react-hook-form": { "optional": true },
-    "react-resizable-panels": { "optional": true },
-    "recharts": { "optional": true },
-    "sonner": { "optional": true },
-    "vaul": { "optional": true }
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",