@sage/design-tokens 2.26.0 → 2.27.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 (28) hide show
  1. package/data/tokens.json +1 -3535
  2. package/docs/tokens/index.html +0 -9651
  3. package/index.d.ts +0 -2
  4. package/index.js +0 -3
  5. package/package.json +1 -1
  6. package/sage-design-tokens-2.27.0.tgz +0 -0
  7. package/android/base.xml +0 -454
  8. package/css/base.css +0 -456
  9. package/docs/tokens/base/border-radius/index.html +0 -325
  10. package/docs/tokens/base/border-width/index.html +0 -409
  11. package/docs/tokens/base/box-shadow/index.html +0 -514
  12. package/docs/tokens/base/colors/index.html +0 -4651
  13. package/docs/tokens/base/font-families/index.html +0 -388
  14. package/docs/tokens/base/font-sizes/index.html +0 -590
  15. package/docs/tokens/base/font-weights/index.html +0 -367
  16. package/docs/tokens/base/index.html +0 -9802
  17. package/docs/tokens/base/line-heights/index.html +0 -367
  18. package/docs/tokens/base/opacity/index.html +0 -367
  19. package/docs/tokens/base/sizing/index.html +0 -871
  20. package/docs/tokens/base/spacing/index.html +0 -724
  21. package/docs/tokens/base/typography/index.html +0 -3391
  22. package/ios/base.h +0 -458
  23. package/js/base/common.d.ts +0 -445
  24. package/js/base/common.js +0 -456
  25. package/js/base/es6.d.ts +0 -448
  26. package/js/base/es6.js +0 -451
  27. package/sage-design-tokens-2.26.0.tgz +0 -0
  28. package/scss/base.scss +0 -453
package/docs/tokens/base/typography/index.html DELETED
@@ -1,3391 +0,0 @@
1
- <!doctype html>
2
- <html class="no-js" lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
6
- <meta http-equiv="Pragma" content="no-cache" />
7
- <meta http-equiv="Expires" content="0" />
8
-
9
- <title>Sage Design Tokens / base / typography</title>
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
- <link rel="preconnect" href="https://fonts.googleapis.com">
12
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
- <link href="https://fonts.googleapis.com/css?family=Lato:400,500,600" rel="stylesheet">
14
- <meta name="description" content="">
15
- <style>
16
- *, *::before, *::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- html {
21
- font-size: 62.5%;
22
- }
23
-
24
- body {
25
- font-size: 1.4rem;
26
- font-family: 'Lato', Arial, sans-serif;
27
- padding: 20px 40px;
28
- }
29
-
30
- table {
31
- width: 100%;
32
- }
33
-
34
- .menu {
35
- position: sticky;
36
- display: inline-block;
37
- vertical-align: top;
38
- max-height: 100vh;
39
- overflow-y: auto;
40
- top: 0;
41
- bottom: 0;
42
- font-size: 14px;
43
- }
44
-
45
- .with-icons:hover .permalink {
46
- visibility: visible;
47
- }
48
-
49
- .permalink {
50
- visibility: hidden;
51
- font-size: 80%;
52
- line-height: inherit;
53
- text-decoration: none;
54
- vertical-align: middle;
55
- }
56
-
57
- .table__color-preview,
58
- .table__spacing-preview,
59
- .table__border-width-preview,
60
- .table__font-size-preview,
61
- .table__sizing-preview,
62
- .table__opacity-preview,
63
- .table__typography-preview,
64
- .table__font-weight-preview,
65
- .table__box-shadow-preview,
66
- .table__font-family-preview,
67
- .table__border-radius-preview {
68
- height: 40px;
69
- width: 100%;
70
- }
71
-
72
- .table__font-size-preview,
73
- .table__typography-preview,
74
- .table__font-weight-preview,
75
- .table__font-family-preview {
76
- vertical-align: middle;
77
- display: table-cell;
78
- }
79
-
80
- .table__box-shadow-preview {
81
- height: 50px;
82
- }
83
-
84
- .table__spacing-preview {
85
- background-color: #626566;
86
- height: 10px;
87
- }
88
-
89
- .table__border-width-preview {
90
- border-style: solid;
91
- border-color: #CCD6DB;
92
- background-color: #626566;
93
- }
94
-
95
- .table__sizing-preview {
96
- background-color: #626566;
97
- }
98
-
99
- .table__opacity-preview {
100
- background-color: #ccc;
101
- }
102
-
103
- .table__opacity-preview div {
104
- width: 100%;
105
- height: 100%;
106
- background-color: #fff;
107
- }
108
-
109
- .table__border-radius-preview {
110
- width: 40px;
111
- border-color: #626566;
112
- border-width: 3px 3px 0 0;
113
- border-style: solid;
114
- }
115
-
116
- #main-container {
117
- max-width: 1024px;
118
- margin: 0 auto;
119
- }
120
-
121
- .embedded #main-container {
122
- max-width: 100%;
123
- }
124
-
125
- #icons-container {
126
- display: grid;
127
- grid-template-columns: repeat(6, 1fr);
128
- grid-gap: 20px;
129
- }
130
-
131
- .divider {
132
- margin: 20px 0 30px;
133
- }
134
-
135
- .grid-item {
136
- display: block;
137
- text-align: center;
138
- position: relative;
139
- padding-bottom: 40px;
140
- padding-top: 20px;
141
- border: 1px solid #dbdbdb;
142
- }
143
-
144
- .grid-item .codes {
145
- position: absolute;
146
- display: flex;
147
- justify-content: space-between;
148
- padding: 5px 20px;
149
- bottom: 0;
150
- left: 0;
151
- right: 0;
152
- border-top: 1px solid rgba(10, 10, 10, .1);
153
- }
154
-
155
- .grid-item .codes div {
156
- cursor: default;
157
- color: rgba(10, 10, 10, .6);
158
- }
159
-
160
- .preview {
161
- display: block;
162
- width: 32px;
163
- height: auto;
164
- }
165
-
166
- .layout {
167
- display: flex;
168
- }
169
-
170
- .layout .navigation {
171
- flex: 0 0 200px;
172
- }
173
-
174
- .layout .content {
175
- flex: 1 1 auto;
176
- }
177
-
178
- .embedded {
179
- padding: 10px;
180
- }
181
-
182
- .embedded .hide-on-embedded {
183
- display: none;
184
- }
185
- </style>
186
- </head>
187
- <body>
188
- <div id="main-container">
189
- <div class="layout">
190
- <aside class="hide-on-embedded navigation menu py-0">
191
- <section class="my-6">
192
- <p class="menu-label">
193
- <a href="../../base/index.html">
194
- base
195
- </a>
196
- </p>
197
- <ul class="menu-list">
198
- <li>
199
- <a href="../../base/colors/index.html">
200
- colors
201
- </a>
202
- </li>
203
- <li>
204
- <a href="../../base/sizing/index.html">
205
- sizing
206
- </a>
207
- </li>
208
- <li>
209
- <a href="../../base/spacing/index.html">
210
- spacing
211
- </a>
212
- </li>
213
- <li>
214
- <a href="../../base/border-width/index.html">
215
- borderWidth
216
- </a>
217
- </li>
218
- <li>
219
- <a href="../../base/font-sizes/index.html">
220
- fontSizes
221
- </a>
222
- </li>
223
- <li>
224
- <a href="../../base/box-shadow/index.html">
225
- boxShadow
226
- </a>
227
- </li>
228
- <li>
229
- <a href="../../base/font-weights/index.html">
230
- fontWeights
231
- </a>
232
- </li>
233
- <li>
234
- <a href="../../base/line-heights/index.html">
235
- lineHeights
236
- </a>
237
- </li>
238
- <li>
239
- <a href="../../base/font-families/index.html">
240
- fontFamilies
241
- </a>
242
- </li>
243
- <li>
244
- <a href="../../base/border-radius/index.html">
245
- borderRadius
246
- </a>
247
- </li>
248
- <li>
249
- <a href="../../base/typography/index.html">
250
- typography
251
- </a>
252
- </li>
253
- <li>
254
- <a href="../../base/opacity/index.html">
255
- opacity
256
- </a>
257
- </li>
258
- </ul>
259
- </section>
260
- </aside>
261
- <main class="content">
262
- <h1 class="hide-on-embedded">
263
- <a href="../../index.html">
264
- Sage Design Tokens
265
- </a>
266
- /
267
- <a href="../index.html">
268
- base
269
- </a>
270
- /
271
- typography
272
- </h1>
273
-
274
- <section class="my-6">
275
- <table class="table is-bordered is-hoverable is-fullwidth">
276
- <colgroup>
277
- <col width="50%">
278
- <col width="25%">
279
- <col width="35%">
280
- </colgroup>
281
- <thead>
282
- <tr>
283
- <th class="has-background-light">Name</th>
284
- <th class="has-background-light">Value</th>
285
- <th class="has-background-light">Preview</th>
286
- </tr>
287
- </thead>
288
- <tr>
289
- <td class="with-icons is-vcentered"
290
- id="base-typographyAccordionTitleM"
291
- title="theme: base; category: typography; group: accordion; name: title; variant: m; ">
292
- typographyAccordionTitleM
293
- <a href="#base-typographyAccordionTitleM"
294
- title="permalink"
295
- class="permalink">
296
- 🔗
297
- </a>
298
- </td>
299
- <td class="is-vcentered">
300
- <pre>700 20px/125% Sage UI</pre>
301
- </td>
302
- <td class="is-vcentered">
303
- <div class="table__typography-preview">
304
- n/a
305
- </div>
306
-
307
- </td>
308
- </tr>
309
- <tr>
310
- <td class="with-icons is-vcentered"
311
- id="base-typographyAccordionSubtitleM"
312
- title="theme: base; category: typography; group: accordion; name: subtitle; variant: m; ">
313
- typographyAccordionSubtitleM
314
- <a href="#base-typographyAccordionSubtitleM"
315
- title="permalink"
316
- class="permalink">
317
- 🔗
318
- </a>
319
- </td>
320
- <td class="is-vcentered">
321
- <pre>400 14px/150% Sage UI</pre>
322
- </td>
323
- <td class="is-vcentered">
324
- <div class="table__typography-preview">
325
- n/a
326
- </div>
327
-
328
- </td>
329
- </tr>
330
- <tr>
331
- <td class="with-icons is-vcentered"
332
- id="base-typographyAccordionParagraphM"
333
- title="theme: base; category: typography; group: accordion; name: paragraph; variant: m; ">
334
- typographyAccordionParagraphM
335
- <a href="#base-typographyAccordionParagraphM"
336
- title="permalink"
337
- class="permalink">
338
- 🔗
339
- </a>
340
- </td>
341
- <td class="is-vcentered">
342
- <pre>400 14px/150% Sage UI</pre>
343
- </td>
344
- <td class="is-vcentered">
345
- <div class="table__typography-preview">
346
- n/a
347
- </div>
348
-
349
- </td>
350
- </tr>
351
- <tr>
352
- <td class="with-icons is-vcentered"
353
- id="base-typographyActionPopoverMenuItemM"
354
- title="theme: base; category: typography; group: actionPopover; name: menuItem; variant: m; ">
355
- typographyActionPopoverMenuItemM
356
- <a href="#base-typographyActionPopoverMenuItemM"
357
- title="permalink"
358
- class="permalink">
359
- 🔗
360
- </a>
361
- </td>
362
- <td class="is-vcentered">
363
- <pre>700 14px/150% Sage UI</pre>
364
- </td>
365
- <td class="is-vcentered">
366
- <div class="table__typography-preview">
367
- n/a
368
- </div>
369
-
370
- </td>
371
- </tr>
372
- <tr>
373
- <td class="with-icons is-vcentered"
374
- id="base-typographyAnchorNavLabelM"
375
- title="theme: base; category: typography; group: anchorNav; name: label; variant: m; ">
376
- typographyAnchorNavLabelM
377
- <a href="#base-typographyAnchorNavLabelM"
378
- title="permalink"
379
- class="permalink">
380
- 🔗
381
- </a>
382
- </td>
383
- <td class="is-vcentered">
384
- <pre>500 14px/150% Sage UI</pre>
385
- </td>
386
- <td class="is-vcentered">
387
- <div class="table__typography-preview">
388
- n/a
389
- </div>
390
-
391
- </td>
392
- </tr>
393
- <tr>
394
- <td class="with-icons is-vcentered"
395
- id="base-typographyBadgeLabelM"
396
- title="theme: base; category: typography; group: badge; name: label; variant: m; ">
397
- typographyBadgeLabelM
398
- <a href="#base-typographyBadgeLabelM"
399
- title="permalink"
400
- class="permalink">
401
- 🔗
402
- </a>
403
- </td>
404
- <td class="is-vcentered">
405
- <pre>500 12px/150% Sage UI</pre>
406
- </td>
407
- <td class="is-vcentered">
408
- <div class="table__typography-preview">
409
- n/a
410
- </div>
411
-
412
- </td>
413
- </tr>
414
- <tr>
415
- <td class="with-icons is-vcentered"
416
- id="base-typographyButtonLabelS"
417
- title="theme: base; category: typography; group: button; name: label; variant: s; ">
418
- typographyButtonLabelS
419
- <a href="#base-typographyButtonLabelS"
420
- title="permalink"
421
- class="permalink">
422
- 🔗
423
- </a>
424
- </td>
425
- <td class="is-vcentered">
426
- <pre>500 14px/150% Sage UI</pre>
427
- </td>
428
- <td class="is-vcentered">
429
- <div class="table__typography-preview">
430
- n/a
431
- </div>
432
-
433
- </td>
434
- </tr>
435
- <tr>
436
- <td class="with-icons is-vcentered"
437
- id="base-typographyButtonLabelM"
438
- title="theme: base; category: typography; group: button; name: label; variant: m; ">
439
- typographyButtonLabelM
440
- <a href="#base-typographyButtonLabelM"
441
- title="permalink"
442
- class="permalink">
443
- 🔗
444
- </a>
445
- </td>
446
- <td class="is-vcentered">
447
- <pre>500 14px/150% Sage UI</pre>
448
- </td>
449
- <td class="is-vcentered">
450
- <div class="table__typography-preview">
451
- n/a
452
- </div>
453
-
454
- </td>
455
- </tr>
456
- <tr>
457
- <td class="with-icons is-vcentered"
458
- id="base-typographyButtonLabelL"
459
- title="theme: base; category: typography; group: button; name: label; variant: l; ">
460
- typographyButtonLabelL
461
- <a href="#base-typographyButtonLabelL"
462
- title="permalink"
463
- class="permalink">
464
- 🔗
465
- </a>
466
- </td>
467
- <td class="is-vcentered">
468
- <pre>500 16px/150% Sage UI</pre>
469
- </td>
470
- <td class="is-vcentered">
471
- <div class="table__typography-preview">
472
- n/a
473
- </div>
474
-
475
- </td>
476
- </tr>
477
- <tr>
478
- <td class="with-icons is-vcentered"
479
- id="base-typographyCardParagraphM"
480
- title="theme: base; category: typography; group: card; name: paragraph; variant: m; ">
481
- typographyCardParagraphM
482
- <a href="#base-typographyCardParagraphM"
483
- title="permalink"
484
- class="permalink">
485
- 🔗
486
- </a>
487
- </td>
488
- <td class="is-vcentered">
489
- <pre>400 14px/150% Sage UI</pre>
490
- </td>
491
- <td class="is-vcentered">
492
- <div class="table__typography-preview">
493
- n/a
494
- </div>
495
-
496
- </td>
497
- </tr>
498
- <tr>
499
- <td class="with-icons is-vcentered"
500
- id="base-typographyCardSelectTitleM"
501
- title="theme: base; category: typography; group: cardSelect; name: title; variant: m; ">
502
- typographyCardSelectTitleM
503
- <a href="#base-typographyCardSelectTitleM"
504
- title="permalink"
505
- class="permalink">
506
- 🔗
507
- </a>
508
- </td>
509
- <td class="is-vcentered">
510
- <pre>700 16px/150% Sage UI</pre>
511
- </td>
512
- <td class="is-vcentered">
513
- <div class="table__typography-preview">
514
- n/a
515
- </div>
516
-
517
- </td>
518
- </tr>
519
- <tr>
520
- <td class="with-icons is-vcentered"
521
- id="base-typographyCardSelectSubtitleM"
522
- title="theme: base; category: typography; group: cardSelect; name: subtitle; variant: m; ">
523
- typographyCardSelectSubtitleM
524
- <a href="#base-typographyCardSelectSubtitleM"
525
- title="permalink"
526
- class="permalink">
527
- 🔗
528
- </a>
529
- </td>
530
- <td class="is-vcentered">
531
- <pre>500 14px/150% Sage UI</pre>
532
- </td>
533
- <td class="is-vcentered">
534
- <div class="table__typography-preview">
535
- n/a
536
- </div>
537
-
538
- </td>
539
- </tr>
540
- <tr>
541
- <td class="with-icons is-vcentered"
542
- id="base-typographyCardSelectParagraphM"
543
- title="theme: base; category: typography; group: cardSelect; name: paragraph; variant: m; ">
544
- typographyCardSelectParagraphM
545
- <a href="#base-typographyCardSelectParagraphM"
546
- title="permalink"
547
- class="permalink">
548
- 🔗
549
- </a>
550
- </td>
551
- <td class="is-vcentered">
552
- <pre>400 14px/150% Sage UI</pre>
553
- </td>
554
- <td class="is-vcentered">
555
- <div class="table__typography-preview">
556
- n/a
557
- </div>
558
-
559
- </td>
560
- </tr>
561
- <tr>
562
- <td class="with-icons is-vcentered"
563
- id="base-typographyDatePickerCalendarDateM"
564
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: date; variant: m; ">
565
- typographyDatePickerCalendarDateM
566
- <a href="#base-typographyDatePickerCalendarDateM"
567
- title="permalink"
568
- class="permalink">
569
- 🔗
570
- </a>
571
- </td>
572
- <td class="is-vcentered">
573
- <pre>700 14px/150% Sage UI</pre>
574
- </td>
575
- <td class="is-vcentered">
576
- <div class="table__typography-preview">
577
- n/a
578
- </div>
579
-
580
- </td>
581
- </tr>
582
- <tr>
583
- <td class="with-icons is-vcentered"
584
- id="base-typographyDatePickerCalendarDayM"
585
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: day; variant: m; ">
586
- typographyDatePickerCalendarDayM
587
- <a href="#base-typographyDatePickerCalendarDayM"
588
- title="permalink"
589
- class="permalink">
590
- 🔗
591
- </a>
592
- </td>
593
- <td class="is-vcentered">
594
- <pre>700 14px/150% Sage UI</pre>
595
- </td>
596
- <td class="is-vcentered">
597
- <div class="table__typography-preview">
598
- n/a
599
- </div>
600
-
601
- </td>
602
- </tr>
603
- <tr>
604
- <td class="with-icons is-vcentered"
605
- id="base-typographyDatePickerCalendarMonthM"
606
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: month; variant: m; ">
607
- typographyDatePickerCalendarMonthM
608
- <a href="#base-typographyDatePickerCalendarMonthM"
609
- title="permalink"
610
- class="permalink">
611
- 🔗
612
- </a>
613
- </td>
614
- <td class="is-vcentered">
615
- <pre>700 16px/125% Sage UI</pre>
616
- </td>
617
- <td class="is-vcentered">
618
- <div class="table__typography-preview">
619
- n/a
620
- </div>
621
-
622
- </td>
623
- </tr>
624
- <tr>
625
- <td class="with-icons is-vcentered"
626
- id="base-typographyDialogTitleXs"
627
- title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
628
- typographyDialogTitleXs
629
- <a href="#base-typographyDialogTitleXs"
630
- title="permalink"
631
- class="permalink">
632
- 🔗
633
- </a>
634
- </td>
635
- <td class="is-vcentered">
636
- <pre>700 24px/125% Sage UI</pre>
637
- </td>
638
- <td class="is-vcentered">
639
- <div class="table__typography-preview">
640
- n/a
641
- </div>
642
-
643
- </td>
644
- </tr>
645
- <tr>
646
- <td class="with-icons is-vcentered"
647
- id="base-typographyDialogTitleS"
648
- title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
649
- typographyDialogTitleS
650
- <a href="#base-typographyDialogTitleS"
651
- title="permalink"
652
- class="permalink">
653
- 🔗
654
- </a>
655
- </td>
656
- <td class="is-vcentered">
657
- <pre>700 24px/125% Sage UI</pre>
658
- </td>
659
- <td class="is-vcentered">
660
- <div class="table__typography-preview">
661
- n/a
662
- </div>
663
-
664
- </td>
665
- </tr>
666
- <tr>
667
- <td class="with-icons is-vcentered"
668
- id="base-typographyDialogTitleMs"
669
- title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
670
- typographyDialogTitleMs
671
- <a href="#base-typographyDialogTitleMs"
672
- title="permalink"
673
- class="permalink">
674
- 🔗
675
- </a>
676
- </td>
677
- <td class="is-vcentered">
678
- <pre>700 24px/125% Sage UI</pre>
679
- </td>
680
- <td class="is-vcentered">
681
- <div class="table__typography-preview">
682
- n/a
683
- </div>
684
-
685
- </td>
686
- </tr>
687
- <tr>
688
- <td class="with-icons is-vcentered"
689
- id="base-typographyDialogTitleM"
690
- title="theme: base; category: typography; group: dialog; name: title; variant: m; ">
691
- typographyDialogTitleM
692
- <a href="#base-typographyDialogTitleM"
693
- title="permalink"
694
- class="permalink">
695
- 🔗
696
- </a>
697
- </td>
698
- <td class="is-vcentered">
699
- <pre>700 24px/125% Sage UI</pre>
700
- </td>
701
- <td class="is-vcentered">
702
- <div class="table__typography-preview">
703
- n/a
704
- </div>
705
-
706
- </td>
707
- </tr>
708
- <tr>
709
- <td class="with-icons is-vcentered"
710
- id="base-typographyDialogTitleMl"
711
- title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
712
- typographyDialogTitleMl
713
- <a href="#base-typographyDialogTitleMl"
714
- title="permalink"
715
- class="permalink">
716
- 🔗
717
- </a>
718
- </td>
719
- <td class="is-vcentered">
720
- <pre>700 24px/125% Sage UI</pre>
721
- </td>
722
- <td class="is-vcentered">
723
- <div class="table__typography-preview">
724
- n/a
725
- </div>
726
-
727
- </td>
728
- </tr>
729
- <tr>
730
- <td class="with-icons is-vcentered"
731
- id="base-typographyDialogTitleL"
732
- title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
733
- typographyDialogTitleL
734
- <a href="#base-typographyDialogTitleL"
735
- title="permalink"
736
- class="permalink">
737
- 🔗
738
- </a>
739
- </td>
740
- <td class="is-vcentered">
741
- <pre>700 24px/125% Sage UI</pre>
742
- </td>
743
- <td class="is-vcentered">
744
- <div class="table__typography-preview">
745
- n/a
746
- </div>
747
-
748
- </td>
749
- </tr>
750
- <tr>
751
- <td class="with-icons is-vcentered"
752
- id="base-typographyDialogTitleXl"
753
- title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
754
- typographyDialogTitleXl
755
- <a href="#base-typographyDialogTitleXl"
756
- title="permalink"
757
- class="permalink">
758
- 🔗
759
- </a>
760
- </td>
761
- <td class="is-vcentered">
762
- <pre>700 24px/125% Sage UI</pre>
763
- </td>
764
- <td class="is-vcentered">
765
- <div class="table__typography-preview">
766
- n/a
767
- </div>
768
-
769
- </td>
770
- </tr>
771
- <tr>
772
- <td class="with-icons is-vcentered"
773
- id="base-typographyDialogTitleXxl"
774
- title="theme: base; category: typography; group: dialog; name: title; variant: xxl; ">
775
- typographyDialogTitleXxl
776
- <a href="#base-typographyDialogTitleXxl"
777
- title="permalink"
778
- class="permalink">
779
- 🔗
780
- </a>
781
- </td>
782
- <td class="is-vcentered">
783
- <pre>700 24px/125% Sage UI</pre>
784
- </td>
785
- <td class="is-vcentered">
786
- <div class="table__typography-preview">
787
- n/a
788
- </div>
789
-
790
- </td>
791
- </tr>
792
- <tr>
793
- <td class="with-icons is-vcentered"
794
- id="base-typographyDialogParagraphXs"
795
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
796
- typographyDialogParagraphXs
797
- <a href="#base-typographyDialogParagraphXs"
798
- title="permalink"
799
- class="permalink">
800
- 🔗
801
- </a>
802
- </td>
803
- <td class="is-vcentered">
804
- <pre>400 14px/150% Sage UI</pre>
805
- </td>
806
- <td class="is-vcentered">
807
- <div class="table__typography-preview">
808
- n/a
809
- </div>
810
-
811
- </td>
812
- </tr>
813
- <tr>
814
- <td class="with-icons is-vcentered"
815
- id="base-typographyDialogParagraphS"
816
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
817
- typographyDialogParagraphS
818
- <a href="#base-typographyDialogParagraphS"
819
- title="permalink"
820
- class="permalink">
821
- 🔗
822
- </a>
823
- </td>
824
- <td class="is-vcentered">
825
- <pre>400 14px/150% Sage UI</pre>
826
- </td>
827
- <td class="is-vcentered">
828
- <div class="table__typography-preview">
829
- n/a
830
- </div>
831
-
832
- </td>
833
- </tr>
834
- <tr>
835
- <td class="with-icons is-vcentered"
836
- id="base-typographyDialogParagraphMs"
837
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
838
- typographyDialogParagraphMs
839
- <a href="#base-typographyDialogParagraphMs"
840
- title="permalink"
841
- class="permalink">
842
- 🔗
843
- </a>
844
- </td>
845
- <td class="is-vcentered">
846
- <pre>400 14px/150% Sage UI</pre>
847
- </td>
848
- <td class="is-vcentered">
849
- <div class="table__typography-preview">
850
- n/a
851
- </div>
852
-
853
- </td>
854
- </tr>
855
- <tr>
856
- <td class="with-icons is-vcentered"
857
- id="base-typographyDialogParagraphM"
858
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: m; ">
859
- typographyDialogParagraphM
860
- <a href="#base-typographyDialogParagraphM"
861
- title="permalink"
862
- class="permalink">
863
- 🔗
864
- </a>
865
- </td>
866
- <td class="is-vcentered">
867
- <pre>400 14px/150% Sage UI</pre>
868
- </td>
869
- <td class="is-vcentered">
870
- <div class="table__typography-preview">
871
- n/a
872
- </div>
873
-
874
- </td>
875
- </tr>
876
- <tr>
877
- <td class="with-icons is-vcentered"
878
- id="base-typographyDialogParagraphMl"
879
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
880
- typographyDialogParagraphMl
881
- <a href="#base-typographyDialogParagraphMl"
882
- title="permalink"
883
- class="permalink">
884
- 🔗
885
- </a>
886
- </td>
887
- <td class="is-vcentered">
888
- <pre>400 14px/150% Sage UI</pre>
889
- </td>
890
- <td class="is-vcentered">
891
- <div class="table__typography-preview">
892
- n/a
893
- </div>
894
-
895
- </td>
896
- </tr>
897
- <tr>
898
- <td class="with-icons is-vcentered"
899
- id="base-typographyDialogParagraphL"
900
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
901
- typographyDialogParagraphL
902
- <a href="#base-typographyDialogParagraphL"
903
- title="permalink"
904
- class="permalink">
905
- 🔗
906
- </a>
907
- </td>
908
- <td class="is-vcentered">
909
- <pre>400 14px/150% Sage UI</pre>
910
- </td>
911
- <td class="is-vcentered">
912
- <div class="table__typography-preview">
913
- n/a
914
- </div>
915
-
916
- </td>
917
- </tr>
918
- <tr>
919
- <td class="with-icons is-vcentered"
920
- id="base-typographyDialogParagraphXl"
921
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
922
- typographyDialogParagraphXl
923
- <a href="#base-typographyDialogParagraphXl"
924
- title="permalink"
925
- class="permalink">
926
- 🔗
927
- </a>
928
- </td>
929
- <td class="is-vcentered">
930
- <pre>400 14px/150% Sage UI</pre>
931
- </td>
932
- <td class="is-vcentered">
933
- <div class="table__typography-preview">
934
- n/a
935
- </div>
936
-
937
- </td>
938
- </tr>
939
- <tr>
940
- <td class="with-icons is-vcentered"
941
- id="base-typographyDialogParagraphXxl"
942
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xxl; ">
943
- typographyDialogParagraphXxl
944
- <a href="#base-typographyDialogParagraphXxl"
945
- title="permalink"
946
- class="permalink">
947
- 🔗
948
- </a>
949
- </td>
950
- <td class="is-vcentered">
951
- <pre>400 14px/150% Sage UI</pre>
952
- </td>
953
- <td class="is-vcentered">
954
- <div class="table__typography-preview">
955
- n/a
956
- </div>
957
-
958
- </td>
959
- </tr>
960
- <tr>
961
- <td class="with-icons is-vcentered"
962
- id="base-typographyDrawerTitleM"
963
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
964
- typographyDrawerTitleM
965
- <a href="#base-typographyDrawerTitleM"
966
- title="permalink"
967
- class="permalink">
968
- 🔗
969
- </a>
970
- </td>
971
- <td class="is-vcentered">
972
- <pre>700 22px/125% Sage UI</pre>
973
- </td>
974
- <td class="is-vcentered">
975
- <div class="table__typography-preview">
976
- n/a
977
- </div>
978
-
979
- </td>
980
- </tr>
981
- <tr>
982
- <td class="with-icons is-vcentered"
983
- id="base-typographyDrawerParagraphM"
984
- title="theme: base; category: typography; group: drawer; name: paragraph; variant: m; ">
985
- typographyDrawerParagraphM
986
- <a href="#base-typographyDrawerParagraphM"
987
- title="permalink"
988
- class="permalink">
989
- 🔗
990
- </a>
991
- </td>
992
- <td class="is-vcentered">
993
- <pre>400 14px/125% Sage UI</pre>
994
- </td>
995
- <td class="is-vcentered">
996
- <div class="table__typography-preview">
997
- n/a
998
- </div>
999
-
1000
- </td>
1001
- </tr>
1002
- <tr>
1003
- <td class="with-icons is-vcentered"
1004
- id="base-typographyFlashTextM"
1005
- title="theme: base; category: typography; group: flash; name: text; variant: m; ">
1006
- typographyFlashTextM
1007
- <a href="#base-typographyFlashTextM"
1008
- title="permalink"
1009
- class="permalink">
1010
- 🔗
1011
- </a>
1012
- </td>
1013
- <td class="is-vcentered">
1014
- <pre>400 14px/150% Sage UI</pre>
1015
- </td>
1016
- <td class="is-vcentered">
1017
- <div class="table__typography-preview">
1018
- n/a
1019
- </div>
1020
-
1021
- </td>
1022
- </tr>
1023
- <tr>
1024
- <td class="with-icons is-vcentered"
1025
- id="base-typographyFlashTextL"
1026
- title="theme: base; category: typography; group: flash; name: text; variant: l; ">
1027
- typographyFlashTextL
1028
- <a href="#base-typographyFlashTextL"
1029
- title="permalink"
1030
- class="permalink">
1031
- 🔗
1032
- </a>
1033
- </td>
1034
- <td class="is-vcentered">
1035
- <pre>400 16px/150% Sage UI</pre>
1036
- </td>
1037
- <td class="is-vcentered">
1038
- <div class="table__typography-preview">
1039
- n/a
1040
- </div>
1041
-
1042
- </td>
1043
- </tr>
1044
- <tr>
1045
- <td class="with-icons is-vcentered"
1046
- id="base-typographyFormFieldLabelXs"
1047
- title="theme: base; category: typography; group: formField; name: label; variant: xs; ">
1048
- typographyFormFieldLabelXs
1049
- <a href="#base-typographyFormFieldLabelXs"
1050
- title="permalink"
1051
- class="permalink">
1052
- 🔗
1053
- </a>
1054
- </td>
1055
- <td class="is-vcentered">
1056
- <pre>500 14px/150% Sage UI</pre>
1057
- </td>
1058
- <td class="is-vcentered">
1059
- <div class="table__typography-preview">
1060
- n/a
1061
- </div>
1062
-
1063
- </td>
1064
- </tr>
1065
- <tr>
1066
- <td class="with-icons is-vcentered"
1067
- id="base-typographyFormFieldLabelS"
1068
- title="theme: base; category: typography; group: formField; name: label; variant: s; ">
1069
- typographyFormFieldLabelS
1070
- <a href="#base-typographyFormFieldLabelS"
1071
- title="permalink"
1072
- class="permalink">
1073
- 🔗
1074
- </a>
1075
- </td>
1076
- <td class="is-vcentered">
1077
- <pre>500 14px/150% Sage UI</pre>
1078
- </td>
1079
- <td class="is-vcentered">
1080
- <div class="table__typography-preview">
1081
- n/a
1082
- </div>
1083
-
1084
- </td>
1085
- </tr>
1086
- <tr>
1087
- <td class="with-icons is-vcentered"
1088
- id="base-typographyFormFieldLabelM"
1089
- title="theme: base; category: typography; group: formField; name: label; variant: m; ">
1090
- typographyFormFieldLabelM
1091
- <a href="#base-typographyFormFieldLabelM"
1092
- title="permalink"
1093
- class="permalink">
1094
- 🔗
1095
- </a>
1096
- </td>
1097
- <td class="is-vcentered">
1098
- <pre>500 14px/150% Sage UI</pre>
1099
- </td>
1100
- <td class="is-vcentered">
1101
- <div class="table__typography-preview">
1102
- n/a
1103
- </div>
1104
-
1105
- </td>
1106
- </tr>
1107
- <tr>
1108
- <td class="with-icons is-vcentered"
1109
- id="base-typographyFormFieldLabelL"
1110
- title="theme: base; category: typography; group: formField; name: label; variant: l; ">
1111
- typographyFormFieldLabelL
1112
- <a href="#base-typographyFormFieldLabelL"
1113
- title="permalink"
1114
- class="permalink">
1115
- 🔗
1116
- </a>
1117
- </td>
1118
- <td class="is-vcentered">
1119
- <pre>500 16px/150% Sage UI</pre>
1120
- </td>
1121
- <td class="is-vcentered">
1122
- <div class="table__typography-preview">
1123
- n/a
1124
- </div>
1125
-
1126
- </td>
1127
- </tr>
1128
- <tr>
1129
- <td class="with-icons is-vcentered"
1130
- id="base-typographyFormFieldHintTextXs"
1131
- title="theme: base; category: typography; group: formField; name: hintText; variant: xs; ">
1132
- typographyFormFieldHintTextXs
1133
- <a href="#base-typographyFormFieldHintTextXs"
1134
- title="permalink"
1135
- class="permalink">
1136
- 🔗
1137
- </a>
1138
- </td>
1139
- <td class="is-vcentered">
1140
- <pre>400 14px/150% Sage UI</pre>
1141
- </td>
1142
- <td class="is-vcentered">
1143
- <div class="table__typography-preview">
1144
- n/a
1145
- </div>
1146
-
1147
- </td>
1148
- </tr>
1149
- <tr>
1150
- <td class="with-icons is-vcentered"
1151
- id="base-typographyFormFieldHintTextS"
1152
- title="theme: base; category: typography; group: formField; name: hintText; variant: s; ">
1153
- typographyFormFieldHintTextS
1154
- <a href="#base-typographyFormFieldHintTextS"
1155
- title="permalink"
1156
- class="permalink">
1157
- 🔗
1158
- </a>
1159
- </td>
1160
- <td class="is-vcentered">
1161
- <pre>400 14px/150% Sage UI</pre>
1162
- </td>
1163
- <td class="is-vcentered">
1164
- <div class="table__typography-preview">
1165
- n/a
1166
- </div>
1167
-
1168
- </td>
1169
- </tr>
1170
- <tr>
1171
- <td class="with-icons is-vcentered"
1172
- id="base-typographyFormFieldHintTextM"
1173
- title="theme: base; category: typography; group: formField; name: hintText; variant: m; ">
1174
- typographyFormFieldHintTextM
1175
- <a href="#base-typographyFormFieldHintTextM"
1176
- title="permalink"
1177
- class="permalink">
1178
- 🔗
1179
- </a>
1180
- </td>
1181
- <td class="is-vcentered">
1182
- <pre>400 14px/150% Sage UI</pre>
1183
- </td>
1184
- <td class="is-vcentered">
1185
- <div class="table__typography-preview">
1186
- n/a
1187
- </div>
1188
-
1189
- </td>
1190
- </tr>
1191
- <tr>
1192
- <td class="with-icons is-vcentered"
1193
- id="base-typographyFormFieldHintTextL"
1194
- title="theme: base; category: typography; group: formField; name: hintText; variant: l; ">
1195
- typographyFormFieldHintTextL
1196
- <a href="#base-typographyFormFieldHintTextL"
1197
- title="permalink"
1198
- class="permalink">
1199
- 🔗
1200
- </a>
1201
- </td>
1202
- <td class="is-vcentered">
1203
- <pre>400 16px/150% Sage UI</pre>
1204
- </td>
1205
- <td class="is-vcentered">
1206
- <div class="table__typography-preview">
1207
- n/a
1208
- </div>
1209
-
1210
- </td>
1211
- </tr>
1212
- <tr>
1213
- <td class="with-icons is-vcentered"
1214
- id="base-typographyFormFieldErrorMessageXs"
1215
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: xs; ">
1216
- typographyFormFieldErrorMessageXs
1217
- <a href="#base-typographyFormFieldErrorMessageXs"
1218
- title="permalink"
1219
- class="permalink">
1220
- 🔗
1221
- </a>
1222
- </td>
1223
- <td class="is-vcentered">
1224
- <pre>500 14px/150% Sage UI</pre>
1225
- </td>
1226
- <td class="is-vcentered">
1227
- <div class="table__typography-preview">
1228
- n/a
1229
- </div>
1230
-
1231
- </td>
1232
- </tr>
1233
- <tr>
1234
- <td class="with-icons is-vcentered"
1235
- id="base-typographyFormFieldErrorMessageS"
1236
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: s; ">
1237
- typographyFormFieldErrorMessageS
1238
- <a href="#base-typographyFormFieldErrorMessageS"
1239
- title="permalink"
1240
- class="permalink">
1241
- 🔗
1242
- </a>
1243
- </td>
1244
- <td class="is-vcentered">
1245
- <pre>500 14px/150% Sage UI</pre>
1246
- </td>
1247
- <td class="is-vcentered">
1248
- <div class="table__typography-preview">
1249
- n/a
1250
- </div>
1251
-
1252
- </td>
1253
- </tr>
1254
- <tr>
1255
- <td class="with-icons is-vcentered"
1256
- id="base-typographyFormFieldErrorMessageM"
1257
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: m; ">
1258
- typographyFormFieldErrorMessageM
1259
- <a href="#base-typographyFormFieldErrorMessageM"
1260
- title="permalink"
1261
- class="permalink">
1262
- 🔗
1263
- </a>
1264
- </td>
1265
- <td class="is-vcentered">
1266
- <pre>500 14px/150% Sage UI</pre>
1267
- </td>
1268
- <td class="is-vcentered">
1269
- <div class="table__typography-preview">
1270
- n/a
1271
- </div>
1272
-
1273
- </td>
1274
- </tr>
1275
- <tr>
1276
- <td class="with-icons is-vcentered"
1277
- id="base-typographyFormFieldErrorMessageL"
1278
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: l; ">
1279
- typographyFormFieldErrorMessageL
1280
- <a href="#base-typographyFormFieldErrorMessageL"
1281
- title="permalink"
1282
- class="permalink">
1283
- 🔗
1284
- </a>
1285
- </td>
1286
- <td class="is-vcentered">
1287
- <pre>500 16px/150% Sage UI</pre>
1288
- </td>
1289
- <td class="is-vcentered">
1290
- <div class="table__typography-preview">
1291
- n/a
1292
- </div>
1293
-
1294
- </td>
1295
- </tr>
1296
- <tr>
1297
- <td class="with-icons is-vcentered"
1298
- id="base-typographyFormFieldCautionMessageXs"
1299
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: xs; ">
1300
- typographyFormFieldCautionMessageXs
1301
- <a href="#base-typographyFormFieldCautionMessageXs"
1302
- title="permalink"
1303
- class="permalink">
1304
- 🔗
1305
- </a>
1306
- </td>
1307
- <td class="is-vcentered">
1308
- <pre>400 14px/150% Sage UI</pre>
1309
- </td>
1310
- <td class="is-vcentered">
1311
- <div class="table__typography-preview">
1312
- n/a
1313
- </div>
1314
-
1315
- </td>
1316
- </tr>
1317
- <tr>
1318
- <td class="with-icons is-vcentered"
1319
- id="base-typographyFormFieldCautionMessageS"
1320
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: s; ">
1321
- typographyFormFieldCautionMessageS
1322
- <a href="#base-typographyFormFieldCautionMessageS"
1323
- title="permalink"
1324
- class="permalink">
1325
- 🔗
1326
- </a>
1327
- </td>
1328
- <td class="is-vcentered">
1329
- <pre>400 14px/150% Sage UI</pre>
1330
- </td>
1331
- <td class="is-vcentered">
1332
- <div class="table__typography-preview">
1333
- n/a
1334
- </div>
1335
-
1336
- </td>
1337
- </tr>
1338
- <tr>
1339
- <td class="with-icons is-vcentered"
1340
- id="base-typographyFormFieldCautionMessageM"
1341
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: m; ">
1342
- typographyFormFieldCautionMessageM
1343
- <a href="#base-typographyFormFieldCautionMessageM"
1344
- title="permalink"
1345
- class="permalink">
1346
- 🔗
1347
- </a>
1348
- </td>
1349
- <td class="is-vcentered">
1350
- <pre>400 14px/150% Sage UI</pre>
1351
- </td>
1352
- <td class="is-vcentered">
1353
- <div class="table__typography-preview">
1354
- n/a
1355
- </div>
1356
-
1357
- </td>
1358
- </tr>
1359
- <tr>
1360
- <td class="with-icons is-vcentered"
1361
- id="base-typographyFormFieldCautionMessageL"
1362
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: l; ">
1363
- typographyFormFieldCautionMessageL
1364
- <a href="#base-typographyFormFieldCautionMessageL"
1365
- title="permalink"
1366
- class="permalink">
1367
- 🔗
1368
- </a>
1369
- </td>
1370
- <td class="is-vcentered">
1371
- <pre>400 16px/150% Sage UI</pre>
1372
- </td>
1373
- <td class="is-vcentered">
1374
- <div class="table__typography-preview">
1375
- n/a
1376
- </div>
1377
-
1378
- </td>
1379
- </tr>
1380
- <tr>
1381
- <td class="with-icons is-vcentered"
1382
- id="base-typographyFormFieldInputTextXs"
1383
- title="theme: base; category: typography; group: formField; name: inputText; variant: xs; ">
1384
- typographyFormFieldInputTextXs
1385
- <a href="#base-typographyFormFieldInputTextXs"
1386
- title="permalink"
1387
- class="permalink">
1388
- 🔗
1389
- </a>
1390
- </td>
1391
- <td class="is-vcentered">
1392
- <pre>400 14px/150% Sage UI</pre>
1393
- </td>
1394
- <td class="is-vcentered">
1395
- <div class="table__typography-preview">
1396
- n/a
1397
- </div>
1398
-
1399
- </td>
1400
- </tr>
1401
- <tr>
1402
- <td class="with-icons is-vcentered"
1403
- id="base-typographyFormFieldInputTextS"
1404
- title="theme: base; category: typography; group: formField; name: inputText; variant: s; ">
1405
- typographyFormFieldInputTextS
1406
- <a href="#base-typographyFormFieldInputTextS"
1407
- title="permalink"
1408
- class="permalink">
1409
- 🔗
1410
- </a>
1411
- </td>
1412
- <td class="is-vcentered">
1413
- <pre>400 14px/150% Sage UI</pre>
1414
- </td>
1415
- <td class="is-vcentered">
1416
- <div class="table__typography-preview">
1417
- n/a
1418
- </div>
1419
-
1420
- </td>
1421
- </tr>
1422
- <tr>
1423
- <td class="with-icons is-vcentered"
1424
- id="base-typographyFormFieldInputTextM"
1425
- title="theme: base; category: typography; group: formField; name: inputText; variant: m; ">
1426
- typographyFormFieldInputTextM
1427
- <a href="#base-typographyFormFieldInputTextM"
1428
- title="permalink"
1429
- class="permalink">
1430
- 🔗
1431
- </a>
1432
- </td>
1433
- <td class="is-vcentered">
1434
- <pre>400 14px/150% Sage UI</pre>
1435
- </td>
1436
- <td class="is-vcentered">
1437
- <div class="table__typography-preview">
1438
- n/a
1439
- </div>
1440
-
1441
- </td>
1442
- </tr>
1443
- <tr>
1444
- <td class="with-icons is-vcentered"
1445
- id="base-typographyFormFieldInputTextL"
1446
- title="theme: base; category: typography; group: formField; name: inputText; variant: l; ">
1447
- typographyFormFieldInputTextL
1448
- <a href="#base-typographyFormFieldInputTextL"
1449
- title="permalink"
1450
- class="permalink">
1451
- 🔗
1452
- </a>
1453
- </td>
1454
- <td class="is-vcentered">
1455
- <pre>400 16px/150% Sage UI</pre>
1456
- </td>
1457
- <td class="is-vcentered">
1458
- <div class="table__typography-preview">
1459
- n/a
1460
- </div>
1461
-
1462
- </td>
1463
- </tr>
1464
- <tr>
1465
- <td class="with-icons is-vcentered"
1466
- id="base-typographyFormFieldDropdownOptionsXs"
1467
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: xs; ">
1468
- typographyFormFieldDropdownOptionsXs
1469
- <a href="#base-typographyFormFieldDropdownOptionsXs"
1470
- title="permalink"
1471
- class="permalink">
1472
- 🔗
1473
- </a>
1474
- </td>
1475
- <td class="is-vcentered">
1476
- <pre>400 14px/150% Sage UI</pre>
1477
- </td>
1478
- <td class="is-vcentered">
1479
- <div class="table__typography-preview">
1480
- n/a
1481
- </div>
1482
-
1483
- </td>
1484
- </tr>
1485
- <tr>
1486
- <td class="with-icons is-vcentered"
1487
- id="base-typographyFormFieldDropdownOptionsS"
1488
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: s; ">
1489
- typographyFormFieldDropdownOptionsS
1490
- <a href="#base-typographyFormFieldDropdownOptionsS"
1491
- title="permalink"
1492
- class="permalink">
1493
- 🔗
1494
- </a>
1495
- </td>
1496
- <td class="is-vcentered">
1497
- <pre>400 14px/150% Sage UI</pre>
1498
- </td>
1499
- <td class="is-vcentered">
1500
- <div class="table__typography-preview">
1501
- n/a
1502
- </div>
1503
-
1504
- </td>
1505
- </tr>
1506
- <tr>
1507
- <td class="with-icons is-vcentered"
1508
- id="base-typographyFormFieldDropdownOptionsM"
1509
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: m; ">
1510
- typographyFormFieldDropdownOptionsM
1511
- <a href="#base-typographyFormFieldDropdownOptionsM"
1512
- title="permalink"
1513
- class="permalink">
1514
- 🔗
1515
- </a>
1516
- </td>
1517
- <td class="is-vcentered">
1518
- <pre>400 14px/150% Sage UI</pre>
1519
- </td>
1520
- <td class="is-vcentered">
1521
- <div class="table__typography-preview">
1522
- n/a
1523
- </div>
1524
-
1525
- </td>
1526
- </tr>
1527
- <tr>
1528
- <td class="with-icons is-vcentered"
1529
- id="base-typographyFormFieldDropdownOptionsL"
1530
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: l; ">
1531
- typographyFormFieldDropdownOptionsL
1532
- <a href="#base-typographyFormFieldDropdownOptionsL"
1533
- title="permalink"
1534
- class="permalink">
1535
- 🔗
1536
- </a>
1537
- </td>
1538
- <td class="is-vcentered">
1539
- <pre>400 16px/150% Sage UI</pre>
1540
- </td>
1541
- <td class="is-vcentered">
1542
- <div class="table__typography-preview">
1543
- n/a
1544
- </div>
1545
-
1546
- </td>
1547
- </tr>
1548
- <tr>
1549
- <td class="with-icons is-vcentered"
1550
- id="base-typographyFormFieldSecondLabelXs"
1551
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: xs; ">
1552
- typographyFormFieldSecondLabelXs
1553
- <a href="#base-typographyFormFieldSecondLabelXs"
1554
- title="permalink"
1555
- class="permalink">
1556
- 🔗
1557
- </a>
1558
- </td>
1559
- <td class="is-vcentered">
1560
- <pre>500 14px/150% Sage UI</pre>
1561
- </td>
1562
- <td class="is-vcentered">
1563
- <div class="table__typography-preview">
1564
- n/a
1565
- </div>
1566
-
1567
- </td>
1568
- </tr>
1569
- <tr>
1570
- <td class="with-icons is-vcentered"
1571
- id="base-typographyFormFieldSecondLabelS"
1572
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: s; ">
1573
- typographyFormFieldSecondLabelS
1574
- <a href="#base-typographyFormFieldSecondLabelS"
1575
- title="permalink"
1576
- class="permalink">
1577
- 🔗
1578
- </a>
1579
- </td>
1580
- <td class="is-vcentered">
1581
- <pre>500 14px/150% Sage UI</pre>
1582
- </td>
1583
- <td class="is-vcentered">
1584
- <div class="table__typography-preview">
1585
- n/a
1586
- </div>
1587
-
1588
- </td>
1589
- </tr>
1590
- <tr>
1591
- <td class="with-icons is-vcentered"
1592
- id="base-typographyFormFieldSecondLabelM"
1593
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: m; ">
1594
- typographyFormFieldSecondLabelM
1595
- <a href="#base-typographyFormFieldSecondLabelM"
1596
- title="permalink"
1597
- class="permalink">
1598
- 🔗
1599
- </a>
1600
- </td>
1601
- <td class="is-vcentered">
1602
- <pre>500 14px/150% Sage UI</pre>
1603
- </td>
1604
- <td class="is-vcentered">
1605
- <div class="table__typography-preview">
1606
- n/a
1607
- </div>
1608
-
1609
- </td>
1610
- </tr>
1611
- <tr>
1612
- <td class="with-icons is-vcentered"
1613
- id="base-typographyFormFieldSecondLabelL"
1614
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: l; ">
1615
- typographyFormFieldSecondLabelL
1616
- <a href="#base-typographyFormFieldSecondLabelL"
1617
- title="permalink"
1618
- class="permalink">
1619
- 🔗
1620
- </a>
1621
- </td>
1622
- <td class="is-vcentered">
1623
- <pre>500 16px/150% Sage UI</pre>
1624
- </td>
1625
- <td class="is-vcentered">
1626
- <div class="table__typography-preview">
1627
- n/a
1628
- </div>
1629
-
1630
- </td>
1631
- </tr>
1632
- <tr>
1633
- <td class="with-icons is-vcentered"
1634
- id="base-typographyFormFieldCharacterCountXs"
1635
- title="theme: base; category: typography; group: formField; name: characterCount; variant: xs; ">
1636
- typographyFormFieldCharacterCountXs
1637
- <a href="#base-typographyFormFieldCharacterCountXs"
1638
- title="permalink"
1639
- class="permalink">
1640
- 🔗
1641
- </a>
1642
- </td>
1643
- <td class="is-vcentered">
1644
- <pre>400 14px/150% Sage UI</pre>
1645
- </td>
1646
- <td class="is-vcentered">
1647
- <div class="table__typography-preview">
1648
- n/a
1649
- </div>
1650
-
1651
- </td>
1652
- </tr>
1653
- <tr>
1654
- <td class="with-icons is-vcentered"
1655
- id="base-typographyFormFieldCharacterCountS"
1656
- title="theme: base; category: typography; group: formField; name: characterCount; variant: s; ">
1657
- typographyFormFieldCharacterCountS
1658
- <a href="#base-typographyFormFieldCharacterCountS"
1659
- title="permalink"
1660
- class="permalink">
1661
- 🔗
1662
- </a>
1663
- </td>
1664
- <td class="is-vcentered">
1665
- <pre>400 14px/150% Sage UI</pre>
1666
- </td>
1667
- <td class="is-vcentered">
1668
- <div class="table__typography-preview">
1669
- n/a
1670
- </div>
1671
-
1672
- </td>
1673
- </tr>
1674
- <tr>
1675
- <td class="with-icons is-vcentered"
1676
- id="base-typographyFormFieldCharacterCountM"
1677
- title="theme: base; category: typography; group: formField; name: characterCount; variant: m; ">
1678
- typographyFormFieldCharacterCountM
1679
- <a href="#base-typographyFormFieldCharacterCountM"
1680
- title="permalink"
1681
- class="permalink">
1682
- 🔗
1683
- </a>
1684
- </td>
1685
- <td class="is-vcentered">
1686
- <pre>400 14px/150% Sage UI</pre>
1687
- </td>
1688
- <td class="is-vcentered">
1689
- <div class="table__typography-preview">
1690
- n/a
1691
- </div>
1692
-
1693
- </td>
1694
- </tr>
1695
- <tr>
1696
- <td class="with-icons is-vcentered"
1697
- id="base-typographyFormFieldCharacterCountL"
1698
- title="theme: base; category: typography; group: formField; name: characterCount; variant: l; ">
1699
- typographyFormFieldCharacterCountL
1700
- <a href="#base-typographyFormFieldCharacterCountL"
1701
- title="permalink"
1702
- class="permalink">
1703
- 🔗
1704
- </a>
1705
- </td>
1706
- <td class="is-vcentered">
1707
- <pre>400 16px/150% Sage UI</pre>
1708
- </td>
1709
- <td class="is-vcentered">
1710
- <div class="table__typography-preview">
1711
- n/a
1712
- </div>
1713
-
1714
- </td>
1715
- </tr>
1716
- <tr>
1717
- <td class="with-icons is-vcentered"
1718
- id="base-typographyLinkTextS"
1719
- title="theme: base; category: typography; group: link; name: text; variant: s; ">
1720
- typographyLinkTextS
1721
- <a href="#base-typographyLinkTextS"
1722
- title="permalink"
1723
- class="permalink">
1724
- 🔗
1725
- </a>
1726
- </td>
1727
- <td class="is-vcentered">
1728
- <pre>400 12px/150% Sage UI</pre>
1729
- </td>
1730
- <td class="is-vcentered">
1731
- <div class="table__typography-preview">
1732
- n/a
1733
- </div>
1734
-
1735
- </td>
1736
- </tr>
1737
- <tr>
1738
- <td class="with-icons is-vcentered"
1739
- id="base-typographyLinkTextM"
1740
- title="theme: base; category: typography; group: link; name: text; variant: m; ">
1741
- typographyLinkTextM
1742
- <a href="#base-typographyLinkTextM"
1743
- title="permalink"
1744
- class="permalink">
1745
- 🔗
1746
- </a>
1747
- </td>
1748
- <td class="is-vcentered">
1749
- <pre>400 14px/150% Sage UI</pre>
1750
- </td>
1751
- <td class="is-vcentered">
1752
- <div class="table__typography-preview">
1753
- n/a
1754
- </div>
1755
-
1756
- </td>
1757
- </tr>
1758
- <tr>
1759
- <td class="with-icons is-vcentered"
1760
- id="base-typographyLinkTextL"
1761
- title="theme: base; category: typography; group: link; name: text; variant: l; ">
1762
- typographyLinkTextL
1763
- <a href="#base-typographyLinkTextL"
1764
- title="permalink"
1765
- class="permalink">
1766
- 🔗
1767
- </a>
1768
- </td>
1769
- <td class="is-vcentered">
1770
- <pre>400 16px/150% Sage UI</pre>
1771
- </td>
1772
- <td class="is-vcentered">
1773
- <div class="table__typography-preview">
1774
- n/a
1775
- </div>
1776
-
1777
- </td>
1778
- </tr>
1779
- <tr>
1780
- <td class="with-icons is-vcentered"
1781
- id="base-typographyMenuLabelM"
1782
- title="theme: base; category: typography; group: menu; name: label; variant: m; ">
1783
- typographyMenuLabelM
1784
- <a href="#base-typographyMenuLabelM"
1785
- title="permalink"
1786
- class="permalink">
1787
- 🔗
1788
- </a>
1789
- </td>
1790
- <td class="is-vcentered">
1791
- <pre>500 14px/150% Sage UI</pre>
1792
- </td>
1793
- <td class="is-vcentered">
1794
- <div class="table__typography-preview">
1795
- n/a
1796
- </div>
1797
-
1798
- </td>
1799
- </tr>
1800
- <tr>
1801
- <td class="with-icons is-vcentered"
1802
- id="base-typographyMenuLabelL"
1803
- title="theme: base; category: typography; group: menu; name: label; variant: l; ">
1804
- typographyMenuLabelL
1805
- <a href="#base-typographyMenuLabelL"
1806
- title="permalink"
1807
- class="permalink">
1808
- 🔗
1809
- </a>
1810
- </td>
1811
- <td class="is-vcentered">
1812
- <pre>500 16px/150% Sage UI</pre>
1813
- </td>
1814
- <td class="is-vcentered">
1815
- <div class="table__typography-preview">
1816
- n/a
1817
- </div>
1818
-
1819
- </td>
1820
- </tr>
1821
- <tr>
1822
- <td class="with-icons is-vcentered"
1823
- id="base-typographyMenuSegmentTitleM"
1824
- title="theme: base; category: typography; group: menu; name: segmentTitle; variant: m; ">
1825
- typographyMenuSegmentTitleM
1826
- <a href="#base-typographyMenuSegmentTitleM"
1827
- title="permalink"
1828
- class="permalink">
1829
- 🔗
1830
- </a>
1831
- </td>
1832
- <td class="is-vcentered">
1833
- <pre>500 12px/150% Sage UI</pre>
1834
- </td>
1835
- <td class="is-vcentered">
1836
- <div class="table__typography-preview">
1837
- n/a
1838
- </div>
1839
-
1840
- </td>
1841
- </tr>
1842
- <tr>
1843
- <td class="with-icons is-vcentered"
1844
- id="base-typographyMessageHeadingM"
1845
- title="theme: base; category: typography; group: message; name: heading; variant: m; ">
1846
- typographyMessageHeadingM
1847
- <a href="#base-typographyMessageHeadingM"
1848
- title="permalink"
1849
- class="permalink">
1850
- 🔗
1851
- </a>
1852
- </td>
1853
- <td class="is-vcentered">
1854
- <pre>700 14px/150% Sage UI</pre>
1855
- </td>
1856
- <td class="is-vcentered">
1857
- <div class="table__typography-preview">
1858
- n/a
1859
- </div>
1860
-
1861
- </td>
1862
- </tr>
1863
- <tr>
1864
- <td class="with-icons is-vcentered"
1865
- id="base-typographyMessageHeadingL"
1866
- title="theme: base; category: typography; group: message; name: heading; variant: l; ">
1867
- typographyMessageHeadingL
1868
- <a href="#base-typographyMessageHeadingL"
1869
- title="permalink"
1870
- class="permalink">
1871
- 🔗
1872
- </a>
1873
- </td>
1874
- <td class="is-vcentered">
1875
- <pre>700 16px/150% Sage UI</pre>
1876
- </td>
1877
- <td class="is-vcentered">
1878
- <div class="table__typography-preview">
1879
- n/a
1880
- </div>
1881
-
1882
- </td>
1883
- </tr>
1884
- <tr>
1885
- <td class="with-icons is-vcentered"
1886
- id="base-typographyMessageTextM"
1887
- title="theme: base; category: typography; group: message; name: text; variant: m; ">
1888
- typographyMessageTextM
1889
- <a href="#base-typographyMessageTextM"
1890
- title="permalink"
1891
- class="permalink">
1892
- 🔗
1893
- </a>
1894
- </td>
1895
- <td class="is-vcentered">
1896
- <pre>400 14px/150% Sage UI</pre>
1897
- </td>
1898
- <td class="is-vcentered">
1899
- <div class="table__typography-preview">
1900
- n/a
1901
- </div>
1902
-
1903
- </td>
1904
- </tr>
1905
- <tr>
1906
- <td class="with-icons is-vcentered"
1907
- id="base-typographyMessageTextL"
1908
- title="theme: base; category: typography; group: message; name: text; variant: l; ">
1909
- typographyMessageTextL
1910
- <a href="#base-typographyMessageTextL"
1911
- title="permalink"
1912
- class="permalink">
1913
- 🔗
1914
- </a>
1915
- </td>
1916
- <td class="is-vcentered">
1917
- <pre>400 16px/150% Sage UI</pre>
1918
- </td>
1919
- <td class="is-vcentered">
1920
- <div class="table__typography-preview">
1921
- n/a
1922
- </div>
1923
-
1924
- </td>
1925
- </tr>
1926
- <tr>
1927
- <td class="with-icons is-vcentered"
1928
- id="base-typographyPaginationLabelM"
1929
- title="theme: base; category: typography; group: pagination; name: label; variant: m; ">
1930
- typographyPaginationLabelM
1931
- <a href="#base-typographyPaginationLabelM"
1932
- title="permalink"
1933
- class="permalink">
1934
- 🔗
1935
- </a>
1936
- </td>
1937
- <td class="is-vcentered">
1938
- <pre>400 13px/150% Sage UI</pre>
1939
- </td>
1940
- <td class="is-vcentered">
1941
- <div class="table__typography-preview">
1942
- n/a
1943
- </div>
1944
-
1945
- </td>
1946
- </tr>
1947
- <tr>
1948
- <td class="with-icons is-vcentered"
1949
- id="base-typographyPillLabelS"
1950
- title="theme: base; category: typography; group: pill; name: label; variant: s; ">
1951
- typographyPillLabelS
1952
- <a href="#base-typographyPillLabelS"
1953
- title="permalink"
1954
- class="permalink">
1955
- 🔗
1956
- </a>
1957
- </td>
1958
- <td class="is-vcentered">
1959
- <pre>500 10px/150% Sage UI</pre>
1960
- </td>
1961
- <td class="is-vcentered">
1962
- <div class="table__typography-preview">
1963
- n/a
1964
- </div>
1965
-
1966
- </td>
1967
- </tr>
1968
- <tr>
1969
- <td class="with-icons is-vcentered"
1970
- id="base-typographyPillLabelM"
1971
- title="theme: base; category: typography; group: pill; name: label; variant: m; ">
1972
- typographyPillLabelM
1973
- <a href="#base-typographyPillLabelM"
1974
- title="permalink"
1975
- class="permalink">
1976
- 🔗
1977
- </a>
1978
- </td>
1979
- <td class="is-vcentered">
1980
- <pre>500 12px/150% Sage UI</pre>
1981
- </td>
1982
- <td class="is-vcentered">
1983
- <div class="table__typography-preview">
1984
- n/a
1985
- </div>
1986
-
1987
- </td>
1988
- </tr>
1989
- <tr>
1990
- <td class="with-icons is-vcentered"
1991
- id="base-typographyPillLabelL"
1992
- title="theme: base; category: typography; group: pill; name: label; variant: l; ">
1993
- typographyPillLabelL
1994
- <a href="#base-typographyPillLabelL"
1995
- title="permalink"
1996
- class="permalink">
1997
- 🔗
1998
- </a>
1999
- </td>
2000
- <td class="is-vcentered">
2001
- <pre>500 14px/150% Sage UI</pre>
2002
- </td>
2003
- <td class="is-vcentered">
2004
- <div class="table__typography-preview">
2005
- n/a
2006
- </div>
2007
-
2008
- </td>
2009
- </tr>
2010
- <tr>
2011
- <td class="with-icons is-vcentered"
2012
- id="base-typographyPillLabelXl"
2013
- title="theme: base; category: typography; group: pill; name: label; variant: xl; ">
2014
- typographyPillLabelXl
2015
- <a href="#base-typographyPillLabelXl"
2016
- title="permalink"
2017
- class="permalink">
2018
- 🔗
2019
- </a>
2020
- </td>
2021
- <td class="is-vcentered">
2022
- <pre>500 16px/150% Sage UI</pre>
2023
- </td>
2024
- <td class="is-vcentered">
2025
- <div class="table__typography-preview">
2026
- n/a
2027
- </div>
2028
-
2029
- </td>
2030
- </tr>
2031
- <tr>
2032
- <td class="with-icons is-vcentered"
2033
- id="base-typographyProfileEmailTextXs"
2034
- title="theme: base; category: typography; group: profile; name: emailText; variant: xs; ">
2035
- typographyProfileEmailTextXs
2036
- <a href="#base-typographyProfileEmailTextXs"
2037
- title="permalink"
2038
- class="permalink">
2039
- 🔗
2040
- </a>
2041
- </td>
2042
- <td class="is-vcentered">
2043
- <pre>400 12px/100% Sage UI</pre>
2044
- </td>
2045
- <td class="is-vcentered">
2046
- <div class="table__typography-preview">
2047
- n/a
2048
- </div>
2049
-
2050
- </td>
2051
- </tr>
2052
- <tr>
2053
- <td class="with-icons is-vcentered"
2054
- id="base-typographyProfileEmailTextS"
2055
- title="theme: base; category: typography; group: profile; name: emailText; variant: s; ">
2056
- typographyProfileEmailTextS
2057
- <a href="#base-typographyProfileEmailTextS"
2058
- title="permalink"
2059
- class="permalink">
2060
- 🔗
2061
- </a>
2062
- </td>
2063
- <td class="is-vcentered">
2064
- <pre>400 14px/100% Sage UI</pre>
2065
- </td>
2066
- <td class="is-vcentered">
2067
- <div class="table__typography-preview">
2068
- n/a
2069
- </div>
2070
-
2071
- </td>
2072
- </tr>
2073
- <tr>
2074
- <td class="with-icons is-vcentered"
2075
- id="base-typographyProfileEmailTextM"
2076
- title="theme: base; category: typography; group: profile; name: emailText; variant: m; ">
2077
- typographyProfileEmailTextM
2078
- <a href="#base-typographyProfileEmailTextM"
2079
- title="permalink"
2080
- class="permalink">
2081
- 🔗
2082
- </a>
2083
- </td>
2084
- <td class="is-vcentered">
2085
- <pre>400 14px/125% Sage UI</pre>
2086
- </td>
2087
- <td class="is-vcentered">
2088
- <div class="table__typography-preview">
2089
- n/a
2090
- </div>
2091
-
2092
- </td>
2093
- </tr>
2094
- <tr>
2095
- <td class="with-icons is-vcentered"
2096
- id="base-typographyProfileEmailTextMl"
2097
- title="theme: base; category: typography; group: profile; name: emailText; variant: ml; ">
2098
- typographyProfileEmailTextMl
2099
- <a href="#base-typographyProfileEmailTextMl"
2100
- title="permalink"
2101
- class="permalink">
2102
- 🔗
2103
- </a>
2104
- </td>
2105
- <td class="is-vcentered">
2106
- <pre>400 14px/125% Sage UI</pre>
2107
- </td>
2108
- <td class="is-vcentered">
2109
- <div class="table__typography-preview">
2110
- n/a
2111
- </div>
2112
-
2113
- </td>
2114
- </tr>
2115
- <tr>
2116
- <td class="with-icons is-vcentered"
2117
- id="base-typographyProfileEmailTextL"
2118
- title="theme: base; category: typography; group: profile; name: emailText; variant: l; ">
2119
- typographyProfileEmailTextL
2120
- <a href="#base-typographyProfileEmailTextL"
2121
- title="permalink"
2122
- class="permalink">
2123
- 🔗
2124
- </a>
2125
- </td>
2126
- <td class="is-vcentered">
2127
- <pre>400 14px/125% Sage UI</pre>
2128
- </td>
2129
- <td class="is-vcentered">
2130
- <div class="table__typography-preview">
2131
- n/a
2132
- </div>
2133
-
2134
- </td>
2135
- </tr>
2136
- <tr>
2137
- <td class="with-icons is-vcentered"
2138
- id="base-typographyProfileEmailTextXl"
2139
- title="theme: base; category: typography; group: profile; name: emailText; variant: xl; ">
2140
- typographyProfileEmailTextXl
2141
- <a href="#base-typographyProfileEmailTextXl"
2142
- title="permalink"
2143
- class="permalink">
2144
- 🔗
2145
- </a>
2146
- </td>
2147
- <td class="is-vcentered">
2148
- <pre>400 18px/125% Sage UI</pre>
2149
- </td>
2150
- <td class="is-vcentered">
2151
- <div class="table__typography-preview">
2152
- n/a
2153
- </div>
2154
-
2155
- </td>
2156
- </tr>
2157
- <tr>
2158
- <td class="with-icons is-vcentered"
2159
- id="base-typographyProfileEmailTextXxl"
2160
- title="theme: base; category: typography; group: profile; name: emailText; variant: xxl; ">
2161
- typographyProfileEmailTextXxl
2162
- <a href="#base-typographyProfileEmailTextXxl"
2163
- title="permalink"
2164
- class="permalink">
2165
- 🔗
2166
- </a>
2167
- </td>
2168
- <td class="is-vcentered">
2169
- <pre>400 24px/125% Sage UI</pre>
2170
- </td>
2171
- <td class="is-vcentered">
2172
- <div class="table__typography-preview">
2173
- n/a
2174
- </div>
2175
-
2176
- </td>
2177
- </tr>
2178
- <tr>
2179
- <td class="with-icons is-vcentered"
2180
- id="base-typographyProfileEmailLinkXs"
2181
- title="theme: base; category: typography; group: profile; name: emailLink; variant: xs; ">
2182
- typographyProfileEmailLinkXs
2183
- <a href="#base-typographyProfileEmailLinkXs"
2184
- title="permalink"
2185
- class="permalink">
2186
- 🔗
2187
- </a>
2188
- </td>
2189
- <td class="is-vcentered">
2190
- <pre>400 12px/100% Sage UI</pre>
2191
- </td>
2192
- <td class="is-vcentered">
2193
- <div class="table__typography-preview">
2194
- n/a
2195
- </div>
2196
-
2197
- </td>
2198
- </tr>
2199
- <tr>
2200
- <td class="with-icons is-vcentered"
2201
- id="base-typographyProfileEmailLinkS"
2202
- title="theme: base; category: typography; group: profile; name: emailLink; variant: s; ">
2203
- typographyProfileEmailLinkS
2204
- <a href="#base-typographyProfileEmailLinkS"
2205
- title="permalink"
2206
- class="permalink">
2207
- 🔗
2208
- </a>
2209
- </td>
2210
- <td class="is-vcentered">
2211
- <pre>400 14px/100% Sage UI</pre>
2212
- </td>
2213
- <td class="is-vcentered">
2214
- <div class="table__typography-preview">
2215
- n/a
2216
- </div>
2217
-
2218
- </td>
2219
- </tr>
2220
- <tr>
2221
- <td class="with-icons is-vcentered"
2222
- id="base-typographyProfileEmailLinkM"
2223
- title="theme: base; category: typography; group: profile; name: emailLink; variant: m; ">
2224
- typographyProfileEmailLinkM
2225
- <a href="#base-typographyProfileEmailLinkM"
2226
- title="permalink"
2227
- class="permalink">
2228
- 🔗
2229
- </a>
2230
- </td>
2231
- <td class="is-vcentered">
2232
- <pre>400 14px/125% Sage UI</pre>
2233
- </td>
2234
- <td class="is-vcentered">
2235
- <div class="table__typography-preview">
2236
- n/a
2237
- </div>
2238
-
2239
- </td>
2240
- </tr>
2241
- <tr>
2242
- <td class="with-icons is-vcentered"
2243
- id="base-typographyProfileEmailLinkMl"
2244
- title="theme: base; category: typography; group: profile; name: emailLink; variant: ml; ">
2245
- typographyProfileEmailLinkMl
2246
- <a href="#base-typographyProfileEmailLinkMl"
2247
- title="permalink"
2248
- class="permalink">
2249
- 🔗
2250
- </a>
2251
- </td>
2252
- <td class="is-vcentered">
2253
- <pre>400 14px/125% Sage UI</pre>
2254
- </td>
2255
- <td class="is-vcentered">
2256
- <div class="table__typography-preview">
2257
- n/a
2258
- </div>
2259
-
2260
- </td>
2261
- </tr>
2262
- <tr>
2263
- <td class="with-icons is-vcentered"
2264
- id="base-typographyProfileEmailLinkL"
2265
- title="theme: base; category: typography; group: profile; name: emailLink; variant: l; ">
2266
- typographyProfileEmailLinkL
2267
- <a href="#base-typographyProfileEmailLinkL"
2268
- title="permalink"
2269
- class="permalink">
2270
- 🔗
2271
- </a>
2272
- </td>
2273
- <td class="is-vcentered">
2274
- <pre>400 14px/125% Sage UI</pre>
2275
- </td>
2276
- <td class="is-vcentered">
2277
- <div class="table__typography-preview">
2278
- n/a
2279
- </div>
2280
-
2281
- </td>
2282
- </tr>
2283
- <tr>
2284
- <td class="with-icons is-vcentered"
2285
- id="base-typographyProfileEmailLinkXl"
2286
- title="theme: base; category: typography; group: profile; name: emailLink; variant: xl; ">
2287
- typographyProfileEmailLinkXl
2288
- <a href="#base-typographyProfileEmailLinkXl"
2289
- title="permalink"
2290
- class="permalink">
2291
- 🔗
2292
- </a>
2293
- </td>
2294
- <td class="is-vcentered">
2295
- <pre>400 18px/125% Sage UI</pre>
2296
- </td>
2297
- <td class="is-vcentered">
2298
- <div class="table__typography-preview">
2299
- n/a
2300
- </div>
2301
-
2302
- </td>
2303
- </tr>
2304
- <tr>
2305
- <td class="with-icons is-vcentered"
2306
- id="base-typographyProfileEmailLinkXxl"
2307
- title="theme: base; category: typography; group: profile; name: emailLink; variant: xxl; ">
2308
- typographyProfileEmailLinkXxl
2309
- <a href="#base-typographyProfileEmailLinkXxl"
2310
- title="permalink"
2311
- class="permalink">
2312
- 🔗
2313
- </a>
2314
- </td>
2315
- <td class="is-vcentered">
2316
- <pre>400 24px/125% Sage UI</pre>
2317
- </td>
2318
- <td class="is-vcentered">
2319
- <div class="table__typography-preview">
2320
- n/a
2321
- </div>
2322
-
2323
- </td>
2324
- </tr>
2325
- <tr>
2326
- <td class="with-icons is-vcentered"
2327
- id="base-typographyProfileInitialsXs"
2328
- title="theme: base; category: typography; group: profile; name: initials; variant: xs; ">
2329
- typographyProfileInitialsXs
2330
- <a href="#base-typographyProfileInitialsXs"
2331
- title="permalink"
2332
- class="permalink">
2333
- 🔗
2334
- </a>
2335
- </td>
2336
- <td class="is-vcentered">
2337
- <pre>500 10px/150% Sage UI</pre>
2338
- </td>
2339
- <td class="is-vcentered">
2340
- <div class="table__typography-preview">
2341
- n/a
2342
- </div>
2343
-
2344
- </td>
2345
- </tr>
2346
- <tr>
2347
- <td class="with-icons is-vcentered"
2348
- id="base-typographyProfileInitialsS"
2349
- title="theme: base; category: typography; group: profile; name: initials; variant: s; ">
2350
- typographyProfileInitialsS
2351
- <a href="#base-typographyProfileInitialsS"
2352
- title="permalink"
2353
- class="permalink">
2354
- 🔗
2355
- </a>
2356
- </td>
2357
- <td class="is-vcentered">
2358
- <pre>500 14px/150% Sage UI</pre>
2359
- </td>
2360
- <td class="is-vcentered">
2361
- <div class="table__typography-preview">
2362
- n/a
2363
- </div>
2364
-
2365
- </td>
2366
- </tr>
2367
- <tr>
2368
- <td class="with-icons is-vcentered"
2369
- id="base-typographyProfileInitialsM"
2370
- title="theme: base; category: typography; group: profile; name: initials; variant: m; ">
2371
- typographyProfileInitialsM
2372
- <a href="#base-typographyProfileInitialsM"
2373
- title="permalink"
2374
- class="permalink">
2375
- 🔗
2376
- </a>
2377
- </td>
2378
- <td class="is-vcentered">
2379
- <pre>500 18px/150% Sage UI</pre>
2380
- </td>
2381
- <td class="is-vcentered">
2382
- <div class="table__typography-preview">
2383
- n/a
2384
- </div>
2385
-
2386
- </td>
2387
- </tr>
2388
- <tr>
2389
- <td class="with-icons is-vcentered"
2390
- id="base-typographyProfileInitialsMl"
2391
- title="theme: base; category: typography; group: profile; name: initials; variant: ml; ">
2392
- typographyProfileInitialsMl
2393
- <a href="#base-typographyProfileInitialsMl"
2394
- title="permalink"
2395
- class="permalink">
2396
- 🔗
2397
- </a>
2398
- </td>
2399
- <td class="is-vcentered">
2400
- <pre>500 24px/150% Sage UI</pre>
2401
- </td>
2402
- <td class="is-vcentered">
2403
- <div class="table__typography-preview">
2404
- n/a
2405
- </div>
2406
-
2407
- </td>
2408
- </tr>
2409
- <tr>
2410
- <td class="with-icons is-vcentered"
2411
- id="base-typographyProfileInitialsL"
2412
- title="theme: base; category: typography; group: profile; name: initials; variant: l; ">
2413
- typographyProfileInitialsL
2414
- <a href="#base-typographyProfileInitialsL"
2415
- title="permalink"
2416
- class="permalink">
2417
- 🔗
2418
- </a>
2419
- </td>
2420
- <td class="is-vcentered">
2421
- <pre>500 32px/150% Sage UI</pre>
2422
- </td>
2423
- <td class="is-vcentered">
2424
- <div class="table__typography-preview">
2425
- n/a
2426
- </div>
2427
-
2428
- </td>
2429
- </tr>
2430
- <tr>
2431
- <td class="with-icons is-vcentered"
2432
- id="base-typographyProfileInitialsXl"
2433
- title="theme: base; category: typography; group: profile; name: initials; variant: xl; ">
2434
- typographyProfileInitialsXl
2435
- <a href="#base-typographyProfileInitialsXl"
2436
- title="permalink"
2437
- class="permalink">
2438
- 🔗
2439
- </a>
2440
- </td>
2441
- <td class="is-vcentered">
2442
- <pre>500 48px/150% Sage UI</pre>
2443
- </td>
2444
- <td class="is-vcentered">
2445
- <div class="table__typography-preview">
2446
- n/a
2447
- </div>
2448
-
2449
- </td>
2450
- </tr>
2451
- <tr>
2452
- <td class="with-icons is-vcentered"
2453
- id="base-typographyProfileInitialsXxl"
2454
- title="theme: base; category: typography; group: profile; name: initials; variant: xxl; ">
2455
- typographyProfileInitialsXxl
2456
- <a href="#base-typographyProfileInitialsXxl"
2457
- title="permalink"
2458
- class="permalink">
2459
- 🔗
2460
- </a>
2461
- </td>
2462
- <td class="is-vcentered">
2463
- <pre>500 56px/150% Sage UI</pre>
2464
- </td>
2465
- <td class="is-vcentered">
2466
- <div class="table__typography-preview">
2467
- n/a
2468
- </div>
2469
-
2470
- </td>
2471
- </tr>
2472
- <tr>
2473
- <td class="with-icons is-vcentered"
2474
- id="base-typographyProfileNameXs"
2475
- title="theme: base; category: typography; group: profile; name: name; variant: xs; ">
2476
- typographyProfileNameXs
2477
- <a href="#base-typographyProfileNameXs"
2478
- title="permalink"
2479
- class="permalink">
2480
- 🔗
2481
- </a>
2482
- </td>
2483
- <td class="is-vcentered">
2484
- <pre>500 13px/100% Sage UI</pre>
2485
- </td>
2486
- <td class="is-vcentered">
2487
- <div class="table__typography-preview">
2488
- n/a
2489
- </div>
2490
-
2491
- </td>
2492
- </tr>
2493
- <tr>
2494
- <td class="with-icons is-vcentered"
2495
- id="base-typographyProfileNameS"
2496
- title="theme: base; category: typography; group: profile; name: name; variant: s; ">
2497
- typographyProfileNameS
2498
- <a href="#base-typographyProfileNameS"
2499
- title="permalink"
2500
- class="permalink">
2501
- 🔗
2502
- </a>
2503
- </td>
2504
- <td class="is-vcentered">
2505
- <pre>500 14px/100% Sage UI</pre>
2506
- </td>
2507
- <td class="is-vcentered">
2508
- <div class="table__typography-preview">
2509
- n/a
2510
- </div>
2511
-
2512
- </td>
2513
- </tr>
2514
- <tr>
2515
- <td class="with-icons is-vcentered"
2516
- id="base-typographyProfileNameM"
2517
- title="theme: base; category: typography; group: profile; name: name; variant: m; ">
2518
- typographyProfileNameM
2519
- <a href="#base-typographyProfileNameM"
2520
- title="permalink"
2521
- class="permalink">
2522
- 🔗
2523
- </a>
2524
- </td>
2525
- <td class="is-vcentered">
2526
- <pre>500 14px/125% Sage UI</pre>
2527
- </td>
2528
- <td class="is-vcentered">
2529
- <div class="table__typography-preview">
2530
- n/a
2531
- </div>
2532
-
2533
- </td>
2534
- </tr>
2535
- <tr>
2536
- <td class="with-icons is-vcentered"
2537
- id="base-typographyProfileNameMl"
2538
- title="theme: base; category: typography; group: profile; name: name; variant: ml; ">
2539
- typographyProfileNameMl
2540
- <a href="#base-typographyProfileNameMl"
2541
- title="permalink"
2542
- class="permalink">
2543
- 🔗
2544
- </a>
2545
- </td>
2546
- <td class="is-vcentered">
2547
- <pre>500 16px/125% Sage UI</pre>
2548
- </td>
2549
- <td class="is-vcentered">
2550
- <div class="table__typography-preview">
2551
- n/a
2552
- </div>
2553
-
2554
- </td>
2555
- </tr>
2556
- <tr>
2557
- <td class="with-icons is-vcentered"
2558
- id="base-typographyProfileNameL"
2559
- title="theme: base; category: typography; group: profile; name: name; variant: l; ">
2560
- typographyProfileNameL
2561
- <a href="#base-typographyProfileNameL"
2562
- title="permalink"
2563
- class="permalink">
2564
- 🔗
2565
- </a>
2566
- </td>
2567
- <td class="is-vcentered">
2568
- <pre>500 20px/125% Sage UI</pre>
2569
- </td>
2570
- <td class="is-vcentered">
2571
- <div class="table__typography-preview">
2572
- n/a
2573
- </div>
2574
-
2575
- </td>
2576
- </tr>
2577
- <tr>
2578
- <td class="with-icons is-vcentered"
2579
- id="base-typographyProfileNameXl"
2580
- title="theme: base; category: typography; group: profile; name: name; variant: xl; ">
2581
- typographyProfileNameXl
2582
- <a href="#base-typographyProfileNameXl"
2583
- title="permalink"
2584
- class="permalink">
2585
- 🔗
2586
- </a>
2587
- </td>
2588
- <td class="is-vcentered">
2589
- <pre>500 24px/125% Sage UI</pre>
2590
- </td>
2591
- <td class="is-vcentered">
2592
- <div class="table__typography-preview">
2593
- n/a
2594
- </div>
2595
-
2596
- </td>
2597
- </tr>
2598
- <tr>
2599
- <td class="with-icons is-vcentered"
2600
- id="base-typographyProfileNameXxl"
2601
- title="theme: base; category: typography; group: profile; name: name; variant: xxl; ">
2602
- typographyProfileNameXxl
2603
- <a href="#base-typographyProfileNameXxl"
2604
- title="permalink"
2605
- class="permalink">
2606
- 🔗
2607
- </a>
2608
- </td>
2609
- <td class="is-vcentered">
2610
- <pre>500 32px/125% Sage UI</pre>
2611
- </td>
2612
- <td class="is-vcentered">
2613
- <div class="table__typography-preview">
2614
- n/a
2615
- </div>
2616
-
2617
- </td>
2618
- </tr>
2619
- <tr>
2620
- <td class="with-icons is-vcentered"
2621
- id="base-typographyProgressTrackerValueLabelS"
2622
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: s; ">
2623
- typographyProgressTrackerValueLabelS
2624
- <a href="#base-typographyProgressTrackerValueLabelS"
2625
- title="permalink"
2626
- class="permalink">
2627
- 🔗
2628
- </a>
2629
- </td>
2630
- <td class="is-vcentered">
2631
- <pre>500 14px/150% Sage UI</pre>
2632
- </td>
2633
- <td class="is-vcentered">
2634
- <div class="table__typography-preview">
2635
- n/a
2636
- </div>
2637
-
2638
- </td>
2639
- </tr>
2640
- <tr>
2641
- <td class="with-icons is-vcentered"
2642
- id="base-typographyProgressTrackerValueLabelM"
2643
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: m; ">
2644
- typographyProgressTrackerValueLabelM
2645
- <a href="#base-typographyProgressTrackerValueLabelM"
2646
- title="permalink"
2647
- class="permalink">
2648
- 🔗
2649
- </a>
2650
- </td>
2651
- <td class="is-vcentered">
2652
- <pre>500 14px/150% Sage UI</pre>
2653
- </td>
2654
- <td class="is-vcentered">
2655
- <div class="table__typography-preview">
2656
- n/a
2657
- </div>
2658
-
2659
- </td>
2660
- </tr>
2661
- <tr>
2662
- <td class="with-icons is-vcentered"
2663
- id="base-typographyProgressTrackerValueLabelL"
2664
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: l; ">
2665
- typographyProgressTrackerValueLabelL
2666
- <a href="#base-typographyProgressTrackerValueLabelL"
2667
- title="permalink"
2668
- class="permalink">
2669
- 🔗
2670
- </a>
2671
- </td>
2672
- <td class="is-vcentered">
2673
- <pre>500 14px/150% Sage UI</pre>
2674
- </td>
2675
- <td class="is-vcentered">
2676
- <div class="table__typography-preview">
2677
- n/a
2678
- </div>
2679
-
2680
- </td>
2681
- </tr>
2682
- <tr>
2683
- <td class="with-icons is-vcentered"
2684
- id="base-typographySearchLabelM"
2685
- title="theme: base; category: typography; group: search; name: label; variant: m; ">
2686
- typographySearchLabelM
2687
- <a href="#base-typographySearchLabelM"
2688
- title="permalink"
2689
- class="permalink">
2690
- 🔗
2691
- </a>
2692
- </td>
2693
- <td class="is-vcentered">
2694
- <pre>400 14px/150% Sage UI</pre>
2695
- </td>
2696
- <td class="is-vcentered">
2697
- <div class="table__typography-preview">
2698
- n/a
2699
- </div>
2700
-
2701
- </td>
2702
- </tr>
2703
- <tr>
2704
- <td class="with-icons is-vcentered"
2705
- id="base-typographySidebarTitleXs"
2706
- title="theme: base; category: typography; group: sidebar; name: title; variant: xs; ">
2707
- typographySidebarTitleXs
2708
- <a href="#base-typographySidebarTitleXs"
2709
- title="permalink"
2710
- class="permalink">
2711
- 🔗
2712
- </a>
2713
- </td>
2714
- <td class="is-vcentered">
2715
- <pre>700 20px/125% Sage UI</pre>
2716
- </td>
2717
- <td class="is-vcentered">
2718
- <div class="table__typography-preview">
2719
- n/a
2720
- </div>
2721
-
2722
- </td>
2723
- </tr>
2724
- <tr>
2725
- <td class="with-icons is-vcentered"
2726
- id="base-typographySidebarTitleS"
2727
- title="theme: base; category: typography; group: sidebar; name: title; variant: s; ">
2728
- typographySidebarTitleS
2729
- <a href="#base-typographySidebarTitleS"
2730
- title="permalink"
2731
- class="permalink">
2732
- 🔗
2733
- </a>
2734
- </td>
2735
- <td class="is-vcentered">
2736
- <pre>700 20px/125% Sage UI</pre>
2737
- </td>
2738
- <td class="is-vcentered">
2739
- <div class="table__typography-preview">
2740
- n/a
2741
- </div>
2742
-
2743
- </td>
2744
- </tr>
2745
- <tr>
2746
- <td class="with-icons is-vcentered"
2747
- id="base-typographySidebarTitleMs"
2748
- title="theme: base; category: typography; group: sidebar; name: title; variant: ms; ">
2749
- typographySidebarTitleMs
2750
- <a href="#base-typographySidebarTitleMs"
2751
- title="permalink"
2752
- class="permalink">
2753
- 🔗
2754
- </a>
2755
- </td>
2756
- <td class="is-vcentered">
2757
- <pre>700 20px/125% Sage UI</pre>
2758
- </td>
2759
- <td class="is-vcentered">
2760
- <div class="table__typography-preview">
2761
- n/a
2762
- </div>
2763
-
2764
- </td>
2765
- </tr>
2766
- <tr>
2767
- <td class="with-icons is-vcentered"
2768
- id="base-typographySidebarTitleM"
2769
- title="theme: base; category: typography; group: sidebar; name: title; variant: m; ">
2770
- typographySidebarTitleM
2771
- <a href="#base-typographySidebarTitleM"
2772
- title="permalink"
2773
- class="permalink">
2774
- 🔗
2775
- </a>
2776
- </td>
2777
- <td class="is-vcentered">
2778
- <pre>700 20px/125% Sage UI</pre>
2779
- </td>
2780
- <td class="is-vcentered">
2781
- <div class="table__typography-preview">
2782
- n/a
2783
- </div>
2784
-
2785
- </td>
2786
- </tr>
2787
- <tr>
2788
- <td class="with-icons is-vcentered"
2789
- id="base-typographySidebarTitleMl"
2790
- title="theme: base; category: typography; group: sidebar; name: title; variant: ml; ">
2791
- typographySidebarTitleMl
2792
- <a href="#base-typographySidebarTitleMl"
2793
- title="permalink"
2794
- class="permalink">
2795
- 🔗
2796
- </a>
2797
- </td>
2798
- <td class="is-vcentered">
2799
- <pre>700 20px/125% Sage UI</pre>
2800
- </td>
2801
- <td class="is-vcentered">
2802
- <div class="table__typography-preview">
2803
- n/a
2804
- </div>
2805
-
2806
- </td>
2807
- </tr>
2808
- <tr>
2809
- <td class="with-icons is-vcentered"
2810
- id="base-typographySidebarTitleL"
2811
- title="theme: base; category: typography; group: sidebar; name: title; variant: l; ">
2812
- typographySidebarTitleL
2813
- <a href="#base-typographySidebarTitleL"
2814
- title="permalink"
2815
- class="permalink">
2816
- 🔗
2817
- </a>
2818
- </td>
2819
- <td class="is-vcentered">
2820
- <pre>700 20px/125% Sage UI</pre>
2821
- </td>
2822
- <td class="is-vcentered">
2823
- <div class="table__typography-preview">
2824
- n/a
2825
- </div>
2826
-
2827
- </td>
2828
- </tr>
2829
- <tr>
2830
- <td class="with-icons is-vcentered"
2831
- id="base-typographySidebarTitleXl"
2832
- title="theme: base; category: typography; group: sidebar; name: title; variant: xl; ">
2833
- typographySidebarTitleXl
2834
- <a href="#base-typographySidebarTitleXl"
2835
- title="permalink"
2836
- class="permalink">
2837
- 🔗
2838
- </a>
2839
- </td>
2840
- <td class="is-vcentered">
2841
- <pre>700 20px/125% Sage UI</pre>
2842
- </td>
2843
- <td class="is-vcentered">
2844
- <div class="table__typography-preview">
2845
- n/a
2846
- </div>
2847
-
2848
- </td>
2849
- </tr>
2850
- <tr>
2851
- <td class="with-icons is-vcentered"
2852
- id="base-typographySidebarParagraphXs"
2853
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xs; ">
2854
- typographySidebarParagraphXs
2855
- <a href="#base-typographySidebarParagraphXs"
2856
- title="permalink"
2857
- class="permalink">
2858
- 🔗
2859
- </a>
2860
- </td>
2861
- <td class="is-vcentered">
2862
- <pre>400 14px/125% Sage UI</pre>
2863
- </td>
2864
- <td class="is-vcentered">
2865
- <div class="table__typography-preview">
2866
- n/a
2867
- </div>
2868
-
2869
- </td>
2870
- </tr>
2871
- <tr>
2872
- <td class="with-icons is-vcentered"
2873
- id="base-typographySidebarParagraphS"
2874
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: s; ">
2875
- typographySidebarParagraphS
2876
- <a href="#base-typographySidebarParagraphS"
2877
- title="permalink"
2878
- class="permalink">
2879
- 🔗
2880
- </a>
2881
- </td>
2882
- <td class="is-vcentered">
2883
- <pre>400 14px/125% Sage UI</pre>
2884
- </td>
2885
- <td class="is-vcentered">
2886
- <div class="table__typography-preview">
2887
- n/a
2888
- </div>
2889
-
2890
- </td>
2891
- </tr>
2892
- <tr>
2893
- <td class="with-icons is-vcentered"
2894
- id="base-typographySidebarParagraphMs"
2895
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ms; ">
2896
- typographySidebarParagraphMs
2897
- <a href="#base-typographySidebarParagraphMs"
2898
- title="permalink"
2899
- class="permalink">
2900
- 🔗
2901
- </a>
2902
- </td>
2903
- <td class="is-vcentered">
2904
- <pre>400 14px/125% Sage UI</pre>
2905
- </td>
2906
- <td class="is-vcentered">
2907
- <div class="table__typography-preview">
2908
- n/a
2909
- </div>
2910
-
2911
- </td>
2912
- </tr>
2913
- <tr>
2914
- <td class="with-icons is-vcentered"
2915
- id="base-typographySidebarParagraphM"
2916
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: m; ">
2917
- typographySidebarParagraphM
2918
- <a href="#base-typographySidebarParagraphM"
2919
- title="permalink"
2920
- class="permalink">
2921
- 🔗
2922
- </a>
2923
- </td>
2924
- <td class="is-vcentered">
2925
- <pre>400 14px/125% Sage UI</pre>
2926
- </td>
2927
- <td class="is-vcentered">
2928
- <div class="table__typography-preview">
2929
- n/a
2930
- </div>
2931
-
2932
- </td>
2933
- </tr>
2934
- <tr>
2935
- <td class="with-icons is-vcentered"
2936
- id="base-typographySidebarParagraphMl"
2937
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ml; ">
2938
- typographySidebarParagraphMl
2939
- <a href="#base-typographySidebarParagraphMl"
2940
- title="permalink"
2941
- class="permalink">
2942
- 🔗
2943
- </a>
2944
- </td>
2945
- <td class="is-vcentered">
2946
- <pre>400 14px/125% Sage UI</pre>
2947
- </td>
2948
- <td class="is-vcentered">
2949
- <div class="table__typography-preview">
2950
- n/a
2951
- </div>
2952
-
2953
- </td>
2954
- </tr>
2955
- <tr>
2956
- <td class="with-icons is-vcentered"
2957
- id="base-typographySidebarParagraphL"
2958
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: l; ">
2959
- typographySidebarParagraphL
2960
- <a href="#base-typographySidebarParagraphL"
2961
- title="permalink"
2962
- class="permalink">
2963
- 🔗
2964
- </a>
2965
- </td>
2966
- <td class="is-vcentered">
2967
- <pre>400 14px/125% Sage UI</pre>
2968
- </td>
2969
- <td class="is-vcentered">
2970
- <div class="table__typography-preview">
2971
- n/a
2972
- </div>
2973
-
2974
- </td>
2975
- </tr>
2976
- <tr>
2977
- <td class="with-icons is-vcentered"
2978
- id="base-typographySidebarParagraphXl"
2979
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xl; ">
2980
- typographySidebarParagraphXl
2981
- <a href="#base-typographySidebarParagraphXl"
2982
- title="permalink"
2983
- class="permalink">
2984
- 🔗
2985
- </a>
2986
- </td>
2987
- <td class="is-vcentered">
2988
- <pre>400 14px/125% Sage UI</pre>
2989
- </td>
2990
- <td class="is-vcentered">
2991
- <div class="table__typography-preview">
2992
- n/a
2993
- </div>
2994
-
2995
- </td>
2996
- </tr>
2997
- <tr>
2998
- <td class="with-icons is-vcentered"
2999
- id="base-typographyStepFlowCompleteLabelM"
3000
- title="theme: base; category: typography; group: stepFlow; name: completeLabel; variant: m; ">
3001
- typographyStepFlowCompleteLabelM
3002
- <a href="#base-typographyStepFlowCompleteLabelM"
3003
- title="permalink"
3004
- class="permalink">
3005
- 🔗
3006
- </a>
3007
- </td>
3008
- <td class="is-vcentered">
3009
- <pre>500 14px/150% Sage UI</pre>
3010
- </td>
3011
- <td class="is-vcentered">
3012
- <div class="table__typography-preview">
3013
- n/a
3014
- </div>
3015
-
3016
- </td>
3017
- </tr>
3018
- <tr>
3019
- <td class="with-icons is-vcentered"
3020
- id="base-typographyStepFlowCurrentLabelM"
3021
- title="theme: base; category: typography; group: stepFlow; name: currentLabel; variant: m; ">
3022
- typographyStepFlowCurrentLabelM
3023
- <a href="#base-typographyStepFlowCurrentLabelM"
3024
- title="permalink"
3025
- class="permalink">
3026
- 🔗
3027
- </a>
3028
- </td>
3029
- <td class="is-vcentered">
3030
- <pre>500 14px/150% Sage UI</pre>
3031
- </td>
3032
- <td class="is-vcentered">
3033
- <div class="table__typography-preview">
3034
- n/a
3035
- </div>
3036
-
3037
- </td>
3038
- </tr>
3039
- <tr>
3040
- <td class="with-icons is-vcentered"
3041
- id="base-typographyStepFlowIncompleteLabelM"
3042
- title="theme: base; category: typography; group: stepFlow; name: incompleteLabel; variant: m; ">
3043
- typographyStepFlowIncompleteLabelM
3044
- <a href="#base-typographyStepFlowIncompleteLabelM"
3045
- title="permalink"
3046
- class="permalink">
3047
- 🔗
3048
- </a>
3049
- </td>
3050
- <td class="is-vcentered">
3051
- <pre>500 14px/150% Sage UI</pre>
3052
- </td>
3053
- <td class="is-vcentered">
3054
- <div class="table__typography-preview">
3055
- n/a
3056
- </div>
3057
-
3058
- </td>
3059
- </tr>
3060
- <tr>
3061
- <td class="with-icons is-vcentered"
3062
- id="base-typographySwitchOptionLabelM"
3063
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: m; ">
3064
- typographySwitchOptionLabelM
3065
- <a href="#base-typographySwitchOptionLabelM"
3066
- title="permalink"
3067
- class="permalink">
3068
- 🔗
3069
- </a>
3070
- </td>
3071
- <td class="is-vcentered">
3072
- <pre>500 12px/150% Sage UI</pre>
3073
- </td>
3074
- <td class="is-vcentered">
3075
- <div class="table__typography-preview">
3076
- n/a
3077
- </div>
3078
-
3079
- </td>
3080
- </tr>
3081
- <tr>
3082
- <td class="with-icons is-vcentered"
3083
- id="base-typographySwitchOptionLabelL"
3084
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: l; ">
3085
- typographySwitchOptionLabelL
3086
- <a href="#base-typographySwitchOptionLabelL"
3087
- title="permalink"
3088
- class="permalink">
3089
- 🔗
3090
- </a>
3091
- </td>
3092
- <td class="is-vcentered">
3093
- <pre>500 14px/150% Sage UI</pre>
3094
- </td>
3095
- <td class="is-vcentered">
3096
- <div class="table__typography-preview">
3097
- n/a
3098
- </div>
3099
-
3100
- </td>
3101
- </tr>
3102
- <tr>
3103
- <td class="with-icons is-vcentered"
3104
- id="base-typographyTableHeaderTextXs"
3105
- title="theme: base; category: typography; group: table; name: headerText; variant: xs; ">
3106
- typographyTableHeaderTextXs
3107
- <a href="#base-typographyTableHeaderTextXs"
3108
- title="permalink"
3109
- class="permalink">
3110
- 🔗
3111
- </a>
3112
- </td>
3113
- <td class="is-vcentered">
3114
- <pre>500 13px/150% Sage UI</pre>
3115
- </td>
3116
- <td class="is-vcentered">
3117
- <div class="table__typography-preview">
3118
- n/a
3119
- </div>
3120
-
3121
- </td>
3122
- </tr>
3123
- <tr>
3124
- <td class="with-icons is-vcentered"
3125
- id="base-typographyTableHeaderTextS"
3126
- title="theme: base; category: typography; group: table; name: headerText; variant: s; ">
3127
- typographyTableHeaderTextS
3128
- <a href="#base-typographyTableHeaderTextS"
3129
- title="permalink"
3130
- class="permalink">
3131
- 🔗
3132
- </a>
3133
- </td>
3134
- <td class="is-vcentered">
3135
- <pre>500 14px/150% Sage UI</pre>
3136
- </td>
3137
- <td class="is-vcentered">
3138
- <div class="table__typography-preview">
3139
- n/a
3140
- </div>
3141
-
3142
- </td>
3143
- </tr>
3144
- <tr>
3145
- <td class="with-icons is-vcentered"
3146
- id="base-typographyTableHeaderTextM"
3147
- title="theme: base; category: typography; group: table; name: headerText; variant: m; ">
3148
- typographyTableHeaderTextM
3149
- <a href="#base-typographyTableHeaderTextM"
3150
- title="permalink"
3151
- class="permalink">
3152
- 🔗
3153
- </a>
3154
- </td>
3155
- <td class="is-vcentered">
3156
- <pre>500 14px/150% Sage UI</pre>
3157
- </td>
3158
- <td class="is-vcentered">
3159
- <div class="table__typography-preview">
3160
- n/a
3161
- </div>
3162
-
3163
- </td>
3164
- </tr>
3165
- <tr>
3166
- <td class="with-icons is-vcentered"
3167
- id="base-typographyTableHeaderTextL"
3168
- title="theme: base; category: typography; group: table; name: headerText; variant: l; ">
3169
- typographyTableHeaderTextL
3170
- <a href="#base-typographyTableHeaderTextL"
3171
- title="permalink"
3172
- class="permalink">
3173
- 🔗
3174
- </a>
3175
- </td>
3176
- <td class="is-vcentered">
3177
- <pre>500 16px/150% Sage UI</pre>
3178
- </td>
3179
- <td class="is-vcentered">
3180
- <div class="table__typography-preview">
3181
- n/a
3182
- </div>
3183
-
3184
- </td>
3185
- </tr>
3186
- <tr>
3187
- <td class="with-icons is-vcentered"
3188
- id="base-typographyTableHeaderTextXl"
3189
- title="theme: base; category: typography; group: table; name: headerText; variant: xl; ">
3190
- typographyTableHeaderTextXl
3191
- <a href="#base-typographyTableHeaderTextXl"
3192
- title="permalink"
3193
- class="permalink">
3194
- 🔗
3195
- </a>
3196
- </td>
3197
- <td class="is-vcentered">
3198
- <pre>500 16px/150% Sage UI</pre>
3199
- </td>
3200
- <td class="is-vcentered">
3201
- <div class="table__typography-preview">
3202
- n/a
3203
- </div>
3204
-
3205
- </td>
3206
- </tr>
3207
- <tr>
3208
- <td class="with-icons is-vcentered"
3209
- id="base-typographyTableCellTextXs"
3210
- title="theme: base; category: typography; group: table; name: cellText; variant: xs; ">
3211
- typographyTableCellTextXs
3212
- <a href="#base-typographyTableCellTextXs"
3213
- title="permalink"
3214
- class="permalink">
3215
- 🔗
3216
- </a>
3217
- </td>
3218
- <td class="is-vcentered">
3219
- <pre>400 13px/150% Sage UI</pre>
3220
- </td>
3221
- <td class="is-vcentered">
3222
- <div class="table__typography-preview">
3223
- n/a
3224
- </div>
3225
-
3226
- </td>
3227
- </tr>
3228
- <tr>
3229
- <td class="with-icons is-vcentered"
3230
- id="base-typographyTableCellTextS"
3231
- title="theme: base; category: typography; group: table; name: cellText; variant: s; ">
3232
- typographyTableCellTextS
3233
- <a href="#base-typographyTableCellTextS"
3234
- title="permalink"
3235
- class="permalink">
3236
- 🔗
3237
- </a>
3238
- </td>
3239
- <td class="is-vcentered">
3240
- <pre>400 14px/150% Sage UI</pre>
3241
- </td>
3242
- <td class="is-vcentered">
3243
- <div class="table__typography-preview">
3244
- n/a
3245
- </div>
3246
-
3247
- </td>
3248
- </tr>
3249
- <tr>
3250
- <td class="with-icons is-vcentered"
3251
- id="base-typographyTableCellTextM"
3252
- title="theme: base; category: typography; group: table; name: cellText; variant: m; ">
3253
- typographyTableCellTextM
3254
- <a href="#base-typographyTableCellTextM"
3255
- title="permalink"
3256
- class="permalink">
3257
- 🔗
3258
- </a>
3259
- </td>
3260
- <td class="is-vcentered">
3261
- <pre>400 14px/150% Sage UI</pre>
3262
- </td>
3263
- <td class="is-vcentered">
3264
- <div class="table__typography-preview">
3265
- n/a
3266
- </div>
3267
-
3268
- </td>
3269
- </tr>
3270
- <tr>
3271
- <td class="with-icons is-vcentered"
3272
- id="base-typographyTableCellTextL"
3273
- title="theme: base; category: typography; group: table; name: cellText; variant: l; ">
3274
- typographyTableCellTextL
3275
- <a href="#base-typographyTableCellTextL"
3276
- title="permalink"
3277
- class="permalink">
3278
- 🔗
3279
- </a>
3280
- </td>
3281
- <td class="is-vcentered">
3282
- <pre>400 16px/150% Sage UI</pre>
3283
- </td>
3284
- <td class="is-vcentered">
3285
- <div class="table__typography-preview">
3286
- n/a
3287
- </div>
3288
-
3289
- </td>
3290
- </tr>
3291
- <tr>
3292
- <td class="with-icons is-vcentered"
3293
- id="base-typographyTableCellTextXl"
3294
- title="theme: base; category: typography; group: table; name: cellText; variant: xl; ">
3295
- typographyTableCellTextXl
3296
- <a href="#base-typographyTableCellTextXl"
3297
- title="permalink"
3298
- class="permalink">
3299
- 🔗
3300
- </a>
3301
- </td>
3302
- <td class="is-vcentered">
3303
- <pre>400 16px/150% Sage UI</pre>
3304
- </td>
3305
- <td class="is-vcentered">
3306
- <div class="table__typography-preview">
3307
- n/a
3308
- </div>
3309
-
3310
- </td>
3311
- </tr>
3312
- <tr>
3313
- <td class="with-icons is-vcentered"
3314
- id="base-typographyTileParagraphM"
3315
- title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
3316
- typographyTileParagraphM
3317
- <a href="#base-typographyTileParagraphM"
3318
- title="permalink"
3319
- class="permalink">
3320
- 🔗
3321
- </a>
3322
- </td>
3323
- <td class="is-vcentered">
3324
- <pre>400 14px/150% Sage UI</pre>
3325
- </td>
3326
- <td class="is-vcentered">
3327
- <div class="table__typography-preview">
3328
- n/a
3329
- </div>
3330
-
3331
- </td>
3332
- </tr>
3333
- <tr>
3334
- <td class="with-icons is-vcentered"
3335
- id="base-typographyTooltipTextM"
3336
- title="theme: base; category: typography; group: tooltip; name: text; variant: m; ">
3337
- typographyTooltipTextM
3338
- <a href="#base-typographyTooltipTextM"
3339
- title="permalink"
3340
- class="permalink">
3341
- 🔗
3342
- </a>
3343
- </td>
3344
- <td class="is-vcentered">
3345
- <pre>400 14px/150% Sage UI</pre>
3346
- </td>
3347
- <td class="is-vcentered">
3348
- <div class="table__typography-preview">
3349
- n/a
3350
- </div>
3351
-
3352
- </td>
3353
- </tr>
3354
- <tr>
3355
- <td class="with-icons is-vcentered"
3356
- id="base-typographyTooltipTextL"
3357
- title="theme: base; category: typography; group: tooltip; name: text; variant: l; ">
3358
- typographyTooltipTextL
3359
- <a href="#base-typographyTooltipTextL"
3360
- title="permalink"
3361
- class="permalink">
3362
- 🔗
3363
- </a>
3364
- </td>
3365
- <td class="is-vcentered">
3366
- <pre>400 16px/150% Sage UI</pre>
3367
- </td>
3368
- <td class="is-vcentered">
3369
- <div class="table__typography-preview">
3370
- n/a
3371
- </div>
3372
-
3373
- </td>
3374
- </tr>
3375
- </table>
3376
- </section>
3377
- </main>
3378
- </div>
3379
-
3380
-
3381
- </div>
3382
-
3383
- <script>
3384
- const searchParams = new URLSearchParams(window.location.search);
3385
- const embedded = !!searchParams.get('embedded');
3386
- if(embedded) {
3387
- document.body.classList.add('embedded')
3388
- }
3389
- </script>
3390
- </body>
3391
- </html>