@howssatoshi/quantumcss 1.7.5 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/README.md +1 -1
  2. package/dist/index.html +232 -0
  3. package/dist/quantum.min.css +1 -1
  4. package/examples/admin-panel.html +10 -18
  5. package/examples/analytics-dashboard.html +30 -19
  6. package/examples/blog-template.html +20 -20
  7. package/examples/chat-messaging.html +13 -23
  8. package/examples/email-template.html +20 -28
  9. package/examples/gaming-template.html +13 -13
  10. package/examples/gradient-test.html +0 -5
  11. package/examples/index.html +15 -15
  12. package/examples/kitchen-sink.html +15 -26
  13. package/examples/music-streaming.html +21 -29
  14. package/examples/news-template.html +14 -14
  15. package/examples/portfolio-resume.html +14 -35
  16. package/examples/shopping/index.html +10 -24
  17. package/examples/starlight.html +5 -5
  18. package/examples/theme-test.html +0 -15
  19. package/examples/travel/index.html +15 -15
  20. package/examples/video-streaming.html +30 -16
  21. package/package.json +1 -1
  22. package/src/defaults.js +78 -3
  23. package/src/generator.js +2 -2
  24. package/src/starlight.js +0 -4
  25. package/src/styles/quantum-animations.css +13 -13
  26. package/src/styles/quantum-base.css +158 -32
  27. package/src/styles/quantum-components.css +259 -533
  28. package/src/styles/starlight.css +680 -45
package/examples/shopping/index.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <script src="../../src/starlight.js"></script>
9
9
  <style>
10
10
  body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
11
- body.dark-mode { background-color: #020617; color: #f1f5f9; }
11
+ html[data-theme="dark"] { background-color: #020617; color: #f1f5f9; }
12
12
  .product-card:hover .product-image { transform: scale(1.05); }
13
13
  .product-image { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
14
14
 
@@ -44,45 +44,38 @@
44
44
  background: rgba(0, 0, 0, 0.05);
45
45
  }
46
46
 
47
- body.dark-mode .theme-toggle:hover {
47
+ html[data-theme="dark"] .theme-toggle:hover {
48
48
  background: rgba(255, 255, 255, 0.1);
49
49
  }
50
50
 
51
- body.dark-mode .bg-white,
52
51
  html[data-theme="dark"] .bg-white {
53
52
  background-color: #0f172a !important;
54
53
  border-color: rgba(255, 255, 255, 0.1) !important;
55
54
  color: #f1f5f9 !important;
56
55
  }
57
56
 
58
- body.dark-mode .bg-white\_80,
59
57
  html[data-theme="dark"] .bg-white\_80 {
60
58
  background-color: rgba(2, 6, 23, 0.8) !important;
61
59
  }
62
60
 
63
- body.dark-mode .glass,
64
61
  html[data-theme="dark"] .glass {
65
62
  background-color: rgba(255, 255, 255, 0.08) !important;
66
63
  border-color: rgba(255, 255, 255, 0.15) !important;
67
64
  }
68
65
 
69
- body.dark-mode .bg-slate-100,
70
66
  html[data-theme="dark"] .bg-slate-100 {
71
67
  background-color: rgba(255, 255, 255, 0.1) !important;
72
68
  }
73
69
 
74
- body.dark-mode .border-slate-100,
75
70
  html[data-theme="dark"] .border-slate-100 {
76
71
  border-color: rgba(255, 255, 255, 0.1) !important;
77
72
  }
78
73
 
79
- body.dark-mode nav,
80
74
  html[data-theme="dark"] nav {
81
75
  background-color: rgba(2, 6, 23, 0.8) !important;
82
76
  border-color: rgba(255, 255, 255, 0.1) !important;
83
77
  }
84
78
 
85
- body.light-mode footer,
86
79
  html[data-theme="light"] footer {
87
80
  background-color: rgba(255, 255, 255, 0.8) !important;
88
81
  backdrop-filter: blur(20px);
@@ -90,48 +83,41 @@
90
83
  color: #1e293b !important;
91
84
  }
92
85
 
93
- body.light-mode footer h5,
94
86
  html[data-theme="light"] footer h5 {
95
87
  color: #64748b !important;
96
88
  }
97
89
 
98
- body.light-mode footer a,
99
90
  html[data-theme="light"] footer a {
100
91
  color: #475569 !important;
101
92
  }
102
93
 
103
- body.light-mode footer a:hover,
104
94
  html[data-theme="light"] footer a:hover {
105
95
  color: #ea580c !important;
106
96
  }
107
97
 
108
- body.light-mode footer .text-orange-600,
109
98
  html[data-theme="light"] footer .text-orange-600 {
110
99
  color: #ea580c !important;
111
100
  }
112
101
 
113
- body.light-mode footer .bg-slate-950,
114
102
  html[data-theme="light"] footer .bg-slate-950 {
115
103
  background-color: rgba(255, 255, 255, 0.8) !important;
116
104
  }
117
105
 
118
- body.dark-mode .text-slate-900,
119
- body.dark-mode .text-slate-600,
120
- body.dark-mode .text-slate-500,
121
- html[data-theme="dark"] .text-slate-900,
122
- html[data-theme="dark"] .text-slate-600,
123
106
  html[data-theme="dark"] .text-slate-500 {
124
107
  color: #f1f5f9 !important;
125
108
  }
126
109
 
127
- body.light-mode .text-slate-900,
128
- body.light-mode .text-slate-600,
129
- body.light-mode .text-slate-500,
130
- html[data-theme="light"] .text-slate-900,
131
- html[data-theme="light"] .text-slate-600,
132
110
  html[data-theme="light"] .text-slate-500 {
133
111
  color: #0f172a !important;
134
112
  }
113
+
114
+ html[data-theme="dark"] .text-slate-900 {
115
+ color: #ffffff !important;
116
+ }
117
+
118
+ html[data-theme="dark"] .text-slate-600 {
119
+ color: #cbd5e1 !important;
120
+ }
135
121
  </style>
136
122
  </head>
137
123
  <body class="">
package/examples/starlight.html CHANGED
@@ -13,16 +13,16 @@
13
13
  overflow-x: hidden;
14
14
  }
15
15
 
16
- body.dark-mode {
16
+ html[data-theme="dark"] {
17
17
  color: #f1f5f9;
18
18
  }
19
19
 
20
- body.light-mode {
20
+ html[data-theme="light"] {
21
21
  background: #f1f5f9 !important;
22
22
  color: #1e293b;
23
23
  }
24
24
 
25
- body.light-mode .glass {
25
+ html[data-theme="light"] .glass {
26
26
  background: rgba(0, 0, 0, 0.03) !important;
27
27
  border-color: rgba(0, 0, 0, 0.1) !important;
28
28
  color: #1e293b !important;
@@ -81,14 +81,14 @@
81
81
  background: rgba(255, 255, 255, 0.1);
82
82
  }
83
83
 
84
- body.light-mode .theme-toggle:hover {
84
+ html[data-theme="light"] .theme-toggle:hover {
85
85
  background: rgba(0, 0, 0, 0.05);
86
86
  }
87
87
  </style>
88
88
  </head>
89
89
  <body class="p-8 min-h-screen">
90
90
  <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
91
- <svg class="w-6 h-6 sun-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
91
+ <svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
92
92
  <svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
93
93
  </div>
94
94
  <div class="hero-glow"></div>
package/examples/theme-test.html CHANGED
@@ -66,21 +66,6 @@
66
66
  function updateStatus() {
67
67
  const html = document.documentElement;
68
68
  const currentTheme = html.getAttribute('data-theme');
69
- const savedTheme = localStorage.getItem('theme');
70
- const effectiveTheme = localStorage.getItem('theme-effective');
71
- const systemPrefers = window.matchMedia('(prefers-color-scheme: light)').matches;
72
-
73
- const statusEl = document.getElementById('status');
74
- const stateEl = document.getElementById('current-state');
75
-
76
- // Debug information
77
- console.log('Theme Debug:', {
78
- currentTheme,
79
- savedTheme,
80
- effectiveTheme,
81
- systemPrefers,
82
- htmlDataTheme: html.getAttribute('data-theme'),
83
- htmlAttributes: Object.keys(html.attributes).map(attr => `${attr}: ${html.getAttribute(attr)}`)
84
69
  });
85
70
 
86
71
  statusEl.innerHTML = `
package/examples/travel/index.html CHANGED
@@ -12,10 +12,10 @@
12
12
  overflow-x: hidden;
13
13
  transition: background-color 0.5s ease, color 0.5s ease;
14
14
  }
15
- body.dark-mode {
15
+ html[data-theme="dark"] {
16
16
  color: #f1f5f9;
17
17
  }
18
- body.light-mode {
18
+ html[data-theme="light"] {
19
19
  background: #f1f5f9 !important;
20
20
  color: #1e293b;
21
21
  }
@@ -31,7 +31,7 @@
31
31
  transition: opacity 0.5s ease;
32
32
  }
33
33
 
34
- body.light-mode .hero-glow {
34
+ html[data-theme="light"] .hero-glow {
35
35
  opacity: 0;
36
36
  }
37
37
 
@@ -52,28 +52,28 @@
52
52
  background: rgba(255, 255, 255, 0.1);
53
53
  }
54
54
 
55
- body.light-mode .theme-toggle:hover {
55
+ html[data-theme="light"] .theme-toggle:hover {
56
56
  background: rgba(0, 0, 0, 0.05);
57
57
  }
58
58
 
59
- body.light-mode .glass {
59
+ html[data-theme="light"] .glass {
60
60
  background: rgba(0, 0, 0, 0.03) !important;
61
61
  border-color: rgba(0, 0, 0, 0.1) !important;
62
62
  color: #1e293b !important;
63
63
  }
64
64
 
65
- body.light-mode .starlight-card p,
66
- body.light-mode header p,
67
- body.light-mode section p {
65
+ html[data-theme="light"] .starlight-card p,
66
+ html[data-theme="light"] header p,
67
+ html[data-theme="light"] section p {
68
68
  color: #475569;
69
69
  }
70
70
 
71
- body.light-mode .btn-outline:hover {
71
+ html[data-theme="light"] .btn-outline:hover {
72
72
  background-color: #1e293b;
73
73
  color: white;
74
74
  }
75
75
 
76
- body.light-mode input[type="date"]::-webkit-calendar-picker-indicator {
76
+ html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
77
77
  filter: none;
78
78
  }
79
79
 
@@ -81,19 +81,19 @@
81
81
  color-scheme: dark;
82
82
  }
83
83
 
84
- body.light-mode input[type="date"] {
84
+ html[data-theme="light"] input[type="date"] {
85
85
  color-scheme: light;
86
86
  }
87
87
 
88
- body.light-mode input {
88
+ html[data-theme="light"] input {
89
89
  color: #1e293b !important;
90
90
  }
91
91
 
92
- body.light-mode input::placeholder {
92
+ html[data-theme="light"] input::placeholder {
93
93
  color: rgba(0, 0, 0, 0.3) !important;
94
94
  }
95
95
 
96
- body.light-mode .text-starlight-blue {
96
+ html[data-theme="light"] .text-starlight-blue {
97
97
  color: #2563eb !important;
98
98
  }
99
99
  </style>
@@ -120,7 +120,7 @@
120
120
  </div>
121
121
  <div class="flex items-center gap-4">
122
122
  <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
123
- <svg class="w-6 h-6 sun-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
123
+ <svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
124
124
  <svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
125
125
  </div>
126
126
  <button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
package/examples/video-streaming.html CHANGED
@@ -94,6 +94,29 @@
94
94
  overflow: hidden;
95
95
  }
96
96
 
97
+ @media (max-width: 1024px) {
98
+ .main-content {
99
+ grid-template-columns: 72px 1fr;
100
+ }
101
+ .sidebar .nav-item {
102
+ justify-content: center;
103
+ padding: 0.75rem 0;
104
+ }
105
+ .sidebar .nav-item span:last-child,
106
+ .sidebar .nav-section-title {
107
+ display: none;
108
+ }
109
+ }
110
+
111
+ @media (max-width: 768px) {
112
+ .main-content {
113
+ grid-template-columns: 1fr;
114
+ }
115
+ .sidebar {
116
+ display: none;
117
+ }
118
+ }
119
+
97
120
  /* Sidebar */
98
121
  .sidebar {
99
122
  padding: 0.75rem 0;
@@ -288,21 +311,19 @@
288
311
  }
289
312
 
290
313
  /* Light Mode */
291
- body.light-mode {
314
+ html[data-theme="light"] {
292
315
  --bg-primary: #ffffff;
293
316
  --text-primary: #0f0f0f;
294
317
  --text-secondary: #606060;
295
318
  --text-muted: #909090;
296
319
  }
297
- body.light-mode header { background: #ffffff; border-bottom-color: #e5e5e5; }
298
- body.light-mode .nav-item:hover, body.light-mode .nav-item.active { background: #f2f2f2; }
299
- body.light-mode .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
300
- body.light-mode .category-tab.active { background: #0f0f0f; color: #ffffff; }
301
- body.light-mode .video-thumbnail, body.light-mode .short-thumbnail { background: #f2f2f2; }
320
+ html[data-theme="light"] header { background: #ffffff; border-bottom-color: #e5e5e5; }
321
+ html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: #f2f2f2; }
322
+ html[data-theme="light"] .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
323
+ html[data-theme="light"] .category-tab.active { background: #0f0f0f; color: #ffffff; }
324
+ html[data-theme="light"] .video-thumbnail, html[data-theme="light"] .short-thumbnail { background: #f2f2f2; }
302
325
 
303
326
  @media (max-width: 1024px) {
304
- .main-content { grid-template-columns: 1fr; }
305
- .sidebar { display: none; }
306
327
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
307
328
  }
308
329
  @media (max-width: 640px) {
@@ -312,7 +333,7 @@
312
333
  }
313
334
  ::-webkit-scrollbar { width: 8px; height: 8px; }
314
335
  ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
315
- body.light-mode ::-webkit-scrollbar-thumb { background: #ccc; }
336
+ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
316
337
  </style>
317
338
  </head>
318
339
  <body>
@@ -545,13 +566,6 @@
545
566
  </div>
546
567
 
547
568
  <script>
548
- function toggleTheme() {
549
- document.body.classList.toggle('light-mode');
550
- localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
551
- }
552
- if (localStorage.getItem('theme') === 'light') {
553
- document.body.classList.add('light-mode');
554
- }
555
569
 
556
570
  document.querySelectorAll('.category-tab').forEach(tab => {
557
571
  tab.addEventListener('click', function() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@howssatoshi/quantumcss",
3
- "version": "1.7.5",
3
+ "version": "1.8.0",
4
4
  "description": "Advanced utility-first CSS framework with JIT generation and modern components",
5
5
  "main": "dist/quantum.min.css",
6
6
  "bin": {
package/src/defaults.js CHANGED
@@ -163,11 +163,11 @@ const utilityMaps = {
163
163
  },
164
164
  'theme-glass-dark': {
165
165
  property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
166
- value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.03)', '1px', 'solid']
166
+ value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px', 'solid']
167
167
  },
168
168
  'starlight-dialog-bg': {
169
169
  property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter'],
170
- value: ['rgba(8, 8, 26, 0.4) !important', 'blur(24px) !important', 'blur(24px) !important']
170
+ value: ['rgba(8, 8, 26, 0.05) !important', 'blur(24px) !important', 'blur(24px) !important']
171
171
  },
172
172
  'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
173
173
  'glow-starlight': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
@@ -201,7 +201,82 @@ const utilityMaps = {
201
201
  'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
202
202
  'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
203
203
  'starlight-form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
204
- 'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in'
204
+ 'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in',
205
+ 'starlight-sidebar': 'flex flex-col h-screen w-72 fixed left-0 top-0 bg-black_40 backdrop-blur-xl border-r border-white_10 p-6 z-40',
206
+ 'starlight-feed-card': 'flex flex-col bg-white_03 backdrop-blur-md border border-white_10 rounded-2xl p-6 transition-all duration-300 ease',
207
+ 'starlight-auth-form': 'flex flex-col max-w-md mx-auto bg-white_05 backdrop-blur-xl border border-white_10 rounded-2xl p-10 shadow-2xl',
208
+
209
+ 'email-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
210
+ 'email-feed': 'flex flex-col h-full bg-white_05 backdrop-blur-md border-r border-white_10 overflow-y-auto',
211
+ 'email-content': 'flex flex-col h-full overflow-y-auto',
212
+
213
+ 'music-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
214
+ 'music-content': 'flex flex-col h-full overflow-y-auto',
215
+ 'music-footer': 'flex items-center justify-between px-6 py-4 bg-black_40 backdrop-blur-xl border-t border-white_10',
216
+
217
+ 'chat-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 overflow-hidden',
218
+ 'chat-content': 'flex flex-col h-full overflow-hidden',
219
+
220
+ 'admin-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
221
+ 'admin-content': 'flex flex-col h-full overflow-y-auto',
222
+
223
+ 'analytics-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
224
+ 'analytics-content': 'flex flex-col h-full overflow-y-auto',
225
+
226
+ 'layout-email-3col': 'grid h-screen grid-cols-[280px_320px_1fr] overflow-hidden',
227
+ 'layout-music-2col': 'grid h-screen grid-rows-[1fr_auto] overflow-hidden',
228
+ 'layout-music-row': 'grid grid-cols-[280px_1fr] overflow-hidden',
229
+ 'layout-chat-2col': 'grid h-screen grid-cols-[320px_1fr] overflow-hidden',
230
+ 'layout-admin-2col': 'grid h-screen grid-cols-[260px_1fr] overflow-hidden',
231
+ 'layout-analytics-2col': 'grid h-screen grid-cols-[240px_1fr] overflow-hidden',
232
+
233
+ 'starlight-stat': 'flex flex-col gap-2 p-5 bg-white_03 border border-white_08 rounded-xl transition-all duration-300',
234
+ 'starlight-stat-header': 'flex items-center justify-between',
235
+ 'starlight-stat-icon': 'flex items-center justify-center w-10 h-10 rounded-lg',
236
+ 'starlight-stat-value': 'text-3xl font-bold text-starlight-blue',
237
+ 'starlight-stat-label': 'text-sm uppercase tracking-wide text-white_60',
238
+
239
+ 'starlight-avatar': 'flex items-center justify-center rounded-full font-semibold text-white',
240
+ 'starlight-avatar-sm': 'w-8 h-8 text-xs',
241
+ 'starlight-avatar-md': 'w-10 h-10 text-sm',
242
+ 'starlight-avatar-lg': 'w-12 h-12 text-base',
243
+ 'starlight-avatar-xl': 'w-16 h-16 text-lg',
244
+
245
+ 'starlight-theme-toggle': 'flex items-center justify-center w-10 h-10 rounded-full bg-white_05 border border-white_10 cursor-pointer transition-all duration-300',
246
+ 'starlight-notification': 'relative flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer',
247
+ 'starlight-notification-dot': 'absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse',
248
+
249
+ 'starlight-table-container': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
250
+ 'starlight-table-header': 'flex items-center justify-between p-4 border-b border-white_08',
251
+ 'starlight-table': 'w-full border-collapse',
252
+ 'starlight-table-footer': 'flex items-center justify-between p-4 border-t border-white_08 text-white_60',
253
+
254
+ 'starlight-chart': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
255
+ 'starlight-chart-header': 'flex items-center justify-between p-4 border-b border-white_05',
256
+ 'starlight-chart-tabs': 'flex gap-1',
257
+ 'starlight-chart-tab': 'px-3 py-1 text-xs font-medium bg-transparent border-none rounded-md cursor-pointer transition-all',
258
+ 'starlight-chart-tab.active': 'bg-starlight-blue_15 text-starlight-blue',
259
+
260
+ 'starlight-breadcrumb': 'flex items-center gap-2 text-sm',
261
+ 'starlight-breadcrumb-item': 'text-white_60 no-underline transition-colors',
262
+ 'starlight-breadcrumb-separator': 'text-white_40',
263
+ 'starlight-breadcrumb-current': 'font-medium',
264
+
265
+ 'starlight-gallery-grid': 'grid gap-4',
266
+ 'starlight-gallery-item': 'relative aspect-video rounded-lg overflow-hidden',
267
+ 'starlight-gallery-overlay': 'absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black_80 to-transparent opacity-0 transition-opacity',
268
+
269
+ 'starlight-progress': 'flex items-center gap-3',
270
+ 'starlight-progress-bar': 'flex-1 h-2 bg-white_10 rounded-full overflow-hidden',
271
+ 'starlight-progress-fill': 'h-full bg-gradient-to-r from-starlight-blue to-starlight-peach rounded-full transition-all duration-500',
272
+
273
+ 'starlight-player-controls': 'flex items-center gap-4',
274
+ 'starlight-player-btn': 'flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer transition-all',
275
+ 'starlight-player-btn-primary': 'w-12 h-12 bg-starlight-blue rounded-full text-black hover:bg-starlight-peach',
276
+
277
+ 'starlight-page-header': 'flex items-center justify-between p-6',
278
+ 'starlight-page-title': 'text-3xl font-bold',
279
+ 'starlight-page-subtitle': 'text-sm text-white_60 mt-1'
205
280
  };
206
281
 
207
282
  module.exports = { defaultTheme, utilityMaps };
package/src/generator.js CHANGED
@@ -450,13 +450,13 @@ function generateCSS(configPath) {
450
450
 
451
451
  selectors.forEach(selector => {
452
452
  if (breakpoint === 'light') {
453
- const block = `html[data-theme="light"] ${selector}, body.light-mode ${selector} {
453
+ const block = `html[data-theme="light"] ${selector} {
454
454
  ${rules.join('\n').trim()}
455
455
  }
456
456
  `;
457
457
  utilities.add(block);
458
458
  } else if (breakpoint === 'dark') {
459
- const block = `html[data-theme="dark"] ${selector}, body.dark-mode ${selector} {
459
+ const block = `html[data-theme="dark"] ${selector} {
460
460
  ${rules.join('\n').trim()}
461
461
  }
462
462
  `;
package/src/starlight.js CHANGED
@@ -505,8 +505,6 @@ const Starlight = {
505
505
 
506
506
  // Apply to DOM
507
507
  html.setAttribute('data-theme', effectiveTheme);
508
- document.body.classList.toggle('light-mode', effectiveTheme === 'light');
509
- document.body.classList.toggle('dark-mode', effectiveTheme === 'dark');
510
508
 
511
509
  // Save preference
512
510
  if (save) {
@@ -555,8 +553,6 @@ const Starlight = {
555
553
 
556
554
  // Apply to DOM
557
555
  html.setAttribute('data-theme', newEffective);
558
- document.body.classList.toggle('light-mode', newEffective === 'light');
559
- document.body.classList.toggle('dark-mode', newEffective === 'dark');
560
556
 
561
557
  localStorage.setItem(`${config.storageKey}-effective`, newEffective);
562
558
  updateIcons('auto', newEffective);
package/src/styles/quantum-animations.css CHANGED
@@ -53,42 +53,42 @@
53
53
  .ani-svg-draw {
54
54
  stroke-dasharray: 1000;
55
55
  stroke-dashoffset: 1000;
56
- animation: svg-draw 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
56
+ animation: svg-draw var(--q-duration-slow) var(--q-ease-emphasized) forwards;
57
57
  }
58
58
 
59
59
  .ani-float {
60
- animation: float-y 6s ease-in-out infinite;
60
+ animation: float-y 6s var(--q-ease-in-out) infinite;
61
61
  }
62
62
 
63
63
  .ani-fade-in {
64
- animation: fadeIn 0.3s ease-out forwards;
64
+ animation: fadeIn var(--q-duration-base) var(--q-ease-out) forwards;
65
65
  }
66
66
 
67
67
  .ani-slide-up {
68
- animation: slideUp 0.3s ease-out forwards;
68
+ animation: slideUp var(--q-duration-base) var(--q-ease-out) forwards;
69
69
  }
70
70
 
71
71
  .ani-slide-down {
72
- animation: slideDown 0.3s ease-out forwards;
72
+ animation: slideDown var(--q-duration-base) var(--q-ease-out) forwards;
73
73
  }
74
74
 
75
75
  .ani-scale-in {
76
- animation: scaleIn 0.2s ease-out forwards;
76
+ animation: scaleIn var(--q-duration-fast) var(--q-ease-out) forwards;
77
77
  }
78
78
 
79
79
  .ani-spin {
80
- animation: spin 1s linear infinite;
80
+ animation: spin 1s var(--q-ease-linear) infinite;
81
81
  }
82
82
 
83
83
  /* Staggered Animations */
84
- .ani-stagger-1 { animation-delay: 0.1s; }
85
- .ani-stagger-2 { animation-delay: 0.2s; }
86
- .ani-stagger-3 { animation-delay: 0.3s; }
87
- .ani-stagger-4 { animation-delay: 0.4s; }
88
- .ani-stagger-5 { animation-delay: 0.5s; }
84
+ .ani-stagger-1 { animation-delay: var(--q-duration-fast); }
85
+ .ani-stagger-2 { animation-delay: var(--q-duration-base); }
86
+ .ani-stagger-3 { animation-delay: var(--q-duration-slow); }
87
+ .ani-stagger-4 { animation-delay: 500ms; }
88
+ .ani-stagger-5 { animation-delay: var(--q-duration-slower); }
89
89
 
90
90
  /* Speed Modifiers */
91
- .ani-fast { animation-duration: 0.5s !important; }
91
+ .ani-fast { animation-duration: var(--q-duration-fast) !important; }
92
92
  .ani-slow { animation-duration: 8s !important; }
93
93
  .ani-slower { animation-duration: 15s !important; }
94
94