@sage/design-tokens 2.0.0 → 2.1.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 (22) hide show
  1. package/README.md +0 -1
  2. package/android/base.xml +17 -13
  3. package/android/no-theme.xml +1 -1
  4. package/css/base.css +17 -13
  5. package/css/no-theme.css +1 -1
  6. package/data/tokens.json +187 -147
  7. package/docs/tokens/base/colors/index.html +84 -0
  8. package/docs/tokens/base/index.html +325 -241
  9. package/docs/tokens/base/typography/index.html +241 -241
  10. package/docs/tokens/index.html +325 -241
  11. package/ios/base.h +17 -13
  12. package/ios/no-theme.h +1 -1
  13. package/js/base/common.d.ts +16 -12
  14. package/js/base/common.js +17 -13
  15. package/js/base/es6.d.ts +16 -12
  16. package/js/base/es6.js +16 -12
  17. package/js/no-theme/common.js +1 -1
  18. package/package.json +1 -1
  19. package/sage-design-tokens-2.1.0.tgz +0 -0
  20. package/scss/base.scss +17 -13
  21. package/scss/no-theme.scss +1 -1
  22. package/sage-design-tokens-2.0.0.tgz +0 -0
package/docs/tokens/base/typography/index.html CHANGED
@@ -674,69 +674,6 @@
674
674
 
675
675
  </td>
676
676
  </tr>
677
- <tr>
678
- <td class="with-icons is-vcentered"
679
- id="base-typographyDialogTitleXs"
680
- title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
681
- typographyDialogTitleXs
682
- <a href="#base-typographyDialogTitleXs"
683
- title="permalink"
684
- class="permalink">
685
- 🔗
686
- </a>
687
- </td>
688
- <td class="is-vcentered">
689
- <pre>700 24px/125% Sage UI</pre>
690
- </td>
691
- <td class="is-vcentered">
692
- <div class="table__typography-preview">
693
- n/a
694
- </div>
695
-
696
- </td>
697
- </tr>
698
- <tr>
699
- <td class="with-icons is-vcentered"
700
- id="base-typographyDialogTitleS"
701
- title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
702
- typographyDialogTitleS
703
- <a href="#base-typographyDialogTitleS"
704
- title="permalink"
705
- class="permalink">
706
- 🔗
707
- </a>
708
- </td>
709
- <td class="is-vcentered">
710
- <pre>700 24px/125% Sage UI</pre>
711
- </td>
712
- <td class="is-vcentered">
713
- <div class="table__typography-preview">
714
- n/a
715
- </div>
716
-
717
- </td>
718
- </tr>
719
- <tr>
720
- <td class="with-icons is-vcentered"
721
- id="base-typographyDialogTitleMs"
722
- title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
723
- typographyDialogTitleMs
724
- <a href="#base-typographyDialogTitleMs"
725
- title="permalink"
726
- class="permalink">
727
- 🔗
728
- </a>
729
- </td>
730
- <td class="is-vcentered">
731
- <pre>700 24px/125% Sage UI</pre>
732
- </td>
733
- <td class="is-vcentered">
734
- <div class="table__typography-preview">
735
- n/a
736
- </div>
737
-
738
- </td>
739
- </tr>
740
677
  <tr>
741
678
  <td class="with-icons is-vcentered"
742
679
  id="base-typographyDialogTitleM"
@@ -758,132 +695,6 @@
758
695
 
759
696
  </td>
760
697
  </tr>
761
- <tr>
762
- <td class="with-icons is-vcentered"
763
- id="base-typographyDialogTitleMl"
764
- title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
765
- typographyDialogTitleMl
766
- <a href="#base-typographyDialogTitleMl"
767
- title="permalink"
768
- class="permalink">
769
- 🔗
770
- </a>
771
- </td>
772
- <td class="is-vcentered">
773
- <pre>700 24px/125% Sage UI</pre>
774
- </td>
775
- <td class="is-vcentered">
776
- <div class="table__typography-preview">
777
- n/a
778
- </div>
779
-
780
- </td>
781
- </tr>
782
- <tr>
783
- <td class="with-icons is-vcentered"
784
- id="base-typographyDialogTitleL"
785
- title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
786
- typographyDialogTitleL
787
- <a href="#base-typographyDialogTitleL"
788
- title="permalink"
789
- class="permalink">
790
- 🔗
791
- </a>
792
- </td>
793
- <td class="is-vcentered">
794
- <pre>700 24px/125% Sage UI</pre>
795
- </td>
796
- <td class="is-vcentered">
797
- <div class="table__typography-preview">
798
- n/a
799
- </div>
800
-
801
- </td>
802
- </tr>
803
- <tr>
804
- <td class="with-icons is-vcentered"
805
- id="base-typographyDialogTitleXl"
806
- title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
807
- typographyDialogTitleXl
808
- <a href="#base-typographyDialogTitleXl"
809
- title="permalink"
810
- class="permalink">
811
- 🔗
812
- </a>
813
- </td>
814
- <td class="is-vcentered">
815
- <pre>700 24px/125% Sage UI</pre>
816
- </td>
817
- <td class="is-vcentered">
818
- <div class="table__typography-preview">
819
- n/a
820
- </div>
821
-
822
- </td>
823
- </tr>
824
- <tr>
825
- <td class="with-icons is-vcentered"
826
- id="base-typographyDialogParagraphXs"
827
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
828
- typographyDialogParagraphXs
829
- <a href="#base-typographyDialogParagraphXs"
830
- title="permalink"
831
- class="permalink">
832
- 🔗
833
- </a>
834
- </td>
835
- <td class="is-vcentered">
836
- <pre>400 14px/150% Sage UI</pre>
837
- </td>
838
- <td class="is-vcentered">
839
- <div class="table__typography-preview">
840
- n/a
841
- </div>
842
-
843
- </td>
844
- </tr>
845
- <tr>
846
- <td class="with-icons is-vcentered"
847
- id="base-typographyDialogParagraphS"
848
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
849
- typographyDialogParagraphS
850
- <a href="#base-typographyDialogParagraphS"
851
- title="permalink"
852
- class="permalink">
853
- 🔗
854
- </a>
855
- </td>
856
- <td class="is-vcentered">
857
- <pre>400 14px/150% Sage UI</pre>
858
- </td>
859
- <td class="is-vcentered">
860
- <div class="table__typography-preview">
861
- n/a
862
- </div>
863
-
864
- </td>
865
- </tr>
866
- <tr>
867
- <td class="with-icons is-vcentered"
868
- id="base-typographyDialogParagraphMs"
869
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
870
- typographyDialogParagraphMs
871
- <a href="#base-typographyDialogParagraphMs"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>400 14px/150% Sage UI</pre>
879
- </td>
880
- <td class="is-vcentered">
881
- <div class="table__typography-preview">
882
- n/a
883
- </div>
884
-
885
- </td>
886
- </tr>
887
698
  <tr>
888
699
  <td class="with-icons is-vcentered"
889
700
  id="base-typographyDialogParagraphM"
@@ -907,59 +718,17 @@
907
718
  </tr>
908
719
  <tr>
909
720
  <td class="with-icons is-vcentered"
910
- id="base-typographyDialogParagraphMl"
911
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
912
- typographyDialogParagraphMl
913
- <a href="#base-typographyDialogParagraphMl"
914
- title="permalink"
915
- class="permalink">
916
- 🔗
917
- </a>
918
- </td>
919
- <td class="is-vcentered">
920
- <pre>400 14px/150% Sage UI</pre>
921
- </td>
922
- <td class="is-vcentered">
923
- <div class="table__typography-preview">
924
- n/a
925
- </div>
926
-
927
- </td>
928
- </tr>
929
- <tr>
930
- <td class="with-icons is-vcentered"
931
- id="base-typographyDialogParagraphL"
932
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
933
- typographyDialogParagraphL
934
- <a href="#base-typographyDialogParagraphL"
935
- title="permalink"
936
- class="permalink">
937
- 🔗
938
- </a>
939
- </td>
940
- <td class="is-vcentered">
941
- <pre>400 14px/150% Sage UI</pre>
942
- </td>
943
- <td class="is-vcentered">
944
- <div class="table__typography-preview">
945
- n/a
946
- </div>
947
-
948
- </td>
949
- </tr>
950
- <tr>
951
- <td class="with-icons is-vcentered"
952
- id="base-typographyDialogParagraphXl"
953
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
954
- typographyDialogParagraphXl
955
- <a href="#base-typographyDialogParagraphXl"
721
+ id="base-typographyDrawerTitleM"
722
+ title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
723
+ typographyDrawerTitleM
724
+ <a href="#base-typographyDrawerTitleM"
956
725
  title="permalink"
957
726
  class="permalink">
958
727
  🔗
959
728
  </a>
960
729
  </td>
961
730
  <td class="is-vcentered">
962
- <pre>400 14px/150% Sage UI</pre>
731
+ <pre>700 22px/125% Sage UI</pre>
963
732
  </td>
964
733
  <td class="is-vcentered">
965
734
  <div class="table__typography-preview">
@@ -970,17 +739,17 @@
970
739
  </tr>
971
740
  <tr>
972
741
  <td class="with-icons is-vcentered"
973
- id="base-typographyDrawerTitleM"
974
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
975
- typographyDrawerTitleM
976
- <a href="#base-typographyDrawerTitleM"
742
+ id="base-typographyDrawerParagraphM"
743
+ title="theme: base; category: typography; group: drawer; name: paragraph; variant: m; ">
744
+ typographyDrawerParagraphM
745
+ <a href="#base-typographyDrawerParagraphM"
977
746
  title="permalink"
978
747
  class="permalink">
979
748
  🔗
980
749
  </a>
981
750
  </td>
982
751
  <td class="is-vcentered">
983
- <pre>700 22px/125% Sage UI</pre>
752
+ <pre>0 none</pre>
984
753
  </td>
985
754
  <td class="is-vcentered">
986
755
  <div class="table__typography-preview">
@@ -1703,6 +1472,27 @@
1703
1472
 
1704
1473
  </td>
1705
1474
  </tr>
1475
+ <tr>
1476
+ <td class="with-icons is-vcentered"
1477
+ id="base-typographyLinkTextS"
1478
+ title="theme: base; category: typography; group: link; name: text; variant: s; ">
1479
+ typographyLinkTextS
1480
+ <a href="#base-typographyLinkTextS"
1481
+ title="permalink"
1482
+ class="permalink">
1483
+ 🔗
1484
+ </a>
1485
+ </td>
1486
+ <td class="is-vcentered">
1487
+ <pre>400 12px/150% Sage UI</pre>
1488
+ </td>
1489
+ <td class="is-vcentered">
1490
+ <div class="table__typography-preview">
1491
+ n/a
1492
+ </div>
1493
+
1494
+ </td>
1495
+ </tr>
1706
1496
  <tr>
1707
1497
  <td class="with-icons is-vcentered"
1708
1498
  id="base-typographyLinkTextM"
@@ -1892,6 +1682,27 @@
1892
1682
 
1893
1683
  </td>
1894
1684
  </tr>
1685
+ <tr>
1686
+ <td class="with-icons is-vcentered"
1687
+ id="base-typographyTileParagraphM"
1688
+ title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
1689
+ typographyTileParagraphM
1690
+ <a href="#base-typographyTileParagraphM"
1691
+ title="permalink"
1692
+ class="permalink">
1693
+ 🔗
1694
+ </a>
1695
+ </td>
1696
+ <td class="is-vcentered">
1697
+ <pre>400 14px/150% Sage UI</pre>
1698
+ </td>
1699
+ <td class="is-vcentered">
1700
+ <div class="table__typography-preview">
1701
+ n/a
1702
+ </div>
1703
+
1704
+ </td>
1705
+ </tr>
1895
1706
  <tr>
1896
1707
  <td class="with-icons is-vcentered"
1897
1708
  id="base-typographyPillLabelS"
@@ -2564,6 +2375,27 @@
2564
2375
 
2565
2376
  </td>
2566
2377
  </tr>
2378
+ <tr>
2379
+ <td class="with-icons is-vcentered"
2380
+ id="base-typographySidebarParagraphM"
2381
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: m; ">
2382
+ typographySidebarParagraphM
2383
+ <a href="#base-typographySidebarParagraphM"
2384
+ title="permalink"
2385
+ class="permalink">
2386
+ 🔗
2387
+ </a>
2388
+ </td>
2389
+ <td class="is-vcentered">
2390
+ <pre>0 none</pre>
2391
+ </td>
2392
+ <td class="is-vcentered">
2393
+ <div class="table__typography-preview">
2394
+ n/a
2395
+ </div>
2396
+
2397
+ </td>
2398
+ </tr>
2567
2399
  <tr>
2568
2400
  <td class="with-icons is-vcentered"
2569
2401
  id="base-typographyStepFlowCompleteLabelM"
@@ -2669,6 +2501,48 @@
2669
2501
 
2670
2502
  </td>
2671
2503
  </tr>
2504
+ <tr>
2505
+ <td class="with-icons is-vcentered"
2506
+ id="base-typographyTableHeaderTextXs"
2507
+ title="theme: base; category: typography; group: table; name: headerText; variant: xs; ">
2508
+ typographyTableHeaderTextXs
2509
+ <a href="#base-typographyTableHeaderTextXs"
2510
+ title="permalink"
2511
+ class="permalink">
2512
+ 🔗
2513
+ </a>
2514
+ </td>
2515
+ <td class="is-vcentered">
2516
+ <pre>500 13px/150% Sage UI</pre>
2517
+ </td>
2518
+ <td class="is-vcentered">
2519
+ <div class="table__typography-preview">
2520
+ n/a
2521
+ </div>
2522
+
2523
+ </td>
2524
+ </tr>
2525
+ <tr>
2526
+ <td class="with-icons is-vcentered"
2527
+ id="base-typographyTableHeaderTextS"
2528
+ title="theme: base; category: typography; group: table; name: headerText; variant: s; ">
2529
+ typographyTableHeaderTextS
2530
+ <a href="#base-typographyTableHeaderTextS"
2531
+ title="permalink"
2532
+ class="permalink">
2533
+ 🔗
2534
+ </a>
2535
+ </td>
2536
+ <td class="is-vcentered">
2537
+ <pre>500 14px/150% Sage UI</pre>
2538
+ </td>
2539
+ <td class="is-vcentered">
2540
+ <div class="table__typography-preview">
2541
+ n/a
2542
+ </div>
2543
+
2544
+ </td>
2545
+ </tr>
2672
2546
  <tr>
2673
2547
  <td class="with-icons is-vcentered"
2674
2548
  id="base-typographyTableHeaderTextM"
@@ -2690,6 +2564,90 @@
2690
2564
 
2691
2565
  </td>
2692
2566
  </tr>
2567
+ <tr>
2568
+ <td class="with-icons is-vcentered"
2569
+ id="base-typographyTableHeaderTextL"
2570
+ title="theme: base; category: typography; group: table; name: headerText; variant: l; ">
2571
+ typographyTableHeaderTextL
2572
+ <a href="#base-typographyTableHeaderTextL"
2573
+ title="permalink"
2574
+ class="permalink">
2575
+ 🔗
2576
+ </a>
2577
+ </td>
2578
+ <td class="is-vcentered">
2579
+ <pre>500 16px/150% Sage UI</pre>
2580
+ </td>
2581
+ <td class="is-vcentered">
2582
+ <div class="table__typography-preview">
2583
+ n/a
2584
+ </div>
2585
+
2586
+ </td>
2587
+ </tr>
2588
+ <tr>
2589
+ <td class="with-icons is-vcentered"
2590
+ id="base-typographyTableHeaderTextXl"
2591
+ title="theme: base; category: typography; group: table; name: headerText; variant: xl; ">
2592
+ typographyTableHeaderTextXl
2593
+ <a href="#base-typographyTableHeaderTextXl"
2594
+ title="permalink"
2595
+ class="permalink">
2596
+ 🔗
2597
+ </a>
2598
+ </td>
2599
+ <td class="is-vcentered">
2600
+ <pre>500 16px/150% Sage UI</pre>
2601
+ </td>
2602
+ <td class="is-vcentered">
2603
+ <div class="table__typography-preview">
2604
+ n/a
2605
+ </div>
2606
+
2607
+ </td>
2608
+ </tr>
2609
+ <tr>
2610
+ <td class="with-icons is-vcentered"
2611
+ id="base-typographyTableCellTextXs"
2612
+ title="theme: base; category: typography; group: table; name: cellText; variant: xs; ">
2613
+ typographyTableCellTextXs
2614
+ <a href="#base-typographyTableCellTextXs"
2615
+ title="permalink"
2616
+ class="permalink">
2617
+ 🔗
2618
+ </a>
2619
+ </td>
2620
+ <td class="is-vcentered">
2621
+ <pre>400 13px/150% Sage UI</pre>
2622
+ </td>
2623
+ <td class="is-vcentered">
2624
+ <div class="table__typography-preview">
2625
+ n/a
2626
+ </div>
2627
+
2628
+ </td>
2629
+ </tr>
2630
+ <tr>
2631
+ <td class="with-icons is-vcentered"
2632
+ id="base-typographyTableCellTextS"
2633
+ title="theme: base; category: typography; group: table; name: cellText; variant: s; ">
2634
+ typographyTableCellTextS
2635
+ <a href="#base-typographyTableCellTextS"
2636
+ title="permalink"
2637
+ class="permalink">
2638
+ 🔗
2639
+ </a>
2640
+ </td>
2641
+ <td class="is-vcentered">
2642
+ <pre>400 14px/150% Sage UI</pre>
2643
+ </td>
2644
+ <td class="is-vcentered">
2645
+ <div class="table__typography-preview">
2646
+ n/a
2647
+ </div>
2648
+
2649
+ </td>
2650
+ </tr>
2693
2651
  <tr>
2694
2652
  <td class="with-icons is-vcentered"
2695
2653
  id="base-typographyTableCellTextM"
@@ -2711,6 +2669,48 @@
2711
2669
 
2712
2670
  </td>
2713
2671
  </tr>
2672
+ <tr>
2673
+ <td class="with-icons is-vcentered"
2674
+ id="base-typographyTableCellTextL"
2675
+ title="theme: base; category: typography; group: table; name: cellText; variant: l; ">
2676
+ typographyTableCellTextL
2677
+ <a href="#base-typographyTableCellTextL"
2678
+ title="permalink"
2679
+ class="permalink">
2680
+ 🔗
2681
+ </a>
2682
+ </td>
2683
+ <td class="is-vcentered">
2684
+ <pre>400 16px/150% Sage UI</pre>
2685
+ </td>
2686
+ <td class="is-vcentered">
2687
+ <div class="table__typography-preview">
2688
+ n/a
2689
+ </div>
2690
+
2691
+ </td>
2692
+ </tr>
2693
+ <tr>
2694
+ <td class="with-icons is-vcentered"
2695
+ id="base-typographyTableCellTextXl"
2696
+ title="theme: base; category: typography; group: table; name: cellText; variant: xl; ">
2697
+ typographyTableCellTextXl
2698
+ <a href="#base-typographyTableCellTextXl"
2699
+ title="permalink"
2700
+ class="permalink">
2701
+ 🔗
2702
+ </a>
2703
+ </td>
2704
+ <td class="is-vcentered">
2705
+ <pre>400 16px/150% Sage UI</pre>
2706
+ </td>
2707
+ <td class="is-vcentered">
2708
+ <div class="table__typography-preview">
2709
+ n/a
2710
+ </div>
2711
+
2712
+ </td>
2713
+ </tr>
2714
2714
  <tr>
2715
2715
  <td class="with-icons is-vcentered"
2716
2716
  id="base-typographyTooltipTextM"