@sage/design-tokens 2.13.0 → 2.14.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 (15) hide show
  1. package/android/base.xml +15 -1
  2. package/css/base.css +15 -1
  3. package/data/tokens.json +168 -0
  4. package/docs/tokens/base/index.html +294 -0
  5. package/docs/tokens/base/typography/index.html +294 -0
  6. package/docs/tokens/index.html +294 -0
  7. package/ios/base.h +15 -1
  8. package/js/base/common.d.ts +14 -0
  9. package/js/base/common.js +15 -1
  10. package/js/base/es6.d.ts +14 -0
  11. package/js/base/es6.js +14 -0
  12. package/package.json +1 -1
  13. package/sage-design-tokens-2.14.0.tgz +0 -0
  14. package/scss/base.scss +15 -1
  15. package/sage-design-tokens-2.13.0.tgz +0 -0
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Mon, 04 Apr 2022 12:43:17 GMT
5
+ Generated on Tue, 05 Apr 2022 09:36:33 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -299,8 +299,22 @@
299
299
  <string name="typographyDatePickerCalendarDateM">Bold 14px/150% Sage UI</string>
300
300
  <string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
301
301
  <string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
302
+ <string name="typographyDialogTitleXs">Bold 24px/125% Sage UI</string>
303
+ <string name="typographyDialogTitleS">Bold 24px/125% Sage UI</string>
304
+ <string name="typographyDialogTitleMs">Bold 24px/125% Sage UI</string>
302
305
  <string name="typographyDialogTitleM">Bold 24px/125% Sage UI</string>
306
+ <string name="typographyDialogTitleMl">Bold 24px/125% Sage UI</string>
307
+ <string name="typographyDialogTitleL">Bold 24px/125% Sage UI</string>
308
+ <string name="typographyDialogTitleXl">Bold 24px/125% Sage UI</string>
309
+ <string name="typographyDialogTitleXxl">Bold 24px/125% Sage UI</string>
310
+ <string name="typographyDialogParagraphXs">Regular 14px/150% Sage UI</string>
311
+ <string name="typographyDialogParagraphS">Regular 14px/150% Sage UI</string>
312
+ <string name="typographyDialogParagraphMs">Regular 14px/150% Sage UI</string>
303
313
  <string name="typographyDialogParagraphM">Regular 14px/150% Sage UI</string>
314
+ <string name="typographyDialogParagraphMl">Regular 14px/150% Sage UI</string>
315
+ <string name="typographyDialogParagraphL">Regular 14px/150% Sage UI</string>
316
+ <string name="typographyDialogParagraphXl">Regular 14px/150% Sage UI</string>
317
+ <string name="typographyDialogParagraphXxl">Regular 14px/150% Sage UI</string>
304
318
  <string name="typographyDrawerTitleM">Bold 22px/125% Sage UI</string>
305
319
  <string name="typographyDrawerParagraphM">0 none</string>
306
320
  <string name="typographyFlashTextM">Regular 14px/150% Sage UI</string>
package/css/base.css CHANGED
@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
4
4
 
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 04 Apr 2022 12:43:17 GMT
7
+ * Generated on Tue, 05 Apr 2022 09:36:33 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -302,8 +302,22 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
302
302
  --typographyDatePickerCalendarDateM: 700 14px/150% Sage UI;
303
303
  --typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
304
304
  --typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
305
+ --typographyDialogTitleXs: 700 24px/125% Sage UI;
306
+ --typographyDialogTitleS: 700 24px/125% Sage UI;
307
+ --typographyDialogTitleMs: 700 24px/125% Sage UI;
305
308
  --typographyDialogTitleM: 700 24px/125% Sage UI;
309
+ --typographyDialogTitleMl: 700 24px/125% Sage UI;
310
+ --typographyDialogTitleL: 700 24px/125% Sage UI;
311
+ --typographyDialogTitleXl: 700 24px/125% Sage UI;
312
+ --typographyDialogTitleXxl: 700 24px/125% Sage UI;
313
+ --typographyDialogParagraphXs: 400 14px/150% Sage UI;
314
+ --typographyDialogParagraphS: 400 14px/150% Sage UI;
315
+ --typographyDialogParagraphMs: 400 14px/150% Sage UI;
306
316
  --typographyDialogParagraphM: 400 14px/150% Sage UI;
317
+ --typographyDialogParagraphMl: 400 14px/150% Sage UI;
318
+ --typographyDialogParagraphL: 400 14px/150% Sage UI;
319
+ --typographyDialogParagraphXl: 400 14px/150% Sage UI;
320
+ --typographyDialogParagraphXxl: 400 14px/150% Sage UI;
307
321
  --typographyDrawerTitleM: 700 22px/125% Sage UI;
308
322
  --typographyDrawerParagraphM: 0 none;
309
323
  --typographyFlashTextM: 400 14px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -1700,6 +1700,39 @@
1700
1700
  },
1701
1701
  "dialog": {
1702
1702
  "title": {
1703
+ "xs": {
1704
+ "value": {
1705
+ "fontFamily": "Sage UI",
1706
+ "fontWeight": "Bold",
1707
+ "lineHeight": "125%",
1708
+ "fontSize": "24px",
1709
+ "letterSpacing": "0%",
1710
+ "paragraphSpacing": "0px"
1711
+ },
1712
+ "type": "typography"
1713
+ },
1714
+ "s": {
1715
+ "value": {
1716
+ "fontFamily": "Sage UI",
1717
+ "fontWeight": "Bold",
1718
+ "lineHeight": "125%",
1719
+ "fontSize": "24px",
1720
+ "letterSpacing": "0%",
1721
+ "paragraphSpacing": "0px"
1722
+ },
1723
+ "type": "typography"
1724
+ },
1725
+ "ms": {
1726
+ "value": {
1727
+ "fontFamily": "Sage UI",
1728
+ "fontWeight": "Bold",
1729
+ "lineHeight": "125%",
1730
+ "fontSize": "24px",
1731
+ "letterSpacing": "0%",
1732
+ "paragraphSpacing": "0px"
1733
+ },
1734
+ "type": "typography"
1735
+ },
1703
1736
  "m": {
1704
1737
  "value": {
1705
1738
  "fontFamily": "Sage UI",
@@ -1710,9 +1743,92 @@
1710
1743
  "paragraphSpacing": "0px"
1711
1744
  },
1712
1745
  "type": "typography"
1746
+ },
1747
+ "ml": {
1748
+ "value": {
1749
+ "fontFamily": "Sage UI",
1750
+ "fontWeight": "Bold",
1751
+ "lineHeight": "125%",
1752
+ "fontSize": "24px",
1753
+ "letterSpacing": "0%",
1754
+ "paragraphSpacing": "0px"
1755
+ },
1756
+ "type": "typography"
1757
+ },
1758
+ "l": {
1759
+ "value": {
1760
+ "fontFamily": "Sage UI",
1761
+ "fontWeight": "Bold",
1762
+ "lineHeight": "125%",
1763
+ "fontSize": "24px",
1764
+ "letterSpacing": "0%",
1765
+ "paragraphSpacing": "0px"
1766
+ },
1767
+ "type": "typography"
1768
+ },
1769
+ "xl": {
1770
+ "value": {
1771
+ "fontFamily": "Sage UI",
1772
+ "fontWeight": "Bold",
1773
+ "lineHeight": "125%",
1774
+ "fontSize": "24px",
1775
+ "letterSpacing": "0%",
1776
+ "paragraphSpacing": "0px"
1777
+ },
1778
+ "type": "typography"
1779
+ },
1780
+ "xxl": {
1781
+ "value": {
1782
+ "fontFamily": "Sage UI",
1783
+ "fontWeight": "Bold",
1784
+ "lineHeight": "125%",
1785
+ "fontSize": "24px",
1786
+ "letterSpacing": "0%",
1787
+ "paragraphSpacing": "0px"
1788
+ },
1789
+ "type": "typography"
1713
1790
  }
1714
1791
  },
1715
1792
  "paragraph": {
1793
+ "xs": {
1794
+ "value": {
1795
+ "fontFamily": "Sage UI",
1796
+ "fontWeight": "Regular",
1797
+ "lineHeight": "150%",
1798
+ "fontSize": "14px",
1799
+ "letterSpacing": "0%",
1800
+ "paragraphSpacing": "0",
1801
+ "textDecoration": "none",
1802
+ "textCase": "none"
1803
+ },
1804
+ "type": "typography"
1805
+ },
1806
+ "s": {
1807
+ "value": {
1808
+ "fontFamily": "Sage UI",
1809
+ "fontWeight": "Regular",
1810
+ "lineHeight": "150%",
1811
+ "fontSize": "14px",
1812
+ "letterSpacing": "0%",
1813
+ "paragraphSpacing": "0",
1814
+ "textDecoration": "none",
1815
+ "textCase": "none"
1816
+ },
1817
+ "type": "typography"
1818
+ },
1819
+ "ms": {
1820
+ "value": {
1821
+ "fontFamily": "Sage UI",
1822
+ "fontWeight": "Regular",
1823
+ "lineHeight": "150%",
1824
+ "fontSize": "14px",
1825
+ "letterSpacing": "0%",
1826
+ "paragraphSpacing": "0",
1827
+ "textDecoration": "none",
1828
+ "textCase": "none"
1829
+ },
1830
+ "type": "typography"
1831
+ },
1716
1832
  "m": {
1717
1833
  "value": {
1718
1834
  "fontFamily": "Sage UI",
@@ -1725,6 +1841,58 @@
1725
1841
  "textCase": "none"
1726
1842
  },
1727
1843
  "type": "typography"
1844
+ },
1845
+ "ml": {
1846
+ "value": {
1847
+ "fontFamily": "Sage UI",
1848
+ "fontWeight": "Regular",
1849
+ "lineHeight": "150%",
1850
+ "fontSize": "14px",
1851
+ "letterSpacing": "0%",
1852
+ "paragraphSpacing": "0",
1853
+ "textDecoration": "none",
1854
+ "textCase": "none"
1855
+ },
1856
+ "type": "typography"
1857
+ },
1858
+ "l": {
1859
+ "value": {
1860
+ "fontFamily": "Sage UI",
1861
+ "fontWeight": "Regular",
1862
+ "lineHeight": "150%",
1863
+ "fontSize": "14px",
1864
+ "letterSpacing": "0%",
1865
+ "paragraphSpacing": "0",
1866
+ "textDecoration": "none",
1867
+ "textCase": "none"
1868
+ },
1869
+ "type": "typography"
1870
+ },
1871
+ "xl": {
1872
+ "value": {
1873
+ "fontFamily": "Sage UI",
1874
+ "fontWeight": "Regular",
1875
+ "lineHeight": "150%",
1876
+ "fontSize": "14px",
1877
+ "letterSpacing": "0%",
1878
+ "paragraphSpacing": "0",
1879
+ "textDecoration": "none",
1880
+ "textCase": "none"
1881
+ },
1882
+ "type": "typography"
1883
+ },
1884
+ "xxl": {
1885
+ "value": {
1886
+ "fontFamily": "Sage UI",
1887
+ "fontWeight": "Regular",
1888
+ "lineHeight": "150%",
1889
+ "fontSize": "14px",
1890
+ "letterSpacing": "0%",
1891
+ "paragraphSpacing": "0",
1892
+ "textDecoration": "none",
1893
+ "textCase": "none"
1894
+ },
1895
+ "type": "typography"
1728
1896
  }
1729
1897
  }
1730
1898
  },
package/docs/tokens/base/index.html CHANGED
@@ -6596,6 +6596,69 @@
6596
6596
 
6597
6597
  </td>
6598
6598
  </tr>
6599
+ <tr>
6600
+ <td class="with-icons is-vcentered"
6601
+ id="base-typographyDialogTitleXs"
6602
+ title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
6603
+ typographyDialogTitleXs
6604
+ <a href="#base-typographyDialogTitleXs"
6605
+ title="permalink"
6606
+ class="permalink">
6607
+ 🔗
6608
+ </a>
6609
+ </td>
6610
+ <td class="is-vcentered">
6611
+ <pre>700 24px/125% Sage UI</pre>
6612
+ </td>
6613
+ <td class="is-vcentered">
6614
+ <div class="table__typography-preview">
6615
+ n/a
6616
+ </div>
6617
+
6618
+ </td>
6619
+ </tr>
6620
+ <tr>
6621
+ <td class="with-icons is-vcentered"
6622
+ id="base-typographyDialogTitleS"
6623
+ title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
6624
+ typographyDialogTitleS
6625
+ <a href="#base-typographyDialogTitleS"
6626
+ title="permalink"
6627
+ class="permalink">
6628
+ 🔗
6629
+ </a>
6630
+ </td>
6631
+ <td class="is-vcentered">
6632
+ <pre>700 24px/125% Sage UI</pre>
6633
+ </td>
6634
+ <td class="is-vcentered">
6635
+ <div class="table__typography-preview">
6636
+ n/a
6637
+ </div>
6638
+
6639
+ </td>
6640
+ </tr>
6641
+ <tr>
6642
+ <td class="with-icons is-vcentered"
6643
+ id="base-typographyDialogTitleMs"
6644
+ title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
6645
+ typographyDialogTitleMs
6646
+ <a href="#base-typographyDialogTitleMs"
6647
+ title="permalink"
6648
+ class="permalink">
6649
+ 🔗
6650
+ </a>
6651
+ </td>
6652
+ <td class="is-vcentered">
6653
+ <pre>700 24px/125% Sage UI</pre>
6654
+ </td>
6655
+ <td class="is-vcentered">
6656
+ <div class="table__typography-preview">
6657
+ n/a
6658
+ </div>
6659
+
6660
+ </td>
6661
+ </tr>
6599
6662
  <tr>
6600
6663
  <td class="with-icons is-vcentered"
6601
6664
  id="base-typographyDialogTitleM"
@@ -6617,6 +6680,153 @@
6617
6680
 
6618
6681
  </td>
6619
6682
  </tr>
6683
+ <tr>
6684
+ <td class="with-icons is-vcentered"
6685
+ id="base-typographyDialogTitleMl"
6686
+ title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
6687
+ typographyDialogTitleMl
6688
+ <a href="#base-typographyDialogTitleMl"
6689
+ title="permalink"
6690
+ class="permalink">
6691
+ 🔗
6692
+ </a>
6693
+ </td>
6694
+ <td class="is-vcentered">
6695
+ <pre>700 24px/125% Sage UI</pre>
6696
+ </td>
6697
+ <td class="is-vcentered">
6698
+ <div class="table__typography-preview">
6699
+ n/a
6700
+ </div>
6701
+
6702
+ </td>
6703
+ </tr>
6704
+ <tr>
6705
+ <td class="with-icons is-vcentered"
6706
+ id="base-typographyDialogTitleL"
6707
+ title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
6708
+ typographyDialogTitleL
6709
+ <a href="#base-typographyDialogTitleL"
6710
+ title="permalink"
6711
+ class="permalink">
6712
+ 🔗
6713
+ </a>
6714
+ </td>
6715
+ <td class="is-vcentered">
6716
+ <pre>700 24px/125% Sage UI</pre>
6717
+ </td>
6718
+ <td class="is-vcentered">
6719
+ <div class="table__typography-preview">
6720
+ n/a
6721
+ </div>
6722
+
6723
+ </td>
6724
+ </tr>
6725
+ <tr>
6726
+ <td class="with-icons is-vcentered"
6727
+ id="base-typographyDialogTitleXl"
6728
+ title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
6729
+ typographyDialogTitleXl
6730
+ <a href="#base-typographyDialogTitleXl"
6731
+ title="permalink"
6732
+ class="permalink">
6733
+ 🔗
6734
+ </a>
6735
+ </td>
6736
+ <td class="is-vcentered">
6737
+ <pre>700 24px/125% Sage UI</pre>
6738
+ </td>
6739
+ <td class="is-vcentered">
6740
+ <div class="table__typography-preview">
6741
+ n/a
6742
+ </div>
6743
+
6744
+ </td>
6745
+ </tr>
6746
+ <tr>
6747
+ <td class="with-icons is-vcentered"
6748
+ id="base-typographyDialogTitleXxl"
6749
+ title="theme: base; category: typography; group: dialog; name: title; variant: xxl; ">
6750
+ typographyDialogTitleXxl
6751
+ <a href="#base-typographyDialogTitleXxl"
6752
+ title="permalink"
6753
+ class="permalink">
6754
+ 🔗
6755
+ </a>
6756
+ </td>
6757
+ <td class="is-vcentered">
6758
+ <pre>700 24px/125% Sage UI</pre>
6759
+ </td>
6760
+ <td class="is-vcentered">
6761
+ <div class="table__typography-preview">
6762
+ n/a
6763
+ </div>
6764
+
6765
+ </td>
6766
+ </tr>
6767
+ <tr>
6768
+ <td class="with-icons is-vcentered"
6769
+ id="base-typographyDialogParagraphXs"
6770
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
6771
+ typographyDialogParagraphXs
6772
+ <a href="#base-typographyDialogParagraphXs"
6773
+ title="permalink"
6774
+ class="permalink">
6775
+ 🔗
6776
+ </a>
6777
+ </td>
6778
+ <td class="is-vcentered">
6779
+ <pre>400 14px/150% Sage UI</pre>
6780
+ </td>
6781
+ <td class="is-vcentered">
6782
+ <div class="table__typography-preview">
6783
+ n/a
6784
+ </div>
6785
+
6786
+ </td>
6787
+ </tr>
6788
+ <tr>
6789
+ <td class="with-icons is-vcentered"
6790
+ id="base-typographyDialogParagraphS"
6791
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
6792
+ typographyDialogParagraphS
6793
+ <a href="#base-typographyDialogParagraphS"
6794
+ title="permalink"
6795
+ class="permalink">
6796
+ 🔗
6797
+ </a>
6798
+ </td>
6799
+ <td class="is-vcentered">
6800
+ <pre>400 14px/150% Sage UI</pre>
6801
+ </td>
6802
+ <td class="is-vcentered">
6803
+ <div class="table__typography-preview">
6804
+ n/a
6805
+ </div>
6806
+
6807
+ </td>
6808
+ </tr>
6809
+ <tr>
6810
+ <td class="with-icons is-vcentered"
6811
+ id="base-typographyDialogParagraphMs"
6812
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
6813
+ typographyDialogParagraphMs
6814
+ <a href="#base-typographyDialogParagraphMs"
6815
+ title="permalink"
6816
+ class="permalink">
6817
+ 🔗
6818
+ </a>
6819
+ </td>
6820
+ <td class="is-vcentered">
6821
+ <pre>400 14px/150% Sage UI</pre>
6822
+ </td>
6823
+ <td class="is-vcentered">
6824
+ <div class="table__typography-preview">
6825
+ n/a
6826
+ </div>
6827
+
6828
+ </td>
6829
+ </tr>
6620
6830
  <tr>
6621
6831
  <td class="with-icons is-vcentered"
6622
6832
  id="base-typographyDialogParagraphM"
@@ -6638,6 +6848,90 @@
6638
6848
 
6639
6849
  </td>
6640
6850
  </tr>
6851
+ <tr>
6852
+ <td class="with-icons is-vcentered"
6853
+ id="base-typographyDialogParagraphMl"
6854
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
6855
+ typographyDialogParagraphMl
6856
+ <a href="#base-typographyDialogParagraphMl"
6857
+ title="permalink"
6858
+ class="permalink">
6859
+ 🔗
6860
+ </a>
6861
+ </td>
6862
+ <td class="is-vcentered">
6863
+ <pre>400 14px/150% Sage UI</pre>
6864
+ </td>
6865
+ <td class="is-vcentered">
6866
+ <div class="table__typography-preview">
6867
+ n/a
6868
+ </div>
6869
+
6870
+ </td>
6871
+ </tr>
6872
+ <tr>
6873
+ <td class="with-icons is-vcentered"
6874
+ id="base-typographyDialogParagraphL"
6875
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
6876
+ typographyDialogParagraphL
6877
+ <a href="#base-typographyDialogParagraphL"
6878
+ title="permalink"
6879
+ class="permalink">
6880
+ 🔗
6881
+ </a>
6882
+ </td>
6883
+ <td class="is-vcentered">
6884
+ <pre>400 14px/150% Sage UI</pre>
6885
+ </td>
6886
+ <td class="is-vcentered">
6887
+ <div class="table__typography-preview">
6888
+ n/a
6889
+ </div>
6890
+
6891
+ </td>
6892
+ </tr>
6893
+ <tr>
6894
+ <td class="with-icons is-vcentered"
6895
+ id="base-typographyDialogParagraphXl"
6896
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
6897
+ typographyDialogParagraphXl
6898
+ <a href="#base-typographyDialogParagraphXl"
6899
+ title="permalink"
6900
+ class="permalink">
6901
+ 🔗
6902
+ </a>
6903
+ </td>
6904
+ <td class="is-vcentered">
6905
+ <pre>400 14px/150% Sage UI</pre>
6906
+ </td>
6907
+ <td class="is-vcentered">
6908
+ <div class="table__typography-preview">
6909
+ n/a
6910
+ </div>
6911
+
6912
+ </td>
6913
+ </tr>
6914
+ <tr>
6915
+ <td class="with-icons is-vcentered"
6916
+ id="base-typographyDialogParagraphXxl"
6917
+ title="theme: base; category: typography; group: dialog; name: paragraph; variant: xxl; ">
6918
+ typographyDialogParagraphXxl
6919
+ <a href="#base-typographyDialogParagraphXxl"
6920
+ title="permalink"
6921
+ class="permalink">
6922
+ 🔗
6923
+ </a>
6924
+ </td>
6925
+ <td class="is-vcentered">
6926
+ <pre>400 14px/150% Sage UI</pre>
6927
+ </td>
6928
+ <td class="is-vcentered">
6929
+ <div class="table__typography-preview">
6930
+ n/a
6931
+ </div>
6932
+
6933
+ </td>
6934
+ </tr>
6641
6935
  <tr>
6642
6936
  <td class="with-icons is-vcentered"
6643
6937
  id="base-typographyDrawerTitleM"