@sage/design-tokens 2.1.0 → 2.2.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 (47) hide show
  1. package/android/no-theme.xml +1 -1
  2. package/css/no-theme.css +1 -1
  3. package/data/tokens.json +0 -2864
  4. package/docs/tokens/index.html +68 -8329
  5. package/docs/tokens/no-theme/border-radius/index.html +0 -79
  6. package/docs/tokens/no-theme/border-width/index.html +0 -79
  7. package/docs/tokens/no-theme/box-shadow/index.html +0 -79
  8. package/docs/tokens/no-theme/colors/index.html +0 -79
  9. package/docs/tokens/no-theme/font-families/index.html +0 -79
  10. package/docs/tokens/no-theme/font-sizes/index.html +0 -79
  11. package/docs/tokens/no-theme/font-weights/index.html +0 -79
  12. package/docs/tokens/no-theme/index.html +0 -79
  13. package/docs/tokens/no-theme/line-heights/index.html +0 -79
  14. package/docs/tokens/no-theme/sizing/index.html +0 -79
  15. package/docs/tokens/no-theme/spacing/index.html +0 -79
  16. package/docs/tokens/no-theme/typography/index.html +0 -79
  17. package/index.d.ts +0 -2
  18. package/index.js +0 -2
  19. package/ios/no-theme.h +1 -1
  20. package/js/no-theme/common.js +1 -1
  21. package/package.json +1 -1
  22. package/sage-design-tokens-2.2.0.tgz +0 -0
  23. package/scss/no-theme.scss +1 -1
  24. package/android/base.xml +0 -385
  25. package/css/base.css +0 -387
  26. package/docs/tokens/base/border-radius/index.html +0 -399
  27. package/docs/tokens/base/border-width/index.html +0 -483
  28. package/docs/tokens/base/box-shadow/index.html +0 -525
  29. package/docs/tokens/base/colors/index.html +0 -4137
  30. package/docs/tokens/base/font-families/index.html +0 -462
  31. package/docs/tokens/base/font-sizes/index.html +0 -664
  32. package/docs/tokens/base/font-weights/index.html +0 -441
  33. package/docs/tokens/base/index.html +0 -8427
  34. package/docs/tokens/base/line-heights/index.html +0 -441
  35. package/docs/tokens/base/opacity/index.html +0 -441
  36. package/docs/tokens/base/sizing/index.html +0 -903
  37. package/docs/tokens/base/spacing/index.html +0 -735
  38. package/docs/tokens/base/typography/index.html +0 -2772
  39. package/docs/tokens/figma-only/index.html +0 -394
  40. package/docs/tokens/figma-only/sizing/index.html +0 -399
  41. package/ios/base.h +0 -389
  42. package/js/base/common.d.ts +0 -376
  43. package/js/base/common.js +0 -387
  44. package/js/base/es6.d.ts +0 -379
  45. package/js/base/es6.js +0 -382
  46. package/sage-design-tokens-2.1.0.tgz +0 -0
  47. package/scss/base.scss +0 -384
package/docs/tokens/base/typography/index.html DELETED
@@ -1,2772 +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
- <p class="menu-label">
260
- <a href="../../no-theme/index.html">
261
- no-theme
262
- </a>
263
- </p>
264
- <ul class="menu-list">
265
- <li>
266
- <a href="../../no-theme/colors/index.html">
267
- colors
268
- </a>
269
- </li>
270
- <li>
271
- <a href="../../no-theme/sizing/index.html">
272
- sizing
273
- </a>
274
- </li>
275
- <li>
276
- <a href="../../no-theme/spacing/index.html">
277
- spacing
278
- </a>
279
- </li>
280
- <li>
281
- <a href="../../no-theme/border-width/index.html">
282
- borderWidth
283
- </a>
284
- </li>
285
- <li>
286
- <a href="../../no-theme/font-sizes/index.html">
287
- fontSizes
288
- </a>
289
- </li>
290
- <li>
291
- <a href="../../no-theme/box-shadow/index.html">
292
- boxShadow
293
- </a>
294
- </li>
295
- <li>
296
- <a href="../../no-theme/font-weights/index.html">
297
- fontWeights
298
- </a>
299
- </li>
300
- <li>
301
- <a href="../../no-theme/line-heights/index.html">
302
- lineHeights
303
- </a>
304
- </li>
305
- <li>
306
- <a href="../../no-theme/font-families/index.html">
307
- fontFamilies
308
- </a>
309
- </li>
310
- <li>
311
- <a href="../../no-theme/border-radius/index.html">
312
- borderRadius
313
- </a>
314
- </li>
315
- <li>
316
- <a href="../../no-theme/typography/index.html">
317
- typography
318
- </a>
319
- </li>
320
- </ul>
321
- <p class="menu-label">
322
- <a href="../../figma-only/index.html">
323
- figma-only
324
- </a>
325
- </p>
326
- <ul class="menu-list">
327
- <li>
328
- <a href="../../figma-only/sizing/index.html">
329
- sizing
330
- </a>
331
- </li>
332
- </ul>
333
- </section>
334
- </aside>
335
- <main class="content">
336
- <h1 class="hide-on-embedded">
337
- <a href="../../index.html">
338
- Sage Design Tokens
339
- </a>
340
- /
341
- <a href="../index.html">
342
- base
343
- </a>
344
- /
345
- typography
346
- </h1>
347
-
348
- <section class="my-6">
349
- <table class="table is-bordered is-hoverable is-fullwidth">
350
- <colgroup>
351
- <col width="50%">
352
- <col width="25%">
353
- <col width="35%">
354
- </colgroup>
355
- <thead>
356
- <tr>
357
- <th class="has-background-light">Name</th>
358
- <th class="has-background-light">Value</th>
359
- <th class="has-background-light">Preview</th>
360
- </tr>
361
- </thead>
362
- <tr>
363
- <td class="with-icons is-vcentered"
364
- id="base-typographyAccordionTitleM"
365
- title="theme: base; category: typography; group: accordion; name: title; variant: m; ">
366
- typographyAccordionTitleM
367
- <a href="#base-typographyAccordionTitleM"
368
- title="permalink"
369
- class="permalink">
370
- 🔗
371
- </a>
372
- </td>
373
- <td class="is-vcentered">
374
- <pre>700 20px/125% Sage UI</pre>
375
- </td>
376
- <td class="is-vcentered">
377
- <div class="table__typography-preview">
378
- n/a
379
- </div>
380
-
381
- </td>
382
- </tr>
383
- <tr>
384
- <td class="with-icons is-vcentered"
385
- id="base-typographyAccordionSubtitleM"
386
- title="theme: base; category: typography; group: accordion; name: subtitle; variant: m; ">
387
- typographyAccordionSubtitleM
388
- <a href="#base-typographyAccordionSubtitleM"
389
- title="permalink"
390
- class="permalink">
391
- 🔗
392
- </a>
393
- </td>
394
- <td class="is-vcentered">
395
- <pre>400 14px/150% Sage UI</pre>
396
- </td>
397
- <td class="is-vcentered">
398
- <div class="table__typography-preview">
399
- n/a
400
- </div>
401
-
402
- </td>
403
- </tr>
404
- <tr>
405
- <td class="with-icons is-vcentered"
406
- id="base-typographyAccordionParagraphM"
407
- title="theme: base; category: typography; group: accordion; name: paragraph; variant: m; ">
408
- typographyAccordionParagraphM
409
- <a href="#base-typographyAccordionParagraphM"
410
- title="permalink"
411
- class="permalink">
412
- 🔗
413
- </a>
414
- </td>
415
- <td class="is-vcentered">
416
- <pre>400 14px/150% Sage UI</pre>
417
- </td>
418
- <td class="is-vcentered">
419
- <div class="table__typography-preview">
420
- n/a
421
- </div>
422
-
423
- </td>
424
- </tr>
425
- <tr>
426
- <td class="with-icons is-vcentered"
427
- id="base-typographyActionPopoverMenuItemM"
428
- title="theme: base; category: typography; group: actionPopover; name: menuItem; variant: m; ">
429
- typographyActionPopoverMenuItemM
430
- <a href="#base-typographyActionPopoverMenuItemM"
431
- title="permalink"
432
- class="permalink">
433
- 🔗
434
- </a>
435
- </td>
436
- <td class="is-vcentered">
437
- <pre>700 14px/150% Sage UI</pre>
438
- </td>
439
- <td class="is-vcentered">
440
- <div class="table__typography-preview">
441
- n/a
442
- </div>
443
-
444
- </td>
445
- </tr>
446
- <tr>
447
- <td class="with-icons is-vcentered"
448
- id="base-typographyAnchorNavLabelM"
449
- title="theme: base; category: typography; group: anchorNav; name: label; variant: m; ">
450
- typographyAnchorNavLabelM
451
- <a href="#base-typographyAnchorNavLabelM"
452
- title="permalink"
453
- class="permalink">
454
- 🔗
455
- </a>
456
- </td>
457
- <td class="is-vcentered">
458
- <pre>500 14px/150% Sage UI</pre>
459
- </td>
460
- <td class="is-vcentered">
461
- <div class="table__typography-preview">
462
- n/a
463
- </div>
464
-
465
- </td>
466
- </tr>
467
- <tr>
468
- <td class="with-icons is-vcentered"
469
- id="base-typographyBadgeLabelM"
470
- title="theme: base; category: typography; group: badge; name: label; variant: m; ">
471
- typographyBadgeLabelM
472
- <a href="#base-typographyBadgeLabelM"
473
- title="permalink"
474
- class="permalink">
475
- 🔗
476
- </a>
477
- </td>
478
- <td class="is-vcentered">
479
- <pre>500 12px/150% Sage UI</pre>
480
- </td>
481
- <td class="is-vcentered">
482
- <div class="table__typography-preview">
483
- n/a
484
- </div>
485
-
486
- </td>
487
- </tr>
488
- <tr>
489
- <td class="with-icons is-vcentered"
490
- id="base-typographyButtonLabelS"
491
- title="theme: base; category: typography; group: button; name: label; variant: s; ">
492
- typographyButtonLabelS
493
- <a href="#base-typographyButtonLabelS"
494
- title="permalink"
495
- class="permalink">
496
- 🔗
497
- </a>
498
- </td>
499
- <td class="is-vcentered">
500
- <pre>700 14px/150% Sage UI</pre>
501
- </td>
502
- <td class="is-vcentered">
503
- <div class="table__typography-preview">
504
- n/a
505
- </div>
506
-
507
- </td>
508
- </tr>
509
- <tr>
510
- <td class="with-icons is-vcentered"
511
- id="base-typographyButtonLabelM"
512
- title="theme: base; category: typography; group: button; name: label; variant: m; ">
513
- typographyButtonLabelM
514
- <a href="#base-typographyButtonLabelM"
515
- title="permalink"
516
- class="permalink">
517
- 🔗
518
- </a>
519
- </td>
520
- <td class="is-vcentered">
521
- <pre>700 14px/150% Sage UI</pre>
522
- </td>
523
- <td class="is-vcentered">
524
- <div class="table__typography-preview">
525
- n/a
526
- </div>
527
-
528
- </td>
529
- </tr>
530
- <tr>
531
- <td class="with-icons is-vcentered"
532
- id="base-typographyButtonLabelL"
533
- title="theme: base; category: typography; group: button; name: label; variant: l; ">
534
- typographyButtonLabelL
535
- <a href="#base-typographyButtonLabelL"
536
- title="permalink"
537
- class="permalink">
538
- 🔗
539
- </a>
540
- </td>
541
- <td class="is-vcentered">
542
- <pre>700 16px/150% Sage UI</pre>
543
- </td>
544
- <td class="is-vcentered">
545
- <div class="table__typography-preview">
546
- n/a
547
- </div>
548
-
549
- </td>
550
- </tr>
551
- <tr>
552
- <td class="with-icons is-vcentered"
553
- id="base-typographyCardSelectTitleM"
554
- title="theme: base; category: typography; group: cardSelect; name: title; variant: m; ">
555
- typographyCardSelectTitleM
556
- <a href="#base-typographyCardSelectTitleM"
557
- title="permalink"
558
- class="permalink">
559
- 🔗
560
- </a>
561
- </td>
562
- <td class="is-vcentered">
563
- <pre>700 16px/150% Sage UI</pre>
564
- </td>
565
- <td class="is-vcentered">
566
- <div class="table__typography-preview">
567
- n/a
568
- </div>
569
-
570
- </td>
571
- </tr>
572
- <tr>
573
- <td class="with-icons is-vcentered"
574
- id="base-typographyCardSelectSubtitleM"
575
- title="theme: base; category: typography; group: cardSelect; name: subtitle; variant: m; ">
576
- typographyCardSelectSubtitleM
577
- <a href="#base-typographyCardSelectSubtitleM"
578
- title="permalink"
579
- class="permalink">
580
- 🔗
581
- </a>
582
- </td>
583
- <td class="is-vcentered">
584
- <pre>500 14px/150% Sage UI</pre>
585
- </td>
586
- <td class="is-vcentered">
587
- <div class="table__typography-preview">
588
- n/a
589
- </div>
590
-
591
- </td>
592
- </tr>
593
- <tr>
594
- <td class="with-icons is-vcentered"
595
- id="base-typographyCardSelectParagraphM"
596
- title="theme: base; category: typography; group: cardSelect; name: paragraph; variant: m; ">
597
- typographyCardSelectParagraphM
598
- <a href="#base-typographyCardSelectParagraphM"
599
- title="permalink"
600
- class="permalink">
601
- 🔗
602
- </a>
603
- </td>
604
- <td class="is-vcentered">
605
- <pre>400 14px/150% Sage UI</pre>
606
- </td>
607
- <td class="is-vcentered">
608
- <div class="table__typography-preview">
609
- n/a
610
- </div>
611
-
612
- </td>
613
- </tr>
614
- <tr>
615
- <td class="with-icons is-vcentered"
616
- id="base-typographyDatePickerCalendarDateM"
617
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: date; variant: m; ">
618
- typographyDatePickerCalendarDateM
619
- <a href="#base-typographyDatePickerCalendarDateM"
620
- title="permalink"
621
- class="permalink">
622
- 🔗
623
- </a>
624
- </td>
625
- <td class="is-vcentered">
626
- <pre>700 14px/150% Sage UI</pre>
627
- </td>
628
- <td class="is-vcentered">
629
- <div class="table__typography-preview">
630
- n/a
631
- </div>
632
-
633
- </td>
634
- </tr>
635
- <tr>
636
- <td class="with-icons is-vcentered"
637
- id="base-typographyDatePickerCalendarDayM"
638
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: day; variant: m; ">
639
- typographyDatePickerCalendarDayM
640
- <a href="#base-typographyDatePickerCalendarDayM"
641
- title="permalink"
642
- class="permalink">
643
- 🔗
644
- </a>
645
- </td>
646
- <td class="is-vcentered">
647
- <pre>700 14px/150% Sage UI</pre>
648
- </td>
649
- <td class="is-vcentered">
650
- <div class="table__typography-preview">
651
- n/a
652
- </div>
653
-
654
- </td>
655
- </tr>
656
- <tr>
657
- <td class="with-icons is-vcentered"
658
- id="base-typographyDatePickerCalendarMonthM"
659
- title="theme: base; category: typography; group: datePicker; name: calendar; subgroup: month; variant: m; ">
660
- typographyDatePickerCalendarMonthM
661
- <a href="#base-typographyDatePickerCalendarMonthM"
662
- title="permalink"
663
- class="permalink">
664
- 🔗
665
- </a>
666
- </td>
667
- <td class="is-vcentered">
668
- <pre>700 16px/125% Sage UI</pre>
669
- </td>
670
- <td class="is-vcentered">
671
- <div class="table__typography-preview">
672
- n/a
673
- </div>
674
-
675
- </td>
676
- </tr>
677
- <tr>
678
- <td class="with-icons is-vcentered"
679
- id="base-typographyDialogTitleM"
680
- title="theme: base; category: typography; group: dialog; name: title; variant: m; ">
681
- typographyDialogTitleM
682
- <a href="#base-typographyDialogTitleM"
683
- title="permalink"
684
- class="permalink">
685
- 🔗
686
- </a>
687
- </td>
688
- <td class="is-vcentered">
689
- <pre>700 24px/125% Sage UI</pre>
690
- </td>
691
- <td class="is-vcentered">
692
- <div class="table__typography-preview">
693
- n/a
694
- </div>
695
-
696
- </td>
697
- </tr>
698
- <tr>
699
- <td class="with-icons is-vcentered"
700
- id="base-typographyDialogParagraphM"
701
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: m; ">
702
- typographyDialogParagraphM
703
- <a href="#base-typographyDialogParagraphM"
704
- title="permalink"
705
- class="permalink">
706
- 🔗
707
- </a>
708
- </td>
709
- <td class="is-vcentered">
710
- <pre>400 14px/150% Sage UI</pre>
711
- </td>
712
- <td class="is-vcentered">
713
- <div class="table__typography-preview">
714
- n/a
715
- </div>
716
-
717
- </td>
718
- </tr>
719
- <tr>
720
- <td class="with-icons is-vcentered"
721
- id="base-typographyDrawerTitleM"
722
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
723
- typographyDrawerTitleM
724
- <a href="#base-typographyDrawerTitleM"
725
- title="permalink"
726
- class="permalink">
727
- 🔗
728
- </a>
729
- </td>
730
- <td class="is-vcentered">
731
- <pre>700 22px/125% Sage UI</pre>
732
- </td>
733
- <td class="is-vcentered">
734
- <div class="table__typography-preview">
735
- n/a
736
- </div>
737
-
738
- </td>
739
- </tr>
740
- <tr>
741
- <td class="with-icons is-vcentered"
742
- id="base-typographyDrawerParagraphM"
743
- title="theme: base; category: typography; group: drawer; name: paragraph; variant: m; ">
744
- typographyDrawerParagraphM
745
- <a href="#base-typographyDrawerParagraphM"
746
- title="permalink"
747
- class="permalink">
748
- 🔗
749
- </a>
750
- </td>
751
- <td class="is-vcentered">
752
- <pre>0 none</pre>
753
- </td>
754
- <td class="is-vcentered">
755
- <div class="table__typography-preview">
756
- n/a
757
- </div>
758
-
759
- </td>
760
- </tr>
761
- <tr>
762
- <td class="with-icons is-vcentered"
763
- id="base-typographyFlashTextM"
764
- title="theme: base; category: typography; group: flash; name: text; variant: m; ">
765
- typographyFlashTextM
766
- <a href="#base-typographyFlashTextM"
767
- title="permalink"
768
- class="permalink">
769
- 🔗
770
- </a>
771
- </td>
772
- <td class="is-vcentered">
773
- <pre>400 14px/150% Sage UI</pre>
774
- </td>
775
- <td class="is-vcentered">
776
- <div class="table__typography-preview">
777
- n/a
778
- </div>
779
-
780
- </td>
781
- </tr>
782
- <tr>
783
- <td class="with-icons is-vcentered"
784
- id="base-typographyFlashTextL"
785
- title="theme: base; category: typography; group: flash; name: text; variant: l; ">
786
- typographyFlashTextL
787
- <a href="#base-typographyFlashTextL"
788
- title="permalink"
789
- class="permalink">
790
- 🔗
791
- </a>
792
- </td>
793
- <td class="is-vcentered">
794
- <pre>400 16px/150% Sage UI</pre>
795
- </td>
796
- <td class="is-vcentered">
797
- <div class="table__typography-preview">
798
- n/a
799
- </div>
800
-
801
- </td>
802
- </tr>
803
- <tr>
804
- <td class="with-icons is-vcentered"
805
- id="base-typographyFormFieldLabelXs"
806
- title="theme: base; category: typography; group: formField; name: label; variant: xs; ">
807
- typographyFormFieldLabelXs
808
- <a href="#base-typographyFormFieldLabelXs"
809
- title="permalink"
810
- class="permalink">
811
- 🔗
812
- </a>
813
- </td>
814
- <td class="is-vcentered">
815
- <pre>500 14px/150% Sage UI</pre>
816
- </td>
817
- <td class="is-vcentered">
818
- <div class="table__typography-preview">
819
- n/a
820
- </div>
821
-
822
- </td>
823
- </tr>
824
- <tr>
825
- <td class="with-icons is-vcentered"
826
- id="base-typographyFormFieldLabelS"
827
- title="theme: base; category: typography; group: formField; name: label; variant: s; ">
828
- typographyFormFieldLabelS
829
- <a href="#base-typographyFormFieldLabelS"
830
- title="permalink"
831
- class="permalink">
832
- 🔗
833
- </a>
834
- </td>
835
- <td class="is-vcentered">
836
- <pre>500 14px/150% Sage UI</pre>
837
- </td>
838
- <td class="is-vcentered">
839
- <div class="table__typography-preview">
840
- n/a
841
- </div>
842
-
843
- </td>
844
- </tr>
845
- <tr>
846
- <td class="with-icons is-vcentered"
847
- id="base-typographyFormFieldLabelM"
848
- title="theme: base; category: typography; group: formField; name: label; variant: m; ">
849
- typographyFormFieldLabelM
850
- <a href="#base-typographyFormFieldLabelM"
851
- title="permalink"
852
- class="permalink">
853
- 🔗
854
- </a>
855
- </td>
856
- <td class="is-vcentered">
857
- <pre>500 14px/150% Sage UI</pre>
858
- </td>
859
- <td class="is-vcentered">
860
- <div class="table__typography-preview">
861
- n/a
862
- </div>
863
-
864
- </td>
865
- </tr>
866
- <tr>
867
- <td class="with-icons is-vcentered"
868
- id="base-typographyFormFieldLabelL"
869
- title="theme: base; category: typography; group: formField; name: label; variant: l; ">
870
- typographyFormFieldLabelL
871
- <a href="#base-typographyFormFieldLabelL"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>500 16px/150% Sage UI</pre>
879
- </td>
880
- <td class="is-vcentered">
881
- <div class="table__typography-preview">
882
- n/a
883
- </div>
884
-
885
- </td>
886
- </tr>
887
- <tr>
888
- <td class="with-icons is-vcentered"
889
- id="base-typographyFormFieldHintTextXs"
890
- title="theme: base; category: typography; group: formField; name: hintText; variant: xs; ">
891
- typographyFormFieldHintTextXs
892
- <a href="#base-typographyFormFieldHintTextXs"
893
- title="permalink"
894
- class="permalink">
895
- 🔗
896
- </a>
897
- </td>
898
- <td class="is-vcentered">
899
- <pre>400 14px/150% Sage UI</pre>
900
- </td>
901
- <td class="is-vcentered">
902
- <div class="table__typography-preview">
903
- n/a
904
- </div>
905
-
906
- </td>
907
- </tr>
908
- <tr>
909
- <td class="with-icons is-vcentered"
910
- id="base-typographyFormFieldHintTextS"
911
- title="theme: base; category: typography; group: formField; name: hintText; variant: s; ">
912
- typographyFormFieldHintTextS
913
- <a href="#base-typographyFormFieldHintTextS"
914
- title="permalink"
915
- class="permalink">
916
- 🔗
917
- </a>
918
- </td>
919
- <td class="is-vcentered">
920
- <pre>400 14px/150% Sage UI</pre>
921
- </td>
922
- <td class="is-vcentered">
923
- <div class="table__typography-preview">
924
- n/a
925
- </div>
926
-
927
- </td>
928
- </tr>
929
- <tr>
930
- <td class="with-icons is-vcentered"
931
- id="base-typographyFormFieldHintTextM"
932
- title="theme: base; category: typography; group: formField; name: hintText; variant: m; ">
933
- typographyFormFieldHintTextM
934
- <a href="#base-typographyFormFieldHintTextM"
935
- title="permalink"
936
- class="permalink">
937
- 🔗
938
- </a>
939
- </td>
940
- <td class="is-vcentered">
941
- <pre>400 14px/150% Sage UI</pre>
942
- </td>
943
- <td class="is-vcentered">
944
- <div class="table__typography-preview">
945
- n/a
946
- </div>
947
-
948
- </td>
949
- </tr>
950
- <tr>
951
- <td class="with-icons is-vcentered"
952
- id="base-typographyFormFieldHintTextL"
953
- title="theme: base; category: typography; group: formField; name: hintText; variant: l; ">
954
- typographyFormFieldHintTextL
955
- <a href="#base-typographyFormFieldHintTextL"
956
- title="permalink"
957
- class="permalink">
958
- 🔗
959
- </a>
960
- </td>
961
- <td class="is-vcentered">
962
- <pre>400 16px/150% Sage UI</pre>
963
- </td>
964
- <td class="is-vcentered">
965
- <div class="table__typography-preview">
966
- n/a
967
- </div>
968
-
969
- </td>
970
- </tr>
971
- <tr>
972
- <td class="with-icons is-vcentered"
973
- id="base-typographyFormFieldErrorMessageXs"
974
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: xs; ">
975
- typographyFormFieldErrorMessageXs
976
- <a href="#base-typographyFormFieldErrorMessageXs"
977
- title="permalink"
978
- class="permalink">
979
- 🔗
980
- </a>
981
- </td>
982
- <td class="is-vcentered">
983
- <pre>500 14px/150% Sage UI</pre>
984
- </td>
985
- <td class="is-vcentered">
986
- <div class="table__typography-preview">
987
- n/a
988
- </div>
989
-
990
- </td>
991
- </tr>
992
- <tr>
993
- <td class="with-icons is-vcentered"
994
- id="base-typographyFormFieldErrorMessageS"
995
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: s; ">
996
- typographyFormFieldErrorMessageS
997
- <a href="#base-typographyFormFieldErrorMessageS"
998
- title="permalink"
999
- class="permalink">
1000
- 🔗
1001
- </a>
1002
- </td>
1003
- <td class="is-vcentered">
1004
- <pre>500 14px/150% Sage UI</pre>
1005
- </td>
1006
- <td class="is-vcentered">
1007
- <div class="table__typography-preview">
1008
- n/a
1009
- </div>
1010
-
1011
- </td>
1012
- </tr>
1013
- <tr>
1014
- <td class="with-icons is-vcentered"
1015
- id="base-typographyFormFieldErrorMessageM"
1016
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: m; ">
1017
- typographyFormFieldErrorMessageM
1018
- <a href="#base-typographyFormFieldErrorMessageM"
1019
- title="permalink"
1020
- class="permalink">
1021
- 🔗
1022
- </a>
1023
- </td>
1024
- <td class="is-vcentered">
1025
- <pre>500 14px/150% Sage UI</pre>
1026
- </td>
1027
- <td class="is-vcentered">
1028
- <div class="table__typography-preview">
1029
- n/a
1030
- </div>
1031
-
1032
- </td>
1033
- </tr>
1034
- <tr>
1035
- <td class="with-icons is-vcentered"
1036
- id="base-typographyFormFieldErrorMessageL"
1037
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: l; ">
1038
- typographyFormFieldErrorMessageL
1039
- <a href="#base-typographyFormFieldErrorMessageL"
1040
- title="permalink"
1041
- class="permalink">
1042
- 🔗
1043
- </a>
1044
- </td>
1045
- <td class="is-vcentered">
1046
- <pre>500 16px/150% Sage UI</pre>
1047
- </td>
1048
- <td class="is-vcentered">
1049
- <div class="table__typography-preview">
1050
- n/a
1051
- </div>
1052
-
1053
- </td>
1054
- </tr>
1055
- <tr>
1056
- <td class="with-icons is-vcentered"
1057
- id="base-typographyFormFieldCautionMessageXs"
1058
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: xs; ">
1059
- typographyFormFieldCautionMessageXs
1060
- <a href="#base-typographyFormFieldCautionMessageXs"
1061
- title="permalink"
1062
- class="permalink">
1063
- 🔗
1064
- </a>
1065
- </td>
1066
- <td class="is-vcentered">
1067
- <pre>400 14px/150% Sage UI</pre>
1068
- </td>
1069
- <td class="is-vcentered">
1070
- <div class="table__typography-preview">
1071
- n/a
1072
- </div>
1073
-
1074
- </td>
1075
- </tr>
1076
- <tr>
1077
- <td class="with-icons is-vcentered"
1078
- id="base-typographyFormFieldCautionMessageS"
1079
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: s; ">
1080
- typographyFormFieldCautionMessageS
1081
- <a href="#base-typographyFormFieldCautionMessageS"
1082
- title="permalink"
1083
- class="permalink">
1084
- 🔗
1085
- </a>
1086
- </td>
1087
- <td class="is-vcentered">
1088
- <pre>400 14px/150% Sage UI</pre>
1089
- </td>
1090
- <td class="is-vcentered">
1091
- <div class="table__typography-preview">
1092
- n/a
1093
- </div>
1094
-
1095
- </td>
1096
- </tr>
1097
- <tr>
1098
- <td class="with-icons is-vcentered"
1099
- id="base-typographyFormFieldCautionMessageM"
1100
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: m; ">
1101
- typographyFormFieldCautionMessageM
1102
- <a href="#base-typographyFormFieldCautionMessageM"
1103
- title="permalink"
1104
- class="permalink">
1105
- 🔗
1106
- </a>
1107
- </td>
1108
- <td class="is-vcentered">
1109
- <pre>400 14px/150% Sage UI</pre>
1110
- </td>
1111
- <td class="is-vcentered">
1112
- <div class="table__typography-preview">
1113
- n/a
1114
- </div>
1115
-
1116
- </td>
1117
- </tr>
1118
- <tr>
1119
- <td class="with-icons is-vcentered"
1120
- id="base-typographyFormFieldCautionMessageL"
1121
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: l; ">
1122
- typographyFormFieldCautionMessageL
1123
- <a href="#base-typographyFormFieldCautionMessageL"
1124
- title="permalink"
1125
- class="permalink">
1126
- 🔗
1127
- </a>
1128
- </td>
1129
- <td class="is-vcentered">
1130
- <pre>400 16px/150% Sage UI</pre>
1131
- </td>
1132
- <td class="is-vcentered">
1133
- <div class="table__typography-preview">
1134
- n/a
1135
- </div>
1136
-
1137
- </td>
1138
- </tr>
1139
- <tr>
1140
- <td class="with-icons is-vcentered"
1141
- id="base-typographyFormFieldInputTextXs"
1142
- title="theme: base; category: typography; group: formField; name: inputText; variant: xs; ">
1143
- typographyFormFieldInputTextXs
1144
- <a href="#base-typographyFormFieldInputTextXs"
1145
- title="permalink"
1146
- class="permalink">
1147
- 🔗
1148
- </a>
1149
- </td>
1150
- <td class="is-vcentered">
1151
- <pre>400 14px/150% Sage UI</pre>
1152
- </td>
1153
- <td class="is-vcentered">
1154
- <div class="table__typography-preview">
1155
- n/a
1156
- </div>
1157
-
1158
- </td>
1159
- </tr>
1160
- <tr>
1161
- <td class="with-icons is-vcentered"
1162
- id="base-typographyFormFieldInputTextS"
1163
- title="theme: base; category: typography; group: formField; name: inputText; variant: s; ">
1164
- typographyFormFieldInputTextS
1165
- <a href="#base-typographyFormFieldInputTextS"
1166
- title="permalink"
1167
- class="permalink">
1168
- 🔗
1169
- </a>
1170
- </td>
1171
- <td class="is-vcentered">
1172
- <pre>400 14px/150% Sage UI</pre>
1173
- </td>
1174
- <td class="is-vcentered">
1175
- <div class="table__typography-preview">
1176
- n/a
1177
- </div>
1178
-
1179
- </td>
1180
- </tr>
1181
- <tr>
1182
- <td class="with-icons is-vcentered"
1183
- id="base-typographyFormFieldInputTextM"
1184
- title="theme: base; category: typography; group: formField; name: inputText; variant: m; ">
1185
- typographyFormFieldInputTextM
1186
- <a href="#base-typographyFormFieldInputTextM"
1187
- title="permalink"
1188
- class="permalink">
1189
- 🔗
1190
- </a>
1191
- </td>
1192
- <td class="is-vcentered">
1193
- <pre>400 14px/150% Sage UI</pre>
1194
- </td>
1195
- <td class="is-vcentered">
1196
- <div class="table__typography-preview">
1197
- n/a
1198
- </div>
1199
-
1200
- </td>
1201
- </tr>
1202
- <tr>
1203
- <td class="with-icons is-vcentered"
1204
- id="base-typographyFormFieldInputTextL"
1205
- title="theme: base; category: typography; group: formField; name: inputText; variant: l; ">
1206
- typographyFormFieldInputTextL
1207
- <a href="#base-typographyFormFieldInputTextL"
1208
- title="permalink"
1209
- class="permalink">
1210
- 🔗
1211
- </a>
1212
- </td>
1213
- <td class="is-vcentered">
1214
- <pre>400 16px/150% Sage UI</pre>
1215
- </td>
1216
- <td class="is-vcentered">
1217
- <div class="table__typography-preview">
1218
- n/a
1219
- </div>
1220
-
1221
- </td>
1222
- </tr>
1223
- <tr>
1224
- <td class="with-icons is-vcentered"
1225
- id="base-typographyFormFieldDropdownOptionsXs"
1226
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: xs; ">
1227
- typographyFormFieldDropdownOptionsXs
1228
- <a href="#base-typographyFormFieldDropdownOptionsXs"
1229
- title="permalink"
1230
- class="permalink">
1231
- 🔗
1232
- </a>
1233
- </td>
1234
- <td class="is-vcentered">
1235
- <pre>400 14px/150% Sage UI</pre>
1236
- </td>
1237
- <td class="is-vcentered">
1238
- <div class="table__typography-preview">
1239
- n/a
1240
- </div>
1241
-
1242
- </td>
1243
- </tr>
1244
- <tr>
1245
- <td class="with-icons is-vcentered"
1246
- id="base-typographyFormFieldDropdownOptionsS"
1247
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: s; ">
1248
- typographyFormFieldDropdownOptionsS
1249
- <a href="#base-typographyFormFieldDropdownOptionsS"
1250
- title="permalink"
1251
- class="permalink">
1252
- 🔗
1253
- </a>
1254
- </td>
1255
- <td class="is-vcentered">
1256
- <pre>400 14px/150% Sage UI</pre>
1257
- </td>
1258
- <td class="is-vcentered">
1259
- <div class="table__typography-preview">
1260
- n/a
1261
- </div>
1262
-
1263
- </td>
1264
- </tr>
1265
- <tr>
1266
- <td class="with-icons is-vcentered"
1267
- id="base-typographyFormFieldDropdownOptionsM"
1268
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: m; ">
1269
- typographyFormFieldDropdownOptionsM
1270
- <a href="#base-typographyFormFieldDropdownOptionsM"
1271
- title="permalink"
1272
- class="permalink">
1273
- 🔗
1274
- </a>
1275
- </td>
1276
- <td class="is-vcentered">
1277
- <pre>400 14px/150% Sage UI</pre>
1278
- </td>
1279
- <td class="is-vcentered">
1280
- <div class="table__typography-preview">
1281
- n/a
1282
- </div>
1283
-
1284
- </td>
1285
- </tr>
1286
- <tr>
1287
- <td class="with-icons is-vcentered"
1288
- id="base-typographyFormFieldDropdownOptionsL"
1289
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: l; ">
1290
- typographyFormFieldDropdownOptionsL
1291
- <a href="#base-typographyFormFieldDropdownOptionsL"
1292
- title="permalink"
1293
- class="permalink">
1294
- 🔗
1295
- </a>
1296
- </td>
1297
- <td class="is-vcentered">
1298
- <pre>400 16px/150% Sage UI</pre>
1299
- </td>
1300
- <td class="is-vcentered">
1301
- <div class="table__typography-preview">
1302
- n/a
1303
- </div>
1304
-
1305
- </td>
1306
- </tr>
1307
- <tr>
1308
- <td class="with-icons is-vcentered"
1309
- id="base-typographyFormFieldSecondLabelXs"
1310
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: xs; ">
1311
- typographyFormFieldSecondLabelXs
1312
- <a href="#base-typographyFormFieldSecondLabelXs"
1313
- title="permalink"
1314
- class="permalink">
1315
- 🔗
1316
- </a>
1317
- </td>
1318
- <td class="is-vcentered">
1319
- <pre>500 14px/150% Sage UI</pre>
1320
- </td>
1321
- <td class="is-vcentered">
1322
- <div class="table__typography-preview">
1323
- n/a
1324
- </div>
1325
-
1326
- </td>
1327
- </tr>
1328
- <tr>
1329
- <td class="with-icons is-vcentered"
1330
- id="base-typographyFormFieldSecondLabelS"
1331
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: s; ">
1332
- typographyFormFieldSecondLabelS
1333
- <a href="#base-typographyFormFieldSecondLabelS"
1334
- title="permalink"
1335
- class="permalink">
1336
- 🔗
1337
- </a>
1338
- </td>
1339
- <td class="is-vcentered">
1340
- <pre>500 14px/150% Sage UI</pre>
1341
- </td>
1342
- <td class="is-vcentered">
1343
- <div class="table__typography-preview">
1344
- n/a
1345
- </div>
1346
-
1347
- </td>
1348
- </tr>
1349
- <tr>
1350
- <td class="with-icons is-vcentered"
1351
- id="base-typographyFormFieldSecondLabelM"
1352
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: m; ">
1353
- typographyFormFieldSecondLabelM
1354
- <a href="#base-typographyFormFieldSecondLabelM"
1355
- title="permalink"
1356
- class="permalink">
1357
- 🔗
1358
- </a>
1359
- </td>
1360
- <td class="is-vcentered">
1361
- <pre>500 14px/150% Sage UI</pre>
1362
- </td>
1363
- <td class="is-vcentered">
1364
- <div class="table__typography-preview">
1365
- n/a
1366
- </div>
1367
-
1368
- </td>
1369
- </tr>
1370
- <tr>
1371
- <td class="with-icons is-vcentered"
1372
- id="base-typographyFormFieldSecondLabelL"
1373
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: l; ">
1374
- typographyFormFieldSecondLabelL
1375
- <a href="#base-typographyFormFieldSecondLabelL"
1376
- title="permalink"
1377
- class="permalink">
1378
- 🔗
1379
- </a>
1380
- </td>
1381
- <td class="is-vcentered">
1382
- <pre>500 16px/150% Sage UI</pre>
1383
- </td>
1384
- <td class="is-vcentered">
1385
- <div class="table__typography-preview">
1386
- n/a
1387
- </div>
1388
-
1389
- </td>
1390
- </tr>
1391
- <tr>
1392
- <td class="with-icons is-vcentered"
1393
- id="base-typographyFormFieldCharacterCountXs"
1394
- title="theme: base; category: typography; group: formField; name: characterCount; variant: xs; ">
1395
- typographyFormFieldCharacterCountXs
1396
- <a href="#base-typographyFormFieldCharacterCountXs"
1397
- title="permalink"
1398
- class="permalink">
1399
- 🔗
1400
- </a>
1401
- </td>
1402
- <td class="is-vcentered">
1403
- <pre>400 14px/150% Sage UI</pre>
1404
- </td>
1405
- <td class="is-vcentered">
1406
- <div class="table__typography-preview">
1407
- n/a
1408
- </div>
1409
-
1410
- </td>
1411
- </tr>
1412
- <tr>
1413
- <td class="with-icons is-vcentered"
1414
- id="base-typographyFormFieldCharacterCountS"
1415
- title="theme: base; category: typography; group: formField; name: characterCount; variant: s; ">
1416
- typographyFormFieldCharacterCountS
1417
- <a href="#base-typographyFormFieldCharacterCountS"
1418
- title="permalink"
1419
- class="permalink">
1420
- 🔗
1421
- </a>
1422
- </td>
1423
- <td class="is-vcentered">
1424
- <pre>400 14px/150% Sage UI</pre>
1425
- </td>
1426
- <td class="is-vcentered">
1427
- <div class="table__typography-preview">
1428
- n/a
1429
- </div>
1430
-
1431
- </td>
1432
- </tr>
1433
- <tr>
1434
- <td class="with-icons is-vcentered"
1435
- id="base-typographyFormFieldCharacterCountM"
1436
- title="theme: base; category: typography; group: formField; name: characterCount; variant: m; ">
1437
- typographyFormFieldCharacterCountM
1438
- <a href="#base-typographyFormFieldCharacterCountM"
1439
- title="permalink"
1440
- class="permalink">
1441
- 🔗
1442
- </a>
1443
- </td>
1444
- <td class="is-vcentered">
1445
- <pre>400 14px/150% Sage UI</pre>
1446
- </td>
1447
- <td class="is-vcentered">
1448
- <div class="table__typography-preview">
1449
- n/a
1450
- </div>
1451
-
1452
- </td>
1453
- </tr>
1454
- <tr>
1455
- <td class="with-icons is-vcentered"
1456
- id="base-typographyFormFieldCharacterCountL"
1457
- title="theme: base; category: typography; group: formField; name: characterCount; variant: l; ">
1458
- typographyFormFieldCharacterCountL
1459
- <a href="#base-typographyFormFieldCharacterCountL"
1460
- title="permalink"
1461
- class="permalink">
1462
- 🔗
1463
- </a>
1464
- </td>
1465
- <td class="is-vcentered">
1466
- <pre>400 16px/150% Sage UI</pre>
1467
- </td>
1468
- <td class="is-vcentered">
1469
- <div class="table__typography-preview">
1470
- n/a
1471
- </div>
1472
-
1473
- </td>
1474
- </tr>
1475
- <tr>
1476
- <td class="with-icons is-vcentered"
1477
- id="base-typographyLinkTextS"
1478
- title="theme: base; category: typography; group: link; name: text; variant: s; ">
1479
- typographyLinkTextS
1480
- <a href="#base-typographyLinkTextS"
1481
- title="permalink"
1482
- class="permalink">
1483
- 🔗
1484
- </a>
1485
- </td>
1486
- <td class="is-vcentered">
1487
- <pre>400 12px/150% Sage UI</pre>
1488
- </td>
1489
- <td class="is-vcentered">
1490
- <div class="table__typography-preview">
1491
- n/a
1492
- </div>
1493
-
1494
- </td>
1495
- </tr>
1496
- <tr>
1497
- <td class="with-icons is-vcentered"
1498
- id="base-typographyLinkTextM"
1499
- title="theme: base; category: typography; group: link; name: text; variant: m; ">
1500
- typographyLinkTextM
1501
- <a href="#base-typographyLinkTextM"
1502
- title="permalink"
1503
- class="permalink">
1504
- 🔗
1505
- </a>
1506
- </td>
1507
- <td class="is-vcentered">
1508
- <pre>400 14px/150% Sage UI</pre>
1509
- </td>
1510
- <td class="is-vcentered">
1511
- <div class="table__typography-preview">
1512
- n/a
1513
- </div>
1514
-
1515
- </td>
1516
- </tr>
1517
- <tr>
1518
- <td class="with-icons is-vcentered"
1519
- id="base-typographyLinkTextL"
1520
- title="theme: base; category: typography; group: link; name: text; variant: l; ">
1521
- typographyLinkTextL
1522
- <a href="#base-typographyLinkTextL"
1523
- title="permalink"
1524
- class="permalink">
1525
- 🔗
1526
- </a>
1527
- </td>
1528
- <td class="is-vcentered">
1529
- <pre>400 16px/150% Sage UI</pre>
1530
- </td>
1531
- <td class="is-vcentered">
1532
- <div class="table__typography-preview">
1533
- n/a
1534
- </div>
1535
-
1536
- </td>
1537
- </tr>
1538
- <tr>
1539
- <td class="with-icons is-vcentered"
1540
- id="base-typographyMenuLabelM"
1541
- title="theme: base; category: typography; group: menu; name: label; variant: m; ">
1542
- typographyMenuLabelM
1543
- <a href="#base-typographyMenuLabelM"
1544
- title="permalink"
1545
- class="permalink">
1546
- 🔗
1547
- </a>
1548
- </td>
1549
- <td class="is-vcentered">
1550
- <pre>500 14px/150% Sage UI</pre>
1551
- </td>
1552
- <td class="is-vcentered">
1553
- <div class="table__typography-preview">
1554
- n/a
1555
- </div>
1556
-
1557
- </td>
1558
- </tr>
1559
- <tr>
1560
- <td class="with-icons is-vcentered"
1561
- id="base-typographyMenuSegmentTitleM"
1562
- title="theme: base; category: typography; group: menu; name: segmentTitle; variant: m; ">
1563
- typographyMenuSegmentTitleM
1564
- <a href="#base-typographyMenuSegmentTitleM"
1565
- title="permalink"
1566
- class="permalink">
1567
- 🔗
1568
- </a>
1569
- </td>
1570
- <td class="is-vcentered">
1571
- <pre>500 12px/150% Sage UI</pre>
1572
- </td>
1573
- <td class="is-vcentered">
1574
- <div class="table__typography-preview">
1575
- n/a
1576
- </div>
1577
-
1578
- </td>
1579
- </tr>
1580
- <tr>
1581
- <td class="with-icons is-vcentered"
1582
- id="base-typographyMessageHeadingM"
1583
- title="theme: base; category: typography; group: message; name: heading; variant: m; ">
1584
- typographyMessageHeadingM
1585
- <a href="#base-typographyMessageHeadingM"
1586
- title="permalink"
1587
- class="permalink">
1588
- 🔗
1589
- </a>
1590
- </td>
1591
- <td class="is-vcentered">
1592
- <pre>700 14px/150% Sage UI</pre>
1593
- </td>
1594
- <td class="is-vcentered">
1595
- <div class="table__typography-preview">
1596
- n/a
1597
- </div>
1598
-
1599
- </td>
1600
- </tr>
1601
- <tr>
1602
- <td class="with-icons is-vcentered"
1603
- id="base-typographyMessageHeadingL"
1604
- title="theme: base; category: typography; group: message; name: heading; variant: l; ">
1605
- typographyMessageHeadingL
1606
- <a href="#base-typographyMessageHeadingL"
1607
- title="permalink"
1608
- class="permalink">
1609
- 🔗
1610
- </a>
1611
- </td>
1612
- <td class="is-vcentered">
1613
- <pre>700 16px/150% Sage UI</pre>
1614
- </td>
1615
- <td class="is-vcentered">
1616
- <div class="table__typography-preview">
1617
- n/a
1618
- </div>
1619
-
1620
- </td>
1621
- </tr>
1622
- <tr>
1623
- <td class="with-icons is-vcentered"
1624
- id="base-typographyMessageTextM"
1625
- title="theme: base; category: typography; group: message; name: text; variant: m; ">
1626
- typographyMessageTextM
1627
- <a href="#base-typographyMessageTextM"
1628
- title="permalink"
1629
- class="permalink">
1630
- 🔗
1631
- </a>
1632
- </td>
1633
- <td class="is-vcentered">
1634
- <pre>400 14px/150% Sage UI</pre>
1635
- </td>
1636
- <td class="is-vcentered">
1637
- <div class="table__typography-preview">
1638
- n/a
1639
- </div>
1640
-
1641
- </td>
1642
- </tr>
1643
- <tr>
1644
- <td class="with-icons is-vcentered"
1645
- id="base-typographyMessageTextL"
1646
- title="theme: base; category: typography; group: message; name: text; variant: l; ">
1647
- typographyMessageTextL
1648
- <a href="#base-typographyMessageTextL"
1649
- title="permalink"
1650
- class="permalink">
1651
- 🔗
1652
- </a>
1653
- </td>
1654
- <td class="is-vcentered">
1655
- <pre>400 16px/150% Sage UI</pre>
1656
- </td>
1657
- <td class="is-vcentered">
1658
- <div class="table__typography-preview">
1659
- n/a
1660
- </div>
1661
-
1662
- </td>
1663
- </tr>
1664
- <tr>
1665
- <td class="with-icons is-vcentered"
1666
- id="base-typographyPaginationLabelM"
1667
- title="theme: base; category: typography; group: pagination; name: label; variant: m; ">
1668
- typographyPaginationLabelM
1669
- <a href="#base-typographyPaginationLabelM"
1670
- title="permalink"
1671
- class="permalink">
1672
- 🔗
1673
- </a>
1674
- </td>
1675
- <td class="is-vcentered">
1676
- <pre>400 13px/150% Sage UI</pre>
1677
- </td>
1678
- <td class="is-vcentered">
1679
- <div class="table__typography-preview">
1680
- n/a
1681
- </div>
1682
-
1683
- </td>
1684
- </tr>
1685
- <tr>
1686
- <td class="with-icons is-vcentered"
1687
- id="base-typographyTileParagraphM"
1688
- title="theme: base; category: typography; group: tile; name: paragraph; variant: m; ">
1689
- typographyTileParagraphM
1690
- <a href="#base-typographyTileParagraphM"
1691
- title="permalink"
1692
- class="permalink">
1693
- 🔗
1694
- </a>
1695
- </td>
1696
- <td class="is-vcentered">
1697
- <pre>400 14px/150% Sage UI</pre>
1698
- </td>
1699
- <td class="is-vcentered">
1700
- <div class="table__typography-preview">
1701
- n/a
1702
- </div>
1703
-
1704
- </td>
1705
- </tr>
1706
- <tr>
1707
- <td class="with-icons is-vcentered"
1708
- id="base-typographyPillLabelS"
1709
- title="theme: base; category: typography; group: pill; name: label; variant: s; ">
1710
- typographyPillLabelS
1711
- <a href="#base-typographyPillLabelS"
1712
- title="permalink"
1713
- class="permalink">
1714
- 🔗
1715
- </a>
1716
- </td>
1717
- <td class="is-vcentered">
1718
- <pre>500 10px/150% Sage UI</pre>
1719
- </td>
1720
- <td class="is-vcentered">
1721
- <div class="table__typography-preview">
1722
- n/a
1723
- </div>
1724
-
1725
- </td>
1726
- </tr>
1727
- <tr>
1728
- <td class="with-icons is-vcentered"
1729
- id="base-typographyPillLabelM"
1730
- title="theme: base; category: typography; group: pill; name: label; variant: m; ">
1731
- typographyPillLabelM
1732
- <a href="#base-typographyPillLabelM"
1733
- title="permalink"
1734
- class="permalink">
1735
- 🔗
1736
- </a>
1737
- </td>
1738
- <td class="is-vcentered">
1739
- <pre>500 12px/150% Sage UI</pre>
1740
- </td>
1741
- <td class="is-vcentered">
1742
- <div class="table__typography-preview">
1743
- n/a
1744
- </div>
1745
-
1746
- </td>
1747
- </tr>
1748
- <tr>
1749
- <td class="with-icons is-vcentered"
1750
- id="base-typographyPillLabelL"
1751
- title="theme: base; category: typography; group: pill; name: label; variant: l; ">
1752
- typographyPillLabelL
1753
- <a href="#base-typographyPillLabelL"
1754
- title="permalink"
1755
- class="permalink">
1756
- 🔗
1757
- </a>
1758
- </td>
1759
- <td class="is-vcentered">
1760
- <pre>500 14px/150% Sage UI</pre>
1761
- </td>
1762
- <td class="is-vcentered">
1763
- <div class="table__typography-preview">
1764
- n/a
1765
- </div>
1766
-
1767
- </td>
1768
- </tr>
1769
- <tr>
1770
- <td class="with-icons is-vcentered"
1771
- id="base-typographyPillLabelXl"
1772
- title="theme: base; category: typography; group: pill; name: label; variant: xl; ">
1773
- typographyPillLabelXl
1774
- <a href="#base-typographyPillLabelXl"
1775
- title="permalink"
1776
- class="permalink">
1777
- 🔗
1778
- </a>
1779
- </td>
1780
- <td class="is-vcentered">
1781
- <pre>500 16px/150% Sage UI</pre>
1782
- </td>
1783
- <td class="is-vcentered">
1784
- <div class="table__typography-preview">
1785
- n/a
1786
- </div>
1787
-
1788
- </td>
1789
- </tr>
1790
- <tr>
1791
- <td class="with-icons is-vcentered"
1792
- id="base-typographyProfileEmailXs"
1793
- title="theme: base; category: typography; group: profile; name: email; variant: xs; ">
1794
- typographyProfileEmailXs
1795
- <a href="#base-typographyProfileEmailXs"
1796
- title="permalink"
1797
- class="permalink">
1798
- 🔗
1799
- </a>
1800
- </td>
1801
- <td class="is-vcentered">
1802
- <pre>400 12px/100% Sage UI</pre>
1803
- </td>
1804
- <td class="is-vcentered">
1805
- <div class="table__typography-preview">
1806
- n/a
1807
- </div>
1808
-
1809
- </td>
1810
- </tr>
1811
- <tr>
1812
- <td class="with-icons is-vcentered"
1813
- id="base-typographyProfileEmailS"
1814
- title="theme: base; category: typography; group: profile; name: email; variant: s; ">
1815
- typographyProfileEmailS
1816
- <a href="#base-typographyProfileEmailS"
1817
- title="permalink"
1818
- class="permalink">
1819
- 🔗
1820
- </a>
1821
- </td>
1822
- <td class="is-vcentered">
1823
- <pre>400 14px/100% Sage UI</pre>
1824
- </td>
1825
- <td class="is-vcentered">
1826
- <div class="table__typography-preview">
1827
- n/a
1828
- </div>
1829
-
1830
- </td>
1831
- </tr>
1832
- <tr>
1833
- <td class="with-icons is-vcentered"
1834
- id="base-typographyProfileEmailM"
1835
- title="theme: base; category: typography; group: profile; name: email; variant: m; ">
1836
- typographyProfileEmailM
1837
- <a href="#base-typographyProfileEmailM"
1838
- title="permalink"
1839
- class="permalink">
1840
- 🔗
1841
- </a>
1842
- </td>
1843
- <td class="is-vcentered">
1844
- <pre>400 14px/125% Sage UI</pre>
1845
- </td>
1846
- <td class="is-vcentered">
1847
- <div class="table__typography-preview">
1848
- n/a
1849
- </div>
1850
-
1851
- </td>
1852
- </tr>
1853
- <tr>
1854
- <td class="with-icons is-vcentered"
1855
- id="base-typographyProfileEmailMl"
1856
- title="theme: base; category: typography; group: profile; name: email; variant: ml; ">
1857
- typographyProfileEmailMl
1858
- <a href="#base-typographyProfileEmailMl"
1859
- title="permalink"
1860
- class="permalink">
1861
- 🔗
1862
- </a>
1863
- </td>
1864
- <td class="is-vcentered">
1865
- <pre>400 14px/125% Sage UI</pre>
1866
- </td>
1867
- <td class="is-vcentered">
1868
- <div class="table__typography-preview">
1869
- n/a
1870
- </div>
1871
-
1872
- </td>
1873
- </tr>
1874
- <tr>
1875
- <td class="with-icons is-vcentered"
1876
- id="base-typographyProfileEmailL"
1877
- title="theme: base; category: typography; group: profile; name: email; variant: l; ">
1878
- typographyProfileEmailL
1879
- <a href="#base-typographyProfileEmailL"
1880
- title="permalink"
1881
- class="permalink">
1882
- 🔗
1883
- </a>
1884
- </td>
1885
- <td class="is-vcentered">
1886
- <pre>400 14px/125% Sage UI</pre>
1887
- </td>
1888
- <td class="is-vcentered">
1889
- <div class="table__typography-preview">
1890
- n/a
1891
- </div>
1892
-
1893
- </td>
1894
- </tr>
1895
- <tr>
1896
- <td class="with-icons is-vcentered"
1897
- id="base-typographyProfileEmailXl"
1898
- title="theme: base; category: typography; group: profile; name: email; variant: xl; ">
1899
- typographyProfileEmailXl
1900
- <a href="#base-typographyProfileEmailXl"
1901
- title="permalink"
1902
- class="permalink">
1903
- 🔗
1904
- </a>
1905
- </td>
1906
- <td class="is-vcentered">
1907
- <pre>400 18px/125% Sage UI</pre>
1908
- </td>
1909
- <td class="is-vcentered">
1910
- <div class="table__typography-preview">
1911
- n/a
1912
- </div>
1913
-
1914
- </td>
1915
- </tr>
1916
- <tr>
1917
- <td class="with-icons is-vcentered"
1918
- id="base-typographyProfileEmailXxl"
1919
- title="theme: base; category: typography; group: profile; name: email; variant: xxl; ">
1920
- typographyProfileEmailXxl
1921
- <a href="#base-typographyProfileEmailXxl"
1922
- title="permalink"
1923
- class="permalink">
1924
- 🔗
1925
- </a>
1926
- </td>
1927
- <td class="is-vcentered">
1928
- <pre>400 24px/125% Sage UI</pre>
1929
- </td>
1930
- <td class="is-vcentered">
1931
- <div class="table__typography-preview">
1932
- n/a
1933
- </div>
1934
-
1935
- </td>
1936
- </tr>
1937
- <tr>
1938
- <td class="with-icons is-vcentered"
1939
- id="base-typographyProfileInitialsXs"
1940
- title="theme: base; category: typography; group: profile; name: initials; variant: xs; ">
1941
- typographyProfileInitialsXs
1942
- <a href="#base-typographyProfileInitialsXs"
1943
- title="permalink"
1944
- class="permalink">
1945
- 🔗
1946
- </a>
1947
- </td>
1948
- <td class="is-vcentered">
1949
- <pre>500 10px/150% Sage UI</pre>
1950
- </td>
1951
- <td class="is-vcentered">
1952
- <div class="table__typography-preview">
1953
- n/a
1954
- </div>
1955
-
1956
- </td>
1957
- </tr>
1958
- <tr>
1959
- <td class="with-icons is-vcentered"
1960
- id="base-typographyProfileInitialsS"
1961
- title="theme: base; category: typography; group: profile; name: initials; variant: s; ">
1962
- typographyProfileInitialsS
1963
- <a href="#base-typographyProfileInitialsS"
1964
- title="permalink"
1965
- class="permalink">
1966
- 🔗
1967
- </a>
1968
- </td>
1969
- <td class="is-vcentered">
1970
- <pre>500 14px/150% Sage UI</pre>
1971
- </td>
1972
- <td class="is-vcentered">
1973
- <div class="table__typography-preview">
1974
- n/a
1975
- </div>
1976
-
1977
- </td>
1978
- </tr>
1979
- <tr>
1980
- <td class="with-icons is-vcentered"
1981
- id="base-typographyProfileInitialsM"
1982
- title="theme: base; category: typography; group: profile; name: initials; variant: m; ">
1983
- typographyProfileInitialsM
1984
- <a href="#base-typographyProfileInitialsM"
1985
- title="permalink"
1986
- class="permalink">
1987
- 🔗
1988
- </a>
1989
- </td>
1990
- <td class="is-vcentered">
1991
- <pre>500 18px/150% Sage UI</pre>
1992
- </td>
1993
- <td class="is-vcentered">
1994
- <div class="table__typography-preview">
1995
- n/a
1996
- </div>
1997
-
1998
- </td>
1999
- </tr>
2000
- <tr>
2001
- <td class="with-icons is-vcentered"
2002
- id="base-typographyProfileInitialsMl"
2003
- title="theme: base; category: typography; group: profile; name: initials; variant: ml; ">
2004
- typographyProfileInitialsMl
2005
- <a href="#base-typographyProfileInitialsMl"
2006
- title="permalink"
2007
- class="permalink">
2008
- 🔗
2009
- </a>
2010
- </td>
2011
- <td class="is-vcentered">
2012
- <pre>500 24px/150% Sage UI</pre>
2013
- </td>
2014
- <td class="is-vcentered">
2015
- <div class="table__typography-preview">
2016
- n/a
2017
- </div>
2018
-
2019
- </td>
2020
- </tr>
2021
- <tr>
2022
- <td class="with-icons is-vcentered"
2023
- id="base-typographyProfileInitialsL"
2024
- title="theme: base; category: typography; group: profile; name: initials; variant: l; ">
2025
- typographyProfileInitialsL
2026
- <a href="#base-typographyProfileInitialsL"
2027
- title="permalink"
2028
- class="permalink">
2029
- 🔗
2030
- </a>
2031
- </td>
2032
- <td class="is-vcentered">
2033
- <pre>500 32px/150% Sage UI</pre>
2034
- </td>
2035
- <td class="is-vcentered">
2036
- <div class="table__typography-preview">
2037
- n/a
2038
- </div>
2039
-
2040
- </td>
2041
- </tr>
2042
- <tr>
2043
- <td class="with-icons is-vcentered"
2044
- id="base-typographyProfileInitialsXl"
2045
- title="theme: base; category: typography; group: profile; name: initials; variant: xl; ">
2046
- typographyProfileInitialsXl
2047
- <a href="#base-typographyProfileInitialsXl"
2048
- title="permalink"
2049
- class="permalink">
2050
- 🔗
2051
- </a>
2052
- </td>
2053
- <td class="is-vcentered">
2054
- <pre>500 48px/150% Sage UI</pre>
2055
- </td>
2056
- <td class="is-vcentered">
2057
- <div class="table__typography-preview">
2058
- n/a
2059
- </div>
2060
-
2061
- </td>
2062
- </tr>
2063
- <tr>
2064
- <td class="with-icons is-vcentered"
2065
- id="base-typographyProfileInitialsXxl"
2066
- title="theme: base; category: typography; group: profile; name: initials; variant: xxl; ">
2067
- typographyProfileInitialsXxl
2068
- <a href="#base-typographyProfileInitialsXxl"
2069
- title="permalink"
2070
- class="permalink">
2071
- 🔗
2072
- </a>
2073
- </td>
2074
- <td class="is-vcentered">
2075
- <pre>500 56px/150% Sage UI</pre>
2076
- </td>
2077
- <td class="is-vcentered">
2078
- <div class="table__typography-preview">
2079
- n/a
2080
- </div>
2081
-
2082
- </td>
2083
- </tr>
2084
- <tr>
2085
- <td class="with-icons is-vcentered"
2086
- id="base-typographyProfileNameXs"
2087
- title="theme: base; category: typography; group: profile; name: name; variant: xs; ">
2088
- typographyProfileNameXs
2089
- <a href="#base-typographyProfileNameXs"
2090
- title="permalink"
2091
- class="permalink">
2092
- 🔗
2093
- </a>
2094
- </td>
2095
- <td class="is-vcentered">
2096
- <pre>500 13px/100% Sage UI</pre>
2097
- </td>
2098
- <td class="is-vcentered">
2099
- <div class="table__typography-preview">
2100
- n/a
2101
- </div>
2102
-
2103
- </td>
2104
- </tr>
2105
- <tr>
2106
- <td class="with-icons is-vcentered"
2107
- id="base-typographyProfileNameS"
2108
- title="theme: base; category: typography; group: profile; name: name; variant: s; ">
2109
- typographyProfileNameS
2110
- <a href="#base-typographyProfileNameS"
2111
- title="permalink"
2112
- class="permalink">
2113
- 🔗
2114
- </a>
2115
- </td>
2116
- <td class="is-vcentered">
2117
- <pre>500 14px/100% Sage UI</pre>
2118
- </td>
2119
- <td class="is-vcentered">
2120
- <div class="table__typography-preview">
2121
- n/a
2122
- </div>
2123
-
2124
- </td>
2125
- </tr>
2126
- <tr>
2127
- <td class="with-icons is-vcentered"
2128
- id="base-typographyProfileNameM"
2129
- title="theme: base; category: typography; group: profile; name: name; variant: m; ">
2130
- typographyProfileNameM
2131
- <a href="#base-typographyProfileNameM"
2132
- title="permalink"
2133
- class="permalink">
2134
- 🔗
2135
- </a>
2136
- </td>
2137
- <td class="is-vcentered">
2138
- <pre>500 14px/125% Sage UI</pre>
2139
- </td>
2140
- <td class="is-vcentered">
2141
- <div class="table__typography-preview">
2142
- n/a
2143
- </div>
2144
-
2145
- </td>
2146
- </tr>
2147
- <tr>
2148
- <td class="with-icons is-vcentered"
2149
- id="base-typographyProfileNameMl"
2150
- title="theme: base; category: typography; group: profile; name: name; variant: ml; ">
2151
- typographyProfileNameMl
2152
- <a href="#base-typographyProfileNameMl"
2153
- title="permalink"
2154
- class="permalink">
2155
- 🔗
2156
- </a>
2157
- </td>
2158
- <td class="is-vcentered">
2159
- <pre>500 16px/125% Sage UI</pre>
2160
- </td>
2161
- <td class="is-vcentered">
2162
- <div class="table__typography-preview">
2163
- n/a
2164
- </div>
2165
-
2166
- </td>
2167
- </tr>
2168
- <tr>
2169
- <td class="with-icons is-vcentered"
2170
- id="base-typographyProfileNameL"
2171
- title="theme: base; category: typography; group: profile; name: name; variant: l; ">
2172
- typographyProfileNameL
2173
- <a href="#base-typographyProfileNameL"
2174
- title="permalink"
2175
- class="permalink">
2176
- 🔗
2177
- </a>
2178
- </td>
2179
- <td class="is-vcentered">
2180
- <pre>500 20px/125% Sage UI</pre>
2181
- </td>
2182
- <td class="is-vcentered">
2183
- <div class="table__typography-preview">
2184
- n/a
2185
- </div>
2186
-
2187
- </td>
2188
- </tr>
2189
- <tr>
2190
- <td class="with-icons is-vcentered"
2191
- id="base-typographyProfileNameXl"
2192
- title="theme: base; category: typography; group: profile; name: name; variant: xl; ">
2193
- typographyProfileNameXl
2194
- <a href="#base-typographyProfileNameXl"
2195
- title="permalink"
2196
- class="permalink">
2197
- 🔗
2198
- </a>
2199
- </td>
2200
- <td class="is-vcentered">
2201
- <pre>500 24px/125% Sage UI</pre>
2202
- </td>
2203
- <td class="is-vcentered">
2204
- <div class="table__typography-preview">
2205
- n/a
2206
- </div>
2207
-
2208
- </td>
2209
- </tr>
2210
- <tr>
2211
- <td class="with-icons is-vcentered"
2212
- id="base-typographyProfileNameXxl"
2213
- title="theme: base; category: typography; group: profile; name: name; variant: xxl; ">
2214
- typographyProfileNameXxl
2215
- <a href="#base-typographyProfileNameXxl"
2216
- title="permalink"
2217
- class="permalink">
2218
- 🔗
2219
- </a>
2220
- </td>
2221
- <td class="is-vcentered">
2222
- <pre>500 32px/125% Sage UI</pre>
2223
- </td>
2224
- <td class="is-vcentered">
2225
- <div class="table__typography-preview">
2226
- n/a
2227
- </div>
2228
-
2229
- </td>
2230
- </tr>
2231
- <tr>
2232
- <td class="with-icons is-vcentered"
2233
- id="base-typographyProgressTrackerValueLabelS"
2234
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: s; ">
2235
- typographyProgressTrackerValueLabelS
2236
- <a href="#base-typographyProgressTrackerValueLabelS"
2237
- title="permalink"
2238
- class="permalink">
2239
- 🔗
2240
- </a>
2241
- </td>
2242
- <td class="is-vcentered">
2243
- <pre>500 14px/150% Sage UI</pre>
2244
- </td>
2245
- <td class="is-vcentered">
2246
- <div class="table__typography-preview">
2247
- n/a
2248
- </div>
2249
-
2250
- </td>
2251
- </tr>
2252
- <tr>
2253
- <td class="with-icons is-vcentered"
2254
- id="base-typographyProgressTrackerValueLabelM"
2255
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: m; ">
2256
- typographyProgressTrackerValueLabelM
2257
- <a href="#base-typographyProgressTrackerValueLabelM"
2258
- title="permalink"
2259
- class="permalink">
2260
- 🔗
2261
- </a>
2262
- </td>
2263
- <td class="is-vcentered">
2264
- <pre>500 14px/150% Sage UI</pre>
2265
- </td>
2266
- <td class="is-vcentered">
2267
- <div class="table__typography-preview">
2268
- n/a
2269
- </div>
2270
-
2271
- </td>
2272
- </tr>
2273
- <tr>
2274
- <td class="with-icons is-vcentered"
2275
- id="base-typographyProgressTrackerValueLabelL"
2276
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: l; ">
2277
- typographyProgressTrackerValueLabelL
2278
- <a href="#base-typographyProgressTrackerValueLabelL"
2279
- title="permalink"
2280
- class="permalink">
2281
- 🔗
2282
- </a>
2283
- </td>
2284
- <td class="is-vcentered">
2285
- <pre>500 14px/150% Sage UI</pre>
2286
- </td>
2287
- <td class="is-vcentered">
2288
- <div class="table__typography-preview">
2289
- n/a
2290
- </div>
2291
-
2292
- </td>
2293
- </tr>
2294
- <tr>
2295
- <td class="with-icons is-vcentered"
2296
- id="base-typographySearchLabelM"
2297
- title="theme: base; category: typography; group: search; name: label; variant: m; ">
2298
- typographySearchLabelM
2299
- <a href="#base-typographySearchLabelM"
2300
- title="permalink"
2301
- class="permalink">
2302
- 🔗
2303
- </a>
2304
- </td>
2305
- <td class="is-vcentered">
2306
- <pre>400 14px/150% Sage UI</pre>
2307
- </td>
2308
- <td class="is-vcentered">
2309
- <div class="table__typography-preview">
2310
- n/a
2311
- </div>
2312
-
2313
- </td>
2314
- </tr>
2315
- <tr>
2316
- <td class="with-icons is-vcentered"
2317
- id="base-typographySidebarTitleS"
2318
- title="theme: base; category: typography; group: sidebar; name: title; variant: s; ">
2319
- typographySidebarTitleS
2320
- <a href="#base-typographySidebarTitleS"
2321
- title="permalink"
2322
- class="permalink">
2323
- 🔗
2324
- </a>
2325
- </td>
2326
- <td class="is-vcentered">
2327
- <pre>700 20px/125% Sage UI</pre>
2328
- </td>
2329
- <td class="is-vcentered">
2330
- <div class="table__typography-preview">
2331
- n/a
2332
- </div>
2333
-
2334
- </td>
2335
- </tr>
2336
- <tr>
2337
- <td class="with-icons is-vcentered"
2338
- id="base-typographySidebarTitleM"
2339
- title="theme: base; category: typography; group: sidebar; name: title; variant: m; ">
2340
- typographySidebarTitleM
2341
- <a href="#base-typographySidebarTitleM"
2342
- title="permalink"
2343
- class="permalink">
2344
- 🔗
2345
- </a>
2346
- </td>
2347
- <td class="is-vcentered">
2348
- <pre>700 20px/125% Sage UI</pre>
2349
- </td>
2350
- <td class="is-vcentered">
2351
- <div class="table__typography-preview">
2352
- n/a
2353
- </div>
2354
-
2355
- </td>
2356
- </tr>
2357
- <tr>
2358
- <td class="with-icons is-vcentered"
2359
- id="base-typographySidebarTitleL"
2360
- title="theme: base; category: typography; group: sidebar; name: title; variant: l; ">
2361
- typographySidebarTitleL
2362
- <a href="#base-typographySidebarTitleL"
2363
- title="permalink"
2364
- class="permalink">
2365
- 🔗
2366
- </a>
2367
- </td>
2368
- <td class="is-vcentered">
2369
- <pre>700 20px/125% Sage UI</pre>
2370
- </td>
2371
- <td class="is-vcentered">
2372
- <div class="table__typography-preview">
2373
- n/a
2374
- </div>
2375
-
2376
- </td>
2377
- </tr>
2378
- <tr>
2379
- <td class="with-icons is-vcentered"
2380
- id="base-typographySidebarParagraphM"
2381
- title="theme: base; category: typography; group: sidebar; name: paragraph; variant: m; ">
2382
- typographySidebarParagraphM
2383
- <a href="#base-typographySidebarParagraphM"
2384
- title="permalink"
2385
- class="permalink">
2386
- 🔗
2387
- </a>
2388
- </td>
2389
- <td class="is-vcentered">
2390
- <pre>0 none</pre>
2391
- </td>
2392
- <td class="is-vcentered">
2393
- <div class="table__typography-preview">
2394
- n/a
2395
- </div>
2396
-
2397
- </td>
2398
- </tr>
2399
- <tr>
2400
- <td class="with-icons is-vcentered"
2401
- id="base-typographyStepFlowCompleteLabelM"
2402
- title="theme: base; category: typography; group: stepFlow; name: completeLabel; variant: m; ">
2403
- typographyStepFlowCompleteLabelM
2404
- <a href="#base-typographyStepFlowCompleteLabelM"
2405
- title="permalink"
2406
- class="permalink">
2407
- 🔗
2408
- </a>
2409
- </td>
2410
- <td class="is-vcentered">
2411
- <pre>500 14px/150% Sage UI</pre>
2412
- </td>
2413
- <td class="is-vcentered">
2414
- <div class="table__typography-preview">
2415
- n/a
2416
- </div>
2417
-
2418
- </td>
2419
- </tr>
2420
- <tr>
2421
- <td class="with-icons is-vcentered"
2422
- id="base-typographyStepFlowCurrentLabelM"
2423
- title="theme: base; category: typography; group: stepFlow; name: currentLabel; variant: m; ">
2424
- typographyStepFlowCurrentLabelM
2425
- <a href="#base-typographyStepFlowCurrentLabelM"
2426
- title="permalink"
2427
- class="permalink">
2428
- 🔗
2429
- </a>
2430
- </td>
2431
- <td class="is-vcentered">
2432
- <pre>500 14px/150% Sage UI</pre>
2433
- </td>
2434
- <td class="is-vcentered">
2435
- <div class="table__typography-preview">
2436
- n/a
2437
- </div>
2438
-
2439
- </td>
2440
- </tr>
2441
- <tr>
2442
- <td class="with-icons is-vcentered"
2443
- id="base-typographyStepFlowIncompleteLabelM"
2444
- title="theme: base; category: typography; group: stepFlow; name: incompleteLabel; variant: m; ">
2445
- typographyStepFlowIncompleteLabelM
2446
- <a href="#base-typographyStepFlowIncompleteLabelM"
2447
- title="permalink"
2448
- class="permalink">
2449
- 🔗
2450
- </a>
2451
- </td>
2452
- <td class="is-vcentered">
2453
- <pre>500 14px/150% Sage UI</pre>
2454
- </td>
2455
- <td class="is-vcentered">
2456
- <div class="table__typography-preview">
2457
- n/a
2458
- </div>
2459
-
2460
- </td>
2461
- </tr>
2462
- <tr>
2463
- <td class="with-icons is-vcentered"
2464
- id="base-typographySwitchOptionLabelM"
2465
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: m; ">
2466
- typographySwitchOptionLabelM
2467
- <a href="#base-typographySwitchOptionLabelM"
2468
- title="permalink"
2469
- class="permalink">
2470
- 🔗
2471
- </a>
2472
- </td>
2473
- <td class="is-vcentered">
2474
- <pre>500 12px/150% Sage UI</pre>
2475
- </td>
2476
- <td class="is-vcentered">
2477
- <div class="table__typography-preview">
2478
- n/a
2479
- </div>
2480
-
2481
- </td>
2482
- </tr>
2483
- <tr>
2484
- <td class="with-icons is-vcentered"
2485
- id="base-typographySwitchOptionLabelL"
2486
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: l; ">
2487
- typographySwitchOptionLabelL
2488
- <a href="#base-typographySwitchOptionLabelL"
2489
- title="permalink"
2490
- class="permalink">
2491
- 🔗
2492
- </a>
2493
- </td>
2494
- <td class="is-vcentered">
2495
- <pre>500 14px/150% Sage UI</pre>
2496
- </td>
2497
- <td class="is-vcentered">
2498
- <div class="table__typography-preview">
2499
- n/a
2500
- </div>
2501
-
2502
- </td>
2503
- </tr>
2504
- <tr>
2505
- <td class="with-icons is-vcentered"
2506
- id="base-typographyTableHeaderTextXs"
2507
- title="theme: base; category: typography; group: table; name: headerText; variant: xs; ">
2508
- typographyTableHeaderTextXs
2509
- <a href="#base-typographyTableHeaderTextXs"
2510
- title="permalink"
2511
- class="permalink">
2512
- 🔗
2513
- </a>
2514
- </td>
2515
- <td class="is-vcentered">
2516
- <pre>500 13px/150% Sage UI</pre>
2517
- </td>
2518
- <td class="is-vcentered">
2519
- <div class="table__typography-preview">
2520
- n/a
2521
- </div>
2522
-
2523
- </td>
2524
- </tr>
2525
- <tr>
2526
- <td class="with-icons is-vcentered"
2527
- id="base-typographyTableHeaderTextS"
2528
- title="theme: base; category: typography; group: table; name: headerText; variant: s; ">
2529
- typographyTableHeaderTextS
2530
- <a href="#base-typographyTableHeaderTextS"
2531
- title="permalink"
2532
- class="permalink">
2533
- 🔗
2534
- </a>
2535
- </td>
2536
- <td class="is-vcentered">
2537
- <pre>500 14px/150% Sage UI</pre>
2538
- </td>
2539
- <td class="is-vcentered">
2540
- <div class="table__typography-preview">
2541
- n/a
2542
- </div>
2543
-
2544
- </td>
2545
- </tr>
2546
- <tr>
2547
- <td class="with-icons is-vcentered"
2548
- id="base-typographyTableHeaderTextM"
2549
- title="theme: base; category: typography; group: table; name: headerText; variant: m; ">
2550
- typographyTableHeaderTextM
2551
- <a href="#base-typographyTableHeaderTextM"
2552
- title="permalink"
2553
- class="permalink">
2554
- 🔗
2555
- </a>
2556
- </td>
2557
- <td class="is-vcentered">
2558
- <pre>500 14px/150% Sage UI</pre>
2559
- </td>
2560
- <td class="is-vcentered">
2561
- <div class="table__typography-preview">
2562
- n/a
2563
- </div>
2564
-
2565
- </td>
2566
- </tr>
2567
- <tr>
2568
- <td class="with-icons is-vcentered"
2569
- id="base-typographyTableHeaderTextL"
2570
- title="theme: base; category: typography; group: table; name: headerText; variant: l; ">
2571
- typographyTableHeaderTextL
2572
- <a href="#base-typographyTableHeaderTextL"
2573
- title="permalink"
2574
- class="permalink">
2575
- 🔗
2576
- </a>
2577
- </td>
2578
- <td class="is-vcentered">
2579
- <pre>500 16px/150% Sage UI</pre>
2580
- </td>
2581
- <td class="is-vcentered">
2582
- <div class="table__typography-preview">
2583
- n/a
2584
- </div>
2585
-
2586
- </td>
2587
- </tr>
2588
- <tr>
2589
- <td class="with-icons is-vcentered"
2590
- id="base-typographyTableHeaderTextXl"
2591
- title="theme: base; category: typography; group: table; name: headerText; variant: xl; ">
2592
- typographyTableHeaderTextXl
2593
- <a href="#base-typographyTableHeaderTextXl"
2594
- title="permalink"
2595
- class="permalink">
2596
- 🔗
2597
- </a>
2598
- </td>
2599
- <td class="is-vcentered">
2600
- <pre>500 16px/150% Sage UI</pre>
2601
- </td>
2602
- <td class="is-vcentered">
2603
- <div class="table__typography-preview">
2604
- n/a
2605
- </div>
2606
-
2607
- </td>
2608
- </tr>
2609
- <tr>
2610
- <td class="with-icons is-vcentered"
2611
- id="base-typographyTableCellTextXs"
2612
- title="theme: base; category: typography; group: table; name: cellText; variant: xs; ">
2613
- typographyTableCellTextXs
2614
- <a href="#base-typographyTableCellTextXs"
2615
- title="permalink"
2616
- class="permalink">
2617
- 🔗
2618
- </a>
2619
- </td>
2620
- <td class="is-vcentered">
2621
- <pre>400 13px/150% Sage UI</pre>
2622
- </td>
2623
- <td class="is-vcentered">
2624
- <div class="table__typography-preview">
2625
- n/a
2626
- </div>
2627
-
2628
- </td>
2629
- </tr>
2630
- <tr>
2631
- <td class="with-icons is-vcentered"
2632
- id="base-typographyTableCellTextS"
2633
- title="theme: base; category: typography; group: table; name: cellText; variant: s; ">
2634
- typographyTableCellTextS
2635
- <a href="#base-typographyTableCellTextS"
2636
- title="permalink"
2637
- class="permalink">
2638
- 🔗
2639
- </a>
2640
- </td>
2641
- <td class="is-vcentered">
2642
- <pre>400 14px/150% Sage UI</pre>
2643
- </td>
2644
- <td class="is-vcentered">
2645
- <div class="table__typography-preview">
2646
- n/a
2647
- </div>
2648
-
2649
- </td>
2650
- </tr>
2651
- <tr>
2652
- <td class="with-icons is-vcentered"
2653
- id="base-typographyTableCellTextM"
2654
- title="theme: base; category: typography; group: table; name: cellText; variant: m; ">
2655
- typographyTableCellTextM
2656
- <a href="#base-typographyTableCellTextM"
2657
- title="permalink"
2658
- class="permalink">
2659
- 🔗
2660
- </a>
2661
- </td>
2662
- <td class="is-vcentered">
2663
- <pre>400 14px/150% Sage UI</pre>
2664
- </td>
2665
- <td class="is-vcentered">
2666
- <div class="table__typography-preview">
2667
- n/a
2668
- </div>
2669
-
2670
- </td>
2671
- </tr>
2672
- <tr>
2673
- <td class="with-icons is-vcentered"
2674
- id="base-typographyTableCellTextL"
2675
- title="theme: base; category: typography; group: table; name: cellText; variant: l; ">
2676
- typographyTableCellTextL
2677
- <a href="#base-typographyTableCellTextL"
2678
- title="permalink"
2679
- class="permalink">
2680
- 🔗
2681
- </a>
2682
- </td>
2683
- <td class="is-vcentered">
2684
- <pre>400 16px/150% Sage UI</pre>
2685
- </td>
2686
- <td class="is-vcentered">
2687
- <div class="table__typography-preview">
2688
- n/a
2689
- </div>
2690
-
2691
- </td>
2692
- </tr>
2693
- <tr>
2694
- <td class="with-icons is-vcentered"
2695
- id="base-typographyTableCellTextXl"
2696
- title="theme: base; category: typography; group: table; name: cellText; variant: xl; ">
2697
- typographyTableCellTextXl
2698
- <a href="#base-typographyTableCellTextXl"
2699
- title="permalink"
2700
- class="permalink">
2701
- 🔗
2702
- </a>
2703
- </td>
2704
- <td class="is-vcentered">
2705
- <pre>400 16px/150% Sage UI</pre>
2706
- </td>
2707
- <td class="is-vcentered">
2708
- <div class="table__typography-preview">
2709
- n/a
2710
- </div>
2711
-
2712
- </td>
2713
- </tr>
2714
- <tr>
2715
- <td class="with-icons is-vcentered"
2716
- id="base-typographyTooltipTextM"
2717
- title="theme: base; category: typography; group: tooltip; name: text; variant: m; ">
2718
- typographyTooltipTextM
2719
- <a href="#base-typographyTooltipTextM"
2720
- title="permalink"
2721
- class="permalink">
2722
- 🔗
2723
- </a>
2724
- </td>
2725
- <td class="is-vcentered">
2726
- <pre>400 14px/150% Sage UI</pre>
2727
- </td>
2728
- <td class="is-vcentered">
2729
- <div class="table__typography-preview">
2730
- n/a
2731
- </div>
2732
-
2733
- </td>
2734
- </tr>
2735
- <tr>
2736
- <td class="with-icons is-vcentered"
2737
- id="base-typographyTooltipTextL"
2738
- title="theme: base; category: typography; group: tooltip; name: text; variant: l; ">
2739
- typographyTooltipTextL
2740
- <a href="#base-typographyTooltipTextL"
2741
- title="permalink"
2742
- class="permalink">
2743
- 🔗
2744
- </a>
2745
- </td>
2746
- <td class="is-vcentered">
2747
- <pre>400 16px/150% Sage UI</pre>
2748
- </td>
2749
- <td class="is-vcentered">
2750
- <div class="table__typography-preview">
2751
- n/a
2752
- </div>
2753
-
2754
- </td>
2755
- </tr>
2756
- </table>
2757
- </section>
2758
- </main>
2759
- </div>
2760
-
2761
-
2762
- </div>
2763
-
2764
- <script>
2765
- const searchParams = new URLSearchParams(window.location.search);
2766
- const embedded = !!searchParams.get('embedded');
2767
- if(embedded) {
2768
- document.body.classList.add('embedded')
2769
- }
2770
- </script>
2771
- </body>
2772
- </html>