@kolkrabbi/kol-theme 0.7.3 → 0.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/kol-components-styleguide.css +396 -0
- package/kol-theme.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,396 @@
|
|
|
1
|
+
/* =============================================================================
|
|
2
|
+
* KOL components — style-guide / brand-guide set
|
|
3
|
+
* =============================================================================
|
|
4
|
+
* Chrome for the @kolkrabbi/kol-styleguide component set: the combination lab,
|
|
5
|
+
* colour anatomy, mood tiles, logo construction/scaling, type blocks, asset
|
|
6
|
+
* tables. Raided from the monorepo apps/brand styleguide (2026-07).
|
|
7
|
+
*
|
|
8
|
+
* Layer: ships unlayered; kol-theme.css assigns the layer at import —
|
|
9
|
+
* @import "./kol-components-styleguide.css" layer(components);
|
|
10
|
+
*
|
|
11
|
+
* KOL conformance: resting type + colour live INLINE on the JSX (kol-* type
|
|
12
|
+
* classes + kol colour utilities); only structural props Tailwind can't express
|
|
13
|
+
* (grid templates, absolute positioning, transitions, pseudo-elements) live here.
|
|
14
|
+
*
|
|
15
|
+
* Rules are consolidated here as each component lands. Some were relocated from
|
|
16
|
+
* packages/framework/kol-framework.css (the .kol-combo-* / .kol-anatomy-sample /
|
|
17
|
+
* .kol-mood-tile-* clusters) — theme owns component chrome, framework owns page
|
|
18
|
+
* scaffold.
|
|
19
|
+
* ============================================================================= */
|
|
20
|
+
|
|
21
|
+
/* =============================================================================
|
|
22
|
+
Mood tile — relocated from packages/framework/kol-framework.css 2026-07-10
|
|
23
|
+
============================================================================= */
|
|
24
|
+
|
|
25
|
+
/* ───── Mood tile (image + overlay logomark) ─────
|
|
26
|
+
Wrappers inlined in MoodTile.jsx. CSS retains descendant img positioning
|
|
27
|
+
(cover-crop the photo) + overlay logo sizing. */
|
|
28
|
+
|
|
29
|
+
.kol-mood-tile-frame img {
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: 0;
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
object-fit: cover;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.kol-mood-tile-overlay .kol-brand-logo {
|
|
38
|
+
width: 32%;
|
|
39
|
+
max-width: 180px;
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.kol-mood-tile-overlay svg {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* =============================================================================
|
|
49
|
+
Combo lab — relocated from packages/framework/kol-framework.css 2026-07-10
|
|
50
|
+
============================================================================= */
|
|
51
|
+
|
|
52
|
+
/* ───── Combo Lab layout primitives — shared structure classes ───── */
|
|
53
|
+
|
|
54
|
+
.kol-combo-frame {
|
|
55
|
+
border-radius: 4px;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
transition: background-color 400ms ease, border-color 400ms ease;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.kol-combo-slab {
|
|
61
|
+
padding: 16px;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
min-height: 0;
|
|
66
|
+
transition: background-color 400ms ease, color 400ms ease;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.kol-combo-slab--end { justify-content: flex-end; }
|
|
70
|
+
.kol-combo-slab--between { justify-content: space-between; }
|
|
71
|
+
|
|
72
|
+
.kol-combo-label {
|
|
73
|
+
font-family: var(--kol-font-family-sans-compact);
|
|
74
|
+
font-size: 12px;
|
|
75
|
+
font-weight: 500;
|
|
76
|
+
line-height: 100%;
|
|
77
|
+
letter-spacing: 0.08em;
|
|
78
|
+
text-transform: uppercase;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.kol-combo-number {
|
|
82
|
+
font-family: var(--kol-font-family-sans);
|
|
83
|
+
font-size: 16px;
|
|
84
|
+
font-weight: 700;
|
|
85
|
+
line-height: 100%;
|
|
86
|
+
letter-spacing: 0.02em;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.kol-combo-stage--fill {
|
|
90
|
+
height: 100%;
|
|
91
|
+
min-height: 360px;
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.kol-combo-logo {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
color: currentColor;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* 60 / 30 / 10 */
|
|
101
|
+
.kol-combo-stage--ratio { display: flex; }
|
|
102
|
+
.kol-combo-stage--ratio > :nth-child(1) { flex: 1; }
|
|
103
|
+
.kol-combo-stage--ratio > :nth-child(2) { flex: 3; }
|
|
104
|
+
.kol-combo-stage--ratio > :nth-child(3) { flex: 6; }
|
|
105
|
+
|
|
106
|
+
/* Tower */
|
|
107
|
+
.kol-combo-stage--tower {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
height: 100%;
|
|
111
|
+
width: 100%;
|
|
112
|
+
}
|
|
113
|
+
.kol-combo-stage--tower > * { flex: 1; }
|
|
114
|
+
|
|
115
|
+
/* Quad split */
|
|
116
|
+
.kol-combo-stage--quad { display: flex; }
|
|
117
|
+
.kol-combo-stage--quad > * { flex: 1; }
|
|
118
|
+
|
|
119
|
+
.kol-combo-quad-col {
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-direction: column;
|
|
122
|
+
}
|
|
123
|
+
.kol-combo-quad-col > * { flex: 1; }
|
|
124
|
+
|
|
125
|
+
/* Card row */
|
|
126
|
+
.kol-combo-stage--card-row {
|
|
127
|
+
display: grid;
|
|
128
|
+
grid-template-columns: repeat(4, 1fr);
|
|
129
|
+
gap: 16px;
|
|
130
|
+
height: 100%;
|
|
131
|
+
min-height: 360px;
|
|
132
|
+
width: 100%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.kol-combo-card {
|
|
136
|
+
flex: 1;
|
|
137
|
+
min-height: 240px;
|
|
138
|
+
padding: 20px;
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
transition: background-color 400ms ease, color 400ms ease;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.kol-combo-card--end { justify-content: flex-end; }
|
|
145
|
+
.kol-combo-card--between { justify-content: space-between; }
|
|
146
|
+
|
|
147
|
+
/* Stripe row */
|
|
148
|
+
.kol-combo-stage--stripe-row {
|
|
149
|
+
display: flex;
|
|
150
|
+
flex-direction: column;
|
|
151
|
+
gap: 16px;
|
|
152
|
+
height: 100%;
|
|
153
|
+
min-height: 360px;
|
|
154
|
+
width: 100%;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.kol-combo-stripe-row {
|
|
158
|
+
display: flex;
|
|
159
|
+
flex: 1;
|
|
160
|
+
align-items: stretch;
|
|
161
|
+
width: 100%;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.kol-combo-stripe-bar {
|
|
165
|
+
display: flex;
|
|
166
|
+
flex: 1;
|
|
167
|
+
position: relative;
|
|
168
|
+
width: 100%;
|
|
169
|
+
height: 100%;
|
|
170
|
+
border-radius: 4px;
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.kol-combo-stripe-seg { transition: background-color 400ms ease; }
|
|
175
|
+
.kol-combo-stripe-seg--6 { flex: 6; }
|
|
176
|
+
.kol-combo-stripe-seg--3 { flex: 3; }
|
|
177
|
+
.kol-combo-stripe-seg--1 { flex: 1; }
|
|
178
|
+
|
|
179
|
+
.kol-combo-stripe-group { display: flex; }
|
|
180
|
+
.kol-combo-stripe-group--3 { flex: 3; }
|
|
181
|
+
.kol-combo-stripe-group--1 { flex: 1; }
|
|
182
|
+
|
|
183
|
+
.kol-combo-stripe-neutral {
|
|
184
|
+
border-top: 1px solid var(--stripe-rule, transparent);
|
|
185
|
+
border-bottom: 1px solid var(--stripe-rule, transparent);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.kol-combo-stripe-accent-border {
|
|
189
|
+
border: 1.73px solid var(--stripe-accent, transparent);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.kol-combo-stripe-method {
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: 12px;
|
|
195
|
+
left: 12px;
|
|
196
|
+
font-family: var(--kol-font-family-sans-compact);
|
|
197
|
+
font-size: 12px;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
letter-spacing: 0.08em;
|
|
200
|
+
line-height: 100%;
|
|
201
|
+
text-transform: uppercase;
|
|
202
|
+
color: white;
|
|
203
|
+
pointer-events: none;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Applied card */
|
|
207
|
+
.kol-combo-stage--applied {
|
|
208
|
+
display: flex;
|
|
209
|
+
height: 100%;
|
|
210
|
+
min-height: 360px;
|
|
211
|
+
width: 100%;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.kol-combo-applied-plate {
|
|
215
|
+
flex: 2;
|
|
216
|
+
padding: 32px;
|
|
217
|
+
display: flex;
|
|
218
|
+
flex-direction: column;
|
|
219
|
+
justify-content: space-between;
|
|
220
|
+
transition: background-color 400ms ease, color 400ms ease;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.kol-combo-applied-col {
|
|
224
|
+
flex: 1;
|
|
225
|
+
display: flex;
|
|
226
|
+
flex-direction: column;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.kol-combo-applied-surface { flex: 3; }
|
|
230
|
+
.kol-combo-applied-band--lg { flex: 2; }
|
|
231
|
+
.kol-combo-applied-band--sm { flex: 1; }
|
|
232
|
+
.kol-combo-applied-band { transition: background-color 400ms ease; }
|
|
233
|
+
|
|
234
|
+
.kol-combo-applied-accent-strip {
|
|
235
|
+
display: flex;
|
|
236
|
+
gap: 8px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.kol-combo-applied-accent-chip {
|
|
240
|
+
width: 20px;
|
|
241
|
+
height: 20px;
|
|
242
|
+
border-radius: 2px;
|
|
243
|
+
transition: background-color 400ms ease;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* ───── Foundations · combo lab ───── */
|
|
247
|
+
|
|
248
|
+
.kol-combo-lab {
|
|
249
|
+
display: flex;
|
|
250
|
+
flex-direction: column;
|
|
251
|
+
flex: 1;
|
|
252
|
+
padding: 24px;
|
|
253
|
+
border: 1px solid var(--kol-fg-08);
|
|
254
|
+
border-radius: 4px;
|
|
255
|
+
background: var(--kol-fg-02);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.kol-combo-controls { margin-bottom: 24px; }
|
|
259
|
+
|
|
260
|
+
.kol-combo-stage-wrap {
|
|
261
|
+
flex: 1;
|
|
262
|
+
margin-bottom: 24px;
|
|
263
|
+
padding: 32px;
|
|
264
|
+
background: var(--kol-fg-02);
|
|
265
|
+
border-radius: 4px;
|
|
266
|
+
min-height: 440px;
|
|
267
|
+
display: flex;
|
|
268
|
+
align-items: stretch;
|
|
269
|
+
justify-content: center;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.kol-combo-stage-anim {
|
|
273
|
+
width: 100%;
|
|
274
|
+
height: 100%;
|
|
275
|
+
animation: kol-combo-fade 260ms ease;
|
|
276
|
+
display: flex;
|
|
277
|
+
align-items: stretch;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.kol-combo-stage-anim > * { width: 100%; height: 100%; }
|
|
281
|
+
|
|
282
|
+
/* In fullbleed mode, let the lab fill the section */
|
|
283
|
+
.kol-page--fullbleed .kol-combo-lab { flex: 1; }
|
|
284
|
+
.kol-page--fullbleed .kol-combo-stage-wrap { min-height: 520px; }
|
|
285
|
+
|
|
286
|
+
@keyframes kol-combo-fade {
|
|
287
|
+
from { opacity: 0.2; transform: translateY(6px); }
|
|
288
|
+
to { opacity: 1; transform: none; }
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.kol-combo-readout {
|
|
292
|
+
display: grid;
|
|
293
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
294
|
+
gap: 8px 32px;
|
|
295
|
+
padding-top: 16px;
|
|
296
|
+
border-top: 1px solid var(--kol-fg-08);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Combo Lab — control rows (Layout / Palette / Logo selectors) */
|
|
300
|
+
.kol-combo-row {
|
|
301
|
+
display: flex;
|
|
302
|
+
align-items: center;
|
|
303
|
+
gap: 16px;
|
|
304
|
+
flex-wrap: wrap;
|
|
305
|
+
margin-bottom: 12px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.kol-combo-row-label { min-width: 72px; }
|
|
309
|
+
|
|
310
|
+
.kol-combo-row-controls {
|
|
311
|
+
display: flex;
|
|
312
|
+
flex-wrap: wrap;
|
|
313
|
+
gap: 6px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.kol-combo-footer {
|
|
317
|
+
display: flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: 16px;
|
|
320
|
+
margin-top: 8px;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.kol-combo-footer-desc { flex: 1; }
|
|
324
|
+
|
|
325
|
+
.kol-combo-randomize {
|
|
326
|
+
padding: 8px 16px;
|
|
327
|
+
background: transparent;
|
|
328
|
+
color: var(--kol-fg-80);
|
|
329
|
+
border: 1px solid var(--kol-fg-16);
|
|
330
|
+
border-radius: 4px;
|
|
331
|
+
font-family: var(--kol-font-family-mono, monospace);
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
cursor: pointer;
|
|
334
|
+
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.kol-combo-randomize:hover {
|
|
338
|
+
color: var(--kol-surface-on-primary);
|
|
339
|
+
border-color: var(--kol-fg-48);
|
|
340
|
+
background: var(--kol-fg-04);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* Combo Lab — live palette readout rows */
|
|
344
|
+
.kol-combo-swatch-row {
|
|
345
|
+
display: flex;
|
|
346
|
+
align-items: center;
|
|
347
|
+
gap: 12px;
|
|
348
|
+
padding: 6px 0;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.kol-combo-swatch-chip {
|
|
352
|
+
width: 24px;
|
|
353
|
+
height: 24px;
|
|
354
|
+
flex-shrink: 0;
|
|
355
|
+
border-radius: 3px;
|
|
356
|
+
transition: background 400ms ease;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.kol-combo-swatch-label {
|
|
360
|
+
min-width: 88px;
|
|
361
|
+
font-weight: 600;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.kol-combo-swatch-hex {
|
|
365
|
+
font-family: var(--kol-font-family-mono, monospace);
|
|
366
|
+
text-transform: uppercase;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.kol-combo-summary { margin-top: 16px; }
|
|
370
|
+
|
|
371
|
+
/* =============================================================================
|
|
372
|
+
Color anatomy — relocated from packages/framework/kol-framework.css 2026-07-10
|
|
373
|
+
============================================================================= */
|
|
374
|
+
|
|
375
|
+
/* ═════════════════════════════════════════════════════════════════════
|
|
376
|
+
Color Anatomy — token composition samples
|
|
377
|
+
|
|
378
|
+
Wrappers inlined in ColorAnatomy.jsx; figure margin via Preflight.
|
|
379
|
+
CSS retains the descendant typography for figcaption + inline <code>.
|
|
380
|
+
═════════════════════════════════════════════════════════════════════ */
|
|
381
|
+
|
|
382
|
+
.kol-anatomy-sample figcaption {
|
|
383
|
+
margin-top: 12px;
|
|
384
|
+
font-size: 12px;
|
|
385
|
+
color: var(--kol-fg-48);
|
|
386
|
+
font-style: italic;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.kol-anatomy-sample code {
|
|
390
|
+
font-family: var(--kol-font-family-mono, monospace);
|
|
391
|
+
font-size: 11px;
|
|
392
|
+
background: color-mix(in srgb, currentColor 18%, transparent);
|
|
393
|
+
padding: 1px 4px;
|
|
394
|
+
border-radius: 3px;
|
|
395
|
+
opacity: 1;
|
|
396
|
+
}
|
package/kol-theme.css
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
@import "./kol-components-chess.css" layer(components);
|
|
46
46
|
@import "./kol-components-workshop.css" layer(components);
|
|
47
47
|
@import "./kol-components-foundry.css" layer(components);
|
|
48
|
+
@import "./kol-components-styleguide.css" layer(components);
|
|
48
49
|
|
|
49
50
|
/* Theme-level design tokens */
|
|
50
51
|
@layer components {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.4",
|
|
4
4
|
"description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|