@howssatoshi/quantumcss 1.7.7 → 1.10.1

package/src/styles/quantum-components.css

@@ -48,7 +48,6 @@
   background-color: rgb(255 255 255 / 10%);
 }
 
-body.light-mode .btn-secondary,
 html[data-theme="light"] .btn-secondary {
   background-color: rgb(0 0 0 / 3%);
   color: #1e293b !important;
@@ -91,19 +90,29 @@ html[data-theme="light"] .btn-secondary {
   font-size: 1.25rem;
 }
 
+/* Glass Utility */
+.glass {
+  background: var(--q-glass-bg);
+  border: 1px solid var(--q-glass-border);
+  backdrop-filter: var(--q-glass-blur);
+  -webkit-backdrop-filter: var(--q-glass-blur);
+  border-radius: var(--q-radius-xl);
+}
+
 /* Card Component */
 .card {
-  background-color: white;
-  color: #1e293b;
+  background-color: var(--q-card-bg);
+  color: var(--q-text-primary);
+  border: 1px solid var(--q-card-border);
   border-radius: var(--q-radius-lg);
   box-shadow: var(--q-shadow-md);
   overflow: hidden;
   transition: all var(--q-duration-200) var(--q-ease-in-out);
 }
 
-body.light-mode .card {
-  background-color: white;
-  color: #1e293b;
+html[data-theme="light"] .card {
+  background-color: var(--q-light-card-bg, white);
+  color: var(--q-light-text, #1e293b);
 }
 
 .card:hover {
@@ -111,9 +120,28 @@ body.light-mode .card {
   transform: translateY(-2px);
 }
 
+.card-premium {
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
+  border-radius: var(--q-radius-2xl);
+  padding: 2.5rem;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  color: var(--q-color-text);
+  box-shadow: var(--q-card-shadow);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-premium:hover {
+  transform: translateY(-8px) scale(1.02);
+  background-color: color-mix(in srgb, var(--q-color-surface), white 5%);
+  box-shadow: 0 30px 60px -12px rgb(0 0 0 / 50%);
+  border-color: var(--q-color-starlight-blue);
+}
+
 .card-header {
   padding: var(--q-space-6);
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--q-glass-border);
 }
 
 .card-body {
@@ -122,12 +150,12 @@ body.light-mode .card {
 
 .card-footer {
   padding: var(--q-space-6);
-  border-top: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  color: #1e293b;
+  border-top: 1px solid var(--q-glass-border);
+  background-color: var(--q-glass-bg);
+  color: var(--q-text-secondary);
 }
 
-body.light-mode .card-footer {
+html[data-theme="light"] .card-footer {
   background-color: #f9fafb;
   color: #1e293b;
 }
@@ -145,7 +173,7 @@ body.light-mode .card-footer {
   transition: all var(--q-duration-150) var(--q-ease-in-out);
 }
 
-body.light-mode .input {
+html[data-theme="light"] .input {
   background-color: white;
   color: #1e293b;
 }
@@ -191,7 +219,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   cursor: not-allowed;
 }
 
-body.light-mode .input:disabled {
+html[data-theme="light"] .input:disabled {
   background-color: #f3f4f6;
   color: #6b7280;
 }
@@ -307,8 +335,14 @@ html[data-theme="light"] .badge-error {
 }
 
 .alert-info {
-  background-color: #dbeafe;
-  border-color: #60a5fa;
+  background-color: rgb(59 130 246 / 15%);
+  border-color: rgb(59 130 246 / 30%);
+  color: #60a5fa;
+}
+
+html[data-theme="light"] .alert-info {
+  background-color: rgb(59 130 246 / 10%);
+  border-color: rgb(59 130 246 / 20%);
   color: #1e40af;
 }
 
@@ -333,7 +367,7 @@ html[data-theme="light"] .badge-error {
   overflow-y: auto;
 }
 
-body.light-mode .modal-content {
+html[data-theme="light"] .modal-content {
   background-color: white;
   color: #1e293b;
 }
@@ -341,9 +375,9 @@ body.light-mode .modal-content {
 /* Loading Spinner */
 .spinner {
   display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 2px solid rgb(255 255 255 / 10%);
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid color-mix(in srgb, var(--q-color-text), transparent 85%);
   border-top-color: var(--q-color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -355,9 +389,13 @@ body.light-mode .modal-content {
 
 /* Skeleton Loading */
 .skeleton {
-  background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
+  background: linear-gradient(90deg, 
+    var(--q-skeleton-bg) 25%, 
+    var(--q-skeleton-shimmer) 50%, 
+    var(--q-skeleton-bg) 75%
+  );
   background-size: 200% 100%;
-  animation: shimmer 2s infinite;
+  animation: shimmer 2s infinite linear;
   border-radius: var(--q-radius-md);
 }
 
@@ -366,11 +404,15 @@ body.light-mode .modal-content {
   100% { background-position: -200% 0; }
 }
 
-body.light-mode .skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
+html[data-theme="light"] .skeleton {
+  background: linear-gradient(90deg, 
+    var(--q-skeleton-bg) 25%, 
+    var(--q-skeleton-shimmer) 50%, 
+    var(--q-skeleton-bg) 75%
+  );
 }
 
+
 /* Tooltip Component */
 .tooltip {
   position: relative;
@@ -422,7 +464,7 @@ body.light-mode .skeleton {
   transition: all var(--q-duration-150) var(--q-ease-in-out);
 }
 
-body.light-mode .dropdown-content {
+html[data-theme="light"] .dropdown-content {
   background-color: white;
   color: #1e293b;
 }
@@ -450,27 +492,29 @@ body.light-mode .dropdown-content {
   color: #1e293b;
 }
 
-body.light-mode .dropdown-item {
+html[data-theme="light"] .dropdown-item {
   color: #1e293b;
 }
 
-body.light-mode .dropdown-item:hover {
+html[data-theme="light"] .dropdown-item:hover {
   background-color: #f3f4f6;
   color: #1e293b;
 }
 
 /* Accordion Component */
 .accordion-item {
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--q-card-border);
   border-radius: var(--q-radius-md);
   margin-bottom: var(--q-space-2);
   overflow: hidden;
 }
 
 .accordion-header {
-  padding: var(--q-space-4);
-  background-color: #f9fafb;
-  color: #1e293b;
+  padding: var(--q-space-3) var(--q-space-4);
+  font-weight: 600;
+  background-color: rgb(255 255 255 / 5%);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  color: var(--q-text-primary);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -479,36 +523,42 @@ body.light-mode .dropdown-item:hover {
 }
 
 .accordion-header:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
+  background-color: rgb(255 255 255 / 8%);
+  color: var(--q-text-primary);
 }
 
 .accordion-content {
-  padding: var(--q-space-4);
-  background-color: white;
-  color: #1e293b;
+  padding: 0 var(--q-space-4);
+  background-color: var(--q-card-bg);
+  color: var(--q-text-primary);
   max-height: 0;
   overflow: hidden;
-  transition: max-height var(--q-duration-300) var(--q-ease-in-out);
+  transition: max-height var(--q-duration-300) var(--q-ease-in-out), padding var(--q-duration-300) var(--q-ease-in-out);
 }
 
-body.light-mode .accordion-header {
-  background-color: #f9fafb;
-  color: #1e293b;
+html[data-theme="light"] .accordion-header {
+  background-color: #f8fafc;
+  border-bottom-color: #e2e8f0;
+  color: var(--q-light-text);
 }
 
-body.light-mode .accordion-header:hover {
-  background-color: #f3f4f6;
-  color: #1e293b;
+html[data-theme="light"] .accordion-header:hover {
+  background-color: #f1f5f9;
 }
 
-body.light-mode .accordion-content {
-  background-color: white;
-  color: #1e293b;
+html[data-theme="light"] .accordion-header:hover {
+  background-color: color-mix(in srgb, var(--q-color-primary), transparent 92%);
+  color: var(--q-light-text);
+}
+
+html[data-theme="light"] .accordion-content {
+  background-color: var(--q-light-card-bg);
+  color: var(--q-light-text);
 }
 
 .accordion-item.active .accordion-content {
   max-height: 500px;
+  padding: var(--q-space-4);
 }
 
 .accordion-item.active .accordion-icon {
@@ -546,20 +596,20 @@ body.light-mode .accordion-content {
   color: var(--q-color-starlight-blue);
 }
 
-body.light-mode .tab-list {
+html[data-theme="light"] .tab-list {
   border-bottom-color: #e2e8f0;
 }
 
-body.light-mode .tab-button {
+html[data-theme="light"] .tab-button {
   color: #64748b;
 }
 
-body.light-mode .tab-button:hover {
+html[data-theme="light"] .tab-button:hover {
   background-color: #f1f5f9;
   color: #0f172a;
 }
 
-body.light-mode .tab-button.active {
+html[data-theme="light"] .tab-button.active {
   border-bottom-color: var(--q-color-primary);
   color: var(--q-color-primary);
 }
@@ -700,7 +750,7 @@ body.light-mode .tab-button.active {
   border-radius: 4px;
 }
 
-body.light-mode .table-wrapper::-webkit-scrollbar-track {
+html[data-theme="light"] .table-wrapper::-webkit-scrollbar-track {
   background: rgb(0 0 0 / 5%);
 }
 
@@ -731,18 +781,18 @@ body.light-mode .table-wrapper::-webkit-scrollbar-track {
 }
 
 /* Light Mode Table Styles */
-body.light-mode .table th {
+html[data-theme="light"] .table th {
   background-color: #f8fafc;
   border-bottom-color: #e2e8f0;
   color: #0f172a;
 }
 
-body.light-mode .table td {
+html[data-theme="light"] .table td {
   border-bottom-color: #e2e8f0;
   color: #334155;
 }
 
-body.light-mode .table tbody tr:hover {
+html[data-theme="light"] .table tbody tr:hover {
   background-color: #f1f5f9;
 }
 
@@ -823,12 +873,12 @@ body.light-mode .table tbody tr:hover {
 }
 
 /* Light mode overrides for layout */
-body.light-mode .sidebar {
+html[data-theme="light"] .sidebar {
   background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
   border-right-color: #e2e8f0;
 }
 
-body.light-mode .top-nav {
+html[data-theme="light"] .top-nav {
   background: #ffffff;
   border-color: #e2e8f0;
 }
@@ -936,7 +986,7 @@ body.light-mode .top-nav {
   border-radius: 2px;
 }
 
-body.light-mode .sidebar::-webkit-scrollbar-thumb {
+html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
   background: #cbd5e1;
 }
 
@@ -952,12 +1002,12 @@ body.light-mode .sidebar::-webkit-scrollbar-thumb {
 }
 
 /* Light mode overrides for navigation */
-body.light-mode .nav-item:hover {
+html[data-theme="light"] .nav-item:hover {
   background: #f1f5f9;
   color: #0f172a;
 }
 
-body.light-mode .nav-section-title {
+html[data-theme="light"] .nav-section-title {
   color: #64748b;
 }
 
@@ -1068,32 +1118,32 @@ body.light-mode .nav-section-title {
 }
 
 /* Light mode overrides for stat cards */
-body.light-mode .stat-card {
+html[data-theme="light"] .stat-card {
   background: #ffffff;
   border-color: #e2e8f0;
 }
 
-body.light-mode .stat-card:hover {
+html[data-theme="light"] .stat-card:hover {
   background: #f8fafc;
 }
 
-body.light-mode .stat-icon-blue {
+html[data-theme="light"] .stat-icon-blue {
   background: rgba(59, 130, 246, 0.1);
 }
 
-body.light-mode .stat-icon-green {
+html[data-theme="light"] .stat-icon-green {
   background: rgba(16, 185, 129, 0.1);
 }
 
-body.light-mode .stat-icon-orange {
+html[data-theme="light"] .stat-icon-orange {
   background: rgba(249, 115, 22, 0.1);
 }
 
-body.light-mode .stat-icon-purple {
+html[data-theme="light"] .stat-icon-purple {
   background: rgba(139, 92, 246, 0.1);
 }
 
-body.light-mode .stat-icon-red {
+html[data-theme="light"] .stat-icon-red {
   background: rgba(239, 68, 68, 0.1);
 }
 
@@ -1189,15 +1239,15 @@ body.light-mode .stat-icon-red {
 }
 
 /* Light mode overrides for icon buttons */
-body.light-mode .icon-btn,
-body.light-mode .action-btn {
+html[data-theme="light"] .icon-btn,
+html[data-theme="light"] .action-btn {
   background: #f1f5f9;
   border-color: #e2e8f0;
   color: #64748b;
 }
 
-body.light-mode .icon-btn:hover,
-body.light-mode .action-btn:hover {
+html[data-theme="light"] .icon-btn:hover,
+html[data-theme="light"] .action-btn:hover {
   background: #e2e8f0;
   color: #0f172a;
 }
@@ -1241,22 +1291,22 @@ body.light-mode .action-btn:hover {
   display: none;
 }
 
-body.light-mode .sun-icon {
+html[data-theme="light"] .sun-icon {
   display: inline;
 }
 
-body.light-mode .moon-icon {
+html[data-theme="light"] .moon-icon {
   display: none;
 }
 
 /* Light mode overrides for theme toggle */
-body.light-mode .theme-btn {
+html[data-theme="light"] .theme-btn {
   background: #f1f5f9;
   border-color: #e2e8f0;
   color: #475569;
 }
 
-body.light-mode .theme-toggle-wrapper {
+html[data-theme="light"] .theme-toggle-wrapper {
   border-top-color: #e2e8f0;
 }
 
@@ -1337,11 +1387,11 @@ body.light-mode .theme-toggle-wrapper {
 }
 
 /* Light mode overrides for user info */
-body.light-mode .user-name {
+html[data-theme="light"] .user-name {
   color: #0f172a;
 }
 
-body.light-mode .user-email {
+html[data-theme="light"] .user-email {
   color: #64748b;
 }
 
@@ -1374,7 +1424,7 @@ body.light-mode .user-email {
   color: #34d399;
 }
 
-.status-active__:before {
+.status-active::before {
   background: #34d399;
 }
 
@@ -1392,7 +1442,7 @@ body.light-mode .user-email {
   color: #f87171;
 }
 
-.status-inactive__:before {
+.status-inactive::before {
   background: #f87171;
 }
 
@@ -1459,42 +1509,42 @@ body.light-mode .user-email {
 }
 
 /* Light mode overrides for badges */
-body.light-mode .status-active {
+html[data-theme="light"] .status-active {
   background: rgba(16, 185, 129, 0.1);
   color: #059669;
 }
 
-body.light-mode .status-pending {
+html[data-theme="light"] .status-pending {
   background: rgba(245, 158, 11, 0.1);
   color: #d97706;
 }
 
-body.light-mode .status-inactive {
+html[data-theme="light"] .status-inactive {
   background: rgba(239, 68, 68, 0.1);
   color: #dc2626;
 }
 
-body.light-mode .role-badge {
+html[data-theme="light"] .role-badge {
   background: #f1f5f9;
   color: #475569;
 }
 
-body.light-mode .role-admin {
+html[data-theme="light"] .role-admin {
   background: rgba(0, 212, 255, 0.1);
   color: #0284c7;
 }
 
-body.light-mode .label-work {
+html[data-theme="light"] .label-work {
   background: rgba(59, 130, 246, 0.1);
   color: #2563eb;
 }
 
-body.light-mode .label-personal {
+html[data-theme="light"] .label-personal {
   background: rgba(16, 185, 129, 0.1);
   color: #059669;
 }
 
-body.light-mode .label-important {
+html[data-theme="light"] .label-important {
   background: rgba(239, 68, 68, 0.1);
   color: #dc2626;
 }
@@ -1504,43 +1554,12 @@ body.light-mode .label-important {
    Search boxes with integrated icons
    ============================================================================ */
 
-/* Search container */
-.search-box {
-  position: relative;
-}
-
-/* Search input */
-.search-input {
-  width: 280px;
-  padding: 0.625rem 1rem 0.625rem 2.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 0.625rem;
-  color: var(--q-text-primary, #f1f5f9);
-  font-size: 0.875rem;
-  transition: all 0.2s ease;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: rgba(0, 212, 255, 0.5);
-  background: rgba(255, 255, 255, 0.08);
-}
+/* Search input base handled in starlight.css */
 
 .search-input::placeholder {
   color: var(--q-text-muted, #64748b);
 }
 
-/* Search icon */
-.search-icon {
-  position: absolute;
-  left: 0.875rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--q-text-muted, #64748b);
-  pointer-events: none;
-}
-
 /* Full-width search input */
 .search-input-full {
   width: 100%;
@@ -1560,30 +1579,22 @@ body.light-mode .label-important {
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
   background-size: 1.25rem;
+  transition: all 0.2s ease;
 }
 
 .filter-select:focus {
   outline: none;
-  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
+  border-color: var(--q-color-starlight-blue);
 }
 
 /* Light mode overrides for search */
-body.light-mode .search-input,
-body.light-mode .filter-select {
+html[data-theme="light"] .filter-select {
   background: #f1f5f9;
   border-color: #e2e8f0;
   color: #0f172a;
 }
 
-body.light-mode .search-input:focus {
-  border-color: #3b82f6;
-  background: #ffffff;
-}
-
-body.light-mode .search-input::placeholder {
-  color: #94a3b8;
-}
-
 /* ============================================================================
    STATUS INDICATORS
    Online status and notification dots
@@ -1648,9 +1659,9 @@ body.light-mode .search-input::placeholder {
 }
 
 /* Light mode overrides for indicators */
-body.light-mode .online-indicator,
-body.light-mode .notification-dot,
-body.light-mode .notification-badge {
+html[data-theme="light"] .online-indicator,
+html[data-theme="light"] .notification-dot,
+html[data-theme="light"] .notification-badge {
   border-color: #ffffff;
 }
 
@@ -1697,18 +1708,18 @@ body.light-mode .notification-badge {
 }
 
 /* Light mode overrides for pagination */
-body.light-mode .page-btn {
+html[data-theme="light"] .page-btn {
   background: #f1f5f9;
   border-color: #e2e8f0;
   color: #64748b;
 }
 
-body.light-mode .page-btn:hover {
+html[data-theme="light"] .page-btn:hover {
   background: #e2e8f0;
   color: #0f172a;
 }
 
-body.light-mode .page-btn.active {
+html[data-theme="light"] .page-btn.active {
   background: rgba(59, 130, 246, 0.1);
   border-color: rgba(59, 130, 246, 0.3);
   color: #2563eb;