@handamade/psi-tokens 0.15.0 → 0.17.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/dist/guidance.json +518 -0
- package/dist/utilities.css +2 -0
- package/llms.txt +4 -1
- package/package.json +1 -1
package/dist/guidance.json
CHANGED
|
@@ -188,5 +188,523 @@
|
|
|
188
188
|
"iconInset": "A leading icon sits one step closer to the edge than text — an icon is a solid shape with no side bearing (D55). Applied by .size{n}:has(> svg:first-child) on Button. IconButton is height-only: it is square with padding 0, so no padding/gap/font token applies to it.",
|
|
189
189
|
"iconInsetLimits": "The selector matches on element order, and :first-child ignores text nodes. Two consequences. (1) An icon wrapped in a <span> never matches — fails safe, no inset; set --psi-button-{size}-padding-inline-icon yourself. (2) A TRAILING icon (<Button>Next<IconChevronRight /></Button>) makes the svg the first ELEMENT child, so the rule fires and narrows the start (text) side while the icon keeps full padding — the inverse of the intent. CSS cannot tell the two apart without a DOM signal. Put the icon first, or override --psi-button-{size}-padding-inline-icon to match --psi-button-{size}-padding-inline to disable the inset.",
|
|
190
190
|
"radius": "Control radius is size-invariant (D56) — it does NOT ride the size ramp, because border-radius sits on each component's base rule and all four sizes resolve to radius-8. One dial, --psi-control-radius, is the layer to override, aliased per component: --psi-button-radius (Button, and IconButton via the same token), --psi-input-radius, --psi-select-radius, --psi-checkbox-box-radius, and --psi-tooltip-radius. Checkbox and Tooltip cap themselves with min(var(--psi-control-radius), var(--psi-radius-4)) and min(…, var(--psi-radius-6)) respectively so neither over-rounds a small object — but the published radius scale's floor is radius-4, so Checkbox's cap is a no-op for every on-scale value a theme can set; it only bites at an off-scale value like 0px. Tooltip's higher ceiling does track a sharper theme, down to radius-4. Tag and Switch stay --psi-radius-full: pill-ness is component identity, not theme expression. A theme retunes every control's shape by setting --psi-control-radius once. Psi now has two radius dials, not one: --psi-control-radius (here, for interactive controls) and --psi-surface-radius (for elevated surfaces — Dialog, Panel, Menu). --psi-card-radius sits on neither dial, so a theme that retunes controls or surfaces leaves Card at its own default of radius-8."
|
|
191
|
+
},
|
|
192
|
+
"utilities": {
|
|
193
|
+
"note": "Every utility class shipped in utilities.css, generated from the same source as the CSS (D79). Scaled utility families set one property each and create no layout context: .psi-gap-* sets gap only, so pair it with display:flex or grid yourself. The bare/fixed utilities (.psi-container, .psi-media-tint, .psi-sr-only) set several. Import @handamade/psi-tokens/utilities.css — it is required, not optional; .psi-container and the reduced-motion duration zeroing live there.",
|
|
194
|
+
"families": [
|
|
195
|
+
{
|
|
196
|
+
"prefix": "psi-gap-*",
|
|
197
|
+
"property": "gap",
|
|
198
|
+
"scale": [
|
|
199
|
+
0,
|
|
200
|
+
2,
|
|
201
|
+
4,
|
|
202
|
+
6,
|
|
203
|
+
8,
|
|
204
|
+
12,
|
|
205
|
+
16,
|
|
206
|
+
20,
|
|
207
|
+
24,
|
|
208
|
+
32,
|
|
209
|
+
40,
|
|
210
|
+
48,
|
|
211
|
+
64,
|
|
212
|
+
80,
|
|
213
|
+
96,
|
|
214
|
+
120,
|
|
215
|
+
144
|
|
216
|
+
],
|
|
217
|
+
"classes": [
|
|
218
|
+
"psi-gap-0",
|
|
219
|
+
"psi-gap-2",
|
|
220
|
+
"psi-gap-4",
|
|
221
|
+
"psi-gap-6",
|
|
222
|
+
"psi-gap-8",
|
|
223
|
+
"psi-gap-12",
|
|
224
|
+
"psi-gap-16",
|
|
225
|
+
"psi-gap-20",
|
|
226
|
+
"psi-gap-24",
|
|
227
|
+
"psi-gap-32",
|
|
228
|
+
"psi-gap-40",
|
|
229
|
+
"psi-gap-48",
|
|
230
|
+
"psi-gap-64",
|
|
231
|
+
"psi-gap-80",
|
|
232
|
+
"psi-gap-96",
|
|
233
|
+
"psi-gap-120",
|
|
234
|
+
"psi-gap-144"
|
|
235
|
+
]
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"prefix": "psi-p-*",
|
|
239
|
+
"property": "padding",
|
|
240
|
+
"scale": [
|
|
241
|
+
0,
|
|
242
|
+
2,
|
|
243
|
+
4,
|
|
244
|
+
6,
|
|
245
|
+
8,
|
|
246
|
+
12,
|
|
247
|
+
16,
|
|
248
|
+
20,
|
|
249
|
+
24,
|
|
250
|
+
32,
|
|
251
|
+
40,
|
|
252
|
+
48,
|
|
253
|
+
64,
|
|
254
|
+
80,
|
|
255
|
+
96,
|
|
256
|
+
120,
|
|
257
|
+
144
|
|
258
|
+
],
|
|
259
|
+
"classes": [
|
|
260
|
+
"psi-p-0",
|
|
261
|
+
"psi-p-2",
|
|
262
|
+
"psi-p-4",
|
|
263
|
+
"psi-p-6",
|
|
264
|
+
"psi-p-8",
|
|
265
|
+
"psi-p-12",
|
|
266
|
+
"psi-p-16",
|
|
267
|
+
"psi-p-20",
|
|
268
|
+
"psi-p-24",
|
|
269
|
+
"psi-p-32",
|
|
270
|
+
"psi-p-40",
|
|
271
|
+
"psi-p-48",
|
|
272
|
+
"psi-p-64",
|
|
273
|
+
"psi-p-80",
|
|
274
|
+
"psi-p-96",
|
|
275
|
+
"psi-p-120",
|
|
276
|
+
"psi-p-144"
|
|
277
|
+
]
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"prefix": "psi-px-*",
|
|
281
|
+
"property": "padding-inline",
|
|
282
|
+
"scale": [
|
|
283
|
+
0,
|
|
284
|
+
2,
|
|
285
|
+
4,
|
|
286
|
+
6,
|
|
287
|
+
8,
|
|
288
|
+
12,
|
|
289
|
+
16,
|
|
290
|
+
20,
|
|
291
|
+
24,
|
|
292
|
+
32,
|
|
293
|
+
40,
|
|
294
|
+
48,
|
|
295
|
+
64,
|
|
296
|
+
80,
|
|
297
|
+
96,
|
|
298
|
+
120,
|
|
299
|
+
144
|
|
300
|
+
],
|
|
301
|
+
"classes": [
|
|
302
|
+
"psi-px-0",
|
|
303
|
+
"psi-px-2",
|
|
304
|
+
"psi-px-4",
|
|
305
|
+
"psi-px-6",
|
|
306
|
+
"psi-px-8",
|
|
307
|
+
"psi-px-12",
|
|
308
|
+
"psi-px-16",
|
|
309
|
+
"psi-px-20",
|
|
310
|
+
"psi-px-24",
|
|
311
|
+
"psi-px-32",
|
|
312
|
+
"psi-px-40",
|
|
313
|
+
"psi-px-48",
|
|
314
|
+
"psi-px-64",
|
|
315
|
+
"psi-px-80",
|
|
316
|
+
"psi-px-96",
|
|
317
|
+
"psi-px-120",
|
|
318
|
+
"psi-px-144"
|
|
319
|
+
]
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"prefix": "psi-py-*",
|
|
323
|
+
"property": "padding-block",
|
|
324
|
+
"scale": [
|
|
325
|
+
0,
|
|
326
|
+
2,
|
|
327
|
+
4,
|
|
328
|
+
6,
|
|
329
|
+
8,
|
|
330
|
+
12,
|
|
331
|
+
16,
|
|
332
|
+
20,
|
|
333
|
+
24,
|
|
334
|
+
32,
|
|
335
|
+
40,
|
|
336
|
+
48,
|
|
337
|
+
64,
|
|
338
|
+
80,
|
|
339
|
+
96,
|
|
340
|
+
120,
|
|
341
|
+
144
|
|
342
|
+
],
|
|
343
|
+
"classes": [
|
|
344
|
+
"psi-py-0",
|
|
345
|
+
"psi-py-2",
|
|
346
|
+
"psi-py-4",
|
|
347
|
+
"psi-py-6",
|
|
348
|
+
"psi-py-8",
|
|
349
|
+
"psi-py-12",
|
|
350
|
+
"psi-py-16",
|
|
351
|
+
"psi-py-20",
|
|
352
|
+
"psi-py-24",
|
|
353
|
+
"psi-py-32",
|
|
354
|
+
"psi-py-40",
|
|
355
|
+
"psi-py-48",
|
|
356
|
+
"psi-py-64",
|
|
357
|
+
"psi-py-80",
|
|
358
|
+
"psi-py-96",
|
|
359
|
+
"psi-py-120",
|
|
360
|
+
"psi-py-144"
|
|
361
|
+
]
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
"prefix": "psi-m-*",
|
|
365
|
+
"property": "margin",
|
|
366
|
+
"scale": [
|
|
367
|
+
0,
|
|
368
|
+
2,
|
|
369
|
+
4,
|
|
370
|
+
6,
|
|
371
|
+
8,
|
|
372
|
+
12,
|
|
373
|
+
16,
|
|
374
|
+
20,
|
|
375
|
+
24,
|
|
376
|
+
32,
|
|
377
|
+
40,
|
|
378
|
+
48,
|
|
379
|
+
64,
|
|
380
|
+
80,
|
|
381
|
+
96,
|
|
382
|
+
120,
|
|
383
|
+
144
|
|
384
|
+
],
|
|
385
|
+
"classes": [
|
|
386
|
+
"psi-m-0",
|
|
387
|
+
"psi-m-2",
|
|
388
|
+
"psi-m-4",
|
|
389
|
+
"psi-m-6",
|
|
390
|
+
"psi-m-8",
|
|
391
|
+
"psi-m-12",
|
|
392
|
+
"psi-m-16",
|
|
393
|
+
"psi-m-20",
|
|
394
|
+
"psi-m-24",
|
|
395
|
+
"psi-m-32",
|
|
396
|
+
"psi-m-40",
|
|
397
|
+
"psi-m-48",
|
|
398
|
+
"psi-m-64",
|
|
399
|
+
"psi-m-80",
|
|
400
|
+
"psi-m-96",
|
|
401
|
+
"psi-m-120",
|
|
402
|
+
"psi-m-144"
|
|
403
|
+
]
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"prefix": "psi-mx-*",
|
|
407
|
+
"property": "margin-inline",
|
|
408
|
+
"scale": [
|
|
409
|
+
0,
|
|
410
|
+
2,
|
|
411
|
+
4,
|
|
412
|
+
6,
|
|
413
|
+
8,
|
|
414
|
+
12,
|
|
415
|
+
16,
|
|
416
|
+
20,
|
|
417
|
+
24,
|
|
418
|
+
32,
|
|
419
|
+
40,
|
|
420
|
+
48,
|
|
421
|
+
64,
|
|
422
|
+
80,
|
|
423
|
+
96,
|
|
424
|
+
120,
|
|
425
|
+
144
|
|
426
|
+
],
|
|
427
|
+
"classes": [
|
|
428
|
+
"psi-mx-0",
|
|
429
|
+
"psi-mx-2",
|
|
430
|
+
"psi-mx-4",
|
|
431
|
+
"psi-mx-6",
|
|
432
|
+
"psi-mx-8",
|
|
433
|
+
"psi-mx-12",
|
|
434
|
+
"psi-mx-16",
|
|
435
|
+
"psi-mx-20",
|
|
436
|
+
"psi-mx-24",
|
|
437
|
+
"psi-mx-32",
|
|
438
|
+
"psi-mx-40",
|
|
439
|
+
"psi-mx-48",
|
|
440
|
+
"psi-mx-64",
|
|
441
|
+
"psi-mx-80",
|
|
442
|
+
"psi-mx-96",
|
|
443
|
+
"psi-mx-120",
|
|
444
|
+
"psi-mx-144"
|
|
445
|
+
]
|
|
446
|
+
},
|
|
447
|
+
{
|
|
448
|
+
"prefix": "psi-my-*",
|
|
449
|
+
"property": "margin-block",
|
|
450
|
+
"scale": [
|
|
451
|
+
0,
|
|
452
|
+
2,
|
|
453
|
+
4,
|
|
454
|
+
6,
|
|
455
|
+
8,
|
|
456
|
+
12,
|
|
457
|
+
16,
|
|
458
|
+
20,
|
|
459
|
+
24,
|
|
460
|
+
32,
|
|
461
|
+
40,
|
|
462
|
+
48,
|
|
463
|
+
64,
|
|
464
|
+
80,
|
|
465
|
+
96,
|
|
466
|
+
120,
|
|
467
|
+
144
|
|
468
|
+
],
|
|
469
|
+
"classes": [
|
|
470
|
+
"psi-my-0",
|
|
471
|
+
"psi-my-2",
|
|
472
|
+
"psi-my-4",
|
|
473
|
+
"psi-my-6",
|
|
474
|
+
"psi-my-8",
|
|
475
|
+
"psi-my-12",
|
|
476
|
+
"psi-my-16",
|
|
477
|
+
"psi-my-20",
|
|
478
|
+
"psi-my-24",
|
|
479
|
+
"psi-my-32",
|
|
480
|
+
"psi-my-40",
|
|
481
|
+
"psi-my-48",
|
|
482
|
+
"psi-my-64",
|
|
483
|
+
"psi-my-80",
|
|
484
|
+
"psi-my-96",
|
|
485
|
+
"psi-my-120",
|
|
486
|
+
"psi-my-144"
|
|
487
|
+
]
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
"prefix": "psi-text-*",
|
|
491
|
+
"property": "font",
|
|
492
|
+
"scale": null,
|
|
493
|
+
"classes": [
|
|
494
|
+
"psi-text-12-16-regular",
|
|
495
|
+
"psi-text-12-16-medium",
|
|
496
|
+
"psi-text-14-20-regular",
|
|
497
|
+
"psi-text-14-20-medium",
|
|
498
|
+
"psi-text-16-20-regular",
|
|
499
|
+
"psi-text-16-24-regular",
|
|
500
|
+
"psi-text-16-24-medium",
|
|
501
|
+
"psi-text-18-28-regular",
|
|
502
|
+
"psi-text-18-28-medium",
|
|
503
|
+
"psi-text-20-28-semibold",
|
|
504
|
+
"psi-text-24-32-medium",
|
|
505
|
+
"psi-text-30-36-bold",
|
|
506
|
+
"psi-text-serif-18-28-regular",
|
|
507
|
+
"psi-text-serif-20-30-regular",
|
|
508
|
+
"psi-text-serif-20-32-regular",
|
|
509
|
+
"psi-text-serif-24-36-regular",
|
|
510
|
+
"psi-text-serif-28-40-regular",
|
|
511
|
+
"psi-text-mono-13-20-regular",
|
|
512
|
+
"psi-text-mono-14-20-regular",
|
|
513
|
+
"psi-text-mono-15-24-regular",
|
|
514
|
+
"psi-text-mono-15-24-medium"
|
|
515
|
+
]
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
"prefix": "psi-display-*",
|
|
519
|
+
"property": "font, letter-spacing, text-transform",
|
|
520
|
+
"scale": null,
|
|
521
|
+
"classes": [
|
|
522
|
+
"psi-display-56-128-black",
|
|
523
|
+
"psi-display-36-64-black",
|
|
524
|
+
"psi-display-32-32-extrabold"
|
|
525
|
+
]
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"prefix": "psi-tabular",
|
|
529
|
+
"property": "font-variant-numeric",
|
|
530
|
+
"scale": null,
|
|
531
|
+
"classes": [
|
|
532
|
+
"psi-tabular"
|
|
533
|
+
]
|
|
534
|
+
},
|
|
535
|
+
{
|
|
536
|
+
"prefix": "psi-container",
|
|
537
|
+
"property": "max-width, margin-inline, padding-inline",
|
|
538
|
+
"scale": null,
|
|
539
|
+
"classes": [
|
|
540
|
+
"psi-container"
|
|
541
|
+
]
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"prefix": "psi-media-tint",
|
|
545
|
+
"property": "filter",
|
|
546
|
+
"scale": null,
|
|
547
|
+
"classes": [
|
|
548
|
+
"psi-media-tint"
|
|
549
|
+
]
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
"prefix": "psi-sr-only",
|
|
553
|
+
"property": "position, width, height, padding, margin, overflow, clip, clip-path, white-space, border",
|
|
554
|
+
"scale": null,
|
|
555
|
+
"classes": [
|
|
556
|
+
"psi-sr-only"
|
|
557
|
+
]
|
|
558
|
+
}
|
|
559
|
+
],
|
|
560
|
+
"classes": [
|
|
561
|
+
"psi-container",
|
|
562
|
+
"psi-display-32-32-extrabold",
|
|
563
|
+
"psi-display-36-64-black",
|
|
564
|
+
"psi-display-56-128-black",
|
|
565
|
+
"psi-gap-0",
|
|
566
|
+
"psi-gap-12",
|
|
567
|
+
"psi-gap-120",
|
|
568
|
+
"psi-gap-144",
|
|
569
|
+
"psi-gap-16",
|
|
570
|
+
"psi-gap-2",
|
|
571
|
+
"psi-gap-20",
|
|
572
|
+
"psi-gap-24",
|
|
573
|
+
"psi-gap-32",
|
|
574
|
+
"psi-gap-4",
|
|
575
|
+
"psi-gap-40",
|
|
576
|
+
"psi-gap-48",
|
|
577
|
+
"psi-gap-6",
|
|
578
|
+
"psi-gap-64",
|
|
579
|
+
"psi-gap-8",
|
|
580
|
+
"psi-gap-80",
|
|
581
|
+
"psi-gap-96",
|
|
582
|
+
"psi-m-0",
|
|
583
|
+
"psi-m-12",
|
|
584
|
+
"psi-m-120",
|
|
585
|
+
"psi-m-144",
|
|
586
|
+
"psi-m-16",
|
|
587
|
+
"psi-m-2",
|
|
588
|
+
"psi-m-20",
|
|
589
|
+
"psi-m-24",
|
|
590
|
+
"psi-m-32",
|
|
591
|
+
"psi-m-4",
|
|
592
|
+
"psi-m-40",
|
|
593
|
+
"psi-m-48",
|
|
594
|
+
"psi-m-6",
|
|
595
|
+
"psi-m-64",
|
|
596
|
+
"psi-m-8",
|
|
597
|
+
"psi-m-80",
|
|
598
|
+
"psi-m-96",
|
|
599
|
+
"psi-media-tint",
|
|
600
|
+
"psi-mx-0",
|
|
601
|
+
"psi-mx-12",
|
|
602
|
+
"psi-mx-120",
|
|
603
|
+
"psi-mx-144",
|
|
604
|
+
"psi-mx-16",
|
|
605
|
+
"psi-mx-2",
|
|
606
|
+
"psi-mx-20",
|
|
607
|
+
"psi-mx-24",
|
|
608
|
+
"psi-mx-32",
|
|
609
|
+
"psi-mx-4",
|
|
610
|
+
"psi-mx-40",
|
|
611
|
+
"psi-mx-48",
|
|
612
|
+
"psi-mx-6",
|
|
613
|
+
"psi-mx-64",
|
|
614
|
+
"psi-mx-8",
|
|
615
|
+
"psi-mx-80",
|
|
616
|
+
"psi-mx-96",
|
|
617
|
+
"psi-my-0",
|
|
618
|
+
"psi-my-12",
|
|
619
|
+
"psi-my-120",
|
|
620
|
+
"psi-my-144",
|
|
621
|
+
"psi-my-16",
|
|
622
|
+
"psi-my-2",
|
|
623
|
+
"psi-my-20",
|
|
624
|
+
"psi-my-24",
|
|
625
|
+
"psi-my-32",
|
|
626
|
+
"psi-my-4",
|
|
627
|
+
"psi-my-40",
|
|
628
|
+
"psi-my-48",
|
|
629
|
+
"psi-my-6",
|
|
630
|
+
"psi-my-64",
|
|
631
|
+
"psi-my-8",
|
|
632
|
+
"psi-my-80",
|
|
633
|
+
"psi-my-96",
|
|
634
|
+
"psi-p-0",
|
|
635
|
+
"psi-p-12",
|
|
636
|
+
"psi-p-120",
|
|
637
|
+
"psi-p-144",
|
|
638
|
+
"psi-p-16",
|
|
639
|
+
"psi-p-2",
|
|
640
|
+
"psi-p-20",
|
|
641
|
+
"psi-p-24",
|
|
642
|
+
"psi-p-32",
|
|
643
|
+
"psi-p-4",
|
|
644
|
+
"psi-p-40",
|
|
645
|
+
"psi-p-48",
|
|
646
|
+
"psi-p-6",
|
|
647
|
+
"psi-p-64",
|
|
648
|
+
"psi-p-8",
|
|
649
|
+
"psi-p-80",
|
|
650
|
+
"psi-p-96",
|
|
651
|
+
"psi-px-0",
|
|
652
|
+
"psi-px-12",
|
|
653
|
+
"psi-px-120",
|
|
654
|
+
"psi-px-144",
|
|
655
|
+
"psi-px-16",
|
|
656
|
+
"psi-px-2",
|
|
657
|
+
"psi-px-20",
|
|
658
|
+
"psi-px-24",
|
|
659
|
+
"psi-px-32",
|
|
660
|
+
"psi-px-4",
|
|
661
|
+
"psi-px-40",
|
|
662
|
+
"psi-px-48",
|
|
663
|
+
"psi-px-6",
|
|
664
|
+
"psi-px-64",
|
|
665
|
+
"psi-px-8",
|
|
666
|
+
"psi-px-80",
|
|
667
|
+
"psi-px-96",
|
|
668
|
+
"psi-py-0",
|
|
669
|
+
"psi-py-12",
|
|
670
|
+
"psi-py-120",
|
|
671
|
+
"psi-py-144",
|
|
672
|
+
"psi-py-16",
|
|
673
|
+
"psi-py-2",
|
|
674
|
+
"psi-py-20",
|
|
675
|
+
"psi-py-24",
|
|
676
|
+
"psi-py-32",
|
|
677
|
+
"psi-py-4",
|
|
678
|
+
"psi-py-40",
|
|
679
|
+
"psi-py-48",
|
|
680
|
+
"psi-py-6",
|
|
681
|
+
"psi-py-64",
|
|
682
|
+
"psi-py-8",
|
|
683
|
+
"psi-py-80",
|
|
684
|
+
"psi-py-96",
|
|
685
|
+
"psi-sr-only",
|
|
686
|
+
"psi-tabular",
|
|
687
|
+
"psi-text-12-16-medium",
|
|
688
|
+
"psi-text-12-16-regular",
|
|
689
|
+
"psi-text-14-20-medium",
|
|
690
|
+
"psi-text-14-20-regular",
|
|
691
|
+
"psi-text-16-20-regular",
|
|
692
|
+
"psi-text-16-24-medium",
|
|
693
|
+
"psi-text-16-24-regular",
|
|
694
|
+
"psi-text-18-28-medium",
|
|
695
|
+
"psi-text-18-28-regular",
|
|
696
|
+
"psi-text-20-28-semibold",
|
|
697
|
+
"psi-text-24-32-medium",
|
|
698
|
+
"psi-text-30-36-bold",
|
|
699
|
+
"psi-text-mono-13-20-regular",
|
|
700
|
+
"psi-text-mono-14-20-regular",
|
|
701
|
+
"psi-text-mono-15-24-medium",
|
|
702
|
+
"psi-text-mono-15-24-regular",
|
|
703
|
+
"psi-text-serif-18-28-regular",
|
|
704
|
+
"psi-text-serif-20-30-regular",
|
|
705
|
+
"psi-text-serif-20-32-regular",
|
|
706
|
+
"psi-text-serif-24-36-regular",
|
|
707
|
+
"psi-text-serif-28-40-regular"
|
|
708
|
+
]
|
|
191
709
|
}
|
|
192
710
|
}
|
package/dist/utilities.css
CHANGED
|
@@ -158,6 +158,8 @@
|
|
|
158
158
|
.psi-media-tint { filter: var(--psi-media-tint); transition: filter var(--psi-duration-450) var(--psi-ease-soft); }
|
|
159
159
|
.psi-media-tint:hover, .psi-media-tint:focus-visible { filter: none; }
|
|
160
160
|
|
|
161
|
+
.psi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
|
|
162
|
+
|
|
161
163
|
/* Reduced motion (D30): zero every duration token; anything driven by
|
|
162
164
|
--psi-duration-* complies for free. psi.utilities wins over psi.base. */
|
|
163
165
|
@media (prefers-reduced-motion: reduce) {
|
package/llms.txt
CHANGED
|
@@ -4,7 +4,7 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
|
|
|
4
4
|
|
|
5
5
|
## Machine-readable artifacts
|
|
6
6
|
- dist/resolved/{light,dark,acme,ember}.json: every token with OKLCH, hex, and derivation formula
|
|
7
|
-
- dist/guidance.json: variant intent, usage rules, state derivation, typography defaults, motion/layout/fonts notes, recipes
|
|
7
|
+
- dist/guidance.json: variant intent, usage rules, state derivation, typography defaults, motion/layout/fonts notes, recipes, and the utility-class roster at `utilities.classes`
|
|
8
8
|
- dist/dtcg/{theme}.json: W3C DTCG format export
|
|
9
9
|
- dist/components/{name}.vars.css: component-token declarations (--psi-{component}-*)
|
|
10
10
|
- dist/scope-map.json: D46 token scopes — property groups, per-token scopes (semantic + component), scale-family scopes
|
|
@@ -40,6 +40,9 @@ OKLCH formula-based design tokens. Code is the source of truth; all artifacts ge
|
|
|
40
40
|
## Tabular numerals (--psi-font-variant-numeric, .psi-tabular)
|
|
41
41
|
- --psi-font-variant-numeric is tabular-nums (D62); apply the .psi-tabular utility class to numeric content for fixed-width digits that don't jitter between rows. Table's own numeric columns (TableCell/TableHeaderCell `numeric` prop) bind the token directly in CSS — reach for the utility class for numeric content outside Table.
|
|
42
42
|
|
|
43
|
+
## Visually hidden (.psi-sr-only)
|
|
44
|
+
- .psi-sr-only hides content visually while keeping it in the accessibility tree — position/size/clip only, never display:none or visibility:hidden, so screen readers still announce it and it stays in the tab order if focusable. Use it for status-word prefixes, icon-only-control labels not carried by aria-label, or a native input replaced by a custom visual control.
|
|
45
|
+
|
|
43
46
|
## Dark-first brands
|
|
44
47
|
- A brand theme can declare `base: "dark"` (see ember) so its formulas derive from the dark palette instead of light — use this for brands whose primary surface is a dark canvas rather than treating dark as an inverted afterthought.
|
|
45
48
|
|