@sage/design-tokens 2.12.0 → 2.15.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 +18 -2
  2. package/css/base.css +18 -2
  3. package/data/tokens.json +221 -27
  4. package/docs/tokens/base/index.html +357 -21
  5. package/docs/tokens/base/sizing/index.html +21 -0
  6. package/docs/tokens/base/typography/index.html +336 -21
  7. package/docs/tokens/index.html +357 -21
  8. package/ios/base.h +18 -2
  9. package/js/base/common.d.ts +17 -1
  10. package/js/base/common.js +18 -2
  11. package/js/base/es6.d.ts +17 -1
  12. package/js/base/es6.js +17 -1
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.15.0.tgz +0 -0
  15. package/scss/base.scss +18 -2
  16. package/sage-design-tokens-2.12.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 Fri, 01 Apr 2022 11:37:42 GMT
5
+ Generated on Wed, 06 Apr 2022 09:17:50 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -213,6 +213,7 @@
213
213
  <string name="sizing400">32px</string>
214
214
  <string name="sizing450">36px</string>
215
215
  <string name="sizing500">40px</string>
216
+ <string name="sizing525">42px</string>
216
217
  <string name="sizing600">48px</string>
217
218
  <string name="sizing700">56px</string>
218
219
  <string name="sizing800">64px</string>
@@ -292,14 +293,29 @@
292
293
  <string name="typographyButtonLabelS">Bold 14px/150% Sage UI</string>
293
294
  <string name="typographyButtonLabelM">Bold 14px/150% Sage UI</string>
294
295
  <string name="typographyButtonLabelL">Bold 16px/150% Sage UI</string>
296
+ <string name="typographyCardParagraphM">Regular 14px/150% Sage UI</string>
295
297
  <string name="typographyCardSelectTitleM">Bold 16px/150% Sage UI</string>
296
298
  <string name="typographyCardSelectSubtitleM">Medium 14px/150% Sage UI</string>
297
299
  <string name="typographyCardSelectParagraphM">Regular 14px/150% Sage UI</string>
298
300
  <string name="typographyDatePickerCalendarDateM">Bold 14px/150% Sage UI</string>
299
301
  <string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
300
302
  <string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
303
+ <string name="typographyDialogTitleXs">Bold 24px/125% Sage UI</string>
304
+ <string name="typographyDialogTitleS">Bold 24px/125% Sage UI</string>
305
+ <string name="typographyDialogTitleMs">Bold 24px/125% Sage UI</string>
301
306
  <string name="typographyDialogTitleM">Bold 24px/125% Sage UI</string>
307
+ <string name="typographyDialogTitleMl">Bold 24px/125% Sage UI</string>
308
+ <string name="typographyDialogTitleL">Bold 24px/125% Sage UI</string>
309
+ <string name="typographyDialogTitleXl">Bold 24px/125% Sage UI</string>
310
+ <string name="typographyDialogTitleXxl">Bold 24px/125% Sage UI</string>
311
+ <string name="typographyDialogParagraphXs">Regular 14px/150% Sage UI</string>
312
+ <string name="typographyDialogParagraphS">Regular 14px/150% Sage UI</string>
313
+ <string name="typographyDialogParagraphMs">Regular 14px/150% Sage UI</string>
302
314
  <string name="typographyDialogParagraphM">Regular 14px/150% Sage UI</string>
315
+ <string name="typographyDialogParagraphMl">Regular 14px/150% Sage UI</string>
316
+ <string name="typographyDialogParagraphL">Regular 14px/150% Sage UI</string>
317
+ <string name="typographyDialogParagraphXl">Regular 14px/150% Sage UI</string>
318
+ <string name="typographyDialogParagraphXxl">Regular 14px/150% Sage UI</string>
303
319
  <string name="typographyDrawerTitleM">Bold 22px/125% Sage UI</string>
304
320
  <string name="typographyDrawerParagraphM">0 none</string>
305
321
  <string name="typographyFlashTextM">Regular 14px/150% Sage UI</string>
@@ -347,7 +363,6 @@
347
363
  <string name="typographyMessageTextM">Regular 14px/150% Sage UI</string>
348
364
  <string name="typographyMessageTextL">Regular 16px/150% Sage UI</string>
349
365
  <string name="typographyPaginationLabelM">Regular 13px/150% Sage UI</string>
350
- <string name="typographyTileParagraphM">Regular 14px/150% Sage UI</string>
351
366
  <string name="typographyPillLabelS">Medium 10px/150% Sage UI</string>
352
367
  <string name="typographyPillLabelM">Medium 12px/150% Sage UI</string>
353
368
  <string name="typographyPillLabelL">Medium 14px/150% Sage UI</string>
@@ -403,6 +418,7 @@
403
418
  <string name="typographyTableCellTextM">Regular 14px/150% Sage UI</string>
404
419
  <string name="typographyTableCellTextL">Regular 16px/150% Sage UI</string>
405
420
  <string name="typographyTableCellTextXl">Regular 16px/150% Sage UI</string>
421
+ <string name="typographyTileParagraphM">Regular 14px/150% Sage UI</string>
406
422
  <string name="typographyTooltipTextM">Regular 14px/150% Sage UI</string>
407
423
  <string name="typographyTooltipTextL">Regular 16px/150% Sage UI</string>
408
424
  <string name="opacity300">0.3</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 Fri, 01 Apr 2022 11:37:42 GMT
7
+ * Generated on Wed, 06 Apr 2022 09:17:50 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -216,6 +216,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
216
216
  --sizing400: 32px;
217
217
  --sizing450: 36px;
218
218
  --sizing500: 40px;
219
+ --sizing525: 42px;
219
220
  --sizing600: 48px;
220
221
  --sizing700: 56px;
221
222
  --sizing800: 64px;
@@ -295,14 +296,29 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
295
296
  --typographyButtonLabelS: 700 14px/150% Sage UI;
296
297
  --typographyButtonLabelM: 700 14px/150% Sage UI;
297
298
  --typographyButtonLabelL: 700 16px/150% Sage UI;
299
+ --typographyCardParagraphM: 400 14px/150% Sage UI;
298
300
  --typographyCardSelectTitleM: 700 16px/150% Sage UI;
299
301
  --typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
300
302
  --typographyCardSelectParagraphM: 400 14px/150% Sage UI;
301
303
  --typographyDatePickerCalendarDateM: 700 14px/150% Sage UI;
302
304
  --typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
303
305
  --typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
306
+ --typographyDialogTitleXs: 700 24px/125% Sage UI;
307
+ --typographyDialogTitleS: 700 24px/125% Sage UI;
308
+ --typographyDialogTitleMs: 700 24px/125% Sage UI;
304
309
  --typographyDialogTitleM: 700 24px/125% Sage UI;
310
+ --typographyDialogTitleMl: 700 24px/125% Sage UI;
311
+ --typographyDialogTitleL: 700 24px/125% Sage UI;
312
+ --typographyDialogTitleXl: 700 24px/125% Sage UI;
313
+ --typographyDialogTitleXxl: 700 24px/125% Sage UI;
314
+ --typographyDialogParagraphXs: 400 14px/150% Sage UI;
315
+ --typographyDialogParagraphS: 400 14px/150% Sage UI;
316
+ --typographyDialogParagraphMs: 400 14px/150% Sage UI;
305
317
  --typographyDialogParagraphM: 400 14px/150% Sage UI;
318
+ --typographyDialogParagraphMl: 400 14px/150% Sage UI;
319
+ --typographyDialogParagraphL: 400 14px/150% Sage UI;
320
+ --typographyDialogParagraphXl: 400 14px/150% Sage UI;
321
+ --typographyDialogParagraphXxl: 400 14px/150% Sage UI;
306
322
  --typographyDrawerTitleM: 700 22px/125% Sage UI;
307
323
  --typographyDrawerParagraphM: 0 none;
308
324
  --typographyFlashTextM: 400 14px/150% Sage UI;
@@ -350,7 +366,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
350
366
  --typographyMessageTextM: 400 14px/150% Sage UI;
351
367
  --typographyMessageTextL: 400 16px/150% Sage UI;
352
368
  --typographyPaginationLabelM: 400 13px/150% Sage UI;
353
- --typographyTileParagraphM: 400 14px/150% Sage UI;
354
369
  --typographyPillLabelS: 500 10px/150% Sage UI;
355
370
  --typographyPillLabelM: 500 12px/150% Sage UI;
356
371
  --typographyPillLabelL: 500 14px/150% Sage UI;
@@ -406,6 +421,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
406
421
  --typographyTableCellTextM: 400 14px/150% Sage UI;
407
422
  --typographyTableCellTextL: 400 16px/150% Sage UI;
408
423
  --typographyTableCellTextXl: 400 16px/150% Sage UI;
424
+ --typographyTileParagraphM: 400 14px/150% Sage UI;
409
425
  --typographyTooltipTextM: 400 14px/150% Sage UI;
410
426
  --typographyTooltipTextL: 400 16px/150% Sage UI;
411
427
  --opacity300: 0.3;
package/data/tokens.json CHANGED
@@ -1047,6 +1047,10 @@
1047
1047
  "value": "40px",
1048
1048
  "type": "sizing"
1049
1049
  },
1050
+ "525": {
1051
+ "value": "42px",
1052
+ "type": "sizing"
1053
+ },
1050
1054
  "600": {
1051
1055
  "value": "48px",
1052
1056
  "type": "sizing"
@@ -1598,6 +1602,23 @@
1598
1602
  }
1599
1603
  }
1600
1604
  },
1605
+ "card": {
1606
+ "paragraph": {
1607
+ "m": {
1608
+ "value": {
1609
+ "fontFamily": "Sage UI",
1610
+ "fontWeight": "Regular",
1611
+ "lineHeight": "150%",
1612
+ "fontSize": "14px",
1613
+ "letterSpacing": "0%",
1614
+ "paragraphSpacing": "0",
1615
+ "textDecoration": "none",
1616
+ "textCase": "none"
1617
+ },
1618
+ "type": "typography"
1619
+ }
1620
+ }
1621
+ },
1601
1622
  "cardSelect": {
1602
1623
  "title": {
1603
1624
  "m": {
@@ -1696,6 +1717,39 @@
1696
1717
  },
1697
1718
  "dialog": {
1698
1719
  "title": {
1720
+ "xs": {
1721
+ "value": {
1722
+ "fontFamily": "Sage UI",
1723
+ "fontWeight": "Bold",
1724
+ "lineHeight": "125%",
1725
+ "fontSize": "24px",
1726
+ "letterSpacing": "0%",
1727
+ "paragraphSpacing": "0px"
1728
+ },
1729
+ "type": "typography"
1730
+ },
1731
+ "s": {
1732
+ "value": {
1733
+ "fontFamily": "Sage UI",
1734
+ "fontWeight": "Bold",
1735
+ "lineHeight": "125%",
1736
+ "fontSize": "24px",
1737
+ "letterSpacing": "0%",
1738
+ "paragraphSpacing": "0px"
1739
+ },
1740
+ "type": "typography"
1741
+ },
1742
+ "ms": {
1743
+ "value": {
1744
+ "fontFamily": "Sage UI",
1745
+ "fontWeight": "Bold",
1746
+ "lineHeight": "125%",
1747
+ "fontSize": "24px",
1748
+ "letterSpacing": "0%",
1749
+ "paragraphSpacing": "0px"
1750
+ },
1751
+ "type": "typography"
1752
+ },
1699
1753
  "m": {
1700
1754
  "value": {
1701
1755
  "fontFamily": "Sage UI",
@@ -1706,9 +1760,92 @@
1706
1760
  "paragraphSpacing": "0px"
1707
1761
  },
1708
1762
  "type": "typography"
1763
+ },
1764
+ "ml": {
1765
+ "value": {
1766
+ "fontFamily": "Sage UI",
1767
+ "fontWeight": "Bold",
1768
+ "lineHeight": "125%",
1769
+ "fontSize": "24px",
1770
+ "letterSpacing": "0%",
1771
+ "paragraphSpacing": "0px"
1772
+ },
1773
+ "type": "typography"
1774
+ },
1775
+ "l": {
1776
+ "value": {
1777
+ "fontFamily": "Sage UI",
1778
+ "fontWeight": "Bold",
1779
+ "lineHeight": "125%",
1780
+ "fontSize": "24px",
1781
+ "letterSpacing": "0%",
1782
+ "paragraphSpacing": "0px"
1783
+ },
1784
+ "type": "typography"
1785
+ },
1786
+ "xl": {
1787
+ "value": {
1788
+ "fontFamily": "Sage UI",
1789
+ "fontWeight": "Bold",
1790
+ "lineHeight": "125%",
1791
+ "fontSize": "24px",
1792
+ "letterSpacing": "0%",
1793
+ "paragraphSpacing": "0px"
1794
+ },
1795
+ "type": "typography"
1796
+ },
1797
+ "xxl": {
1798
+ "value": {
1799
+ "fontFamily": "Sage UI",
1800
+ "fontWeight": "Bold",
1801
+ "lineHeight": "125%",
1802
+ "fontSize": "24px",
1803
+ "letterSpacing": "0%",
1804
+ "paragraphSpacing": "0px"
1805
+ },
1806
+ "type": "typography"
1709
1807
  }
1710
1808
  },
1711
1809
  "paragraph": {
1810
+ "xs": {
1811
+ "value": {
1812
+ "fontFamily": "Sage UI",
1813
+ "fontWeight": "Regular",
1814
+ "lineHeight": "150%",
1815
+ "fontSize": "14px",
1816
+ "letterSpacing": "0%",
1817
+ "paragraphSpacing": "0",
1818
+ "textDecoration": "none",
1819
+ "textCase": "none"
1820
+ },
1821
+ "type": "typography"
1822
+ },
1823
+ "s": {
1824
+ "value": {
1825
+ "fontFamily": "Sage UI",
1826
+ "fontWeight": "Regular",
1827
+ "lineHeight": "150%",
1828
+ "fontSize": "14px",
1829
+ "letterSpacing": "0%",
1830
+ "paragraphSpacing": "0",
1831
+ "textDecoration": "none",
1832
+ "textCase": "none"
1833
+ },
1834
+ "type": "typography"
1835
+ },
1836
+ "ms": {
1837
+ "value": {
1838
+ "fontFamily": "Sage UI",
1839
+ "fontWeight": "Regular",
1840
+ "lineHeight": "150%",
1841
+ "fontSize": "14px",
1842
+ "letterSpacing": "0%",
1843
+ "paragraphSpacing": "0",
1844
+ "textDecoration": "none",
1845
+ "textCase": "none"
1846
+ },
1847
+ "type": "typography"
1848
+ },
1712
1849
  "m": {
1713
1850
  "value": {
1714
1851
  "fontFamily": "Sage UI",
@@ -1721,6 +1858,58 @@
1721
1858
  "textCase": "none"
1722
1859
  },
1723
1860
  "type": "typography"
1861
+ },
1862
+ "ml": {
1863
+ "value": {
1864
+ "fontFamily": "Sage UI",
1865
+ "fontWeight": "Regular",
1866
+ "lineHeight": "150%",
1867
+ "fontSize": "14px",
1868
+ "letterSpacing": "0%",
1869
+ "paragraphSpacing": "0",
1870
+ "textDecoration": "none",
1871
+ "textCase": "none"
1872
+ },
1873
+ "type": "typography"
1874
+ },
1875
+ "l": {
1876
+ "value": {
1877
+ "fontFamily": "Sage UI",
1878
+ "fontWeight": "Regular",
1879
+ "lineHeight": "150%",
1880
+ "fontSize": "14px",
1881
+ "letterSpacing": "0%",
1882
+ "paragraphSpacing": "0",
1883
+ "textDecoration": "none",
1884
+ "textCase": "none"
1885
+ },
1886
+ "type": "typography"
1887
+ },
1888
+ "xl": {
1889
+ "value": {
1890
+ "fontFamily": "Sage UI",
1891
+ "fontWeight": "Regular",
1892
+ "lineHeight": "150%",
1893
+ "fontSize": "14px",
1894
+ "letterSpacing": "0%",
1895
+ "paragraphSpacing": "0",
1896
+ "textDecoration": "none",
1897
+ "textCase": "none"
1898
+ },
1899
+ "type": "typography"
1900
+ },
1901
+ "xxl": {
1902
+ "value": {
1903
+ "fontFamily": "Sage UI",
1904
+ "fontWeight": "Regular",
1905
+ "lineHeight": "150%",
1906
+ "fontSize": "14px",
1907
+ "letterSpacing": "0%",
1908
+ "paragraphSpacing": "0",
1909
+ "textDecoration": "none",
1910
+ "textCase": "none"
1911
+ },
1912
+ "type": "typography"
1724
1913
  }
1725
1914
  }
1726
1915
  },
@@ -2305,23 +2494,6 @@
2305
2494
  }
2306
2495
  }
2307
2496
  },
2308
- "tile": {
2309
- "paragraph": {
2310
- "m": {
2311
- "value": {
2312
- "fontFamily": "Sage UI",
2313
- "fontWeight": "Regular",
2314
- "lineHeight": "150%",
2315
- "fontSize": "14px",
2316
- "letterSpacing": "0%",
2317
- "paragraphSpacing": "0",
2318
- "textDecoration": "none",
2319
- "textCase": "none"
2320
- },
2321
- "type": "typography"
2322
- }
2323
- }
2324
- },
2325
2497
  "pill": {
2326
2498
  "label": {
2327
2499
  "s": {
@@ -2567,7 +2739,7 @@
2567
2739
  "letterSpacing": "0%",
2568
2740
  "paragraphSpacing": "0",
2569
2741
  "textDecoration": "none",
2570
- "textCase": "none"
2742
+ "textCase": "uppercase"
2571
2743
  },
2572
2744
  "type": "typography"
2573
2745
  },
@@ -2580,7 +2752,7 @@
2580
2752
  "letterSpacing": "0%",
2581
2753
  "paragraphSpacing": "0",
2582
2754
  "textDecoration": "none",
2583
- "textCase": "none"
2755
+ "textCase": "uppercase"
2584
2756
  },
2585
2757
  "type": "typography"
2586
2758
  },
@@ -2593,7 +2765,7 @@
2593
2765
  "letterSpacing": "0%",
2594
2766
  "paragraphSpacing": "0",
2595
2767
  "textDecoration": "none",
2596
- "textCase": "none"
2768
+ "textCase": "uppercase"
2597
2769
  },
2598
2770
  "type": "typography"
2599
2771
  },
@@ -2606,7 +2778,7 @@
2606
2778
  "letterSpacing": "0%",
2607
2779
  "paragraphSpacing": "0",
2608
2780
  "textDecoration": "none",
2609
- "textCase": "none"
2781
+ "textCase": "uppercase"
2610
2782
  },
2611
2783
  "type": "typography"
2612
2784
  },
@@ -2619,7 +2791,7 @@
2619
2791
  "letterSpacing": "0%",
2620
2792
  "paragraphSpacing": "0",
2621
2793
  "textDecoration": "none",
2622
- "textCase": "none"
2794
+ "textCase": "uppercase"
2623
2795
  },
2624
2796
  "type": "typography"
2625
2797
  },
@@ -2632,7 +2804,7 @@
2632
2804
  "letterSpacing": "0%",
2633
2805
  "paragraphSpacing": "0",
2634
2806
  "textDecoration": "none",
2635
- "textCase": "none"
2807
+ "textCase": "uppercase"
2636
2808
  },
2637
2809
  "type": "typography"
2638
2810
  },
@@ -2645,9 +2817,10 @@
2645
2817
  "letterSpacing": "0%",
2646
2818
  "paragraphSpacing": "0",
2647
2819
  "textDecoration": "none",
2648
- "textCase": "none"
2820
+ "textCase": "uppercase"
2649
2821
  },
2650
- "type": "typography"
2822
+ "type": "typography",
2823
+ "description": " "
2651
2824
  }
2652
2825
  },
2653
2826
  "name": {
@@ -2905,7 +3078,9 @@
2905
3078
  "lineHeight": "150%",
2906
3079
  "fontSize": "12px",
2907
3080
  "letterSpacing": "0%",
2908
- "paragraphSpacing": "0px"
3081
+ "paragraphSpacing": "0px",
3082
+ "textCase": "uppercase",
3083
+ "textDecoration": "none"
2909
3084
  },
2910
3085
  "type": "typography"
2911
3086
  },
@@ -2916,7 +3091,9 @@
2916
3091
  "lineHeight": "150%",
2917
3092
  "fontSize": "14px",
2918
3093
  "letterSpacing": "0%",
2919
- "paragraphSpacing": "0px"
3094
+ "paragraphSpacing": "0px",
3095
+ "textDecoration": "none",
3096
+ "textCase": "uppercase"
2920
3097
  },
2921
3098
  "type": "typography"
2922
3099
  }
@@ -3058,6 +3235,23 @@
3058
3235
  }
3059
3236
  }
3060
3237
  },
3238
+ "tile": {
3239
+ "paragraph": {
3240
+ "m": {
3241
+ "value": {
3242
+ "fontFamily": "Sage UI",
3243
+ "fontWeight": "Regular",
3244
+ "lineHeight": "150%",
3245
+ "fontSize": "14px",
3246
+ "letterSpacing": "0%",
3247
+ "paragraphSpacing": "0",
3248
+ "textDecoration": "none",
3249
+ "textCase": "none"
3250
+ },
3251
+ "type": "typography"
3252
+ }
3253
+ }
3254
+ },
3061
3255
  "tooltip": {
3062
3256
  "text": {
3063
3257
  "m": {