@pearpages/pulp-tokens 0.2.0 → 0.3.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.
Files changed (28) hide show
  1. package/README.md +2 -0
  2. package/dist/native.cjs +379 -0
  3. package/dist/native.d.ts +14 -0
  4. package/dist/native.js +383 -0
  5. package/dist/theme.css +57 -0
  6. package/dist/tokens.css +132 -4
  7. package/dist/tokens.json +1828 -339
  8. package/package.json +7 -1
  9. package/tokens/component/avatar.json +26 -0
  10. package/tokens/component/badge.json +6 -1
  11. package/tokens/component/button.json +22 -0
  12. package/tokens/component/chip.json +49 -0
  13. package/tokens/component/combobox.json +5 -0
  14. package/tokens/component/date-picker.json +1 -1
  15. package/tokens/component/dialog.json +92 -23
  16. package/tokens/component/divider.json +13 -0
  17. package/tokens/component/empty-state.json +15 -0
  18. package/tokens/component/link.json +45 -0
  19. package/tokens/component/menu.json +1 -1
  20. package/tokens/component/picker.json +5 -0
  21. package/tokens/component/popover.json +1 -1
  22. package/tokens/component/segmented-control.json +49 -0
  23. package/tokens/component/sheet.json +40 -3
  24. package/tokens/component/text-field.json +16 -0
  25. package/tokens/primitives/bitepals.json +9 -0
  26. package/tokens/primitives/pulp.json +14 -2
  27. package/tokens/semantic/bitepals.json +27 -0
  28. package/tokens/semantic/pulp.json +27 -0
package/dist/tokens.css CHANGED
@@ -1,5 +1,8 @@
1
1
  /* Generated by @pearpages/pulp-tokens from tokens/**.json. Do not edit: run `pnpm build:tokens`. */
2
2
 
3
+ /* The layer order, restated in every stylesheet pulp ships: layers rank by first appearance. */
4
+ @layer reset, tokens, vendor, base, components, utilities;
5
+
3
6
  @layer tokens {
4
7
  /* Scheme axis. Colours are light-dark() pairs; color-scheme picks the side. */
5
8
  :root { color-scheme: light dark; }
@@ -28,6 +31,7 @@
28
31
  --color-neutral-700: #5a6072;
29
32
  --color-neutral-800: #4a4f5d;
30
33
  --color-neutral-850: #262a35;
34
+ --color-neutral-875: #1a1e29;
31
35
  --color-neutral-900: #11141d;
32
36
  --color-neutral-950: #0c0e14;
33
37
  --color-neutral-975: #090b11;
@@ -42,12 +46,16 @@
42
46
  --color-green-700: #146e47;
43
47
  --color-green-900: #0e2e20;
44
48
  --color-red-100: #fbe5e6;
49
+ --color-red-200: #ff9699;
45
50
  --color-red-300: #ff6b70;
51
+ --color-red-400: #ea5459;
46
52
  --color-red-500: #d0393e;
47
53
  --color-red-700: #a52c30;
54
+ --color-red-800: #86242a;
48
55
  --color-red-900: #3d1113;
49
56
  --color-surface-base: light-dark(var(--color-neutral-50), var(--color-neutral-975));
50
57
  --color-surface-raised: light-dark(var(--color-neutral-0), var(--color-neutral-900));
58
+ --color-surface-overlay: light-dark(var(--color-neutral-0), var(--color-neutral-875));
51
59
  --color-surface-sunken: light-dark(var(--color-neutral-200), var(--color-neutral-1000));
52
60
  --color-surface-inverse: light-dark(var(--color-neutral-950), var(--color-neutral-100));
53
61
  --color-text-default: light-dark(var(--color-neutral-950), var(--color-neutral-100));
@@ -68,6 +76,8 @@
68
76
  --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
69
77
  --color-status-warning: light-dark(var(--color-saffron-500), var(--color-saffron-500));
70
78
  --color-status-error: light-dark(var(--color-red-500), var(--color-red-300));
79
+ --color-status-error-hover: light-dark(var(--color-red-700), var(--color-red-200));
80
+ --color-status-error-active: light-dark(var(--color-red-800), var(--color-red-400));
71
81
  --color-status-info: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
72
82
  --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
73
83
  --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));
@@ -185,6 +195,20 @@
185
195
  --alert-error-bg: var(--color-status-error-subtle);
186
196
  --alert-error-accent: var(--color-status-error);
187
197
  --alert-error-title: var(--color-status-error-text);
198
+ --avatar-size-sm: var(--size-control-sm);
199
+ --avatar-size-md: var(--size-control-md);
200
+ --avatar-size-lg: calc(var(--size-control-md) * 1.4);
201
+ --avatar-size-xl: calc(var(--size-control-lg) * 2);
202
+ --avatar-font-size-sm: var(--font-size-xs);
203
+ --avatar-font-size-md: var(--font-size-sm);
204
+ --avatar-font-size-lg: var(--font-size-lg);
205
+ --avatar-font-size-xl: var(--font-size-2xl);
206
+ --avatar-bg: var(--color-status-neutral-subtle);
207
+ --avatar-border: var(--color-border-default);
208
+ --avatar-border-width: var(--size-hairline);
209
+ --avatar-fg: var(--color-status-neutral-text);
210
+ --avatar-weight: var(--font-weight-semibold);
211
+ --avatar-radius: var(--radius-full);
188
212
  --badge-radius: var(--radius-full);
189
213
  --badge-gap: var(--space-1);
190
214
  --badge-padding-block: var(--space-1);
@@ -214,6 +238,7 @@
214
238
  --badge-error-solid-fg: var(--color-status-on-error);
215
239
  --badge-error-subtle-bg: var(--color-status-error-subtle);
216
240
  --badge-error-subtle-fg: var(--color-status-error-text);
241
+ --badge-dot-size: var(--space-2);
217
242
  --button-radius: var(--radius-control);
218
243
  --button-gap: var(--space-2);
219
244
  --button-font-family: var(--font-family-body);
@@ -237,6 +262,12 @@
237
262
  --button-secondary-border: var(--color-border-default);
238
263
  --button-ghost-fg: var(--color-action-text);
239
264
  --button-ghost-bg-hover: var(--color-action-primary-quiet);
265
+ --button-danger-bg: var(--color-status-error);
266
+ --button-danger-bg-hover: var(--color-status-error-hover);
267
+ --button-danger-bg-active: var(--color-status-error-active);
268
+ --button-danger-fg: var(--color-status-on-error);
269
+ --button-danger-text: var(--color-status-error-text);
270
+ --button-danger-quiet-bg-hover: var(--color-status-error-subtle);
240
271
  --button-focus-ring: var(--color-border-focus);
241
272
  --button-focus-ring-width: var(--focus-ring-width);
242
273
  --button-focus-ring-offset: var(--focus-ring-offset);
@@ -303,6 +334,34 @@
303
334
  --checkbox-focus-ring-width: var(--focus-ring-width);
304
335
  --checkbox-focus-ring-offset: var(--focus-ring-offset);
305
336
  --checkbox-motion-duration: var(--motion-duration-fast);
337
+ --chip-height-sm: var(--space-5);
338
+ --chip-height-md: var(--size-control-sm);
339
+ --chip-height-lg: var(--size-control-md);
340
+ --chip-padding-x-sm: var(--space-2);
341
+ --chip-padding-x-md: var(--space-3);
342
+ --chip-padding-x-lg: var(--space-4);
343
+ --chip-gap: var(--space-1);
344
+ --chip-font-size-sm: var(--font-size-xs);
345
+ --chip-font-size-md: var(--font-size-sm);
346
+ --chip-font-size-lg: var(--font-size-md);
347
+ --chip-weight: var(--font-weight-medium);
348
+ --chip-radius: var(--radius-full);
349
+ --chip-border-width: var(--size-hairline);
350
+ --chip-neutral-bg: var(--color-action-secondary);
351
+ --chip-neutral-bg-hover: var(--color-action-secondary-hover);
352
+ --chip-neutral-fg: var(--color-text-default);
353
+ --chip-neutral-border: var(--color-border-default);
354
+ --chip-neutral-selected-bg: var(--color-surface-inverse);
355
+ --chip-neutral-selected-fg: var(--color-text-on-inverse);
356
+ --chip-action-bg: var(--color-action-primary-quiet);
357
+ --chip-action-bg-hover: var(--color-action-primary-quiet);
358
+ --chip-action-fg: var(--color-action-text);
359
+ --chip-action-border: var(--color-action-primary-quiet);
360
+ --chip-action-selected-bg: var(--color-action-primary);
361
+ --chip-action-selected-fg: var(--color-text-on-action);
362
+ --chip-focus-ring: var(--color-border-focus);
363
+ --chip-focus-ring-width: var(--focus-ring-width);
364
+ --chip-focus-ring-offset: var(--focus-ring-offset);
306
365
  --combobox-radius: var(--radius-control);
307
366
  --combobox-padding-inline: var(--space-3);
308
367
  --combobox-gap: var(--space-2);
@@ -324,6 +383,7 @@
324
383
  --combobox-border-invalid: var(--color-status-error);
325
384
  --combobox-popover-shadow: var(--shadow-overlay);
326
385
  --combobox-popover-duration: var(--motion-duration-fast);
386
+ --combobox-popover-bg: var(--color-surface-overlay);
327
387
  --combobox-focus-ring: var(--color-border-focus);
328
388
  --combobox-focus-ring-width: var(--focus-ring-width);
329
389
  --combobox-focus-ring-offset: var(--focus-ring-offset);
@@ -357,10 +417,10 @@
357
417
  --date-picker-segment-radius: var(--radius-control);
358
418
  --date-picker-segment-bg-focus: var(--color-action-primary-quiet);
359
419
  --date-picker-segment-fg-placeholder: var(--color-text-faint);
360
- --date-picker-dialog-bg: var(--color-surface-raised);
420
+ --date-picker-dialog-bg: var(--color-surface-overlay);
361
421
  --date-picker-dialog-border: var(--color-border-default);
362
422
  --date-picker-dialog-radius: var(--radius-surface);
363
- --dialog-surface: var(--color-surface-raised);
423
+ --dialog-surface: var(--color-surface-overlay);
364
424
  --dialog-surface-subtle: var(--color-surface-sunken);
365
425
  --dialog-fg: var(--color-text-default);
366
426
  --dialog-fg-muted: var(--color-text-muted);
@@ -383,6 +443,19 @@
383
443
  --dialog-close-fg-hover: var(--color-text-default);
384
444
  --dialog-motion-duration: var(--motion-duration-base);
385
445
  --dialog-motion-easing: var(--motion-easing-standard);
446
+ --divider-color: var(--color-border-default);
447
+ --divider-thickness: var(--size-hairline);
448
+ --divider-spacing-sm: var(--space-2);
449
+ --divider-spacing-md: var(--space-4);
450
+ --divider-spacing-lg: var(--space-6);
451
+ --empty-state-padding: var(--space-6);
452
+ --empty-state-icon-size: var(--size-control-lg);
453
+ --empty-state-icon-glyph-size: var(--font-size-xl);
454
+ --empty-state-icon-radius: var(--radius-full);
455
+ --empty-state-icon-neutral-bg: var(--color-status-neutral-subtle);
456
+ --empty-state-icon-neutral-fg: var(--color-status-neutral-text);
457
+ --empty-state-icon-error-bg: var(--color-status-error-subtle);
458
+ --empty-state-icon-error-fg: var(--color-status-error-text);
386
459
  --field-gap: var(--space-1);
387
460
  --field-label-fg: var(--color-text-default);
388
461
  --field-label-font-size: var(--font-size-sm);
@@ -417,6 +490,16 @@
417
490
  --inline-gap-6: var(--space-6);
418
491
  --inline-gap-7: var(--space-7);
419
492
  --inline-gap-8: var(--space-8);
493
+ --link-tone-action: var(--color-action-text);
494
+ --link-tone-default: var(--color-text-default);
495
+ --link-tone-muted: var(--color-text-muted);
496
+ --link-hover: var(--color-text-default);
497
+ --link-weight: var(--font-weight-medium);
498
+ --link-radius: var(--radius-control);
499
+ --link-focus-ring-width: var(--focus-ring-width);
500
+ --link-focus-ring-offset: var(--focus-ring-offset);
501
+ --link-focus-ring-color: var(--color-border-focus);
502
+ --link-duration: var(--motion-duration-fast);
420
503
  --listbox-bg: var(--color-surface-raised);
421
504
  --listbox-fg: var(--color-text-default);
422
505
  --listbox-border: var(--color-border-default);
@@ -441,7 +524,7 @@
441
524
  --listbox-focus-ring: var(--color-border-focus);
442
525
  --listbox-focus-ring-width: var(--focus-ring-width);
443
526
  --listbox-focus-ring-offset: var(--focus-ring-offset);
444
- --menu-bg: var(--color-surface-raised);
527
+ --menu-bg: var(--color-surface-overlay);
445
528
  --menu-fg: var(--color-text-default);
446
529
  --menu-border: var(--color-border-default);
447
530
  --menu-radius: var(--radius-surface);
@@ -492,11 +575,12 @@
492
575
  --picker-border-invalid: var(--color-status-error);
493
576
  --picker-popover-shadow: var(--shadow-overlay);
494
577
  --picker-popover-duration: var(--motion-duration-fast);
578
+ --picker-popover-bg: var(--color-surface-overlay);
495
579
  --picker-focus-ring: var(--color-border-focus);
496
580
  --picker-focus-ring-width: var(--focus-ring-width);
497
581
  --picker-focus-ring-offset: var(--focus-ring-offset);
498
582
  --picker-motion-duration: var(--motion-duration-fast);
499
- --popover-bg: var(--color-surface-raised);
583
+ --popover-bg: var(--color-surface-overlay);
500
584
  --popover-fg: var(--color-text-default);
501
585
  --popover-border: var(--color-border-default);
502
586
  --popover-radius: var(--radius-surface);
@@ -538,6 +622,35 @@
538
622
  --radio-focus-ring-width: var(--focus-ring-width);
539
623
  --radio-focus-ring-offset: var(--focus-ring-offset);
540
624
  --radio-motion-duration: var(--motion-duration-fast);
625
+ --segmented-control-height-sm: var(--size-control-sm);
626
+ --segmented-control-height-md: var(--size-control-md);
627
+ --segmented-control-padding-x-sm: var(--space-3);
628
+ --segmented-control-padding-x-md: var(--space-4);
629
+ --segmented-control-font-size-sm: var(--font-size-sm);
630
+ --segmented-control-font-size-md: var(--font-size-md);
631
+ --segmented-control-gap: var(--space-2);
632
+ --segmented-control-inset: var(--space-1);
633
+ --segmented-control-weight: var(--font-weight-medium);
634
+ --segmented-control-fg: var(--color-text-muted);
635
+ --segmented-control-fg-hover: var(--color-text-default);
636
+ --segmented-control-border-width: var(--size-hairline);
637
+ --segmented-control-track-bg: var(--color-surface-sunken);
638
+ --segmented-control-track-border: var(--color-border-default);
639
+ --segmented-control-track-radius: var(--radius-control);
640
+ --segmented-control-segment-radius: var(--radius-control);
641
+ --segmented-control-segment-selected-bg: var(--color-surface-raised);
642
+ --segmented-control-segment-selected-fg: var(--color-text-default);
643
+ --segmented-control-segment-selected-border: var(--color-border-strong);
644
+ --segmented-control-segment-selected-shadow: var(--shadow-raised);
645
+ --segmented-control-chip-radius: var(--radius-full);
646
+ --segmented-control-chip-bg: var(--color-surface-raised);
647
+ --segmented-control-chip-border: var(--color-border-default);
648
+ --segmented-control-chip-selected-bg: var(--color-action-primary-quiet);
649
+ --segmented-control-chip-selected-fg: var(--color-action-text);
650
+ --segmented-control-chip-selected-border: var(--color-action-text);
651
+ --segmented-control-focus-ring: var(--color-border-focus);
652
+ --segmented-control-focus-ring-width: var(--focus-ring-width);
653
+ --segmented-control-focus-ring-offset: var(--focus-ring-offset);
541
654
  --select-radius: var(--radius-control);
542
655
  --select-padding-inline: var(--space-3);
543
656
  --select-chevron-inset: var(--space-3);
@@ -565,6 +678,12 @@
565
678
  --sheet-width: var(--size-sheet-width);
566
679
  --sheet-height: var(--size-sheet-height);
567
680
  --sheet-motion-translate: var(--space-5);
681
+ --sheet-handle-width: var(--space-7);
682
+ --sheet-handle-height: var(--space-1);
683
+ --sheet-handle-hit-height: var(--space-5);
684
+ --sheet-handle-bg: var(--color-border-strong);
685
+ --sheet-handle-radius: var(--radius-full);
686
+ --sheet-handle-snap-duration: var(--motion-duration-base);
568
687
  --skeleton-base: var(--color-surface-sunken);
569
688
  --skeleton-highlight: var(--color-surface-raised);
570
689
  --skeleton-radius: var(--radius-control);
@@ -699,6 +818,9 @@
699
818
  --text-field-focus-ring-width: var(--focus-ring-width);
700
819
  --text-field-focus-ring-offset: var(--focus-ring-offset);
701
820
  --text-field-motion-duration: var(--motion-duration-fast);
821
+ --text-field-icon-fg: var(--color-text-muted);
822
+ --text-field-icon-fg-hover: var(--color-text-default);
823
+ --text-field-icon-gap: var(--space-2);
702
824
  --text-font-family-body: var(--font-family-body);
703
825
  --text-font-family-mono: var(--font-family-mono);
704
826
  --text-size-xs: var(--font-size-xs);
@@ -804,10 +926,13 @@
804
926
  --color-gold-700: #7a4e00;
805
927
  --color-gold-900: #3d2800;
806
928
  --color-red-100: #fde7e7;
929
+ --color-red-200: #ff9797;
807
930
  --color-red-300: #ff6b6b;
931
+ --color-red-400: #ee6060;
808
932
  --color-red-500: #d64545;
809
933
  --color-red-600: #c43a3a;
810
934
  --color-red-700: #a83333;
935
+ --color-red-800: #8a2a2a;
811
936
  --color-red-900: #3f1414;
812
937
  --color-blue-100: #e3efff;
813
938
  --color-blue-300: #5aa9ff;
@@ -817,6 +942,7 @@
817
942
  --color-blue-900: #10284d;
818
943
  --color-surface-base: light-dark(var(--color-cream-300), var(--color-ink-900));
819
944
  --color-surface-raised: light-dark(var(--color-cream-200), var(--color-ink-800));
945
+ --color-surface-overlay: light-dark(var(--color-cream-100), var(--color-ink-600));
820
946
  --color-surface-sunken: light-dark(var(--color-cream-400), var(--color-ink-700));
821
947
  --color-surface-inverse: light-dark(var(--color-neutral-900), var(--color-neutral-50));
822
948
  --color-text-default: light-dark(var(--color-neutral-900), var(--color-neutral-50));
@@ -837,6 +963,8 @@
837
963
  --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
838
964
  --color-status-warning: light-dark(var(--color-gold-500), var(--color-gold-300));
839
965
  --color-status-error: light-dark(var(--color-red-600), var(--color-red-300));
966
+ --color-status-error-hover: light-dark(var(--color-red-700), var(--color-red-200));
967
+ --color-status-error-active: light-dark(var(--color-red-800), var(--color-red-400));
840
968
  --color-status-info: light-dark(var(--color-blue-600), var(--color-blue-300));
841
969
  --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
842
970
  --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));