@kolkrabbi/kol-theme 0.10.0 → 0.11.1
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-color.css +24 -0
- package/kol-components-foundry.css +305 -0
- package/package.json +1 -1
package/kol-color.css
CHANGED
|
@@ -55,6 +55,30 @@
|
|
|
55
55
|
--ui-info: #1D4ED8;
|
|
56
56
|
--ui-success: #15803D;
|
|
57
57
|
|
|
58
|
+
/* ---------------------------------------------------------------------------
|
|
59
|
+
* PALETTE — shared categorical colors for tags, charts, data viz.
|
|
60
|
+
* Lifted verbatim from the monorepo theme (2026-07-16): the dashboards +
|
|
61
|
+
* chess component CSS already reference these vars, but the definitions
|
|
62
|
+
* never migrated — first real kol-dashboards consumer found them dangling.
|
|
63
|
+
* --------------------------------------------------------------------------- */
|
|
64
|
+
|
|
65
|
+
--kol-palette-blue: #3740D3;
|
|
66
|
+
--kol-palette-teal: #49a0a2;
|
|
67
|
+
--kol-palette-green: #66a44c;
|
|
68
|
+
--kol-palette-yellow: #ffe32e;
|
|
69
|
+
--kol-palette-red: #ce4646;
|
|
70
|
+
--kol-palette-orange: #db8000;
|
|
71
|
+
--kol-palette-purple: #9437FF;
|
|
72
|
+
|
|
73
|
+
/* Palette Light — muted variants for light-mode backgrounds */
|
|
74
|
+
--kol-palette-blue-light: #c8caf4;
|
|
75
|
+
--kol-palette-teal-light: #d0e8e9;
|
|
76
|
+
--kol-palette-green-light: #d4e6cb;
|
|
77
|
+
--kol-palette-yellow-light: #d0d79d;
|
|
78
|
+
--kol-palette-red-light: #f0caca;
|
|
79
|
+
--kol-palette-orange-light: #f5ddb3;
|
|
80
|
+
--kol-palette-purple-light: #e0c8ff;
|
|
81
|
+
|
|
58
82
|
/* ---------------------------------------------------------------------------
|
|
59
83
|
* BORDER
|
|
60
84
|
* --------------------------------------------------------------------------- */
|
|
@@ -47,3 +47,308 @@
|
|
|
47
47
|
-webkit-text-stroke-width: 3px;
|
|
48
48
|
-webkit-text-stroke-color: var(--kol-text-pressure-stroke, var(--kol-accent-primary));
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
/* =============================================================================
|
|
52
|
+
* FONTVIEWER ENGINE CHROME — the variable-font viewer instrument (canvas stage,
|
|
53
|
+
* metrics overlay, axis controls). Lobbied verbatim from the elder
|
|
54
|
+
* @kol/fontviewer package 2026-07-16 alongside the engine (kol-foundry ./engine).
|
|
55
|
+
* ponytail: carries its own --fv-* token set + system-ui stack from the source —
|
|
56
|
+
* kol-token conformance is a follow-up pass, not done blind in the lobby.
|
|
57
|
+
* ============================================================================= */
|
|
58
|
+
|
|
59
|
+
:root {
|
|
60
|
+
--system-ui: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
61
|
+
--fv-white: rgb(255, 255, 255);
|
|
62
|
+
--fv-black: rgb(0, 0, 0);
|
|
63
|
+
--fv-metrics-color: rgba(0, 0, 0, 0.4);
|
|
64
|
+
--fv-border-color: var(--fv-black);
|
|
65
|
+
--fv-surface: rgba(255, 255, 255, 0.1);
|
|
66
|
+
--fv-panel-bg: rgba(255, 255, 255, 0.1);
|
|
67
|
+
--fv-panel-border: var(--fv-black);
|
|
68
|
+
--fv-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.fontviewer-section,
|
|
72
|
+
.fontviewer-container {
|
|
73
|
+
width: 100%;
|
|
74
|
+
height: 100%;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.fontviewer-section {
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.fontviewer-container {
|
|
83
|
+
position: relative;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.font-viewer-wrapper {
|
|
88
|
+
position: relative;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 100%;
|
|
91
|
+
font-family: var(--system-ui);
|
|
92
|
+
font-size: 0.7rem;
|
|
93
|
+
background: var(--fv-white);
|
|
94
|
+
color: var(--fv-black);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.font-viewer-display-container {
|
|
98
|
+
position: absolute;
|
|
99
|
+
top: 0;
|
|
100
|
+
left: 0;
|
|
101
|
+
right: 0;
|
|
102
|
+
bottom: 0;
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
justify-content: center;
|
|
106
|
+
background: var(--fv-white);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.font-viewer-glyph-buffer {
|
|
110
|
+
color: var(--fv-black);
|
|
111
|
+
text-align: center;
|
|
112
|
+
position: relative;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.font-viewer-metrics-overlay {
|
|
116
|
+
position: absolute;
|
|
117
|
+
inset: 0;
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.font-viewer-wrapper {
|
|
122
|
+
--fv-controls-background: rgba(255, 255, 255, 0.2);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.font-viewer-wrapper[data-color-scheme='dark'] {
|
|
126
|
+
--fv-controls-background: rgba(0, 0, 0, 0.2);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.font-viewer-controls {
|
|
130
|
+
position: fixed;
|
|
131
|
+
left: 0;
|
|
132
|
+
right: 0;
|
|
133
|
+
bottom: 0;
|
|
134
|
+
background: var(--fv-controls-background);
|
|
135
|
+
backdrop-filter: blur(2px);
|
|
136
|
+
padding: 7px 14px;
|
|
137
|
+
border-top: 1px solid var(--fv-border-color);
|
|
138
|
+
z-index: 99999;
|
|
139
|
+
color: var(--fv-black);
|
|
140
|
+
opacity: 0;
|
|
141
|
+
pointer-events: none;
|
|
142
|
+
transition: opacity 400ms ease;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.font-viewer-controls.is-visible {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
pointer-events: auto !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.font-viewer-buttons {
|
|
151
|
+
display: flex;
|
|
152
|
+
flex-wrap: wrap;
|
|
153
|
+
gap: 6px;
|
|
154
|
+
margin-bottom: 6px;
|
|
155
|
+
pointer-events: auto !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.font-viewer-btn {
|
|
159
|
+
font-size: 0.7rem;
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
height: 23px;
|
|
162
|
+
padding: 0 8px;
|
|
163
|
+
margin-right: 5px;
|
|
164
|
+
margin-bottom: 7px;
|
|
165
|
+
background: transparent;
|
|
166
|
+
color: var(--fv-black);
|
|
167
|
+
border: 1px solid var(--fv-border-color);
|
|
168
|
+
border-radius: 5px;
|
|
169
|
+
transition: 0.2s;
|
|
170
|
+
pointer-events: auto !important;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.font-viewer-btn:last-child {
|
|
174
|
+
margin-right: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.font-viewer-btn.active {
|
|
178
|
+
background-color: var(--fv-black);
|
|
179
|
+
color: var(--fv-white);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.font-viewer-btn.disabled,
|
|
183
|
+
.font-viewer-btn:disabled {
|
|
184
|
+
opacity: 0.4;
|
|
185
|
+
cursor: not-allowed;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.font-viewer-sliders {
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
gap: 8px;
|
|
192
|
+
padding: 0 14px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.font-viewer-slider-group {
|
|
196
|
+
display: flex;
|
|
197
|
+
align-items: center;
|
|
198
|
+
gap: 10px;
|
|
199
|
+
margin-bottom: 6px;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.font-viewer-slider-group label {
|
|
203
|
+
min-width: 120px;
|
|
204
|
+
font-size: 0.7rem;
|
|
205
|
+
font-weight: 500;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.font-viewer-slider-group span {
|
|
209
|
+
min-width: 60px;
|
|
210
|
+
text-align: right;
|
|
211
|
+
font-size: 0.7rem;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.font-viewer-slider-group input[type='range'] {
|
|
215
|
+
flex: 1;
|
|
216
|
+
height: 15px;
|
|
217
|
+
padding: 7px 0;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
background: linear-gradient(var(--fv-black), var(--fv-black)) center/100% 1px no-repeat;
|
|
220
|
+
-webkit-appearance: none;
|
|
221
|
+
appearance: none;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.font-viewer-slider-group input[type='range']::-webkit-slider-runnable-track,
|
|
225
|
+
.font-viewer-slider-group input[type='range']::-moz-range-track {
|
|
226
|
+
width: 100%;
|
|
227
|
+
height: 1px;
|
|
228
|
+
background: transparent;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.font-viewer-slider-group input[type='range']::-webkit-slider-runnable-track {
|
|
232
|
+
border-radius: 9999px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.font-viewer-slider-group input[type='range']::-webkit-slider-thumb {
|
|
236
|
+
-webkit-appearance: none;
|
|
237
|
+
appearance: none;
|
|
238
|
+
height: 15px;
|
|
239
|
+
width: 15px;
|
|
240
|
+
border-radius: 50%;
|
|
241
|
+
background: var(--fv-black);
|
|
242
|
+
cursor: pointer;
|
|
243
|
+
margin-top: 0;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.font-viewer-slider-group input[type='range']::-moz-range-thumb {
|
|
247
|
+
height: 15px;
|
|
248
|
+
width: 15px;
|
|
249
|
+
border-radius: 50%;
|
|
250
|
+
background: var(--fv-black);
|
|
251
|
+
cursor: pointer;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.font-viewer-slider-group input[type='range']::-moz-range-track {
|
|
255
|
+
border-radius: 9999px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.font-viewer-slider-group input[type='range']::-ms-track {
|
|
259
|
+
width: 100%;
|
|
260
|
+
height: 1px;
|
|
261
|
+
background: transparent;
|
|
262
|
+
border-color: transparent;
|
|
263
|
+
color: transparent;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.font-viewer-slider-group input[type='range']::-ms-fill-lower,
|
|
267
|
+
.font-viewer-slider-group input[type='range']::-ms-fill-upper {
|
|
268
|
+
background: var(--fv-black);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.font-viewer-slider-group input[type='range']::-ms-thumb {
|
|
272
|
+
height: 15px;
|
|
273
|
+
width: 15px;
|
|
274
|
+
border-radius: 50%;
|
|
275
|
+
background: var(--fv-black);
|
|
276
|
+
cursor: pointer;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.font-viewer-slider-group input[type='range']::-webkit-slider-thumb,
|
|
280
|
+
.font-viewer-slider-group input[type='range']::-moz-range-thumb {
|
|
281
|
+
height: 15px;
|
|
282
|
+
width: 15px;
|
|
283
|
+
border-radius: 50%;
|
|
284
|
+
background: var(--fv-black);
|
|
285
|
+
cursor: pointer;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.font-viewer-variable-axes {
|
|
289
|
+
margin-top: 12px;
|
|
290
|
+
display: flex;
|
|
291
|
+
flex-direction: column;
|
|
292
|
+
gap: 6px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.font-viewer-info-panel {
|
|
296
|
+
position: absolute;
|
|
297
|
+
z-index: 10001;
|
|
298
|
+
padding: 14px;
|
|
299
|
+
border-radius: 8px;
|
|
300
|
+
color: var(--fv-black);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.font-viewer-font-info {
|
|
304
|
+
width: 300px;
|
|
305
|
+
top: 8px;
|
|
306
|
+
left: 8px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.font-viewer-glyph-info {
|
|
310
|
+
width: 150px;
|
|
311
|
+
top: 8px;
|
|
312
|
+
right: 8px;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.font-viewer-metrics-overlay .metric-line {
|
|
316
|
+
position: absolute;
|
|
317
|
+
width: 100%;
|
|
318
|
+
height: 1px;
|
|
319
|
+
background: var(--fv-metrics-color);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.font-viewer-metrics-overlay .side-bearing-line {
|
|
323
|
+
position: absolute;
|
|
324
|
+
width: 1px;
|
|
325
|
+
height: 100%;
|
|
326
|
+
background: var(--fv-metrics-color);
|
|
327
|
+
top: 0;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.font-viewer-metrics-overlay .legend {
|
|
331
|
+
position: absolute;
|
|
332
|
+
padding-left: 14px;
|
|
333
|
+
color: var(--fv-black);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.axis-controls {
|
|
337
|
+
margin-top: 12px;
|
|
338
|
+
display: flex;
|
|
339
|
+
flex-direction: column;
|
|
340
|
+
gap: 6px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.glyph-info-container {
|
|
344
|
+
display: flex;
|
|
345
|
+
gap: 16px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.glyph-info-container .info-column {
|
|
349
|
+
min-width: 120px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.font-viewer-wrapper .monospaced {
|
|
353
|
+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
354
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.1",
|
|
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",
|