@nexub/tokens 7.9.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/roles.css +209 -2
- package/dist/css/variables.css +0 -11
- package/dist/js/generated/native.d.ts +0 -15
- package/dist/js/generated/native.js +0 -45
- package/dist/js/generated/tokens.d.ts +0 -15
- package/dist/js/generated/tokens.js +0 -15
- package/dist/json/tokens.json +0 -11
- package/package.json +1 -1
package/dist/css/roles.css
CHANGED
|
@@ -406,9 +406,9 @@
|
|
|
406
406
|
--color-chart-div-7: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
|
|
407
407
|
}
|
|
408
408
|
|
|
409
|
-
/* Signature style (
|
|
409
|
+
/* Signature style (the default since 8.0): neutral palettes, brand-indigo primary, ~10px controls, crisp elevation. */
|
|
410
410
|
|
|
411
|
-
[data-style='signature'] {
|
|
411
|
+
:root, [data-style='signature'] {
|
|
412
412
|
--color-palette-primary-0: #000000;
|
|
413
413
|
--color-palette-primary-5: #00004e;
|
|
414
414
|
--color-palette-primary-10: #00016d;
|
|
@@ -483,6 +483,83 @@
|
|
|
483
483
|
--elevation-3: 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1)), 0 2px 4px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.45)), 0 16px 36px -8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6));
|
|
484
484
|
}
|
|
485
485
|
|
|
486
|
+
/* Classic style (data-style="classic", the 7.x look; removed in 9.0). */
|
|
487
|
+
|
|
488
|
+
[data-style='classic'] {
|
|
489
|
+
--color-palette-primary-0: #000000;
|
|
490
|
+
--color-palette-primary-5: #000f2f;
|
|
491
|
+
--color-palette-primary-10: #001944;
|
|
492
|
+
--color-palette-primary-15: #002358;
|
|
493
|
+
--color-palette-primary-20: #002d6d;
|
|
494
|
+
--color-palette-primary-30: #004299;
|
|
495
|
+
--color-palette-primary-35: #004db0;
|
|
496
|
+
--color-palette-primary-40: #0059c7;
|
|
497
|
+
--color-palette-primary-50: #3373e2;
|
|
498
|
+
--color-palette-primary-60: #538dfe;
|
|
499
|
+
--color-palette-primary-70: #84aaff;
|
|
500
|
+
--color-palette-primary-80: #afc6ff;
|
|
501
|
+
--color-palette-primary-85: #c4d4ff;
|
|
502
|
+
--color-palette-primary-90: #d9e2ff;
|
|
503
|
+
--color-palette-primary-95: #edf0ff;
|
|
504
|
+
--color-palette-primary-100: #ffffff;
|
|
505
|
+
--color-palette-secondary-0: #000000;
|
|
506
|
+
--color-palette-secondary-5: #091121;
|
|
507
|
+
--color-palette-secondary-10: #141b2c;
|
|
508
|
+
--color-palette-secondary-15: #1e2636;
|
|
509
|
+
--color-palette-secondary-20: #293042;
|
|
510
|
+
--color-palette-secondary-30: #404759;
|
|
511
|
+
--color-palette-secondary-35: #4b5265;
|
|
512
|
+
--color-palette-secondary-40: #575e71;
|
|
513
|
+
--color-palette-secondary-80: #bfc6dc;
|
|
514
|
+
--color-palette-secondary-85: #cdd4eb;
|
|
515
|
+
--color-palette-secondary-90: #dbe2f9;
|
|
516
|
+
--color-palette-secondary-95: #edf0ff;
|
|
517
|
+
--color-palette-secondary-100: #ffffff;
|
|
518
|
+
--color-palette-neutral-0: #000000;
|
|
519
|
+
--color-palette-neutral-4: #0d0e11;
|
|
520
|
+
--color-palette-neutral-5: #0f1114;
|
|
521
|
+
--color-palette-neutral-6: #121316;
|
|
522
|
+
--color-palette-neutral-10: #1a1c1e;
|
|
523
|
+
--color-palette-neutral-12: #1e2022;
|
|
524
|
+
--color-palette-neutral-17: #292a2d;
|
|
525
|
+
--color-palette-neutral-20: #2f3033;
|
|
526
|
+
--color-palette-neutral-22: #333538;
|
|
527
|
+
--color-palette-neutral-24: #38393c;
|
|
528
|
+
--color-palette-neutral-87: #dad9dd;
|
|
529
|
+
--color-palette-neutral-90: #e3e2e6;
|
|
530
|
+
--color-palette-neutral-92: #e8e8eb;
|
|
531
|
+
--color-palette-neutral-94: #eeedf1;
|
|
532
|
+
--color-palette-neutral-95: #f1f0f4;
|
|
533
|
+
--color-palette-neutral-96: #f4f3f7;
|
|
534
|
+
--color-palette-neutral-98: #faf9fd;
|
|
535
|
+
--color-palette-neutral-100: #ffffff;
|
|
536
|
+
--color-palette-neutral-variant-20: #2c3137;
|
|
537
|
+
--color-palette-neutral-variant-25: #373c43;
|
|
538
|
+
--color-palette-neutral-variant-30: #43474e;
|
|
539
|
+
--color-palette-neutral-variant-35: #4e535a;
|
|
540
|
+
--color-palette-neutral-variant-40: #5a5f66;
|
|
541
|
+
--color-palette-neutral-variant-45: #676b72;
|
|
542
|
+
--color-palette-neutral-variant-50: #73777f;
|
|
543
|
+
--color-palette-neutral-variant-60: #8d9199;
|
|
544
|
+
--color-palette-neutral-variant-65: #9a9ea6;
|
|
545
|
+
--color-palette-neutral-variant-70: #a7abb4;
|
|
546
|
+
--color-palette-neutral-variant-72: #adb1b9;
|
|
547
|
+
--color-palette-neutral-variant-76: #b8bbc4;
|
|
548
|
+
--color-palette-neutral-variant-80: #c3c6cf;
|
|
549
|
+
--color-palette-neutral-variant-85: #d1d4dd;
|
|
550
|
+
--color-palette-neutral-variant-90: #dfe2eb;
|
|
551
|
+
--shape-control: 9999px;
|
|
552
|
+
--shape-field: 0.75rem;
|
|
553
|
+
--shape-container: 1rem;
|
|
554
|
+
--type-display-xl-letterSpacing: -0.045em;
|
|
555
|
+
--type-display-lg-letterSpacing: -0.03em;
|
|
556
|
+
--type-display-md-letterSpacing: -0.025em;
|
|
557
|
+
--type-display-sm-letterSpacing: -0.02em;
|
|
558
|
+
--elevation-1: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.06)), 0 1px 2px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 2px 6px light-dark(rgb(26 28 30 / 0.04), rgb(0 0 0 / 0.3));
|
|
559
|
+
--elevation-2: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 2px 4px light-dark(rgb(26 28 30 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 20px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45));
|
|
560
|
+
--elevation-3: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 4px 8px light-dark(rgb(26 28 30 / 0.08), rgb(0 0 0 / 0.45)), 0 20px 48px light-dark(rgb(26 28 30 / 0.16), rgb(0 0 0 / 0.55));
|
|
561
|
+
}
|
|
562
|
+
|
|
486
563
|
:not(:root)[data-style='signature'] {
|
|
487
564
|
--color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
|
|
488
565
|
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
|
|
@@ -598,6 +675,121 @@
|
|
|
598
675
|
}
|
|
599
676
|
}
|
|
600
677
|
|
|
678
|
+
:not(:root)[data-style='classic'] {
|
|
679
|
+
--color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
|
|
680
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
|
|
681
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
682
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
|
|
683
|
+
--color-secondary: light-dark(var(--color-palette-secondary-40), var(--color-palette-secondary-80));
|
|
684
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-20));
|
|
685
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
686
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-10), var(--color-palette-secondary-90));
|
|
687
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
688
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
689
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
690
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
691
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
692
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
693
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
694
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
695
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
696
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-10), var(--color-palette-neutral-90));
|
|
697
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
698
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-72));
|
|
699
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
700
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-80), var(--color-palette-neutral-variant-30));
|
|
701
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
702
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
|
|
703
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
704
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
705
|
+
}
|
|
706
|
+
[data-contrast='medium']:not(:root)[data-style='classic'], [data-contrast='medium'] :not(:root)[data-style='classic'] {
|
|
707
|
+
--color-primary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
|
|
708
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
|
|
709
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
710
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
|
|
711
|
+
--color-secondary: light-dark(var(--color-palette-secondary-35), var(--color-palette-secondary-85));
|
|
712
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-15));
|
|
713
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
714
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-5), var(--color-palette-secondary-95));
|
|
715
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
716
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
717
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
718
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
719
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
720
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
721
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
722
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
723
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
724
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-5), var(--color-palette-neutral-95));
|
|
725
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-25), var(--color-palette-neutral-variant-85));
|
|
726
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-35), var(--color-palette-neutral-variant-76));
|
|
727
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-70));
|
|
728
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-65), var(--color-palette-neutral-variant-45));
|
|
729
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
730
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-10));
|
|
731
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
732
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
733
|
+
}
|
|
734
|
+
[data-contrast='high']:not(:root)[data-style='classic'], [data-contrast='high'] :not(:root)[data-style='classic'] {
|
|
735
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
736
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
737
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
738
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
739
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
740
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
741
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
742
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
743
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
744
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
745
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
746
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
747
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
748
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
749
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
750
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
751
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
752
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
753
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
754
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
755
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
756
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
757
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
758
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
759
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
760
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
761
|
+
}
|
|
762
|
+
@media (prefers-contrast: more) {
|
|
763
|
+
:root:not([data-contrast]):not(:root)[data-style='classic'], :root:not([data-contrast]) :not(:root)[data-style='classic'] {
|
|
764
|
+
--color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
|
|
765
|
+
--color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
|
|
766
|
+
--color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
|
|
767
|
+
--color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
|
|
768
|
+
--color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
|
|
769
|
+
--color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
|
|
770
|
+
--color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
|
|
771
|
+
--color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
|
|
772
|
+
--color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
|
|
773
|
+
--color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
|
|
774
|
+
--color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
|
|
775
|
+
--color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
|
|
776
|
+
--color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
|
|
777
|
+
--color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
|
|
778
|
+
--color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
|
|
779
|
+
--color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
|
|
780
|
+
--color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
|
|
781
|
+
--color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
|
|
782
|
+
--color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
|
|
783
|
+
--color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
784
|
+
--color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
|
|
785
|
+
--color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
|
|
786
|
+
--color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
|
|
787
|
+
--color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
|
|
788
|
+
--color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
|
|
789
|
+
--color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
|
|
601
793
|
@media (color-gamut: p3) {
|
|
602
794
|
@supports (color: oklch(from red l c h)) {
|
|
603
795
|
:root, [data-contrast='standard'] {
|
|
@@ -728,5 +920,20 @@
|
|
|
728
920
|
--color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
|
|
729
921
|
}
|
|
730
922
|
}
|
|
923
|
+
|
|
924
|
+
:not(:root)[data-style='classic'] {
|
|
925
|
+
--color-primary: light-dark(oklch(from var(--color-palette-primary-40) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-80) l calc(c * 1.18) h));
|
|
926
|
+
}
|
|
927
|
+
[data-contrast='medium']:not(:root)[data-style='classic'], [data-contrast='medium'] :not(:root)[data-style='classic'] {
|
|
928
|
+
--color-primary: light-dark(oklch(from var(--color-palette-primary-35) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-85) l calc(c * 1.18) h));
|
|
929
|
+
}
|
|
930
|
+
[data-contrast='high']:not(:root)[data-style='classic'], [data-contrast='high'] :not(:root)[data-style='classic'] {
|
|
931
|
+
--color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
|
|
932
|
+
}
|
|
933
|
+
@media (prefers-contrast: more) {
|
|
934
|
+
:root:not([data-contrast]):not(:root)[data-style='classic'], :root:not([data-contrast]) :not(:root)[data-style='classic'] {
|
|
935
|
+
--color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
|
|
936
|
+
}
|
|
937
|
+
}
|
|
731
938
|
}
|
|
732
939
|
}
|
package/dist/css/variables.css
CHANGED
|
@@ -582,17 +582,6 @@
|
|
|
582
582
|
--marketing-accent-line: linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%); /** Brand accent line: Nexub and the product colours */
|
|
583
583
|
--marketing-lift: -6px; /** Card hover lift */
|
|
584
584
|
--marketing-button-lift: -2px; /** Hero button hover lift */
|
|
585
|
-
--duration-instant: 0s;
|
|
586
|
-
--duration-fast: 0.15s;
|
|
587
|
-
--duration-normal: 0.2s;
|
|
588
|
-
--duration-slow: 0.3s;
|
|
589
|
-
--duration-slower: 0.5s;
|
|
590
|
-
--ease-linear: cubic-bezier(0, 0, 1, 1);
|
|
591
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
592
|
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
593
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
594
|
-
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
595
|
-
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
596
585
|
--radius-none: 0px;
|
|
597
586
|
--radius-xs: 0.125rem;
|
|
598
587
|
--radius-sm: 0.25rem;
|
|
@@ -1024,21 +1024,6 @@ export declare const native: {
|
|
|
1024
1024
|
};
|
|
1025
1025
|
};
|
|
1026
1026
|
readonly motion: {
|
|
1027
|
-
readonly duration: {
|
|
1028
|
-
readonly instant: 0;
|
|
1029
|
-
readonly fast: 150;
|
|
1030
|
-
readonly normal: 200;
|
|
1031
|
-
readonly slow: 300;
|
|
1032
|
-
readonly slower: 500;
|
|
1033
|
-
};
|
|
1034
|
-
readonly easing: {
|
|
1035
|
-
readonly linear: readonly [0, 0, 1, 1];
|
|
1036
|
-
readonly in: readonly [0.4, 0, 1, 1];
|
|
1037
|
-
readonly out: readonly [0, 0, 0.2, 1];
|
|
1038
|
-
readonly "in-out": readonly [0.4, 0, 0.2, 1];
|
|
1039
|
-
readonly "out-expo": readonly [0.16, 1, 0.3, 1];
|
|
1040
|
-
readonly spring: readonly [0.34, 1.56, 0.64, 1];
|
|
1041
|
-
};
|
|
1042
1027
|
readonly spring: {
|
|
1043
1028
|
readonly spatial: {
|
|
1044
1029
|
readonly fast: {
|
|
@@ -1026,51 +1026,6 @@ export const native = {
|
|
|
1026
1026
|
}
|
|
1027
1027
|
},
|
|
1028
1028
|
"motion": {
|
|
1029
|
-
"duration": {
|
|
1030
|
-
"instant": 0,
|
|
1031
|
-
"fast": 150,
|
|
1032
|
-
"normal": 200,
|
|
1033
|
-
"slow": 300,
|
|
1034
|
-
"slower": 500
|
|
1035
|
-
},
|
|
1036
|
-
"easing": {
|
|
1037
|
-
"linear": [
|
|
1038
|
-
0,
|
|
1039
|
-
0,
|
|
1040
|
-
1,
|
|
1041
|
-
1
|
|
1042
|
-
],
|
|
1043
|
-
"in": [
|
|
1044
|
-
0.4,
|
|
1045
|
-
0,
|
|
1046
|
-
1,
|
|
1047
|
-
1
|
|
1048
|
-
],
|
|
1049
|
-
"out": [
|
|
1050
|
-
0,
|
|
1051
|
-
0,
|
|
1052
|
-
0.2,
|
|
1053
|
-
1
|
|
1054
|
-
],
|
|
1055
|
-
"in-out": [
|
|
1056
|
-
0.4,
|
|
1057
|
-
0,
|
|
1058
|
-
0.2,
|
|
1059
|
-
1
|
|
1060
|
-
],
|
|
1061
|
-
"out-expo": [
|
|
1062
|
-
0.16,
|
|
1063
|
-
1,
|
|
1064
|
-
0.3,
|
|
1065
|
-
1
|
|
1066
|
-
],
|
|
1067
|
-
"spring": [
|
|
1068
|
-
0.34,
|
|
1069
|
-
1.56,
|
|
1070
|
-
0.64,
|
|
1071
|
-
1
|
|
1072
|
-
]
|
|
1073
|
-
},
|
|
1074
1029
|
"spring": {
|
|
1075
1030
|
"spatial": {
|
|
1076
1031
|
"fast": {
|
|
@@ -670,21 +670,6 @@ export declare const tokens: {
|
|
|
670
670
|
readonly lift: "-6px";
|
|
671
671
|
readonly "button-lift": "-2px";
|
|
672
672
|
};
|
|
673
|
-
readonly duration: {
|
|
674
|
-
readonly instant: "0ms";
|
|
675
|
-
readonly fast: "150ms";
|
|
676
|
-
readonly normal: "200ms";
|
|
677
|
-
readonly slow: "300ms";
|
|
678
|
-
readonly slower: "500ms";
|
|
679
|
-
};
|
|
680
|
-
readonly ease: {
|
|
681
|
-
readonly linear: "cubic-bezier(0, 0, 1, 1)";
|
|
682
|
-
readonly in: "cubic-bezier(0.4, 0, 1, 1)";
|
|
683
|
-
readonly out: "cubic-bezier(0, 0, 0.2, 1)";
|
|
684
|
-
readonly "in-out": "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
685
|
-
readonly "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
686
|
-
readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
687
|
-
};
|
|
688
673
|
readonly radius: {
|
|
689
674
|
readonly none: "0px";
|
|
690
675
|
readonly xs: "2px";
|
|
@@ -672,21 +672,6 @@ export const tokens = {
|
|
|
672
672
|
"lift": "-6px",
|
|
673
673
|
"button-lift": "-2px"
|
|
674
674
|
},
|
|
675
|
-
"duration": {
|
|
676
|
-
"instant": "0ms",
|
|
677
|
-
"fast": "150ms",
|
|
678
|
-
"normal": "200ms",
|
|
679
|
-
"slow": "300ms",
|
|
680
|
-
"slower": "500ms"
|
|
681
|
-
},
|
|
682
|
-
"ease": {
|
|
683
|
-
"linear": "cubic-bezier(0, 0, 1, 1)",
|
|
684
|
-
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
685
|
-
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
686
|
-
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
687
|
-
"out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
688
|
-
"spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
689
|
-
},
|
|
690
675
|
"radius": {
|
|
691
676
|
"none": "0px",
|
|
692
677
|
"xs": "2px",
|
package/dist/json/tokens.json
CHANGED
|
@@ -578,17 +578,6 @@
|
|
|
578
578
|
"marketing-accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
|
|
579
579
|
"marketing-lift": "-6px",
|
|
580
580
|
"marketing-button-lift": "-2px",
|
|
581
|
-
"duration-instant": "0ms",
|
|
582
|
-
"duration-fast": "150ms",
|
|
583
|
-
"duration-normal": "200ms",
|
|
584
|
-
"duration-slow": "300ms",
|
|
585
|
-
"duration-slower": "500ms",
|
|
586
|
-
"ease-linear": "cubic-bezier(0, 0, 1, 1)",
|
|
587
|
-
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
588
|
-
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
589
|
-
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
590
|
-
"ease-out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
591
|
-
"ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
592
581
|
"radius-none": "0px",
|
|
593
582
|
"radius-xs": "2px",
|
|
594
583
|
"radius-sm": "4px",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, a Tailwind 4 theme, Figma variables and native (React Native, SwiftUI, Compose) tokens.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|