@howssatoshi/quantumcss 1.4.2 → 1.5.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 +8 -7
- package/dist/quantum.min.css +1 -4678
- package/examples/blog-template.html +268 -0
- package/examples/gaming-template.html +355 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +138 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +320 -0
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +330 -0
- package/examples/starlight.html +161 -0
- package/examples/theme-test.html +174 -0
- package/examples/travel/index.html +254 -0
- package/examples/verify_fixes.html +52 -0
- package/examples/verify_presets.html +32 -0
- package/package.json +8 -1
- package/src/generator.js +19 -8
- package/src/starlight.js +406 -15
- package/src/styles/quantum-animations.css +3 -2
- package/src/styles/quantum-base.css +295 -91
- package/src/styles/quantum-components.css +47 -47
- package/src/styles/quantum-responsive.css +5 -4
- package/src/styles/starlight.css +184 -184
|
@@ -0,0 +1,1012 @@
|
|
|
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>Quantum CSS - Kitchen Sink</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
|
|
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; }
|
|
13
|
+
section { margin-bottom: 4rem; }
|
|
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
|
+
body.light-mode h2 { border-bottom-color: rgba(0,0,0,0.1); }
|
|
16
|
+
.token-name { font-family: monospace; font-size: 0.875rem; opacity: 0.7; }
|
|
17
|
+
.token-value { font-size: 0.75rem; opacity: 0.5; }
|
|
18
|
+
.ani-card { background: #0f172a; color: white; transition: all 0.3s; }
|
|
19
|
+
body.light-mode .ani-card { background: #f1f5f9; color: #0f172a; }
|
|
20
|
+
.ani-orbit-star { background-color: white; }
|
|
21
|
+
body.light-mode .ani-orbit-star { background-color: var(--color-starlight-blue, #2563eb); }
|
|
22
|
+
.theme-toggle {
|
|
23
|
+
position: fixed; top: 2rem; right: 2rem; z-index: 100; cursor: pointer;
|
|
24
|
+
width: 3rem; height: 3rem; border-radius: 50%;
|
|
25
|
+
display: flex; align-items: center; justify-content: center;
|
|
26
|
+
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
|
27
|
+
color: white; transition: all 0.3s ease; backdrop-filter: blur(10px);
|
|
28
|
+
}
|
|
29
|
+
.theme-toggle:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
|
|
30
|
+
body.light-mode .theme-toggle { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
31
|
+
body.light-mode .theme-toggle:hover { background: #f8fafc; }
|
|
32
|
+
.sun-icon { display: none; }
|
|
33
|
+
body.light-mode .sun-icon { display: block; }
|
|
34
|
+
body.light-mode .moon-icon { display: none; }
|
|
35
|
+
</style>
|
|
36
|
+
</head>
|
|
37
|
+
<body class="p-8">
|
|
38
|
+
<button class="theme-toggle" onclick="document.body.classList.toggle('light-mode')" title="Toggle Theme">
|
|
39
|
+
<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>
|
|
40
|
+
<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>
|
|
41
|
+
</button>
|
|
42
|
+
|
|
43
|
+
<div class="max-w-6xl mx-auto">
|
|
44
|
+
<header class="mb-12">
|
|
45
|
+
<h1 class="text-5xl font-bold tracking-tight mb-2">Kitchen Sink</h1>
|
|
46
|
+
<p class="text-xl opacity-70">Dynamic documentation of all design tokens and components.</p>
|
|
47
|
+
</header>
|
|
48
|
+
|
|
49
|
+
<!-- Colors Section -->
|
|
50
|
+
<section>
|
|
51
|
+
<h2>Colors</h2>
|
|
52
|
+
<div class="token-grid">
|
|
53
|
+
<div>
|
|
54
|
+
<div class="swatch" style="background-color: #ffffff;"></div>
|
|
55
|
+
<div class="token-name">white</div>
|
|
56
|
+
<div class="token-value">#ffffff</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div>
|
|
59
|
+
<div class="swatch" style="background-color: #000000;"></div>
|
|
60
|
+
<div class="token-name">black</div>
|
|
61
|
+
<div class="token-value">#000000</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div>
|
|
64
|
+
<div class="swatch" style="background-color: #f8fafc;"></div>
|
|
65
|
+
<div class="token-name">slate-50</div>
|
|
66
|
+
<div class="token-value">#f8fafc</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div>
|
|
69
|
+
<div class="swatch" style="background-color: #f1f5f9;"></div>
|
|
70
|
+
<div class="token-name">slate-100</div>
|
|
71
|
+
<div class="token-value">#f1f5f9</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div>
|
|
74
|
+
<div class="swatch" style="background-color: #e2e8f0;"></div>
|
|
75
|
+
<div class="token-name">slate-200</div>
|
|
76
|
+
<div class="token-value">#e2e8f0</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div>
|
|
79
|
+
<div class="swatch" style="background-color: #cbd5e1;"></div>
|
|
80
|
+
<div class="token-name">slate-300</div>
|
|
81
|
+
<div class="token-value">#cbd5e1</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div>
|
|
84
|
+
<div class="swatch" style="background-color: #94a3b8;"></div>
|
|
85
|
+
<div class="token-name">slate-400</div>
|
|
86
|
+
<div class="token-value">#94a3b8</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
<div class="swatch" style="background-color: #64748b;"></div>
|
|
90
|
+
<div class="token-name">slate-500</div>
|
|
91
|
+
<div class="token-value">#64748b</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div>
|
|
94
|
+
<div class="swatch" style="background-color: #475569;"></div>
|
|
95
|
+
<div class="token-name">slate-600</div>
|
|
96
|
+
<div class="token-value">#475569</div>
|
|
97
|
+
</div>
|
|
98
|
+
<div>
|
|
99
|
+
<div class="swatch" style="background-color: #334155;"></div>
|
|
100
|
+
<div class="token-name">slate-700</div>
|
|
101
|
+
<div class="token-value">#334155</div>
|
|
102
|
+
</div>
|
|
103
|
+
<div>
|
|
104
|
+
<div class="swatch" style="background-color: #1e293b;"></div>
|
|
105
|
+
<div class="token-name">slate-800</div>
|
|
106
|
+
<div class="token-value">#1e293b</div>
|
|
107
|
+
</div>
|
|
108
|
+
<div>
|
|
109
|
+
<div class="swatch" style="background-color: #0f172a;"></div>
|
|
110
|
+
<div class="token-name">slate-900</div>
|
|
111
|
+
<div class="token-value">#0f172a</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
<div class="swatch" style="background-color: #020617;"></div>
|
|
115
|
+
<div class="token-name">slate-950</div>
|
|
116
|
+
<div class="token-value">#020617</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div>
|
|
119
|
+
<div class="swatch" style="background-color: #eff6ff;"></div>
|
|
120
|
+
<div class="token-name">blue-50</div>
|
|
121
|
+
<div class="token-value">#eff6ff</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
<div class="swatch" style="background-color: #dbeafe;"></div>
|
|
125
|
+
<div class="token-name">blue-100</div>
|
|
126
|
+
<div class="token-value">#dbeafe</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div>
|
|
129
|
+
<div class="swatch" style="background-color: #bfdbfe;"></div>
|
|
130
|
+
<div class="token-name">blue-200</div>
|
|
131
|
+
<div class="token-value">#bfdbfe</div>
|
|
132
|
+
</div>
|
|
133
|
+
<div>
|
|
134
|
+
<div class="swatch" style="background-color: #93c5fd;"></div>
|
|
135
|
+
<div class="token-name">blue-300</div>
|
|
136
|
+
<div class="token-value">#93c5fd</div>
|
|
137
|
+
</div>
|
|
138
|
+
<div>
|
|
139
|
+
<div class="swatch" style="background-color: #60a5fa;"></div>
|
|
140
|
+
<div class="token-name">blue-400</div>
|
|
141
|
+
<div class="token-value">#60a5fa</div>
|
|
142
|
+
</div>
|
|
143
|
+
<div>
|
|
144
|
+
<div class="swatch" style="background-color: #3b82f6;"></div>
|
|
145
|
+
<div class="token-name">blue-500</div>
|
|
146
|
+
<div class="token-value">#3b82f6</div>
|
|
147
|
+
</div>
|
|
148
|
+
<div>
|
|
149
|
+
<div class="swatch" style="background-color: #2563eb;"></div>
|
|
150
|
+
<div class="token-name">blue-600</div>
|
|
151
|
+
<div class="token-value">#2563eb</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div>
|
|
154
|
+
<div class="swatch" style="background-color: #fff7ed;"></div>
|
|
155
|
+
<div class="token-name">orange-50</div>
|
|
156
|
+
<div class="token-value">#fff7ed</div>
|
|
157
|
+
</div>
|
|
158
|
+
<div>
|
|
159
|
+
<div class="swatch" style="background-color: #ffedd5;"></div>
|
|
160
|
+
<div class="token-name">orange-100</div>
|
|
161
|
+
<div class="token-value">#ffedd5</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div>
|
|
164
|
+
<div class="swatch" style="background-color: #fed7aa;"></div>
|
|
165
|
+
<div class="token-name">orange-200</div>
|
|
166
|
+
<div class="token-value">#fed7aa</div>
|
|
167
|
+
</div>
|
|
168
|
+
<div>
|
|
169
|
+
<div class="swatch" style="background-color: #fdba74;"></div>
|
|
170
|
+
<div class="token-name">orange-300</div>
|
|
171
|
+
<div class="token-value">#fdba74</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div>
|
|
174
|
+
<div class="swatch" style="background-color: #fb923c;"></div>
|
|
175
|
+
<div class="token-name">orange-400</div>
|
|
176
|
+
<div class="token-value">#fb923c</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div>
|
|
179
|
+
<div class="swatch" style="background-color: #f97316;"></div>
|
|
180
|
+
<div class="token-name">orange-500</div>
|
|
181
|
+
<div class="token-value">#f97316</div>
|
|
182
|
+
</div>
|
|
183
|
+
<div>
|
|
184
|
+
<div class="swatch" style="background-color: #ea580c;"></div>
|
|
185
|
+
<div class="token-name">orange-600</div>
|
|
186
|
+
<div class="token-value">#ea580c</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div>
|
|
189
|
+
<div class="swatch" style="background-color: #ef4444;"></div>
|
|
190
|
+
<div class="token-name">red-500</div>
|
|
191
|
+
<div class="token-value">#ef4444</div>
|
|
192
|
+
</div>
|
|
193
|
+
<div>
|
|
194
|
+
<div class="swatch" style="background-color: #d1fae5;"></div>
|
|
195
|
+
<div class="token-name">green-100</div>
|
|
196
|
+
<div class="token-value">#d1fae5</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div>
|
|
199
|
+
<div class="swatch" style="background-color: #10b981;"></div>
|
|
200
|
+
<div class="token-name">green-500</div>
|
|
201
|
+
<div class="token-value">#10b981</div>
|
|
202
|
+
</div>
|
|
203
|
+
<div>
|
|
204
|
+
<div class="swatch" style="background-color: #00d4ff;"></div>
|
|
205
|
+
<div class="token-name">starlight</div>
|
|
206
|
+
<div class="token-value">#00d4ff</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div>
|
|
209
|
+
<div class="swatch" style="background-color: transparent;"></div>
|
|
210
|
+
<div class="token-name">transparent</div>
|
|
211
|
+
<div class="token-value">transparent</div>
|
|
212
|
+
</div>
|
|
213
|
+
<div>
|
|
214
|
+
<div class="swatch" style="background-color: #eff6ff;"></div>
|
|
215
|
+
<div class="token-name">primary-50</div>
|
|
216
|
+
<div class="token-value">#eff6ff</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div>
|
|
219
|
+
<div class="swatch" style="background-color: #dbeafe;"></div>
|
|
220
|
+
<div class="token-name">primary-100</div>
|
|
221
|
+
<div class="token-value">#dbeafe</div>
|
|
222
|
+
</div>
|
|
223
|
+
<div>
|
|
224
|
+
<div class="swatch" style="background-color: #bfdbfe;"></div>
|
|
225
|
+
<div class="token-name">primary-200</div>
|
|
226
|
+
<div class="token-value">#bfdbfe</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div>
|
|
229
|
+
<div class="swatch" style="background-color: #93c5fd;"></div>
|
|
230
|
+
<div class="token-name">primary-300</div>
|
|
231
|
+
<div class="token-value">#93c5fd</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div>
|
|
234
|
+
<div class="swatch" style="background-color: #60a5fa;"></div>
|
|
235
|
+
<div class="token-name">primary-400</div>
|
|
236
|
+
<div class="token-value">#60a5fa</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div>
|
|
239
|
+
<div class="swatch" style="background-color: #3b82f6;"></div>
|
|
240
|
+
<div class="token-name">primary-500</div>
|
|
241
|
+
<div class="token-value">#3b82f6</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div>
|
|
244
|
+
<div class="swatch" style="background-color: #2563eb;"></div>
|
|
245
|
+
<div class="token-name">primary-600</div>
|
|
246
|
+
<div class="token-value">#2563eb</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div>
|
|
249
|
+
<div class="swatch" style="background-color: #1d4ed8;"></div>
|
|
250
|
+
<div class="token-name">primary-700</div>
|
|
251
|
+
<div class="token-value">#1d4ed8</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div>
|
|
254
|
+
<div class="swatch" style="background-color: #1e40af;"></div>
|
|
255
|
+
<div class="token-name">primary-800</div>
|
|
256
|
+
<div class="token-value">#1e40af</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div>
|
|
259
|
+
<div class="swatch" style="background-color: #1e3a8a;"></div>
|
|
260
|
+
<div class="token-name">primary-900</div>
|
|
261
|
+
<div class="token-value">#1e3a8a</div>
|
|
262
|
+
</div>
|
|
263
|
+
<div>
|
|
264
|
+
<div class="swatch" style="background-color: #f8fafc;"></div>
|
|
265
|
+
<div class="token-name">secondary-50</div>
|
|
266
|
+
<div class="token-value">#f8fafc</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div>
|
|
269
|
+
<div class="swatch" style="background-color: #f1f5f9;"></div>
|
|
270
|
+
<div class="token-name">secondary-100</div>
|
|
271
|
+
<div class="token-value">#f1f5f9</div>
|
|
272
|
+
</div>
|
|
273
|
+
<div>
|
|
274
|
+
<div class="swatch" style="background-color: #e2e8f0;"></div>
|
|
275
|
+
<div class="token-name">secondary-200</div>
|
|
276
|
+
<div class="token-value">#e2e8f0</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div>
|
|
279
|
+
<div class="swatch" style="background-color: #cbd5e1;"></div>
|
|
280
|
+
<div class="token-name">secondary-300</div>
|
|
281
|
+
<div class="token-value">#cbd5e1</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div>
|
|
284
|
+
<div class="swatch" style="background-color: #94a3b8;"></div>
|
|
285
|
+
<div class="token-name">secondary-400</div>
|
|
286
|
+
<div class="token-value">#94a3b8</div>
|
|
287
|
+
</div>
|
|
288
|
+
<div>
|
|
289
|
+
<div class="swatch" style="background-color: #64748b;"></div>
|
|
290
|
+
<div class="token-name">secondary-500</div>
|
|
291
|
+
<div class="token-value">#64748b</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div>
|
|
294
|
+
<div class="swatch" style="background-color: #475569;"></div>
|
|
295
|
+
<div class="token-name">secondary-600</div>
|
|
296
|
+
<div class="token-value">#475569</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div>
|
|
299
|
+
<div class="swatch" style="background-color: #334155;"></div>
|
|
300
|
+
<div class="token-name">secondary-700</div>
|
|
301
|
+
<div class="token-value">#334155</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div>
|
|
304
|
+
<div class="swatch" style="background-color: #1e293b;"></div>
|
|
305
|
+
<div class="token-name">secondary-800</div>
|
|
306
|
+
<div class="token-value">#1e293b</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div>
|
|
309
|
+
<div class="swatch" style="background-color: #0f172a;"></div>
|
|
310
|
+
<div class="token-name">secondary-900</div>
|
|
311
|
+
<div class="token-value">#0f172a</div>
|
|
312
|
+
</div>
|
|
313
|
+
<div>
|
|
314
|
+
<div class="swatch" style="background-color: #10b981;"></div>
|
|
315
|
+
<div class="token-name">success</div>
|
|
316
|
+
<div class="token-value">#10b981</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div>
|
|
319
|
+
<div class="swatch" style="background-color: #f59e0b;"></div>
|
|
320
|
+
<div class="token-name">warning</div>
|
|
321
|
+
<div class="token-value">#f59e0b</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div>
|
|
324
|
+
<div class="swatch" style="background-color: #ef4444;"></div>
|
|
325
|
+
<div class="token-name">error</div>
|
|
326
|
+
<div class="token-value">#ef4444</div>
|
|
327
|
+
</div>
|
|
328
|
+
<div>
|
|
329
|
+
<div class="swatch" style="background-color: #6b7280;"></div>
|
|
330
|
+
<div class="token-name">neutral</div>
|
|
331
|
+
<div class="token-value">#6b7280</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<div class="swatch" style="background-color: var(--text-muted);"></div>
|
|
335
|
+
<div class="token-name">muted</div>
|
|
336
|
+
<div class="token-value">var(--text-muted)</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div>
|
|
339
|
+
<div class="swatch" style="background-color: #ffb38a;"></div>
|
|
340
|
+
<div class="token-name">starlight-peach</div>
|
|
341
|
+
<div class="token-value">#ffb38a</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div>
|
|
344
|
+
<div class="swatch" style="background-color: #ff7e5f;"></div>
|
|
345
|
+
<div class="token-name">starlight-orange</div>
|
|
346
|
+
<div class="token-value">#ff7e5f</div>
|
|
347
|
+
</div>
|
|
348
|
+
<div>
|
|
349
|
+
<div class="swatch" style="background-color: #08081a;"></div>
|
|
350
|
+
<div class="token-name">starlight-deep</div>
|
|
351
|
+
<div class="token-value">#08081a</div>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</section>
|
|
355
|
+
|
|
356
|
+
<!-- Typography Section -->
|
|
357
|
+
<section>
|
|
358
|
+
<h2>Typography (Font Sizes)</h2>
|
|
359
|
+
<div class="flex flex-col gap-8">
|
|
360
|
+
<div class="flex items-center gap-4">
|
|
361
|
+
<div class="w-24 token-name">xs (0.75rem)</div>
|
|
362
|
+
<div class="text-xs">The quick brown fox jumps over the lazy dog.</div>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="flex items-center gap-4">
|
|
365
|
+
<div class="w-24 token-name">sm (0.875rem)</div>
|
|
366
|
+
<div class="text-sm">The quick brown fox jumps over the lazy dog.</div>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="flex items-center gap-4">
|
|
369
|
+
<div class="w-24 token-name">base (1rem)</div>
|
|
370
|
+
<div class="text-base">The quick brown fox jumps over the lazy dog.</div>
|
|
371
|
+
</div>
|
|
372
|
+
<div class="flex items-center gap-4">
|
|
373
|
+
<div class="w-24 token-name">lg (1.125rem)</div>
|
|
374
|
+
<div class="text-lg">The quick brown fox jumps over the lazy dog.</div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="flex items-center gap-4">
|
|
377
|
+
<div class="w-24 token-name">xl (1.25rem)</div>
|
|
378
|
+
<div class="text-xl">The quick brown fox jumps over the lazy dog.</div>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="flex items-center gap-4">
|
|
381
|
+
<div class="w-24 token-name">2xl (1.5rem)</div>
|
|
382
|
+
<div class="text-2xl">The quick brown fox jumps over the lazy dog.</div>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="flex items-center gap-4">
|
|
385
|
+
<div class="w-24 token-name">3xl (2rem)</div>
|
|
386
|
+
<div class="text-3xl">The quick brown fox jumps over the lazy dog.</div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="flex items-center gap-4">
|
|
389
|
+
<div class="w-24 token-name">4xl (2.5rem)</div>
|
|
390
|
+
<div class="text-4xl">The quick brown fox jumps over the lazy dog.</div>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="flex items-center gap-4">
|
|
393
|
+
<div class="w-24 token-name">5xl (3rem)</div>
|
|
394
|
+
<div class="text-5xl">The quick brown fox jumps over the lazy dog.</div>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="flex items-center gap-4">
|
|
397
|
+
<div class="w-24 token-name">6xl (4rem)</div>
|
|
398
|
+
<div class="text-6xl">The quick brown fox jumps over the lazy dog.</div>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
</section>
|
|
402
|
+
|
|
403
|
+
<!-- Spacing Section -->
|
|
404
|
+
<section>
|
|
405
|
+
<h2>Spacing</h2>
|
|
406
|
+
<div class="flex flex-col gap-4">
|
|
407
|
+
<div class="flex items-center gap-4">
|
|
408
|
+
<div class="w-24 token-name">0 (0px)</div>
|
|
409
|
+
<div class="spacing-bar" style="width: 0px"></div>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="flex items-center gap-4">
|
|
412
|
+
<div class="w-24 token-name">px (1px)</div>
|
|
413
|
+
<div class="spacing-bar" style="width: 1px"></div>
|
|
414
|
+
</div>
|
|
415
|
+
<div class="flex items-center gap-4">
|
|
416
|
+
<div class="w-24 token-name">1 (0.25rem)</div>
|
|
417
|
+
<div class="spacing-bar" style="width: 0.25rem"></div>
|
|
418
|
+
</div>
|
|
419
|
+
<div class="flex items-center gap-4">
|
|
420
|
+
<div class="w-24 token-name">2 (0.5rem)</div>
|
|
421
|
+
<div class="spacing-bar" style="width: 0.5rem"></div>
|
|
422
|
+
</div>
|
|
423
|
+
<div class="flex items-center gap-4">
|
|
424
|
+
<div class="w-24 token-name">3 (0.75rem)</div>
|
|
425
|
+
<div class="spacing-bar" style="width: 0.75rem"></div>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="flex items-center gap-4">
|
|
428
|
+
<div class="w-24 token-name">4 (1rem)</div>
|
|
429
|
+
<div class="spacing-bar" style="width: 1rem"></div>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="flex items-center gap-4">
|
|
432
|
+
<div class="w-24 token-name">5 (1.25rem)</div>
|
|
433
|
+
<div class="spacing-bar" style="width: 1.25rem"></div>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="flex items-center gap-4">
|
|
436
|
+
<div class="w-24 token-name">6 (1.5rem)</div>
|
|
437
|
+
<div class="spacing-bar" style="width: 1.5rem"></div>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="flex items-center gap-4">
|
|
440
|
+
<div class="w-24 token-name">8 (2rem)</div>
|
|
441
|
+
<div class="spacing-bar" style="width: 2rem"></div>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="flex items-center gap-4">
|
|
444
|
+
<div class="w-24 token-name">10 (2.5rem)</div>
|
|
445
|
+
<div class="spacing-bar" style="width: 2.5rem"></div>
|
|
446
|
+
</div>
|
|
447
|
+
<div class="flex items-center gap-4">
|
|
448
|
+
<div class="w-24 token-name">12 (3rem)</div>
|
|
449
|
+
<div class="spacing-bar" style="width: 3rem"></div>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="flex items-center gap-4">
|
|
452
|
+
<div class="w-24 token-name">14 (3.5rem)</div>
|
|
453
|
+
<div class="spacing-bar" style="width: 3.5rem"></div>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="flex items-center gap-4">
|
|
456
|
+
<div class="w-24 token-name">16 (4rem)</div>
|
|
457
|
+
<div class="spacing-bar" style="width: 4rem"></div>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="flex items-center gap-4">
|
|
460
|
+
<div class="w-24 token-name">20 (5rem)</div>
|
|
461
|
+
<div class="spacing-bar" style="width: 5rem"></div>
|
|
462
|
+
</div>
|
|
463
|
+
<div class="flex items-center gap-4">
|
|
464
|
+
<div class="w-24 token-name">24 (6rem)</div>
|
|
465
|
+
<div class="spacing-bar" style="width: 6rem"></div>
|
|
466
|
+
</div>
|
|
467
|
+
<div class="flex items-center gap-4">
|
|
468
|
+
<div class="w-24 token-name">32 (8rem)</div>
|
|
469
|
+
<div class="spacing-bar" style="width: 8rem"></div>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="flex items-center gap-4">
|
|
472
|
+
<div class="w-24 token-name">40 (10rem)</div>
|
|
473
|
+
<div class="spacing-bar" style="width: 10rem"></div>
|
|
474
|
+
</div>
|
|
475
|
+
<div class="flex items-center gap-4">
|
|
476
|
+
<div class="w-24 token-name">48 (12rem)</div>
|
|
477
|
+
<div class="spacing-bar" style="width: 12rem"></div>
|
|
478
|
+
</div>
|
|
479
|
+
<div class="flex items-center gap-4">
|
|
480
|
+
<div class="w-24 token-name">64 (16rem)</div>
|
|
481
|
+
<div class="spacing-bar" style="width: 16rem"></div>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="flex items-center gap-4">
|
|
484
|
+
<div class="w-24 token-name">128 (32rem)</div>
|
|
485
|
+
<div class="spacing-bar" style="width: 32rem"></div>
|
|
486
|
+
</div>
|
|
487
|
+
<div class="flex items-center gap-4">
|
|
488
|
+
<div class="w-24 token-name">144 (36rem)</div>
|
|
489
|
+
<div class="spacing-bar" style="width: 36rem"></div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
</section>
|
|
493
|
+
|
|
494
|
+
<!-- Border Radius Section -->
|
|
495
|
+
<section>
|
|
496
|
+
<h2>Border Radius</h2>
|
|
497
|
+
<div class="token-grid">
|
|
498
|
+
<div class="text-center">
|
|
499
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 0px"></div>
|
|
500
|
+
<div class="token-name">none</div>
|
|
501
|
+
<div class="token-value">0px</div>
|
|
502
|
+
</div>
|
|
503
|
+
<div class="text-center">
|
|
504
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 0.125rem"></div>
|
|
505
|
+
<div class="token-name">sm</div>
|
|
506
|
+
<div class="token-value">0.125rem</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="text-center">
|
|
509
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 0.375rem"></div>
|
|
510
|
+
<div class="token-name">md</div>
|
|
511
|
+
<div class="token-value">0.375rem</div>
|
|
512
|
+
</div>
|
|
513
|
+
<div class="text-center">
|
|
514
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 0.5rem"></div>
|
|
515
|
+
<div class="token-name">lg</div>
|
|
516
|
+
<div class="token-value">0.5rem</div>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="text-center">
|
|
519
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 0.75rem"></div>
|
|
520
|
+
<div class="token-name">xl</div>
|
|
521
|
+
<div class="token-value">0.75rem</div>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="text-center">
|
|
524
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 1rem"></div>
|
|
525
|
+
<div class="token-name">2xl</div>
|
|
526
|
+
<div class="token-value">1rem</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="text-center">
|
|
529
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 1.5rem"></div>
|
|
530
|
+
<div class="token-name">3xl</div>
|
|
531
|
+
<div class="token-value">1.5rem</div>
|
|
532
|
+
</div>
|
|
533
|
+
<div class="text-center">
|
|
534
|
+
<div class="w-20 h-20 bg-blue-100 mx-auto mb-2 border border-blue-200" style="border-radius: 9999px"></div>
|
|
535
|
+
<div class="token-name">full</div>
|
|
536
|
+
<div class="token-value">9999px</div>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</section>
|
|
540
|
+
|
|
541
|
+
<!-- Shadows Section -->
|
|
542
|
+
<section>
|
|
543
|
+
<h2>Shadows</h2>
|
|
544
|
+
<div class="token-grid">
|
|
545
|
+
<div class="text-center">
|
|
546
|
+
<div class="w-32 h-32 bg-white mx-auto mb-4 rounded-lg" style="box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)"></div>
|
|
547
|
+
<div class="token-name">sm</div>
|
|
548
|
+
</div>
|
|
549
|
+
<div class="text-center">
|
|
550
|
+
<div class="w-32 h-32 bg-white mx-auto mb-4 rounded-lg" style="box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"></div>
|
|
551
|
+
<div class="token-name">md</div>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="text-center">
|
|
554
|
+
<div class="w-32 h-32 bg-white mx-auto mb-4 rounded-lg" style="box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"></div>
|
|
555
|
+
<div class="token-name">lg</div>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="text-center">
|
|
558
|
+
<div class="w-32 h-32 bg-white mx-auto mb-4 rounded-lg" style="box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"></div>
|
|
559
|
+
<div class="token-name">xl</div>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="text-center">
|
|
562
|
+
<div class="w-32 h-32 bg-white mx-auto mb-4 rounded-lg" style="box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)"></div>
|
|
563
|
+
<div class="token-name">2xl</div>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
</section>
|
|
567
|
+
|
|
568
|
+
<!-- Animations Section -->
|
|
569
|
+
<section>
|
|
570
|
+
<h2>Cosmic Animations</h2>
|
|
571
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
|
572
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
573
|
+
<div class="w-16 h-16 bg-starlight rounded-full ani-float"></div>
|
|
574
|
+
<div class="token-name">ani-float</div>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
577
|
+
<div class="w-16 h-16 bg-blue-500 rounded-full ani-cosmic-pulse"></div>
|
|
578
|
+
<div class="token-name">ani-cosmic-pulse</div>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
581
|
+
<div class="w-16 h-16 bg-orange-500 rounded-full ani-twinkle"></div>
|
|
582
|
+
<div class="token-name">ani-twinkle</div>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4 relative overflow-hidden h-48">
|
|
585
|
+
<div class="absolute inset-0 ani-nebula"></div>
|
|
586
|
+
<div class="relative token-name">ani-nebula</div>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
589
|
+
<div class="w-4 h-4 ani-orbit-star rounded-full ani-orbit"></div>
|
|
590
|
+
<div class="token-name">ani-orbit</div>
|
|
591
|
+
</div>
|
|
592
|
+
<div class="ani-card p-12 rounded-2xl flex flex-col items-center justify-center gap-4">
|
|
593
|
+
<svg width="60" height="60" viewBox="0 0 100 100" class="text-starlight">
|
|
594
|
+
<circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="4" fill="none" class="ani-svg-draw" />
|
|
595
|
+
</svg>
|
|
596
|
+
<div class="token-name">ani-svg-draw</div>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
</section>
|
|
600
|
+
|
|
601
|
+
<!-- Badges Section -->
|
|
602
|
+
<section>
|
|
603
|
+
<h2>Badges</h2>
|
|
604
|
+
<div class="flex flex-wrap gap-4">
|
|
605
|
+
<span class="badge badge-primary">Primary</span>
|
|
606
|
+
<span class="badge badge-secondary">Secondary</span>
|
|
607
|
+
<span class="badge badge-success">Success</span>
|
|
608
|
+
<span class="badge badge-warning">Warning</span>
|
|
609
|
+
<span class="badge badge-error">Error</span>
|
|
610
|
+
</div>
|
|
611
|
+
</section>
|
|
612
|
+
|
|
613
|
+
<!-- Presets Section -->
|
|
614
|
+
|
|
615
|
+
<section>
|
|
616
|
+
<h2>Component Presets</h2>
|
|
617
|
+
<p class="mb-6 opacity-70">Atomic and molecular utility compositions for individual elements.</p>
|
|
618
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
619
|
+
|
|
620
|
+
<div class="starlight-card p-6">
|
|
621
|
+
<div class="mb-4 flex justify-between items-center">
|
|
622
|
+
<span class="token-name">.btn-primary</span>
|
|
623
|
+
<span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
|
|
624
|
+
</div>
|
|
625
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
626
|
+
<button class="btn-primary">Preset Button</button>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-starlight px-6 py-2 rounded-lg transition shadow-md hover:scale-105 active:scale-95</div>
|
|
629
|
+
</div>
|
|
630
|
+
|
|
631
|
+
<div class="starlight-card p-6">
|
|
632
|
+
<div class="mb-4 flex justify-between items-center">
|
|
633
|
+
<span class="token-name">.btn-secondary</span>
|
|
634
|
+
<span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
|
|
635
|
+
</div>
|
|
636
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
637
|
+
<button class="btn-secondary">Preset Button</button>
|
|
638
|
+
</div>
|
|
639
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">glass text-secondary px-6 py-2 rounded-lg transition shadow-md hover:bg-white/10 active:scale-95</div>
|
|
640
|
+
</div>
|
|
641
|
+
|
|
642
|
+
<div class="starlight-card p-6">
|
|
643
|
+
<div class="mb-4 flex justify-between items-center">
|
|
644
|
+
<span class="token-name">.card-premium</span>
|
|
645
|
+
<span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
|
|
648
|
+
<div class="card-premium"><h4 class="font-bold">Preset Card</h4><p class="text-sm opacity-70">Using card-premium</p></div>
|
|
649
|
+
</div>
|
|
650
|
+
<div class="token-value text-xs bg-black/20 p-3 rounded font-mono">bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-slate-100 hover:scale-105 transition dark:bg-white/5 dark:border-white/10 dark:backdrop-blur-md</div>
|
|
651
|
+
</div>
|
|
652
|
+
|
|
653
|
+
</div>
|
|
654
|
+
</section>
|
|
655
|
+
|
|
656
|
+
|
|
657
|
+
<!-- Components Section -->
|
|
658
|
+
<section>
|
|
659
|
+
<h2>Component Utilities</h2>
|
|
660
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
661
|
+
<div class="starlight-card p-6">
|
|
662
|
+
<div class="mb-4 token-name">glass</div>
|
|
663
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
664
|
+
<div class="glass p-8 rounded-xl border border-white/20">Glass Effect</div>
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
<div class="starlight-card p-6">
|
|
668
|
+
<div class="mb-4 token-name">bg-starlight</div>
|
|
669
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
670
|
+
<div class="bg-starlight p-8 rounded-xl w-full text-center">Example Block</div>
|
|
671
|
+
</div>
|
|
672
|
+
</div>
|
|
673
|
+
<div class="starlight-card p-6">
|
|
674
|
+
<div class="mb-4 token-name">text-gradient-starlight</div>
|
|
675
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
676
|
+
<div class="text-gradient-starlight p-8 rounded-xl w-full text-center">Example Block</div>
|
|
677
|
+
</div>
|
|
678
|
+
</div>
|
|
679
|
+
<div class="starlight-card p-6">
|
|
680
|
+
<div class="mb-4 token-name">btn-starlight</div>
|
|
681
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
682
|
+
<button class="btn-starlight">Button Example</button>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
<div class="starlight-card p-6">
|
|
686
|
+
<div class="mb-4 token-name">btn-secondary</div>
|
|
687
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
688
|
+
<button class="btn-secondary">Button Example</button>
|
|
689
|
+
</div>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="starlight-card p-6">
|
|
692
|
+
<div class="mb-4 token-name">input-starlight</div>
|
|
693
|
+
<div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
|
|
694
|
+
<input class="input-starlight" placeholder="Input Example">
|
|
695
|
+
</div>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
</section>
|
|
699
|
+
|
|
700
|
+
<!-- High-Level Presets -->
|
|
701
|
+
<section>
|
|
702
|
+
<h2>High-Level Component Presets</h2>
|
|
703
|
+
<p class="mb-6 opacity-70">Semantic classes that compose multiple utilities for rapid AI-driven development.</p>
|
|
704
|
+
<div class="grid grid-cols-1 gap-12">
|
|
705
|
+
<!-- Navigation -->
|
|
706
|
+
<div class="starlight-card p-0 mb-12">
|
|
707
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.starlight-nav)</div>
|
|
708
|
+
<div class="relative">
|
|
709
|
+
<nav class="starlight-nav relative">
|
|
710
|
+
<div class="p-4 md:px-8 flex justify-between items-center w-full">
|
|
711
|
+
<div class="font-bold text-xl text-gradient-starlight">Starlight OS</div>
|
|
712
|
+
<div class="flex items-center gap-8">
|
|
713
|
+
<div class="nav-desktop">
|
|
714
|
+
<ul class="nav-list">
|
|
715
|
+
<li><a href="#" class="nav-link">Fleet</a></li>
|
|
716
|
+
<li>
|
|
717
|
+
<div class="dropdown">
|
|
718
|
+
<a href="#" class="nav-link">Stations ▾</a>
|
|
719
|
+
<div class="dropdown-menu">
|
|
720
|
+
<a href="#" class="dropdown-item">Alpha Base</a>
|
|
721
|
+
<a href="#" class="dropdown-item">Delta Outpost</a>
|
|
722
|
+
<a href="#" class="dropdown-item">Omega Point</a>
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
</li>
|
|
726
|
+
<li><a href="#" class="nav-link">Resources</a></li>
|
|
727
|
+
</ul>
|
|
728
|
+
</div>
|
|
729
|
+
<div class="hamburger">
|
|
730
|
+
<span></span><span></span><span></span>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</div>
|
|
734
|
+
<!-- Mobile Menu -->
|
|
735
|
+
<div class="nav-menu-mobile">
|
|
736
|
+
<ul class="nav-list vertical">
|
|
737
|
+
<li><a href="#" class="nav-link">Fleet</a></li>
|
|
738
|
+
<li>
|
|
739
|
+
<div class="dropdown">
|
|
740
|
+
<a href="#" class="nav-link">Stations ▾</a>
|
|
741
|
+
<div class="dropdown-menu">
|
|
742
|
+
<a href="#" class="dropdown-item">Alpha Base</a>
|
|
743
|
+
<a href="#" class="dropdown-item">Delta Outpost</a>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</li>
|
|
747
|
+
<li><a href="#" class="nav-link">Resources</a></li>
|
|
748
|
+
</ul>
|
|
749
|
+
</div>
|
|
750
|
+
</nav>
|
|
751
|
+
<div class="p-12 text-center opacity-50 italic text-sm border-t border-white/5 light:bg-slate-300">Horizontal layout (standard)</div>
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
|
|
755
|
+
<!-- Vertical Navigation -->
|
|
756
|
+
<div class="starlight-card p-0">
|
|
757
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.starlight-nav.vertical)</div>
|
|
758
|
+
<div class="flex h-[400px] overflow-hidden">
|
|
759
|
+
<nav class="starlight-nav vertical static border-r border-white/10">
|
|
760
|
+
<div class="font-bold text-xl text-gradient-starlight mb-8">Starlight OS</div>
|
|
761
|
+
<div class="nav-desktop block w-full">
|
|
762
|
+
<ul class="nav-list vertical w-full">
|
|
763
|
+
<li><a href="#" class="nav-link">Fleet</a></li>
|
|
764
|
+
<li>
|
|
765
|
+
<div class="dropdown">
|
|
766
|
+
<a href="#" class="nav-link">Stations ▾</a>
|
|
767
|
+
<div class="dropdown-menu">
|
|
768
|
+
<a href="#" class="dropdown-item">Alpha Base</a>
|
|
769
|
+
<a href="#" class="dropdown-item">Delta Outpost</a>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|
|
772
|
+
</li>
|
|
773
|
+
<li><a href="#" class="nav-link">Resources</a></li>
|
|
774
|
+
<li><a href="#" class="nav-link">Analytics</a></li>
|
|
775
|
+
</ul>
|
|
776
|
+
</div>
|
|
777
|
+
</nav>
|
|
778
|
+
<div class="flex-1 p-8 opacity-50 italic text-sm overflow-y-auto light:bg-slate-300">Dashboard content area...</div>
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
781
|
+
|
|
782
|
+
<!-- Search -->
|
|
783
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
784
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
|
|
785
|
+
<div class="p-12 flex flex-col items-center gap-6">
|
|
786
|
+
<div class="starlight-search">
|
|
787
|
+
<svg class="search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
788
|
+
<input type="text" class="input-starlight search-input" placeholder="Search the cosmos...">
|
|
789
|
+
</div>
|
|
790
|
+
<p class="text-sm text-muted">A glassmorphic search bar with integrated iconography.</p>
|
|
791
|
+
</div>
|
|
792
|
+
</div>
|
|
793
|
+
|
|
794
|
+
<!-- Dashboard -->
|
|
795
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
796
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.starlight-dashboard)</div>
|
|
797
|
+
<div class="p-8">
|
|
798
|
+
<div class="starlight-dashboard">
|
|
799
|
+
<div class="starlight-card stat-card light:shadow-lg">
|
|
800
|
+
<span class="stat-label">Core Stability</span>
|
|
801
|
+
<span class="stat-value">98.4%</span>
|
|
802
|
+
<div class="stat-trend up">
|
|
803
|
+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
|
804
|
+
2.1%
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="starlight-card stat-card light:shadow-lg">
|
|
808
|
+
<span class="stat-label">Neural Sync</span>
|
|
809
|
+
<span class="stat-value">Active</span>
|
|
810
|
+
<div class="stat-trend up">
|
|
811
|
+
<div class="w-2 h-2 bg-success rounded-full ani-cosmic-pulse mr-1"></div>
|
|
812
|
+
Optimal
|
|
813
|
+
</div>
|
|
814
|
+
</div>
|
|
815
|
+
<div class="starlight-card stat-card light:shadow-lg">
|
|
816
|
+
<span class="stat-label">Latency</span>
|
|
817
|
+
<span class="stat-value">12ms</span>
|
|
818
|
+
<div class="stat-trend down">
|
|
819
|
+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
820
|
+
0.4%
|
|
821
|
+
</div>
|
|
822
|
+
</div>
|
|
823
|
+
</div>
|
|
824
|
+
</div>
|
|
825
|
+
</div>
|
|
826
|
+
|
|
827
|
+
<!-- Gallery -->
|
|
828
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
829
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.starlight-gallery)</div>
|
|
830
|
+
<div class="p-8">
|
|
831
|
+
<div class="starlight-gallery">
|
|
832
|
+
<div class="gallery-item">
|
|
833
|
+
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=800&q=80" alt="Nebula">
|
|
834
|
+
<div class="gallery-overlay"><span class="text-xs font-bold uppercase tracking-widest">Orion</span></div>
|
|
835
|
+
</div>
|
|
836
|
+
<div class="gallery-item">
|
|
837
|
+
<img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=800&q=80" alt="Earth">
|
|
838
|
+
<div class="gallery-overlay"><span class="text-xs font-bold uppercase tracking-widest">Terra</span></div>
|
|
839
|
+
</div>
|
|
840
|
+
<div class="gallery-item">
|
|
841
|
+
<img src="https://images.unsplash.com/photo-1464802686167-b939a6910659?auto=format&fit=crop&w=800&q=80" alt="Galaxy">
|
|
842
|
+
<div class="gallery-overlay"><span class="text-xs font-bold uppercase tracking-widest">Andromeda</span></div>
|
|
843
|
+
</div>
|
|
844
|
+
<div class="gallery-item">
|
|
845
|
+
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=800&q=80" alt="Deep Space">
|
|
846
|
+
<div class="gallery-overlay"><span class="text-xs font-bold uppercase tracking-widest">Void</span></div>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
</div>
|
|
850
|
+
</div>
|
|
851
|
+
|
|
852
|
+
<!-- Form -->
|
|
853
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
854
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.starlight-form)</div>
|
|
855
|
+
<div class="p-8">
|
|
856
|
+
<div class="starlight-form">
|
|
857
|
+
<div class="flex flex-col gap-4">
|
|
858
|
+
<label class="text-sm font-semibold opacity-70">Mission Designation</label>
|
|
859
|
+
<input type="text" class="input-starlight" placeholder="Enter codename...">
|
|
860
|
+
<label class="text-sm font-semibold opacity-70">Warp Factor</label>
|
|
861
|
+
<input type="range" class="range-starlight" min="1" max="9" step="0.1">
|
|
862
|
+
</div>
|
|
863
|
+
<div class="flex flex-col gap-6">
|
|
864
|
+
<div class="form-row">
|
|
865
|
+
<div>
|
|
866
|
+
<div class="font-semibold">Cloaking Device</div>
|
|
867
|
+
<div class="text-[10px] opacity-50">Stealth mode activation</div>
|
|
868
|
+
</div>
|
|
869
|
+
<label class="toggle toggle-starlight"><input type="checkbox" class="toggle-input"><span class="toggle-slider"></span></label>
|
|
870
|
+
</div>
|
|
871
|
+
<div class="flex gap-4 mt-auto">
|
|
872
|
+
<button class="btn-starlight flex-1">Launch</button>
|
|
873
|
+
<button class="btn-secondary">Abort</button>
|
|
874
|
+
</div>
|
|
875
|
+
</div>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
|
|
880
|
+
<!-- Dialog -->
|
|
881
|
+
<div class="starlight-card p-0">
|
|
882
|
+
<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
|
+
<div class="p-8">
|
|
884
|
+
<!-- Inline Preview -->
|
|
885
|
+
<div class="starlight-dialog relative mx-auto mb-8 shadow-none border-white/10" style="max-width: 500px;">
|
|
886
|
+
<h3 class="text-xl font-bold mb-4 text-gradient-starlight">System Preview</h3>
|
|
887
|
+
<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
|
+
<div class="flex gap-4">
|
|
889
|
+
<button class="btn-starlight btn-sm flex-1">Action</button>
|
|
890
|
+
<button class="btn-secondary btn-sm flex-1">Cancel</button>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
|
|
894
|
+
<div class="text-center pt-4 border-t border-white/5">
|
|
895
|
+
<button class="btn-starlight" onclick="toggleDialog(true)">Launch Overlay Dialog</button>
|
|
896
|
+
</div>
|
|
897
|
+
</div>
|
|
898
|
+
</div>
|
|
899
|
+
|
|
900
|
+
<!-- Accordion -->
|
|
901
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
902
|
+
<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
|
+
<div class="p-8">
|
|
904
|
+
<div class="accordion-group max-w-2xl mx-auto">
|
|
905
|
+
<div class="accordion-item accordion-starlight active">
|
|
906
|
+
<div class="accordion-header">
|
|
907
|
+
<span>Cosmic Manifestation</span>
|
|
908
|
+
<svg class="accordion-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
909
|
+
</div>
|
|
910
|
+
<div class="accordion-content">
|
|
911
|
+
<p>The universe began as a singularity of infinite density and heat, expanding rapidly in a cosmic event known as the Big Bang.</p>
|
|
912
|
+
</div>
|
|
913
|
+
</div>
|
|
914
|
+
<div class="accordion-item accordion-starlight">
|
|
915
|
+
<div class="accordion-header">
|
|
916
|
+
<span>Neural Synchronization</span>
|
|
917
|
+
<svg class="accordion-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
918
|
+
</div>
|
|
919
|
+
<div class="accordion-content">
|
|
920
|
+
<p>Advanced neural interfaces allow for near-instantaneous data transfer between organic consciousness and digital mesh networks.</p>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
</div>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
|
|
927
|
+
<!-- Tabs -->
|
|
928
|
+
<div class="starlight-card p-0 overflow-hidden">
|
|
929
|
+
<div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
|
|
930
|
+
<div class="p-8">
|
|
931
|
+
<div class="max-w-2xl mx-auto">
|
|
932
|
+
<div class="tab-list mb-4">
|
|
933
|
+
<button class="tab-button active" data-tab="tab-overview">Overview</button>
|
|
934
|
+
<button class="tab-button" data-tab="tab-specs">Specifications</button>
|
|
935
|
+
<button class="tab-button" data-tab="tab-logs">System Logs</button>
|
|
936
|
+
</div>
|
|
937
|
+
<div class="tab-content glass p-6 rounded-xl">
|
|
938
|
+
<div class="tab-panel active" id="tab-overview">
|
|
939
|
+
<h4 class="text-lg font-bold mb-2">Fleet Overview</h4>
|
|
940
|
+
<p class="text-sm opacity-70">Current status: All systems nominal. 24 vessels in active sector.</p>
|
|
941
|
+
</div>
|
|
942
|
+
<div class="tab-panel" id="tab-specs">
|
|
943
|
+
<h4 class="text-lg font-bold mb-2">Technical Specs</h4>
|
|
944
|
+
<ul class="text-sm opacity-70 list-disc pl-5">
|
|
945
|
+
<li>Core Engine: Antimatter Warp v4</li>
|
|
946
|
+
<li>Hull Plating: Reinforced Tritanium</li>
|
|
947
|
+
<li>Shields: Multi-phasic Harmonic</li>
|
|
948
|
+
</ul>
|
|
949
|
+
</div>
|
|
950
|
+
<div class="tab-panel" id="tab-logs">
|
|
951
|
+
<div class="font-mono text-xs opacity-60">
|
|
952
|
+
[12:04:33] Nebula drive initiated<br>
|
|
953
|
+
[12:05:12] Synchronization complete<br>
|
|
954
|
+
[12:10:04] Entering silent running mode
|
|
955
|
+
</div>
|
|
956
|
+
</div>
|
|
957
|
+
</div>
|
|
958
|
+
</div>
|
|
959
|
+
</div>
|
|
960
|
+
</div>
|
|
961
|
+
</div>
|
|
962
|
+
</section>
|
|
963
|
+
|
|
964
|
+
<footer class="mt-20 pt-8 border-t border-white/10 opacity-50 text-sm">
|
|
965
|
+
Generated by Quantum CSS Dynamic Docs · 2/4/2026
|
|
966
|
+
</footer>
|
|
967
|
+
</div>
|
|
968
|
+
|
|
969
|
+
<!-- Dialog Overlay (Moved to bottom to prevent clipping) -->
|
|
970
|
+
<div class="dialog-overlay hidden" id="systemDialog">
|
|
971
|
+
<div class="starlight-dialog">
|
|
972
|
+
<button class="dialog-close" onclick="toggleDialog(false)">
|
|
973
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
974
|
+
</button>
|
|
975
|
+
<h3 class="text-2xl font-bold mb-4 text-gradient-starlight">System Override</h3>
|
|
976
|
+
<p class="mb-6 opacity-70">You are about to bypass safety protocols. This action is irreversible.</p>
|
|
977
|
+
<div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white/5">
|
|
978
|
+
<div class="text-success">> STATUS: AUTHORIZED</div>
|
|
979
|
+
<div class="text-success">> CORE: ACCESSIBLE</div>
|
|
980
|
+
</div>
|
|
981
|
+
<div class="flex gap-4">
|
|
982
|
+
<button class="btn-starlight flex-1" onclick="toggleDialog(false)">Confirm</button>
|
|
983
|
+
<button class="btn-secondary flex-1" onclick="toggleDialog(false)">Abort</button>
|
|
984
|
+
</div>
|
|
985
|
+
</div>
|
|
986
|
+
</div>
|
|
987
|
+
|
|
988
|
+
<script>
|
|
989
|
+
// Dialog Toggle
|
|
990
|
+
function toggleDialog(show) {
|
|
991
|
+
const dialog = document.getElementById('systemDialog');
|
|
992
|
+
if (show) {
|
|
993
|
+
dialog.classList.remove('hidden');
|
|
994
|
+
document.body.style.overflow = 'hidden';
|
|
995
|
+
} else {
|
|
996
|
+
dialog.classList.add('hidden');
|
|
997
|
+
document.body.style.overflow = 'auto';
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
// Close dialog on overlay click
|
|
1002
|
+
const systemDialog = document.getElementById('systemDialog');
|
|
1003
|
+
if (systemDialog) {
|
|
1004
|
+
systemDialog.addEventListener('click', (e) => {
|
|
1005
|
+
if (e.target === systemDialog) {
|
|
1006
|
+
toggleDialog(false);
|
|
1007
|
+
}
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
1010
|
+
</script>
|
|
1011
|
+
</body>
|
|
1012
|
+
</html>
|