@sage/design-tokens 2.0.0 → 2.1.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 (22) hide show
  1. package/README.md +0 -1
  2. package/android/base.xml +17 -13
  3. package/android/no-theme.xml +1 -1
  4. package/css/base.css +17 -13
  5. package/css/no-theme.css +1 -1
  6. package/data/tokens.json +187 -147
  7. package/docs/tokens/base/colors/index.html +84 -0
  8. package/docs/tokens/base/index.html +325 -241
  9. package/docs/tokens/base/typography/index.html +241 -241
  10. package/docs/tokens/index.html +325 -241
  11. package/ios/base.h +17 -13
  12. package/ios/no-theme.h +1 -1
  13. package/js/base/common.d.ts +16 -12
  14. package/js/base/common.js +17 -13
  15. package/js/base/es6.d.ts +16 -12
  16. package/js/base/es6.js +16 -12
  17. package/js/no-theme/common.js +1 -1
  18. package/package.json +1 -1
  19. package/sage-design-tokens-2.1.0.tgz +0 -0
  20. package/scss/base.scss +17 -13
  21. package/scss/no-theme.scss +1 -1
  22. package/sage-design-tokens-2.0.0.tgz +0 -0
package/docs/tokens/index.html CHANGED
@@ -529,6 +529,27 @@
529
529
 
530
530
  </td>
531
531
  </tr>
532
+ <tr>
533
+ <td class="with-icons is-vcentered"
534
+ id="base-colorsYang030"
535
+ title="theme: base; category: colors; name: yang; variant: 030; ">
536
+ colorsYang030
537
+ <a href="#base-colorsYang030"
538
+ title="permalink"
539
+ class="permalink">
540
+ 🔗
541
+ </a>
542
+ </td>
543
+ <td class="is-vcentered">
544
+ <pre>#ffffff4d</pre>
545
+ </td>
546
+ <td class="is-vcentered">
547
+ <div class="table__color-preview"
548
+ style="background-color: #ffffff4d;">
549
+ </div>
550
+
551
+ </td>
552
+ </tr>
532
553
  <tr>
533
554
  <td class="with-icons is-vcentered"
534
555
  id="base-colorsYang080"
@@ -2314,6 +2335,48 @@
2314
2335
 
2315
2336
  </td>
2316
2337
  </tr>
2338
+ <tr>
2339
+ <td class="with-icons is-vcentered"
2340
+ id="base-colorsActionMajor350"
2341
+ title="theme: base; category: colors; group: action; name: major; variant: 350; ">
2342
+ colorsActionMajor350
2343
+ <a href="#base-colorsActionMajor350"
2344
+ title="permalink"
2345
+ class="permalink">
2346
+ 🔗
2347
+ </a>
2348
+ </td>
2349
+ <td class="is-vcentered">
2350
+ <pre>#4da77eff</pre>
2351
+ </td>
2352
+ <td class="is-vcentered">
2353
+ <div class="table__color-preview"
2354
+ style="background-color: #4da77eff;">
2355
+ </div>
2356
+
2357
+ </td>
2358
+ </tr>
2359
+ <tr>
2360
+ <td class="with-icons is-vcentered"
2361
+ id="base-colorsActionMajor450"
2362
+ title="theme: base; category: colors; group: action; name: major; variant: 450; ">
2363
+ colorsActionMajor450
2364
+ <a href="#base-colorsActionMajor450"
2365
+ title="permalink"
2366
+ class="permalink">
2367
+ 🔗
2368
+ </a>
2369
+ </td>
2370
+ <td class="is-vcentered">
2371
+ <pre>#198e59ff</pre>
2372
+ </td>
2373
+ <td class="is-vcentered">
2374
+ <div class="table__color-preview"
2375
+ style="background-color: #198e59ff;">
2376
+ </div>
2377
+
2378
+ </td>
2379
+ </tr>
2317
2380
  <tr>
2318
2381
  <td class="with-icons is-vcentered"
2319
2382
  id="base-colorsActionMajor500"
@@ -2524,6 +2587,27 @@
2524
2587
 
2525
2588
  </td>
2526
2589
  </tr>
2590
+ <tr>
2591
+ <td class="with-icons is-vcentered"
2592
+ id="base-colorsActionMajorYang030"
2593
+ title="theme: base; category: colors; group: action; name: major; subgroup: yang; variant: 030; ">
2594
+ colorsActionMajorYang030
2595
+ <a href="#base-colorsActionMajorYang030"
2596
+ title="permalink"
2597
+ class="permalink">
2598
+ 🔗
2599
+ </a>
2600
+ </td>
2601
+ <td class="is-vcentered">
2602
+ <pre>#ffffff4d</pre>
2603
+ </td>
2604
+ <td class="is-vcentered">
2605
+ <div class="table__color-preview"
2606
+ style="background-color: #ffffff4d;">
2607
+ </div>
2608
+
2609
+ </td>
2610
+ </tr>
2527
2611
  <tr>
2528
2612
  <td class="with-icons is-vcentered"
2529
2613
  id="base-colorsActionMinor100"
@@ -6222,69 +6306,6 @@
6222
6306
 
6223
6307
  </td>
6224
6308
  </tr>
6225
- <tr>
6226
- <td class="with-icons is-vcentered"
6227
- id="base-typographyDialogTitleXs"
6228
- title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
6229
- typographyDialogTitleXs
6230
- <a href="#base-typographyDialogTitleXs"
6231
- title="permalink"
6232
- class="permalink">
6233
- 🔗
6234
- </a>
6235
- </td>
6236
- <td class="is-vcentered">
6237
- <pre>700 24px/125% Sage UI</pre>
6238
- </td>
6239
- <td class="is-vcentered">
6240
- <div class="table__typography-preview">
6241
- n/a
6242
- </div>
6243
-
6244
- </td>
6245
- </tr>
6246
- <tr>
6247
- <td class="with-icons is-vcentered"
6248
- id="base-typographyDialogTitleS"
6249
- title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
6250
- typographyDialogTitleS
6251
- <a href="#base-typographyDialogTitleS"
6252
- title="permalink"
6253
- class="permalink">
6254
- 🔗
6255
- </a>
6256
- </td>
6257
- <td class="is-vcentered">
6258
- <pre>700 24px/125% Sage UI</pre>
6259
- </td>
6260
- <td class="is-vcentered">
6261
- <div class="table__typography-preview">
6262
- n/a
6263
- </div>
6264
-
6265
- </td>
6266
- </tr>
6267
- <tr>
6268
- <td class="with-icons is-vcentered"
6269
- id="base-typographyDialogTitleMs"
6270
- title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
6271
- typographyDialogTitleMs
6272
- <a href="#base-typographyDialogTitleMs"
6273
- title="permalink"
6274
- class="permalink">
6275
- 🔗
6276
- </a>
6277
- </td>
6278
- <td class="is-vcentered">
6279
- <pre>700 24px/125% Sage UI</pre>
6280
- </td>
6281
- <td class="is-vcentered">
6282
- <div class="table__typography-preview">
6283
- n/a
6284
- </div>
6285
-
6286
- </td>
6287
- </tr>
6288
6309
  <tr>
6289
6310
  <td class="with-icons is-vcentered"
6290
6311
  id="base-typographyDialogTitleM"
@@ -6306,132 +6327,6 @@
6306
6327
 
6307
6328
  </td>
6308
6329
  </tr>
6309
- <tr>
6310
- <td class="with-icons is-vcentered"
6311
- id="base-typographyDialogTitleMl"
6312
- title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
6313
- typographyDialogTitleMl
6314
- <a href="#base-typographyDialogTitleMl"
6315
- title="permalink"
6316
- class="permalink">
6317
- 🔗
6318
- </a>
6319
- </td>
6320
- <td class="is-vcentered">
6321
- <pre>700 24px/125% Sage UI</pre>
6322
- </td>
6323
- <td class="is-vcentered">
6324
- <div class="table__typography-preview">
6325
- n/a
6326
- </div>
6327
-
6328
- </td>
6329
- </tr>
6330
- <tr>
6331
- <td class="with-icons is-vcentered"
6332
- id="base-typographyDialogTitleL"
6333
- title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
6334
- typographyDialogTitleL
6335
- <a href="#base-typographyDialogTitleL"
6336
- title="permalink"
6337
- class="permalink">
6338
- 🔗
6339
- </a>
6340
- </td>
6341
- <td class="is-vcentered">
6342
- <pre>700 24px/125% Sage UI</pre>
6343
- </td>
6344
- <td class="is-vcentered">
6345
- <div class="table__typography-preview">
6346
- n/a
6347
- </div>
6348
-
6349
- </td>
6350
- </tr>
6351
- <tr>
6352
- <td class="with-icons is-vcentered"
6353
- id="base-typographyDialogTitleXl"
6354
- title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
6355
- typographyDialogTitleXl
6356
- <a href="#base-typographyDialogTitleXl"
6357
- title="permalink"
6358
- class="permalink">
6359
- 🔗
6360
- </a>
6361
- </td>
6362
- <td class="is-vcentered">
6363
- <pre>700 24px/125% Sage UI</pre>
6364
- </td>
6365
- <td class="is-vcentered">
6366
- <div class="table__typography-preview">
6367
- n/a
6368
- </div>
6369
-
6370
- </td>
6371
- </tr>
6372
- <tr>
6373
- <td class="with-icons is-vcentered"
6374
- id="base-typographyDialogParagraphXs"
6375
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
6376
- typographyDialogParagraphXs
6377
- <a href="#base-typographyDialogParagraphXs"
6378
- title="permalink"
6379
- class="permalink">
6380
- 🔗
6381
- </a>
6382
- </td>
6383
- <td class="is-vcentered">
6384
- <pre>400 14px/150% Sage UI</pre>
6385
- </td>
6386
- <td class="is-vcentered">
6387
- <div class="table__typography-preview">
6388
- n/a
6389
- </div>
6390
-
6391
- </td>
6392
- </tr>
6393
- <tr>
6394
- <td class="with-icons is-vcentered"
6395
- id="base-typographyDialogParagraphS"
6396
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
6397
- typographyDialogParagraphS
6398
- <a href="#base-typographyDialogParagraphS"
6399
- title="permalink"
6400
- class="permalink">
6401
- 🔗
6402
- </a>
6403
- </td>
6404
- <td class="is-vcentered">
6405
- <pre>400 14px/150% Sage UI</pre>
6406
- </td>
6407
- <td class="is-vcentered">
6408
- <div class="table__typography-preview">
6409
- n/a
6410
- </div>
6411
-
6412
- </td>
6413
- </tr>
6414
- <tr>
6415
- <td class="with-icons is-vcentered"
6416
- id="base-typographyDialogParagraphMs"
6417
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
6418
- typographyDialogParagraphMs
6419
- <a href="#base-typographyDialogParagraphMs"
6420
- title="permalink"
6421
- class="permalink">
6422
- 🔗
6423
- </a>
6424
- </td>
6425
- <td class="is-vcentered">
6426
- <pre>400 14px/150% Sage UI</pre>
6427
- </td>
6428
- <td class="is-vcentered">
6429
- <div class="table__typography-preview">
6430
- n/a
6431
- </div>
6432
-
6433
- </td>
6434
- </tr>
6435
6330
  <tr>
6436
6331
  <td class="with-icons is-vcentered"
6437
6332
  id="base-typographyDialogParagraphM"
@@ -6455,59 +6350,17 @@
6455
6350
  </tr>
6456
6351
  <tr>
6457
6352
  <td class="with-icons is-vcentered"
6458
- id="base-typographyDialogParagraphMl"
6459
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
6460
- typographyDialogParagraphMl
6461
- <a href="#base-typographyDialogParagraphMl"
6462
- title="permalink"
6463
- class="permalink">
6464
- 🔗
6465
- </a>
6466
- </td>
6467
- <td class="is-vcentered">
6468
- <pre>400 14px/150% Sage UI</pre>
6469
- </td>
6470
- <td class="is-vcentered">
6471
- <div class="table__typography-preview">
6472
- n/a
6473
- </div>
6474
-
6475
- </td>
6476
- </tr>
6477
- <tr>
6478
- <td class="with-icons is-vcentered"
6479
- id="base-typographyDialogParagraphL"
6480
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
6481
- typographyDialogParagraphL
6482
- <a href="#base-typographyDialogParagraphL"
6483
- title="permalink"
6484
- class="permalink">
6485
- 🔗
6486
- </a>
6487
- </td>
6488
- <td class="is-vcentered">
6489
- <pre>400 14px/150% Sage UI</pre>
6490
- </td>
6491
- <td class="is-vcentered">
6492
- <div class="table__typography-preview">
6493
- n/a
6494
- </div>
6495
-
6496
- </td>
6497
- </tr>
6498
- <tr>
6499
- <td class="with-icons is-vcentered"
6500
- id="base-typographyDialogParagraphXl"
6501
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
6502
- typographyDialogParagraphXl
6503
- <a href="#base-typographyDialogParagraphXl"
6353
+ id="base-typographyDrawerTitleM"
6354
+ title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
6355
+ typographyDrawerTitleM
6356
+ <a href="#base-typographyDrawerTitleM"
6504
6357
  title="permalink"
6505
6358
  class="permalink">
6506
6359
  🔗
6507
6360
  </a>
6508
6361
  </td>
6509
6362
  <td class="is-vcentered">
6510
- <pre>400 14px/150% Sage UI</pre>
6363
+ <pre>700 22px/125% Sage UI</pre>
6511
6364
  </td>
6512
6365
  <td class="is-vcentered">
6513
6366
  <div class="table__typography-preview">
@@ -6518,17 +6371,17 @@
6518
6371
  </tr>
6519
6372
  <tr>
6520
6373
  <td class="with-icons is-vcentered"
6521
- id="base-typographyDrawerTitleM"
6522
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
6523
- typographyDrawerTitleM
6524
- <a href="#base-typographyDrawerTitleM"
6374
+ id="base-typographyDrawerParagraphM"
6375
+ title="theme: base; category: typography; group: drawer; name: paragraph; variant: m; ">
6376
+ typographyDrawerParagraphM
6377
+ <a href="#base-typographyDrawerParagraphM"
6525
6378
  title="permalink"
6526
6379
  class="permalink">
6527
6380
  🔗
6528
6381
  </a>
6529
6382
  </td>
6530
6383
  <td class="is-vcentered">
6531
- <pre>700 22px/125% Sage UI</pre>
6384
+ <pre>0 none</pre>
6532
6385
  </td>
6533
6386
  <td class="is-vcentered">
6534
6387
  <div class="table__typography-preview">
@@ -7251,6 +7104,27 @@
7251
7104
 
7252
7105
  </td>
7253
7106
  </tr>
7107
+ <tr>
7108
+ <td class="with-icons is-vcentered"
7109
+ id="base-typographyLinkTextS"
7110
+ title="theme: base; category: typography; group: link; name: text; variant: s; ">
7111
+ typographyLinkTextS
7112
+ <a href="#base-typographyLinkTextS"
7113
+ title="permalink"
7114
+ class="permalink">
7115
+ 🔗
7116
+ </a>
7117
+ </td>
7118
+ <td class="is-vcentered">
7119
+ <pre>400 12px/150% Sage UI</pre>
7120
+ </td>
7121
+ <td class="is-vcentered">
7122
+ <div class="table__typography-preview">
7123
+ n/a
7124
+ </div>
7125
+
7126
+ </td>
7127
+ </tr>
7254
7128
  <tr>
7255
7129
  <td class="with-icons is-vcentered"
7256
7130
  id="base-typographyLinkTextM"
@@ -7440,6 +7314,27 @@
7440
7314
 
7441
7315
  </td>
7442
7316
  </tr>
7317
+ <tr>
7318
+ <td class="with-icons is-vcentered"
7319
+ id="base-typographyTileParagraphM"
7320
+ title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
7321
+ typographyTileParagraphM
7322
+ <a href="#base-typographyTileParagraphM"
7323
+ title="permalink"
7324
+ class="permalink">
7325
+ 🔗
7326
+ </a>
7327
+ </td>
7328
+ <td class="is-vcentered">
7329
+ <pre>400 14px/150% Sage UI</pre>
7330
+ </td>
7331
+ <td class="is-vcentered">
7332
+ <div class="table__typography-preview">
7333
+ n/a
7334
+ </div>
7335
+
7336
+ </td>
7337
+ </tr>
7443
7338
  <tr>
7444
7339
  <td class="with-icons is-vcentered"
7445
7340
  id="base-typographyPillLabelS"
@@ -8112,6 +8007,27 @@
8112
8007
 
8113
8008
  </td>
8114
8009
  </tr>
8010
+ <tr>
8011
+ <td class="with-icons is-vcentered"
8012
+ id="base-typographySidebarParagraphM"
8013
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: m; ">
8014
+ typographySidebarParagraphM
8015
+ <a href="#base-typographySidebarParagraphM"
8016
+ title="permalink"
8017
+ class="permalink">
8018
+ 🔗
8019
+ </a>
8020
+ </td>
8021
+ <td class="is-vcentered">
8022
+ <pre>0 none</pre>
8023
+ </td>
8024
+ <td class="is-vcentered">
8025
+ <div class="table__typography-preview">
8026
+ n/a
8027
+ </div>
8028
+
8029
+ </td>
8030
+ </tr>
8115
8031
  <tr>
8116
8032
  <td class="with-icons is-vcentered"
8117
8033
  id="base-typographyStepFlowCompleteLabelM"
@@ -8217,6 +8133,48 @@
8217
8133
 
8218
8134
  </td>
8219
8135
  </tr>
8136
+ <tr>
8137
+ <td class="with-icons is-vcentered"
8138
+ id="base-typographyTableHeaderTextXs"
8139
+ title="theme: base; category: typography; group: table; name: headerText; variant: xs; ">
8140
+ typographyTableHeaderTextXs
8141
+ <a href="#base-typographyTableHeaderTextXs"
8142
+ title="permalink"
8143
+ class="permalink">
8144
+ 🔗
8145
+ </a>
8146
+ </td>
8147
+ <td class="is-vcentered">
8148
+ <pre>500 13px/150% Sage UI</pre>
8149
+ </td>
8150
+ <td class="is-vcentered">
8151
+ <div class="table__typography-preview">
8152
+ n/a
8153
+ </div>
8154
+
8155
+ </td>
8156
+ </tr>
8157
+ <tr>
8158
+ <td class="with-icons is-vcentered"
8159
+ id="base-typographyTableHeaderTextS"
8160
+ title="theme: base; category: typography; group: table; name: headerText; variant: s; ">
8161
+ typographyTableHeaderTextS
8162
+ <a href="#base-typographyTableHeaderTextS"
8163
+ title="permalink"
8164
+ class="permalink">
8165
+ 🔗
8166
+ </a>
8167
+ </td>
8168
+ <td class="is-vcentered">
8169
+ <pre>500 14px/150% Sage UI</pre>
8170
+ </td>
8171
+ <td class="is-vcentered">
8172
+ <div class="table__typography-preview">
8173
+ n/a
8174
+ </div>
8175
+
8176
+ </td>
8177
+ </tr>
8220
8178
  <tr>
8221
8179
  <td class="with-icons is-vcentered"
8222
8180
  id="base-typographyTableHeaderTextM"
@@ -8238,6 +8196,90 @@
8238
8196
 
8239
8197
  </td>
8240
8198
  </tr>
8199
+ <tr>
8200
+ <td class="with-icons is-vcentered"
8201
+ id="base-typographyTableHeaderTextL"
8202
+ title="theme: base; category: typography; group: table; name: headerText; variant: l; ">
8203
+ typographyTableHeaderTextL
8204
+ <a href="#base-typographyTableHeaderTextL"
8205
+ title="permalink"
8206
+ class="permalink">
8207
+ 🔗
8208
+ </a>
8209
+ </td>
8210
+ <td class="is-vcentered">
8211
+ <pre>500 16px/150% Sage UI</pre>
8212
+ </td>
8213
+ <td class="is-vcentered">
8214
+ <div class="table__typography-preview">
8215
+ n/a
8216
+ </div>
8217
+
8218
+ </td>
8219
+ </tr>
8220
+ <tr>
8221
+ <td class="with-icons is-vcentered"
8222
+ id="base-typographyTableHeaderTextXl"
8223
+ title="theme: base; category: typography; group: table; name: headerText; variant: xl; ">
8224
+ typographyTableHeaderTextXl
8225
+ <a href="#base-typographyTableHeaderTextXl"
8226
+ title="permalink"
8227
+ class="permalink">
8228
+ 🔗
8229
+ </a>
8230
+ </td>
8231
+ <td class="is-vcentered">
8232
+ <pre>500 16px/150% Sage UI</pre>
8233
+ </td>
8234
+ <td class="is-vcentered">
8235
+ <div class="table__typography-preview">
8236
+ n/a
8237
+ </div>
8238
+
8239
+ </td>
8240
+ </tr>
8241
+ <tr>
8242
+ <td class="with-icons is-vcentered"
8243
+ id="base-typographyTableCellTextXs"
8244
+ title="theme: base; category: typography; group: table; name: cellText; variant: xs; ">
8245
+ typographyTableCellTextXs
8246
+ <a href="#base-typographyTableCellTextXs"
8247
+ title="permalink"
8248
+ class="permalink">
8249
+ 🔗
8250
+ </a>
8251
+ </td>
8252
+ <td class="is-vcentered">
8253
+ <pre>400 13px/150% Sage UI</pre>
8254
+ </td>
8255
+ <td class="is-vcentered">
8256
+ <div class="table__typography-preview">
8257
+ n/a
8258
+ </div>
8259
+
8260
+ </td>
8261
+ </tr>
8262
+ <tr>
8263
+ <td class="with-icons is-vcentered"
8264
+ id="base-typographyTableCellTextS"
8265
+ title="theme: base; category: typography; group: table; name: cellText; variant: s; ">
8266
+ typographyTableCellTextS
8267
+ <a href="#base-typographyTableCellTextS"
8268
+ title="permalink"
8269
+ class="permalink">
8270
+ 🔗
8271
+ </a>
8272
+ </td>
8273
+ <td class="is-vcentered">
8274
+ <pre>400 14px/150% Sage UI</pre>
8275
+ </td>
8276
+ <td class="is-vcentered">
8277
+ <div class="table__typography-preview">
8278
+ n/a
8279
+ </div>
8280
+
8281
+ </td>
8282
+ </tr>
8241
8283
  <tr>
8242
8284
  <td class="with-icons is-vcentered"
8243
8285
  id="base-typographyTableCellTextM"
@@ -8259,6 +8301,48 @@
8259
8301
 
8260
8302
  </td>
8261
8303
  </tr>
8304
+ <tr>
8305
+ <td class="with-icons is-vcentered"
8306
+ id="base-typographyTableCellTextL"
8307
+ title="theme: base; category: typography; group: table; name: cellText; variant: l; ">
8308
+ typographyTableCellTextL
8309
+ <a href="#base-typographyTableCellTextL"
8310
+ title="permalink"
8311
+ class="permalink">
8312
+ 🔗
8313
+ </a>
8314
+ </td>
8315
+ <td class="is-vcentered">
8316
+ <pre>400 16px/150% Sage UI</pre>
8317
+ </td>
8318
+ <td class="is-vcentered">
8319
+ <div class="table__typography-preview">
8320
+ n/a
8321
+ </div>
8322
+
8323
+ </td>
8324
+ </tr>
8325
+ <tr>
8326
+ <td class="with-icons is-vcentered"
8327
+ id="base-typographyTableCellTextXl"
8328
+ title="theme: base; category: typography; group: table; name: cellText; variant: xl; ">
8329
+ typographyTableCellTextXl
8330
+ <a href="#base-typographyTableCellTextXl"
8331
+ title="permalink"
8332
+ class="permalink">
8333
+ 🔗
8334
+ </a>
8335
+ </td>
8336
+ <td class="is-vcentered">
8337
+ <pre>400 16px/150% Sage UI</pre>
8338
+ </td>
8339
+ <td class="is-vcentered">
8340
+ <div class="table__typography-preview">
8341
+ n/a
8342
+ </div>
8343
+
8344
+ </td>
8345
+ </tr>
8262
8346
  <tr>
8263
8347
  <td class="with-icons is-vcentered"
8264
8348
  id="base-typographyTooltipTextM"