gullu-css 1.0.2 → 1.0.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 +6 -22
- package/docs/index.html +574 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,9 +4,10 @@ A blazing-fast, **zero-build** runtime utility CSS engine.
|
|
|
4
4
|
|
|
5
5
|
Instead of waiting for Webpack or Vite to compile hundreds of gigabytes of node modules, **Gullu CSS Engine operates entirely in the browser at runtime**. By leveraging modern browser JavaScript, Gullu CSS reads your utility classes natively and injects styles dynamically. No complicated configurations. No PostCSS process. Just instantly applied styles.
|
|
6
6
|
|
|
7
|
+
📖 **[Browse Full Class Reference & Docs →](https://gullu-css.netlify.app/)**
|
|
8
|
+
|
|
7
9
|
## 🚀 Features
|
|
8
10
|
- **Zero Build Step:** Runs 100% in browser JS. No build pipelines.
|
|
9
|
-
- **O(N) Single-Pass Performance:** Ultra-optimized scanner parses the DOM once.
|
|
10
11
|
- **200+ Semantic Tokens:** Out of the box Oklch color palettes, spacing systems, and scale tiers.
|
|
11
12
|
- **Arbitrary JIT Values:** On-the-fly values using square bracket syntax (e.g., `text-[35px]`).
|
|
12
13
|
- **Lightweight Core:** Modularized rulesets (Layout, Typography, Backgrounds, Effects, etc.).
|
|
@@ -28,35 +29,18 @@ npm install gullu-css
|
|
|
28
29
|
|
|
29
30
|
Because it's an ES6 module, you can easily drop it into standard HTML, React, Vue, Next.js, or any modern framework.
|
|
30
31
|
|
|
31
|
-
### Vanilla
|
|
32
|
-
|
|
32
|
+
### ⚡ Vanilla HTML (Via CDN)
|
|
33
|
+
The easiest way to get started is to import Gullu CSS straight from `unpkg` as a module directly in your HTML. No build step required!
|
|
33
34
|
|
|
34
35
|
```html
|
|
35
|
-
<!-- Register local NPM package in Import Map -->
|
|
36
|
-
<script type="importmap">
|
|
37
|
-
{
|
|
38
|
-
"imports": {
|
|
39
|
-
"gullu-css": "./node_modules/gullu-css/main.js"
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
</script>
|
|
43
|
-
|
|
44
36
|
<script type="module">
|
|
45
|
-
|
|
46
|
-
import { initEngine } from "gullu-css";
|
|
37
|
+
import { initEngine } from "https://unpkg.com/gullu-css@1.0.1/main.js";
|
|
47
38
|
initEngine();
|
|
48
39
|
</script>
|
|
49
40
|
```
|
|
50
41
|
|
|
51
|
-
|
|
52
|
-
Don't want to use NPM at all? You can load Gullu CSS straight from `unpkg` as a module directly in your HTML!
|
|
42
|
+
---
|
|
53
43
|
|
|
54
|
-
```html
|
|
55
|
-
<script type="module">
|
|
56
|
-
import { initEngine } from "https://unpkg.com/gullu-css@1.0.1/main.js";
|
|
57
|
-
initEngine();
|
|
58
|
-
</script>
|
|
59
|
-
```
|
|
60
44
|
|
|
61
45
|
### React / Next.js
|
|
62
46
|
You can trigger the engine during page mount or context initialization:
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,574 @@
|
|
|
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>Gullu CSS — Class Reference</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
10
|
+
:root {
|
|
11
|
+
--green: #34d399;
|
|
12
|
+
--green-dim: rgba(52,211,153,0.15);
|
|
13
|
+
--green-border: rgba(52,211,153,0.25);
|
|
14
|
+
--bg: #0b0f0e;
|
|
15
|
+
--surface: #111a17;
|
|
16
|
+
--surface2: #172320;
|
|
17
|
+
--border: rgba(255,255,255,0.07);
|
|
18
|
+
--text: #e2e8f0;
|
|
19
|
+
--muted: #64748b;
|
|
20
|
+
--font: 'Inter', sans-serif;
|
|
21
|
+
--mono: 'JetBrains Mono', monospace;
|
|
22
|
+
}
|
|
23
|
+
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
|
|
24
|
+
|
|
25
|
+
/* HEADER */
|
|
26
|
+
header {
|
|
27
|
+
position: sticky; top: 0; z-index: 50;
|
|
28
|
+
background: rgba(11,15,14,0.9);
|
|
29
|
+
backdrop-filter: blur(12px);
|
|
30
|
+
border-bottom: 1px solid var(--border);
|
|
31
|
+
padding: 14px 28px;
|
|
32
|
+
display: flex; align-items: center; gap: 20px;
|
|
33
|
+
}
|
|
34
|
+
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
|
|
35
|
+
.logo-dot { width: 28px; height: 28px; border-radius: 8px; background: var(--green); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #000; }
|
|
36
|
+
.logo-text { font-size: 16px; font-weight: 700; color: var(--text); }
|
|
37
|
+
.logo-text span { color: var(--green); }
|
|
38
|
+
|
|
39
|
+
/* SEARCH */
|
|
40
|
+
.search-wrap { flex: 1; max-width: 480px; position: relative; }
|
|
41
|
+
.search-wrap input {
|
|
42
|
+
width: 100%; padding: 9px 14px 9px 38px;
|
|
43
|
+
background: var(--surface); border: 1px solid var(--border);
|
|
44
|
+
border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 14px;
|
|
45
|
+
outline: none; transition: border-color 0.2s;
|
|
46
|
+
}
|
|
47
|
+
.search-wrap input:focus { border-color: var(--green-border); }
|
|
48
|
+
.search-wrap input::placeholder { color: var(--muted); }
|
|
49
|
+
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; }
|
|
50
|
+
#result-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
|
|
51
|
+
|
|
52
|
+
/* LAYOUT */
|
|
53
|
+
.page { display: flex; gap: 0; }
|
|
54
|
+
|
|
55
|
+
/* SIDEBAR */
|
|
56
|
+
aside {
|
|
57
|
+
width: 220px; flex-shrink: 0; position: sticky; top: 57px;
|
|
58
|
+
height: calc(100vh - 57px); overflow-y: auto; padding: 20px 12px;
|
|
59
|
+
border-right: 1px solid var(--border);
|
|
60
|
+
}
|
|
61
|
+
aside::-webkit-scrollbar { width: 4px; }
|
|
62
|
+
aside::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 4px; }
|
|
63
|
+
.cat-link {
|
|
64
|
+
display: block; padding: 7px 10px; border-radius: 7px;
|
|
65
|
+
font-size: 13px; font-weight: 500; color: var(--muted);
|
|
66
|
+
cursor: pointer; transition: all 0.15s; text-decoration: none;
|
|
67
|
+
}
|
|
68
|
+
.cat-link:hover, .cat-link.active { background: var(--green-dim); color: var(--green); }
|
|
69
|
+
.sidebar-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; padding: 14px 10px 6px; }
|
|
70
|
+
|
|
71
|
+
/* MAIN */
|
|
72
|
+
main { flex: 1; min-width: 0; padding: 28px 32px 80px; }
|
|
73
|
+
|
|
74
|
+
/* CATEGORY SECTION */
|
|
75
|
+
.category { margin-bottom: 52px; }
|
|
76
|
+
.category-header {
|
|
77
|
+
display: flex; align-items: center; gap: 10px;
|
|
78
|
+
border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 20px;
|
|
79
|
+
}
|
|
80
|
+
.category-icon { font-size: 20px; }
|
|
81
|
+
.category-title { font-size: 20px; font-weight: 700; color: var(--text); }
|
|
82
|
+
.cat-badge {
|
|
83
|
+
margin-left: auto; font-size: 11px; font-weight: 600;
|
|
84
|
+
padding: 2px 8px; border-radius: 20px;
|
|
85
|
+
background: var(--green-dim); color: var(--green); border: 1px solid var(--green-border);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* GRID */
|
|
89
|
+
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
|
|
90
|
+
|
|
91
|
+
/* CARD */
|
|
92
|
+
.class-card {
|
|
93
|
+
background: var(--surface); border: 1px solid var(--border);
|
|
94
|
+
border-radius: 10px; padding: 12px 14px;
|
|
95
|
+
display: flex; align-items: center; gap: 12px;
|
|
96
|
+
transition: border-color 0.15s, background 0.15s;
|
|
97
|
+
}
|
|
98
|
+
.class-card:hover { border-color: var(--green-border); background: var(--surface2); }
|
|
99
|
+
.class-card.hidden { display: none; }
|
|
100
|
+
.card-left { flex: 1; min-width: 0; }
|
|
101
|
+
.class-name {
|
|
102
|
+
font-family: var(--mono); font-size: 13px; font-weight: 500;
|
|
103
|
+
color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
104
|
+
}
|
|
105
|
+
.class-desc { font-size: 12px; color: var(--muted); margin-top: 3px; }
|
|
106
|
+
.class-value {
|
|
107
|
+
font-family: var(--mono); font-size: 11px; color: #94a3b8;
|
|
108
|
+
margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
109
|
+
}
|
|
110
|
+
.copy-btn {
|
|
111
|
+
flex-shrink: 0; padding: 5px 10px; font-size: 11px; font-weight: 600;
|
|
112
|
+
border: 1px solid var(--green-border); background: transparent;
|
|
113
|
+
color: var(--green); border-radius: 6px; cursor: pointer;
|
|
114
|
+
font-family: var(--font); transition: all 0.15s; white-space: nowrap;
|
|
115
|
+
}
|
|
116
|
+
.copy-btn:hover { background: var(--green-dim); }
|
|
117
|
+
.copy-btn.ok { background: var(--green); color: #000; border-color: var(--green); }
|
|
118
|
+
|
|
119
|
+
/* EMPTY */
|
|
120
|
+
#no-results {
|
|
121
|
+
display: none; text-align: center; padding: 60px 20px; color: var(--muted);
|
|
122
|
+
}
|
|
123
|
+
#no-results .nr-icon { font-size: 40px; margin-bottom: 12px; }
|
|
124
|
+
#no-results p { font-size: 15px; }
|
|
125
|
+
|
|
126
|
+
/* SWATCH */
|
|
127
|
+
.color-swatch {
|
|
128
|
+
width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
|
|
129
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
132
|
+
</head>
|
|
133
|
+
<body>
|
|
134
|
+
|
|
135
|
+
<header>
|
|
136
|
+
<div class="logo">
|
|
137
|
+
<div class="logo-dot">G</div>
|
|
138
|
+
<span class="logo-text">Gullu<span>CSS</span></span>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="search-wrap">
|
|
141
|
+
<span class="search-icon">⌕</span>
|
|
142
|
+
<input type="text" id="search" placeholder="Search classes… e.g. bg-red, p-4, d-flex" autocomplete="off">
|
|
143
|
+
</div>
|
|
144
|
+
<span id="result-count"></span>
|
|
145
|
+
</header>
|
|
146
|
+
|
|
147
|
+
<div class="page">
|
|
148
|
+
|
|
149
|
+
<aside>
|
|
150
|
+
<div class="sidebar-label">Categories</div>
|
|
151
|
+
<a class="cat-link active" href="#typography">✏️ Typography</a>
|
|
152
|
+
<a class="cat-link" href="#backgrounds">🎨 Backgrounds</a>
|
|
153
|
+
<a class="cat-link" href="#layout">📐 Layout</a>
|
|
154
|
+
<a class="cat-link" href="#spacing">📏 Spacing</a>
|
|
155
|
+
<a class="cat-link" href="#sizing">📦 Sizing</a>
|
|
156
|
+
<a class="cat-link" href="#borders">⬜ Borders</a>
|
|
157
|
+
<a class="cat-link" href="#positioning">📌 Positioning</a>
|
|
158
|
+
<a class="cat-link" href="#effects">✨ Effects</a>
|
|
159
|
+
<a class="cat-link" href="#images">🖼 Images</a>
|
|
160
|
+
<a class="cat-link" href="#arbitrary">⚡ Arbitrary</a>
|
|
161
|
+
</aside>
|
|
162
|
+
|
|
163
|
+
<main id="main">
|
|
164
|
+
|
|
165
|
+
<!-- TYPOGRAPHY -->
|
|
166
|
+
<section class="category" id="typography">
|
|
167
|
+
<div class="category-header">
|
|
168
|
+
<span class="category-icon">✏️</span>
|
|
169
|
+
<h2 class="category-title">Typography</h2>
|
|
170
|
+
<span class="cat-badge" id="badge-typography"></span>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="class-grid" id="grid-typography"></div>
|
|
173
|
+
</section>
|
|
174
|
+
|
|
175
|
+
<!-- BACKGROUNDS -->
|
|
176
|
+
<section class="category" id="backgrounds">
|
|
177
|
+
<div class="category-header">
|
|
178
|
+
<span class="category-icon">🎨</span>
|
|
179
|
+
<h2 class="category-title">Backgrounds</h2>
|
|
180
|
+
<span class="cat-badge" id="badge-backgrounds"></span>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="class-grid" id="grid-backgrounds"></div>
|
|
183
|
+
</section>
|
|
184
|
+
|
|
185
|
+
<!-- LAYOUT -->
|
|
186
|
+
<section class="category" id="layout">
|
|
187
|
+
<div class="category-header">
|
|
188
|
+
<span class="category-icon">📐</span>
|
|
189
|
+
<h2 class="category-title">Layout & Flexbox</h2>
|
|
190
|
+
<span class="cat-badge" id="badge-layout"></span>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="class-grid" id="grid-layout"></div>
|
|
193
|
+
</section>
|
|
194
|
+
|
|
195
|
+
<!-- SPACING -->
|
|
196
|
+
<section class="category" id="spacing">
|
|
197
|
+
<div class="category-header">
|
|
198
|
+
<span class="category-icon">📏</span>
|
|
199
|
+
<h2 class="category-title">Spacing</h2>
|
|
200
|
+
<span class="cat-badge" id="badge-spacing"></span>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="class-grid" id="grid-spacing"></div>
|
|
203
|
+
</section>
|
|
204
|
+
|
|
205
|
+
<!-- SIZING -->
|
|
206
|
+
<section class="category" id="sizing">
|
|
207
|
+
<div class="category-header">
|
|
208
|
+
<span class="category-icon">📦</span>
|
|
209
|
+
<h2 class="category-title">Sizing</h2>
|
|
210
|
+
<span class="cat-badge" id="badge-sizing"></span>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="class-grid" id="grid-sizing"></div>
|
|
213
|
+
</section>
|
|
214
|
+
|
|
215
|
+
<!-- BORDERS -->
|
|
216
|
+
<section class="category" id="borders">
|
|
217
|
+
<div class="category-header">
|
|
218
|
+
<span class="category-icon">⬜</span>
|
|
219
|
+
<h2 class="category-title">Borders</h2>
|
|
220
|
+
<span class="cat-badge" id="badge-borders"></span>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="class-grid" id="grid-borders"></div>
|
|
223
|
+
</section>
|
|
224
|
+
|
|
225
|
+
<!-- POSITIONING -->
|
|
226
|
+
<section class="category" id="positioning">
|
|
227
|
+
<div class="category-header">
|
|
228
|
+
<span class="category-icon">📌</span>
|
|
229
|
+
<h2 class="category-title">Positioning</h2>
|
|
230
|
+
<span class="cat-badge" id="badge-positioning"></span>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="class-grid" id="grid-positioning"></div>
|
|
233
|
+
</section>
|
|
234
|
+
|
|
235
|
+
<!-- EFFECTS -->
|
|
236
|
+
<section class="category" id="effects">
|
|
237
|
+
<div class="category-header">
|
|
238
|
+
<span class="category-icon">✨</span>
|
|
239
|
+
<h2 class="category-title">Effects & Misc</h2>
|
|
240
|
+
<span class="cat-badge" id="badge-effects"></span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="class-grid" id="grid-effects"></div>
|
|
243
|
+
</section>
|
|
244
|
+
|
|
245
|
+
<!-- IMAGES -->
|
|
246
|
+
<section class="category" id="images">
|
|
247
|
+
<div class="category-header">
|
|
248
|
+
<span class="category-icon">🖼</span>
|
|
249
|
+
<h2 class="category-title">Image & Background</h2>
|
|
250
|
+
<span class="cat-badge" id="badge-images"></span>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="class-grid" id="grid-images"></div>
|
|
253
|
+
</section>
|
|
254
|
+
|
|
255
|
+
<!-- ARBITRARY -->
|
|
256
|
+
<section class="category" id="arbitrary">
|
|
257
|
+
<div class="category-header">
|
|
258
|
+
<span class="category-icon">⚡</span>
|
|
259
|
+
<h2 class="category-title">Arbitrary Values</h2>
|
|
260
|
+
<span class="cat-badge" id="badge-arbitrary"></span>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="class-grid" id="grid-arbitrary"></div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<div id="no-results">
|
|
266
|
+
<div class="nr-icon">🔍</div>
|
|
267
|
+
<p>No classes found for "<strong id="no-results-term"></strong>"</p>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
</main>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<script>
|
|
274
|
+
// ─── DATA ─────────────────────────────────────────────────────────────────────
|
|
275
|
+
const DATA = {
|
|
276
|
+
typography: [
|
|
277
|
+
{ cls: 'text-xs', desc: 'Font size extra small', val: 'font-size: 12px' },
|
|
278
|
+
{ cls: 'text-sm', desc: 'Font size small', val: 'font-size: 12px' },
|
|
279
|
+
{ cls: 'text-base', desc: 'Font size base', val: 'font-size: 16px' },
|
|
280
|
+
{ cls: 'text-lg', desc: 'Font size large', val: 'font-size: 18px' },
|
|
281
|
+
{ cls: 'text-xl', desc: 'Font size XL', val: 'font-size: 20px' },
|
|
282
|
+
{ cls: 'text-2xl', desc: 'Font size 2XL', val: 'font-size: 24px' },
|
|
283
|
+
{ cls: 'text-3xl', desc: 'Font size 3XL', val: 'font-size: 30px' },
|
|
284
|
+
{ cls: 'text-4xl', desc: 'Font size 4XL', val: 'font-size: 36px' },
|
|
285
|
+
{ cls: 'text-5xl', desc: 'Font size 5XL', val: 'font-size: 48px' },
|
|
286
|
+
{ cls: 'text-6xl', desc: 'Font size 6XL', val: 'font-size: 60px' },
|
|
287
|
+
{ cls: 'text-7xl', desc: 'Font size 7XL', val: 'font-size: 72px' },
|
|
288
|
+
{ cls: 'font-bold', desc: 'Font weight bold', val: 'font-weight: bold' },
|
|
289
|
+
{ cls: 'font-medium', desc: 'Font weight medium', val: 'font-weight: 500' },
|
|
290
|
+
{ cls: 'text-center', desc: 'Align text center', val: 'text-align: center' },
|
|
291
|
+
{ cls: 'text-left', desc: 'Align text left', val: 'text-align: left' },
|
|
292
|
+
{ cls: 'text-right', desc: 'Align text right', val: 'text-align: right' },
|
|
293
|
+
{ cls: 'text-white', desc: 'Text color white', val: 'color: #ffffff' },
|
|
294
|
+
{ cls: 'text-black', desc: 'Text color black', val: 'color: #000000' },
|
|
295
|
+
{ cls: 'text-gray', desc: 'Text color gray', val: 'color: #6b7280' },
|
|
296
|
+
{ cls: 'text-red', desc: 'Text color red', val: 'color: oklch(63.7% ...)' },
|
|
297
|
+
{ cls: 'text-blue', desc: 'Text color blue', val: 'color: oklch(62.3% ...)' },
|
|
298
|
+
{ cls: 'text-green', desc: 'Text color green', val: 'color: oklch(72.3% ...)' },
|
|
299
|
+
{ cls: 'text-red-500', desc: 'Text red 500', val: 'color: oklch(63.7% ...)' },
|
|
300
|
+
{ cls: 'text-blue-500', desc: 'Text blue 500', val: 'color: oklch(62.3% ...)' },
|
|
301
|
+
{ cls: 'text-gray-500', desc: 'Text gray 500', val: 'color: oklch(55.1% ...)' },
|
|
302
|
+
{ cls: 'text-[35px]', desc: 'Arbitrary font size', val: 'font-size: 35px (any unit)' },
|
|
303
|
+
],
|
|
304
|
+
backgrounds: [
|
|
305
|
+
{ cls: 'bg-transparent', desc: 'Transparent background', val: 'background-color: transparent', color: 'transparent' },
|
|
306
|
+
{ cls: 'bg-white', desc: 'White background', val: 'background-color: #fff', color: '#fff' },
|
|
307
|
+
{ cls: 'bg-black', desc: 'Black background', val: 'background-color: #000', color: '#000' },
|
|
308
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-red-${n}`, desc: `Red ${n}`, val: `background-color: oklch(...)`, color: `bg-red-${n}` })),
|
|
309
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-orange-${n}`, desc: `Orange ${n}`, val: `background-color: oklch(...)`, color: `bg-orange-${n}` })),
|
|
310
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-amber-${n}`, desc: `Amber ${n}`, val: `background-color: oklch(...)`, color: `bg-amber-${n}` })),
|
|
311
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-yellow-${n}`, desc: `Yellow ${n}`, val: `background-color: oklch(...)`, color: `bg-yellow-${n}` })),
|
|
312
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-lime-${n}`, desc: `Lime ${n}`, val: `background-color: oklch(...)`, color: `bg-lime-${n}` })),
|
|
313
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-green-${n}`, desc: `Green ${n}`, val: `background-color: oklch(...)`, color: `bg-green-${n}` })),
|
|
314
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-emerald-${n}`, desc: `Emerald ${n}`, val: `background-color: oklch(...)`, color: `bg-emerald-${n}` })),
|
|
315
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-teal-${n}`, desc: `Teal ${n}`, val: `background-color: oklch(...)`, color: `bg-teal-${n}` })),
|
|
316
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-cyan-${n}`, desc: `Cyan ${n}`, val: `background-color: oklch(...)`, color: `bg-cyan-${n}` })),
|
|
317
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-sky-${n}`, desc: `Sky ${n}`, val: `background-color: oklch(...)`, color: `bg-sky-${n}` })),
|
|
318
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-blue-${n}`, desc: `Blue ${n}`, val: `background-color: oklch(...)`, color: `bg-blue-${n}` })),
|
|
319
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-slate-${n}`, desc: `Slate ${n}`, val: `background-color: oklch(...)`, color: `bg-slate-${n}` })),
|
|
320
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-gray-${n}`, desc: `Gray ${n}`, val: `background-color: oklch(...)`, color: `bg-gray-${n}` })),
|
|
321
|
+
...[50,100,200,300,400,500,600,700,800,900,950].map(n => ({ cls: `bg-zinc-${n}`, desc: `Zinc ${n}`, val: `background-color: oklch(...)`, color: `bg-zinc-${n}` })),
|
|
322
|
+
{ cls: 'bg-[#ff6b6b]', desc: 'Arbitrary background color', val: 'background-color: #ff6b6b (any color)' },
|
|
323
|
+
{ cls: 'bg-(--var)', desc: 'CSS variable background', val: 'background-color: var(--var)' },
|
|
324
|
+
],
|
|
325
|
+
layout: [
|
|
326
|
+
{ cls: 'd-flex', desc: 'Display flex', val: 'display: flex' },
|
|
327
|
+
{ cls: 'd-inline-flex', desc: 'Display inline-flex', val: 'display: inline-flex' },
|
|
328
|
+
{ cls: 'd-block', desc: 'Display block', val: 'display: block' },
|
|
329
|
+
{ cls: 'd-inline', desc: 'Display inline', val: 'display: inline' },
|
|
330
|
+
{ cls: 'd-inline-block', desc: 'Display inline-block', val: 'display: inline-block' },
|
|
331
|
+
{ cls: 'd-grid', desc: 'Display grid', val: 'display: grid' },
|
|
332
|
+
{ cls: 'd-hidden', desc: 'Hide element', val: 'display: none' },
|
|
333
|
+
{ cls: 'flex-col', desc: 'Flex direction column', val: 'flex-direction: column' },
|
|
334
|
+
{ cls: 'flex-row', desc: 'Flex direction row', val: 'flex-direction: row' },
|
|
335
|
+
{ cls: 'd-flex-col-reverse', desc: 'Flex column reverse', val: 'flex-direction: column-reverse' },
|
|
336
|
+
{ cls: 'd-flex-row-reverse', desc: 'Flex row reverse', val: 'flex-direction: row-reverse' },
|
|
337
|
+
{ cls: 'flex-wrap', desc: 'Flex wrap', val: 'flex-wrap: wrap' },
|
|
338
|
+
{ cls: 'flex-nowrap', desc: 'Flex no wrap', val: 'flex-wrap: nowrap' },
|
|
339
|
+
{ cls: 'flex-wrap-reverse', desc: 'Flex wrap reverse', val: 'flex-wrap: wrap-reverse' },
|
|
340
|
+
{ cls: 'items-center', desc: 'Align items center', val: 'align-items: center' },
|
|
341
|
+
{ cls: 'items-start', desc: 'Align items start', val: 'align-items: flex-start' },
|
|
342
|
+
{ cls: 'items-end', desc: 'Align items end', val: 'align-items: flex-end' },
|
|
343
|
+
{ cls: 'justify-center', desc: 'Justify content center', val: 'justify-content: center' },
|
|
344
|
+
{ cls: 'justify-between', desc: 'Justify space-between', val: 'justify-content: space-between' },
|
|
345
|
+
{ cls: 'justify-around', desc: 'Justify space-around', val: 'justify-content: space-around' },
|
|
346
|
+
{ cls: 'gap-1', desc: 'Gap 4px', val: 'gap: 4px' },
|
|
347
|
+
{ cls: 'gap-2', desc: 'Gap 8px', val: 'gap: 8px' },
|
|
348
|
+
{ cls: 'gap-4', desc: 'Gap 16px', val: 'gap: 16px' },
|
|
349
|
+
{ cls: 'gap-6', desc: 'Gap 24px', val: 'gap: 24px' },
|
|
350
|
+
{ cls: 'gap-8', desc: 'Gap 32px', val: 'gap: 32px' },
|
|
351
|
+
],
|
|
352
|
+
spacing: [
|
|
353
|
+
...['p','pt','pb','pl','pr'].flatMap(pre =>
|
|
354
|
+
[0,1,2,3,4,6,8,12,16,20,24].map(n => {
|
|
355
|
+
const px = {0:'0px',1:'4px',2:'8px',3:'12px',4:'16px',6:'24px',8:'32px',12:'48px',16:'64px',20:'80px',24:'96px'}[n];
|
|
356
|
+
const prop = {p:'padding',pt:'padding-top',pb:'padding-bottom',pl:'padding-left',pr:'padding-right'}[pre];
|
|
357
|
+
return { cls: `${pre}-${n}`, desc: `${prop.replace('-',' ')} ${px}`, val: `${prop}: ${px}` };
|
|
358
|
+
})
|
|
359
|
+
),
|
|
360
|
+
...['m','mt','mb','ml','mr'].flatMap(pre =>
|
|
361
|
+
[0,1,2,3,4,6,8,12,16,20,24].map(n => {
|
|
362
|
+
const px = {0:'0px',1:'4px',2:'8px',3:'12px',4:'16px',6:'24px',8:'32px',12:'48px',16:'64px',20:'80px',24:'96px'}[n];
|
|
363
|
+
const prop = {m:'margin',mt:'margin-top',mb:'margin-bottom',ml:'margin-left',mr:'margin-right'}[pre];
|
|
364
|
+
return { cls: `${pre}-${n}`, desc: `${prop.replace('-',' ')} ${px}`, val: `${prop}: ${px}` };
|
|
365
|
+
})
|
|
366
|
+
),
|
|
367
|
+
{ cls: 'm-auto', desc: 'Margin auto (centering)', val: 'margin: auto' },
|
|
368
|
+
],
|
|
369
|
+
sizing: [
|
|
370
|
+
{ cls: 'w-full', desc: 'Width 100%', val: 'width: 100%' },
|
|
371
|
+
{ cls: 'w-screen', desc: 'Width 100vw', val: 'width: 100vw' },
|
|
372
|
+
{ cls: 'w-fit', desc: 'Width fit-content', val: 'width: fit-content' },
|
|
373
|
+
{ cls: 'h-full', desc: 'Height 100%', val: 'height: 100%' },
|
|
374
|
+
{ cls: 'h-screen', desc: 'Height 100vh', val: 'height: 100vh' },
|
|
375
|
+
{ cls: 'max-w-sm', desc: 'Max width 640px', val: 'max-width: 640px' },
|
|
376
|
+
{ cls: 'max-w-md', desc: 'Max width 768px', val: 'max-width: 768px' },
|
|
377
|
+
{ cls: 'max-w-lg', desc: 'Max width 1024px', val: 'max-width: 1024px' },
|
|
378
|
+
...[1,2,3,4,6,8,12,16,20,24].map(n => {
|
|
379
|
+
const px = {1:'4px',2:'8px',3:'12px',4:'16px',6:'24px',8:'32px',12:'48px',16:'64px',20:'80px',24:'96px'}[n];
|
|
380
|
+
return { cls: `w-${n}`, desc: `Width ${px}`, val: `width: ${px}` };
|
|
381
|
+
}),
|
|
382
|
+
...[1,2,3,4,6,8,12,16,20,24].map(n => {
|
|
383
|
+
const px = {1:'4px',2:'8px',3:'12px',4:'16px',6:'24px',8:'32px',12:'48px',16:'64px',20:'80px',24:'96px'}[n];
|
|
384
|
+
return { cls: `h-${n}`, desc: `Height ${px}`, val: `height: ${px}` };
|
|
385
|
+
}),
|
|
386
|
+
],
|
|
387
|
+
borders: [
|
|
388
|
+
{ cls: 'border', desc: 'Border 1px solid', val: 'border-width: 1px' },
|
|
389
|
+
{ cls: 'border-2', desc: 'Border 2px solid', val: 'border-width: 2px' },
|
|
390
|
+
{ cls: 'border-4', desc: 'Border 4px solid', val: 'border-width: 4px' },
|
|
391
|
+
{ cls: 'border-8', desc: 'Border 8px solid', val: 'border-width: 8px' },
|
|
392
|
+
{ cls: 'border-0', desc: 'Remove border', val: 'border-width: 0px' },
|
|
393
|
+
{ cls: 'rounded-none', desc: 'No border radius', val: 'border-radius: 0px' },
|
|
394
|
+
{ cls: 'rounded-sm', desc: 'Border radius small', val: 'border-radius: 4px' },
|
|
395
|
+
{ cls: 'rounded-md', desc: 'Border radius medium',val: 'border-radius: 8px' },
|
|
396
|
+
{ cls: 'rounded-lg', desc: 'Border radius large', val: 'border-radius: 12px' },
|
|
397
|
+
{ cls: 'rounded-xl', desc: 'Border radius XL', val: 'border-radius: 16px' },
|
|
398
|
+
{ cls: 'rounded-full', desc: 'Fully round / pill', val: 'border-radius: 9999px' },
|
|
399
|
+
{ cls: 'border-white', desc: 'Border color white', val: 'border-color: #fff' },
|
|
400
|
+
{ cls: 'border-black', desc: 'Border color black', val: 'border-color: #000' },
|
|
401
|
+
{ cls: 'border-red-500', desc: 'Border color red-500', val: 'border-color: oklch(...)' },
|
|
402
|
+
{ cls: 'border-blue-500', desc: 'Border color blue-500', val: 'border-color: oklch(...)' },
|
|
403
|
+
{ cls: 'border-gray-100', desc: 'Border color gray-100', val: 'border-color: oklch(...)' },
|
|
404
|
+
{ cls: 'box-border', desc: 'Box sizing border-box', val: 'box-sizing: border-box' },
|
|
405
|
+
{ cls: 'box-content', desc: 'Box sizing content-box', val: 'box-sizing: content-box' },
|
|
406
|
+
],
|
|
407
|
+
positioning: [
|
|
408
|
+
{ cls: 'relative', desc: 'Position relative', val: 'position: relative' },
|
|
409
|
+
{ cls: 'absolute', desc: 'Position absolute', val: 'position: absolute' },
|
|
410
|
+
{ cls: 'fixed', desc: 'Position fixed', val: 'position: fixed' },
|
|
411
|
+
{ cls: 'pos-static', desc: 'Position static', val: 'position: static' },
|
|
412
|
+
{ cls: 'pos-sticky', desc: 'Position sticky', val: 'position: sticky' },
|
|
413
|
+
{ cls: 'pos-relative', desc: 'Position relative (alt)', val: 'position: relative' },
|
|
414
|
+
{ cls: 'pos-absolute', desc: 'Position absolute (alt)', val: 'position: absolute' },
|
|
415
|
+
{ cls: 'pos-fixed', desc: 'Position fixed (alt)', val: 'position: fixed' },
|
|
416
|
+
...[0,1,2,3,4,6,8].flatMap(n => {
|
|
417
|
+
const px = {0:'0px',1:'4px',2:'8px',3:'12px',4:'16px',6:'24px',8:'32px'}[n];
|
|
418
|
+
return ['top','right','bottom','left'].map(s => ({
|
|
419
|
+
cls: `${s}-${n}`, desc: `${s.charAt(0).toUpperCase()+s.slice(1)} offset ${px}`, val: `${s}: ${px}`
|
|
420
|
+
}));
|
|
421
|
+
}),
|
|
422
|
+
],
|
|
423
|
+
effects: [
|
|
424
|
+
{ cls: 'shadow-sm', desc: 'Box shadow small', val: 'box-shadow: 0 1px 2px ...' },
|
|
425
|
+
{ cls: 'shadow-md', desc: 'Box shadow medium', val: 'box-shadow: 0 4px 6px ...' },
|
|
426
|
+
{ cls: 'shadow-lg', desc: 'Box shadow large', val: 'box-shadow: 0 10px 15px ...' },
|
|
427
|
+
{ cls: 'transition', desc: 'Smooth transition', val: 'transition: all 0.3s ease' },
|
|
428
|
+
{ cls: 'cursor-pointer', desc: 'Pointer cursor', val: 'cursor: pointer' },
|
|
429
|
+
{ cls: 'overflow-hidden', desc: 'Hide overflow', val: 'overflow: hidden' },
|
|
430
|
+
{ cls: 'opacity-50', desc: 'Opacity 50%', val: 'opacity: 0.5' },
|
|
431
|
+
{ cls: 'opacity-75', desc: 'Opacity 75%', val: 'opacity: 0.75' },
|
|
432
|
+
{ cls: 'opacity-100', desc: 'Opacity 100%', val: 'opacity: 1' },
|
|
433
|
+
],
|
|
434
|
+
images: [
|
|
435
|
+
{ cls: 'object-cover', desc: 'Crop to fill container', val: 'object-fit: cover' },
|
|
436
|
+
{ cls: 'object-contain', desc: 'Fit within container', val: 'object-fit: contain' },
|
|
437
|
+
{ cls: 'object-fill', desc: 'Stretch to fill', val: 'object-fit: fill' },
|
|
438
|
+
{ cls: 'object-none', desc: 'No object fit', val: 'object-fit: none' },
|
|
439
|
+
{ cls: 'object-scale-down', desc: 'Scale down to fit', val: 'object-fit: scale-down' },
|
|
440
|
+
{ cls: 'object-top', desc: 'Object position top', val: 'object-position: top' },
|
|
441
|
+
{ cls: 'object-center', desc: 'Object position center', val: 'object-position: center' },
|
|
442
|
+
{ cls: 'object-bottom', desc: 'Object position bottom', val: 'object-position: bottom' },
|
|
443
|
+
{ cls: 'object-left', desc: 'Object position left', val: 'object-position: left' },
|
|
444
|
+
{ cls: 'object-right', desc: 'Object position right', val: 'object-position: right' },
|
|
445
|
+
{ cls: 'bg-cover', desc: 'Background size cover', val: 'background-size: cover' },
|
|
446
|
+
{ cls: 'bg-contain', desc: 'Background size contain', val: 'background-size: contain' },
|
|
447
|
+
{ cls: 'bg-auto', desc: 'Background size auto', val: 'background-size: auto' },
|
|
448
|
+
{ cls: 'bg-center', desc: 'Background position center', val: 'background-position: center' },
|
|
449
|
+
{ cls: 'bg-top', desc: 'Background position top', val: 'background-position: top' },
|
|
450
|
+
{ cls: 'bg-bottom', desc: 'Background position bottom', val: 'background-position: bottom' },
|
|
451
|
+
{ cls: 'bg-left', desc: 'Background position left', val: 'background-position: left' },
|
|
452
|
+
{ cls: 'bg-right', desc: 'Background position right', val: 'background-position: right' },
|
|
453
|
+
{ cls: 'bg-no-repeat', desc: 'Background no repeat', val: 'background-repeat: no-repeat' },
|
|
454
|
+
{ cls: 'bg-repeat', desc: 'Background repeat', val: 'background-repeat: repeat' },
|
|
455
|
+
{ cls: 'bg-repeat-x', desc: 'Background repeat X', val: 'background-repeat: repeat-x' },
|
|
456
|
+
{ cls: 'bg-repeat-y', desc: 'Background repeat Y', val: 'background-repeat: repeat-y' },
|
|
457
|
+
{ cls: "bg-[url('...')]", desc: 'Arbitrary background image', val: 'background-image: url(...)' },
|
|
458
|
+
],
|
|
459
|
+
arbitrary: [
|
|
460
|
+
{ cls: 'bg-[#ff6b6b]', desc: 'Any hex background color', val: 'background-color: #ff6b6b' },
|
|
461
|
+
{ cls: 'bg-[oklch(65% 0.2 145)]', desc: 'Oklch background color', val: 'background-color: oklch(...)' },
|
|
462
|
+
{ cls: 'bg-(--var)', desc: 'CSS variable background', val: 'background-color: var(--var)' },
|
|
463
|
+
{ cls: 'text-[35px]', desc: 'Any font size value', val: 'font-size: 35px' },
|
|
464
|
+
{ cls: 'text-[2rem]', desc: 'Any font size in rem', val: 'font-size: 2rem' },
|
|
465
|
+
{ cls: "bg-[url('path.jpg')]", desc: 'Background image URL', val: 'background-image: url(...)' },
|
|
466
|
+
],
|
|
467
|
+
};
|
|
468
|
+
|
|
469
|
+
// ─── COLOUR MAP for swatches ──────────────────────────────────────────────────
|
|
470
|
+
const BG_VALUES = {
|
|
471
|
+
'bg-red-50':'oklch(97.1% 0.013 17.38)','bg-red-100':'oklch(93.6% 0.032 17.717)','bg-red-200':'oklch(88.5% 0.062 18.334)','bg-red-300':'oklch(80.8% 0.114 19.571)','bg-red-400':'oklch(70.4% 0.191 22.216)','bg-red-500':'oklch(63.7% 0.237 25.331)','bg-red-600':'oklch(57.7% 0.245 27.325)','bg-red-700':'oklch(50.5% 0.213 27.518)','bg-red-800':'oklch(44.4% 0.177 26.899)','bg-red-900':'oklch(39.6% 0.141 25.723)','bg-red-950':'oklch(25.8% 0.092 26.042)',
|
|
472
|
+
'bg-orange-50':'oklch(98% 0.016 73.684)','bg-orange-500':'oklch(70.5% 0.213 47.604)','bg-orange-950':'oklch(26.6% 0.079 36.259)','bg-orange-100':'oklch(95.4% 0.038 75.164)','bg-orange-200':'oklch(90.1% 0.076 70.697)','bg-orange-300':'oklch(83.7% 0.128 66.29)','bg-orange-400':'oklch(75% 0.183 55.934)','bg-orange-600':'oklch(64.6% 0.222 41.116)','bg-orange-700':'oklch(55.3% 0.195 38.402)','bg-orange-800':'oklch(47% 0.157 37.304)','bg-orange-900':'oklch(40.8% 0.123 38.172)',
|
|
473
|
+
'bg-amber-400':'oklch(82.8% 0.189 84.429)','bg-amber-500':'oklch(76.9% 0.188 70.08)','bg-amber-50':'oklch(98.7% 0.022 95.277)','bg-amber-100':'oklch(96.2% 0.059 95.617)','bg-amber-200':'oklch(92.4% 0.12 95.746)','bg-amber-300':'oklch(87.9% 0.169 91.605)','bg-amber-600':'oklch(66.6% 0.179 58.318)','bg-amber-700':'oklch(55.5% 0.163 48.998)','bg-amber-800':'oklch(47.3% 0.137 46.201)','bg-amber-900':'oklch(41.4% 0.112 45.904)','bg-amber-950':'oklch(27.9% 0.077 45.635)',
|
|
474
|
+
'bg-yellow-400':'oklch(85.2% 0.199 91.936)','bg-yellow-500':'oklch(79.5% 0.184 86.047)','bg-yellow-50':'oklch(98.7% 0.026 102.212)','bg-yellow-100':'oklch(97.3% 0.071 103.193)','bg-yellow-200':'oklch(94.5% 0.129 101.54)','bg-yellow-300':'oklch(90.5% 0.182 98.111)','bg-yellow-600':'oklch(68.1% 0.162 75.834)','bg-yellow-700':'oklch(55.4% 0.135 66.442)','bg-yellow-800':'oklch(47.6% 0.114 61.907)','bg-yellow-900':'oklch(42.1% 0.095 57.708)','bg-yellow-950':'oklch(28.6% 0.066 53.813)',
|
|
475
|
+
'bg-lime-400':'oklch(84.1% 0.238 128.85)','bg-lime-500':'oklch(76.8% 0.233 130.85)','bg-lime-50':'oklch(98.6% 0.031 120.757)','bg-lime-100':'oklch(96.7% 0.067 122.328)','bg-lime-200':'oklch(93.8% 0.127 124.321)','bg-lime-300':'oklch(89.7% 0.196 126.665)','bg-lime-600':'oklch(64.8% 0.2 131.684)','bg-lime-700':'oklch(53.2% 0.157 131.589)','bg-lime-800':'oklch(45.3% 0.124 130.933)','bg-lime-900':'oklch(40.5% 0.101 131.063)','bg-lime-950':'oklch(27.4% 0.072 132.109)',
|
|
476
|
+
'bg-green-400':'oklch(79.2% 0.209 151.711)','bg-green-500':'oklch(72.3% 0.219 149.579)','bg-green-50':'oklch(98.2% 0.018 155.826)','bg-green-100':'oklch(96.2% 0.044 156.743)','bg-green-200':'oklch(92.5% 0.084 155.995)','bg-green-300':'oklch(87.1% 0.15 154.449)','bg-green-600':'oklch(62.7% 0.194 149.214)','bg-green-700':'oklch(52.7% 0.154 150.069)','bg-green-800':'oklch(44.8% 0.119 151.328)','bg-green-900':'oklch(39.3% 0.095 152.535)','bg-green-950':'oklch(26.6% 0.065 152.934)',
|
|
477
|
+
'bg-emerald-400':'oklch(76.5% 0.177 163.223)','bg-emerald-500':'oklch(69.6% 0.17 162.48)','bg-emerald-50':'oklch(97.9% 0.021 166.113)','bg-emerald-100':'oklch(95% 0.052 163.051)','bg-emerald-200':'oklch(90.5% 0.093 164.15)','bg-emerald-300':'oklch(84.5% 0.143 164.978)','bg-emerald-600':'oklch(59.6% 0.145 163.225)','bg-emerald-700':'oklch(50.8% 0.118 165.612)','bg-emerald-800':'oklch(43.2% 0.095 166.913)','bg-emerald-900':'oklch(37.8% 0.077 168.94)','bg-emerald-950':'oklch(26.2% 0.051 172.552)',
|
|
478
|
+
'bg-teal-400':'oklch(77.7% 0.152 181.912)','bg-teal-500':'oklch(70.4% 0.14 182.503)','bg-teal-50':'oklch(98.4% 0.014 180.72)','bg-teal-100':'oklch(95.3% 0.051 180.801)','bg-teal-200':'oklch(91% 0.096 180.426)','bg-teal-300':'oklch(85.5% 0.138 181.071)','bg-teal-600':'oklch(60% 0.118 184.704)','bg-teal-700':'oklch(51.1% 0.096 186.391)','bg-teal-800':'oklch(43.7% 0.078 188.216)','bg-teal-900':'oklch(38.6% 0.063 188.416)','bg-teal-950':'oklch(27.7% 0.046 192.524)',
|
|
479
|
+
'bg-cyan-400':'oklch(78.9% 0.154 211.53)','bg-cyan-500':'oklch(71.5% 0.143 215.221)','bg-cyan-50':'oklch(98.4% 0.019 200.873)','bg-cyan-100':'oklch(95.6% 0.045 203.388)','bg-cyan-200':'oklch(91.7% 0.08 205.041)','bg-cyan-300':'oklch(86.5% 0.127 207.078)','bg-cyan-600':'oklch(60.9% 0.126 221.723)','bg-cyan-700':'oklch(52% 0.105 223.128)','bg-cyan-800':'oklch(45% 0.085 224.283)','bg-cyan-900':'oklch(39.8% 0.07 227.392)','bg-cyan-950':'oklch(30.2% 0.056 229.695)',
|
|
480
|
+
'bg-sky-400':'oklch(74.6% 0.16 232.661)','bg-sky-500':'oklch(68.5% 0.169 237.323)','bg-sky-50':'oklch(97.7% 0.013 236.62)','bg-sky-100':'oklch(95.1% 0.026 236.824)','bg-sky-200':'oklch(90.1% 0.058 230.902)','bg-sky-300':'oklch(82.8% 0.111 230.318)','bg-sky-600':'oklch(58.8% 0.158 241.966)','bg-sky-700':'oklch(50% 0.134 242.749)','bg-sky-800':'oklch(44.3% 0.11 240.79)','bg-sky-900':'oklch(39.1% 0.09 240.876)','bg-sky-950':'oklch(29.3% 0.066 243.157)',
|
|
481
|
+
'bg-blue-400':'oklch(70.7% 0.165 254.624)','bg-blue-500':'oklch(62.3% 0.214 259.815)','bg-blue-50':'oklch(97% 0.014 254.604)','bg-blue-100':'oklch(93.2% 0.032 255.585)','bg-blue-200':'oklch(88.2% 0.059 254.128)','bg-blue-300':'oklch(80.9% 0.105 251.813)','bg-blue-600':'oklch(54.6% 0.245 262.881)','bg-blue-700':'oklch(48.8% 0.243 264.376)','bg-blue-800':'oklch(42.4% 0.199 265.638)','bg-blue-900':'oklch(37.9% 0.146 265.522)','bg-blue-950':'oklch(28.2% 0.091 267.935)',
|
|
482
|
+
'bg-slate-800':'oklch(27.9% 0.041 260.031)','bg-slate-900':'oklch(20.8% 0.042 265.755)','bg-slate-50':'oklch(98.4% 0.003 247.858)','bg-slate-100':'oklch(96.8% 0.007 247.896)','bg-slate-200':'oklch(92.9% 0.013 255.508)','bg-slate-300':'oklch(86.9% 0.022 252.894)','bg-slate-400':'oklch(70.4% 0.04 256.788)','bg-slate-500':'oklch(55.4% 0.046 257.417)','bg-slate-600':'oklch(44.6% 0.043 257.281)','bg-slate-700':'oklch(37.2% 0.044 257.287)','bg-slate-950':'oklch(12.9% 0.042 264.695)',
|
|
483
|
+
'bg-gray-500':'oklch(55.1% 0.027 264.364)','bg-gray-50':'oklch(98.5% 0.002 247.839)','bg-gray-100':'oklch(96.7% 0.003 264.542)','bg-gray-200':'oklch(92.8% 0.006 264.531)','bg-gray-300':'oklch(87.2% 0.01 258.338)','bg-gray-400':'oklch(70.7% 0.022 261.325)','bg-gray-600':'oklch(44.6% 0.03 256.802)','bg-gray-700':'oklch(37.3% 0.034 259.733)','bg-gray-800':'oklch(27.8% 0.033 256.848)','bg-gray-900':'oklch(21% 0.034 264.665)','bg-gray-950':'oklch(13% 0.028 261.692)',
|
|
484
|
+
'bg-zinc-800':'oklch(27.4% 0.006 286.033)','bg-zinc-50':'oklch(98.5% 0 0)','bg-zinc-100':'oklch(96.7% 0.001 286.375)','bg-zinc-200':'oklch(92% 0.004 286.32)','bg-zinc-300':'oklch(87.1% 0.006 286.286)','bg-zinc-400':'oklch(70.5% 0.015 286.067)','bg-zinc-500':'oklch(55.2% 0.016 285.938)','bg-zinc-600':'oklch(44.2% 0.017 285.786)','bg-zinc-700':'oklch(37% 0.013 285.805)','bg-zinc-900':'oklch(21% 0.006 285.885)','bg-zinc-950':'oklch(14.1% 0.005 285.823)',
|
|
485
|
+
};
|
|
486
|
+
|
|
487
|
+
// ─── RENDER ───────────────────────────────────────────────────────────────────
|
|
488
|
+
function makeCard(item) {
|
|
489
|
+
const div = document.createElement('div');
|
|
490
|
+
div.className = 'class-card';
|
|
491
|
+
div.dataset.search = (item.cls + ' ' + item.desc + ' ' + item.val).toLowerCase();
|
|
492
|
+
div.dataset.cls = item.cls;
|
|
493
|
+
|
|
494
|
+
const bgColor = item.color && BG_VALUES[item.color];
|
|
495
|
+
const swatchHtml = bgColor
|
|
496
|
+
? `<div class="color-swatch" style="background:${bgColor}"></div>`
|
|
497
|
+
: '';
|
|
498
|
+
|
|
499
|
+
div.innerHTML = `
|
|
500
|
+
<div class="card-left">
|
|
501
|
+
<div class="class-name">${item.cls}</div>
|
|
502
|
+
<div class="class-desc">${item.desc}</div>
|
|
503
|
+
<div class="class-value">${item.val}</div>
|
|
504
|
+
</div>
|
|
505
|
+
${swatchHtml}
|
|
506
|
+
<button class="copy-btn" data-cls="${item.cls}">Copy</button>
|
|
507
|
+
`;
|
|
508
|
+
return div;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
function renderAll() {
|
|
512
|
+
for (const [cat, items] of Object.entries(DATA)) {
|
|
513
|
+
const grid = document.getElementById('grid-' + cat);
|
|
514
|
+
const badge = document.getElementById('badge-' + cat);
|
|
515
|
+
items.forEach(item => grid.appendChild(makeCard(item)));
|
|
516
|
+
badge.textContent = items.length + ' classes';
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
// ─── COPY ─────────────────────────────────────────────────────────────────────
|
|
521
|
+
document.addEventListener('click', e => {
|
|
522
|
+
const btn = e.target.closest('.copy-btn');
|
|
523
|
+
if (!btn) return;
|
|
524
|
+
const cls = btn.dataset.cls;
|
|
525
|
+
navigator.clipboard.writeText(cls).then(() => {
|
|
526
|
+
btn.textContent = '✓ Copied';
|
|
527
|
+
btn.classList.add('ok');
|
|
528
|
+
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('ok'); }, 1600);
|
|
529
|
+
});
|
|
530
|
+
});
|
|
531
|
+
|
|
532
|
+
// ─── SEARCH ───────────────────────────────────────────────────────────────────
|
|
533
|
+
const searchInput = document.getElementById('search');
|
|
534
|
+
const resultCount = document.getElementById('result-count');
|
|
535
|
+
const noResults = document.getElementById('no-results');
|
|
536
|
+
const noTerm = document.getElementById('no-results-term');
|
|
537
|
+
|
|
538
|
+
searchInput.addEventListener('input', () => {
|
|
539
|
+
const q = searchInput.value.trim().toLowerCase();
|
|
540
|
+
let total = 0;
|
|
541
|
+
let visible = 0;
|
|
542
|
+
|
|
543
|
+
document.querySelectorAll('.class-card').forEach(card => {
|
|
544
|
+
total++;
|
|
545
|
+
const match = !q || card.dataset.search.includes(q);
|
|
546
|
+
card.classList.toggle('hidden', !match);
|
|
547
|
+
if (match) visible++;
|
|
548
|
+
});
|
|
549
|
+
|
|
550
|
+
// hide empty sections
|
|
551
|
+
document.querySelectorAll('.category').forEach(sec => {
|
|
552
|
+
const anyVisible = [...sec.querySelectorAll('.class-card')].some(c => !c.classList.contains('hidden'));
|
|
553
|
+
sec.style.display = anyVisible ? '' : 'none';
|
|
554
|
+
});
|
|
555
|
+
|
|
556
|
+
noResults.style.display = (q && visible === 0) ? 'block' : 'none';
|
|
557
|
+
noTerm.textContent = q;
|
|
558
|
+
resultCount.textContent = q ? `${visible} result${visible !== 1 ? 's' : ''}` : '';
|
|
559
|
+
});
|
|
560
|
+
|
|
561
|
+
// ─── SIDEBAR ACTIVE ───────────────────────────────────────────────────────────
|
|
562
|
+
const catLinks = document.querySelectorAll('.cat-link');
|
|
563
|
+
const sections = document.querySelectorAll('.category');
|
|
564
|
+
window.addEventListener('scroll', () => {
|
|
565
|
+
let current = '';
|
|
566
|
+
sections.forEach(s => { if (window.scrollY >= s.offsetTop - 100) current = s.id; });
|
|
567
|
+
catLinks.forEach(l => l.classList.toggle('active', l.getAttribute('href') === '#' + current));
|
|
568
|
+
}, { passive: true });
|
|
569
|
+
|
|
570
|
+
// ─── INIT ─────────────────────────────────────────────────────────────────────
|
|
571
|
+
renderAll();
|
|
572
|
+
</script>
|
|
573
|
+
</body>
|
|
574
|
+
</html>
|