@howssatoshi/quantumcss 1.8.0 → 1.10.1

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/quantum.min.css +10 -1
  3. package/examples/admin-panel.html +2 -2
  4. package/examples/analytics-dashboard.html +6 -11
  5. package/examples/blog-template.html +16 -15
  6. package/examples/chat-messaging.html +33 -44
  7. package/examples/email-template.html +2 -2
  8. package/examples/gaming-template.html +148 -17
  9. package/examples/gradient-test.html +5 -0
  10. package/examples/images/eric.png +0 -0
  11. package/examples/index.html +89 -116
  12. package/examples/kitchen-sink.html +49 -1
  13. package/examples/music-streaming.html +3 -3
  14. package/examples/news-template.html +87 -229
  15. package/examples/portfolio-resume.html +121 -563
  16. package/examples/shopping/index.html +514 -327
  17. package/examples/shopping/nova-shop.css +984 -0
  18. package/examples/starlight.html +4 -3
  19. package/examples/travel/index.html +170 -13
  20. package/examples/video-streaming.html +10 -3
  21. package/package.json +1 -1
  22. package/src/defaults.js +1 -0
  23. package/src/generator.js +12 -3
  24. package/src/styles/quantum-animations.css +13 -13
  25. package/src/styles/quantum-base.css +106 -58
  26. package/src/styles/quantum-components.css +550 -265
  27. package/src/styles/starlight.css +327 -99
  28. package/dist/index.html +0 -232
package/examples/analytics-dashboard.html CHANGED
@@ -860,7 +860,7 @@
860
860
  const range = maxValue - minValue;
861
861
 
862
862
  // Draw grid lines
863
- ctx.strokeStyle = document.body.classList.contains('light-mode') ? '#e2e8f0' : 'rgba(255,255,255,0.05)';
863
+ ctx.strokeStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#e2e8f0' : 'rgba(255,255,255,0.05)';
864
864
  ctx.lineWidth = 1;
865
865
 
866
866
  for (let i = 0; i <= 5; i++) {
@@ -926,7 +926,7 @@
926
926
  });
927
927
 
928
928
  // Draw labels
929
- ctx.fillStyle = document.body.classList.contains('light-mode') ? '#64748b' : '#64748b';
929
+ ctx.fillStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#64748b' : '#94a3b8';
930
930
  ctx.font = '12px Inter, system-ui, sans-serif';
931
931
  ctx.textAlign = 'center';
932
932
 
@@ -978,7 +978,7 @@
978
978
  });
979
979
 
980
980
  // Draw center text
981
- ctx.fillStyle = document.body.classList.contains('light-mode') ? '#0f172a' : '#f1f5f9';
981
+ ctx.fillStyle = document.documentElement.getAttribute('data-theme') === 'light' ? '#0f172a' : '#f1f5f9';
982
982
  ctx.font = 'bold 20px Inter, system-ui, sans-serif';
983
983
  ctx.textAlign = 'center';
984
984
  ctx.textBaseline = 'middle';
@@ -998,15 +998,10 @@
998
998
  });
999
999
 
1000
1000
  // Redraw on theme change
1001
- const observer = new MutationObserver((mutations) => {
1002
- mutations.forEach((mutation) => {
1003
- if (mutation.attributeName === 'class') {
1004
- drawLineChart();
1005
- drawDonutChart();
1006
- }
1007
- });
1001
+ window.addEventListener('themechange', () => {
1002
+ drawLineChart();
1003
+ drawDonutChart();
1008
1004
  });
1009
- observer.observe(document.body, { attributes: true });
1010
1005
  </script>
1011
1006
  </body>
1012
1007
  </html>
package/examples/blog-template.html CHANGED
@@ -37,7 +37,6 @@
37
37
  color: #1e293b;
38
38
  }
39
39
 
40
- html[data-theme="light"] .text-white,
41
40
  html[data-theme="light"] .text-primary,
42
41
  html[data-theme="light"] h1,
43
42
  html[data-theme="light"] h2,
@@ -72,6 +71,8 @@
72
71
  html[data-theme="light"] .code-window pre {
73
72
  color: #1e293b;
74
73
  }
74
+ body { background: transparent !important; }
75
+ nav, main, footer, section { position: relative; z-index: 1; }
75
76
  </style>
76
77
  </head>
77
78
  <body class="bg-starlight-deep text-primary font-sans antialiased min-h-screen relative overflow-x-hidden">
@@ -85,7 +86,7 @@
85
86
  <div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
86
87
  </div>
87
88
 
88
- <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none">
89
+ <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-n1 pointer-events-none">
89
90
  <div class="absolute top-0 left-0 w-full h-full bg-gradient-radial from-primary opacity-10"></div>
90
91
  </div>
91
92
 
@@ -147,14 +148,14 @@
147
148
  <span>5 min read</span>
148
149
  </div>
149
150
 
150
- <h1 class="text-5xl md:text-7xl font-black leading-tight text-white uppercase italic tracking-tighter">
151
+ <h1 class="text-5xl md:text-7xl font-black leading-tight text-primary uppercase italic tracking-tighter">
151
152
  The Future of <span class="text-gradient-starlight">UI Design</span>
152
153
  </h1>
153
154
 
154
155
  <div class="flex items-center gap-4 pt-4">
155
- <img src="https://media.licdn.com/dms/image/v2/D5603AQFDAUK1PK6IzQ/profile-displayphoto-scale_100_100/B56Zml2ZwgJkAg-_0/1759424127811?e=1771459200&v=beta&t=kk4HtXlQ0REqJ5bz6yy3akXwYeEfvznb8PZ4hQg85u4" alt="Eric Yang" class="w-12 h-12 rounded-full border border-primary_30">
156
+ <img src="images/eric.png" alt="Eric Yang" class="w-12 h-12 rounded-full border border-accent_30">
156
157
  <div>
157
- <p class="font-bold text-white uppercase text-xs tracking-widest">Eric Yang</p>
158
+ <p class="font-bold text-primary uppercase text-xs tracking-widest">Eric Yang</p>
158
159
  <p class="text-xs text-secondary font-medium">Frontend Architect</p>
159
160
  </div>
160
161
  </div>
@@ -169,12 +170,12 @@
169
170
 
170
171
  <!-- Content -->
171
172
  <div class="prose max-w-none text-slate-300 text-lg leading-relaxed space-y-10">
172
- <p class="text-2xl text-white font-medium">
173
+ <p class="text-2xl text-primary font-medium">
173
174
  Glassmorphism, neon glows, and deep gradients are making a comeback. Powered by modern CSS, they create an immersive experience.
174
175
  </p>
175
176
 
176
177
  <div class="space-y-6">
177
- <h2 class="text-3xl font-black text-white uppercase italic tracking-tighter flex items-center gap-4">
178
+ <h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter flex items-center gap-4">
178
179
  <span class="w-2 h-10 bg-starlight rounded-full shadow-[0_0_15px_rgba(0,212,255,0.5)]"></span>
179
180
  The Starlight Paradigm
180
181
  </h2>
@@ -183,12 +184,12 @@
183
184
  </p>
184
185
  </div>
185
186
 
186
- <div class="glass p-8 rounded-2xl border-primary bg-primary_5 italic text-xl text-white">
187
+ <div class="glass p-8 rounded-2xl border-accent bg-accent_5 italic text-xl text-primary">
187
188
  "Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
188
189
  </div>
189
190
 
190
191
  <div class="space-y-6">
191
- <h2 class="text-3xl font-black text-white uppercase italic tracking-tighter">Code Interface</h2>
192
+ <h2 class="text-3xl font-black text-primary uppercase italic tracking-tighter">Code Interface</h2>
192
193
  <div class="code-window">
193
194
  <div class="code-window-header">
194
195
  <div class="code-window-controls">
@@ -235,7 +236,7 @@
235
236
 
236
237
  <!-- Newsletter -->
237
238
  <div class="glass p-6 rounded-2xl glow-blue border border-white_5">
238
- <h3 class="text-lg font-bold mb-2 text-white">Join the Newsletter</h3>
239
+ <h3 class="text-lg font-bold mb-2 text-primary">Join the Newsletter</h3>
239
240
  <p class="text-secondary text-sm mb-4">Get the latest design trends delivered to your inbox.</p>
240
241
  <form class="space-y-3">
241
242
  <input type="email" placeholder="your@email.com" class="input-starlight w-full bg-black_20 border-white_10">
@@ -248,12 +249,12 @@
248
249
  <h3 class="text-xs font-bold text-muted uppercase tracking-wider">Recommended</h3>
249
250
 
250
251
  <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
251
- <h4 class="font-bold text-white group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
252
+ <h4 class="font-bold text-primary group-hover:text-primary transition-colors">Glassmorphism in 2026</h4>
252
253
  <p class="text-xs text-muted mt-1">Feb 1 • 4 min read</p>
253
254
  </a>
254
255
 
255
256
  <a href="#" class="block glass p-4 rounded-xl hover:bg-white_5 transition-colors group">
256
- <h4 class="font-bold text-white group-hover:text-primary transition-colors">Modern CSS Variables</h4>
257
+ <h4 class="font-bold text-primary group-hover:text-primary transition-colors">Modern CSS Variables</h4>
257
258
  <p class="text-xs text-muted mt-1">Jan 28 • 8 min read</p>
258
259
  </a>
259
260
  </div>
@@ -271,8 +272,8 @@
271
272
  © 2026 StarlightBlog. Powered by QuantumCSS.
272
273
  </div>
273
274
  <div class="flex gap-6">
274
- <a href="#" class="text-muted hover:text-white transition-colors">Privacy</a>
275
- <a href="#" class="text-muted hover:text-white transition-colors">Terms</a>
275
+ <a href="#" class="text-muted hover:text-primary transition-colors">Privacy</a>
276
+ <a href="#" class="text-muted hover:text-primary transition-colors">Terms</a>
276
277
  </div>
277
278
  </div>
278
279
  </div>
@@ -284,4 +285,4 @@
284
285
  </script>
285
286
 
286
287
  </body>
287
- </html>
288
+ </html>
package/examples/chat-messaging.html CHANGED
@@ -11,72 +11,68 @@
11
11
  display: grid;
12
12
  grid-template-columns: 320px 1fr;
13
13
  height: 100vh;
14
- background: var(--bg-primary, #08081a);
14
+ background: var(--q-color-bg, #08081a);
15
15
  overflow: hidden;
16
16
  }
17
17
  .chat-sidebar {
18
- background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
19
- border-right: 1px solid rgba(255, 255, 255, 0.06);
18
+ background: linear-gradient(180deg, color-mix(in srgb, var(--q-color-bg), white 2%) 0%, var(--q-color-bg) 100%);
19
+ border-right: 1px solid var(--q-color-border);
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
  overflow: hidden;
23
23
  }
24
- .sidebar-header { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
25
- .chat-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
24
+ .sidebar-header { padding: 1.25rem; border-bottom: 1px solid var(--q-color-border); }
25
+ .chat-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--q-color-border); }
26
26
  .chat-tab { flex: 1; padding: 0.5rem; background: transparent; border: none; border-radius: 0.5rem;
27
- color: var(--text-muted, #64748b); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
27
+ color: var(--q-text-muted, #64748b); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
28
28
  }
29
- .chat-tab.active { color: var(--color-starlight, #00d4ff); background: rgba(0, 212, 255, 0.1); }
29
+ .chat-tab.active { color: var(--q-color-starlight-blue, #00d4ff); background: var(--q-highlight-bg); }
30
30
  .conversation-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
31
31
  .conversation-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; border-radius: 0.75rem; cursor: pointer; margin-bottom: 0.25rem; }
32
- .conversation-item:hover { background: rgba(255, 255, 255, 0.03); }
33
- .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
32
+ .conversation-item:hover { background: var(--q-highlight-bg); }
33
+ .conversation-item.active { background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%); }
34
34
  .conversation-avatar { position: relative; flex-shrink: 0; }
35
35
  .conversation-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
36
36
  .conversation-info { flex: 1; min-width: 0; }
37
37
  .conversation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
38
- .conversation-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
39
- .conversation-time { font-size: 0.75rem; color: var(--text-muted, #64748b); }
40
- .conversation-message { font-size: 0.875rem; color: var(--text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
41
- .conversation-item.unread .conversation-message { color: var(--text-primary, #f1f5f9); font-weight: 500; }
38
+ .conversation-name { font-size: 0.9375rem; font-weight: 600; color: var(--q-text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
39
+ .conversation-time { font-size: 0.75rem; color: var(--q-text-muted, #64748b); }
40
+ .conversation-message { font-size: 0.875rem; color: var(--q-text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
41
+ .conversation-item.unread .conversation-message { color: var(--q-text-primary, #f1f5f9); font-weight: 500; }
42
42
  .chat-main { display: flex; flex-direction: column; overflow: hidden; }
43
- .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; flex-shrink: 0; }
43
+ .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid var(--q-color-border); background: color-mix(in srgb, var(--q-color-bg), white 1%); height: 5rem; flex-shrink: 0; }
44
44
  .chat-header-info { display: flex; align-items: center; gap: 0.875rem; }
45
45
  .chat-header-avatar { position: relative; }
46
46
  .chat-header-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
47
- .chat-header-details h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary, #f1f5f9); margin-bottom: 0.125rem; }
47
+ .chat-header-details h3 { font-size: 1rem; font-weight: 600; color: var(--q-text-primary, #f1f5f9); margin-bottom: 0.125rem; }
48
48
  .chat-header-details p { font-size: 0.8125rem; color: #10b981; }
49
49
  .messages-container { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
50
50
  .message-date { text-align: center; margin: 1rem 0; }
51
- .message-date span { font-size: 0.75rem; color: var(--text-muted, #64748b); background: rgba(255, 255, 255, 0.05); padding: 0.375rem 0.875rem; border-radius: 9999px; }
51
+ .message-date span { font-size: 0.75rem; color: var(--q-text-muted, #64748b); background: var(--q-color-bg-muted); padding: 0.375rem 0.875rem; border-radius: 9999px; }
52
52
  .message { display: flex; gap: 0.75rem; max-width: 70%; }
53
53
  .message.sent { align-self: flex-end; flex-direction: row-reverse; }
54
54
  .message-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
55
55
  .message-content { display: flex; flex-direction: column; gap: 0.25rem; }
56
56
  .message-bubble { padding: 0.875rem 1.125rem; border-radius: 1.125rem; font-size: 0.9375rem; line-height: 1.5; }
57
- .message.received .message-bubble { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, #f1f5f9); border-bottom-left-radius: 0.25rem; }
58
- .message.sent .message-bubble { background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); color: white; border-bottom-right-radius: 0.25rem; }
59
- .message-time { font-size: 0.75rem; color: var(--text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
57
+ .message.received .message-bubble { background: color-mix(in srgb, var(--q-color-bg), white 8%); color: var(--q-text-primary, #f1f5f9); border-bottom-left-radius: 0.25rem; }
58
+ .message.sent .message-bubble { background: var(--q-color-starlight-blue); color: #000; font-weight: 600; border-bottom-right-radius: 0.25rem; }
59
+ .message-time { font-size: 0.75rem; color: var(--q-text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
60
60
  .message.sent .message-time { align-self: flex-end; margin-left: 0; margin-right: 0.5rem; }
61
- .chat-input-container { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; }
62
- .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 0.5rem 0.75rem; width: 100%; }
63
- .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.625rem 0; outline: none; }
64
- .chat-input::placeholder { color: var(--text-muted, #64748b); }
65
- .send-btn { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0.125rem; }
66
- .theme-toggle-wrapper { padding: 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.06); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; }
67
- .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; color: var(--text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
68
- .theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
61
+ .chat-input-container { padding: 0 1.25rem; border-top: 1px solid var(--q-color-border); background: color-mix(in srgb, var(--q-color-bg), white 1%); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; }
62
+ .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: var(--q-input-bg); border: 1px solid var(--q-input-border); border-radius: 1.25rem; padding: 0.5rem 0.75rem; width: 100%; }
63
+ .chat-input { flex: 1; background: transparent; border: none; color: var(--q-text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.625rem 0; outline: none; }
64
+ .chat-input::placeholder { color: var(--q-text-muted, #64748b); }
65
+ .send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--q-gradient-primary); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-bottom: 0.125rem; }
66
+ .theme-toggle-wrapper { padding: 0 1.25rem; border-top: 1px solid var(--q-color-border); height: 5rem; min-height: 5rem; display: flex; align-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--q-color-bg), white 1%); box-sizing: border-box; }
67
+ .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--q-color-surface); border: 1px solid var(--q-color-border); border-radius: 0.75rem; color: var(--q-text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
68
+ .theme-btn:hover { background: var(--q-highlight-bg); }
69
69
  .theme-label { font-size: 0.875rem; font-weight: 500; }
70
70
  .sun-icon { display: none; }
71
71
  html[data-theme="light"] .sun-icon { display: inline; }
72
72
  html[data-theme="light"] .moon-icon { display: none; }
73
- html[data-theme="light"] { --bg-primary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; }
74
- html[data-theme="light"] .chat-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right-color: #e2e8f0; }
75
- html[data-theme="light"] .chat-header, html[data-theme="light"] .chat-input-container { background: #f8fafc; border-color: #e2e8f0; }
76
- html[data-theme="light"] .chat-input-wrapper { background: #f1f5f9; border-color: #e2e8f0; }
77
- html[data-theme="light"] .conversation-item:hover { background: #f8fafc; }
78
- html[data-theme="light"] .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
79
- html[data-theme="light"] .message.received .message-bubble { background: #f1f5f9; color: #0f172a; }
73
+ html[data-theme="light"] { --bg-primary: var(--q-light-bg); --text-primary: var(--q-light-text); --text-secondary: var(--q-light-text-muted); --text-muted: var(--q-light-text-muted); }
74
+ html[data-theme="light"] .message.received .message-bubble { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
75
+ html[data-theme="light"] .message.sent .message-bubble { background: var(--q-color-primary); color: #fff; }
80
76
  @media (max-width: 768px) { .chat-app { grid-template-columns: 1fr; } .chat-sidebar { display: none; } .message { max-width: 85%; } }
81
77
  </style>
82
78
  </head>
@@ -91,15 +87,15 @@
91
87
  </div>
92
88
  <div class="user-info">
93
89
  <div class="user-name">John Doe</div>
94
- <div class="user-email" style="color: var(--text-muted, #64748b); font-size: 0.8125rem;">Online</div>
90
+ <div class="user-email" style="color: var(--q-text-muted, #64748b); font-size: 0.8125rem;">Online</div>
95
91
  </div>
96
92
  </div>
97
93
  <div class="px-4 py-4 border-b border-white_5">
98
- <div class="starlight-search">
94
+ <div class="starlight-search has-icon">
99
95
  <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
100
96
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
101
97
  </svg>
102
- <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
98
+ <input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
103
99
  </div>
104
100
  </div>
105
101
  </div>
@@ -247,12 +243,5 @@
247
243
  </div>
248
244
  </div>
249
245
  </div>
250
- <script>
251
- document.addEventListener('DOMContentLoaded', () => {
252
- if (typeof Starlight !== 'undefined') {
253
- Starlight.initStars();
254
- }
255
- });
256
- </script>
257
246
  </body>
258
247
  </html>
package/examples/email-template.html CHANGED
@@ -440,11 +440,11 @@
440
440
  </div>
441
441
 
442
442
  <div class="px-4 py-3">
443
- <div class="starlight-search">
443
+ <div class="starlight-search has-icon">
444
444
  <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
445
445
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
446
446
  </svg>
447
- <input type="text" class="bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search emails...">
447
+ <input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search emails...">
448
448
  </div>
449
449
  </div>
450
450
 
package/examples/gaming-template.html CHANGED
@@ -8,14 +8,18 @@
8
8
  <style>
9
9
  body {
10
10
  background: radial-gradient(circle at top right, #1a1a3a, #0a0a1a 40%), #050505;
11
- color: #f1f5f9;
11
+ color: var(--q-text-primary);
12
12
  min-height: 100vh;
13
13
  transition: background-color 0.5s ease, color 0.5s ease;
14
14
  }
15
15
 
16
16
  html[data-theme="light"] {
17
- background: #f1f5f9;
18
- color: #1e293b;
17
+ background: var(--q-light-bg);
18
+ color: var(--q-light-text);
19
+ }
20
+
21
+ html[data-theme="light"] body {
22
+ background: var(--q-light-bg) !important;
19
23
  }
20
24
 
21
25
  .hero-section {
@@ -31,7 +35,7 @@
31
35
  }
32
36
 
33
37
  html[data-theme="light"] .hero-section {
34
- background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)),
38
+ background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95)),
35
39
  url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
36
40
  background-size: cover;
37
41
  background-position: center;
@@ -65,39 +69,166 @@
65
69
  }
66
70
 
67
71
  html[data-theme="light"] .glass {
68
- background: rgba(0, 0, 0, 0.03) !important;
69
- border-color: rgba(0, 0, 0, 0.1) !important;
70
- color: #1e293b !important;
72
+ background: var(--q-light-card-bg) !important;
73
+ border-color: var(--q-light-card-border) !important;
74
+ color: var(--q-light-text) !important;
71
75
  }
72
76
 
73
77
  html[data-theme="light"] .badge-secondary {
74
- background-color: rgba(0, 0, 0, 0.05);
75
- color: #475569;
76
- border-color: rgba(0, 0, 0, 0.1);
78
+ background-color: var(--q-glass-bg);
79
+ color: var(--q-light-text-muted);
80
+ border-color: var(--q-light-card-border);
77
81
  }
78
82
 
79
83
  html[data-theme="light"] .starlight-card p {
80
- color: #64748b;
84
+ color: var(--q-light-text-muted);
81
85
  }
82
86
 
83
87
  html[data-theme="light"] footer {
84
- background-color: #f1f5f9;
85
- border-top-color: #e2e8f0;
88
+ background-color: var(--q-light-bg);
89
+ border-top-color: var(--q-light-card-border);
86
90
  }
87
91
 
88
92
  html[data-theme="light"] footer .text-gradient-starlight {
89
93
  background: none;
90
- -webkit-text-fill-color: #1e293b;
91
- color: #1e293b;
94
+ -webkit-text-fill-color: var(--q-light-text);
95
+ color: var(--q-light-text);
92
96
  }
93
97
 
94
98
  html[data-theme="light"] footer p,
95
99
  html[data-theme="light"] footer a {
96
- color: #64748b;
100
+ color: var(--q-light-text-muted);
97
101
  }
98
102
 
99
103
  html[data-theme="light"] footer a:hover {
100
- color: #2563eb;
104
+ color: var(--q-color-primary);
105
+ }
106
+
107
+ html[data-theme="light"] .starlight-nav {
108
+ background: var(--q-light-card-bg) !important;
109
+ border-bottom-color: var(--q-light-card-border) !important;
110
+ }
111
+
112
+ html[data-theme="light"] .starlight-nav .text-gradient-starlight {
113
+ background: none;
114
+ -webkit-text-fill-color: var(--q-light-text);
115
+ color: var(--q-light-text);
116
+ }
117
+
118
+ html[data-theme="light"] .nav-link {
119
+ color: var(--q-light-text-muted) !important;
120
+ }
121
+
122
+ html[data-theme="light"] .nav-link:hover {
123
+ color: var(--q-color-primary) !important;
124
+ }
125
+
126
+ html[data-theme="light"] .hero-section h1 {
127
+ color: var(--q-light-text) !important;
128
+ }
129
+
130
+ html[data-theme="light"] .hero-section p {
131
+ color: var(--q-light-text-muted) !important;
132
+ }
133
+
134
+ html[data-theme="light"] .hero-section .badge-primary {
135
+ background-color: rgba(37, 99, 235, 0.1) !important;
136
+ color: var(--q-color-primary) !important;
137
+ }
138
+
139
+ html[data-theme="light"] .glass {
140
+ background: var(--q-light-card-bg) !important;
141
+ border-color: var(--q-light-card-border) !important;
142
+ color: var(--q-light-text) !important;
143
+ }
144
+
145
+ html[data-theme="light"] .glass.text-white {
146
+ color: var(--q-light-text) !important;
147
+ }
148
+
149
+ html[data-theme="light"] .starlight-card {
150
+ background: var(--q-light-card-bg) !important;
151
+ border-color: var(--q-light-card-border) !important;
152
+ }
153
+
154
+ html[data-theme="light"] .starlight-card h4 {
155
+ color: var(--q-light-text) !important;
156
+ }
157
+
158
+ html[data-theme="light"] .starlight-card p {
159
+ color: var(--q-light-text-muted) !important;
160
+ }
161
+
162
+ html[data-theme="light"] .text-gray-300 {
163
+ color: var(--q-light-text-muted) !important;
164
+ }
165
+
166
+ html[data-theme="light"] .text-gray-400 {
167
+ color: var(--q-light-text-muted) !important;
168
+ }
169
+
170
+ html[data-theme="light"] .text-gray-500 {
171
+ color: var(--q-light-text-muted) !important;
172
+ }
173
+
174
+ html[data-theme="light"] .text-gray-600 {
175
+ color: var(--q-light-text-muted) !important;
176
+ }
177
+
178
+ html[data-theme="light"] .bg-white {
179
+ background-color: var(--q-light-card-bg) !important;
180
+ color: var(--q-light-text) !important;
181
+ }
182
+
183
+ html[data-theme="light"] .text-black {
184
+ color: var(--q-light-text) !important;
185
+ }
186
+
187
+ html[data-theme="light"] .text-starlight {
188
+ color: var(--q-color-primary) !important;
189
+ }
190
+
191
+ html[data-theme="light"] .border-white_5 {
192
+ border-color: var(--q-light-card-border) !important;
193
+ }
194
+
195
+ html[data-theme="light"] .border-starlight {
196
+ border-color: var(--q-color-primary) !important;
197
+ }
198
+
199
+ html[data-theme="light"] .border-opacity-20 {
200
+ border-color: var(--q-light-card-border) !important;
201
+ }
202
+
203
+ html[data-theme="light"] a.text-starlight {
204
+ color: var(--q-color-primary) !important;
205
+ }
206
+
207
+ html[data-theme="light"] .accordion-starlight {
208
+ background: var(--q-light-card-bg) !important;
209
+ border-color: var(--q-light-card-border) !important;
210
+ }
211
+
212
+ html[data-theme="light"] .accordion-header {
213
+ color: var(--q-light-text) !important;
214
+ }
215
+
216
+ html[data-theme="light"] .accordion-content p {
217
+ color: var(--q-light-text-muted) !important;
218
+ }
219
+
220
+ html[data-theme="light"] input.glass {
221
+ background: var(--q-light-card-bg) !important;
222
+ color: var(--q-light-text) !important;
223
+ border-color: var(--q-light-card-border) !important;
224
+ }
225
+
226
+ html[data-theme="light"] input.glass::placeholder {
227
+ color: var(--q-light-text-muted) !important;
228
+ }
229
+
230
+ html[data-theme="light"] .bg-black {
231
+ background-color: var(--q-light-bg) !important;
101
232
  }
102
233
  </style>
103
234
  </head>
package/examples/gradient-test.html CHANGED
@@ -116,6 +116,11 @@
116
116
  </div>
117
117
 
118
118
  <script>
119
+ function toggleTheme() {
120
+ const body = document.body;
121
+ if (body.classList.contains('theme-blue-peach')) {
122
+ body.classList.replace('theme-blue-peach', 'theme-purple-via');
123
+ } else {
119
124
  body.classList.replace('theme-purple-via', 'theme-blue-peach');
120
125
  }
121
126
  }
package/examples/images/eric.png ADDED
Binary file