@j3m-quantum/ui 1.3.0 → 1.3.1

package/dist/styles/index.css

@@ -430,23 +430,78 @@
   --j3m-bg-input-disabled: var(--j3m-glass-light-20);
   --j3m-bg-sidebar: #E8E8E8; /* Solid sidebar in glass mode */
 
-  /* Legacy surface tokens */
-  --surface-bg: var(--j3m-glass-light-40);
-  --surface-border: var(--j3m-glass-border-white);
+  /* Legacy surface tokens - SOLID colors for portal components (match solid light mode) */
+  --surface-bg: var(--j3m-gray-1);
+  --surface-border: var(--j3m-gray-6);
   --surface-shadow: var(--j3m-glass-shadow-md);
   --surface-radius: var(--j3m-radius-l);
-  --surface-blur: var(--j3m-blur-lg);
+  --surface-blur: 0;
   
-  /* Overlay surfaces (dialogs, popovers, etc) */
-  --overlay-bg: var(--j3m-glass-light-70);
-  --overlay-border: var(--j3m-glass-border-light);
+  /* Overlay surfaces (dialogs, popovers, etc) - WHITE to match solid light mode */
+  --overlay-bg: var(--j3m-gray-1);
+  --overlay-border: var(--j3m-gray-6);
   --overlay-shadow: var(--j3m-glass-shadow-lg);
-  --overlay-blur: var(--j3m-blur-lg);
+  --overlay-blur: 0;
   
-  /* Shadcn overrides for glass */
-  --input-bg: var(--j3m-glass-light-50);
+  /* Shadcn overrides for glass - Portal components use WHITE to match solid light mode */
+  --input-bg: var(--j3m-gray-1);
   --card: var(--j3m-glass-light-50);
-  --popover: var(--j3m-glass-light-70);
+  --popover: var(--j3m-gray-1);
+  
+  /* Dialog, Sheet, Drawer use popover token - ensure they're white */
+  --dialog: var(--j3m-gray-1);
+}
+
+/* Light Glass Mode - Portal Components (Dialog, Sheet, Drawer, Popover, HoverCard)
+   These render outside the app tree via React Portals.
+   Use WHITE backgrounds to match solid light mode. */
+.theme-glass:not(.dark) [data-slot="dialog-content"],
+.theme-glass:not(.dark) [data-slot="sheet-content"],
+.theme-glass:not(.dark) [data-slot="drawer-content"],
+.theme-glass:not(.dark) [data-slot="popover-content"],
+.theme-glass:not(.dark) [data-slot="hover-card-content"],
+.theme-glass:not(.dark) [data-slot="dropdown-menu-content"],
+.theme-glass:not(.dark) [data-slot="context-menu-content"],
+.theme-glass:not(.dark) [data-slot="menubar-content"],
+.theme-glass:not(.dark) [data-slot="select-content"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+/* Light Glass Mode - Command component and its children */
+.theme-glass:not(.dark) [data-slot="command"] {
+  background: transparent !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-input-wrapper"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-list"] {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-input"] {
+  color: var(--j3m-gray-12) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-item"] {
+  color: var(--j3m-gray-12) !important;
+}
+
+.theme-glass:not(.dark) [data-slot="command-group-heading"] {
+  color: var(--j3m-gray-9) !important;
+}
+
+/* Light Glass Mode - Calendar should match solid mode */
+.theme-glass:not(.dark) [data-slot="calendar"],
+.theme-glass:not(.dark) .rdp {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 /* ========================================
@@ -466,7 +521,7 @@
   --j3m-glass-border-subtle: var(--j3m-glass-dark-border-subtle);
   
   /* Override text colors for visibility */
-  --card-foreground: rgba(255, 255, 255, 0.95);
+  --card-foreground: var(--accent-foreground);
   --accent-foreground: #FFFFFF;
   --foreground: rgba(255, 255, 255, 0.95);
   --muted-foreground: rgba(255, 255, 255, 0.6);
@@ -488,40 +543,50 @@
     radial-gradient(at 0% 100%, rgba(22, 27, 34, 0.6) 0px, transparent 50%),
     linear-gradient(180deg, #0a0a0f 0%, #0d1117 50%, #161b22 100%);
 
-  /* Background & Surface Tokens (Dark Glass) - using semantic tokens */
+  /* Background & Surface Tokens (Dark Glass) - Use SOLID colors to match solid dark mode */
   --j3m-bg-app: transparent;
   --j3m-bg-page: transparent;
-  --j3m-bg-surface: var(--j3m-glass-dark-surface);
-  --j3m-bg-surface-hover: var(--j3m-glass-dark-surface-hover);
-  --j3m-bg-surface-active: var(--j3m-glass-dark-surface-active);
-  --j3m-bg-elevated: var(--j3m-glass-dark-elevated);
-  --j3m-bg-elevated-hover: var(--j3m-glass-dark-elevated-hover);
-  --j3m-bg-overlay: var(--j3m-glass-dark-overlay);
-  --j3m-bg-muted: var(--j3m-glass-dark-muted);
-  --j3m-bg-subtle: var(--j3m-glass-dark-subtle);
-  --j3m-bg-element: var(--j3m-glass-dark-element);
-  --j3m-bg-element-hover: var(--j3m-glass-dark-element-hover);
-  --j3m-bg-element-active: var(--j3m-glass-dark-element-active);
-  --j3m-bg-input: var(--j3m-glass-dark-input);
-  --j3m-bg-input-disabled: var(--j3m-glass-dark-subtle);
-  --j3m-bg-sidebar: #1a1a1a; /* Solid dark sidebar in glass mode */
-
-  /* Legacy surface tokens */
-  --surface-bg: var(--j3m-glass-dark-surface);
-  --surface-border: var(--j3m-glass-dark-border);
-  --overlay-bg: var(--j3m-glass-dark-overlay);
-  --overlay-border: var(--j3m-glass-dark-border-light);
+  --j3m-bg-surface: var(--j3m-gray-13);
+  --j3m-bg-surface-hover: var(--j3m-gray-12);
+  --j3m-bg-surface-active: #404040;
+  --j3m-bg-elevated: var(--j3m-gray-12);
+  --j3m-bg-elevated-hover: #404040;
+  --j3m-bg-overlay: var(--j3m-gray-13);
+  --j3m-bg-muted: var(--j3m-gray-12);
+  --j3m-bg-subtle: var(--j3m-gray-11);
+  --j3m-bg-element: var(--j3m-gray-12);
+  --j3m-bg-element-hover: #404040;
+  --j3m-bg-element-active: #4a4a4a;
+  --j3m-bg-input: var(--j3m-gray-11);
+  --j3m-bg-input-disabled: var(--j3m-gray-10);
+  --j3m-bg-sidebar: var(--j3m-gray-13);
+
+  /* Legacy surface tokens - SOLID colors for portal components */
+  --surface-bg: var(--j3m-gray-13);
+  --surface-border: var(--j3m-gray-11);
+  --overlay-bg: var(--j3m-gray-13);
+  --overlay-border: var(--j3m-gray-11);
   
-  /* Dark glass borders */
-  --border: var(--j3m-glass-dark-border);
+  /* Dark glass borders - SOLID to match solid dark mode */
+  --border: var(--j3m-gray-11);
   
-  /* Text colors for dark glass */
-  --foreground: rgba(255, 255, 255, 0.95);
-  --muted-foreground: rgba(255, 255, 255, 0.6);
+  /* Text colors - match solid dark mode */
+  --foreground: var(--j3m-gray-1);
+  --muted-foreground: var(--j3m-gray-7);
   
-  /* Shadcn overrides for dark glass */
-  --card: var(--j3m-glass-dark-surface);
-  --popover: var(--j3m-glass-dark-overlay);
+  /* Shadcn overrides for dark glass - Use SOLID colors to match solid dark mode */
+  --card: var(--j3m-gray-13);
+  --popover: var(--j3m-gray-13);
+  --secondary: var(--j3m-gray-12);
+  --accent: #404040;
+  --accent-foreground: var(--j3m-gray-1);
+  
+  /* Sidebar tokens - match solid dark mode */
+  --sidebar: var(--j3m-gray-13);
+  --sidebar-foreground: var(--j3m-gray-1);
+  --sidebar-border: var(--j3m-gray-11);
+  --sidebar-accent: #404040;
+  --sidebar-accent-foreground: var(--j3m-gray-1);
   
   /* Orange accent glow for interactive elements */
   --j3m-glass-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
@@ -532,30 +597,35 @@
    Applied inside glass surfaces to adjust nested components
    ======================================== */
 
+/* Glass Context - Applied inside glass surfaces
+   - card: Keeps glass appearance for in-app content
+   - popover: WHITE solid to match solid light mode */
 .glass-context {
   --background: var(--j3m-glass-light-80);
   --input: var(--j3m-glass-light-50);
   --card: var(--j3m-glass-light-70);
-  --popover: var(--j3m-glass-light-80);
+  --popover: var(--j3m-gray-1);
   --muted: var(--j3m-glass-light-50);
   --muted-foreground: rgba(0, 0, 0, 0.55);
   --secondary: var(--j3m-glass-light-80);
   --border: var(--j3m-glass-border-light);
 }
 
-/* Dark glass context - override for dark mode */
+/* Dark glass context - Use SOLID dark mode colors to match solid dark mode */
 .dark .glass-context,
 .theme-glass.dark .glass-context {
-  --background: var(--j3m-glass-dark-surface);
-  --input: var(--j3m-glass-dark-input);
-  --card: var(--j3m-glass-dark-surface);
-  --popover: var(--j3m-glass-dark-overlay);
-  --muted: var(--j3m-glass-dark-muted);
-  --muted-foreground: rgba(255, 255, 255, 0.6);
-  --secondary: var(--j3m-glass-dark-element);
-  --border: var(--j3m-glass-dark-border);
-  --foreground: rgba(255, 255, 255, 0.95);
-  --card-foreground: rgba(255, 255, 255, 0.95);
+  --background: var(--j3m-gray-12);
+  --input: var(--j3m-gray-11);
+  --card: var(--j3m-gray-13);
+  --popover: var(--j3m-gray-13);
+  --muted: var(--j3m-gray-12);
+  --muted-foreground: var(--j3m-gray-7);
+  --secondary: var(--j3m-gray-12);
+  --accent: #404040;
+  --accent-foreground: var(--j3m-gray-1);
+  --border: var(--j3m-gray-11);
+  --foreground: var(--j3m-gray-1);
+  --card-foreground: var(--j3m-gray-1);
 }
 
 /* ========================================
@@ -1351,12 +1421,13 @@ textarea,
 }
 
 /* --- CALENDAR --- */
-/* Glass mode - same background as input boxes, keep default hover/selected states */
+/* Glass mode - use solid white to match solid light mode */
 .glass-context [data-slot="calendar"],
 .glass-context .rdp {
-  background: rgba(255, 255, 255, 0.8) !important;
-  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  background: var(--j3m-gray-1) !important;
+  border: 1px solid var(--j3m-gray-6) !important;
   border-radius: var(--j3m-radius-l) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 /* Remove inner white background from calendar grid */
@@ -1600,15 +1671,6 @@ textarea,
 .glass-context [data-slot="sheet-content"] {
   background: var(--sidebar) !important;
   border-color: var(--sidebar-border) !important;
-  padding-left: 1.5rem !important;
-  padding-right: 1.5rem !important;
-}
-
-.glass-context [data-slot="sheet-header"],
-.glass-context [data-slot="sheet-footer"],
-.glass-context [data-slot="sheet-body"] {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
 }
 
 /* --- DIALOG --- */
@@ -1624,40 +1686,56 @@ textarea,
 }
 
 .glass-context [data-slot="command"] {
-  background: transparent !important;
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+  background: var(--j3m-gray-1) !important;
+  background-color: var(--j3m-gray-1) !important;
+  border: 1px solid var(--j3m-gray-6) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+  box-shadow: var(--shadow-md) !important;
   outline: none !important;
+  border-radius: var(--j3m-radius-l) !important;
+  overflow: hidden !important;
 }
 
+/* Command in glass-context - unified container styling */
 .glass-context [data-slot="command-input-wrapper"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  border-radius: var(--j3m-radius-full) !important;
-  padding-left: 1rem !important;
-  padding-right: 1rem !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
+  border-bottom: 1px solid var(--j3m-gray-6) !important;
+  border-radius: 0 !important;
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
 }
 
 .glass-context [data-slot="command-input"] {
   background: transparent !important;
-  color: var(--sidebar-foreground) !important;
+  color: var(--j3m-gray-12) !important;
 }
 
 .glass-context [data-slot="command-input"]::placeholder {
-  color: var(--muted-foreground) !important;
+  color: var(--j3m-gray-9) !important;
+}
+
+/* Override generic input focus styles for command-input */
+.glass-context [data-slot="command-input"]:focus,
+.glass-context [data-slot="command-input"]:focus-visible {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
 }
 
 .glass-context [data-slot="command-input-wrapper"]:focus-within {
-  border-color: var(--j3m-orange-9) !important;
-  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
+  border-bottom-color: var(--j3m-gray-8) !important;
+  box-shadow: none !important;
 }
 
 .glass-context [data-slot="command-list"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  border-radius: var(--j3m-radius-l) !important;
-  margin-top: 0.25rem !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
+  border-radius: 0 !important;
+  margin-top: 0 !important;
 }
 
 .glass-context [data-slot="command-group"] {
@@ -1665,7 +1743,11 @@ textarea,
 }
 
 .glass-context [data-slot="command-item"] {
-  color: var(--sidebar-foreground) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+.glass-context [data-slot="command-group-heading"] {
+  color: var(--j3m-gray-9) !important;
 }
 
 /* Command item hover - use accent (grey) not primary (orange) */
@@ -1745,15 +1827,15 @@ textarea,
    Styling for components inside .dark .glass-context
    ======================================== */
 
-/* --- CARDS (Dark Glass) - ALL cards in dark glass mode --- */
+/* --- CARDS (Dark Glass) - Use SOLID dark colors to match solid dark mode --- */
 .dark.theme-glass [data-slot="card"],
 .theme-glass.dark [data-slot="card"],
 .dark .glass-context [data-slot="card"],
 .theme-glass.dark .glass-context [data-slot="card"] {
-  background: var(--sidebar) !important;
-  border: 1px solid var(--sidebar-border) !important;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15) !important;
-  color: var(--sidebar-foreground) !important;
+  background: var(--j3m-gray-13) !important;
+  border: 1px solid var(--j3m-gray-11) !important;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) !important;
+  color: var(--j3m-gray-1) !important;
 }
 
 /* Remove the light gradient border pseudo-element in dark mode */
@@ -1769,7 +1851,7 @@ textarea,
 .theme-glass.dark [data-slot="card"] *,
 .dark.theme-glass .glass-context *,
 .theme-glass.dark .glass-context * {
-  --card-foreground: var(--sidebar-foreground);
+  --card-foreground: rgba(255, 255, 255, 0.95);
 }
 
 /* --- INPUT FIELDS (Dark Glass) --- */
@@ -1976,10 +2058,25 @@ textarea,
 }
 
 /* --- COMMAND (Dark Glass) --- */
+.dark .glass-context [data-slot="command"],
+.theme-glass.dark .glass-context [data-slot="command"] {
+  background: var(--sidebar) !important;
+  background-color: var(--sidebar) !important;
+  border: 1px solid var(--sidebar-border) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+}
+
 .dark .glass-context [data-slot="command-input-wrapper"],
 .theme-glass.dark .glass-context [data-slot="command-input-wrapper"] {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+  background: transparent !important;
+  border-bottom-color: var(--sidebar-border) !important;
+}
+
+.dark .glass-context [data-slot="command-input-wrapper"]:focus-within,
+.theme-glass.dark .glass-context [data-slot="command-input-wrapper"]:focus-within {
+  border-bottom-color: var(--j3m-gray-8) !important;
+  box-shadow: none !important;
 }
 
 .dark .glass-context [data-slot="command-input"],
@@ -1992,10 +2089,21 @@ textarea,
   color: var(--muted-foreground) !important;
 }
 
+/* Override generic input focus styles for command-input in dark glass */
+.dark .glass-context [data-slot="command-input"]:focus,
+.dark .glass-context [data-slot="command-input"]:focus-visible,
+.theme-glass.dark .glass-context [data-slot="command-input"]:focus,
+.theme-glass.dark .glass-context [data-slot="command-input"]:focus-visible {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 .dark .glass-context [data-slot="command-list"],
 .theme-glass.dark .glass-context [data-slot="command-list"] {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-width: 0 !important;
 }
 
 .dark .glass-context [data-slot="command-item"],
@@ -2078,13 +2186,16 @@ textarea,
   border-color: var(--sidebar-border) !important;
 }
 
-/* --- CALENDAR (Dark Glass) --- */
+/* --- CALENDAR (Dark Glass) - Match solid dark mode --- */
 .dark .glass-context [data-slot="calendar"],
 .dark .glass-context .rdp,
 .theme-glass.dark .glass-context [data-slot="calendar"],
-.theme-glass.dark .glass-context .rdp {
-  background: var(--sidebar) !important;
-  border-color: var(--sidebar-border) !important;
+.theme-glass.dark .glass-context .rdp,
+.theme-glass.dark [data-slot="calendar"],
+.theme-glass.dark .rdp {
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !important;
 }
 
 /* --- SLIDER (Dark Glass) --- */
@@ -2150,12 +2261,34 @@ textarea,
   transform: translateX(-50%) !important;
 }
 
-/* Glass mode toast styling */
-.glass-context [data-sonner-toast],
-.glass-context .sonner-toast {
-  background: var(--sidebar) !important;
+/* Light Glass mode toast styling - WHITE to match solid light mode */
+.theme-glass:not(.dark) [data-sonner-toast],
+.theme-glass:not(.dark) .sonner-toast {
+  background: var(--j3m-gray-1) !important;
+  border-color: var(--j3m-gray-6) !important;
+  color: var(--j3m-gray-12) !important;
+}
+
+/* Dark glass toast - solid dark background with bright text */
+.theme-glass.dark [data-sonner-toast],
+.theme-glass.dark .sonner-toast,
+.dark.theme-glass [data-sonner-toast],
+.dark.theme-glass .sonner-toast {
+  background: var(--j3m-bg-sidebar) !important;
   border-color: var(--sidebar-border) !important;
-  color: var(--sidebar-foreground) !important;
+  color: #FFFFFF !important;
+}
+
+.theme-glass.dark [data-sonner-toast] *,
+.theme-glass.dark .sonner-toast *,
+.dark.theme-glass [data-sonner-toast] *,
+.dark.theme-glass .sonner-toast * {
+  color: #FFFFFF !important;
+}
+
+.theme-glass.dark [data-sonner-toast] [data-description],
+.dark.theme-glass [data-sonner-toast] [data-description] {
+  color: rgba(255, 255, 255, 0.7) !important;
 }
 
 /* ========================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": false,
   "description": "J3M UI Component Library - React components with J3M design tokens",
   "type": "module",
@@ -23,7 +23,8 @@
   },
   "files": [
     "dist",
-    "cursor-rules-for-consumers.md"
+    "cursor-rules-for-consumers.md",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup && npm run copy-styles",