@pearpages/pulp-tokens 0.2.1 → 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 +129 -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
@@ -31,6 +31,7 @@
31
31
  --color-neutral-700: #5a6072;
32
32
  --color-neutral-800: #4a4f5d;
33
33
  --color-neutral-850: #262a35;
34
+ --color-neutral-875: #1a1e29;
34
35
  --color-neutral-900: #11141d;
35
36
  --color-neutral-950: #0c0e14;
36
37
  --color-neutral-975: #090b11;
@@ -45,12 +46,16 @@
45
46
  --color-green-700: #146e47;
46
47
  --color-green-900: #0e2e20;
47
48
  --color-red-100: #fbe5e6;
49
+ --color-red-200: #ff9699;
48
50
  --color-red-300: #ff6b70;
51
+ --color-red-400: #ea5459;
49
52
  --color-red-500: #d0393e;
50
53
  --color-red-700: #a52c30;
54
+ --color-red-800: #86242a;
51
55
  --color-red-900: #3d1113;
52
56
  --color-surface-base: light-dark(var(--color-neutral-50), var(--color-neutral-975));
53
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));
54
59
  --color-surface-sunken: light-dark(var(--color-neutral-200), var(--color-neutral-1000));
55
60
  --color-surface-inverse: light-dark(var(--color-neutral-950), var(--color-neutral-100));
56
61
  --color-text-default: light-dark(var(--color-neutral-950), var(--color-neutral-100));
@@ -71,6 +76,8 @@
71
76
  --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
72
77
  --color-status-warning: light-dark(var(--color-saffron-500), var(--color-saffron-500));
73
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));
74
81
  --color-status-info: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
75
82
  --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
76
83
  --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));
@@ -188,6 +195,20 @@
188
195
  --alert-error-bg: var(--color-status-error-subtle);
189
196
  --alert-error-accent: var(--color-status-error);
190
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);
191
212
  --badge-radius: var(--radius-full);
192
213
  --badge-gap: var(--space-1);
193
214
  --badge-padding-block: var(--space-1);
@@ -217,6 +238,7 @@
217
238
  --badge-error-solid-fg: var(--color-status-on-error);
218
239
  --badge-error-subtle-bg: var(--color-status-error-subtle);
219
240
  --badge-error-subtle-fg: var(--color-status-error-text);
241
+ --badge-dot-size: var(--space-2);
220
242
  --button-radius: var(--radius-control);
221
243
  --button-gap: var(--space-2);
222
244
  --button-font-family: var(--font-family-body);
@@ -240,6 +262,12 @@
240
262
  --button-secondary-border: var(--color-border-default);
241
263
  --button-ghost-fg: var(--color-action-text);
242
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);
243
271
  --button-focus-ring: var(--color-border-focus);
244
272
  --button-focus-ring-width: var(--focus-ring-width);
245
273
  --button-focus-ring-offset: var(--focus-ring-offset);
@@ -306,6 +334,34 @@
306
334
  --checkbox-focus-ring-width: var(--focus-ring-width);
307
335
  --checkbox-focus-ring-offset: var(--focus-ring-offset);
308
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);
309
365
  --combobox-radius: var(--radius-control);
310
366
  --combobox-padding-inline: var(--space-3);
311
367
  --combobox-gap: var(--space-2);
@@ -327,6 +383,7 @@
327
383
  --combobox-border-invalid: var(--color-status-error);
328
384
  --combobox-popover-shadow: var(--shadow-overlay);
329
385
  --combobox-popover-duration: var(--motion-duration-fast);
386
+ --combobox-popover-bg: var(--color-surface-overlay);
330
387
  --combobox-focus-ring: var(--color-border-focus);
331
388
  --combobox-focus-ring-width: var(--focus-ring-width);
332
389
  --combobox-focus-ring-offset: var(--focus-ring-offset);
@@ -360,10 +417,10 @@
360
417
  --date-picker-segment-radius: var(--radius-control);
361
418
  --date-picker-segment-bg-focus: var(--color-action-primary-quiet);
362
419
  --date-picker-segment-fg-placeholder: var(--color-text-faint);
363
- --date-picker-dialog-bg: var(--color-surface-raised);
420
+ --date-picker-dialog-bg: var(--color-surface-overlay);
364
421
  --date-picker-dialog-border: var(--color-border-default);
365
422
  --date-picker-dialog-radius: var(--radius-surface);
366
- --dialog-surface: var(--color-surface-raised);
423
+ --dialog-surface: var(--color-surface-overlay);
367
424
  --dialog-surface-subtle: var(--color-surface-sunken);
368
425
  --dialog-fg: var(--color-text-default);
369
426
  --dialog-fg-muted: var(--color-text-muted);
@@ -386,6 +443,19 @@
386
443
  --dialog-close-fg-hover: var(--color-text-default);
387
444
  --dialog-motion-duration: var(--motion-duration-base);
388
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);
389
459
  --field-gap: var(--space-1);
390
460
  --field-label-fg: var(--color-text-default);
391
461
  --field-label-font-size: var(--font-size-sm);
@@ -420,6 +490,16 @@
420
490
  --inline-gap-6: var(--space-6);
421
491
  --inline-gap-7: var(--space-7);
422
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);
423
503
  --listbox-bg: var(--color-surface-raised);
424
504
  --listbox-fg: var(--color-text-default);
425
505
  --listbox-border: var(--color-border-default);
@@ -444,7 +524,7 @@
444
524
  --listbox-focus-ring: var(--color-border-focus);
445
525
  --listbox-focus-ring-width: var(--focus-ring-width);
446
526
  --listbox-focus-ring-offset: var(--focus-ring-offset);
447
- --menu-bg: var(--color-surface-raised);
527
+ --menu-bg: var(--color-surface-overlay);
448
528
  --menu-fg: var(--color-text-default);
449
529
  --menu-border: var(--color-border-default);
450
530
  --menu-radius: var(--radius-surface);
@@ -495,11 +575,12 @@
495
575
  --picker-border-invalid: var(--color-status-error);
496
576
  --picker-popover-shadow: var(--shadow-overlay);
497
577
  --picker-popover-duration: var(--motion-duration-fast);
578
+ --picker-popover-bg: var(--color-surface-overlay);
498
579
  --picker-focus-ring: var(--color-border-focus);
499
580
  --picker-focus-ring-width: var(--focus-ring-width);
500
581
  --picker-focus-ring-offset: var(--focus-ring-offset);
501
582
  --picker-motion-duration: var(--motion-duration-fast);
502
- --popover-bg: var(--color-surface-raised);
583
+ --popover-bg: var(--color-surface-overlay);
503
584
  --popover-fg: var(--color-text-default);
504
585
  --popover-border: var(--color-border-default);
505
586
  --popover-radius: var(--radius-surface);
@@ -541,6 +622,35 @@
541
622
  --radio-focus-ring-width: var(--focus-ring-width);
542
623
  --radio-focus-ring-offset: var(--focus-ring-offset);
543
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);
544
654
  --select-radius: var(--radius-control);
545
655
  --select-padding-inline: var(--space-3);
546
656
  --select-chevron-inset: var(--space-3);
@@ -568,6 +678,12 @@
568
678
  --sheet-width: var(--size-sheet-width);
569
679
  --sheet-height: var(--size-sheet-height);
570
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);
571
687
  --skeleton-base: var(--color-surface-sunken);
572
688
  --skeleton-highlight: var(--color-surface-raised);
573
689
  --skeleton-radius: var(--radius-control);
@@ -702,6 +818,9 @@
702
818
  --text-field-focus-ring-width: var(--focus-ring-width);
703
819
  --text-field-focus-ring-offset: var(--focus-ring-offset);
704
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);
705
824
  --text-font-family-body: var(--font-family-body);
706
825
  --text-font-family-mono: var(--font-family-mono);
707
826
  --text-size-xs: var(--font-size-xs);
@@ -807,10 +926,13 @@
807
926
  --color-gold-700: #7a4e00;
808
927
  --color-gold-900: #3d2800;
809
928
  --color-red-100: #fde7e7;
929
+ --color-red-200: #ff9797;
810
930
  --color-red-300: #ff6b6b;
931
+ --color-red-400: #ee6060;
811
932
  --color-red-500: #d64545;
812
933
  --color-red-600: #c43a3a;
813
934
  --color-red-700: #a83333;
935
+ --color-red-800: #8a2a2a;
814
936
  --color-red-900: #3f1414;
815
937
  --color-blue-100: #e3efff;
816
938
  --color-blue-300: #5aa9ff;
@@ -820,6 +942,7 @@
820
942
  --color-blue-900: #10284d;
821
943
  --color-surface-base: light-dark(var(--color-cream-300), var(--color-ink-900));
822
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));
823
946
  --color-surface-sunken: light-dark(var(--color-cream-400), var(--color-ink-700));
824
947
  --color-surface-inverse: light-dark(var(--color-neutral-900), var(--color-neutral-50));
825
948
  --color-text-default: light-dark(var(--color-neutral-900), var(--color-neutral-50));
@@ -840,6 +963,8 @@
840
963
  --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
841
964
  --color-status-warning: light-dark(var(--color-gold-500), var(--color-gold-300));
842
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));
843
968
  --color-status-info: light-dark(var(--color-blue-600), var(--color-blue-300));
844
969
  --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
845
970
  --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));