@sage/design-tokens 2.13.0 → 2.16.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 (16) hide show
  1. package/android/base.xml +36 -13
  2. package/css/base.css +36 -13
  3. package/data/tokens.json +277 -44
  4. package/docs/tokens/base/colors/index.html +270 -102
  5. package/docs/tokens/base/index.html +585 -102
  6. package/docs/tokens/base/typography/index.html +315 -0
  7. package/docs/tokens/index.html +585 -102
  8. package/ios/base.h +36 -13
  9. package/js/base/common.d.ts +35 -12
  10. package/js/base/common.js +36 -13
  11. package/js/base/es6.d.ts +35 -12
  12. package/js/base/es6.js +35 -12
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.16.0.tgz +0 -0
  15. package/scss/base.scss +36 -13
  16. package/sage-design-tokens-2.13.0.tgz +0 -0
package/docs/tokens/base/typography/index.html CHANGED
@@ -474,6 +474,27 @@
474
474
 
475
475
  </td>
476
476
  </tr>
477
+ <tr>
478
+ <td class="with-icons is-vcentered"
479
+ id="base-typographyCardParagraphM"
480
+ title="theme: base; category: typography; group: card; name: paragraph; variant: m; ">
481
+ typographyCardParagraphM
482
+ <a href="#base-typographyCardParagraphM"
483
+ title="permalink"
484
+ class="permalink">
485
+ 🔗
486
+ </a>
487
+ </td>
488
+ <td class="is-vcentered">
489
+ <pre>400 14px/150% Sage UI</pre>
490
+ </td>
491
+ <td class="is-vcentered">
492
+ <div class="table__typography-preview">
493
+ n/a
494
+ </div>
495
+
496
+ </td>
497
+ </tr>
477
498
  <tr>
478
499
  <td class="with-icons is-vcentered"
479
500
  id="base-typographyCardSelectTitleM"
@@ -600,6 +621,69 @@
600
621
 
601
622
  </td>
602
623
  </tr>
624
+ <tr>
625
+ <td class="with-icons is-vcentered"
626
+ id="base-typographyDialogTitleXs"
627
+ title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
628
+ typographyDialogTitleXs
629
+ <a href="#base-typographyDialogTitleXs"
630
+ title="permalink"
631
+ class="permalink">
632
+ 🔗
633
+ </a>
634
+ </td>
635
+ <td class="is-vcentered">
636
+ <pre>700 24px/125% Sage UI</pre>
637
+ </td>
638
+ <td class="is-vcentered">
639
+ <div class="table__typography-preview">
640
+ n/a
641
+ </div>
642
+
643
+ </td>
644
+ </tr>
645
+ <tr>
646
+ <td class="with-icons is-vcentered"
647
+ id="base-typographyDialogTitleS"
648
+ title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
649
+ typographyDialogTitleS
650
+ <a href="#base-typographyDialogTitleS"
651
+ title="permalink"
652
+ class="permalink">
653
+ 🔗
654
+ </a>
655
+ </td>
656
+ <td class="is-vcentered">
657
+ <pre>700 24px/125% Sage UI</pre>
658
+ </td>
659
+ <td class="is-vcentered">
660
+ <div class="table__typography-preview">
661
+ n/a
662
+ </div>
663
+
664
+ </td>
665
+ </tr>
666
+ <tr>
667
+ <td class="with-icons is-vcentered"
668
+ id="base-typographyDialogTitleMs"
669
+ title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
670
+ typographyDialogTitleMs
671
+ <a href="#base-typographyDialogTitleMs"
672
+ title="permalink"
673
+ class="permalink">
674
+ 🔗
675
+ </a>
676
+ </td>
677
+ <td class="is-vcentered">
678
+ <pre>700 24px/125% Sage UI</pre>
679
+ </td>
680
+ <td class="is-vcentered">
681
+ <div class="table__typography-preview">
682
+ n/a
683
+ </div>
684
+
685
+ </td>
686
+ </tr>
603
687
  <tr>
604
688
  <td class="with-icons is-vcentered"
605
689
  id="base-typographyDialogTitleM"
@@ -621,6 +705,153 @@
621
705
 
622
706
  </td>
623
707
  </tr>
708
+ <tr>
709
+ <td class="with-icons is-vcentered"
710
+ id="base-typographyDialogTitleMl"
711
+ title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
712
+ typographyDialogTitleMl
713
+ <a href="#base-typographyDialogTitleMl"
714
+ title="permalink"
715
+ class="permalink">
716
+ 🔗
717
+ </a>
718
+ </td>
719
+ <td class="is-vcentered">
720
+ <pre>700 24px/125% Sage UI</pre>
721
+ </td>
722
+ <td class="is-vcentered">
723
+ <div class="table__typography-preview">
724
+ n/a
725
+ </div>
726
+
727
+ </td>
728
+ </tr>
729
+ <tr>
730
+ <td class="with-icons is-vcentered"
731
+ id="base-typographyDialogTitleL"
732
+ title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
733
+ typographyDialogTitleL
734
+ <a href="#base-typographyDialogTitleL"
735
+ title="permalink"
736
+ class="permalink">
737
+ 🔗
738
+ </a>
739
+ </td>
740
+ <td class="is-vcentered">
741
+ <pre>700 24px/125% Sage UI</pre>
742
+ </td>
743
+ <td class="is-vcentered">
744
+ <div class="table__typography-preview">
745
+ n/a
746
+ </div>
747
+
748
+ </td>
749
+ </tr>
750
+ <tr>
751
+ <td class="with-icons is-vcentered"
752
+ id="base-typographyDialogTitleXl"
753
+ title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
754
+ typographyDialogTitleXl
755
+ <a href="#base-typographyDialogTitleXl"
756
+ title="permalink"
757
+ class="permalink">
758
+ 🔗
759
+ </a>
760
+ </td>
761
+ <td class="is-vcentered">
762
+ <pre>700 24px/125% Sage UI</pre>
763
+ </td>
764
+ <td class="is-vcentered">
765
+ <div class="table__typography-preview">
766
+ n/a
767
+ </div>
768
+
769
+ </td>
770
+ </tr>
771
+ <tr>
772
+ <td class="with-icons is-vcentered"
773
+ id="base-typographyDialogTitleXxl"
774
+ title="theme: base; category: typography; group: dialog; name: title; variant: xxl; ">
775
+ typographyDialogTitleXxl
776
+ <a href="#base-typographyDialogTitleXxl"
777
+ title="permalink"
778
+ class="permalink">
779
+ 🔗
780
+ </a>
781
+ </td>
782
+ <td class="is-vcentered">
783
+ <pre>700 24px/125% Sage UI</pre>
784
+ </td>
785
+ <td class="is-vcentered">
786
+ <div class="table__typography-preview">
787
+ n/a
788
+ </div>
789
+
790
+ </td>
791
+ </tr>
792
+ <tr>
793
+ <td class="with-icons is-vcentered"
794
+ id="base-typographyDialogParagraphXs"
795
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
796
+ typographyDialogParagraphXs
797
+ <a href="#base-typographyDialogParagraphXs"
798
+ title="permalink"
799
+ class="permalink">
800
+ 🔗
801
+ </a>
802
+ </td>
803
+ <td class="is-vcentered">
804
+ <pre>400 14px/150% Sage UI</pre>
805
+ </td>
806
+ <td class="is-vcentered">
807
+ <div class="table__typography-preview">
808
+ n/a
809
+ </div>
810
+
811
+ </td>
812
+ </tr>
813
+ <tr>
814
+ <td class="with-icons is-vcentered"
815
+ id="base-typographyDialogParagraphS"
816
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
817
+ typographyDialogParagraphS
818
+ <a href="#base-typographyDialogParagraphS"
819
+ title="permalink"
820
+ class="permalink">
821
+ 🔗
822
+ </a>
823
+ </td>
824
+ <td class="is-vcentered">
825
+ <pre>400 14px/150% Sage UI</pre>
826
+ </td>
827
+ <td class="is-vcentered">
828
+ <div class="table__typography-preview">
829
+ n/a
830
+ </div>
831
+
832
+ </td>
833
+ </tr>
834
+ <tr>
835
+ <td class="with-icons is-vcentered"
836
+ id="base-typographyDialogParagraphMs"
837
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
838
+ typographyDialogParagraphMs
839
+ <a href="#base-typographyDialogParagraphMs"
840
+ title="permalink"
841
+ class="permalink">
842
+ 🔗
843
+ </a>
844
+ </td>
845
+ <td class="is-vcentered">
846
+ <pre>400 14px/150% Sage UI</pre>
847
+ </td>
848
+ <td class="is-vcentered">
849
+ <div class="table__typography-preview">
850
+ n/a
851
+ </div>
852
+
853
+ </td>
854
+ </tr>
624
855
  <tr>
625
856
  <td class="with-icons is-vcentered"
626
857
  id="base-typographyDialogParagraphM"
@@ -642,6 +873,90 @@
642
873
 
643
874
  </td>
644
875
  </tr>
876
+ <tr>
877
+ <td class="with-icons is-vcentered"
878
+ id="base-typographyDialogParagraphMl"
879
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
880
+ typographyDialogParagraphMl
881
+ <a href="#base-typographyDialogParagraphMl"
882
+ title="permalink"
883
+ class="permalink">
884
+ 🔗
885
+ </a>
886
+ </td>
887
+ <td class="is-vcentered">
888
+ <pre>400 14px/150% Sage UI</pre>
889
+ </td>
890
+ <td class="is-vcentered">
891
+ <div class="table__typography-preview">
892
+ n/a
893
+ </div>
894
+
895
+ </td>
896
+ </tr>
897
+ <tr>
898
+ <td class="with-icons is-vcentered"
899
+ id="base-typographyDialogParagraphL"
900
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
901
+ typographyDialogParagraphL
902
+ <a href="#base-typographyDialogParagraphL"
903
+ title="permalink"
904
+ class="permalink">
905
+ 🔗
906
+ </a>
907
+ </td>
908
+ <td class="is-vcentered">
909
+ <pre>400 14px/150% Sage UI</pre>
910
+ </td>
911
+ <td class="is-vcentered">
912
+ <div class="table__typography-preview">
913
+ n/a
914
+ </div>
915
+
916
+ </td>
917
+ </tr>
918
+ <tr>
919
+ <td class="with-icons is-vcentered"
920
+ id="base-typographyDialogParagraphXl"
921
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
922
+ typographyDialogParagraphXl
923
+ <a href="#base-typographyDialogParagraphXl"
924
+ title="permalink"
925
+ class="permalink">
926
+ 🔗
927
+ </a>
928
+ </td>
929
+ <td class="is-vcentered">
930
+ <pre>400 14px/150% Sage UI</pre>
931
+ </td>
932
+ <td class="is-vcentered">
933
+ <div class="table__typography-preview">
934
+ n/a
935
+ </div>
936
+
937
+ </td>
938
+ </tr>
939
+ <tr>
940
+ <td class="with-icons is-vcentered"
941
+ id="base-typographyDialogParagraphXxl"
942
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xxl; ">
943
+ typographyDialogParagraphXxl
944
+ <a href="#base-typographyDialogParagraphXxl"
945
+ title="permalink"
946
+ class="permalink">
947
+ 🔗
948
+ </a>
949
+ </td>
950
+ <td class="is-vcentered">
951
+ <pre>400 14px/150% Sage UI</pre>
952
+ </td>
953
+ <td class="is-vcentered">
954
+ <div class="table__typography-preview">
955
+ n/a
956
+ </div>
957
+
958
+ </td>
959
+ </tr>
645
960
  <tr>
646
961
  <td class="with-icons is-vcentered"
647
962
  id="base-typographyDrawerTitleM"