@howssatoshi/quantumcss 1.6.2 → 1.7.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.
- package/README.md +48 -11
- package/dist/quantum.min.css +6442 -1
- package/examples/gaming-template.html +3 -18
- package/examples/gradient-test.html +53 -0
- package/examples/index.html +13 -13
- package/examples/kitchen-sink.html +241 -9
- package/package.json +1 -1
- package/src/defaults.js +88 -31
- package/src/generator.js +98 -4
- package/src/starlight.js +19 -3
- package/src/styles/quantum-animations.css +2 -2
- package/src/styles/quantum-base.css +363 -362
- package/src/styles/quantum-components.css +127 -127
- package/src/styles/quantum-responsive.css +70 -70
- package/src/styles/starlight.css +76 -72
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
<h3 class="text-4xl font-bold tracking-tight">Frequently Asked Questions</h3>
|
|
239
239
|
</div>
|
|
240
240
|
|
|
241
|
-
<div class="max-w-144 mx-auto flex flex-col gap-4">
|
|
241
|
+
<div class="max-w-144 mx-auto flex flex-col gap-4" data-accordion>
|
|
242
242
|
<!-- Accordion 1 -->
|
|
243
243
|
<div class="accordion-item accordion-starlight active">
|
|
244
244
|
<div class="accordion-header">
|
|
@@ -333,23 +333,8 @@
|
|
|
333
333
|
|
|
334
334
|
<script src="../src/starlight.js"></script>
|
|
335
335
|
<script>
|
|
336
|
-
//
|
|
337
|
-
|
|
338
|
-
header.addEventListener('click', () => {
|
|
339
|
-
const item = header.parentElement;
|
|
340
|
-
const isActive = item.classList.contains('active');
|
|
341
|
-
|
|
342
|
-
// Close other items
|
|
343
|
-
document.querySelectorAll('.accordion-item').forEach(otherItem => {
|
|
344
|
-
otherItem.classList.remove('active');
|
|
345
|
-
});
|
|
346
|
-
|
|
347
|
-
// Toggle current item
|
|
348
|
-
if (!isActive) {
|
|
349
|
-
item.classList.add('active');
|
|
350
|
-
}
|
|
351
|
-
});
|
|
352
|
-
});
|
|
336
|
+
// Theme initialization and management is now handled
|
|
337
|
+
// automatically by Starlight.initTheme() in starlight.js
|
|
353
338
|
</script>
|
|
354
339
|
</body>
|
|
355
340
|
</html>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Gradient Test</title>
|
|
7
|
+
<link rel="stylesheet" href="../scripts/quantum.min.css">
|
|
8
|
+
<style>
|
|
9
|
+
.test-box {
|
|
10
|
+
width: 200px;
|
|
11
|
+
height: 100px;
|
|
12
|
+
margin: 20px;
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
color: white;
|
|
17
|
+
font-weight: bold;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body class="bg-starlight-deep p-10">
|
|
22
|
+
<div class="bg-gradient-to-r from-starlight-blue to-starlight-peach test-box">
|
|
23
|
+
Gradient Blue-Peach
|
|
24
|
+
</div>
|
|
25
|
+
<div class="bg-gradient-to-br from-blue-500 via-purple-500 to-red-500 test-box">
|
|
26
|
+
Via Purple
|
|
27
|
+
</div>
|
|
28
|
+
<div class="text-transparent bg-clip-text bg-gradient-to-r from-starlight-orange to-starlight-peach text-4xl font-bold">
|
|
29
|
+
Gradient Text
|
|
30
|
+
</div>
|
|
31
|
+
<div class="bg-starlight-blue/20 border border-starlight-blue p-4 rounded-lg">
|
|
32
|
+
Opacity Background
|
|
33
|
+
</div>
|
|
34
|
+
<div class="border-4 border-red-500/50 p-4 mt-4">
|
|
35
|
+
Opacity Border
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="mt-10 relative bg-slate-800 rounded-xl overflow-hidden" style="width: 300px; height: 200px;">
|
|
39
|
+
<svg class="svg-fluid opacity-20" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
40
|
+
<rect x="0" y="0" width="100" height="100" fill="url(#grad)" />
|
|
41
|
+
<defs>
|
|
42
|
+
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
43
|
+
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
|
|
44
|
+
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
|
|
45
|
+
</linearGradient>
|
|
46
|
+
</defs>
|
|
47
|
+
</svg>
|
|
48
|
+
<div class="overlay-base text-white text-xl font-bold">Centered Overlay</div>
|
|
49
|
+
<div class="overlay-top-left p-2 bg-black/50 text-xs">Top Left</div>
|
|
50
|
+
<div class="overlay-bottom-right p-2 bg-black/50 text-xs">Bottom Right</div>
|
|
51
|
+
</div>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
package/examples/index.html
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
|
|
62
62
|
<header class="hero container">
|
|
63
63
|
<div class="pt-8 pb-12 text-center">
|
|
64
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.
|
|
64
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.0</span>
|
|
65
65
|
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
66
66
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
67
67
|
A standardized, high-performance UI library.
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
<section class="container py-12">
|
|
79
79
|
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
80
80
|
<div class="grid-3">
|
|
81
|
-
<a href="blog-template.html" class="starlight-card
|
|
81
|
+
<a href="blog-template.html" class="starlight-card">
|
|
82
82
|
<div class="h-40 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
83
83
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
84
84
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
<p class="text-sm text-slate-400">Modern blogging platform with dark mode support</p>
|
|
89
89
|
</a>
|
|
90
90
|
|
|
91
|
-
<a href="email-template.html" class="starlight-card
|
|
91
|
+
<a href="email-template.html" class="starlight-card">
|
|
92
92
|
<div class="h-40 bg-gradient-to-br from-starlight/20 to-blue-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
93
93
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
94
94
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
<p class="text-sm text-slate-400">Full-featured email interface with sidebar navigation</p>
|
|
99
99
|
</a>
|
|
100
100
|
|
|
101
|
-
<a href="gaming-template.html" class="starlight-card
|
|
101
|
+
<a href="gaming-template.html" class="starlight-card">
|
|
102
102
|
<div class="h-40 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
103
103
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
104
104
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
<p class="text-sm text-slate-400">Immersive gaming experience with cosmic aesthetics</p>
|
|
110
110
|
</a>
|
|
111
111
|
|
|
112
|
-
<a href="news-template.html" class="starlight-card
|
|
112
|
+
<a href="news-template.html" class="starlight-card">
|
|
113
113
|
<div class="h-40 bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
114
114
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
115
115
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
<p class="text-sm text-slate-400">Professional news platform with grid layouts</p>
|
|
120
120
|
</a>
|
|
121
121
|
|
|
122
|
-
<a href="shopping/index.html" class="starlight-card
|
|
122
|
+
<a href="shopping/index.html" class="starlight-card">
|
|
123
123
|
<div class="h-40 bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
124
124
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
125
125
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
<p class="text-sm text-slate-400">E-commerce template with product grids</p>
|
|
130
130
|
</a>
|
|
131
131
|
|
|
132
|
-
<a href="travel/index.html" class="starlight-card
|
|
132
|
+
<a href="travel/index.html" class="starlight-card">
|
|
133
133
|
<div class="h-40 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
134
134
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
135
135
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
<p class="text-sm text-slate-400">Adventure booking platform with destinations</p>
|
|
140
140
|
</a>
|
|
141
141
|
|
|
142
|
-
<a href="analytics-dashboard.html" class="starlight-card
|
|
142
|
+
<a href="analytics-dashboard.html" class="starlight-card">
|
|
143
143
|
<div class="h-40 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
144
144
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
145
145
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
<p class="text-sm text-slate-400">Data visualization with charts and real-time metrics</p>
|
|
150
150
|
</a>
|
|
151
151
|
|
|
152
|
-
<a href="admin-panel.html" class="starlight-card
|
|
152
|
+
<a href="admin-panel.html" class="starlight-card">
|
|
153
153
|
<div class="h-40 bg-gradient-to-br from-rose-500/20 to-orange-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
154
154
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
155
155
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
<p class="text-sm text-slate-400">User management, data tables, and system settings</p>
|
|
160
160
|
</a>
|
|
161
161
|
|
|
162
|
-
<a href="music-streaming.html" class="starlight-card
|
|
162
|
+
<a href="music-streaming.html" class="starlight-card">
|
|
163
163
|
<div class="h-40 bg-gradient-to-br from-pink-500/20 to-rose-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
164
164
|
<svg class="w-16 h-16 text-starlight" fill="currentColor" viewBox="0 0 24 24">
|
|
165
165
|
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
<p class="text-sm text-slate-400">Spotify-style music player with playlists and controls</p>
|
|
170
170
|
</a>
|
|
171
171
|
|
|
172
|
-
<a href="chat-messaging.html" class="starlight-card
|
|
172
|
+
<a href="chat-messaging.html" class="starlight-card">
|
|
173
173
|
<div class="h-40 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
174
174
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
175
175
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
<p class="text-sm text-slate-400">Modern messaging app with real-time conversation UI</p>
|
|
180
180
|
</a>
|
|
181
181
|
|
|
182
|
-
<a href="portfolio-resume.html" class="starlight-card
|
|
182
|
+
<a href="portfolio-resume.html" class="starlight-card">
|
|
183
183
|
<div class="h-40 bg-gradient-to-br from-violet-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
184
184
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
185
185
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
<p class="text-sm text-slate-400">Professional portfolio with skills, projects, and experience</p>
|
|
190
190
|
</a>
|
|
191
191
|
|
|
192
|
-
<a href="video-streaming.html" class="starlight-card
|
|
192
|
+
<a href="video-streaming.html" class="starlight-card">
|
|
193
193
|
<div class="h-40 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
194
194
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
195
195
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<style>
|
|
10
10
|
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
|
11
11
|
.swatch { height: 4rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(0,0,0,0.1); }
|
|
12
|
-
.spacing-bar { height: 1rem; background: var(--color-starlight-blue, #3b82f6); border-radius: 0.25rem; }
|
|
12
|
+
.spacing-bar { height: 1rem; background: var(--q-color-starlight-blue, #3b82f6); border-radius: 0.25rem; }
|
|
13
13
|
section { margin-bottom: 4rem; }
|
|
14
14
|
h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
|
|
15
15
|
body.light-mode h2 { border-bottom-color: rgba(0,0,0,0.1); }
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
.ani-card { background: #0f172a; color: white; transition: all 0.3s; }
|
|
19
19
|
body.light-mode .ani-card { background: #f1f5f9; color: #0f172a; }
|
|
20
20
|
.ani-orbit-star { background-color: white; }
|
|
21
|
-
body.light-mode .ani-orbit-star { background-color: var(--color-starlight-blue, #2563eb); }
|
|
21
|
+
body.light-mode .ani-orbit-star { background-color: var(--q-color-starlight-blue, #2563eb); }
|
|
22
22
|
.theme-toggle {
|
|
23
23
|
position: fixed; top: 2rem; right: 2rem; z-index: 100; cursor: pointer;
|
|
24
24
|
width: 3rem; height: 3rem; border-radius: 50%;
|
|
@@ -200,11 +200,226 @@
|
|
|
200
200
|
<div class="token-name">green-500</div>
|
|
201
201
|
<div class="token-value">#10b981</div>
|
|
202
202
|
</div>
|
|
203
|
+
<div>
|
|
204
|
+
<div class="swatch" style="background-color: #faf5ff;"></div>
|
|
205
|
+
<div class="token-name">purple-50</div>
|
|
206
|
+
<div class="token-value">#faf5ff</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div>
|
|
209
|
+
<div class="swatch" style="background-color: #f3e8ff;"></div>
|
|
210
|
+
<div class="token-name">purple-100</div>
|
|
211
|
+
<div class="token-value">#f3e8ff</div>
|
|
212
|
+
</div>
|
|
213
|
+
<div>
|
|
214
|
+
<div class="swatch" style="background-color: #e9d5ff;"></div>
|
|
215
|
+
<div class="token-name">purple-200</div>
|
|
216
|
+
<div class="token-value">#e9d5ff</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div>
|
|
219
|
+
<div class="swatch" style="background-color: #d8b4fe;"></div>
|
|
220
|
+
<div class="token-name">purple-300</div>
|
|
221
|
+
<div class="token-value">#d8b4fe</div>
|
|
222
|
+
</div>
|
|
223
|
+
<div>
|
|
224
|
+
<div class="swatch" style="background-color: #c084fc;"></div>
|
|
225
|
+
<div class="token-name">purple-400</div>
|
|
226
|
+
<div class="token-value">#c084fc</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div>
|
|
229
|
+
<div class="swatch" style="background-color: #a855f7;"></div>
|
|
230
|
+
<div class="token-name">purple-500</div>
|
|
231
|
+
<div class="token-value">#a855f7</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div>
|
|
234
|
+
<div class="swatch" style="background-color: #9333ea;"></div>
|
|
235
|
+
<div class="token-name">purple-600</div>
|
|
236
|
+
<div class="token-value">#9333ea</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div>
|
|
239
|
+
<div class="swatch" style="background-color: #7e22ce;"></div>
|
|
240
|
+
<div class="token-name">purple-700</div>
|
|
241
|
+
<div class="token-value">#7e22ce</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div>
|
|
244
|
+
<div class="swatch" style="background-color: #fefce8;"></div>
|
|
245
|
+
<div class="token-name">yellow-50</div>
|
|
246
|
+
<div class="token-value">#fefce8</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div>
|
|
249
|
+
<div class="swatch" style="background-color: #fef9c3;"></div>
|
|
250
|
+
<div class="token-name">yellow-100</div>
|
|
251
|
+
<div class="token-value">#fef9c3</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div>
|
|
254
|
+
<div class="swatch" style="background-color: #fef08a;"></div>
|
|
255
|
+
<div class="token-name">yellow-200</div>
|
|
256
|
+
<div class="token-value">#fef08a</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div>
|
|
259
|
+
<div class="swatch" style="background-color: #fde047;"></div>
|
|
260
|
+
<div class="token-name">yellow-300</div>
|
|
261
|
+
<div class="token-value">#fde047</div>
|
|
262
|
+
</div>
|
|
263
|
+
<div>
|
|
264
|
+
<div class="swatch" style="background-color: #facc15;"></div>
|
|
265
|
+
<div class="token-name">yellow-400</div>
|
|
266
|
+
<div class="token-value">#facc15</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div>
|
|
269
|
+
<div class="swatch" style="background-color: #eab308;"></div>
|
|
270
|
+
<div class="token-name">yellow-500</div>
|
|
271
|
+
<div class="token-value">#eab308</div>
|
|
272
|
+
</div>
|
|
273
|
+
<div>
|
|
274
|
+
<div class="swatch" style="background-color: #ca8a04;"></div>
|
|
275
|
+
<div class="token-name">yellow-600</div>
|
|
276
|
+
<div class="token-value">#ca8a04</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div>
|
|
279
|
+
<div class="swatch" style="background-color: #a16207;"></div>
|
|
280
|
+
<div class="token-name">yellow-700</div>
|
|
281
|
+
<div class="token-value">#a16207</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div>
|
|
284
|
+
<div class="swatch" style="background-color: #fdf2f8;"></div>
|
|
285
|
+
<div class="token-name">pink-50</div>
|
|
286
|
+
<div class="token-value">#fdf2f8</div>
|
|
287
|
+
</div>
|
|
288
|
+
<div>
|
|
289
|
+
<div class="swatch" style="background-color: #fce7f3;"></div>
|
|
290
|
+
<div class="token-name">pink-100</div>
|
|
291
|
+
<div class="token-value">#fce7f3</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div>
|
|
294
|
+
<div class="swatch" style="background-color: #fbcfe8;"></div>
|
|
295
|
+
<div class="token-name">pink-200</div>
|
|
296
|
+
<div class="token-value">#fbcfe8</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div>
|
|
299
|
+
<div class="swatch" style="background-color: #f9a8d4;"></div>
|
|
300
|
+
<div class="token-name">pink-300</div>
|
|
301
|
+
<div class="token-value">#f9a8d4</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div>
|
|
304
|
+
<div class="swatch" style="background-color: #f472b6;"></div>
|
|
305
|
+
<div class="token-name">pink-400</div>
|
|
306
|
+
<div class="token-value">#f472b6</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div>
|
|
309
|
+
<div class="swatch" style="background-color: #ec4899;"></div>
|
|
310
|
+
<div class="token-name">pink-500</div>
|
|
311
|
+
<div class="token-value">#ec4899</div>
|
|
312
|
+
</div>
|
|
313
|
+
<div>
|
|
314
|
+
<div class="swatch" style="background-color: #db2777;"></div>
|
|
315
|
+
<div class="token-name">pink-600</div>
|
|
316
|
+
<div class="token-value">#db2777</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div>
|
|
319
|
+
<div class="swatch" style="background-color: #be185d;"></div>
|
|
320
|
+
<div class="token-name">pink-700</div>
|
|
321
|
+
<div class="token-value">#be185d</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div>
|
|
324
|
+
<div class="swatch" style="background-color: #ecfeff;"></div>
|
|
325
|
+
<div class="token-name">cyan-50</div>
|
|
326
|
+
<div class="token-value">#ecfeff</div>
|
|
327
|
+
</div>
|
|
328
|
+
<div>
|
|
329
|
+
<div class="swatch" style="background-color: #cffafe;"></div>
|
|
330
|
+
<div class="token-name">cyan-100</div>
|
|
331
|
+
<div class="token-value">#cffafe</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<div class="swatch" style="background-color: #a5f3fc;"></div>
|
|
335
|
+
<div class="token-name">cyan-200</div>
|
|
336
|
+
<div class="token-value">#a5f3fc</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div>
|
|
339
|
+
<div class="swatch" style="background-color: #67e8f9;"></div>
|
|
340
|
+
<div class="token-name">cyan-300</div>
|
|
341
|
+
<div class="token-value">#67e8f9</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div>
|
|
344
|
+
<div class="swatch" style="background-color: #22d3ee;"></div>
|
|
345
|
+
<div class="token-name">cyan-400</div>
|
|
346
|
+
<div class="token-value">#22d3ee</div>
|
|
347
|
+
</div>
|
|
348
|
+
<div>
|
|
349
|
+
<div class="swatch" style="background-color: #06b6d4;"></div>
|
|
350
|
+
<div class="token-name">cyan-500</div>
|
|
351
|
+
<div class="token-value">#06b6d4</div>
|
|
352
|
+
</div>
|
|
353
|
+
<div>
|
|
354
|
+
<div class="swatch" style="background-color: #0891b2;"></div>
|
|
355
|
+
<div class="token-name">cyan-600</div>
|
|
356
|
+
<div class="token-value">#0891b2</div>
|
|
357
|
+
</div>
|
|
358
|
+
<div>
|
|
359
|
+
<div class="swatch" style="background-color: #0e7490;"></div>
|
|
360
|
+
<div class="token-name">cyan-700</div>
|
|
361
|
+
<div class="token-value">#0e7490</div>
|
|
362
|
+
</div>
|
|
363
|
+
<div>
|
|
364
|
+
<div class="swatch" style="background-color: #eef2ff;"></div>
|
|
365
|
+
<div class="token-name">indigo-50</div>
|
|
366
|
+
<div class="token-value">#eef2ff</div>
|
|
367
|
+
</div>
|
|
368
|
+
<div>
|
|
369
|
+
<div class="swatch" style="background-color: #e0e7ff;"></div>
|
|
370
|
+
<div class="token-name">indigo-100</div>
|
|
371
|
+
<div class="token-value">#e0e7ff</div>
|
|
372
|
+
</div>
|
|
373
|
+
<div>
|
|
374
|
+
<div class="swatch" style="background-color: #c7d2fe;"></div>
|
|
375
|
+
<div class="token-name">indigo-200</div>
|
|
376
|
+
<div class="token-value">#c7d2fe</div>
|
|
377
|
+
</div>
|
|
378
|
+
<div>
|
|
379
|
+
<div class="swatch" style="background-color: #a5b4fc;"></div>
|
|
380
|
+
<div class="token-name">indigo-300</div>
|
|
381
|
+
<div class="token-value">#a5b4fc</div>
|
|
382
|
+
</div>
|
|
383
|
+
<div>
|
|
384
|
+
<div class="swatch" style="background-color: #818cf8;"></div>
|
|
385
|
+
<div class="token-name">indigo-400</div>
|
|
386
|
+
<div class="token-value">#818cf8</div>
|
|
387
|
+
</div>
|
|
388
|
+
<div>
|
|
389
|
+
<div class="swatch" style="background-color: #6366f1;"></div>
|
|
390
|
+
<div class="token-name">indigo-500</div>
|
|
391
|
+
<div class="token-value">#6366f1</div>
|
|
392
|
+
</div>
|
|
393
|
+
<div>
|
|
394
|
+
<div class="swatch" style="background-color: #4f46e5;"></div>
|
|
395
|
+
<div class="token-name">indigo-600</div>
|
|
396
|
+
<div class="token-value">#4f46e5</div>
|
|
397
|
+
</div>
|
|
398
|
+
<div>
|
|
399
|
+
<div class="swatch" style="background-color: #4338ca;"></div>
|
|
400
|
+
<div class="token-name">indigo-700</div>
|
|
401
|
+
<div class="token-value">#4338ca</div>
|
|
402
|
+
</div>
|
|
203
403
|
<div>
|
|
204
404
|
<div class="swatch" style="background-color: #00d4ff;"></div>
|
|
205
|
-
<div class="token-name">starlight</div>
|
|
405
|
+
<div class="token-name">starlight-blue</div>
|
|
206
406
|
<div class="token-value">#00d4ff</div>
|
|
207
407
|
</div>
|
|
408
|
+
<div>
|
|
409
|
+
<div class="swatch" style="background-color: #ffb38a;"></div>
|
|
410
|
+
<div class="token-name">starlight-peach</div>
|
|
411
|
+
<div class="token-value">#ffb38a</div>
|
|
412
|
+
</div>
|
|
413
|
+
<div>
|
|
414
|
+
<div class="swatch" style="background-color: #ff7e5f;"></div>
|
|
415
|
+
<div class="token-name">starlight-orange</div>
|
|
416
|
+
<div class="token-value">#ff7e5f</div>
|
|
417
|
+
</div>
|
|
418
|
+
<div>
|
|
419
|
+
<div class="swatch" style="background-color: #08081a;"></div>
|
|
420
|
+
<div class="token-name">starlight-deep</div>
|
|
421
|
+
<div class="token-value">#08081a</div>
|
|
422
|
+
</div>
|
|
208
423
|
<div>
|
|
209
424
|
<div class="swatch" style="background-color: transparent;"></div>
|
|
210
425
|
<div class="token-name">transparent</div>
|
|
@@ -335,6 +550,11 @@
|
|
|
335
550
|
<div class="token-name">muted</div>
|
|
336
551
|
<div class="token-value">var(--text-muted)</div>
|
|
337
552
|
</div>
|
|
553
|
+
<div>
|
|
554
|
+
<div class="swatch" style="background-color: #00d4ff;"></div>
|
|
555
|
+
<div class="token-name">starlight-blue</div>
|
|
556
|
+
<div class="token-value">#00d4ff</div>
|
|
557
|
+
</div>
|
|
338
558
|
<div>
|
|
339
559
|
<div class="swatch" style="background-color: #ffb38a;"></div>
|
|
340
560
|
<div class="token-name">starlight-peach</div>
|
|
@@ -625,7 +845,7 @@
|
|
|
625
845
|
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
626
846
|
<button class="btn-primary">Preset Button</button>
|
|
627
847
|
</div>
|
|
628
|
-
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-starlight px-6 py-2
|
|
848
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95</div>
|
|
629
849
|
</div>
|
|
630
850
|
|
|
631
851
|
<div class="starlight-card p-6">
|
|
@@ -636,7 +856,7 @@
|
|
|
636
856
|
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
637
857
|
<button class="btn-secondary">Preset Button</button>
|
|
638
858
|
</div>
|
|
639
|
-
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">
|
|
859
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-base theme-glass px-6 py-2 shadow-md hover:bg-white/10 active:scale-95</div>
|
|
640
860
|
</div>
|
|
641
861
|
|
|
642
862
|
<div class="starlight-card p-6">
|
|
@@ -647,7 +867,7 @@
|
|
|
647
867
|
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
648
868
|
<div class="card-premium"><h4 class="font-bold">Preset Card</h4><p class="text-sm opacity-70">Using card-premium</p></div>
|
|
649
869
|
</div>
|
|
650
|
-
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">
|
|
870
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">card-base theme-glass p-8 shadow-xl</div>
|
|
651
871
|
</div>
|
|
652
872
|
|
|
653
873
|
</div>
|
|
@@ -658,6 +878,18 @@
|
|
|
658
878
|
<section>
|
|
659
879
|
<h2>Component Utilities</h2>
|
|
660
880
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
881
|
+
<div class="starlight-card p-6">
|
|
882
|
+
<div class="mb-4 token-name">btn-base</div>
|
|
883
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
884
|
+
<button class="btn-base">Button Example</button>
|
|
885
|
+
</div>
|
|
886
|
+
</div>
|
|
887
|
+
<div class="starlight-card p-6">
|
|
888
|
+
<div class="mb-4 token-name">input-base</div>
|
|
889
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
890
|
+
<input class="input-base" placeholder="Input Example">
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
661
893
|
<div class="starlight-card p-6">
|
|
662
894
|
<div class="mb-4 token-name">glass</div>
|
|
663
895
|
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
@@ -882,7 +1114,7 @@
|
|
|
882
1114
|
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
|
|
883
1115
|
<div class="p-8">
|
|
884
1116
|
<!-- Inline Preview -->
|
|
885
|
-
<div class="
|
|
1117
|
+
<div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white/10" style="max-width: 500px;">
|
|
886
1118
|
<h3 class="text-xl font-bold mb-4 text-gradient-starlight">System Preview</h3>
|
|
887
1119
|
<p class="mb-6 opacity-70 text-sm">This is an inline preview of the dialog component. It scales to fit its container.</p>
|
|
888
1120
|
<div class="flex gap-4">
|
|
@@ -901,7 +1133,7 @@
|
|
|
901
1133
|
<div class="starlight-card p-0 overflow-hidden">
|
|
902
1134
|
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion-starlight)</div>
|
|
903
1135
|
<div class="p-8">
|
|
904
|
-
<div class="
|
|
1136
|
+
<div class="max-w-2xl mx-auto" data-accordion>
|
|
905
1137
|
<div class="accordion-item accordion-starlight active">
|
|
906
1138
|
<div class="accordion-header">
|
|
907
1139
|
<span>Cosmic Manifestation</span>
|
|
@@ -962,7 +1194,7 @@
|
|
|
962
1194
|
</section>
|
|
963
1195
|
|
|
964
1196
|
<footer class="mt-20 pt-8 border-t border-white/10 opacity-50 text-sm">
|
|
965
|
-
Generated by Quantum CSS Dynamic Docs ·
|
|
1197
|
+
Generated by Quantum CSS Dynamic Docs · 3/1/2026
|
|
966
1198
|
</footer>
|
|
967
1199
|
</div>
|
|
968
1200
|
|