@howssatoshi/quantumcss 1.7.3 → 1.7.4
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 +30 -26
- package/dist/quantum.css +2374 -0
- package/dist/quantum.min.css +1 -6473
- package/examples/admin-panel.html +12 -9
- package/examples/analytics-dashboard.html +53 -1
- package/examples/blog-template.html +34 -15
- package/examples/chat-messaging.html +7 -6
- package/examples/email-template.html +42 -19
- package/examples/gaming-template.html +7 -7
- package/examples/gradient-test.html +106 -30
- package/examples/index.html +17 -17
- package/examples/kitchen-sink.html +164 -38
- package/examples/news-template.html +13 -13
- package/examples/portfolio-resume.html +23 -8
- package/examples/shopping/index.html +15 -15
- package/examples/travel/index.html +51 -31
- package/examples/verify_fixes.html +2 -2
- package/examples/verify_presets.html +1 -1
- package/package.json +3 -1
- package/src/cli.js +160 -27
- package/src/defaults.js +40 -23
- package/src/generator.js +191 -45
- package/src/starlight.js +6 -0
- package/src/styles/quantum-base.css +12 -1
- package/src/styles/quantum-components.css +2 -70
- package/src/styles/starlight.css +64 -43
- package/src/styles/quantum-responsive.css +0 -363
|
@@ -3,51 +3,127 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
7
|
-
<link rel="stylesheet" href="../
|
|
6
|
+
<title>Quantum CSS - Interactivity & Theme Test</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<style>
|
|
9
9
|
.test-box {
|
|
10
|
-
width:
|
|
11
|
-
height:
|
|
12
|
-
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 120px;
|
|
12
|
+
border-radius: 1rem;
|
|
13
13
|
display: flex;
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
color: white;
|
|
17
|
-
font-weight:
|
|
17
|
+
font-weight: 900;
|
|
18
|
+
font-size: 1.25rem;
|
|
19
|
+
text-transform: uppercase;
|
|
20
|
+
letter-spacing: 0.1em;
|
|
21
|
+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
18
22
|
}
|
|
23
|
+
|
|
24
|
+
/* Theme Styles */
|
|
25
|
+
.theme-blue-peach .hero-gradient { background: linear-gradient(to right, var(--q-color-starlight-blue), var(--q-color-starlight-peach)); }
|
|
26
|
+
.theme-purple-via .hero-gradient { background: linear-gradient(to br, #3b82f6, #a855f7, #ef4444); }
|
|
27
|
+
|
|
28
|
+
body { transition: background-color 0.5s ease; }
|
|
19
29
|
</style>
|
|
20
30
|
</head>
|
|
21
|
-
<body class="bg-starlight-deep p-10">
|
|
22
|
-
|
|
23
|
-
|
|
31
|
+
<body class="bg-starlight-deep p-10 theme-blue-peach">
|
|
32
|
+
|
|
33
|
+
<!-- Theme Toggle -->
|
|
34
|
+
<div class="mb-12 flex justify-between items-center">
|
|
35
|
+
<div>
|
|
36
|
+
<h1 class="text-white text-2xl font-black uppercase tracking-widest mb-2">Interactivity Test</h1>
|
|
37
|
+
<p class="text-slate-500 text-sm">Testing JIT Gradients, Focus Glows, and Overlays</p>
|
|
38
|
+
</div>
|
|
39
|
+
<button class="btn-starlight px-8 py-3 rounded-full font-bold" onclick="toggleTheme()">
|
|
40
|
+
Switch Visual Theme
|
|
41
|
+
</button>
|
|
24
42
|
</div>
|
|
25
|
-
|
|
26
|
-
|
|
43
|
+
|
|
44
|
+
<!-- Hero Gradient Section -->
|
|
45
|
+
<div class="mb-10">
|
|
46
|
+
<div class="hero-gradient test-box shadow-2xl">
|
|
47
|
+
Active Theme Gradient
|
|
48
|
+
</div>
|
|
27
49
|
</div>
|
|
28
|
-
|
|
29
|
-
|
|
50
|
+
|
|
51
|
+
<!-- Text Effects -->
|
|
52
|
+
<div class="mb-12">
|
|
53
|
+
<div class="text-transparent bg-clip-text bg-gradient-to-r from-starlight-orange to-starlight-peach text-6xl font-black mb-4">
|
|
54
|
+
GRADIENT TEXT
|
|
55
|
+
</div>
|
|
56
|
+
<div class="flex gap-4 items-center">
|
|
57
|
+
<div class="bg-starlight-blue_10 border border-starlight-blue_30 p-4 rounded-lg text-starlight-blue font-bold text-sm">
|
|
58
|
+
OPACITY BG + BORDER
|
|
59
|
+
</div>
|
|
60
|
+
<div class="border-4 border-red-500_50 p-4 rounded-lg font-black text-white uppercase tracking-tighter">
|
|
61
|
+
50% RED BORDER
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
30
64
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
65
|
+
|
|
66
|
+
<!-- SVG & Overlay Section -->
|
|
67
|
+
<div class="mb-12">
|
|
68
|
+
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-4">SVG Positioning Primitives</h3>
|
|
69
|
+
<div class="relative bg-slate-900 rounded-2xl overflow-hidden border border-white_5" style="width: 100%; height: 300px;">
|
|
70
|
+
<svg class="svg-fluid opacity-20" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
71
|
+
<rect x="0" y="0" width="100" height="100" fill="url(#grad)" />
|
|
72
|
+
<defs>
|
|
73
|
+
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
74
|
+
<stop offset="0%" style="stop-color:var(--q-color-starlight-blue);stop-opacity:1" />
|
|
75
|
+
<stop offset="100%" style="stop-color:var(--q-color-purple-500);stop-opacity:1" />
|
|
76
|
+
</linearGradient>
|
|
77
|
+
</defs>
|
|
78
|
+
</svg>
|
|
79
|
+
<div class="overlay-base text-white text-3xl font-black text-center w-full pointer-events-none">
|
|
80
|
+
CENTERED<br>OVERLAY
|
|
81
|
+
</div>
|
|
82
|
+
<div class="overlay-top-left p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">TOP LEFT</div>
|
|
83
|
+
<div class="overlay-bottom-right p-4 bg-black_50 text-[10px] font-bold text-starlight-blue tracking-widest">BOTTOM RIGHT</div>
|
|
84
|
+
</div>
|
|
33
85
|
</div>
|
|
34
|
-
|
|
35
|
-
|
|
86
|
+
|
|
87
|
+
<!-- Focus Glow Interaction Section -->
|
|
88
|
+
<div class="mb-12">
|
|
89
|
+
<h3 class="text-slate-500 text-[10px] font-black uppercase tracking-widest mb-6">Interactive Focus Primitives (Click to Test Glow)</h3>
|
|
90
|
+
|
|
91
|
+
<div class="flex flex-wrap gap-6 mb-8">
|
|
92
|
+
<button class="btn-starlight focus-glow-purple-500 px-8 py-4">Purple Glow Button</button>
|
|
93
|
+
<button class="btn-secondary focus-glow-orange-500 px-8 py-4">Orange Glow Button</button>
|
|
94
|
+
<button class="bg-white_5 p-4 rounded-xl focus-glow text-white font-bold px-8">Default Glow Button</button>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
98
|
+
<div>
|
|
99
|
+
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Purple Focus Input</label>
|
|
100
|
+
<input type="text" class="input-starlight focus-glow-purple-500 h-14" placeholder="Focus for Purple Glow...">
|
|
101
|
+
</div>
|
|
102
|
+
<div>
|
|
103
|
+
<label class="text-[10px] font-bold text-slate-500 uppercase mb-3 block">Orange Focus Input</label>
|
|
104
|
+
<input type="text" class="input-starlight focus-glow-orange-500 h-14" placeholder="Focus for Orange Glow...">
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
36
107
|
</div>
|
|
37
108
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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>
|
|
109
|
+
<!-- Plugin Extension Test -->
|
|
110
|
+
<div class="mt-20 pt-10 border-t border-white_10">
|
|
111
|
+
<h3 class="text-white text-xl font-black uppercase tracking-widest mb-6">Plugin Extension Test</h3>
|
|
112
|
+
<div class="flex gap-8 items-center">
|
|
113
|
+
<button class="btn-neon">Neon Plugin Button</button>
|
|
114
|
+
<div class="text-glow text-4xl font-black text-neon-green">NEON GLOW TEXT</div>
|
|
115
|
+
</div>
|
|
51
116
|
</div>
|
|
117
|
+
|
|
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 {
|
|
124
|
+
body.classList.replace('theme-purple-via', 'theme-blue-peach');
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
</script>
|
|
52
128
|
</body>
|
|
53
129
|
</html>
|
package/examples/index.html
CHANGED
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
<div>
|
|
60
60
|
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Node Priority</label>
|
|
61
61
|
<div class="flex gap-3">
|
|
62
|
-
<span class="badge-base bg-starlight-
|
|
63
|
-
<span class="badge-base bg-
|
|
62
|
+
<span class="badge-base bg-starlight-blue_10 text-starlight-blue border-starlight-blue_20 px-4 py-2">Alpha</span>
|
|
63
|
+
<span class="badge-base bg-white_5 text-slate-500 border-white_10 px-4 py-2">Omega</span>
|
|
64
64
|
</div>
|
|
65
65
|
</div>
|
|
66
66
|
<div>
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
<header class="hero container">
|
|
84
84
|
<div class="pt-8 pb-12 text-center">
|
|
85
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.
|
|
85
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.4</span>
|
|
86
86
|
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
87
87
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
88
88
|
A standardized, high-performance UI library.
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
101
101
|
<div class="grid-3">
|
|
102
102
|
<a href="blog-template.html" class="starlight-card">
|
|
103
|
-
<div class="h-40 bg-gradient-to-br from-blue-
|
|
103
|
+
<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">
|
|
104
104
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
105
105
|
<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>
|
|
106
106
|
</svg>
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
</a>
|
|
111
111
|
|
|
112
112
|
<a href="email-template.html" class="starlight-card">
|
|
113
|
-
<div class="h-40 bg-gradient-to-br from-
|
|
113
|
+
<div class="h-40 bg-gradient-to-br from-starlight_20 to-blue-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="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>
|
|
116
116
|
</svg>
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
</a>
|
|
121
121
|
|
|
122
122
|
<a href="gaming-template.html" class="starlight-card">
|
|
123
|
-
<div class="h-40 bg-gradient-to-br from-purple-
|
|
123
|
+
<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">
|
|
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="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>
|
|
126
126
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
</a>
|
|
132
132
|
|
|
133
133
|
<a href="news-template.html" class="starlight-card">
|
|
134
|
-
<div class="h-40 bg-gradient-to-br from-orange-
|
|
134
|
+
<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">
|
|
135
135
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
136
136
|
<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>
|
|
137
137
|
</svg>
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
</a>
|
|
142
142
|
|
|
143
143
|
<a href="shopping/index.html" class="starlight-card">
|
|
144
|
-
<div class="h-40 bg-gradient-to-br from-green-
|
|
144
|
+
<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">
|
|
145
145
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
146
146
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
147
147
|
</svg>
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
</a>
|
|
152
152
|
|
|
153
153
|
<a href="travel/index.html" class="starlight-card">
|
|
154
|
-
<div class="h-40 bg-gradient-to-br from-cyan-
|
|
154
|
+
<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">
|
|
155
155
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
156
156
|
<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>
|
|
157
157
|
</svg>
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
</a>
|
|
162
162
|
|
|
163
163
|
<a href="analytics-dashboard.html" class="starlight-card">
|
|
164
|
-
<div class="h-40 bg-gradient-to-br from-indigo-
|
|
164
|
+
<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">
|
|
165
165
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
166
166
|
<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>
|
|
167
167
|
</svg>
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
</a>
|
|
172
172
|
|
|
173
173
|
<a href="admin-panel.html" class="starlight-card">
|
|
174
|
-
<div class="h-40 bg-gradient-to-br from-rose-
|
|
174
|
+
<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">
|
|
175
175
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
176
176
|
<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>
|
|
177
177
|
</svg>
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
</a>
|
|
182
182
|
|
|
183
183
|
<a href="music-streaming.html" class="starlight-card">
|
|
184
|
-
<div class="h-40 bg-gradient-to-br from-pink-
|
|
184
|
+
<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">
|
|
185
185
|
<svg class="w-16 h-16 text-starlight" fill="currentColor" viewBox="0 0 24 24">
|
|
186
186
|
<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"/>
|
|
187
187
|
</svg>
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
</a>
|
|
192
192
|
|
|
193
193
|
<a href="chat-messaging.html" class="starlight-card">
|
|
194
|
-
<div class="h-40 bg-gradient-to-br from-blue-
|
|
194
|
+
<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">
|
|
195
195
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
196
196
|
<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>
|
|
197
197
|
</svg>
|
|
@@ -201,7 +201,7 @@
|
|
|
201
201
|
</a>
|
|
202
202
|
|
|
203
203
|
<a href="portfolio-resume.html" class="starlight-card">
|
|
204
|
-
<div class="h-40 bg-gradient-to-br from-violet-
|
|
204
|
+
<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">
|
|
205
205
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
206
206
|
<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>
|
|
207
207
|
</svg>
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
</a>
|
|
212
212
|
|
|
213
213
|
<a href="video-streaming.html" class="starlight-card">
|
|
214
|
-
<div class="h-40 bg-gradient-to-br from-red-
|
|
214
|
+
<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">
|
|
215
215
|
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
216
216
|
<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>
|
|
217
217
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
@@ -267,9 +267,9 @@
|
|
|
267
267
|
<div class="starlight-card">
|
|
268
268
|
<h3 class="text-xl font-bold mb-6">Loading States</h3>
|
|
269
269
|
<div class="flex flex-col gap-4">
|
|
270
|
-
<div class="skeleton w-
|
|
270
|
+
<div class="skeleton w-3_4 h-6"></div>
|
|
271
271
|
<div class="skeleton w-full h-12"></div>
|
|
272
|
-
<div class="skeleton w-
|
|
272
|
+
<div class="skeleton w-1_2 h-4"></div>
|
|
273
273
|
</div>
|
|
274
274
|
<p class="text-xs text-muted mt-6">Visible and high-contrast in both light and dark modes.</p>
|
|
275
275
|
</div>
|