@j3m-quantum/ui 1.3.1 → 1.4.0

package/dist/styles/index.css

@@ -514,7 +514,7 @@
   /* Override frosted glass tokens for dark mode */
   --j3m-glass-frosted: var(--j3m-glass-dark-surface);
   --j3m-glass-frosted-strong: var(--j3m-glass-dark-elevated);
-  --j3m-glass-frosted-card: var(--j3m-glass-dark-surface);
+  --j3m-glass-frosted-card: var(--j3m-glass-dark-surface); /* Cards same darkness as sections (70%) */
   --j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
   --j3m-glass-border-light: var(--j3m-glass-dark-border-light);
   --j3m-glass-border-white: var(--j3m-glass-dark-border);
@@ -1352,13 +1352,16 @@ textarea,
 
 /* --- SWITCH --- */
 .glass-context [data-slot="switch"],
+.glass-context [data-slot="theme-switch"],
 .glass-context [role="switch"] {
   background: rgba(255, 255, 255, 0.5) !important;
   border-color: rgba(0, 0, 0, 0.15) !important;
 }
 
 .glass-context [data-slot="switch"][data-state="checked"],
-.glass-context [role="switch"][data-state="checked"] {
+.glass-context [data-slot="theme-switch"][data-state="checked"],
+.glass-context [role="switch"][data-state="checked"],
+.glass-context [role="switch"][aria-checked="true"] {
   background: var(--primary) !important;
   border-color: var(--primary) !important;
 }
@@ -1777,6 +1780,25 @@ textarea,
 }
 
 /* --- SCROLL AREA --- */
+/* Solid Light Mode - dark thumb on light background */
+[data-slot="scroll-area-thumb"] {
+  background: rgba(0, 0, 0, 0.25) !important;
+}
+
+[data-slot="scroll-area-thumb"]:hover {
+  background: rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Solid Dark Mode - light thumb on dark background */
+.dark [data-slot="scroll-area-thumb"] {
+  background: rgba(255, 255, 255, 0.25) !important;
+}
+
+.dark [data-slot="scroll-area-thumb"]:hover {
+  background: rgba(255, 255, 255, 0.4) !important;
+}
+
+/* Glass Light Mode - same as light solid for consistency */
 .glass-context [data-slot="scroll-area"] {
   background: var(--sidebar) !important;
   border: 1px solid var(--sidebar-border) !important;
@@ -1827,23 +1849,41 @@ textarea,
    Styling for components inside .dark .glass-context
    ======================================== */
 
-/* --- CARDS (Dark Glass) - Use SOLID dark colors to match solid dark mode --- */
+/* --- CARDS (Dark Glass) - Base styling for ALL dark glass cards --- */
+/* Freestanding cards on background image = Same darkness as sections (70%) */
 .dark.theme-glass [data-slot="card"],
-.theme-glass.dark [data-slot="card"],
+.theme-glass.dark [data-slot="card"] {
+  background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
+  backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
+  border: 1px solid var(--j3m-glass-dark-border-light) !important;
+  box-shadow: var(--j3m-glass-shadow-md) !important;
+  color: var(--j3m-gray-1) !important;
+  position: relative;
+}
+
+/* Cards INSIDE glass sections = SAME darkness as sections for consistency */
 .dark .glass-context [data-slot="card"],
+.dark.theme-glass .glass-context [data-slot="card"],
 .theme-glass.dark .glass-context [data-slot="card"] {
-  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;
+  background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
 }
 
-/* Remove the light gradient border pseudo-element in dark mode */
+/* Gradient border for glass edge effect on dark cards */
 .dark.theme-glass [data-slot="card"]::before,
 .theme-glass.dark [data-slot="card"]::before,
-.dark .glass-context [data-slot="card"]::before,
-.theme-glass.dark .glass-context [data-slot="card"]::before {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
+.dark .glass-context [data-slot="card"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
 }
 
 /* Card text colors in dark glass */
@@ -1870,8 +1910,12 @@ textarea,
 
 .dark .glass-context input::placeholder,
 .dark .glass-context [data-slot="input"]::placeholder,
+.dark .glass-context textarea::placeholder,
+.dark .glass-context [data-slot="textarea"]::placeholder,
 .theme-glass.dark .glass-context input::placeholder,
-.theme-glass.dark .glass-context [data-slot="input"]::placeholder {
+.theme-glass.dark .glass-context [data-slot="input"]::placeholder,
+.theme-glass.dark .glass-context textarea::placeholder,
+.theme-glass.dark .glass-context [data-slot="textarea"]::placeholder {
   color: var(--muted-foreground) !important;
 }
 
@@ -1883,6 +1927,40 @@ textarea,
   color: var(--sidebar-foreground) !important;
 }
 
+.dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"],
+.theme-glass.dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"] {
+  color: var(--sidebar-foreground) !important;
+}
+
+/* Select placeholder text in dark glass */
+.dark .glass-context [data-slot="select-trigger"] [data-placeholder],
+.theme-glass.dark .glass-context [data-slot="select-trigger"] [data-placeholder] {
+  color: var(--muted-foreground) !important;
+}
+
+/* --- NATIVE SELECT (Dark Glass) --- */
+.dark .glass-context select,
+.dark .glass-context [data-slot="native-select"],
+.theme-glass.dark .glass-context select,
+.theme-glass.dark .glass-context [data-slot="native-select"] {
+  background: var(--sidebar) !important;
+  border-color: var(--sidebar-border) !important;
+  color: var(--sidebar-foreground) !important;
+}
+
+.dark .glass-context select:focus,
+.dark .glass-context [data-slot="native-select"]:focus,
+.theme-glass.dark .glass-context select:focus,
+.theme-glass.dark .glass-context [data-slot="native-select"]:focus {
+  border-color: var(--j3m-orange-9) !important;
+  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
+}
+
+.dark .glass-context [data-slot="native-select-icon"],
+.theme-glass.dark .glass-context [data-slot="native-select-icon"] {
+  color: var(--muted-foreground) !important;
+}
+
 /* --- BUTTONS (Dark Glass) --- */
 .dark .glass-context [data-slot="button"][data-variant="outline"],
 .dark .glass-context [data-slot="button"][data-variant="secondary"],
@@ -1946,6 +2024,22 @@ textarea,
   color: var(--sidebar-foreground) !important;
 }
 
+.dark .glass-context tfoot,
+.dark .glass-context [data-slot="table-footer"],
+.theme-glass.dark .glass-context tfoot,
+.theme-glass.dark .glass-context [data-slot="table-footer"] {
+  background: var(--muted) !important;
+}
+
+.dark .glass-context caption,
+.dark .glass-context [data-slot="table-caption"],
+.theme-glass.dark .glass-context caption,
+.theme-glass.dark .glass-context [data-slot="table-caption"] {
+  background: var(--sidebar) !important;
+  border-top: 1px solid var(--sidebar-border) !important;
+  color: var(--muted-foreground) !important;
+}
+
 /* --- DROPDOWN/POPOVER (Dark Glass) --- */
 .dark .glass-context [data-slot="dropdown-menu-content"],
 .dark .glass-context [data-slot="popover-content"],
@@ -2198,6 +2292,21 @@ textarea,
   color: var(--j3m-gray-1) !important;
 }
 
+/* Calendar weekday row - remove background, use light text */
+.dark .glass-context [data-slot="calendar"] thead,
+.dark .glass-context [data-slot="calendar"] .rdp-weekdays,
+.dark .glass-context [data-slot="calendar"] .rdp-weekday,
+.theme-glass.dark .glass-context [data-slot="calendar"] thead,
+.theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekdays,
+.theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekday,
+.theme-glass.dark [data-slot="calendar"] thead,
+.theme-glass.dark [data-slot="calendar"] .rdp-weekdays,
+.theme-glass.dark [data-slot="calendar"] .rdp-weekday {
+  background: transparent !important;
+  background-color: transparent !important;
+  color: var(--muted-foreground) !important;
+}
+
 /* --- SLIDER (Dark Glass) --- */
 .dark .glass-context [data-slot="slider-track"],
 .theme-glass.dark .glass-context [data-slot="slider-track"] {
@@ -2235,13 +2344,26 @@ textarea,
 
 /* --- SWITCH (Dark Glass) --- */
 .dark .glass-context [data-slot="switch"],
+.dark .glass-context [data-slot="theme-switch"],
 .dark .glass-context [role="switch"],
 .theme-glass.dark .glass-context [data-slot="switch"],
+.theme-glass.dark .glass-context [data-slot="theme-switch"],
 .theme-glass.dark .glass-context [role="switch"] {
   background: var(--muted) !important;
   border-color: var(--sidebar-border) !important;
 }
 
+/* Switch checked state - orange background */
+.dark .glass-context [data-slot="switch"][data-state="checked"],
+.dark .glass-context [data-slot="theme-switch"][data-state="checked"],
+.dark .glass-context [role="switch"][aria-checked="true"],
+.theme-glass.dark .glass-context [data-slot="switch"][data-state="checked"],
+.theme-glass.dark .glass-context [data-slot="theme-switch"][data-state="checked"],
+.theme-glass.dark .glass-context [role="switch"][aria-checked="true"] {
+  background: var(--primary) !important;
+  border-color: var(--primary) !important;
+}
+
 /* ========================================
    TOAST/SONNER POSITIONING
    Position toasts at top-center of screen
@@ -2274,21 +2396,38 @@ textarea,
 .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: #FFFFFF !important;
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !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;
+  color: var(--j3m-gray-1) !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;
+  color: var(--j3m-gray-7) !important;
+}
+
+/* Solid Dark mode toast - ensure dark background */
+.dark:not(.theme-glass) [data-sonner-toast],
+.dark:not(.theme-glass) .sonner-toast {
+  background: var(--j3m-gray-13) !important;
+  border-color: var(--j3m-gray-11) !important;
+  color: var(--j3m-gray-1) !important;
+}
+
+.dark:not(.theme-glass) [data-sonner-toast] *,
+.dark:not(.theme-glass) .sonner-toast * {
+  color: var(--j3m-gray-1) !important;
+}
+
+.dark:not(.theme-glass) [data-sonner-toast] [data-description] {
+  color: var(--j3m-gray-7) !important;
 }
 
 /* ========================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "private": false,
   "description": "J3M UI Component Library - React components with J3M design tokens",
   "type": "module",
@@ -101,4 +101,4 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   }
-}
+}