@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/base/index.html CHANGED
@@ -491,6 +491,48 @@
491
491
 
492
492
  </td>
493
493
  </tr>
494
+ <tr>
495
+ <td class="with-icons is-vcentered"
496
+ id="base-colorsGray700"
497
+ title="theme: base; category: colors; name: gray; variant: 700; ">
498
+ colorsGray700
499
+ <a href="#base-colorsGray700"
500
+ title="permalink"
501
+ class="permalink">
502
+ 🔗
503
+ </a>
504
+ </td>
505
+ <td class="is-vcentered">
506
+ <pre>#4d4d4dff</pre>
507
+ </td>
508
+ <td class="is-vcentered">
509
+ <div class="table__color-preview"
510
+ style="background-color: #4d4d4dff;">
511
+ </div>
512
+
513
+ </td>
514
+ </tr>
515
+ <tr>
516
+ <td class="with-icons is-vcentered"
517
+ id="base-colorsGray750"
518
+ title="theme: base; category: colors; name: gray; variant: 750; ">
519
+ colorsGray750
520
+ <a href="#base-colorsGray750"
521
+ title="permalink"
522
+ class="permalink">
523
+ 🔗
524
+ </a>
525
+ </td>
526
+ <td class="is-vcentered">
527
+ <pre>#404040ff</pre>
528
+ </td>
529
+ <td class="is-vcentered">
530
+ <div class="table__color-preview"
531
+ style="background-color: #404040ff;">
532
+ </div>
533
+
534
+ </td>
535
+ </tr>
494
536
  <tr>
495
537
  <td class="with-icons is-vcentered"
496
538
  id="base-colorsGray850"
@@ -524,11 +566,11 @@
524
566
  </a>
525
567
  </td>
526
568
  <td class="is-vcentered">
527
- <pre>#1a1a1aff</pre>
569
+ <pre>#191919ff</pre>
528
570
  </td>
529
571
  <td class="is-vcentered">
530
572
  <div class="table__color-preview"
531
- style="background-color: #1a1a1aff;">
573
+ style="background-color: #191919ff;">
532
574
  </div>
533
575
 
534
576
  </td>
@@ -797,11 +839,11 @@
797
839
  </a>
798
840
  </td>
799
841
  <td class="is-vcentered">
800
- <pre>#ffffffff</pre>
842
+ <pre>#007e45ff</pre>
801
843
  </td>
802
844
  <td class="is-vcentered">
803
845
  <div class="table__color-preview"
804
- style="background-color: #ffffffff;">
846
+ style="background-color: #007e45ff;">
805
847
  </div>
806
848
 
807
849
  </td>
@@ -890,6 +932,27 @@
890
932
 
891
933
  </td>
892
934
  </tr>
935
+ <tr>
936
+ <td class="with-icons is-vcentered"
937
+ id="base-colorsComponentsMenuSpringChildAlt400"
938
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 400; ">
939
+ colorsComponentsMenuSpringChildAlt400
940
+ <a href="#base-colorsComponentsMenuSpringChildAlt400"
941
+ title="permalink"
942
+ class="permalink">
943
+ 🔗
944
+ </a>
945
+ </td>
946
+ <td class="is-vcentered">
947
+ <pre>#ccd6dbff</pre>
948
+ </td>
949
+ <td class="is-vcentered">
950
+ <div class="table__color-preview"
951
+ style="background-color: #ccd6dbff;">
952
+ </div>
953
+
954
+ </td>
955
+ </tr>
893
956
  <tr>
894
957
  <td class="with-icons is-vcentered"
895
958
  id="base-colorsComponentsMenuSpringChildAlt500"
@@ -932,6 +995,27 @@
932
995
 
933
996
  </td>
934
997
  </tr>
998
+ <tr>
999
+ <td class="with-icons is-vcentered"
1000
+ id="base-colorsComponentsMenuSummerStandard400"
1001
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 400; ">
1002
+ colorsComponentsMenuSummerStandard400
1003
+ <a href="#base-colorsComponentsMenuSummerStandard400"
1004
+ title="permalink"
1005
+ class="permalink">
1006
+ 🔗
1007
+ </a>
1008
+ </td>
1009
+ <td class="is-vcentered">
1010
+ <pre>#ccd6dbff</pre>
1011
+ </td>
1012
+ <td class="is-vcentered">
1013
+ <div class="table__color-preview"
1014
+ style="background-color: #ccd6dbff;">
1015
+ </div>
1016
+
1017
+ </td>
1018
+ </tr>
935
1019
  <tr>
936
1020
  <td class="with-icons is-vcentered"
937
1021
  id="base-colorsComponentsMenuSummerStandard500"
@@ -986,11 +1070,32 @@
986
1070
  </a>
987
1071
  </td>
988
1072
  <td class="is-vcentered">
989
- <pre>#f2f5f6ff</pre>
1073
+ <pre>#e6ebedff</pre>
990
1074
  </td>
991
1075
  <td class="is-vcentered">
992
1076
  <div class="table__color-preview"
993
- style="background-color: #f2f5f6ff;">
1077
+ style="background-color: #e6ebedff;">
1078
+ </div>
1079
+
1080
+ </td>
1081
+ </tr>
1082
+ <tr>
1083
+ <td class="with-icons is-vcentered"
1084
+ id="base-colorsComponentsMenuSummerStandard800"
1085
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 800; ">
1086
+ colorsComponentsMenuSummerStandard800
1087
+ <a href="#base-colorsComponentsMenuSummerStandard800"
1088
+ title="permalink"
1089
+ class="permalink">
1090
+ 🔗
1091
+ </a>
1092
+ </td>
1093
+ <td class="is-vcentered">
1094
+ <pre>#e6ebedff</pre>
1095
+ </td>
1096
+ <td class="is-vcentered">
1097
+ <div class="table__color-preview"
1098
+ style="background-color: #e6ebedff;">
994
1099
  </div>
995
1100
 
996
1101
  </td>
@@ -1028,11 +1133,11 @@
1028
1133
  </a>
1029
1134
  </td>
1030
1135
  <td class="is-vcentered">
1031
- <pre>#e6ebedff</pre>
1136
+ <pre>#007e45ff</pre>
1032
1137
  </td>
1033
1138
  <td class="is-vcentered">
1034
1139
  <div class="table__color-preview"
1035
- style="background-color: #e6ebedff;">
1140
+ style="background-color: #007e45ff;">
1036
1141
  </div>
1037
1142
 
1038
1143
  </td>
@@ -1049,11 +1154,32 @@
1049
1154
  </a>
1050
1155
  </td>
1051
1156
  <td class="is-vcentered">
1052
- <pre>#f2f5f6ff</pre>
1157
+ <pre>#e6ebedff</pre>
1053
1158
  </td>
1054
1159
  <td class="is-vcentered">
1055
1160
  <div class="table__color-preview"
1056
- style="background-color: #f2f5f6ff;">
1161
+ style="background-color: #e6ebedff;">
1162
+ </div>
1163
+
1164
+ </td>
1165
+ </tr>
1166
+ <tr>
1167
+ <td class="with-icons is-vcentered"
1168
+ id="base-colorsComponentsMenuSummerChild300"
1169
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 300; ">
1170
+ colorsComponentsMenuSummerChild300
1171
+ <a href="#base-colorsComponentsMenuSummerChild300"
1172
+ title="permalink"
1173
+ class="permalink">
1174
+ 🔗
1175
+ </a>
1176
+ </td>
1177
+ <td class="is-vcentered">
1178
+ <pre>#b3c2c9ff</pre>
1179
+ </td>
1180
+ <td class="is-vcentered">
1181
+ <div class="table__color-preview"
1182
+ style="background-color: #b3c2c9ff;">
1057
1183
  </div>
1058
1184
 
1059
1185
  </td>
@@ -1070,11 +1196,11 @@
1070
1196
  </a>
1071
1197
  </td>
1072
1198
  <td class="is-vcentered">
1073
- <pre>#b3c2c9ff</pre>
1199
+ <pre>#ccd6dbff</pre>
1074
1200
  </td>
1075
1201
  <td class="is-vcentered">
1076
1202
  <div class="table__color-preview"
1077
- style="background-color: #b3c2c9ff;">
1203
+ style="background-color: #ccd6dbff;">
1078
1204
  </div>
1079
1205
 
1080
1206
  </td>
@@ -1121,6 +1247,90 @@
1121
1247
 
1122
1248
  </td>
1123
1249
  </tr>
1250
+ <tr>
1251
+ <td class="with-icons is-vcentered"
1252
+ id="base-colorsComponentsMenuSummerChild700"
1253
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 700; ">
1254
+ colorsComponentsMenuSummerChild700
1255
+ <a href="#base-colorsComponentsMenuSummerChild700"
1256
+ title="permalink"
1257
+ class="permalink">
1258
+ 🔗
1259
+ </a>
1260
+ </td>
1261
+ <td class="is-vcentered">
1262
+ <pre>#e6ebedff</pre>
1263
+ </td>
1264
+ <td class="is-vcentered">
1265
+ <div class="table__color-preview"
1266
+ style="background-color: #e6ebedff;">
1267
+ </div>
1268
+
1269
+ </td>
1270
+ </tr>
1271
+ <tr>
1272
+ <td class="with-icons is-vcentered"
1273
+ id="base-colorsComponentsMenuSummerChild800"
1274
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 800; ">
1275
+ colorsComponentsMenuSummerChild800
1276
+ <a href="#base-colorsComponentsMenuSummerChild800"
1277
+ title="permalink"
1278
+ class="permalink">
1279
+ 🔗
1280
+ </a>
1281
+ </td>
1282
+ <td class="is-vcentered">
1283
+ <pre>#e6ebedff</pre>
1284
+ </td>
1285
+ <td class="is-vcentered">
1286
+ <div class="table__color-preview"
1287
+ style="background-color: #e6ebedff;">
1288
+ </div>
1289
+
1290
+ </td>
1291
+ </tr>
1292
+ <tr>
1293
+ <td class="with-icons is-vcentered"
1294
+ id="base-colorsComponentsMenuSummerChildAlt300"
1295
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 300; ">
1296
+ colorsComponentsMenuSummerChildAlt300
1297
+ <a href="#base-colorsComponentsMenuSummerChildAlt300"
1298
+ title="permalink"
1299
+ class="permalink">
1300
+ 🔗
1301
+ </a>
1302
+ </td>
1303
+ <td class="is-vcentered">
1304
+ <pre>#b3c2c9ff</pre>
1305
+ </td>
1306
+ <td class="is-vcentered">
1307
+ <div class="table__color-preview"
1308
+ style="background-color: #b3c2c9ff;">
1309
+ </div>
1310
+
1311
+ </td>
1312
+ </tr>
1313
+ <tr>
1314
+ <td class="with-icons is-vcentered"
1315
+ id="base-colorsComponentsMenuSummerChildAlt400"
1316
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 400; ">
1317
+ colorsComponentsMenuSummerChildAlt400
1318
+ <a href="#base-colorsComponentsMenuSummerChildAlt400"
1319
+ title="permalink"
1320
+ class="permalink">
1321
+ 🔗
1322
+ </a>
1323
+ </td>
1324
+ <td class="is-vcentered">
1325
+ <pre>#ccd6dbff</pre>
1326
+ </td>
1327
+ <td class="is-vcentered">
1328
+ <div class="table__color-preview"
1329
+ style="background-color: #ccd6dbff;">
1330
+ </div>
1331
+
1332
+ </td>
1333
+ </tr>
1124
1334
  <tr>
1125
1335
  <td class="with-icons is-vcentered"
1126
1336
  id="base-colorsComponentsMenuSummerChildAlt500"
@@ -1133,11 +1343,11 @@
1133
1343
  </a>
1134
1344
  </td>
1135
1345
  <td class="is-vcentered">
1136
- <pre>#ccd6dbff</pre>
1346
+ <pre>#d9e0e4ff</pre>
1137
1347
  </td>
1138
1348
  <td class="is-vcentered">
1139
1349
  <div class="table__color-preview"
1140
- style="background-color: #ccd6dbff;">
1350
+ style="background-color: #d9e0e4ff;">
1141
1351
  </div>
1142
1352
 
1143
1353
  </td>
@@ -1163,6 +1373,48 @@
1163
1373
 
1164
1374
  </td>
1165
1375
  </tr>
1376
+ <tr>
1377
+ <td class="with-icons is-vcentered"
1378
+ id="base-colorsComponentsMenuSummerChildAlt700"
1379
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 700; ">
1380
+ colorsComponentsMenuSummerChildAlt700
1381
+ <a href="#base-colorsComponentsMenuSummerChildAlt700"
1382
+ title="permalink"
1383
+ class="permalink">
1384
+ 🔗
1385
+ </a>
1386
+ </td>
1387
+ <td class="is-vcentered">
1388
+ <pre>#d9e0e4ff</pre>
1389
+ </td>
1390
+ <td class="is-vcentered">
1391
+ <div class="table__color-preview"
1392
+ style="background-color: #d9e0e4ff;">
1393
+ </div>
1394
+
1395
+ </td>
1396
+ </tr>
1397
+ <tr>
1398
+ <td class="with-icons is-vcentered"
1399
+ id="base-colorsComponentsMenuSummerChildAlt800"
1400
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 800; ">
1401
+ colorsComponentsMenuSummerChildAlt800
1402
+ <a href="#base-colorsComponentsMenuSummerChildAlt800"
1403
+ title="permalink"
1404
+ class="permalink">
1405
+ 🔗
1406
+ </a>
1407
+ </td>
1408
+ <td class="is-vcentered">
1409
+ <pre>#d9e0e4ff</pre>
1410
+ </td>
1411
+ <td class="is-vcentered">
1412
+ <div class="table__color-preview"
1413
+ style="background-color: #d9e0e4ff;">
1414
+ </div>
1415
+
1416
+ </td>
1417
+ </tr>
1166
1418
  <tr>
1167
1419
  <td class="with-icons is-vcentered"
1168
1420
  id="base-colorsComponentsMenuAutumnStandard500"
@@ -1259,11 +1511,11 @@
1259
1511
  </a>
1260
1512
  </td>
1261
1513
  <td class="is-vcentered">
1262
- <pre>#001926ff</pre>
1514
+ <pre>#007e45ff</pre>
1263
1515
  </td>
1264
1516
  <td class="is-vcentered">
1265
1517
  <div class="table__color-preview"
1266
- style="background-color: #001926ff;">
1518
+ style="background-color: #007e45ff;">
1267
1519
  </div>
1268
1520
 
1269
1521
  </td>
@@ -1352,6 +1604,27 @@
1352
1604
 
1353
1605
  </td>
1354
1606
  </tr>
1607
+ <tr>
1608
+ <td class="with-icons is-vcentered"
1609
+ id="base-colorsComponentsMenuAutumnChildAlt400"
1610
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1611
+ colorsComponentsMenuAutumnChildAlt400
1612
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1613
+ title="permalink"
1614
+ class="permalink">
1615
+ 🔗
1616
+ </a>
1617
+ </td>
1618
+ <td class="is-vcentered">
1619
+ <pre>#19475eff</pre>
1620
+ </td>
1621
+ <td class="is-vcentered">
1622
+ <div class="table__color-preview"
1623
+ style="background-color: #19475eff;">
1624
+ </div>
1625
+
1626
+ </td>
1627
+ </tr>
1355
1628
  <tr>
1356
1629
  <td class="with-icons is-vcentered"
1357
1630
  id="base-colorsComponentsMenuAutumnChildAlt500"
@@ -1490,11 +1763,11 @@
1490
1763
  </a>
1491
1764
  </td>
1492
1765
  <td class="is-vcentered">
1493
- <pre>#000000ff</pre>
1766
+ <pre>#007e45ff</pre>
1494
1767
  </td>
1495
1768
  <td class="is-vcentered">
1496
1769
  <div class="table__color-preview"
1497
- style="background-color: #000000ff;">
1770
+ style="background-color: #007e45ff;">
1498
1771
  </div>
1499
1772
 
1500
1773
  </td>
@@ -1583,6 +1856,27 @@
1583
1856
 
1584
1857
  </td>
1585
1858
  </tr>
1859
+ <tr>
1860
+ <td class="with-icons is-vcentered"
1861
+ id="base-colorsComponentsMenuWinterChildAlt400"
1862
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1863
+ colorsComponentsMenuWinterChildAlt400
1864
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1865
+ title="permalink"
1866
+ class="permalink">
1867
+ 🔗
1868
+ </a>
1869
+ </td>
1870
+ <td class="is-vcentered">
1871
+ <pre>#262626ff</pre>
1872
+ </td>
1873
+ <td class="is-vcentered">
1874
+ <div class="table__color-preview"
1875
+ style="background-color: #262626ff;">
1876
+ </div>
1877
+
1878
+ </td>
1879
+ </tr>
1586
1880
  <tr>
1587
1881
  <td class="with-icons is-vcentered"
1588
1882
  id="base-colorsComponentsMenuWinterChildAlt500"
@@ -1595,11 +1889,11 @@
1595
1889
  </a>
1596
1890
  </td>
1597
1891
  <td class="is-vcentered">
1598
- <pre>#1a1a1aff</pre>
1892
+ <pre>#191919ff</pre>
1599
1893
  </td>
1600
1894
  <td class="is-vcentered">
1601
1895
  <div class="table__color-preview"
1602
- style="background-color: #1a1a1aff;">
1896
+ style="background-color: #191919ff;">
1603
1897
  </div>
1604
1898
 
1605
1899
  </td>
@@ -7121,6 +7415,27 @@
7121
7415
 
7122
7416
  </td>
7123
7417
  </tr>
7418
+ <tr>
7419
+ <td class="with-icons is-vcentered"
7420
+ id="base-typographyMenuLabelL"
7421
+ title="theme: base; category: typography; group: menu; name: label; variant: l; ">
7422
+ typographyMenuLabelL
7423
+ <a href="#base-typographyMenuLabelL"
7424
+ title="permalink"
7425
+ class="permalink">
7426
+ 🔗
7427
+ </a>
7428
+ </td>
7429
+ <td class="is-vcentered">
7430
+ <pre>500 16px/150% Sage UI</pre>
7431
+ </td>
7432
+ <td class="is-vcentered">
7433
+ <div class="table__typography-preview">
7434
+ n/a
7435
+ </div>
7436
+
7437
+ </td>
7438
+ </tr>
7124
7439
  <tr>
7125
7440
  <td class="with-icons is-vcentered"
7126
7441
  id="base-typographyMenuSegmentTitleM"
@@ -7354,10 +7669,157 @@
7354
7669
  </tr>
7355
7670
  <tr>
7356
7671
  <td class="with-icons is-vcentered"
7357
- id="base-typographyProfileEmailXs"
7358
- title="theme: base; category: typography; group: profile; name: email; variant: xs; ">
7359
- typographyProfileEmailXs
7360
- <a href="#base-typographyProfileEmailXs"
7672
+ id="base-typographyProfileEmailTextXs"
7673
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xs; ">
7674
+ typographyProfileEmailTextXs
7675
+ <a href="#base-typographyProfileEmailTextXs"
7676
+ title="permalink"
7677
+ class="permalink">
7678
+ 🔗
7679
+ </a>
7680
+ </td>
7681
+ <td class="is-vcentered">
7682
+ <pre>400 12px/100% Sage UI</pre>
7683
+ </td>
7684
+ <td class="is-vcentered">
7685
+ <div class="table__typography-preview">
7686
+ n/a
7687
+ </div>
7688
+
7689
+ </td>
7690
+ </tr>
7691
+ <tr>
7692
+ <td class="with-icons is-vcentered"
7693
+ id="base-typographyProfileEmailTextS"
7694
+ title="theme: base; category: typography; group: profile; name: emailText; variant: s; ">
7695
+ typographyProfileEmailTextS
7696
+ <a href="#base-typographyProfileEmailTextS"
7697
+ title="permalink"
7698
+ class="permalink">
7699
+ 🔗
7700
+ </a>
7701
+ </td>
7702
+ <td class="is-vcentered">
7703
+ <pre>400 14px/100% Sage UI</pre>
7704
+ </td>
7705
+ <td class="is-vcentered">
7706
+ <div class="table__typography-preview">
7707
+ n/a
7708
+ </div>
7709
+
7710
+ </td>
7711
+ </tr>
7712
+ <tr>
7713
+ <td class="with-icons is-vcentered"
7714
+ id="base-typographyProfileEmailTextM"
7715
+ title="theme: base; category: typography; group: profile; name: emailText; variant: m; ">
7716
+ typographyProfileEmailTextM
7717
+ <a href="#base-typographyProfileEmailTextM"
7718
+ title="permalink"
7719
+ class="permalink">
7720
+ 🔗
7721
+ </a>
7722
+ </td>
7723
+ <td class="is-vcentered">
7724
+ <pre>400 14px/125% Sage UI</pre>
7725
+ </td>
7726
+ <td class="is-vcentered">
7727
+ <div class="table__typography-preview">
7728
+ n/a
7729
+ </div>
7730
+
7731
+ </td>
7732
+ </tr>
7733
+ <tr>
7734
+ <td class="with-icons is-vcentered"
7735
+ id="base-typographyProfileEmailTextMl"
7736
+ title="theme: base; category: typography; group: profile; name: emailText; variant: ml; ">
7737
+ typographyProfileEmailTextMl
7738
+ <a href="#base-typographyProfileEmailTextMl"
7739
+ title="permalink"
7740
+ class="permalink">
7741
+ 🔗
7742
+ </a>
7743
+ </td>
7744
+ <td class="is-vcentered">
7745
+ <pre>400 14px/125% Sage UI</pre>
7746
+ </td>
7747
+ <td class="is-vcentered">
7748
+ <div class="table__typography-preview">
7749
+ n/a
7750
+ </div>
7751
+
7752
+ </td>
7753
+ </tr>
7754
+ <tr>
7755
+ <td class="with-icons is-vcentered"
7756
+ id="base-typographyProfileEmailTextL"
7757
+ title="theme: base; category: typography; group: profile; name: emailText; variant: l; ">
7758
+ typographyProfileEmailTextL
7759
+ <a href="#base-typographyProfileEmailTextL"
7760
+ title="permalink"
7761
+ class="permalink">
7762
+ 🔗
7763
+ </a>
7764
+ </td>
7765
+ <td class="is-vcentered">
7766
+ <pre>400 14px/125% Sage UI</pre>
7767
+ </td>
7768
+ <td class="is-vcentered">
7769
+ <div class="table__typography-preview">
7770
+ n/a
7771
+ </div>
7772
+
7773
+ </td>
7774
+ </tr>
7775
+ <tr>
7776
+ <td class="with-icons is-vcentered"
7777
+ id="base-typographyProfileEmailTextXl"
7778
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xl; ">
7779
+ typographyProfileEmailTextXl
7780
+ <a href="#base-typographyProfileEmailTextXl"
7781
+ title="permalink"
7782
+ class="permalink">
7783
+ 🔗
7784
+ </a>
7785
+ </td>
7786
+ <td class="is-vcentered">
7787
+ <pre>400 18px/125% Sage UI</pre>
7788
+ </td>
7789
+ <td class="is-vcentered">
7790
+ <div class="table__typography-preview">
7791
+ n/a
7792
+ </div>
7793
+
7794
+ </td>
7795
+ </tr>
7796
+ <tr>
7797
+ <td class="with-icons is-vcentered"
7798
+ id="base-typographyProfileEmailTextXxl"
7799
+ title="theme: base; category: typography; group: profile; name: emailText; variant: xxl; ">
7800
+ typographyProfileEmailTextXxl
7801
+ <a href="#base-typographyProfileEmailTextXxl"
7802
+ title="permalink"
7803
+ class="permalink">
7804
+ 🔗
7805
+ </a>
7806
+ </td>
7807
+ <td class="is-vcentered">
7808
+ <pre>400 24px/125% Sage UI</pre>
7809
+ </td>
7810
+ <td class="is-vcentered">
7811
+ <div class="table__typography-preview">
7812
+ n/a
7813
+ </div>
7814
+
7815
+ </td>
7816
+ </tr>
7817
+ <tr>
7818
+ <td class="with-icons is-vcentered"
7819
+ id="base-typographyProfileEmailLinkXs"
7820
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xs; ">
7821
+ typographyProfileEmailLinkXs
7822
+ <a href="#base-typographyProfileEmailLinkXs"
7361
7823
  title="permalink"
7362
7824
  class="permalink">
7363
7825
  🔗
@@ -7375,10 +7837,10 @@
7375
7837
  </tr>
7376
7838
  <tr>
7377
7839
  <td class="with-icons is-vcentered"
7378
- id="base-typographyProfileEmailS"
7379
- title="theme: base; category: typography; group: profile; name: email; variant: s; ">
7380
- typographyProfileEmailS
7381
- <a href="#base-typographyProfileEmailS"
7840
+ id="base-typographyProfileEmailLinkS"
7841
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: s; ">
7842
+ typographyProfileEmailLinkS
7843
+ <a href="#base-typographyProfileEmailLinkS"
7382
7844
  title="permalink"
7383
7845
  class="permalink">
7384
7846
  🔗
@@ -7396,10 +7858,10 @@
7396
7858
  </tr>
7397
7859
  <tr>
7398
7860
  <td class="with-icons is-vcentered"
7399
- id="base-typographyProfileEmailM"
7400
- title="theme: base; category: typography; group: profile; name: email; variant: m; ">
7401
- typographyProfileEmailM
7402
- <a href="#base-typographyProfileEmailM"
7861
+ id="base-typographyProfileEmailLinkM"
7862
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: m; ">
7863
+ typographyProfileEmailLinkM
7864
+ <a href="#base-typographyProfileEmailLinkM"
7403
7865
  title="permalink"
7404
7866
  class="permalink">
7405
7867
  🔗
@@ -7417,10 +7879,10 @@
7417
7879
  </tr>
7418
7880
  <tr>
7419
7881
  <td class="with-icons is-vcentered"
7420
- id="base-typographyProfileEmailMl"
7421
- title="theme: base; category: typography; group: profile; name: email; variant: ml; ">
7422
- typographyProfileEmailMl
7423
- <a href="#base-typographyProfileEmailMl"
7882
+ id="base-typographyProfileEmailLinkMl"
7883
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: ml; ">
7884
+ typographyProfileEmailLinkMl
7885
+ <a href="#base-typographyProfileEmailLinkMl"
7424
7886
  title="permalink"
7425
7887
  class="permalink">
7426
7888
  🔗
@@ -7438,10 +7900,10 @@
7438
7900
  </tr>
7439
7901
  <tr>
7440
7902
  <td class="with-icons is-vcentered"
7441
- id="base-typographyProfileEmailL"
7442
- title="theme: base; category: typography; group: profile; name: email; variant: l; ">
7443
- typographyProfileEmailL
7444
- <a href="#base-typographyProfileEmailL"
7903
+ id="base-typographyProfileEmailLinkL"
7904
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: l; ">
7905
+ typographyProfileEmailLinkL
7906
+ <a href="#base-typographyProfileEmailLinkL"
7445
7907
  title="permalink"
7446
7908
  class="permalink">
7447
7909
  🔗
@@ -7459,10 +7921,10 @@
7459
7921
  </tr>
7460
7922
  <tr>
7461
7923
  <td class="with-icons is-vcentered"
7462
- id="base-typographyProfileEmailXl"
7463
- title="theme: base; category: typography; group: profile; name: email; variant: xl; ">
7464
- typographyProfileEmailXl
7465
- <a href="#base-typographyProfileEmailXl"
7924
+ id="base-typographyProfileEmailLinkXl"
7925
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xl; ">
7926
+ typographyProfileEmailLinkXl
7927
+ <a href="#base-typographyProfileEmailLinkXl"
7466
7928
  title="permalink"
7467
7929
  class="permalink">
7468
7930
  🔗
@@ -7480,10 +7942,10 @@
7480
7942
  </tr>
7481
7943
  <tr>
7482
7944
  <td class="with-icons is-vcentered"
7483
- id="base-typographyProfileEmailXxl"
7484
- title="theme: base; category: typography; group: profile; name: email; variant: xxl; ">
7485
- typographyProfileEmailXxl
7486
- <a href="#base-typographyProfileEmailXxl"
7945
+ id="base-typographyProfileEmailLinkXxl"
7946
+ title="theme: base; category: typography; group: profile; name: emailLink; variant: xxl; ">
7947
+ typographyProfileEmailLinkXxl
7948
+ <a href="#base-typographyProfileEmailLinkXxl"
7487
7949
  title="permalink"
7488
7950
  class="permalink">
7489
7951
  🔗