@howssatoshi/quantumcss 1.5.0 → 1.5.2
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 +1 -1
- package/dist/quantum.min.css +4885 -1
- package/examples/index.html +1 -1
- package/examples/kitchen-sink.html +1 -1
- package/examples/news-template.html +60 -63
- package/examples/shopping/index.html +43 -21
- package/examples/starlight.html +16 -17
- package/examples/travel/index.html +4 -5
- package/package.json +1 -1
- package/src/defaults.js +5 -0
- package/src/generator.js +10 -2
- package/src/styles/quantum-base.css +7 -7
- package/src/styles/quantum-components.css +6 -5
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.5.
|
|
64
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.5.2</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.
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
</style>
|
|
36
36
|
</head>
|
|
37
37
|
<body class="p-8">
|
|
38
|
-
<button class="theme-toggle" onclick="
|
|
38
|
+
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
39
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
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
41
|
</button>
|
|
@@ -7,14 +7,19 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
8
|
<script src="../src/starlight.js"></script>
|
|
9
9
|
<style>
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
/* Base / Dark Mode (Default) */
|
|
11
|
+
body {
|
|
12
|
+
background-color: #020617;
|
|
13
|
+
color: #f1f5f9;
|
|
14
|
+
transition: background-color 0.5s ease, color 0.5s ease;
|
|
15
|
+
}
|
|
16
|
+
|
|
12
17
|
.news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
|
|
13
18
|
@media (min-width: 1024px) {
|
|
14
19
|
.news-grid { grid-template-columns: 3fr 1fr; }
|
|
15
20
|
}
|
|
16
21
|
.featured-card { position: relative; overflow: hidden; border-radius: 1rem; }
|
|
17
|
-
.featured-card img { width: 100%; height: 600px; object-
|
|
22
|
+
.featured-card img { width: 100%; height: 600px; object-fit: cover; transition: transform 0.5s ease; }
|
|
18
23
|
.featured-card:hover img { transform: scale(1.03); }
|
|
19
24
|
.featured-overlay {
|
|
20
25
|
position: absolute;
|
|
@@ -30,66 +35,64 @@
|
|
|
30
35
|
width: 2.5rem;
|
|
31
36
|
height: 2.5rem;
|
|
32
37
|
border-radius: 50%;
|
|
33
|
-
transition:
|
|
38
|
+
transition: all 0.3s ease;
|
|
34
39
|
display: flex;
|
|
35
40
|
align-items: center;
|
|
36
41
|
justify-content: center;
|
|
37
42
|
flex-shrink: 0;
|
|
43
|
+
color: #f1f5f9;
|
|
38
44
|
}
|
|
39
45
|
|
|
40
46
|
.theme-toggle:hover {
|
|
41
47
|
background: rgba(255, 255, 255, 0.1);
|
|
42
48
|
}
|
|
43
49
|
|
|
44
|
-
|
|
45
|
-
background: rgba(0, 0, 0, 0.05);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
nav {
|
|
49
|
-
background-color: #020617 !important;
|
|
50
|
-
border-bottom-color: #f1f5f9 !important;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
body.light-mode nav {
|
|
54
|
-
background-color: #ffffff !important;
|
|
55
|
-
border-bottom-color: #0f172a !important;
|
|
56
|
-
}
|
|
57
|
-
|
|
50
|
+
/* Dark Mode Styles (Default Overrides) */
|
|
58
51
|
.bg-white {
|
|
59
52
|
background-color: #020617 !important;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
body.light-mode .bg-white {
|
|
63
|
-
background-color: #ffffff !important;
|
|
53
|
+
color: #f1f5f9 !important;
|
|
64
54
|
}
|
|
65
55
|
|
|
66
56
|
.bg-slate-50 {
|
|
67
57
|
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
68
58
|
}
|
|
69
59
|
|
|
70
|
-
|
|
71
|
-
background-color: #
|
|
60
|
+
.bg-slate-900 {
|
|
61
|
+
background-color: #f1f5f9 !important;
|
|
62
|
+
color: #020617 !important;
|
|
72
63
|
}
|
|
73
64
|
|
|
74
65
|
.border-slate-100 {
|
|
75
66
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
76
67
|
}
|
|
77
68
|
|
|
78
|
-
body.light-mode .border-slate-100 {
|
|
79
|
-
border-color: #f1f5f9 !important;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
69
|
.text-slate-900,
|
|
83
70
|
.text-slate-500 {
|
|
84
71
|
color: #f1f5f9 !important;
|
|
85
72
|
}
|
|
86
73
|
|
|
87
|
-
|
|
88
|
-
|
|
74
|
+
.text-blue-600 {
|
|
75
|
+
color: #60a5fa !important;
|
|
76
|
+
}
|
|
89
77
|
|
|
90
|
-
|
|
91
|
-
background-color: #
|
|
92
|
-
color:
|
|
78
|
+
nav {
|
|
79
|
+
background-color: #020617 !important;
|
|
80
|
+
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Light Mode Overrides */
|
|
84
|
+
body.light-mode {
|
|
85
|
+
background-color: #ffffff;
|
|
86
|
+
color: #0f172a;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
body.light-mode .bg-white {
|
|
90
|
+
background-color: #ffffff !important;
|
|
91
|
+
color: #0f172a !important;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.light-mode .bg-slate-50 {
|
|
95
|
+
background-color: #f8fafc !important;
|
|
93
96
|
}
|
|
94
97
|
|
|
95
98
|
body.light-mode .bg-slate-900 {
|
|
@@ -97,29 +100,34 @@
|
|
|
97
100
|
color: #ffffff !important;
|
|
98
101
|
}
|
|
99
102
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
color: rgba(255, 255, 255, 0.2) !important;
|
|
103
|
+
body.light-mode .border-slate-100 {
|
|
104
|
+
border-color: #f1f5f9 !important;
|
|
103
105
|
}
|
|
104
106
|
|
|
105
|
-
body.light-mode .text-slate-
|
|
106
|
-
|
|
107
|
+
body.light-mode .text-slate-900 { color: #0f172a !important; }
|
|
108
|
+
body.light-mode .text-slate-500 { color: #64748b !important; }
|
|
109
|
+
body.light-mode .text-blue-600 { color: #2563eb !important; }
|
|
110
|
+
|
|
111
|
+
body.light-mode nav {
|
|
112
|
+
background-color: #ffffff !important;
|
|
113
|
+
border-bottom-color: #0f172a !important;
|
|
107
114
|
}
|
|
108
115
|
|
|
109
|
-
.
|
|
110
|
-
color: #
|
|
116
|
+
body.light-mode .theme-toggle {
|
|
117
|
+
color: #0f172a;
|
|
111
118
|
}
|
|
112
119
|
|
|
113
|
-
body.light-mode .
|
|
114
|
-
|
|
120
|
+
body.light-mode .theme-toggle:hover {
|
|
121
|
+
background: rgba(0, 0, 0, 0.05);
|
|
115
122
|
}
|
|
116
123
|
|
|
117
|
-
|
|
118
|
-
|
|
124
|
+
/* Component Visibility */
|
|
125
|
+
.text-slate-100 {
|
|
126
|
+
color: rgba(255, 255, 255, 0.2) !important;
|
|
119
127
|
}
|
|
120
128
|
|
|
121
|
-
body.light-mode .
|
|
122
|
-
color: #
|
|
129
|
+
body.light-mode .text-slate-100 {
|
|
130
|
+
color: #cbd5e1 !important;
|
|
123
131
|
}
|
|
124
132
|
|
|
125
133
|
/* Glassy Hover for Icons */
|
|
@@ -133,19 +141,8 @@
|
|
|
133
141
|
backdrop-filter: blur(4px);
|
|
134
142
|
}
|
|
135
143
|
|
|
136
|
-
|
|
137
|
-
footer a:hover {
|
|
138
|
-
color: #93c5fd !important;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
body.light-mode footer a:hover {
|
|
142
|
-
color: #ea580c !important;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.moon-icon { display: block; }
|
|
146
|
-
body.light-mode .moon-icon { display: none; }
|
|
147
|
-
body.light-mode .sun-icon { display: block; }
|
|
148
|
-
.sun-icon { display: none; }
|
|
144
|
+
footer a:hover { color: #60a5fa !important; }
|
|
145
|
+
body.light-mode footer a:hover { color: #2563eb !important; }
|
|
149
146
|
</style>
|
|
150
147
|
</head>
|
|
151
148
|
<body class="font-sans antialiased">
|
|
@@ -164,7 +161,7 @@
|
|
|
164
161
|
<!-- Navigation -->
|
|
165
162
|
<nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
|
|
166
163
|
<div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
167
|
-
<div class="text-4xl font-black tracking-tighter uppercase italic">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
164
|
+
<div class="text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
168
165
|
<div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
|
|
169
166
|
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
|
|
170
167
|
<a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
|
|
@@ -173,10 +170,10 @@
|
|
|
173
170
|
<a href="#" class="text-blue-600">Live Updates</a>
|
|
174
171
|
</div>
|
|
175
172
|
<div class="flex items-center gap-4">
|
|
176
|
-
<button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors">
|
|
173
|
+
<button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors text-primary">
|
|
177
174
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
178
175
|
</button>
|
|
179
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
176
|
+
<div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
|
|
180
177
|
<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>
|
|
181
178
|
<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>
|
|
182
179
|
</div>
|
|
@@ -276,7 +273,7 @@
|
|
|
276
273
|
<footer class="bg-slate-900 text-white py-20 mt-24">
|
|
277
274
|
<div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
|
|
278
275
|
<div class="col-span-1 md:col-span-2">
|
|
279
|
-
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
276
|
+
<div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
|
|
280
277
|
<p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>
|
|
281
278
|
</div>
|
|
282
279
|
<div>
|
|
@@ -48,68 +48,90 @@
|
|
|
48
48
|
background: rgba(255, 255, 255, 0.1);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
body.dark-mode .bg-white
|
|
51
|
+
body.dark-mode .bg-white,
|
|
52
|
+
html[data-theme="dark"] .bg-white {
|
|
52
53
|
background-color: #0f172a !important;
|
|
53
54
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
55
|
+
color: #f1f5f9 !important;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
|
-
body.dark-mode .bg-white\/80
|
|
58
|
+
body.dark-mode .bg-white\/80,
|
|
59
|
+
html[data-theme="dark"] .bg-white\/80 {
|
|
57
60
|
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
body.dark-mode .glass
|
|
63
|
+
body.dark-mode .glass,
|
|
64
|
+
html[data-theme="dark"] .glass {
|
|
61
65
|
background-color: rgba(255, 255, 255, 0.08) !important;
|
|
62
66
|
border-color: rgba(255, 255, 255, 0.15) !important;
|
|
63
67
|
}
|
|
64
68
|
|
|
65
|
-
body.dark-mode .bg-slate-100
|
|
69
|
+
body.dark-mode .bg-slate-100,
|
|
70
|
+
html[data-theme="dark"] .bg-slate-100 {
|
|
66
71
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
67
72
|
}
|
|
68
73
|
|
|
69
|
-
body.dark-mode .border-slate-100
|
|
74
|
+
body.dark-mode .border-slate-100,
|
|
75
|
+
html[data-theme="dark"] .border-slate-100 {
|
|
70
76
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
71
77
|
}
|
|
72
78
|
|
|
73
|
-
body.dark-mode nav
|
|
79
|
+
body.dark-mode nav,
|
|
80
|
+
html[data-theme="dark"] nav {
|
|
74
81
|
background-color: rgba(2, 6, 23, 0.8) !important;
|
|
75
82
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
76
83
|
}
|
|
77
84
|
|
|
78
|
-
body.light-mode footer
|
|
85
|
+
body.light-mode footer,
|
|
86
|
+
html[data-theme="light"] footer {
|
|
79
87
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
80
88
|
backdrop-filter: blur(20px);
|
|
81
89
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
82
90
|
color: #1e293b !important;
|
|
83
91
|
}
|
|
84
92
|
|
|
85
|
-
body.light-mode footer h5
|
|
93
|
+
body.light-mode footer h5,
|
|
94
|
+
html[data-theme="light"] footer h5 {
|
|
86
95
|
color: #64748b !important;
|
|
87
96
|
}
|
|
88
97
|
|
|
89
|
-
body.light-mode footer a
|
|
98
|
+
body.light-mode footer a,
|
|
99
|
+
html[data-theme="light"] footer a {
|
|
90
100
|
color: #475569 !important;
|
|
91
101
|
}
|
|
92
102
|
|
|
93
|
-
body.light-mode footer a:hover
|
|
103
|
+
body.light-mode footer a:hover,
|
|
104
|
+
html[data-theme="light"] footer a:hover {
|
|
94
105
|
color: #ea580c !important;
|
|
95
106
|
}
|
|
96
107
|
|
|
97
|
-
body.light-mode footer .text-orange-600
|
|
108
|
+
body.light-mode footer .text-orange-600,
|
|
109
|
+
html[data-theme="light"] footer .text-orange-600 {
|
|
98
110
|
color: #ea580c !important;
|
|
99
111
|
}
|
|
100
112
|
|
|
101
|
-
body.light-mode footer .bg-slate-950
|
|
113
|
+
body.light-mode footer .bg-slate-950,
|
|
114
|
+
html[data-theme="light"] footer .bg-slate-950 {
|
|
102
115
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
103
116
|
}
|
|
104
117
|
|
|
105
|
-
body.dark-mode .text-slate-900
|
|
118
|
+
body.dark-mode .text-slate-900,
|
|
119
|
+
body.dark-mode .text-slate-600,
|
|
120
|
+
body.dark-mode .text-slate-500,
|
|
121
|
+
html[data-theme="dark"] .text-slate-900,
|
|
122
|
+
html[data-theme="dark"] .text-slate-600,
|
|
123
|
+
html[data-theme="dark"] .text-slate-500 {
|
|
106
124
|
color: #f1f5f9 !important;
|
|
107
125
|
}
|
|
108
126
|
|
|
109
|
-
.
|
|
110
|
-
body.
|
|
111
|
-
body.
|
|
112
|
-
.
|
|
127
|
+
body.light-mode .text-slate-900,
|
|
128
|
+
body.light-mode .text-slate-600,
|
|
129
|
+
body.light-mode .text-slate-500,
|
|
130
|
+
html[data-theme="light"] .text-slate-900,
|
|
131
|
+
html[data-theme="light"] .text-slate-600,
|
|
132
|
+
html[data-theme="light"] .text-slate-500 {
|
|
133
|
+
color: #0f172a !important;
|
|
134
|
+
}
|
|
113
135
|
</style>
|
|
114
136
|
</head>
|
|
115
137
|
<body class="">
|
|
@@ -121,7 +143,7 @@
|
|
|
121
143
|
<!-- Navigation -->
|
|
122
144
|
<nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
|
|
123
145
|
<div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
|
|
124
|
-
<div class="text-2xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
146
|
+
<div class="text-2xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
125
147
|
<div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
|
126
148
|
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Men</a>
|
|
127
149
|
<a href="#" class="text-slate-900 hover:text-orange-600 transition-colors">Women</a>
|
|
@@ -129,12 +151,12 @@
|
|
|
129
151
|
<a href="#" class="text-orange-600 font-bold">Limited</a>
|
|
130
152
|
</div>
|
|
131
153
|
<div class="flex items-center space-x-6">
|
|
132
|
-
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
154
|
+
<div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
|
|
133
155
|
<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>
|
|
134
156
|
<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>
|
|
135
157
|
</div>
|
|
136
158
|
<div class="relative group">
|
|
137
|
-
<a href="#" class="text-
|
|
159
|
+
<a href="#" class="text-primary w-10 h-10 flex items-center justify-center bg-slate-100 rounded-full hover:bg-slate-200 transition-colors">
|
|
138
160
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
|
|
139
161
|
<span class="absolute -top-1 -right-1 bg-orange-600 text-white text-[9px] w-5 h-5 rounded-full flex items-center justify-center font-black shadow-lg border-2 border-white">3</span>
|
|
140
162
|
</a>
|
|
@@ -279,7 +301,7 @@
|
|
|
279
301
|
<div class="max-w-[1440px] mx-auto px-8">
|
|
280
302
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
281
303
|
<div class="lg:col-span-4 space-y-8">
|
|
282
|
-
<div class="text-4xl font-black tracking-tighter uppercase">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
304
|
+
<div class="text-4xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
|
|
283
305
|
<p class="text-slate-400 text-sm font-medium leading-loose max-w-sm">Redefining human aesthetics for the digital era through synthetic fiber and light integration.</p>
|
|
284
306
|
</div>
|
|
285
307
|
<div class="lg:col-span-2">
|
package/examples/starlight.html
CHANGED
|
@@ -9,11 +9,25 @@
|
|
|
9
9
|
<style>
|
|
10
10
|
body {
|
|
11
11
|
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
|
|
12
|
-
color: white;
|
|
13
12
|
min-height: 100vh;
|
|
14
13
|
overflow-x: hidden;
|
|
15
14
|
}
|
|
16
15
|
|
|
16
|
+
body.dark-mode {
|
|
17
|
+
color: #f1f5f9;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
body.light-mode {
|
|
21
|
+
background: #f1f5f9 !important;
|
|
22
|
+
color: #1e293b;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body.light-mode .glass {
|
|
26
|
+
background: rgba(0, 0, 0, 0.03) !important;
|
|
27
|
+
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
28
|
+
color: #1e293b !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
17
31
|
.hero-glow {
|
|
18
32
|
position: absolute;
|
|
19
33
|
top: -10%;
|
|
@@ -56,7 +70,7 @@
|
|
|
56
70
|
width: 2.5rem;
|
|
57
71
|
height: 2.5rem;
|
|
58
72
|
border-radius: 50%;
|
|
59
|
-
transition:
|
|
73
|
+
transition: all 0.3s ease;
|
|
60
74
|
display: flex;
|
|
61
75
|
align-items: center;
|
|
62
76
|
justify-content: center;
|
|
@@ -70,21 +84,6 @@
|
|
|
70
84
|
body.light-mode .theme-toggle:hover {
|
|
71
85
|
background: rgba(0, 0, 0, 0.05);
|
|
72
86
|
}
|
|
73
|
-
|
|
74
|
-
body.light-mode {
|
|
75
|
-
background: #f1f5f9;
|
|
76
|
-
color: #1e293b;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
body.light-mode .glass {
|
|
80
|
-
background: rgba(0, 0, 0, 0.03) !important;
|
|
81
|
-
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
82
|
-
color: #1e293b !important;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.sun-icon { display: none; }
|
|
86
|
-
body.light-mode .sun-icon { display: block; }
|
|
87
|
-
body.light-mode .moon-icon { display: none; }
|
|
88
87
|
</style>
|
|
89
88
|
</head>
|
|
90
89
|
<body class="p-8 min-h-screen">
|
|
@@ -12,8 +12,11 @@
|
|
|
12
12
|
overflow-x: hidden;
|
|
13
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
14
|
}
|
|
15
|
+
body.dark-mode {
|
|
16
|
+
color: #f1f5f9;
|
|
17
|
+
}
|
|
15
18
|
body.light-mode {
|
|
16
|
-
background: #f1f5f9;
|
|
19
|
+
background: #f1f5f9 !important;
|
|
17
20
|
color: #1e293b;
|
|
18
21
|
}
|
|
19
22
|
.hero-glow {
|
|
@@ -59,10 +62,6 @@
|
|
|
59
62
|
color: #1e293b !important;
|
|
60
63
|
}
|
|
61
64
|
|
|
62
|
-
.sun-icon { display: none; }
|
|
63
|
-
body.light-mode .sun-icon { display: block; }
|
|
64
|
-
body.light-mode .moon-icon { display: none; }
|
|
65
|
-
|
|
66
65
|
body.light-mode .starlight-card p,
|
|
67
66
|
body.light-mode header p,
|
|
68
67
|
body.light-mode section p {
|
package/package.json
CHANGED
package/src/defaults.js
CHANGED
|
@@ -37,6 +37,11 @@ const defaultTheme = {
|
|
|
37
37
|
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
38
38
|
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
39
39
|
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
|
40
|
+
},
|
|
41
|
+
maxWidth: {
|
|
42
|
+
'xs': '20rem', 'sm': '24rem', 'md': '28rem', 'lg': '32rem', 'xl': '36rem',
|
|
43
|
+
'2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem',
|
|
44
|
+
'full': '100%', 'min': 'min-content', 'max': 'max-content', 'fit': 'fit-content', 'prose': '65ch',
|
|
40
45
|
}
|
|
41
46
|
};
|
|
42
47
|
|
package/src/generator.js
CHANGED
|
@@ -15,6 +15,8 @@ function generateCSS(configPath) {
|
|
|
15
15
|
theme.spacing = theme.spacing || {};
|
|
16
16
|
theme.borderRadius = theme.borderRadius || {};
|
|
17
17
|
theme.fontSize = theme.fontSize || {};
|
|
18
|
+
theme.maxWidth = theme.maxWidth || {};
|
|
19
|
+
theme.shadows = theme.shadows || {};
|
|
18
20
|
|
|
19
21
|
if (config.theme && config.theme.extend) {
|
|
20
22
|
const ext = config.theme.extend;
|
|
@@ -22,6 +24,8 @@ function generateCSS(configPath) {
|
|
|
22
24
|
if (ext.spacing) Object.assign(theme.spacing, ext.spacing);
|
|
23
25
|
if (ext.borderRadius) Object.assign(theme.borderRadius, ext.borderRadius);
|
|
24
26
|
if (ext.fontSize) Object.assign(theme.fontSize, ext.fontSize);
|
|
27
|
+
if (ext.maxWidth) Object.assign(theme.maxWidth, ext.maxWidth);
|
|
28
|
+
if (ext.boxShadow) Object.assign(theme.shadows, ext.boxShadow);
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
const flattenedColors = {};
|
|
@@ -204,8 +208,12 @@ function generateCSS(configPath) {
|
|
|
204
208
|
property = sideMap[prefix];
|
|
205
209
|
let v = valKey;
|
|
206
210
|
if (v.startsWith('[') && v.endsWith(']')) v = v.slice(1, -1);
|
|
207
|
-
else if (v.includes('/')) v = `${(parseFloat(v.split('/')[0])/parseFloat(v.split('/')[1])*100).toFixed(2)}%`;
|
|
208
|
-
else
|
|
211
|
+
else if (v.includes('/')) v = `${(parseFloat(v.split('/')[0]) / parseFloat(v.split('/')[1]) * 100).toFixed(2)}%`;
|
|
212
|
+
else {
|
|
213
|
+
// Priority: 1. Specific theme map (e.g. maxWidth for max-w) 2. spacing map 3. Numeric conversion 4. raw value
|
|
214
|
+
const themeMap = prefix === 'max-w' ? theme.maxWidth : (theme[prefix] || theme.spacing);
|
|
215
|
+
v = (themeMap && themeMap[v]) || theme.spacing[v] || (/^\d+(\.\d+)?$/.test(v) ? `${parseFloat(v) * 0.25}rem` : v);
|
|
216
|
+
}
|
|
209
217
|
value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
|
|
210
218
|
} else if (prefix === 'shadow') {
|
|
211
219
|
if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* QuantumCSS + Starlight UI
|
|
3
3
|
* Advanced utility-first framework with ethereal cosmic aesthetics
|
|
4
|
-
* Version: 1.5.
|
|
4
|
+
* Version: 1.5.2
|
|
5
5
|
* Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -210,25 +210,25 @@ textarea {
|
|
|
210
210
|
gap: var(--space-8);
|
|
211
211
|
}
|
|
212
212
|
|
|
213
|
-
@
|
|
213
|
+
@media (min-width: 640px) {
|
|
214
214
|
.container {
|
|
215
215
|
max-width: 640px;
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
@
|
|
219
|
+
@media (min-width: 768px) {
|
|
220
220
|
.container {
|
|
221
221
|
max-width: 768px;
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
224
|
|
|
225
|
-
@
|
|
225
|
+
@media (min-width: 1024px) {
|
|
226
226
|
.container {
|
|
227
227
|
max-width: 1024px;
|
|
228
228
|
}
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
@
|
|
231
|
+
@media (min-width: 1280px) {
|
|
232
232
|
.container {
|
|
233
233
|
max-width: 1280px;
|
|
234
234
|
}
|
|
@@ -810,13 +810,13 @@ body.dark-mode {
|
|
|
810
810
|
html[data-theme="light"] body,
|
|
811
811
|
body.light-mode {
|
|
812
812
|
background: var(--light-bg) !important;
|
|
813
|
-
color: var(--light-text)
|
|
813
|
+
color: var(--light-text);
|
|
814
814
|
}
|
|
815
815
|
|
|
816
816
|
html[data-theme="dark"] body,
|
|
817
817
|
body.dark-mode {
|
|
818
818
|
background: var(--color-starlight-deep) !important;
|
|
819
|
-
color: #f1f5f9
|
|
819
|
+
color: #f1f5f9;
|
|
820
820
|
}
|
|
821
821
|
|
|
822
822
|
|
|
@@ -102,9 +102,9 @@
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.btn-secondary {
|
|
105
|
-
background-color: rgb(255 255 255 /
|
|
106
|
-
color:
|
|
107
|
-
border: 1px solid rgb(255 255 255 /
|
|
105
|
+
background-color: rgb(255 255 255 / 8%);
|
|
106
|
+
color: #ffffff !important;
|
|
107
|
+
border: 1px solid rgb(255 255 255 / 15%);
|
|
108
108
|
backdrop-filter: blur(12px);
|
|
109
109
|
-webkit-backdrop-filter: blur(12px);
|
|
110
110
|
}
|
|
@@ -113,9 +113,10 @@
|
|
|
113
113
|
background-color: rgb(255 255 255 / 10%);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
body.light-mode .btn-secondary
|
|
116
|
+
body.light-mode .btn-secondary,
|
|
117
|
+
html[data-theme="light"] .btn-secondary {
|
|
117
118
|
background-color: rgb(0 0 0 / 3%);
|
|
118
|
-
color: #1e293b;
|
|
119
|
+
color: #1e293b !important;
|
|
119
120
|
border-color: rgb(0 0 0 / 10%);
|
|
120
121
|
}
|
|
121
122
|
|