@sage/design-tokens 2.8.0 → 2.11.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 +40 -18
  2. package/css/base.css +40 -18
  3. package/data/tokens.json +280 -62
  4. package/docs/tokens/base/colors/index.html +314 -20
  5. package/docs/tokens/base/index.html +510 -48
  6. package/docs/tokens/base/typography/index.html +196 -28
  7. package/docs/tokens/index.html +510 -48
  8. package/ios/base.h +40 -18
  9. package/js/base/common.d.ts +29 -7
  10. package/js/base/common.js +40 -18
  11. package/js/base/es6.d.ts +29 -7
  12. package/js/base/es6.js +39 -17
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.11.0.tgz +0 -0
  15. package/scss/base.scss +40 -18
  16. package/sage-design-tokens-2.8.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>
@@ -7177,6 +7471,27 @@
7177
7471
 
7178
7472
  </td>
7179
7473
  </tr>
7474
+ <tr>
7475
+ <td class="with-icons is-vcentered"
7476
+ id="base-typographyMenuLabelL"
7477
+ title="theme: base; category: typography; group: menu; name: label; variant: l; ">
7478
+ typographyMenuLabelL
7479
+ <a href="#base-typographyMenuLabelL"
7480
+ title="permalink"
7481
+ class="permalink">
7482
+ 🔗
7483
+ </a>
7484
+ </td>
7485
+ <td class="is-vcentered">
7486
+ <pre>500 16px/150% Sage UI</pre>
7487
+ </td>
7488
+ <td class="is-vcentered">
7489
+ <div class="table__typography-preview">
7490
+ n/a
7491
+ </div>
7492
+
7493
+ </td>
7494
+ </tr>
7180
7495
  <tr>
7181
7496
  <td class="with-icons is-vcentered"
7182
7497
  id="base-typographyMenuSegmentTitleM"
@@ -7410,10 +7725,157 @@
7410
7725
  </tr>
7411
7726
  <tr>
7412
7727
  <td class="with-icons is-vcentered"
7413
- id="base-typographyProfileEmailXs"
7414
- title="theme: base; category: typography; group: profile; name: email; variant: xs; ">
7415
- typographyProfileEmailXs
7416
- <a href="#base-typographyProfileEmailXs"
7728
+ id="base-typographyProfileEmailTextXs"
7729
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xs; ">
7730
+ typographyProfileEmailTextXs
7731
+ <a href="#base-typographyProfileEmailTextXs"
7732
+ title="permalink"
7733
+ class="permalink">
7734
+ 🔗
7735
+ </a>
7736
+ </td>
7737
+ <td class="is-vcentered">
7738
+ <pre>400 12px/100% Sage UI</pre>
7739
+ </td>
7740
+ <td class="is-vcentered">
7741
+ <div class="table__typography-preview">
7742
+ n/a
7743
+ </div>
7744
+
7745
+ </td>
7746
+ </tr>
7747
+ <tr>
7748
+ <td class="with-icons is-vcentered"
7749
+ id="base-typographyProfileEmailTextS"
7750
+ title="theme: base; category: typography; group: profile; name: emailText; variant: s; ">
7751
+ typographyProfileEmailTextS
7752
+ <a href="#base-typographyProfileEmailTextS"
7753
+ title="permalink"
7754
+ class="permalink">
7755
+ 🔗
7756
+ </a>
7757
+ </td>
7758
+ <td class="is-vcentered">
7759
+ <pre>400 14px/100% Sage UI</pre>
7760
+ </td>
7761
+ <td class="is-vcentered">
7762
+ <div class="table__typography-preview">
7763
+ n/a
7764
+ </div>
7765
+
7766
+ </td>
7767
+ </tr>
7768
+ <tr>
7769
+ <td class="with-icons is-vcentered"
7770
+ id="base-typographyProfileEmailTextM"
7771
+ title="theme: base; category: typography; group: profile; name: emailText; variant: m; ">
7772
+ typographyProfileEmailTextM
7773
+ <a href="#base-typographyProfileEmailTextM"
7774
+ title="permalink"
7775
+ class="permalink">
7776
+ 🔗
7777
+ </a>
7778
+ </td>
7779
+ <td class="is-vcentered">
7780
+ <pre>400 14px/125% Sage UI</pre>
7781
+ </td>
7782
+ <td class="is-vcentered">
7783
+ <div class="table__typography-preview">
7784
+ n/a
7785
+ </div>
7786
+
7787
+ </td>
7788
+ </tr>
7789
+ <tr>
7790
+ <td class="with-icons is-vcentered"
7791
+ id="base-typographyProfileEmailTextMl"
7792
+ title="theme: base; category: typography; group: profile; name: emailText; variant: ml; ">
7793
+ typographyProfileEmailTextMl
7794
+ <a href="#base-typographyProfileEmailTextMl"
7795
+ title="permalink"
7796
+ class="permalink">
7797
+ 🔗
7798
+ </a>
7799
+ </td>
7800
+ <td class="is-vcentered">
7801
+ <pre>400 14px/125% Sage UI</pre>
7802
+ </td>
7803
+ <td class="is-vcentered">
7804
+ <div class="table__typography-preview">
7805
+ n/a
7806
+ </div>
7807
+
7808
+ </td>
7809
+ </tr>
7810
+ <tr>
7811
+ <td class="with-icons is-vcentered"
7812
+ id="base-typographyProfileEmailTextL"
7813
+ title="theme: base; category: typography; group: profile; name: emailText; variant: l; ">
7814
+ typographyProfileEmailTextL
7815
+ <a href="#base-typographyProfileEmailTextL"
7816
+ title="permalink"
7817
+ class="permalink">
7818
+ 🔗
7819
+ </a>
7820
+ </td>
7821
+ <td class="is-vcentered">
7822
+ <pre>400 14px/125% Sage UI</pre>
7823
+ </td>
7824
+ <td class="is-vcentered">
7825
+ <div class="table__typography-preview">
7826
+ n/a
7827
+ </div>
7828
+
7829
+ </td>
7830
+ </tr>
7831
+ <tr>
7832
+ <td class="with-icons is-vcentered"
7833
+ id="base-typographyProfileEmailTextXl"
7834
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xl; ">
7835
+ typographyProfileEmailTextXl
7836
+ <a href="#base-typographyProfileEmailTextXl"
7837
+ title="permalink"
7838
+ class="permalink">
7839
+ 🔗
7840
+ </a>
7841
+ </td>
7842
+ <td class="is-vcentered">
7843
+ <pre>400 18px/125% Sage UI</pre>
7844
+ </td>
7845
+ <td class="is-vcentered">
7846
+ <div class="table__typography-preview">
7847
+ n/a
7848
+ </div>
7849
+
7850
+ </td>
7851
+ </tr>
7852
+ <tr>
7853
+ <td class="with-icons is-vcentered"
7854
+ id="base-typographyProfileEmailTextXxl"
7855
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xxl; ">
7856
+ typographyProfileEmailTextXxl
7857
+ <a href="#base-typographyProfileEmailTextXxl"
7858
+ title="permalink"
7859
+ class="permalink">
7860
+ 🔗
7861
+ </a>
7862
+ </td>
7863
+ <td class="is-vcentered">
7864
+ <pre>400 24px/125% Sage UI</pre>
7865
+ </td>
7866
+ <td class="is-vcentered">
7867
+ <div class="table__typography-preview">
7868
+ n/a
7869
+ </div>
7870
+
7871
+ </td>
7872
+ </tr>
7873
+ <tr>
7874
+ <td class="with-icons is-vcentered"
7875
+ id="base-typographyProfileEmailLinkXs"
7876
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xs; ">
7877
+ typographyProfileEmailLinkXs
7878
+ <a href="#base-typographyProfileEmailLinkXs"
7417
7879
  title="permalink"
7418
7880
  class="permalink">
7419
7881
  🔗
@@ -7431,10 +7893,10 @@
7431
7893
  </tr>
7432
7894
  <tr>
7433
7895
  <td class="with-icons is-vcentered"
7434
- id="base-typographyProfileEmailS"
7435
- title="theme: base; category: typography; group: profile; name: email; variant: s; ">
7436
- typographyProfileEmailS
7437
- <a href="#base-typographyProfileEmailS"
7896
+ id="base-typographyProfileEmailLinkS"
7897
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: s; ">
7898
+ typographyProfileEmailLinkS
7899
+ <a href="#base-typographyProfileEmailLinkS"
7438
7900
  title="permalink"
7439
7901
  class="permalink">
7440
7902
  🔗
@@ -7452,10 +7914,10 @@
7452
7914
  </tr>
7453
7915
  <tr>
7454
7916
  <td class="with-icons is-vcentered"
7455
- id="base-typographyProfileEmailM"
7456
- title="theme: base; category: typography; group: profile; name: email; variant: m; ">
7457
- typographyProfileEmailM
7458
- <a href="#base-typographyProfileEmailM"
7917
+ id="base-typographyProfileEmailLinkM"
7918
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: m; ">
7919
+ typographyProfileEmailLinkM
7920
+ <a href="#base-typographyProfileEmailLinkM"
7459
7921
  title="permalink"
7460
7922
  class="permalink">
7461
7923
  🔗
@@ -7473,10 +7935,10 @@
7473
7935
  </tr>
7474
7936
  <tr>
7475
7937
  <td class="with-icons is-vcentered"
7476
- id="base-typographyProfileEmailMl"
7477
- title="theme: base; category: typography; group: profile; name: email; variant: ml; ">
7478
- typographyProfileEmailMl
7479
- <a href="#base-typographyProfileEmailMl"
7938
+ id="base-typographyProfileEmailLinkMl"
7939
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: ml; ">
7940
+ typographyProfileEmailLinkMl
7941
+ <a href="#base-typographyProfileEmailLinkMl"
7480
7942
  title="permalink"
7481
7943
  class="permalink">
7482
7944
  🔗
@@ -7494,10 +7956,10 @@
7494
7956
  </tr>
7495
7957
  <tr>
7496
7958
  <td class="with-icons is-vcentered"
7497
- id="base-typographyProfileEmailL"
7498
- title="theme: base; category: typography; group: profile; name: email; variant: l; ">
7499
- typographyProfileEmailL
7500
- <a href="#base-typographyProfileEmailL"
7959
+ id="base-typographyProfileEmailLinkL"
7960
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: l; ">
7961
+ typographyProfileEmailLinkL
7962
+ <a href="#base-typographyProfileEmailLinkL"
7501
7963
  title="permalink"
7502
7964
  class="permalink">
7503
7965
  🔗
@@ -7515,10 +7977,10 @@
7515
7977
  </tr>
7516
7978
  <tr>
7517
7979
  <td class="with-icons is-vcentered"
7518
- id="base-typographyProfileEmailXl"
7519
- title="theme: base; category: typography; group: profile; name: email; variant: xl; ">
7520
- typographyProfileEmailXl
7521
- <a href="#base-typographyProfileEmailXl"
7980
+ id="base-typographyProfileEmailLinkXl"
7981
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xl; ">
7982
+ typographyProfileEmailLinkXl
7983
+ <a href="#base-typographyProfileEmailLinkXl"
7522
7984
  title="permalink"
7523
7985
  class="permalink">
7524
7986
  🔗
@@ -7536,10 +7998,10 @@
7536
7998
  </tr>
7537
7999
  <tr>
7538
8000
  <td class="with-icons is-vcentered"
7539
- id="base-typographyProfileEmailXxl"
7540
- title="theme: base; category: typography; group: profile; name: email; variant: xxl; ">
7541
- typographyProfileEmailXxl
7542
- <a href="#base-typographyProfileEmailXxl"
8001
+ id="base-typographyProfileEmailLinkXxl"
8002
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xxl; ">
8003
+ typographyProfileEmailLinkXxl
8004
+ <a href="#base-typographyProfileEmailLinkXxl"
7543
8005
  title="permalink"
7544
8006
  class="permalink">
7545
8007
  🔗