@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/base/index.html CHANGED
@@ -523,6 +523,27 @@
523
523
 
524
524
  </td>
525
525
  </tr>
526
+ <tr>
527
+ <td class="with-icons is-vcentered"
528
+ id="base-colorsYang030"
529
+ title="theme: base; category: colors; name: yang; variant: 030; ">
530
+ colorsYang030
531
+ <a href="#base-colorsYang030"
532
+ title="permalink"
533
+ class="permalink">
534
+ 🔗
535
+ </a>
536
+ </td>
537
+ <td class="is-vcentered">
538
+ <pre>#ffffff4d</pre>
539
+ </td>
540
+ <td class="is-vcentered">
541
+ <div class="table__color-preview"
542
+ style="background-color: #ffffff4d;">
543
+ </div>
544
+
545
+ </td>
546
+ </tr>
526
547
  <tr>
527
548
  <td class="with-icons is-vcentered"
528
549
  id="base-colorsYang080"
@@ -2308,6 +2329,48 @@
2308
2329
 
2309
2330
  </td>
2310
2331
  </tr>
2332
+ <tr>
2333
+ <td class="with-icons is-vcentered"
2334
+ id="base-colorsActionMajor350"
2335
+ title="theme: base; category: colors; group: action; name: major; variant: 350; ">
2336
+ colorsActionMajor350
2337
+ <a href="#base-colorsActionMajor350"
2338
+ title="permalink"
2339
+ class="permalink">
2340
+ 🔗
2341
+ </a>
2342
+ </td>
2343
+ <td class="is-vcentered">
2344
+ <pre>#4da77eff</pre>
2345
+ </td>
2346
+ <td class="is-vcentered">
2347
+ <div class="table__color-preview"
2348
+ style="background-color: #4da77eff;">
2349
+ </div>
2350
+
2351
+ </td>
2352
+ </tr>
2353
+ <tr>
2354
+ <td class="with-icons is-vcentered"
2355
+ id="base-colorsActionMajor450"
2356
+ title="theme: base; category: colors; group: action; name: major; variant: 450; ">
2357
+ colorsActionMajor450
2358
+ <a href="#base-colorsActionMajor450"
2359
+ title="permalink"
2360
+ class="permalink">
2361
+ 🔗
2362
+ </a>
2363
+ </td>
2364
+ <td class="is-vcentered">
2365
+ <pre>#198e59ff</pre>
2366
+ </td>
2367
+ <td class="is-vcentered">
2368
+ <div class="table__color-preview"
2369
+ style="background-color: #198e59ff;">
2370
+ </div>
2371
+
2372
+ </td>
2373
+ </tr>
2311
2374
  <tr>
2312
2375
  <td class="with-icons is-vcentered"
2313
2376
  id="base-colorsActionMajor500"
@@ -2518,6 +2581,27 @@
2518
2581
 
2519
2582
  </td>
2520
2583
  </tr>
2584
+ <tr>
2585
+ <td class="with-icons is-vcentered"
2586
+ id="base-colorsActionMajorYang030"
2587
+ title="theme: base; category: colors; group: action; name: major; subgroup: yang; variant: 030; ">
2588
+ colorsActionMajorYang030
2589
+ <a href="#base-colorsActionMajorYang030"
2590
+ title="permalink"
2591
+ class="permalink">
2592
+ 🔗
2593
+ </a>
2594
+ </td>
2595
+ <td class="is-vcentered">
2596
+ <pre>#ffffff4d</pre>
2597
+ </td>
2598
+ <td class="is-vcentered">
2599
+ <div class="table__color-preview"
2600
+ style="background-color: #ffffff4d;">
2601
+ </div>
2602
+
2603
+ </td>
2604
+ </tr>
2521
2605
  <tr>
2522
2606
  <td class="with-icons is-vcentered"
2523
2607
  id="base-colorsActionMinor100"
@@ -6166,69 +6250,6 @@
6166
6250
 
6167
6251
  </td>
6168
6252
  </tr>
6169
- <tr>
6170
- <td class="with-icons is-vcentered"
6171
- id="base-typographyDialogTitleXs"
6172
- title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
6173
- typographyDialogTitleXs
6174
- <a href="#base-typographyDialogTitleXs"
6175
- title="permalink"
6176
- class="permalink">
6177
- 🔗
6178
- </a>
6179
- </td>
6180
- <td class="is-vcentered">
6181
- <pre>700 24px/125% Sage UI</pre>
6182
- </td>
6183
- <td class="is-vcentered">
6184
- <div class="table__typography-preview">
6185
- n/a
6186
- </div>
6187
-
6188
- </td>
6189
- </tr>
6190
- <tr>
6191
- <td class="with-icons is-vcentered"
6192
- id="base-typographyDialogTitleS"
6193
- title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
6194
- typographyDialogTitleS
6195
- <a href="#base-typographyDialogTitleS"
6196
- title="permalink"
6197
- class="permalink">
6198
- 🔗
6199
- </a>
6200
- </td>
6201
- <td class="is-vcentered">
6202
- <pre>700 24px/125% Sage UI</pre>
6203
- </td>
6204
- <td class="is-vcentered">
6205
- <div class="table__typography-preview">
6206
- n/a
6207
- </div>
6208
-
6209
- </td>
6210
- </tr>
6211
- <tr>
6212
- <td class="with-icons is-vcentered"
6213
- id="base-typographyDialogTitleMs"
6214
- title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
6215
- typographyDialogTitleMs
6216
- <a href="#base-typographyDialogTitleMs"
6217
- title="permalink"
6218
- class="permalink">
6219
- 🔗
6220
- </a>
6221
- </td>
6222
- <td class="is-vcentered">
6223
- <pre>700 24px/125% Sage UI</pre>
6224
- </td>
6225
- <td class="is-vcentered">
6226
- <div class="table__typography-preview">
6227
- n/a
6228
- </div>
6229
-
6230
- </td>
6231
- </tr>
6232
6253
  <tr>
6233
6254
  <td class="with-icons is-vcentered"
6234
6255
  id="base-typographyDialogTitleM"
@@ -6250,132 +6271,6 @@
6250
6271
 
6251
6272
  </td>
6252
6273
  </tr>
6253
- <tr>
6254
- <td class="with-icons is-vcentered"
6255
- id="base-typographyDialogTitleMl"
6256
- title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
6257
- typographyDialogTitleMl
6258
- <a href="#base-typographyDialogTitleMl"
6259
- title="permalink"
6260
- class="permalink">
6261
- 🔗
6262
- </a>
6263
- </td>
6264
- <td class="is-vcentered">
6265
- <pre>700 24px/125% Sage UI</pre>
6266
- </td>
6267
- <td class="is-vcentered">
6268
- <div class="table__typography-preview">
6269
- n/a
6270
- </div>
6271
-
6272
- </td>
6273
- </tr>
6274
- <tr>
6275
- <td class="with-icons is-vcentered"
6276
- id="base-typographyDialogTitleL"
6277
- title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
6278
- typographyDialogTitleL
6279
- <a href="#base-typographyDialogTitleL"
6280
- title="permalink"
6281
- class="permalink">
6282
- 🔗
6283
- </a>
6284
- </td>
6285
- <td class="is-vcentered">
6286
- <pre>700 24px/125% Sage UI</pre>
6287
- </td>
6288
- <td class="is-vcentered">
6289
- <div class="table__typography-preview">
6290
- n/a
6291
- </div>
6292
-
6293
- </td>
6294
- </tr>
6295
- <tr>
6296
- <td class="with-icons is-vcentered"
6297
- id="base-typographyDialogTitleXl"
6298
- title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
6299
- typographyDialogTitleXl
6300
- <a href="#base-typographyDialogTitleXl"
6301
- title="permalink"
6302
- class="permalink">
6303
- 🔗
6304
- </a>
6305
- </td>
6306
- <td class="is-vcentered">
6307
- <pre>700 24px/125% Sage UI</pre>
6308
- </td>
6309
- <td class="is-vcentered">
6310
- <div class="table__typography-preview">
6311
- n/a
6312
- </div>
6313
-
6314
- </td>
6315
- </tr>
6316
- <tr>
6317
- <td class="with-icons is-vcentered"
6318
- id="base-typographyDialogParagraphXs"
6319
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
6320
- typographyDialogParagraphXs
6321
- <a href="#base-typographyDialogParagraphXs"
6322
- title="permalink"
6323
- class="permalink">
6324
- 🔗
6325
- </a>
6326
- </td>
6327
- <td class="is-vcentered">
6328
- <pre>400 14px/150% Sage UI</pre>
6329
- </td>
6330
- <td class="is-vcentered">
6331
- <div class="table__typography-preview">
6332
- n/a
6333
- </div>
6334
-
6335
- </td>
6336
- </tr>
6337
- <tr>
6338
- <td class="with-icons is-vcentered"
6339
- id="base-typographyDialogParagraphS"
6340
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
6341
- typographyDialogParagraphS
6342
- <a href="#base-typographyDialogParagraphS"
6343
- title="permalink"
6344
- class="permalink">
6345
- 🔗
6346
- </a>
6347
- </td>
6348
- <td class="is-vcentered">
6349
- <pre>400 14px/150% Sage UI</pre>
6350
- </td>
6351
- <td class="is-vcentered">
6352
- <div class="table__typography-preview">
6353
- n/a
6354
- </div>
6355
-
6356
- </td>
6357
- </tr>
6358
- <tr>
6359
- <td class="with-icons is-vcentered"
6360
- id="base-typographyDialogParagraphMs"
6361
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
6362
- typographyDialogParagraphMs
6363
- <a href="#base-typographyDialogParagraphMs"
6364
- title="permalink"
6365
- class="permalink">
6366
- 🔗
6367
- </a>
6368
- </td>
6369
- <td class="is-vcentered">
6370
- <pre>400 14px/150% Sage UI</pre>
6371
- </td>
6372
- <td class="is-vcentered">
6373
- <div class="table__typography-preview">
6374
- n/a
6375
- </div>
6376
-
6377
- </td>
6378
- </tr>
6379
6274
  <tr>
6380
6275
  <td class="with-icons is-vcentered"
6381
6276
  id="base-typographyDialogParagraphM"
@@ -6399,59 +6294,17 @@
6399
6294
  </tr>
6400
6295
  <tr>
6401
6296
  <td class="with-icons is-vcentered"
6402
- id="base-typographyDialogParagraphMl"
6403
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
6404
- typographyDialogParagraphMl
6405
- <a href="#base-typographyDialogParagraphMl"
6406
- title="permalink"
6407
- class="permalink">
6408
- 🔗
6409
- </a>
6410
- </td>
6411
- <td class="is-vcentered">
6412
- <pre>400 14px/150% Sage UI</pre>
6413
- </td>
6414
- <td class="is-vcentered">
6415
- <div class="table__typography-preview">
6416
- n/a
6417
- </div>
6418
-
6419
- </td>
6420
- </tr>
6421
- <tr>
6422
- <td class="with-icons is-vcentered"
6423
- id="base-typographyDialogParagraphL"
6424
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
6425
- typographyDialogParagraphL
6426
- <a href="#base-typographyDialogParagraphL"
6427
- title="permalink"
6428
- class="permalink">
6429
- 🔗
6430
- </a>
6431
- </td>
6432
- <td class="is-vcentered">
6433
- <pre>400 14px/150% Sage UI</pre>
6434
- </td>
6435
- <td class="is-vcentered">
6436
- <div class="table__typography-preview">
6437
- n/a
6438
- </div>
6439
-
6440
- </td>
6441
- </tr>
6442
- <tr>
6443
- <td class="with-icons is-vcentered"
6444
- id="base-typographyDialogParagraphXl"
6445
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
6446
- typographyDialogParagraphXl
6447
- <a href="#base-typographyDialogParagraphXl"
6297
+ id="base-typographyDrawerTitleM"
6298
+ title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
6299
+ typographyDrawerTitleM
6300
+ <a href="#base-typographyDrawerTitleM"
6448
6301
  title="permalink"
6449
6302
  class="permalink">
6450
6303
  🔗
6451
6304
  </a>
6452
6305
  </td>
6453
6306
  <td class="is-vcentered">
6454
- <pre>400 14px/150% Sage UI</pre>
6307
+ <pre>700 22px/125% Sage UI</pre>
6455
6308
  </td>
6456
6309
  <td class="is-vcentered">
6457
6310
  <div class="table__typography-preview">
@@ -6462,17 +6315,17 @@
6462
6315
  </tr>
6463
6316
  <tr>
6464
6317
  <td class="with-icons is-vcentered"
6465
- id="base-typographyDrawerTitleM"
6466
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
6467
- typographyDrawerTitleM
6468
- <a href="#base-typographyDrawerTitleM"
6318
+ id="base-typographyDrawerParagraphM"
6319
+ title="theme: base; category: typography; group: drawer; name: paragraph; variant: m; ">
6320
+ typographyDrawerParagraphM
6321
+ <a href="#base-typographyDrawerParagraphM"
6469
6322
  title="permalink"
6470
6323
  class="permalink">
6471
6324
  🔗
6472
6325
  </a>
6473
6326
  </td>
6474
6327
  <td class="is-vcentered">
6475
- <pre>700 22px/125% Sage UI</pre>
6328
+ <pre>0 none</pre>
6476
6329
  </td>
6477
6330
  <td class="is-vcentered">
6478
6331
  <div class="table__typography-preview">
@@ -7195,6 +7048,27 @@
7195
7048
 
7196
7049
  </td>
7197
7050
  </tr>
7051
+ <tr>
7052
+ <td class="with-icons is-vcentered"
7053
+ id="base-typographyLinkTextS"
7054
+ title="theme: base; category: typography; group: link; name: text; variant: s; ">
7055
+ typographyLinkTextS
7056
+ <a href="#base-typographyLinkTextS"
7057
+ title="permalink"
7058
+ class="permalink">
7059
+ 🔗
7060
+ </a>
7061
+ </td>
7062
+ <td class="is-vcentered">
7063
+ <pre>400 12px/150% Sage UI</pre>
7064
+ </td>
7065
+ <td class="is-vcentered">
7066
+ <div class="table__typography-preview">
7067
+ n/a
7068
+ </div>
7069
+
7070
+ </td>
7071
+ </tr>
7198
7072
  <tr>
7199
7073
  <td class="with-icons is-vcentered"
7200
7074
  id="base-typographyLinkTextM"
@@ -7384,6 +7258,27 @@
7384
7258
 
7385
7259
  </td>
7386
7260
  </tr>
7261
+ <tr>
7262
+ <td class="with-icons is-vcentered"
7263
+ id="base-typographyTileParagraphM"
7264
+ title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
7265
+ typographyTileParagraphM
7266
+ <a href="#base-typographyTileParagraphM"
7267
+ title="permalink"
7268
+ class="permalink">
7269
+ 🔗
7270
+ </a>
7271
+ </td>
7272
+ <td class="is-vcentered">
7273
+ <pre>400 14px/150% Sage UI</pre>
7274
+ </td>
7275
+ <td class="is-vcentered">
7276
+ <div class="table__typography-preview">
7277
+ n/a
7278
+ </div>
7279
+
7280
+ </td>
7281
+ </tr>
7387
7282
  <tr>
7388
7283
  <td class="with-icons is-vcentered"
7389
7284
  id="base-typographyPillLabelS"
@@ -8056,6 +7951,27 @@
8056
7951
 
8057
7952
  </td>
8058
7953
  </tr>
7954
+ <tr>
7955
+ <td class="with-icons is-vcentered"
7956
+ id="base-typographySidebarParagraphM"
7957
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: m; ">
7958
+ typographySidebarParagraphM
7959
+ <a href="#base-typographySidebarParagraphM"
7960
+ title="permalink"
7961
+ class="permalink">
7962
+ 🔗
7963
+ </a>
7964
+ </td>
7965
+ <td class="is-vcentered">
7966
+ <pre>0 none</pre>
7967
+ </td>
7968
+ <td class="is-vcentered">
7969
+ <div class="table__typography-preview">
7970
+ n/a
7971
+ </div>
7972
+
7973
+ </td>
7974
+ </tr>
8059
7975
  <tr>
8060
7976
  <td class="with-icons is-vcentered"
8061
7977
  id="base-typographyStepFlowCompleteLabelM"
@@ -8161,6 +8077,48 @@
8161
8077
 
8162
8078
  </td>
8163
8079
  </tr>
8080
+ <tr>
8081
+ <td class="with-icons is-vcentered"
8082
+ id="base-typographyTableHeaderTextXs"
8083
+ title="theme: base; category: typography; group: table; name: headerText; variant: xs; ">
8084
+ typographyTableHeaderTextXs
8085
+ <a href="#base-typographyTableHeaderTextXs"
8086
+ title="permalink"
8087
+ class="permalink">
8088
+ 🔗
8089
+ </a>
8090
+ </td>
8091
+ <td class="is-vcentered">
8092
+ <pre>500 13px/150% Sage UI</pre>
8093
+ </td>
8094
+ <td class="is-vcentered">
8095
+ <div class="table__typography-preview">
8096
+ n/a
8097
+ </div>
8098
+
8099
+ </td>
8100
+ </tr>
8101
+ <tr>
8102
+ <td class="with-icons is-vcentered"
8103
+ id="base-typographyTableHeaderTextS"
8104
+ title="theme: base; category: typography; group: table; name: headerText; variant: s; ">
8105
+ typographyTableHeaderTextS
8106
+ <a href="#base-typographyTableHeaderTextS"
8107
+ title="permalink"
8108
+ class="permalink">
8109
+ 🔗
8110
+ </a>
8111
+ </td>
8112
+ <td class="is-vcentered">
8113
+ <pre>500 14px/150% Sage UI</pre>
8114
+ </td>
8115
+ <td class="is-vcentered">
8116
+ <div class="table__typography-preview">
8117
+ n/a
8118
+ </div>
8119
+
8120
+ </td>
8121
+ </tr>
8164
8122
  <tr>
8165
8123
  <td class="with-icons is-vcentered"
8166
8124
  id="base-typographyTableHeaderTextM"
@@ -8182,6 +8140,90 @@
8182
8140
 
8183
8141
  </td>
8184
8142
  </tr>
8143
+ <tr>
8144
+ <td class="with-icons is-vcentered"
8145
+ id="base-typographyTableHeaderTextL"
8146
+ title="theme: base; category: typography; group: table; name: headerText; variant: l; ">
8147
+ typographyTableHeaderTextL
8148
+ <a href="#base-typographyTableHeaderTextL"
8149
+ title="permalink"
8150
+ class="permalink">
8151
+ 🔗
8152
+ </a>
8153
+ </td>
8154
+ <td class="is-vcentered">
8155
+ <pre>500 16px/150% Sage UI</pre>
8156
+ </td>
8157
+ <td class="is-vcentered">
8158
+ <div class="table__typography-preview">
8159
+ n/a
8160
+ </div>
8161
+
8162
+ </td>
8163
+ </tr>
8164
+ <tr>
8165
+ <td class="with-icons is-vcentered"
8166
+ id="base-typographyTableHeaderTextXl"
8167
+ title="theme: base; category: typography; group: table; name: headerText; variant: xl; ">
8168
+ typographyTableHeaderTextXl
8169
+ <a href="#base-typographyTableHeaderTextXl"
8170
+ title="permalink"
8171
+ class="permalink">
8172
+ 🔗
8173
+ </a>
8174
+ </td>
8175
+ <td class="is-vcentered">
8176
+ <pre>500 16px/150% Sage UI</pre>
8177
+ </td>
8178
+ <td class="is-vcentered">
8179
+ <div class="table__typography-preview">
8180
+ n/a
8181
+ </div>
8182
+
8183
+ </td>
8184
+ </tr>
8185
+ <tr>
8186
+ <td class="with-icons is-vcentered"
8187
+ id="base-typographyTableCellTextXs"
8188
+ title="theme: base; category: typography; group: table; name: cellText; variant: xs; ">
8189
+ typographyTableCellTextXs
8190
+ <a href="#base-typographyTableCellTextXs"
8191
+ title="permalink"
8192
+ class="permalink">
8193
+ 🔗
8194
+ </a>
8195
+ </td>
8196
+ <td class="is-vcentered">
8197
+ <pre>400 13px/150% Sage UI</pre>
8198
+ </td>
8199
+ <td class="is-vcentered">
8200
+ <div class="table__typography-preview">
8201
+ n/a
8202
+ </div>
8203
+
8204
+ </td>
8205
+ </tr>
8206
+ <tr>
8207
+ <td class="with-icons is-vcentered"
8208
+ id="base-typographyTableCellTextS"
8209
+ title="theme: base; category: typography; group: table; name: cellText; variant: s; ">
8210
+ typographyTableCellTextS
8211
+ <a href="#base-typographyTableCellTextS"
8212
+ title="permalink"
8213
+ class="permalink">
8214
+ 🔗
8215
+ </a>
8216
+ </td>
8217
+ <td class="is-vcentered">
8218
+ <pre>400 14px/150% Sage UI</pre>
8219
+ </td>
8220
+ <td class="is-vcentered">
8221
+ <div class="table__typography-preview">
8222
+ n/a
8223
+ </div>
8224
+
8225
+ </td>
8226
+ </tr>
8185
8227
  <tr>
8186
8228
  <td class="with-icons is-vcentered"
8187
8229
  id="base-typographyTableCellTextM"
@@ -8203,6 +8245,48 @@
8203
8245
 
8204
8246
  </td>
8205
8247
  </tr>
8248
+ <tr>
8249
+ <td class="with-icons is-vcentered"
8250
+ id="base-typographyTableCellTextL"
8251
+ title="theme: base; category: typography; group: table; name: cellText; variant: l; ">
8252
+ typographyTableCellTextL
8253
+ <a href="#base-typographyTableCellTextL"
8254
+ title="permalink"
8255
+ class="permalink">
8256
+ 🔗
8257
+ </a>
8258
+ </td>
8259
+ <td class="is-vcentered">
8260
+ <pre>400 16px/150% Sage UI</pre>
8261
+ </td>
8262
+ <td class="is-vcentered">
8263
+ <div class="table__typography-preview">
8264
+ n/a
8265
+ </div>
8266
+
8267
+ </td>
8268
+ </tr>
8269
+ <tr>
8270
+ <td class="with-icons is-vcentered"
8271
+ id="base-typographyTableCellTextXl"
8272
+ title="theme: base; category: typography; group: table; name: cellText; variant: xl; ">
8273
+ typographyTableCellTextXl
8274
+ <a href="#base-typographyTableCellTextXl"
8275
+ title="permalink"
8276
+ class="permalink">
8277
+ 🔗
8278
+ </a>
8279
+ </td>
8280
+ <td class="is-vcentered">
8281
+ <pre>400 16px/150% Sage UI</pre>
8282
+ </td>
8283
+ <td class="is-vcentered">
8284
+ <div class="table__typography-preview">
8285
+ n/a
8286
+ </div>
8287
+
8288
+ </td>
8289
+ </tr>
8206
8290
  <tr>
8207
8291
  <td class="with-icons is-vcentered"
8208
8292
  id="base-typographyTooltipTextM"