@j3m-quantum/ui 0.3.0 → 0.7.0

package/dist/styles/j3m-overrides.css

@@ -1,115 +0,0 @@
-/* ========================================
-   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/dist/styles/theme.css

@@ -1,59 +0,0 @@
-/* ========================================
-   J3M THEME OVERRIDES
-   
-   This file contains CSS variable overrides
-   that transform shadcn components into J3M styled components.
-   
-   Edit this file to customize the J3M theme.
-   ======================================== */
-
-@import "./tokens.css";
-
-/* ========================================
-   GLOBAL THEME OVERRIDES
-   ======================================== */
-
-/* Add your global theme overrides here */
-
-/* ========================================
-   COMPONENT-SPECIFIC OVERRIDES
-   Add custom styles for specific components
-   ======================================== */
-
-/* Toast/Sonner styles */
-[data-sonner-toast] {
-  background: var(--j3m-neutral-100) !important;
-  box-shadow: inset 0 0 0 1px var(--j3m-stroke-primary-350-50) !important;
-}
-
-[data-sonner-toast] [data-description] {
-  color: var(--j3m-neutral-800) !important;
-}
-
-/* ========================================
-   GLASS UTILITY CLASSES
-   ======================================== */
-
-.glass-light {
-  background: var(--j3m-glass-light);
-  backdrop-filter: blur(var(--j3m-blur-lg));
-  -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
-  border: 1px solid var(--j3m-glass-border-light);
-  box-shadow: var(--j3m-glass-shadow-md);
-}
-
-.glass-dark {
-  background: var(--j3m-glass-dark);
-  backdrop-filter: blur(var(--j3m-blur-md));
-  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
-  border: 1px solid var(--j3m-stroke-light-10);
-  box-shadow: var(--j3m-glass-shadow-lg);
-}
-
-.glass-neutral {
-  background: var(--j3m-glass-neutral);
-  backdrop-filter: blur(var(--j3m-blur-md));
-  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
-  border: 1px solid var(--j3m-glass-border-dark);
-  box-shadow: var(--j3m-glass-shadow-sm);
-}

package/dist/styles/tokens.css

@@ -1,248 +0,0 @@
-/* ========================================
-   J3M DESIGN TOKENS
-   All J3M-specific design tokens (backup from original globals.css)
-   ======================================== */
-
-:root {
-  /* ========================================
-     J3M SCALE COLORS (Primitives)
-     ======================================== */
-  
-  /* Primary Orange Scale */
-  --j3m-primary-100: #FBCEB5;
-  --j3m-primary-200: #F79D6B;
-  --j3m-primary-250: #F58446;
-  --j3m-primary-300: #F36C21;
-  --j3m-primary-350: #EA5B0C;
-  --j3m-primary-400: #CA4F0B;
-  --j3m-primary-500: #8F3808;
-
-  /* Neutral Gray Scale */
-  --j3m-neutral-100: #FFFFFF;
-  --j3m-neutral-200: #E8E8E8;
-  --j3m-neutral-250: #DADBDC;
-  --j3m-neutral-300: #D2D2D2;
-  --j3m-neutral-350: #D1D1D1;
-  --j3m-neutral-400: #BBBBBB;
-  --j3m-neutral-500: #A4A4A4;
-  --j3m-neutral-600: #8E8E8E;
-  --j3m-neutral-700: #777777;
-  --j3m-neutral-750: #747474;
-  --j3m-neutral-800: #606060;
-  --j3m-neutral-900: #4A4A4A;
-  --j3m-neutral-1000: #333333;
-
-  /* Status Colors */
-  --j3m-red-100: #FB3748;
-  --j3m-red-200: #D00416;
-  --j3m-yellow-100: #FFDB43;
-  --j3m-yellow-200: #DFB400;
-  --j3m-green-100: #84EBB4;
-  --j3m-green-200: #1FC16B;
-
-  /* ========================================
-     J3M SEMANTIC TOKENS
-     ======================================== */
-  
-  /* Background Tokens */
-  --color-bg-surface: var(--j3m-neutral-100);
-  --color-bg-subtle: var(--j3m-neutral-200);
-  
-  /* Text Tokens */
-  --color-text-main: rgba(0, 0, 0, 0.7);
-  --color-text-muted: rgba(0, 0, 0, 0.5);
-  --color-text-soft: rgba(0, 0, 0, 0.4);
-  --color-text-on-accent: #FFFFFF;
-  --color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
-  
-  /* Border Tokens */
-  --color-border-subtle: var(--j3m-neutral-200);
-  --color-border-strong: var(--j3m-neutral-400);
-  
-  /* Accent Tokens */
-  --color-accent: var(--j3m-primary-250);
-
-  /* Interactive State Tokens */
-  --color-interactive-bg: var(--j3m-primary-250);
-  --color-interactive-text: var(--j3m-neutral-100);
-  --color-cta-bg: var(--j3m-primary-300);
-  --color-cta-text: var(--j3m-neutral-100);
-  --color-focus-ring: var(--j3m-stroke-primary-250-20);
-  --color-hover-overlay-light: var(--j3m-stroke-light-20);
-  --color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
-
-  /* Tooltip Tokens */
-  --color-tooltip-bg: var(--j3m-neutral-1000);
-  --color-tooltip-text: var(--j3m-neutral-100);
-
-  /* Progress Tokens */
-  --color-progress-fill: var(--j3m-primary-250);
-  --color-progress-track: rgba(255, 255, 255, 0.5);
-
-  /* Input Tokens (default - solid context) */
-  --color-input-bg: transparent;
-  --color-input-border: var(--color-border-subtle);
-
-  /* Checkbox & Radio Tokens */
-  --color-checkbox-bg: rgba(255, 255, 255, 0.5);
-  --color-radio-bg: rgba(255, 255, 255, 0.5);
-
-  /* Modal/Overlay Tokens (default - solid context) */
-  --color-popover-bg: var(--color-bg-surface);
-  --color-hovercard-bg: var(--color-bg-surface);
-  --color-sheet-bg: var(--color-bg-surface);
-  --color-drawer-bg: var(--color-bg-surface);
-  --color-dropdown-bg: var(--color-bg-surface);
-  --color-contextmenu-bg: var(--color-bg-surface);
-
-  /* Spacing */
-  --j3m-spacing-xs: 8px;
-  --j3m-spacing-s: 12px;
-  --j3m-spacing-m: 16px;
-  --j3m-spacing-l: 24px;
-  --j3m-spacing-xl: 32px;
-
-  /* Radii */
-  --j3m-radius-none: 0px;
-  --j3m-radius-2xs: 4px;
-  --j3m-radius-xs: 5px;
-  --j3m-radius-s: 8px;
-  --j3m-radius-m: 10px;
-  --j3m-radius-l: 18px;
-  --j3m-radius-xl: 22px;
-  --j3m-radius-2xl: 26px;
-  --j3m-radius-full: 999px;
-
-  /* Stroke/Border Width */
-  --j3m-stroke-none: 0px;
-  --j3m-stroke-s: 1px;
-  --j3m-stroke-m: 2px;
-  --j3m-stroke-l: 3px;
-  --j3m-stroke-xl: 4px;
-
-  /* Stroke Colors (opacity variants) */
-  /* Light (white) strokes */
-  --j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
-  --j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
-  /* Dark (neutral-1000) strokes */
-  --j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
-  --j3m-stroke-neutral-1000-20: rgba(51, 51, 51, 0.2);
-  /* Primary-250 strokes (interactive) */
-  --j3m-stroke-primary-250-10: rgba(245, 132, 70, 0.1);
-  --j3m-stroke-primary-250-20: rgba(245, 132, 70, 0.2);
-  /* Primary-350 strokes (toast, accent) */
-  --j3m-stroke-primary-350-10: rgba(234, 91, 12, 0.1);
-  --j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
-
-  /* Glass Effect Tokens */
-  --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
-  --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
-  --j3m-glass-light-30: rgba(255, 255, 255, 0.3);
-  --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
-  --j3m-glass-light-60: rgba(255, 255, 255, 0.6);
-  --j3m-glass-light-70: rgba(255, 255, 255, 0.7);
-  --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
-  --j3m-glass-light: rgba(255, 255, 255, 0.5);
-  --j3m-glass-light-hover: rgba(255, 255, 255, 0.7);
-  --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
-  
-  --j3m-glass-dark: rgba(51, 51, 51, 0.6);
-  --j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
-  --j3m-glass-dark-strong: rgba(51, 51, 51, 0.8);
-  
-  --j3m-glass-neutral-subtle: rgba(198, 198, 198, 0.5);
-  --j3m-glass-neutral: rgba(227, 227, 227, 0.5);
-  --j3m-glass-neutral-hover: rgba(227, 227, 227, 0.6);
-  --j3m-glass-neutral-strong: rgba(227, 227, 227, 0.81);
-  
-  --j3m-glass-primary: rgba(243, 108, 33, 0.1);
-  --j3m-glass-primary-hover: rgba(243, 108, 33, 0.15);
-  --j3m-glass-primary-strong: rgba(243, 108, 33, 0.2);
-  --j3m-glass-primary-highlight: rgba(243, 108, 33, 0.31);
-  
-  --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
-  --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
-  --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
-  --j3m-glass-border-dark: rgba(0, 0, 0, 0.1);
-  --j3m-glass-border-dark-subtle: rgba(0, 0, 0, 0.05);
-
-  /* Blur Scale */
-  --j3m-blur-none: 0px;
-  --j3m-blur-xs: 4px;
-  --j3m-blur-sm: 8px;
-  --j3m-blur-md: 12px;
-  --j3m-blur-lg: 16px;
-  --j3m-blur-xl: 24px;
-  --j3m-blur-2xl: 40px;
-  --j3m-blur-3xl: 64px;
-  --j3m-blur-4xl: 100px;
-  --j3m-blur-max: 1000px;
-  
-  /* Opacity Scale */
-  --j3m-opacity-0: 0;
-  --j3m-opacity-5: 0.05;
-  --j3m-opacity-10: 0.1;
-  --j3m-opacity-20: 0.2;
-  --j3m-opacity-30: 0.3;
-  --j3m-opacity-40: 0.4;
-  --j3m-opacity-50: 0.5;
-  --j3m-opacity-60: 0.6;
-  --j3m-opacity-70: 0.7;
-  --j3m-opacity-80: 0.8;
-  --j3m-opacity-90: 0.9;
-  --j3m-opacity-100: 1;
-  
-  /* Glass Shadows */
-  --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
-  --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --j3m-glass-shadow-glow: 0 0 10px var(--j3m-primary-300);
-  --j3m-glass-shadow-glow-active: 0 0 10px var(--j3m-primary-350);
-}
-
-/* ========================================
-   GLASS CONTEXT OVERRIDES
-   Applied when components are inside .glass-context
-   ======================================== */
-
-.glass-context {
-  /* Background - more transparent, lets blur show through */
-  --color-bg-surface: var(--j3m-glass-light);
-  --color-bg-subtle: var(--j3m-glass-light-subtle);
-  
-  /* Text - higher contrast for glass backgrounds */
-  --color-text-main: rgba(0, 0, 0, 0.85);
-  --color-text-muted: rgba(0, 0, 0, 0.6);
-  --color-text-soft: rgba(0, 0, 0, 0.45);
-  
-  /* Borders - lighter for glass effect */
-  --color-border-subtle: var(--j3m-glass-border-light);
-  --color-border-strong: var(--j3m-glass-border-white);
-  
-  /* Interactive - SAME as solid system (primary-250 orange) */
-  --color-interactive-bg: var(--j3m-primary-250);
-  --color-interactive-text: var(--j3m-neutral-100);
-  --color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
-  --color-hover-overlay-light: var(--j3m-stroke-light-20);
-  --color-focus-ring: var(--j3m-stroke-primary-250-20);
-  
-  /* Inputs & Select - 70% white fill for glass context (much brighter) */
-  --color-input-bg: var(--j3m-glass-light-70);
-  --color-input-border: var(--j3m-glass-border-light);
-
-  /* Checkbox & Radio - same 50% white fill in glass context */
-  --color-checkbox-bg: var(--j3m-glass-light-50);
-  --color-radio-bg: var(--j3m-glass-light-50);
-
-  /* Progress - white track in glass context */
-  --color-progress-track: rgba(255, 255, 255, 0.5);
-
-  /* Modal/Overlay - glass effect with backdrop blur (bright enough but transparent) */
-  --color-popover-bg: var(--j3m-glass-light-60);
-  --color-hovercard-bg: var(--j3m-glass-light-60);
-  --color-sheet-bg: var(--j3m-glass-light-60);
-  --color-drawer-bg: var(--j3m-glass-light-60);
-  --color-dropdown-bg: var(--j3m-glass-light-60);
-  --color-contextmenu-bg: var(--j3m-glass-light-60);
-}
-