twico-ui 0.1.0 → 1.0.0
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/LICENSE +21 -21
- package/README.md +233 -182
- package/dist/colors.cjs +98 -0
- package/dist/colors.cjs.map +1 -0
- package/dist/colors.d.cts +181 -0
- package/dist/colors.d.ts +181 -0
- package/dist/colors.mjs +86 -0
- package/dist/colors.mjs.map +1 -0
- package/dist/index.cjs +4574 -1063
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2083 -1395
- package/dist/index.d.ts +2083 -1395
- package/dist/index.mjs +4541 -1064
- package/dist/index.mjs.map +1 -1
- package/package.json +117 -71
- package/styles/fonts/OFL-PlusJakartaSans.txt +93 -93
- package/styles/twico-ui.css +607 -546
package/styles/twico-ui.css
CHANGED
|
@@ -1,546 +1,607 @@
|
|
|
1
|
-
/* ============================================================
|
|
2
|
-
twico-ui — bundled stylesheet (design tokens + base reset + webfonts)
|
|
3
|
-
Import ONCE at your app root: import "twico-ui/styles.css";
|
|
4
|
-
Dark mode: add class="dark" (or data-theme="dark") to <html>.
|
|
5
|
-
Fonts ship beside this file in ./fonts/ (self-hosted, OFL).
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
font-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
font-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
font-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
--indigo-
|
|
55
|
-
--indigo-
|
|
56
|
-
--indigo-
|
|
57
|
-
--indigo-
|
|
58
|
-
--indigo-
|
|
59
|
-
--indigo-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
--brand-
|
|
68
|
-
--brand-
|
|
69
|
-
--brand-
|
|
70
|
-
--brand-
|
|
71
|
-
--brand-
|
|
72
|
-
--brand-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--slate-
|
|
81
|
-
--slate-
|
|
82
|
-
--slate-
|
|
83
|
-
--slate-
|
|
84
|
-
--slate-
|
|
85
|
-
--slate-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--
|
|
89
|
-
--
|
|
90
|
-
--
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
96
|
-
--
|
|
97
|
-
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
|
|
103
|
-
--
|
|
104
|
-
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
|
|
117
|
-
--
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
--
|
|
126
|
-
--
|
|
127
|
-
--
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
--
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
--color-
|
|
147
|
-
|
|
148
|
-
/*
|
|
149
|
-
--color-
|
|
150
|
-
--color-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
--color-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
--color-
|
|
159
|
-
--color-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
--color-
|
|
165
|
-
--color-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
.
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
--color-
|
|
177
|
-
--color-
|
|
178
|
-
--color-
|
|
179
|
-
--color-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
--color-
|
|
183
|
-
--color-
|
|
184
|
-
|
|
185
|
-
--color-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
--color-
|
|
189
|
-
|
|
190
|
-
--color-
|
|
191
|
-
--color-
|
|
192
|
-
--color-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
--color-
|
|
196
|
-
--color-
|
|
197
|
-
|
|
198
|
-
--color-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
--color-
|
|
211
|
-
--color-
|
|
212
|
-
--color-
|
|
213
|
-
--color-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
--color-
|
|
217
|
-
--color-
|
|
218
|
-
|
|
219
|
-
--color-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
:
|
|
229
|
-
|
|
230
|
-
--
|
|
231
|
-
|
|
232
|
-
--
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
--
|
|
237
|
-
--
|
|
238
|
-
|
|
239
|
-
--
|
|
240
|
-
--
|
|
241
|
-
--
|
|
242
|
-
--
|
|
243
|
-
|
|
244
|
-
--
|
|
245
|
-
--
|
|
246
|
-
--
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
--
|
|
251
|
-
--
|
|
252
|
-
--
|
|
253
|
-
--
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
--
|
|
265
|
-
|
|
266
|
-
--
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
/*
|
|
270
|
-
--text-
|
|
271
|
-
--text-
|
|
272
|
-
--text-
|
|
273
|
-
--text-
|
|
274
|
-
--text-
|
|
275
|
-
--text-
|
|
276
|
-
--text-
|
|
277
|
-
--text-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
/*
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
:
|
|
287
|
-
--
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
--
|
|
291
|
-
--
|
|
292
|
-
--
|
|
293
|
-
--
|
|
294
|
-
--
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
--
|
|
298
|
-
--
|
|
299
|
-
--
|
|
300
|
-
--
|
|
301
|
-
--
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
--
|
|
305
|
-
--
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
--
|
|
309
|
-
--
|
|
310
|
-
--
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
--
|
|
322
|
-
--
|
|
323
|
-
--
|
|
324
|
-
--
|
|
325
|
-
--
|
|
326
|
-
--
|
|
327
|
-
--
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
/*
|
|
331
|
-
/*
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
:
|
|
337
|
-
|
|
338
|
-
--
|
|
339
|
-
--
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
--
|
|
343
|
-
--
|
|
344
|
-
--
|
|
345
|
-
|
|
346
|
-
/*
|
|
347
|
-
--
|
|
348
|
-
--
|
|
349
|
-
--
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
--
|
|
355
|
-
--
|
|
356
|
-
--
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
--
|
|
360
|
-
|
|
361
|
-
/*
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
--
|
|
373
|
-
--
|
|
374
|
-
--
|
|
375
|
-
--
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
/*
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
/*
|
|
386
|
-
--
|
|
387
|
-
--
|
|
388
|
-
--
|
|
389
|
-
--
|
|
390
|
-
--
|
|
391
|
-
|
|
392
|
-
/*
|
|
393
|
-
--
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
--
|
|
397
|
-
--
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
@
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
font-
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
:
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
1
|
+
/* ============================================================
|
|
2
|
+
twico-ui — bundled stylesheet (design tokens + base reset + webfonts)
|
|
3
|
+
Import ONCE at your app root: import "twico-ui/styles.css";
|
|
4
|
+
Dark mode: add class="dark" (or data-theme="dark") to <html>.
|
|
5
|
+
Fonts ship beside this file in ./fonts/ (self-hosted, OFL).
|
|
6
|
+
|
|
7
|
+
GENERATED by scripts/build-css.mjs from tokens/*.css + base.css —
|
|
8
|
+
do not edit by hand; run `npm run build:css` after editing a source.
|
|
9
|
+
============================================================ */
|
|
10
|
+
|
|
11
|
+
/* ===== tokens/fonts.css ===== */
|
|
12
|
+
/* ============================================================
|
|
13
|
+
Twico UI — Webfonts (self-hosted, OFL licensed)
|
|
14
|
+
Plus Jakarta Sans (UI) + JetBrains Mono (code).
|
|
15
|
+
Variable fonts: one file covers weights 200–800.
|
|
16
|
+
============================================================ */
|
|
17
|
+
|
|
18
|
+
@font-face {
|
|
19
|
+
font-family: "Plus Jakarta Sans";
|
|
20
|
+
src: url("./fonts/PlusJakartaSans-Variable.ttf") format("truetype-variations");
|
|
21
|
+
font-weight: 200 800;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-display: swap;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: "Plus Jakarta Sans";
|
|
28
|
+
src: url("./fonts/PlusJakartaSans-Italic-Variable.ttf") format("truetype-variations");
|
|
29
|
+
font-weight: 200 800;
|
|
30
|
+
font-style: italic;
|
|
31
|
+
font-display: swap;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@font-face {
|
|
35
|
+
font-family: "JetBrains Mono";
|
|
36
|
+
src: url("./fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
|
|
37
|
+
font-weight: 100 800;
|
|
38
|
+
font-style: normal;
|
|
39
|
+
font-display: swap;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ===== tokens/colors.css ===== */
|
|
43
|
+
/* ============================================================
|
|
44
|
+
Twico UI — Color tokens
|
|
45
|
+
Primitive palettes (raw scales) + semantic aliases.
|
|
46
|
+
Semantic aliases flip under .dark / [data-theme="dark"].
|
|
47
|
+
Re-theme by overriding the --brand-* scale or the --color-* aliases.
|
|
48
|
+
============================================================ */
|
|
49
|
+
|
|
50
|
+
:root {
|
|
51
|
+
color-scheme: light; /* native UI (scrollbars, form controls) follows the theme */
|
|
52
|
+
|
|
53
|
+
/* ---- Primitive: Indigo (brand) ---- */
|
|
54
|
+
--indigo-50: #eef2ff;
|
|
55
|
+
--indigo-100: #e0e7ff;
|
|
56
|
+
--indigo-200: #c7d2fe;
|
|
57
|
+
--indigo-300: #a5b4fc;
|
|
58
|
+
--indigo-400: #818cf8;
|
|
59
|
+
--indigo-500: #6366f1;
|
|
60
|
+
--indigo-600: #4f46e5;
|
|
61
|
+
--indigo-700: #4338ca;
|
|
62
|
+
--indigo-800: #3730a3;
|
|
63
|
+
--indigo-900: #312e81;
|
|
64
|
+
--indigo-950: #1e1b4b;
|
|
65
|
+
|
|
66
|
+
/* Brand alias — remap these to re-skin the whole library */
|
|
67
|
+
--brand-50: var(--indigo-50);
|
|
68
|
+
--brand-100: var(--indigo-100);
|
|
69
|
+
--brand-200: var(--indigo-200);
|
|
70
|
+
--brand-300: var(--indigo-300);
|
|
71
|
+
--brand-400: var(--indigo-400);
|
|
72
|
+
--brand-500: var(--indigo-500);
|
|
73
|
+
--brand-600: var(--indigo-600);
|
|
74
|
+
--brand-700: var(--indigo-700);
|
|
75
|
+
--brand-800: var(--indigo-800);
|
|
76
|
+
--brand-900: var(--indigo-900);
|
|
77
|
+
--brand-950: var(--indigo-950);
|
|
78
|
+
|
|
79
|
+
/* ---- Primitive: Slate (neutral) ---- */
|
|
80
|
+
--slate-50: #f8fafc;
|
|
81
|
+
--slate-100: #f1f5f9;
|
|
82
|
+
--slate-200: #e2e8f0;
|
|
83
|
+
--slate-300: #cbd5e1;
|
|
84
|
+
--slate-400: #94a3b8;
|
|
85
|
+
--slate-500: #64748b;
|
|
86
|
+
--slate-600: #475569;
|
|
87
|
+
--slate-700: #334155;
|
|
88
|
+
--slate-800: #1e293b;
|
|
89
|
+
--slate-900: #0f172a;
|
|
90
|
+
--slate-950: #020617;
|
|
91
|
+
|
|
92
|
+
/* ---- Primitive: Semantic hues (full 50–950 ramps, like indigo/slate) ---- */
|
|
93
|
+
--emerald-50: #ecfdf5;
|
|
94
|
+
--emerald-100: #d1fae5;
|
|
95
|
+
--emerald-200: #a7f3d0;
|
|
96
|
+
--emerald-300: #6ee7b7;
|
|
97
|
+
--emerald-400: #34d399;
|
|
98
|
+
--emerald-500: #10b981;
|
|
99
|
+
--emerald-600: #059669;
|
|
100
|
+
--emerald-700: #047857;
|
|
101
|
+
--emerald-800: #065f46;
|
|
102
|
+
--emerald-900: #064e3b;
|
|
103
|
+
--emerald-950: #022c22;
|
|
104
|
+
|
|
105
|
+
--amber-50: #fffbeb;
|
|
106
|
+
--amber-100: #fef3c7;
|
|
107
|
+
--amber-200: #fde68a;
|
|
108
|
+
--amber-300: #fcd34d;
|
|
109
|
+
--amber-400: #fbbf24;
|
|
110
|
+
--amber-500: #f59e0b;
|
|
111
|
+
--amber-600: #d97706;
|
|
112
|
+
--amber-700: #b45309;
|
|
113
|
+
--amber-800: #92400e;
|
|
114
|
+
--amber-900: #78350f;
|
|
115
|
+
--amber-950: #451a03;
|
|
116
|
+
|
|
117
|
+
--rose-50: #fff1f2;
|
|
118
|
+
--rose-100: #ffe4e6;
|
|
119
|
+
--rose-200: #fecdd3;
|
|
120
|
+
--rose-300: #fda4af;
|
|
121
|
+
--rose-400: #fb7185;
|
|
122
|
+
--rose-500: #f43f5e;
|
|
123
|
+
--rose-600: #e11d48;
|
|
124
|
+
--rose-700: #be123c;
|
|
125
|
+
--rose-800: #9f1239;
|
|
126
|
+
--rose-900: #881337;
|
|
127
|
+
--rose-950: #4c0519;
|
|
128
|
+
|
|
129
|
+
--sky-50: #f0f9ff;
|
|
130
|
+
--sky-100: #e0f2fe;
|
|
131
|
+
--sky-200: #bae6fd;
|
|
132
|
+
--sky-300: #7dd3fc;
|
|
133
|
+
--sky-400: #38bdf8;
|
|
134
|
+
--sky-500: #0ea5e9;
|
|
135
|
+
--sky-600: #0284c7;
|
|
136
|
+
--sky-700: #0369a1;
|
|
137
|
+
--sky-800: #075985;
|
|
138
|
+
--sky-900: #0c4a6e;
|
|
139
|
+
--sky-950: #082f49;
|
|
140
|
+
|
|
141
|
+
/* ============================================================
|
|
142
|
+
SEMANTIC ALIASES — LIGHT (default)
|
|
143
|
+
============================================================ */
|
|
144
|
+
|
|
145
|
+
/* Surfaces & backgrounds */
|
|
146
|
+
--color-bg: var(--slate-50); /* app/page background */
|
|
147
|
+
--color-surface: #ffffff; /* cards, panels, sheets */
|
|
148
|
+
--color-surface-raised: #ffffff; /* menus, popovers (with shadow) */
|
|
149
|
+
--color-surface-sunken: var(--slate-100); /* wells, inset areas */
|
|
150
|
+
--color-overlay: rgb(15 23 42 / 0.45); /* modal scrim */
|
|
151
|
+
|
|
152
|
+
/* Borders & dividers */
|
|
153
|
+
--color-border: var(--slate-200);
|
|
154
|
+
--color-border-strong: var(--slate-300);
|
|
155
|
+
--color-divider: var(--slate-200);
|
|
156
|
+
|
|
157
|
+
/* Text */
|
|
158
|
+
--color-text: var(--slate-900);
|
|
159
|
+
--color-text-muted: var(--slate-600);
|
|
160
|
+
--color-text-subtle: var(--slate-400);
|
|
161
|
+
--color-text-inverted: #ffffff;
|
|
162
|
+
|
|
163
|
+
/* Primary / brand */
|
|
164
|
+
--color-primary: var(--brand-500);
|
|
165
|
+
--color-primary-hover: var(--brand-600);
|
|
166
|
+
--color-primary-active: var(--brand-700);
|
|
167
|
+
--color-primary-fg: #ffffff;
|
|
168
|
+
--color-primary-subtle: var(--brand-50);
|
|
169
|
+
--color-primary-subtle-fg: var(--brand-700);
|
|
170
|
+
--color-primary-border: var(--brand-200);
|
|
171
|
+
|
|
172
|
+
/* Focus ring */
|
|
173
|
+
--color-ring: rgb(99 102 241 / 0.45);
|
|
174
|
+
|
|
175
|
+
/* Success */
|
|
176
|
+
--color-success: var(--emerald-600);
|
|
177
|
+
--color-success-fg: #ffffff;
|
|
178
|
+
--color-success-subtle: var(--emerald-50);
|
|
179
|
+
--color-success-subtle-fg: var(--emerald-600);
|
|
180
|
+
|
|
181
|
+
/* Warning */
|
|
182
|
+
--color-warning: var(--amber-500);
|
|
183
|
+
--color-warning-fg: #ffffff;
|
|
184
|
+
--color-warning-subtle: var(--amber-50);
|
|
185
|
+
--color-warning-subtle-fg: var(--amber-600);
|
|
186
|
+
|
|
187
|
+
/* Danger */
|
|
188
|
+
--color-danger: var(--rose-500);
|
|
189
|
+
--color-danger-hover: var(--rose-600);
|
|
190
|
+
--color-danger-fg: #ffffff;
|
|
191
|
+
--color-danger-subtle: var(--rose-50);
|
|
192
|
+
--color-danger-subtle-fg: var(--rose-600);
|
|
193
|
+
|
|
194
|
+
/* Info */
|
|
195
|
+
--color-info: var(--sky-500);
|
|
196
|
+
--color-info-fg: #ffffff;
|
|
197
|
+
--color-info-subtle: var(--sky-50);
|
|
198
|
+
--color-info-subtle-fg: var(--sky-600);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* ============================================================
|
|
202
|
+
SEMANTIC ALIASES — DARK
|
|
203
|
+
Toggle by adding class="dark" or data-theme="dark" to <html>.
|
|
204
|
+
============================================================ */
|
|
205
|
+
|
|
206
|
+
.dark,
|
|
207
|
+
[data-theme="dark"] {
|
|
208
|
+
color-scheme: dark;
|
|
209
|
+
--color-bg: var(--slate-950);
|
|
210
|
+
--color-surface: var(--slate-900);
|
|
211
|
+
--color-surface-raised: var(--slate-800);
|
|
212
|
+
--color-surface-sunken: #0b1222;
|
|
213
|
+
--color-overlay: rgb(2 6 23 / 0.65);
|
|
214
|
+
|
|
215
|
+
--color-border: #25324a;
|
|
216
|
+
--color-border-strong: var(--slate-700);
|
|
217
|
+
--color-divider: #1c2840;
|
|
218
|
+
|
|
219
|
+
--color-text: var(--slate-50);
|
|
220
|
+
--color-text-muted: var(--slate-300);
|
|
221
|
+
--color-text-subtle: var(--slate-500);
|
|
222
|
+
--color-text-inverted: var(--slate-900);
|
|
223
|
+
|
|
224
|
+
--color-primary: var(--brand-500);
|
|
225
|
+
--color-primary-hover: var(--brand-400);
|
|
226
|
+
--color-primary-active: var(--brand-300);
|
|
227
|
+
--color-primary-fg: #ffffff;
|
|
228
|
+
--color-primary-subtle: rgb(99 102 241 / 0.16);
|
|
229
|
+
--color-primary-subtle-fg: var(--brand-300);
|
|
230
|
+
--color-primary-border: rgb(99 102 241 / 0.35);
|
|
231
|
+
|
|
232
|
+
--color-ring: rgb(129 140 248 / 0.55);
|
|
233
|
+
|
|
234
|
+
--color-success: var(--emerald-500);
|
|
235
|
+
--color-success-fg: #052e1d;
|
|
236
|
+
--color-success-subtle: rgb(16 185 129 / 0.15);
|
|
237
|
+
--color-success-subtle-fg: var(--emerald-400);
|
|
238
|
+
|
|
239
|
+
--color-warning: var(--amber-500);
|
|
240
|
+
--color-warning-fg: #2c1701;
|
|
241
|
+
--color-warning-subtle: rgb(245 158 11 / 0.15);
|
|
242
|
+
--color-warning-subtle-fg: var(--amber-400);
|
|
243
|
+
|
|
244
|
+
--color-danger: var(--rose-500);
|
|
245
|
+
--color-danger-hover: var(--rose-400);
|
|
246
|
+
--color-danger-fg: #2c0610;
|
|
247
|
+
--color-danger-subtle: rgb(244 63 94 / 0.15);
|
|
248
|
+
--color-danger-subtle-fg: var(--rose-400);
|
|
249
|
+
|
|
250
|
+
--color-info: var(--sky-500);
|
|
251
|
+
--color-info-fg: #04212f;
|
|
252
|
+
--color-info-subtle: rgb(14 165 233 / 0.15);
|
|
253
|
+
--color-info-subtle-fg: var(--sky-400);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* ===== tokens/typography.css ===== */
|
|
257
|
+
/* ============================================================
|
|
258
|
+
Twico UI — Typography tokens
|
|
259
|
+
Family: Plus Jakarta Sans (UI) · JetBrains Mono (code)
|
|
260
|
+
============================================================ */
|
|
261
|
+
|
|
262
|
+
:root {
|
|
263
|
+
/* Families */
|
|
264
|
+
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
|
|
265
|
+
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
266
|
+
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
|
|
267
|
+
Menlo, Consolas, monospace;
|
|
268
|
+
|
|
269
|
+
/* Type scale (rem, 16px root) */
|
|
270
|
+
--text-xs: 0.75rem; /* 12 */
|
|
271
|
+
--text-sm: 0.875rem; /* 14 */
|
|
272
|
+
--text-base: 1rem; /* 16 */
|
|
273
|
+
--text-lg: 1.125rem; /* 18 */
|
|
274
|
+
--text-xl: 1.25rem; /* 20 */
|
|
275
|
+
--text-2xl: 1.5rem; /* 24 */
|
|
276
|
+
--text-3xl: 1.875rem; /* 30 */
|
|
277
|
+
--text-4xl: 2.25rem; /* 36 */
|
|
278
|
+
--text-5xl: 3rem; /* 48 */
|
|
279
|
+
--text-6xl: 3.75rem; /* 60 */
|
|
280
|
+
--text-7xl: 4.5rem; /* 72 */
|
|
281
|
+
|
|
282
|
+
/* Weights */
|
|
283
|
+
--font-normal: 400;
|
|
284
|
+
--font-medium: 500;
|
|
285
|
+
--font-semibold: 600;
|
|
286
|
+
--font-bold: 700;
|
|
287
|
+
--font-extrabold: 800;
|
|
288
|
+
|
|
289
|
+
/* Line heights */
|
|
290
|
+
--leading-none: 1;
|
|
291
|
+
--leading-tight: 1.2;
|
|
292
|
+
--leading-snug: 1.35;
|
|
293
|
+
--leading-normal: 1.5;
|
|
294
|
+
--leading-relaxed: 1.65;
|
|
295
|
+
|
|
296
|
+
/* Letter spacing */
|
|
297
|
+
--tracking-tighter: -0.03em; /* display headings */
|
|
298
|
+
--tracking-tight: -0.015em; /* headings */
|
|
299
|
+
--tracking-normal: 0em;
|
|
300
|
+
--tracking-wide: 0.02em;
|
|
301
|
+
--tracking-wider: 0.06em; /* eyebrows / labels (uppercase) */
|
|
302
|
+
|
|
303
|
+
/* Semantic role tokens */
|
|
304
|
+
--text-display: var(--text-6xl);
|
|
305
|
+
--text-h1: var(--text-4xl);
|
|
306
|
+
--text-h2: var(--text-3xl);
|
|
307
|
+
--text-h3: var(--text-2xl);
|
|
308
|
+
--text-h4: var(--text-xl);
|
|
309
|
+
--text-body: var(--text-base);
|
|
310
|
+
--text-body-sm: var(--text-sm);
|
|
311
|
+
--text-caption: var(--text-xs);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/* ===== tokens/spacing.css ===== */
|
|
315
|
+
/* ============================================================
|
|
316
|
+
Twico UI — Spacing & sizing tokens
|
|
317
|
+
4px base grid.
|
|
318
|
+
============================================================ */
|
|
319
|
+
|
|
320
|
+
:root {
|
|
321
|
+
--space-0: 0;
|
|
322
|
+
--space-px: 1px;
|
|
323
|
+
--space-0-5: 0.125rem; /* 2 */
|
|
324
|
+
--space-1: 0.25rem; /* 4 */
|
|
325
|
+
--space-1-5: 0.375rem; /* 6 */
|
|
326
|
+
--space-2: 0.5rem; /* 8 */
|
|
327
|
+
--space-2-5: 0.625rem; /* 10 */
|
|
328
|
+
--space-3: 0.75rem; /* 12 */
|
|
329
|
+
--space-4: 1rem; /* 16 */
|
|
330
|
+
--space-5: 1.25rem; /* 20 */
|
|
331
|
+
--space-6: 1.5rem; /* 24 */
|
|
332
|
+
--space-7: 1.75rem; /* 28 */
|
|
333
|
+
--space-8: 2rem; /* 32 */
|
|
334
|
+
--space-10: 2.5rem; /* 40 */
|
|
335
|
+
--space-12: 3rem; /* 48 */
|
|
336
|
+
--space-16: 4rem; /* 64 */
|
|
337
|
+
--space-20: 5rem; /* 80 */
|
|
338
|
+
--space-24: 6rem; /* 96 */
|
|
339
|
+
--space-32: 8rem; /* 128 */
|
|
340
|
+
|
|
341
|
+
/* Control heights (consistent across buttons / inputs / selects) */
|
|
342
|
+
--control-h-sm: 2rem; /* 32 */
|
|
343
|
+
--control-h-md: 2.5rem; /* 40 */
|
|
344
|
+
--control-h-lg: 3rem; /* 48 */
|
|
345
|
+
|
|
346
|
+
/* Layout */
|
|
347
|
+
--container-sm: 640px;
|
|
348
|
+
--container-md: 768px;
|
|
349
|
+
--container-lg: 1024px;
|
|
350
|
+
--container-xl: 1280px;
|
|
351
|
+
--container-2xl: 1440px;
|
|
352
|
+
|
|
353
|
+
/* Z-index scale */
|
|
354
|
+
--z-base: 0; /* @kind other */
|
|
355
|
+
--z-dropdown: 1000; /* @kind other */
|
|
356
|
+
--z-sticky: 1100; /* @kind other */
|
|
357
|
+
--z-overlay: 1200; /* @kind other */
|
|
358
|
+
--z-modal: 1300; /* @kind other */
|
|
359
|
+
--z-popover: 1400; /* @kind other */
|
|
360
|
+
--z-toast: 1500; /* @kind other */
|
|
361
|
+
--z-tooltip: 1600; /* @kind other */
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/* ===== tokens/radius.css ===== */
|
|
365
|
+
/* ============================================================
|
|
366
|
+
Twico UI — Radius, borders & elevation
|
|
367
|
+
No pointy corners — everything rounds.
|
|
368
|
+
============================================================ */
|
|
369
|
+
|
|
370
|
+
:root {
|
|
371
|
+
/* Corner radii — base control radius is --radius-md (10px) */
|
|
372
|
+
--radius-xs: 4px;
|
|
373
|
+
--radius-sm: 6px;
|
|
374
|
+
--radius-md: 10px; /* buttons, inputs, selects, badges */
|
|
375
|
+
--radius-lg: 14px; /* cards, popovers, menus */
|
|
376
|
+
--radius-xl: 18px; /* large cards, sheets */
|
|
377
|
+
--radius-2xl: 24px; /* hero panels, modals */
|
|
378
|
+
--radius-full: 9999px; /* pills, avatars, switches */
|
|
379
|
+
|
|
380
|
+
/* Border widths */
|
|
381
|
+
--border-thin: 1px;
|
|
382
|
+
--border-medium: 1.5px;
|
|
383
|
+
--border-thick: 2px;
|
|
384
|
+
|
|
385
|
+
/* Elevation — soft, slate-tinted, crisp (light) */
|
|
386
|
+
--shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
|
|
387
|
+
--shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
|
|
388
|
+
--shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.10), 0 2px 6px -2px rgb(15 23 42 / 0.06);
|
|
389
|
+
--shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.14), 0 4px 10px -4px rgb(15 23 42 / 0.08);
|
|
390
|
+
--shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.20), 0 8px 16px -8px rgb(15 23 42 / 0.10);
|
|
391
|
+
|
|
392
|
+
/* Brand-tinted glow (primary buttons on hover, focus accents) */
|
|
393
|
+
--shadow-brand: 0 8px 24px -6px rgb(99 102 241 / 0.45);
|
|
394
|
+
|
|
395
|
+
/* Focus ring (composable as box-shadow) */
|
|
396
|
+
--ring-width: 3px;
|
|
397
|
+
--ring: 0 0 0 var(--ring-width) var(--color-ring);
|
|
398
|
+
--ring-offset: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-ring);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
/* Deeper, darker elevation in dark mode. Pure black drop-shadows are nearly
|
|
402
|
+
invisible against dark surfaces, so raised shadows (md/lg/xl) also carry a
|
|
403
|
+
hairline light outline that gives the surface a perceptible lifted edge. */
|
|
404
|
+
.dark,
|
|
405
|
+
[data-theme="dark"] {
|
|
406
|
+
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
|
|
407
|
+
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30);
|
|
408
|
+
--shadow-md: 0 0 0 1px rgb(255 255 255 / 0.04), 0 4px 12px -2px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.45);
|
|
409
|
+
--shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.05), 0 12px 28px -6px rgb(0 0 0 / 0.65), 0 4px 10px -4px rgb(0 0 0 / 0.50);
|
|
410
|
+
--shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 48px -12px rgb(0 0 0 / 0.75), 0 8px 16px -8px rgb(0 0 0 / 0.55);
|
|
411
|
+
--shadow-brand: 0 8px 28px -6px rgb(99 102 241 / 0.60);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/* ===== tokens/motion.css ===== */
|
|
415
|
+
/* ============================================================
|
|
416
|
+
Twico UI — Motion tokens & keyframes
|
|
417
|
+
Lively: spring entrances, gentle press-scale, ripples.
|
|
418
|
+
============================================================ */
|
|
419
|
+
|
|
420
|
+
:root {
|
|
421
|
+
/* Durations */
|
|
422
|
+
--duration-instant: 80ms; /* @kind other */
|
|
423
|
+
--duration-fast: 140ms; /* @kind other */
|
|
424
|
+
--duration-base: 220ms; /* @kind other */
|
|
425
|
+
--duration-slow: 320ms; /* @kind other */
|
|
426
|
+
--duration-slower: 480ms; /* @kind other */
|
|
427
|
+
--duration-exit: 150ms; /* @kind other — overlay close animations; keep in lockstep with the JS unmount timeout */
|
|
428
|
+
|
|
429
|
+
/* Easing curves */
|
|
430
|
+
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
|
|
431
|
+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
|
|
432
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
|
|
433
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
|
|
434
|
+
--ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
|
|
435
|
+
|
|
436
|
+
/* Press feedback */
|
|
437
|
+
--press-scale: 0.96; /* @kind other */
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
/* ---- Keyframes ---- */
|
|
441
|
+
@keyframes twico-fade-in {
|
|
442
|
+
from { opacity: 0; }
|
|
443
|
+
to { opacity: 1; }
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
@keyframes twico-scale-in {
|
|
447
|
+
from { opacity: 0; transform: scale(0.94); }
|
|
448
|
+
to { opacity: 1; transform: scale(1); }
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
@keyframes twico-pop-in {
|
|
452
|
+
0% { opacity: 0; transform: scale(0.85); }
|
|
453
|
+
60% { opacity: 1; transform: scale(1.03); }
|
|
454
|
+
100% { opacity: 1; transform: scale(1); }
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
@keyframes twico-slide-up {
|
|
458
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
459
|
+
to { opacity: 1; transform: translateY(0); }
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
@keyframes twico-slide-down {
|
|
463
|
+
from { opacity: 0; transform: translateY(-10px); }
|
|
464
|
+
to { opacity: 1; transform: translateY(0); }
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
@keyframes twico-slide-in-right {
|
|
468
|
+
from { opacity: 0; transform: translateX(24px); }
|
|
469
|
+
to { opacity: 1; transform: translateX(0); }
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
@keyframes twico-spin {
|
|
473
|
+
to { transform: rotate(360deg); }
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
@keyframes twico-ripple {
|
|
477
|
+
to { transform: scale(2.6); opacity: 0; }
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
@keyframes twico-shimmer {
|
|
481
|
+
100% { transform: translateX(100%); }
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
@keyframes twico-pulse {
|
|
485
|
+
0%, 100% { opacity: 1; }
|
|
486
|
+
50% { opacity: 0.5; }
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
@keyframes twico-progress-indeterminate {
|
|
490
|
+
0% { left: -40%; right: 100%; }
|
|
491
|
+
60% { left: 100%; right: -90%; }
|
|
492
|
+
100% { left: 100%; right: -90%; }
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
/* ===== base.css ===== */
|
|
496
|
+
/* ============================================================
|
|
497
|
+
Twico UI — Base layer
|
|
498
|
+
Minimal, non-destructive resets + sensible element defaults.
|
|
499
|
+
Applies the brand font + semantic colors to the document.
|
|
500
|
+
============================================================ */
|
|
501
|
+
|
|
502
|
+
*,
|
|
503
|
+
*::before,
|
|
504
|
+
*::after {
|
|
505
|
+
box-sizing: border-box;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
html {
|
|
509
|
+
-webkit-text-size-adjust: 100%;
|
|
510
|
+
text-size-adjust: 100%;
|
|
511
|
+
font-feature-settings: "cv05" 1; /* single-storey a for Plus Jakarta */
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
body {
|
|
515
|
+
margin: 0;
|
|
516
|
+
font-family: var(--font-sans);
|
|
517
|
+
font-size: var(--text-base);
|
|
518
|
+
line-height: var(--leading-normal);
|
|
519
|
+
font-weight: var(--font-normal);
|
|
520
|
+
color: var(--color-text);
|
|
521
|
+
background-color: var(--color-bg);
|
|
522
|
+
-webkit-font-smoothing: antialiased;
|
|
523
|
+
-moz-osx-font-smoothing: grayscale;
|
|
524
|
+
text-rendering: optimizeLegibility;
|
|
525
|
+
transition: background-color var(--duration-base) var(--ease-standard),
|
|
526
|
+
color var(--duration-base) var(--ease-standard);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
h1, h2, h3, h4, h5, h6 {
|
|
530
|
+
margin: 0;
|
|
531
|
+
font-weight: var(--font-bold);
|
|
532
|
+
line-height: var(--leading-tight);
|
|
533
|
+
letter-spacing: var(--tracking-tight);
|
|
534
|
+
color: var(--color-text);
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
p { margin: 0; }
|
|
538
|
+
|
|
539
|
+
a {
|
|
540
|
+
color: var(--color-primary);
|
|
541
|
+
text-decoration: none;
|
|
542
|
+
transition: color var(--duration-fast) var(--ease-standard);
|
|
543
|
+
}
|
|
544
|
+
a:hover { color: var(--color-primary-hover); }
|
|
545
|
+
|
|
546
|
+
code, pre, kbd, samp {
|
|
547
|
+
font-family: var(--font-mono);
|
|
548
|
+
font-size: 0.9em;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* Keyboard focus ring for standalone interactive elements.
|
|
552
|
+
NOTE: text inputs / textarea / select are deliberately excluded — in Twico UI
|
|
553
|
+
every text field lives inside a bordered wrapper that shows focus via
|
|
554
|
+
:focus-within, so the bare control must NOT paint its own box ring (that was
|
|
555
|
+
the recurring "boxy purple outline" on search/command inputs). A field that is
|
|
556
|
+
genuinely standalone opts back in with its own higher-specificity :focus rule
|
|
557
|
+
(e.g. .twc-pagination__jump input, .twc-cp__hex). */
|
|
558
|
+
:focus-visible {
|
|
559
|
+
outline: none;
|
|
560
|
+
box-shadow: var(--ring);
|
|
561
|
+
}
|
|
562
|
+
input:focus-visible,
|
|
563
|
+
textarea:focus-visible,
|
|
564
|
+
select:focus-visible {
|
|
565
|
+
box-shadow: none;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
::selection {
|
|
569
|
+
background: var(--color-primary-subtle);
|
|
570
|
+
color: var(--color-primary-subtle-fg);
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
/* Density — set data-density="compact" | "comfortable" on any ancestor (a form,
|
|
574
|
+
a toolbar, or <html>) to retune every control inside. Components size their
|
|
575
|
+
height from --control-h-*, so this cascades with zero per-component code. */
|
|
576
|
+
[data-density="compact"] {
|
|
577
|
+
--control-h-sm: 1.75rem; /* 28 */
|
|
578
|
+
--control-h-md: 2.125rem; /* 34 */
|
|
579
|
+
--control-h-lg: 2.5rem; /* 40 */
|
|
580
|
+
}
|
|
581
|
+
[data-density="comfortable"] {
|
|
582
|
+
--control-h-sm: 2.25rem; /* 36 */
|
|
583
|
+
--control-h-md: 2.75rem; /* 44 */
|
|
584
|
+
--control-h-lg: 3.25rem; /* 52 */
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* Honor reduced-motion globally */
|
|
588
|
+
@media (prefers-reduced-motion: reduce) {
|
|
589
|
+
*,
|
|
590
|
+
*::before,
|
|
591
|
+
*::after {
|
|
592
|
+
animation-duration: 0.01ms !important;
|
|
593
|
+
animation-iteration-count: 1 !important;
|
|
594
|
+
transition-duration: 0.01ms !important;
|
|
595
|
+
scroll-behavior: auto !important;
|
|
596
|
+
}
|
|
597
|
+
/* Loading spinners are functional status indicators, not decorative motion: a frozen spinner
|
|
598
|
+
reads as a stuck/broken UI. Keep them rotating (the only continuous animation exempted here). */
|
|
599
|
+
.twc-spinner {
|
|
600
|
+
animation-duration: 0.65s !important;
|
|
601
|
+
animation-iteration-count: infinite !important;
|
|
602
|
+
}
|
|
603
|
+
.twc-btn__spinner {
|
|
604
|
+
animation-duration: 0.6s !important;
|
|
605
|
+
animation-iteration-count: infinite !important;
|
|
606
|
+
}
|
|
607
|
+
}
|