@cdx-ui/styles 0.0.1-beta.2 → 0.0.1-beta.20

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 (6) hide show
  1. package/README.md +1 -1
  2. package/css/theme.css +71 -38
  3. package/css/vanilla.css +46 -24
  4. package/package.json +2 -2
  5. package/tokens/presets/.manifest.json +1 -1
  6. package/tokens/presets/poise.json +112 -24
package/README.md CHANGED
@@ -80,7 +80,7 @@ The pipeline has two stages — **fetch** and **build** — both run from packag
80
80
  Tokens are pulled from Figma Variables via the [REST API](https://www.figma.com/developers/api) (`GET /v1/files/:file_key/variables/local`). This requires an Enterprise plan and a personal access token with `file_variables:read` scope.
81
81
 
82
82
  ```bash
83
- FIGMA_ACCESS_TOKEN=your_token pnpm tokens:fetch
83
+ FIGMA_VARIABLES_TOKEN=your_token pnpm tokens:fetch
84
84
  ```
85
85
 
86
86
  The script reads `figma.config.json` for the file key, preset list, and default FI mode, then assembles one [DTCG-compatible](https://www.designtokens.org/TR/2025.10/format/) theme object JSON per preset:
package/css/theme.css CHANGED
@@ -358,72 +358,83 @@
358
358
  --color-content-danger: var(--color-red-700);
359
359
  --color-content-danger-on-strong: var(--color-white);
360
360
  --color-content-danger-on-subtle: var(--color-red-900);
361
- --color-content-info: var(--color-sky-500);
361
+ --color-content-info: var(--color-sky-700);
362
362
  --color-content-info-on-strong: var(--color-white);
363
363
  --color-content-info-on-subtle: var(--color-sky-900);
364
364
  --color-content-link: var(--color-blue-600);
365
365
  --color-content-link-visited: var(--color-purple-800);
366
+ --color-content-neutral-on-strong: var(--color-white);
367
+ --color-content-neutral-on-subtle: var(--color-base-900);
366
368
  --color-content-primary: var(--color-base-950);
367
369
  --color-content-secondary: var(--color-base-800);
368
370
  --color-content-selected: var(--color-brand-700);
369
- --color-content-success: var(--color-green-600);
371
+ --color-content-success: var(--color-green-700);
370
372
  --color-content-success-on-strong: var(--color-white);
371
373
  --color-content-success-on-subtle: var(--color-green-900);
372
374
  --color-content-tertiary: var(--color-base-600);
373
- --color-content-warning: var(--color-amber-600);
375
+ --color-content-warning: var(--color-amber-700);
374
376
  --color-content-warning-on-strong: var(--color-black);
375
377
  --color-content-warning-on-subtle: var(--color-amber-900);
376
378
  --color-stroke-action: var(--color-brand-700);
377
379
  --color-stroke-danger: var(--color-red-700);
378
380
  --color-stroke-focus: var(--color-brand-700);
379
381
  --color-stroke-hover: var(--color-base-950);
380
- --color-stroke-info: var(--color-sky-500);
382
+ --color-stroke-info: var(--color-sky-700);
381
383
  --color-stroke-primary: var(--color-base-500);
382
384
  --color-stroke-ring: var(--color-base-950);
383
385
  --color-stroke-secondary: var(--color-base-100);
384
- --color-stroke-success: var(--color-green-500);
385
- --color-stroke-warning: var(--color-amber-600);
386
+ --color-stroke-success: var(--color-green-700);
387
+ --color-stroke-warning: var(--color-amber-700);
386
388
  --color-surface-accent-core: var(--color-accent-input);
387
389
  --color-surface-accent-strong: var(--color-accent-700);
388
390
  --color-surface-action-strong: var(--color-brand-700);
389
- --color-surface-action-strong-active: var(--color-brand-800);
391
+ --color-surface-action-strong-active: var(--color-brand-900);
390
392
  --color-surface-action-strong-hover: var(--color-brand-800);
391
393
  --color-surface-action-subtle: var(--color-brand-300);
392
- --color-surface-action-subtle-active: var(--color-brand-400);
394
+ --color-surface-action-subtle-active: var(--color-brand-500);
393
395
  --color-surface-action-subtle-hover: var(--color-brand-400);
394
396
  --color-surface-action-tint: var(--color-brand-100);
395
- --color-surface-action-tint-active: var(--color-brand-200);
397
+ --color-surface-action-tint-active: var(--color-brand-300);
396
398
  --color-surface-action-tint-hover: var(--color-brand-200);
397
399
  --color-surface-background: var(--color-base-100);
398
400
  --color-surface-brand-core: var(--color-brand-input);
399
401
  --color-surface-brand-strong: var(--color-brand-700);
400
402
  --color-surface-danger-strong: var(--color-red-700);
401
- --color-surface-danger-strong-active: var(--color-red-800);
403
+ --color-surface-danger-strong-active: var(--color-red-900);
402
404
  --color-surface-danger-strong-hover: var(--color-red-800);
403
405
  --color-surface-danger-subtle: var(--color-red-200);
404
- --color-surface-danger-subtle-active: var(--color-red-300);
406
+ --color-surface-danger-subtle-active: var(--color-red-400);
405
407
  --color-surface-danger-subtle-hover: var(--color-red-300);
406
408
  --color-surface-danger-tint: var(--color-red-100);
407
- --color-surface-danger-tint-active: var(--color-red-200);
409
+ --color-surface-danger-tint-active: var(--color-red-300);
408
410
  --color-surface-danger-tint-hover: var(--color-red-200);
409
411
  --color-surface-info-strong: var(--color-sky-500);
410
412
  --color-surface-info-subtle: var(--color-sky-200);
411
413
  --color-surface-info-tint: var(--color-sky-100);
414
+ --color-surface-info-tint-active: var(--color-sky-300);
415
+ --color-surface-info-tint-hover: var(--color-sky-200);
416
+ --color-surface-neutral-strong: var(--color-base-700);
412
417
  --color-surface-neutral-subtle: var(--color-base-200);
413
418
  --color-surface-neutral-tint: var(--color-base-100);
419
+ --color-surface-neutral-tint-active: var(--color-base-300);
420
+ --color-surface-neutral-tint-hover: var(--color-base-200);
414
421
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
422
+ --color-surface-primary-active: var(--color-base-200);
416
423
  --color-surface-primary-hover: var(--color-base-100);
417
424
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
425
+ --color-surface-secondary-active: var(--color-base-300);
419
426
  --color-surface-secondary-hover: var(--color-base-200);
420
427
  --color-surface-success-strong: var(--color-green-600);
421
428
  --color-surface-success-subtle: var(--color-green-200);
422
429
  --color-surface-success-tint: var(--color-green-100);
430
+ --color-surface-success-tint-active: var(--color-green-300);
431
+ --color-surface-success-tint-hover: var(--color-green-200);
423
432
  --color-surface-tertiary: var(--color-brand-100);
424
433
  --color-surface-warning-strong: var(--color-amber-400);
425
434
  --color-surface-warning-subtle: var(--color-amber-200);
426
435
  --color-surface-warning-tint: var(--color-amber-100);
436
+ --color-surface-warning-tint-active: var(--color-amber-300);
437
+ --color-surface-warning-tint-hover: var(--color-amber-200);
427
438
  --font-body: var(--font-sans);
428
439
  --font-body-bold: var(--font-sans-bold);
429
440
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -467,72 +478,83 @@
467
478
  --color-content-danger: var(--color-red-700);
468
479
  --color-content-danger-on-strong: var(--color-white);
469
480
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
481
+ --color-content-info: var(--color-sky-700);
471
482
  --color-content-info-on-strong: var(--color-white);
472
483
  --color-content-info-on-subtle: var(--color-sky-900);
473
484
  --color-content-link: var(--color-blue-600);
474
485
  --color-content-link-visited: var(--color-purple-800);
486
+ --color-content-neutral-on-strong: var(--color-white);
487
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
488
  --color-content-primary: var(--color-base-950);
476
489
  --color-content-secondary: var(--color-base-800);
477
490
  --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
491
+ --color-content-success: var(--color-green-700);
479
492
  --color-content-success-on-strong: var(--color-white);
480
493
  --color-content-success-on-subtle: var(--color-green-900);
481
494
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
495
+ --color-content-warning: var(--color-amber-700);
483
496
  --color-content-warning-on-strong: var(--color-black);
484
497
  --color-content-warning-on-subtle: var(--color-amber-900);
485
498
  --color-stroke-action: var(--color-brand-700);
486
499
  --color-stroke-danger: var(--color-red-700);
487
500
  --color-stroke-focus: var(--color-brand-700);
488
501
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
502
+ --color-stroke-info: var(--color-sky-700);
490
503
  --color-stroke-primary: var(--color-base-500);
491
504
  --color-stroke-ring: var(--color-base-950);
492
505
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
506
+ --color-stroke-success: var(--color-green-700);
507
+ --color-stroke-warning: var(--color-amber-700);
495
508
  --color-surface-accent-core: var(--color-accent-input);
496
509
  --color-surface-accent-strong: var(--color-accent-700);
497
510
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
511
+ --color-surface-action-strong-active: var(--color-brand-900);
499
512
  --color-surface-action-strong-hover: var(--color-brand-800);
500
513
  --color-surface-action-subtle: var(--color-brand-300);
501
- --color-surface-action-subtle-active: var(--color-brand-400);
514
+ --color-surface-action-subtle-active: var(--color-brand-500);
502
515
  --color-surface-action-subtle-hover: var(--color-brand-400);
503
516
  --color-surface-action-tint: var(--color-brand-100);
504
- --color-surface-action-tint-active: var(--color-brand-200);
517
+ --color-surface-action-tint-active: var(--color-brand-300);
505
518
  --color-surface-action-tint-hover: var(--color-brand-200);
506
519
  --color-surface-background: var(--color-base-100);
507
520
  --color-surface-brand-core: var(--color-brand-input);
508
521
  --color-surface-brand-strong: var(--color-brand-700);
509
522
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
523
+ --color-surface-danger-strong-active: var(--color-red-900);
511
524
  --color-surface-danger-strong-hover: var(--color-red-800);
512
525
  --color-surface-danger-subtle: var(--color-red-200);
513
- --color-surface-danger-subtle-active: var(--color-red-300);
526
+ --color-surface-danger-subtle-active: var(--color-red-400);
514
527
  --color-surface-danger-subtle-hover: var(--color-red-300);
515
528
  --color-surface-danger-tint: var(--color-red-100);
516
- --color-surface-danger-tint-active: var(--color-red-200);
529
+ --color-surface-danger-tint-active: var(--color-red-300);
517
530
  --color-surface-danger-tint-hover: var(--color-red-200);
518
531
  --color-surface-info-strong: var(--color-sky-500);
519
532
  --color-surface-info-subtle: var(--color-sky-200);
520
533
  --color-surface-info-tint: var(--color-sky-100);
534
+ --color-surface-info-tint-active: var(--color-sky-300);
535
+ --color-surface-info-tint-hover: var(--color-sky-200);
536
+ --color-surface-neutral-strong: var(--color-base-700);
521
537
  --color-surface-neutral-subtle: var(--color-base-200);
522
538
  --color-surface-neutral-tint: var(--color-base-100);
539
+ --color-surface-neutral-tint-active: var(--color-base-300);
540
+ --color-surface-neutral-tint-hover: var(--color-base-200);
523
541
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
542
+ --color-surface-primary-active: var(--color-base-200);
525
543
  --color-surface-primary-hover: var(--color-base-100);
526
544
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
545
+ --color-surface-secondary-active: var(--color-base-300);
528
546
  --color-surface-secondary-hover: var(--color-base-200);
529
547
  --color-surface-success-strong: var(--color-green-600);
530
548
  --color-surface-success-subtle: var(--color-green-200);
531
549
  --color-surface-success-tint: var(--color-green-100);
550
+ --color-surface-success-tint-active: var(--color-green-300);
551
+ --color-surface-success-tint-hover: var(--color-green-200);
532
552
  --color-surface-tertiary: var(--color-brand-100);
533
553
  --color-surface-warning-strong: var(--color-amber-400);
534
554
  --color-surface-warning-subtle: var(--color-amber-200);
535
555
  --color-surface-warning-tint: var(--color-amber-100);
556
+ --color-surface-warning-tint-active: var(--color-amber-300);
557
+ --color-surface-warning-tint-hover: var(--color-amber-200);
536
558
  --font-body: var(--font-sans);
537
559
  --font-body-bold: var(--font-sans-bold);
538
560
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -582,6 +604,8 @@
582
604
  --color-content-info-on-subtle: var(--color-sky-900);
583
605
  --color-content-link: var(--color-white);
584
606
  --color-content-link-visited: var(--color-purple-200);
607
+ --color-content-neutral-on-strong: var(--color-base-900);
608
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
609
  --color-content-primary: var(--color-white);
586
610
  --color-content-secondary: var(--color-base-100);
587
611
  --color-content-selected: var(--color-brand-100);
@@ -605,44 +629,53 @@
605
629
  --color-surface-accent-core: var(--color-accent-input);
606
630
  --color-surface-accent-strong: var(--color-accent-400);
607
631
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
632
+ --color-surface-action-strong-active: var(--color-brand-100);
609
633
  --color-surface-action-strong-hover: var(--color-brand-200);
610
634
  --color-surface-action-subtle: var(--color-brand-700);
611
- --color-surface-action-subtle-active: var(--color-brand-800);
612
- --color-surface-action-subtle-hover: var(--color-brand-800);
635
+ --color-surface-action-subtle-active: var(--color-brand-500);
636
+ --color-surface-action-subtle-hover: var(--color-brand-600);
613
637
  --color-surface-action-tint: var(--color-brand-900);
614
- --color-surface-action-tint-active: var(--color-brand-800);
638
+ --color-surface-action-tint-active: var(--color-brand-700);
615
639
  --color-surface-action-tint-hover: var(--color-brand-800);
616
640
  --color-surface-background: var(--color-base-900);
617
641
  --color-surface-brand-core: var(--color-brand-input);
618
642
  --color-surface-brand-strong: var(--color-brand-400);
619
643
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
644
+ --color-surface-danger-strong-active: var(--color-red-50);
621
645
  --color-surface-danger-strong-hover: var(--color-red-100);
622
646
  --color-surface-danger-subtle: var(--color-red-700);
623
- --color-surface-danger-subtle-active: var(--color-red-800);
624
- --color-surface-danger-subtle-hover: var(--color-red-800);
647
+ --color-surface-danger-subtle-active: var(--color-red-500);
648
+ --color-surface-danger-subtle-hover: var(--color-red-600);
625
649
  --color-surface-danger-tint: var(--color-red-900);
626
- --color-surface-danger-tint-active: var(--color-red-800);
650
+ --color-surface-danger-tint-active: var(--color-red-700);
627
651
  --color-surface-danger-tint-hover: var(--color-red-800);
628
652
  --color-surface-info-strong: var(--color-sky-300);
629
653
  --color-surface-info-subtle: var(--color-sky-700);
630
654
  --color-surface-info-tint: var(--color-sky-900);
655
+ --color-surface-info-tint-active: var(--color-sky-700);
656
+ --color-surface-info-tint-hover: var(--color-sky-800);
657
+ --color-surface-neutral-strong: var(--color-base-200);
631
658
  --color-surface-neutral-subtle: var(--color-base-800);
632
659
  --color-surface-neutral-tint: var(--color-base-900);
660
+ --color-surface-neutral-tint-active: var(--color-base-700);
661
+ --color-surface-neutral-tint-hover: var(--color-base-800);
633
662
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
663
+ --color-surface-primary-active: var(--color-base-800);
635
664
  --color-surface-primary-hover: var(--color-base-900);
636
665
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
666
+ --color-surface-secondary-active: var(--color-base-700);
638
667
  --color-surface-secondary-hover: var(--color-base-800);
639
668
  --color-surface-success-strong: var(--color-green-300);
640
669
  --color-surface-success-subtle: var(--color-green-700);
641
670
  --color-surface-success-tint: var(--color-green-900);
671
+ --color-surface-success-tint-active: var(--color-green-700);
672
+ --color-surface-success-tint-hover: var(--color-green-800);
642
673
  --color-surface-tertiary: var(--color-brand-900);
643
674
  --color-surface-warning-strong: var(--color-amber-300);
644
675
  --color-surface-warning-subtle: var(--color-amber-700);
645
676
  --color-surface-warning-tint: var(--color-amber-900);
677
+ --color-surface-warning-tint-active: var(--color-amber-700);
678
+ --color-surface-warning-tint-hover: var(--color-amber-800);
646
679
  --font-body: var(--font-sans);
647
680
  --font-body-bold: var(--font-sans-bold);
648
681
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/css/vanilla.css CHANGED
@@ -381,72 +381,83 @@
381
381
  --color-content-danger: var(--color-red-700);
382
382
  --color-content-danger-on-strong: var(--color-white);
383
383
  --color-content-danger-on-subtle: var(--color-red-900);
384
- --color-content-info: var(--color-sky-500);
384
+ --color-content-info: var(--color-sky-700);
385
385
  --color-content-info-on-strong: var(--color-white);
386
386
  --color-content-info-on-subtle: var(--color-sky-900);
387
387
  --color-content-link: var(--color-blue-600);
388
388
  --color-content-link-visited: var(--color-purple-800);
389
+ --color-content-neutral-on-strong: var(--color-white);
390
+ --color-content-neutral-on-subtle: var(--color-base-900);
389
391
  --color-content-primary: var(--color-base-950);
390
392
  --color-content-secondary: var(--color-base-800);
391
393
  --color-content-selected: var(--color-brand-700);
392
- --color-content-success: var(--color-green-600);
394
+ --color-content-success: var(--color-green-700);
393
395
  --color-content-success-on-strong: var(--color-white);
394
396
  --color-content-success-on-subtle: var(--color-green-900);
395
397
  --color-content-tertiary: var(--color-base-600);
396
- --color-content-warning: var(--color-amber-600);
398
+ --color-content-warning: var(--color-amber-700);
397
399
  --color-content-warning-on-strong: var(--color-black);
398
400
  --color-content-warning-on-subtle: var(--color-amber-900);
399
401
  --color-stroke-action: var(--color-brand-700);
400
402
  --color-stroke-danger: var(--color-red-700);
401
403
  --color-stroke-focus: var(--color-brand-700);
402
404
  --color-stroke-hover: var(--color-base-950);
403
- --color-stroke-info: var(--color-sky-500);
405
+ --color-stroke-info: var(--color-sky-700);
404
406
  --color-stroke-primary: var(--color-base-500);
405
407
  --color-stroke-ring: var(--color-base-950);
406
408
  --color-stroke-secondary: var(--color-base-100);
407
- --color-stroke-success: var(--color-green-500);
408
- --color-stroke-warning: var(--color-amber-600);
409
+ --color-stroke-success: var(--color-green-700);
410
+ --color-stroke-warning: var(--color-amber-700);
409
411
  --color-surface-accent-core: var(--color-accent-input);
410
412
  --color-surface-accent-strong: var(--color-accent-700);
411
413
  --color-surface-action-strong: var(--color-brand-700);
412
- --color-surface-action-strong-active: var(--color-brand-800);
414
+ --color-surface-action-strong-active: var(--color-brand-900);
413
415
  --color-surface-action-strong-hover: var(--color-brand-800);
414
416
  --color-surface-action-subtle: var(--color-brand-300);
415
- --color-surface-action-subtle-active: var(--color-brand-400);
417
+ --color-surface-action-subtle-active: var(--color-brand-500);
416
418
  --color-surface-action-subtle-hover: var(--color-brand-400);
417
419
  --color-surface-action-tint: var(--color-brand-100);
418
- --color-surface-action-tint-active: var(--color-brand-200);
420
+ --color-surface-action-tint-active: var(--color-brand-300);
419
421
  --color-surface-action-tint-hover: var(--color-brand-200);
420
422
  --color-surface-background: var(--color-base-100);
421
423
  --color-surface-brand-core: var(--color-brand-input);
422
424
  --color-surface-brand-strong: var(--color-brand-700);
423
425
  --color-surface-danger-strong: var(--color-red-700);
424
- --color-surface-danger-strong-active: var(--color-red-800);
426
+ --color-surface-danger-strong-active: var(--color-red-900);
425
427
  --color-surface-danger-strong-hover: var(--color-red-800);
426
428
  --color-surface-danger-subtle: var(--color-red-200);
427
- --color-surface-danger-subtle-active: var(--color-red-300);
429
+ --color-surface-danger-subtle-active: var(--color-red-400);
428
430
  --color-surface-danger-subtle-hover: var(--color-red-300);
429
431
  --color-surface-danger-tint: var(--color-red-100);
430
- --color-surface-danger-tint-active: var(--color-red-200);
432
+ --color-surface-danger-tint-active: var(--color-red-300);
431
433
  --color-surface-danger-tint-hover: var(--color-red-200);
432
434
  --color-surface-info-strong: var(--color-sky-500);
433
435
  --color-surface-info-subtle: var(--color-sky-200);
434
436
  --color-surface-info-tint: var(--color-sky-100);
437
+ --color-surface-info-tint-active: var(--color-sky-300);
438
+ --color-surface-info-tint-hover: var(--color-sky-200);
439
+ --color-surface-neutral-strong: var(--color-base-700);
435
440
  --color-surface-neutral-subtle: var(--color-base-200);
436
441
  --color-surface-neutral-tint: var(--color-base-100);
442
+ --color-surface-neutral-tint-active: var(--color-base-300);
443
+ --color-surface-neutral-tint-hover: var(--color-base-200);
437
444
  --color-surface-primary: var(--color-white);
438
- --color-surface-primary-active: var(--color-base-100);
445
+ --color-surface-primary-active: var(--color-base-200);
439
446
  --color-surface-primary-hover: var(--color-base-100);
440
447
  --color-surface-secondary: var(--color-base-100);
441
- --color-surface-secondary-active: var(--color-base-200);
448
+ --color-surface-secondary-active: var(--color-base-300);
442
449
  --color-surface-secondary-hover: var(--color-base-200);
443
450
  --color-surface-success-strong: var(--color-green-600);
444
451
  --color-surface-success-subtle: var(--color-green-200);
445
452
  --color-surface-success-tint: var(--color-green-100);
453
+ --color-surface-success-tint-active: var(--color-green-300);
454
+ --color-surface-success-tint-hover: var(--color-green-200);
446
455
  --color-surface-tertiary: var(--color-brand-100);
447
456
  --color-surface-warning-strong: var(--color-amber-400);
448
457
  --color-surface-warning-subtle: var(--color-amber-200);
449
458
  --color-surface-warning-tint: var(--color-amber-100);
459
+ --color-surface-warning-tint-active: var(--color-amber-300);
460
+ --color-surface-warning-tint-hover: var(--color-amber-200);
450
461
  --font-body: var(--font-sans);
451
462
  --font-body-bold: var(--font-sans-bold);
452
463
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -498,6 +509,8 @@
498
509
  --color-content-info-on-subtle: var(--color-sky-900);
499
510
  --color-content-link: var(--color-white);
500
511
  --color-content-link-visited: var(--color-purple-200);
512
+ --color-content-neutral-on-strong: var(--color-base-900);
513
+ --color-content-neutral-on-subtle: var(--color-base-100);
501
514
  --color-content-primary: var(--color-white);
502
515
  --color-content-secondary: var(--color-base-100);
503
516
  --color-content-selected: var(--color-brand-100);
@@ -521,44 +534,53 @@
521
534
  --color-surface-accent-core: var(--color-accent-input);
522
535
  --color-surface-accent-strong: var(--color-accent-400);
523
536
  --color-surface-action-strong: var(--color-brand-300);
524
- --color-surface-action-strong-active: var(--color-brand-200);
537
+ --color-surface-action-strong-active: var(--color-brand-100);
525
538
  --color-surface-action-strong-hover: var(--color-brand-200);
526
539
  --color-surface-action-subtle: var(--color-brand-700);
527
- --color-surface-action-subtle-active: var(--color-brand-800);
528
- --color-surface-action-subtle-hover: var(--color-brand-800);
540
+ --color-surface-action-subtle-active: var(--color-brand-500);
541
+ --color-surface-action-subtle-hover: var(--color-brand-600);
529
542
  --color-surface-action-tint: var(--color-brand-900);
530
- --color-surface-action-tint-active: var(--color-brand-800);
543
+ --color-surface-action-tint-active: var(--color-brand-700);
531
544
  --color-surface-action-tint-hover: var(--color-brand-800);
532
545
  --color-surface-background: var(--color-base-900);
533
546
  --color-surface-brand-core: var(--color-brand-input);
534
547
  --color-surface-brand-strong: var(--color-brand-400);
535
548
  --color-surface-danger-strong: var(--color-red-200);
536
- --color-surface-danger-strong-active: var(--color-red-100);
549
+ --color-surface-danger-strong-active: var(--color-red-50);
537
550
  --color-surface-danger-strong-hover: var(--color-red-100);
538
551
  --color-surface-danger-subtle: var(--color-red-700);
539
- --color-surface-danger-subtle-active: var(--color-red-800);
540
- --color-surface-danger-subtle-hover: var(--color-red-800);
552
+ --color-surface-danger-subtle-active: var(--color-red-500);
553
+ --color-surface-danger-subtle-hover: var(--color-red-600);
541
554
  --color-surface-danger-tint: var(--color-red-900);
542
- --color-surface-danger-tint-active: var(--color-red-800);
555
+ --color-surface-danger-tint-active: var(--color-red-700);
543
556
  --color-surface-danger-tint-hover: var(--color-red-800);
544
557
  --color-surface-info-strong: var(--color-sky-300);
545
558
  --color-surface-info-subtle: var(--color-sky-700);
546
559
  --color-surface-info-tint: var(--color-sky-900);
560
+ --color-surface-info-tint-active: var(--color-sky-700);
561
+ --color-surface-info-tint-hover: var(--color-sky-800);
562
+ --color-surface-neutral-strong: var(--color-base-200);
547
563
  --color-surface-neutral-subtle: var(--color-base-800);
548
564
  --color-surface-neutral-tint: var(--color-base-900);
565
+ --color-surface-neutral-tint-active: var(--color-base-700);
566
+ --color-surface-neutral-tint-hover: var(--color-base-800);
549
567
  --color-surface-primary: var(--color-base-950);
550
- --color-surface-primary-active: var(--color-base-900);
568
+ --color-surface-primary-active: var(--color-base-800);
551
569
  --color-surface-primary-hover: var(--color-base-900);
552
570
  --color-surface-secondary: var(--color-base-900);
553
- --color-surface-secondary-active: var(--color-base-800);
571
+ --color-surface-secondary-active: var(--color-base-700);
554
572
  --color-surface-secondary-hover: var(--color-base-800);
555
573
  --color-surface-success-strong: var(--color-green-300);
556
574
  --color-surface-success-subtle: var(--color-green-700);
557
575
  --color-surface-success-tint: var(--color-green-900);
576
+ --color-surface-success-tint-active: var(--color-green-700);
577
+ --color-surface-success-tint-hover: var(--color-green-800);
558
578
  --color-surface-tertiary: var(--color-brand-900);
559
579
  --color-surface-warning-strong: var(--color-amber-300);
560
580
  --color-surface-warning-subtle: var(--color-amber-700);
561
581
  --color-surface-warning-tint: var(--color-amber-900);
582
+ --color-surface-warning-tint-active: var(--color-amber-700);
583
+ --color-surface-warning-tint-hover: var(--color-amber-800);
562
584
  --font-body: var(--font-sans);
563
585
  --font-body-bold: var(--font-sans-bold);
564
586
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/styles",
3
- "version": "0.0.1-beta.2",
3
+ "version": "0.0.1-beta.20",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -53,7 +53,7 @@
53
53
  "@expo-google-fonts/manrope": "0.4.2",
54
54
  "@expo-google-fonts/outfit": "0.4.3",
55
55
  "@expo-google-fonts/public-sans": "0.4.2",
56
- "@cdx-ui/utils": "0.0.1-beta.2"
56
+ "@cdx-ui/utils": "0.0.1-beta.20"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "react": "^18.2.0 || ^19.0.0",
package/tokens/presets/.manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "poise.json": "8de6657e555788e1d9e10ae9c6868a2a886bdcb6bfdf01bdd2e3f628f6704586",
2
+ "poise.json": "74dcc3c9f312d967c63b58d25a868287a1f080f16e314be9e32d817587d6f1e8",
3
3
  "prestige.json": "7828f391d212be0726839297dfa6638b575187faa6fc9eecd7d64219eaadf403",
4
4
  "pulse.json": "1cbc3480aae055ae03360b243664e9a95e2eca96be3126334ea062d0d38d6033"
5
5
  }
package/tokens/presets/poise.json CHANGED
@@ -2364,7 +2364,7 @@
2364
2364
  },
2365
2365
  "info": {
2366
2366
  "$type": "color",
2367
- "$value": "{color.sky.500}"
2367
+ "$value": "{color.sky.700}"
2368
2368
  },
2369
2369
  "info-on-strong": {
2370
2370
  "$type": "color",
@@ -2382,6 +2382,14 @@
2382
2382
  "$type": "color",
2383
2383
  "$value": "{color.purple.800}"
2384
2384
  },
2385
+ "neutral-on-strong": {
2386
+ "$type": "color",
2387
+ "$value": "{color.white}"
2388
+ },
2389
+ "neutral-on-subtle": {
2390
+ "$type": "color",
2391
+ "$value": "{color.base.900}"
2392
+ },
2385
2393
  "primary": {
2386
2394
  "$type": "color",
2387
2395
  "$value": "{color.base.950}"
@@ -2396,7 +2404,7 @@
2396
2404
  },
2397
2405
  "success": {
2398
2406
  "$type": "color",
2399
- "$value": "{color.green.600}"
2407
+ "$value": "{color.green.700}"
2400
2408
  },
2401
2409
  "success-on-strong": {
2402
2410
  "$type": "color",
@@ -2412,7 +2420,7 @@
2412
2420
  },
2413
2421
  "warning": {
2414
2422
  "$type": "color",
2415
- "$value": "{color.amber.600}"
2423
+ "$value": "{color.amber.700}"
2416
2424
  },
2417
2425
  "warning-on-strong": {
2418
2426
  "$type": "color",
@@ -2442,7 +2450,7 @@
2442
2450
  },
2443
2451
  "info": {
2444
2452
  "$type": "color",
2445
- "$value": "{color.sky.500}"
2453
+ "$value": "{color.sky.700}"
2446
2454
  },
2447
2455
  "primary": {
2448
2456
  "$type": "color",
@@ -2458,11 +2466,11 @@
2458
2466
  },
2459
2467
  "success": {
2460
2468
  "$type": "color",
2461
- "$value": "{color.green.500}"
2469
+ "$value": "{color.green.700}"
2462
2470
  },
2463
2471
  "warning": {
2464
2472
  "$type": "color",
2465
- "$value": "{color.amber.600}"
2473
+ "$value": "{color.amber.700}"
2466
2474
  }
2467
2475
  },
2468
2476
  "surface": {
@@ -2483,7 +2491,7 @@
2483
2491
  },
2484
2492
  "strong-active": {
2485
2493
  "$type": "color",
2486
- "$value": "{color.brand.800}"
2494
+ "$value": "{color.brand.900}"
2487
2495
  },
2488
2496
  "strong-hover": {
2489
2497
  "$type": "color",
@@ -2495,7 +2503,7 @@
2495
2503
  },
2496
2504
  "subtle-active": {
2497
2505
  "$type": "color",
2498
- "$value": "{color.brand.400}"
2506
+ "$value": "{color.brand.500}"
2499
2507
  },
2500
2508
  "subtle-hover": {
2501
2509
  "$type": "color",
@@ -2507,7 +2515,7 @@
2507
2515
  },
2508
2516
  "tint-active": {
2509
2517
  "$type": "color",
2510
- "$value": "{color.brand.200}"
2518
+ "$value": "{color.brand.300}"
2511
2519
  },
2512
2520
  "tint-hover": {
2513
2521
  "$type": "color",
@@ -2535,7 +2543,7 @@
2535
2543
  },
2536
2544
  "strong-active": {
2537
2545
  "$type": "color",
2538
- "$value": "{color.red.800}"
2546
+ "$value": "{color.red.900}"
2539
2547
  },
2540
2548
  "strong-hover": {
2541
2549
  "$type": "color",
@@ -2547,7 +2555,7 @@
2547
2555
  },
2548
2556
  "subtle-active": {
2549
2557
  "$type": "color",
2550
- "$value": "{color.red.300}"
2558
+ "$value": "{color.red.400}"
2551
2559
  },
2552
2560
  "subtle-hover": {
2553
2561
  "$type": "color",
@@ -2559,7 +2567,7 @@
2559
2567
  },
2560
2568
  "tint-active": {
2561
2569
  "$type": "color",
2562
- "$value": "{color.red.200}"
2570
+ "$value": "{color.red.300}"
2563
2571
  },
2564
2572
  "tint-hover": {
2565
2573
  "$type": "color",
@@ -2578,9 +2586,21 @@
2578
2586
  "tint": {
2579
2587
  "$type": "color",
2580
2588
  "$value": "{color.sky.100}"
2589
+ },
2590
+ "tint-active": {
2591
+ "$type": "color",
2592
+ "$value": "{color.sky.300}"
2593
+ },
2594
+ "tint-hover": {
2595
+ "$type": "color",
2596
+ "$value": "{color.sky.200}"
2581
2597
  }
2582
2598
  },
2583
2599
  "neutral": {
2600
+ "strong": {
2601
+ "$type": "color",
2602
+ "$value": "{color.base.700}"
2603
+ },
2584
2604
  "subtle": {
2585
2605
  "$type": "color",
2586
2606
  "$value": "{color.base.200}"
@@ -2588,6 +2608,14 @@
2588
2608
  "tint": {
2589
2609
  "$type": "color",
2590
2610
  "$value": "{color.base.100}"
2611
+ },
2612
+ "tint-active": {
2613
+ "$type": "color",
2614
+ "$value": "{color.base.300}"
2615
+ },
2616
+ "tint-hover": {
2617
+ "$type": "color",
2618
+ "$value": "{color.base.200}"
2591
2619
  }
2592
2620
  },
2593
2621
  "primary": {
@@ -2596,7 +2624,7 @@
2596
2624
  },
2597
2625
  "primary-active": {
2598
2626
  "$type": "color",
2599
- "$value": "{color.base.100}"
2627
+ "$value": "{color.base.200}"
2600
2628
  },
2601
2629
  "primary-hover": {
2602
2630
  "$type": "color",
@@ -2608,7 +2636,7 @@
2608
2636
  },
2609
2637
  "secondary-active": {
2610
2638
  "$type": "color",
2611
- "$value": "{color.base.200}"
2639
+ "$value": "{color.base.300}"
2612
2640
  },
2613
2641
  "secondary-hover": {
2614
2642
  "$type": "color",
@@ -2626,6 +2654,14 @@
2626
2654
  "tint": {
2627
2655
  "$type": "color",
2628
2656
  "$value": "{color.green.100}"
2657
+ },
2658
+ "tint-active": {
2659
+ "$type": "color",
2660
+ "$value": "{color.green.300}"
2661
+ },
2662
+ "tint-hover": {
2663
+ "$type": "color",
2664
+ "$value": "{color.green.200}"
2629
2665
  }
2630
2666
  },
2631
2667
  "tertiary": {
@@ -2644,6 +2680,14 @@
2644
2680
  "tint": {
2645
2681
  "$type": "color",
2646
2682
  "$value": "{color.amber.100}"
2683
+ },
2684
+ "tint-active": {
2685
+ "$type": "color",
2686
+ "$value": "{color.amber.300}"
2687
+ },
2688
+ "tint-hover": {
2689
+ "$type": "color",
2690
+ "$value": "{color.amber.200}"
2647
2691
  }
2648
2692
  }
2649
2693
  }
@@ -2856,6 +2900,14 @@
2856
2900
  "$type": "color",
2857
2901
  "$value": "{color.purple.200}"
2858
2902
  },
2903
+ "neutral-on-strong": {
2904
+ "$type": "color",
2905
+ "$value": "{color.base.900}"
2906
+ },
2907
+ "neutral-on-subtle": {
2908
+ "$type": "color",
2909
+ "$value": "{color.base.100}"
2910
+ },
2859
2911
  "primary": {
2860
2912
  "$type": "color",
2861
2913
  "$value": "{color.white}"
@@ -2957,7 +3009,7 @@
2957
3009
  },
2958
3010
  "strong-active": {
2959
3011
  "$type": "color",
2960
- "$value": "{color.brand.200}"
3012
+ "$value": "{color.brand.100}"
2961
3013
  },
2962
3014
  "strong-hover": {
2963
3015
  "$type": "color",
@@ -2969,11 +3021,11 @@
2969
3021
  },
2970
3022
  "subtle-active": {
2971
3023
  "$type": "color",
2972
- "$value": "{color.brand.800}"
3024
+ "$value": "{color.brand.500}"
2973
3025
  },
2974
3026
  "subtle-hover": {
2975
3027
  "$type": "color",
2976
- "$value": "{color.brand.800}"
3028
+ "$value": "{color.brand.600}"
2977
3029
  },
2978
3030
  "tint": {
2979
3031
  "$type": "color",
@@ -2981,7 +3033,7 @@
2981
3033
  },
2982
3034
  "tint-active": {
2983
3035
  "$type": "color",
2984
- "$value": "{color.brand.800}"
3036
+ "$value": "{color.brand.700}"
2985
3037
  },
2986
3038
  "tint-hover": {
2987
3039
  "$type": "color",
@@ -3009,7 +3061,7 @@
3009
3061
  },
3010
3062
  "strong-active": {
3011
3063
  "$type": "color",
3012
- "$value": "{color.red.100}"
3064
+ "$value": "{color.red.50}"
3013
3065
  },
3014
3066
  "strong-hover": {
3015
3067
  "$type": "color",
@@ -3021,11 +3073,11 @@
3021
3073
  },
3022
3074
  "subtle-active": {
3023
3075
  "$type": "color",
3024
- "$value": "{color.red.800}"
3076
+ "$value": "{color.red.500}"
3025
3077
  },
3026
3078
  "subtle-hover": {
3027
3079
  "$type": "color",
3028
- "$value": "{color.red.800}"
3080
+ "$value": "{color.red.600}"
3029
3081
  },
3030
3082
  "tint": {
3031
3083
  "$type": "color",
@@ -3033,7 +3085,7 @@
3033
3085
  },
3034
3086
  "tint-active": {
3035
3087
  "$type": "color",
3036
- "$value": "{color.red.800}"
3088
+ "$value": "{color.red.700}"
3037
3089
  },
3038
3090
  "tint-hover": {
3039
3091
  "$type": "color",
@@ -3052,9 +3104,21 @@
3052
3104
  "tint": {
3053
3105
  "$type": "color",
3054
3106
  "$value": "{color.sky.900}"
3107
+ },
3108
+ "tint-active": {
3109
+ "$type": "color",
3110
+ "$value": "{color.sky.700}"
3111
+ },
3112
+ "tint-hover": {
3113
+ "$type": "color",
3114
+ "$value": "{color.sky.800}"
3055
3115
  }
3056
3116
  },
3057
3117
  "neutral": {
3118
+ "strong": {
3119
+ "$type": "color",
3120
+ "$value": "{color.base.200}"
3121
+ },
3058
3122
  "subtle": {
3059
3123
  "$type": "color",
3060
3124
  "$value": "{color.base.800}"
@@ -3062,6 +3126,14 @@
3062
3126
  "tint": {
3063
3127
  "$type": "color",
3064
3128
  "$value": "{color.base.900}"
3129
+ },
3130
+ "tint-active": {
3131
+ "$type": "color",
3132
+ "$value": "{color.base.700}"
3133
+ },
3134
+ "tint-hover": {
3135
+ "$type": "color",
3136
+ "$value": "{color.base.800}"
3065
3137
  }
3066
3138
  },
3067
3139
  "primary": {
@@ -3070,7 +3142,7 @@
3070
3142
  },
3071
3143
  "primary-active": {
3072
3144
  "$type": "color",
3073
- "$value": "{color.base.900}"
3145
+ "$value": "{color.base.800}"
3074
3146
  },
3075
3147
  "primary-hover": {
3076
3148
  "$type": "color",
@@ -3082,7 +3154,7 @@
3082
3154
  },
3083
3155
  "secondary-active": {
3084
3156
  "$type": "color",
3085
- "$value": "{color.base.800}"
3157
+ "$value": "{color.base.700}"
3086
3158
  },
3087
3159
  "secondary-hover": {
3088
3160
  "$type": "color",
@@ -3100,6 +3172,14 @@
3100
3172
  "tint": {
3101
3173
  "$type": "color",
3102
3174
  "$value": "{color.green.900}"
3175
+ },
3176
+ "tint-active": {
3177
+ "$type": "color",
3178
+ "$value": "{color.green.700}"
3179
+ },
3180
+ "tint-hover": {
3181
+ "$type": "color",
3182
+ "$value": "{color.green.800}"
3103
3183
  }
3104
3184
  },
3105
3185
  "tertiary": {
@@ -3118,6 +3198,14 @@
3118
3198
  "tint": {
3119
3199
  "$type": "color",
3120
3200
  "$value": "{color.amber.900}"
3201
+ },
3202
+ "tint-active": {
3203
+ "$type": "color",
3204
+ "$value": "{color.amber.700}"
3205
+ },
3206
+ "tint-hover": {
3207
+ "$type": "color",
3208
+ "$value": "{color.amber.800}"
3121
3209
  }
3122
3210
  }
3123
3211
  }