@sage/design-tokens 2.10.0 → 2.13.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 (18) hide show
  1. package/android/base.xml +30 -12
  2. package/css/base.css +30 -12
  3. package/data/tokens.json +246 -88
  4. package/docs/tokens/base/box-shadow/index.html +42 -0
  5. package/docs/tokens/base/colors/index.html +314 -20
  6. package/docs/tokens/base/index.html +419 -41
  7. package/docs/tokens/base/sizing/index.html +21 -0
  8. package/docs/tokens/base/typography/index.html +42 -21
  9. package/docs/tokens/index.html +419 -41
  10. package/ios/base.h +30 -12
  11. package/js/base/common.d.ts +19 -1
  12. package/js/base/common.js +30 -12
  13. package/js/base/es6.d.ts +19 -1
  14. package/js/base/es6.js +29 -11
  15. package/package.json +1 -1
  16. package/sage-design-tokens-2.13.0.tgz +0 -0
  17. package/scss/base.scss +30 -12
  18. package/sage-design-tokens-2.10.0.tgz +0 -0
package/docs/tokens/index.html CHANGED
@@ -497,6 +497,48 @@
497
497
 
498
498
  </td>
499
499
  </tr>
500
+ <tr>
501
+ <td class="with-icons is-vcentered"
502
+ id="base-colorsGray700"
503
+ title="theme: base; category: colors; name: gray; variant: 700; ">
504
+ colorsGray700
505
+ <a href="#base-colorsGray700"
506
+ title="permalink"
507
+ class="permalink">
508
+ 🔗
509
+ </a>
510
+ </td>
511
+ <td class="is-vcentered">
512
+ <pre>#4d4d4dff</pre>
513
+ </td>
514
+ <td class="is-vcentered">
515
+ <div class="table__color-preview"
516
+ style="background-color: #4d4d4dff;">
517
+ </div>
518
+
519
+ </td>
520
+ </tr>
521
+ <tr>
522
+ <td class="with-icons is-vcentered"
523
+ id="base-colorsGray750"
524
+ title="theme: base; category: colors; name: gray; variant: 750; ">
525
+ colorsGray750
526
+ <a href="#base-colorsGray750"
527
+ title="permalink"
528
+ class="permalink">
529
+ 🔗
530
+ </a>
531
+ </td>
532
+ <td class="is-vcentered">
533
+ <pre>#404040ff</pre>
534
+ </td>
535
+ <td class="is-vcentered">
536
+ <div class="table__color-preview"
537
+ style="background-color: #404040ff;">
538
+ </div>
539
+
540
+ </td>
541
+ </tr>
500
542
  <tr>
501
543
  <td class="with-icons is-vcentered"
502
544
  id="base-colorsGray850"
@@ -530,11 +572,11 @@
530
572
  </a>
531
573
  </td>
532
574
  <td class="is-vcentered">
533
- <pre>#1a1a1aff</pre>
575
+ <pre>#191919ff</pre>
534
576
  </td>
535
577
  <td class="is-vcentered">
536
578
  <div class="table__color-preview"
537
- style="background-color: #1a1a1aff;">
579
+ style="background-color: #191919ff;">
538
580
  </div>
539
581
 
540
582
  </td>
@@ -803,11 +845,11 @@
803
845
  </a>
804
846
  </td>
805
847
  <td class="is-vcentered">
806
- <pre>#ffffffff</pre>
848
+ <pre>#007e45ff</pre>
807
849
  </td>
808
850
  <td class="is-vcentered">
809
851
  <div class="table__color-preview"
810
- style="background-color: #ffffffff;">
852
+ style="background-color: #007e45ff;">
811
853
  </div>
812
854
 
813
855
  </td>
@@ -896,6 +938,27 @@
896
938
 
897
939
  </td>
898
940
  </tr>
941
+ <tr>
942
+ <td class="with-icons is-vcentered"
943
+ id="base-colorsComponentsMenuSpringChildAlt400"
944
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 400; ">
945
+ colorsComponentsMenuSpringChildAlt400
946
+ <a href="#base-colorsComponentsMenuSpringChildAlt400"
947
+ title="permalink"
948
+ class="permalink">
949
+ 🔗
950
+ </a>
951
+ </td>
952
+ <td class="is-vcentered">
953
+ <pre>#ccd6dbff</pre>
954
+ </td>
955
+ <td class="is-vcentered">
956
+ <div class="table__color-preview"
957
+ style="background-color: #ccd6dbff;">
958
+ </div>
959
+
960
+ </td>
961
+ </tr>
899
962
  <tr>
900
963
  <td class="with-icons is-vcentered"
901
964
  id="base-colorsComponentsMenuSpringChildAlt500"
@@ -938,6 +1001,27 @@
938
1001
 
939
1002
  </td>
940
1003
  </tr>
1004
+ <tr>
1005
+ <td class="with-icons is-vcentered"
1006
+ id="base-colorsComponentsMenuSummerStandard400"
1007
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 400; ">
1008
+ colorsComponentsMenuSummerStandard400
1009
+ <a href="#base-colorsComponentsMenuSummerStandard400"
1010
+ title="permalink"
1011
+ class="permalink">
1012
+ 🔗
1013
+ </a>
1014
+ </td>
1015
+ <td class="is-vcentered">
1016
+ <pre>#ccd6dbff</pre>
1017
+ </td>
1018
+ <td class="is-vcentered">
1019
+ <div class="table__color-preview"
1020
+ style="background-color: #ccd6dbff;">
1021
+ </div>
1022
+
1023
+ </td>
1024
+ </tr>
941
1025
  <tr>
942
1026
  <td class="with-icons is-vcentered"
943
1027
  id="base-colorsComponentsMenuSummerStandard500"
@@ -992,11 +1076,32 @@
992
1076
  </a>
993
1077
  </td>
994
1078
  <td class="is-vcentered">
995
- <pre>#f2f5f6ff</pre>
1079
+ <pre>#e6ebedff</pre>
996
1080
  </td>
997
1081
  <td class="is-vcentered">
998
1082
  <div class="table__color-preview"
999
- style="background-color: #f2f5f6ff;">
1083
+ style="background-color: #e6ebedff;">
1084
+ </div>
1085
+
1086
+ </td>
1087
+ </tr>
1088
+ <tr>
1089
+ <td class="with-icons is-vcentered"
1090
+ id="base-colorsComponentsMenuSummerStandard800"
1091
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 800; ">
1092
+ colorsComponentsMenuSummerStandard800
1093
+ <a href="#base-colorsComponentsMenuSummerStandard800"
1094
+ title="permalink"
1095
+ class="permalink">
1096
+ 🔗
1097
+ </a>
1098
+ </td>
1099
+ <td class="is-vcentered">
1100
+ <pre>#e6ebedff</pre>
1101
+ </td>
1102
+ <td class="is-vcentered">
1103
+ <div class="table__color-preview"
1104
+ style="background-color: #e6ebedff;">
1000
1105
  </div>
1001
1106
 
1002
1107
  </td>
@@ -1034,11 +1139,11 @@
1034
1139
  </a>
1035
1140
  </td>
1036
1141
  <td class="is-vcentered">
1037
- <pre>#e6ebedff</pre>
1142
+ <pre>#007e45ff</pre>
1038
1143
  </td>
1039
1144
  <td class="is-vcentered">
1040
1145
  <div class="table__color-preview"
1041
- style="background-color: #e6ebedff;">
1146
+ style="background-color: #007e45ff;">
1042
1147
  </div>
1043
1148
 
1044
1149
  </td>
@@ -1055,11 +1160,32 @@
1055
1160
  </a>
1056
1161
  </td>
1057
1162
  <td class="is-vcentered">
1058
- <pre>#f2f5f6ff</pre>
1163
+ <pre>#e6ebedff</pre>
1059
1164
  </td>
1060
1165
  <td class="is-vcentered">
1061
1166
  <div class="table__color-preview"
1062
- style="background-color: #f2f5f6ff;">
1167
+ style="background-color: #e6ebedff;">
1168
+ </div>
1169
+
1170
+ </td>
1171
+ </tr>
1172
+ <tr>
1173
+ <td class="with-icons is-vcentered"
1174
+ id="base-colorsComponentsMenuSummerChild300"
1175
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 300; ">
1176
+ colorsComponentsMenuSummerChild300
1177
+ <a href="#base-colorsComponentsMenuSummerChild300"
1178
+ title="permalink"
1179
+ class="permalink">
1180
+ 🔗
1181
+ </a>
1182
+ </td>
1183
+ <td class="is-vcentered">
1184
+ <pre>#b3c2c9ff</pre>
1185
+ </td>
1186
+ <td class="is-vcentered">
1187
+ <div class="table__color-preview"
1188
+ style="background-color: #b3c2c9ff;">
1063
1189
  </div>
1064
1190
 
1065
1191
  </td>
@@ -1076,11 +1202,11 @@
1076
1202
  </a>
1077
1203
  </td>
1078
1204
  <td class="is-vcentered">
1079
- <pre>#b3c2c9ff</pre>
1205
+ <pre>#ccd6dbff</pre>
1080
1206
  </td>
1081
1207
  <td class="is-vcentered">
1082
1208
  <div class="table__color-preview"
1083
- style="background-color: #b3c2c9ff;">
1209
+ style="background-color: #ccd6dbff;">
1084
1210
  </div>
1085
1211
 
1086
1212
  </td>
@@ -1127,6 +1253,90 @@
1127
1253
 
1128
1254
  </td>
1129
1255
  </tr>
1256
+ <tr>
1257
+ <td class="with-icons is-vcentered"
1258
+ id="base-colorsComponentsMenuSummerChild700"
1259
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 700; ">
1260
+ colorsComponentsMenuSummerChild700
1261
+ <a href="#base-colorsComponentsMenuSummerChild700"
1262
+ title="permalink"
1263
+ class="permalink">
1264
+ 🔗
1265
+ </a>
1266
+ </td>
1267
+ <td class="is-vcentered">
1268
+ <pre>#e6ebedff</pre>
1269
+ </td>
1270
+ <td class="is-vcentered">
1271
+ <div class="table__color-preview"
1272
+ style="background-color: #e6ebedff;">
1273
+ </div>
1274
+
1275
+ </td>
1276
+ </tr>
1277
+ <tr>
1278
+ <td class="with-icons is-vcentered"
1279
+ id="base-colorsComponentsMenuSummerChild800"
1280
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 800; ">
1281
+ colorsComponentsMenuSummerChild800
1282
+ <a href="#base-colorsComponentsMenuSummerChild800"
1283
+ title="permalink"
1284
+ class="permalink">
1285
+ 🔗
1286
+ </a>
1287
+ </td>
1288
+ <td class="is-vcentered">
1289
+ <pre>#e6ebedff</pre>
1290
+ </td>
1291
+ <td class="is-vcentered">
1292
+ <div class="table__color-preview"
1293
+ style="background-color: #e6ebedff;">
1294
+ </div>
1295
+
1296
+ </td>
1297
+ </tr>
1298
+ <tr>
1299
+ <td class="with-icons is-vcentered"
1300
+ id="base-colorsComponentsMenuSummerChildAlt300"
1301
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 300; ">
1302
+ colorsComponentsMenuSummerChildAlt300
1303
+ <a href="#base-colorsComponentsMenuSummerChildAlt300"
1304
+ title="permalink"
1305
+ class="permalink">
1306
+ 🔗
1307
+ </a>
1308
+ </td>
1309
+ <td class="is-vcentered">
1310
+ <pre>#b3c2c9ff</pre>
1311
+ </td>
1312
+ <td class="is-vcentered">
1313
+ <div class="table__color-preview"
1314
+ style="background-color: #b3c2c9ff;">
1315
+ </div>
1316
+
1317
+ </td>
1318
+ </tr>
1319
+ <tr>
1320
+ <td class="with-icons is-vcentered"
1321
+ id="base-colorsComponentsMenuSummerChildAlt400"
1322
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 400; ">
1323
+ colorsComponentsMenuSummerChildAlt400
1324
+ <a href="#base-colorsComponentsMenuSummerChildAlt400"
1325
+ title="permalink"
1326
+ class="permalink">
1327
+ 🔗
1328
+ </a>
1329
+ </td>
1330
+ <td class="is-vcentered">
1331
+ <pre>#ccd6dbff</pre>
1332
+ </td>
1333
+ <td class="is-vcentered">
1334
+ <div class="table__color-preview"
1335
+ style="background-color: #ccd6dbff;">
1336
+ </div>
1337
+
1338
+ </td>
1339
+ </tr>
1130
1340
  <tr>
1131
1341
  <td class="with-icons is-vcentered"
1132
1342
  id="base-colorsComponentsMenuSummerChildAlt500"
@@ -1139,11 +1349,11 @@
1139
1349
  </a>
1140
1350
  </td>
1141
1351
  <td class="is-vcentered">
1142
- <pre>#ccd6dbff</pre>
1352
+ <pre>#d9e0e4ff</pre>
1143
1353
  </td>
1144
1354
  <td class="is-vcentered">
1145
1355
  <div class="table__color-preview"
1146
- style="background-color: #ccd6dbff;">
1356
+ style="background-color: #d9e0e4ff;">
1147
1357
  </div>
1148
1358
 
1149
1359
  </td>
@@ -1169,6 +1379,48 @@
1169
1379
 
1170
1380
  </td>
1171
1381
  </tr>
1382
+ <tr>
1383
+ <td class="with-icons is-vcentered"
1384
+ id="base-colorsComponentsMenuSummerChildAlt700"
1385
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 700; ">
1386
+ colorsComponentsMenuSummerChildAlt700
1387
+ <a href="#base-colorsComponentsMenuSummerChildAlt700"
1388
+ title="permalink"
1389
+ class="permalink">
1390
+ 🔗
1391
+ </a>
1392
+ </td>
1393
+ <td class="is-vcentered">
1394
+ <pre>#d9e0e4ff</pre>
1395
+ </td>
1396
+ <td class="is-vcentered">
1397
+ <div class="table__color-preview"
1398
+ style="background-color: #d9e0e4ff;">
1399
+ </div>
1400
+
1401
+ </td>
1402
+ </tr>
1403
+ <tr>
1404
+ <td class="with-icons is-vcentered"
1405
+ id="base-colorsComponentsMenuSummerChildAlt800"
1406
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 800; ">
1407
+ colorsComponentsMenuSummerChildAlt800
1408
+ <a href="#base-colorsComponentsMenuSummerChildAlt800"
1409
+ title="permalink"
1410
+ class="permalink">
1411
+ 🔗
1412
+ </a>
1413
+ </td>
1414
+ <td class="is-vcentered">
1415
+ <pre>#d9e0e4ff</pre>
1416
+ </td>
1417
+ <td class="is-vcentered">
1418
+ <div class="table__color-preview"
1419
+ style="background-color: #d9e0e4ff;">
1420
+ </div>
1421
+
1422
+ </td>
1423
+ </tr>
1172
1424
  <tr>
1173
1425
  <td class="with-icons is-vcentered"
1174
1426
  id="base-colorsComponentsMenuAutumnStandard500"
@@ -1265,11 +1517,11 @@
1265
1517
  </a>
1266
1518
  </td>
1267
1519
  <td class="is-vcentered">
1268
- <pre>#001926ff</pre>
1520
+ <pre>#007e45ff</pre>
1269
1521
  </td>
1270
1522
  <td class="is-vcentered">
1271
1523
  <div class="table__color-preview"
1272
- style="background-color: #001926ff;">
1524
+ style="background-color: #007e45ff;">
1273
1525
  </div>
1274
1526
 
1275
1527
  </td>
@@ -1358,6 +1610,27 @@
1358
1610
 
1359
1611
  </td>
1360
1612
  </tr>
1613
+ <tr>
1614
+ <td class="with-icons is-vcentered"
1615
+ id="base-colorsComponentsMenuAutumnChildAlt400"
1616
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1617
+ colorsComponentsMenuAutumnChildAlt400
1618
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1619
+ title="permalink"
1620
+ class="permalink">
1621
+ 🔗
1622
+ </a>
1623
+ </td>
1624
+ <td class="is-vcentered">
1625
+ <pre>#19475eff</pre>
1626
+ </td>
1627
+ <td class="is-vcentered">
1628
+ <div class="table__color-preview"
1629
+ style="background-color: #19475eff;">
1630
+ </div>
1631
+
1632
+ </td>
1633
+ </tr>
1361
1634
  <tr>
1362
1635
  <td class="with-icons is-vcentered"
1363
1636
  id="base-colorsComponentsMenuAutumnChildAlt500"
@@ -1496,11 +1769,11 @@
1496
1769
  </a>
1497
1770
  </td>
1498
1771
  <td class="is-vcentered">
1499
- <pre>#000000ff</pre>
1772
+ <pre>#007e45ff</pre>
1500
1773
  </td>
1501
1774
  <td class="is-vcentered">
1502
1775
  <div class="table__color-preview"
1503
- style="background-color: #000000ff;">
1776
+ style="background-color: #007e45ff;">
1504
1777
  </div>
1505
1778
 
1506
1779
  </td>
@@ -1589,6 +1862,27 @@
1589
1862
 
1590
1863
  </td>
1591
1864
  </tr>
1865
+ <tr>
1866
+ <td class="with-icons is-vcentered"
1867
+ id="base-colorsComponentsMenuWinterChildAlt400"
1868
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1869
+ colorsComponentsMenuWinterChildAlt400
1870
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1871
+ title="permalink"
1872
+ class="permalink">
1873
+ 🔗
1874
+ </a>
1875
+ </td>
1876
+ <td class="is-vcentered">
1877
+ <pre>#262626ff</pre>
1878
+ </td>
1879
+ <td class="is-vcentered">
1880
+ <div class="table__color-preview"
1881
+ style="background-color: #262626ff;">
1882
+ </div>
1883
+
1884
+ </td>
1885
+ </tr>
1592
1886
  <tr>
1593
1887
  <td class="with-icons is-vcentered"
1594
1888
  id="base-colorsComponentsMenuWinterChildAlt500"
@@ -1601,11 +1895,11 @@
1601
1895
  </a>
1602
1896
  </td>
1603
1897
  <td class="is-vcentered">
1604
- <pre>#1a1a1aff</pre>
1898
+ <pre>#191919ff</pre>
1605
1899
  </td>
1606
1900
  <td class="is-vcentered">
1607
1901
  <div class="table__color-preview"
1608
- style="background-color: #1a1a1aff;">
1902
+ style="background-color: #191919ff;">
1609
1903
  </div>
1610
1904
 
1611
1905
  </td>
@@ -4341,6 +4635,27 @@
4341
4635
 
4342
4636
  </td>
4343
4637
  </tr>
4638
+ <tr>
4639
+ <td class="with-icons is-vcentered"
4640
+ id="base-sizing525"
4641
+ title="theme: base; category: sizing; variant: 525; ">
4642
+ sizing525
4643
+ <a href="#base-sizing525"
4644
+ title="permalink"
4645
+ class="permalink">
4646
+ 🔗
4647
+ </a>
4648
+ </td>
4649
+ <td class="is-vcentered">
4650
+ <pre>42px</pre>
4651
+ </td>
4652
+ <td class="is-vcentered">
4653
+ <div class="table__sizing-preview"
4654
+ style="width: 42px; height: 42px">
4655
+ </div>
4656
+
4657
+ </td>
4658
+ </tr>
4344
4659
  <tr>
4345
4660
  <td class="with-icons is-vcentered"
4346
4661
  id="base-sizing600"
@@ -5637,6 +5952,48 @@
5637
5952
  style="box-shadow: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26">
5638
5953
  </div>
5639
5954
 
5955
+ </td>
5956
+ </tr>
5957
+ <tr>
5958
+ <td class="with-icons is-vcentered"
5959
+ id="base-boxShadow090"
5960
+ title="theme: base; category: boxShadow; variant: 090; ">
5961
+ boxShadow090
5962
+ <a href="#base-boxShadow090"
5963
+ title="permalink"
5964
+ class="permalink">
5965
+ 🔗
5966
+ </a>
5967
+ </td>
5968
+ <td class="is-vcentered">
5969
+ <pre>0 4px 8px -4px #00141e1a</pre>
5970
+ </td>
5971
+ <td class="is-vcentered">
5972
+ <div class="table__box-shadow-preview"
5973
+ style="box-shadow: 0 4px 8px -4px #00141e1a">
5974
+ </div>
5975
+
5976
+ </td>
5977
+ </tr>
5978
+ <tr>
5979
+ <td class="with-icons is-vcentered"
5980
+ id="base-boxShadow091"
5981
+ title="theme: base; category: boxShadow; variant: 091; ">
5982
+ boxShadow091
5983
+ <a href="#base-boxShadow091"
5984
+ title="permalink"
5985
+ class="permalink">
5986
+ 🔗
5987
+ </a>
5988
+ </td>
5989
+ <td class="is-vcentered">
5990
+ <pre>4px 0 8px -4px #00141e1a</pre>
5991
+ </td>
5992
+ <td class="is-vcentered">
5993
+ <div class="table__box-shadow-preview"
5994
+ style="box-shadow: 4px 0 8px -4px #00141e1a">
5995
+ </div>
5996
+
5640
5997
  </td>
5641
5998
  </tr>
5642
5999
  </table>
@@ -7177,6 +7534,27 @@
7177
7534
 
7178
7535
  </td>
7179
7536
  </tr>
7537
+ <tr>
7538
+ <td class="with-icons is-vcentered"
7539
+ id="base-typographyMenuLabelL"
7540
+ title="theme: base; category: typography; group: menu; name: label; variant: l; ">
7541
+ typographyMenuLabelL
7542
+ <a href="#base-typographyMenuLabelL"
7543
+ title="permalink"
7544
+ class="permalink">
7545
+ 🔗
7546
+ </a>
7547
+ </td>
7548
+ <td class="is-vcentered">
7549
+ <pre>500 16px/150% Sage UI</pre>
7550
+ </td>
7551
+ <td class="is-vcentered">
7552
+ <div class="table__typography-preview">
7553
+ n/a
7554
+ </div>
7555
+
7556
+ </td>
7557
+ </tr>
7180
7558
  <tr>
7181
7559
  <td class="with-icons is-vcentered"
7182
7560
  id="base-typographyMenuSegmentTitleM"
@@ -7303,27 +7681,6 @@
7303
7681
 
7304
7682
  </td>
7305
7683
  </tr>
7306
- <tr>
7307
- <td class="with-icons is-vcentered"
7308
- id="base-typographyTileParagraphM"
7309
- title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
7310
- typographyTileParagraphM
7311
- <a href="#base-typographyTileParagraphM"
7312
- title="permalink"
7313
- class="permalink">
7314
- 🔗
7315
- </a>
7316
- </td>
7317
- <td class="is-vcentered">
7318
- <pre>400 14px/150% Sage UI</pre>
7319
- </td>
7320
- <td class="is-vcentered">
7321
- <div class="table__typography-preview">
7322
- n/a
7323
- </div>
7324
-
7325
- </td>
7326
- </tr>
7327
7684
  <tr>
7328
7685
  <td class="with-icons is-vcentered"
7329
7686
  id="base-typographyPillLabelS"
@@ -8479,6 +8836,27 @@
8479
8836
 
8480
8837
  </td>
8481
8838
  </tr>
8839
+ <tr>
8840
+ <td class="with-icons is-vcentered"
8841
+ id="base-typographyTileParagraphM"
8842
+ title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
8843
+ typographyTileParagraphM
8844
+ <a href="#base-typographyTileParagraphM"
8845
+ title="permalink"
8846
+ class="permalink">
8847
+ 🔗
8848
+ </a>
8849
+ </td>
8850
+ <td class="is-vcentered">
8851
+ <pre>400 14px/150% Sage UI</pre>
8852
+ </td>
8853
+ <td class="is-vcentered">
8854
+ <div class="table__typography-preview">
8855
+ n/a
8856
+ </div>
8857
+
8858
+ </td>
8859
+ </tr>
8482
8860
  <tr>
8483
8861
  <td class="with-icons is-vcentered"
8484
8862
  id="base-typographyTooltipTextM"