@j3m-quantum/ui 0.2.0 → 0.3.0

package/dist/styles/index.css

@@ -1,19 +1,32 @@
 /* ========================================
    J3M UI STYLES
    
-   Main entry point for J3M UI styling.
-   Import this in your app to get the full J3M theme.
+   Import this AFTER shadcn's globals.css to apply J3M theming.
    
-   Usage:
-     @import "tailwindcss";
-     @import "@j3m-quantum/ui/styles";
+   Prerequisites:
+     1. Run `npx shadcn@latest init` first
+     2. npm install @j3m-quantum/ui
+   
+   Usage in your CSS file:
+   
+     For Vite + React:
+       @import "tailwindcss";
+       @source "../node_modules/@j3m-quantum/ui/dist";
+       @import "@j3m-quantum/ui/styles";
+   
+     For Next.js:
+       @import "tailwindcss";
+       @import "@j3m-quantum/ui/styles";
+   
+   Note: Vite requires the @source directive for Tailwind v4
+   to scan the package's compiled classes.
    ======================================== */
 
-/* 1. Shadcn Base Theme (Tailwind v4 theme colors) */
-@import "./base-theme.css";
-
-/* 2. J3M Design Tokens (primitives, scales) */
+/* 1. J3M Design Tokens (color scales, spacing, radii, glass effects) */
 @import "./tokens.css";
 
-/* 3. J3M Theme Overrides (component customizations) */
+/* 2. J3M Theme Overrides (maps shadcn vars to J3M colors) */
+@import "./j3m-overrides.css";
+
+/* 3. Component-specific overrides (toast styling, glass utilities) */
 @import "./theme.css";

package/dist/styles/j3m-overrides.css

@@ -0,0 +1,115 @@
+/* ========================================
+   J3M THEME OVERRIDES
+   
+   Overrides shadcn's default theme variables with J3M colors.
+   Import this AFTER shadcn's globals.css to apply J3M branding.
+   
+   Requires: User has run `npx shadcn init` first
+   ======================================== */
+
+:root {
+  /* ========================================
+     OVERRIDE SHADCN THEME COLORS WITH J3M
+     ======================================== */
+  
+  /* Primary - J3M Orange */
+  --primary: var(--j3m-primary-300);
+  --primary-foreground: #FFFFFF;
+  
+  /* Secondary - J3M Neutral */
+  --secondary: var(--j3m-neutral-200);
+  --secondary-foreground: var(--j3m-neutral-900);
+  
+  /* Muted */
+  --muted: var(--j3m-neutral-200);
+  --muted-foreground: var(--j3m-neutral-600);
+  
+  /* Accent */
+  --accent: var(--j3m-primary-100);
+  --accent-foreground: var(--j3m-primary-500);
+  
+  /* Destructive - J3M Red */
+  --destructive: var(--j3m-red-100);
+  --destructive-foreground: #FFFFFF;
+  
+  /* Background & Foreground */
+  --background: var(--j3m-neutral-100);
+  --foreground: var(--j3m-neutral-1000);
+  
+  /* Card */
+  --card: var(--j3m-neutral-100);
+  --card-foreground: var(--j3m-neutral-1000);
+  
+  /* Popover */
+  --popover: var(--j3m-neutral-100);
+  --popover-foreground: var(--j3m-neutral-1000);
+  
+  /* Border & Input */
+  --border: var(--j3m-neutral-300);
+  --input: var(--j3m-neutral-300);
+  --ring: var(--j3m-primary-250);
+  
+  /* Sidebar - J3M branded */
+  --sidebar-background: var(--j3m-neutral-100);
+  --sidebar-foreground: var(--j3m-neutral-900);
+  --sidebar-primary: var(--j3m-primary-300);
+  --sidebar-primary-foreground: #FFFFFF;
+  --sidebar-accent: var(--j3m-neutral-200);
+  --sidebar-accent-foreground: var(--j3m-neutral-900);
+  --sidebar-border: var(--j3m-neutral-200);
+  --sidebar-ring: var(--j3m-primary-300);
+  
+  /* Chart colors - J3M palette */
+  --chart-1: var(--j3m-primary-300);
+  --chart-2: var(--j3m-green-200);
+  --chart-3: var(--j3m-neutral-700);
+  --chart-4: var(--j3m-yellow-100);
+  --chart-5: var(--j3m-primary-200);
+  
+  /* Radius - J3M values */
+  --radius: var(--j3m-radius-s);
+}
+
+/* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+
+.dark {
+  --primary: var(--j3m-primary-250);
+  --primary-foreground: var(--j3m-neutral-1000);
+  
+  --secondary: var(--j3m-neutral-800);
+  --secondary-foreground: var(--j3m-neutral-100);
+  
+  --muted: var(--j3m-neutral-800);
+  --muted-foreground: var(--j3m-neutral-400);
+  
+  --accent: var(--j3m-neutral-800);
+  --accent-foreground: var(--j3m-neutral-100);
+  
+  --destructive: var(--j3m-red-200);
+  --destructive-foreground: #FFFFFF;
+  
+  --background: var(--j3m-neutral-1000);
+  --foreground: var(--j3m-neutral-100);
+  
+  --card: var(--j3m-neutral-1000);
+  --card-foreground: var(--j3m-neutral-100);
+  
+  --popover: var(--j3m-neutral-1000);
+  --popover-foreground: var(--j3m-neutral-100);
+  
+  --border: var(--j3m-neutral-800);
+  --input: var(--j3m-neutral-800);
+  --ring: var(--j3m-primary-250);
+  
+  --sidebar-background: var(--j3m-neutral-1000);
+  --sidebar-foreground: var(--j3m-neutral-100);
+  --sidebar-primary: var(--j3m-primary-250);
+  --sidebar-primary-foreground: var(--j3m-neutral-1000);
+  --sidebar-accent: var(--j3m-neutral-800);
+  --sidebar-accent-foreground: var(--j3m-neutral-100);
+  --sidebar-border: var(--j3m-neutral-800);
+  --sidebar-ring: var(--j3m-primary-250);
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
   "type": "module",
   "main": "./dist/index.cjs",

package/dist/styles/base-theme.css

@@ -1,124 +0,0 @@
-/* ========================================
-   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;
-  }
-}
-