@sage/design-tokens 1.94.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 (48) hide show
  1. package/README.md +0 -1
  2. package/android/no-theme.xml +1 -1
  3. package/css/no-theme.css +1 -1
  4. package/data/tokens.json +0 -2824
  5. package/docs/tokens/index.html +68 -8245
  6. package/docs/tokens/no-theme/border-radius/index.html +0 -79
  7. package/docs/tokens/no-theme/border-width/index.html +0 -79
  8. package/docs/tokens/no-theme/box-shadow/index.html +0 -79
  9. package/docs/tokens/no-theme/colors/index.html +0 -79
  10. package/docs/tokens/no-theme/font-families/index.html +0 -79
  11. package/docs/tokens/no-theme/font-sizes/index.html +0 -79
  12. package/docs/tokens/no-theme/font-weights/index.html +0 -79
  13. package/docs/tokens/no-theme/index.html +0 -79
  14. package/docs/tokens/no-theme/line-heights/index.html +0 -79
  15. package/docs/tokens/no-theme/sizing/index.html +0 -79
  16. package/docs/tokens/no-theme/spacing/index.html +0 -79
  17. package/docs/tokens/no-theme/typography/index.html +0 -79
  18. package/index.d.ts +0 -2
  19. package/index.js +0 -2
  20. package/ios/no-theme.h +1 -1
  21. package/js/no-theme/common.js +1 -1
  22. package/package.json +1 -1
  23. package/sage-design-tokens-2.2.0.tgz +0 -0
  24. package/scss/no-theme.scss +1 -1
  25. package/android/base.xml +0 -381
  26. package/css/base.css +0 -383
  27. package/docs/tokens/base/border-radius/index.html +0 -399
  28. package/docs/tokens/base/border-width/index.html +0 -483
  29. package/docs/tokens/base/box-shadow/index.html +0 -525
  30. package/docs/tokens/base/colors/index.html +0 -4053
  31. package/docs/tokens/base/font-families/index.html +0 -462
  32. package/docs/tokens/base/font-sizes/index.html +0 -664
  33. package/docs/tokens/base/font-weights/index.html +0 -441
  34. package/docs/tokens/base/index.html +0 -8343
  35. package/docs/tokens/base/line-heights/index.html +0 -441
  36. package/docs/tokens/base/opacity/index.html +0 -441
  37. package/docs/tokens/base/sizing/index.html +0 -903
  38. package/docs/tokens/base/spacing/index.html +0 -735
  39. package/docs/tokens/base/typography/index.html +0 -2772
  40. package/docs/tokens/figma-only/index.html +0 -394
  41. package/docs/tokens/figma-only/sizing/index.html +0 -399
  42. package/ios/base.h +0 -385
  43. package/js/base/common.d.ts +0 -372
  44. package/js/base/common.js +0 -383
  45. package/js/base/es6.d.ts +0 -375
  46. package/js/base/es6.js +0 -378
  47. package/sage-design-tokens-1.94.0.tgz +0 -0
  48. package/scss/base.scss +0 -380
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-typographyDialogTitleXs"
680
- title="theme: base; category: typography; group: dialog; name: title; variant: xs; ">
681
- typographyDialogTitleXs
682
- <a href="#base-typographyDialogTitleXs"
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-typographyDialogTitleS"
701
- title="theme: base; category: typography; group: dialog; name: title; variant: s; ">
702
- typographyDialogTitleS
703
- <a href="#base-typographyDialogTitleS"
704
- title="permalink"
705
- class="permalink">
706
- 🔗
707
- </a>
708
- </td>
709
- <td class="is-vcentered">
710
- <pre>700 24px/125% 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-typographyDialogTitleMs"
722
- title="theme: base; category: typography; group: dialog; name: title; variant: ms; ">
723
- typographyDialogTitleMs
724
- <a href="#base-typographyDialogTitleMs"
725
- title="permalink"
726
- class="permalink">
727
- 🔗
728
- </a>
729
- </td>
730
- <td class="is-vcentered">
731
- <pre>700 24px/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-typographyDialogTitleM"
743
- title="theme: base; category: typography; group: dialog; name: title; variant: m; ">
744
- typographyDialogTitleM
745
- <a href="#base-typographyDialogTitleM"
746
- title="permalink"
747
- class="permalink">
748
- 🔗
749
- </a>
750
- </td>
751
- <td class="is-vcentered">
752
- <pre>700 24px/125% Sage UI</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-typographyDialogTitleMl"
764
- title="theme: base; category: typography; group: dialog; name: title; variant: ml; ">
765
- typographyDialogTitleMl
766
- <a href="#base-typographyDialogTitleMl"
767
- title="permalink"
768
- class="permalink">
769
- 🔗
770
- </a>
771
- </td>
772
- <td class="is-vcentered">
773
- <pre>700 24px/125% 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-typographyDialogTitleL"
785
- title="theme: base; category: typography; group: dialog; name: title; variant: l; ">
786
- typographyDialogTitleL
787
- <a href="#base-typographyDialogTitleL"
788
- title="permalink"
789
- class="permalink">
790
- 🔗
791
- </a>
792
- </td>
793
- <td class="is-vcentered">
794
- <pre>700 24px/125% 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-typographyDialogTitleXl"
806
- title="theme: base; category: typography; group: dialog; name: title; variant: xl; ">
807
- typographyDialogTitleXl
808
- <a href="#base-typographyDialogTitleXl"
809
- title="permalink"
810
- class="permalink">
811
- 🔗
812
- </a>
813
- </td>
814
- <td class="is-vcentered">
815
- <pre>700 24px/125% 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-typographyDialogParagraphXs"
827
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xs; ">
828
- typographyDialogParagraphXs
829
- <a href="#base-typographyDialogParagraphXs"
830
- title="permalink"
831
- class="permalink">
832
- 🔗
833
- </a>
834
- </td>
835
- <td class="is-vcentered">
836
- <pre>400 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-typographyDialogParagraphS"
848
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: s; ">
849
- typographyDialogParagraphS
850
- <a href="#base-typographyDialogParagraphS"
851
- title="permalink"
852
- class="permalink">
853
- 🔗
854
- </a>
855
- </td>
856
- <td class="is-vcentered">
857
- <pre>400 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-typographyDialogParagraphMs"
869
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ms; ">
870
- typographyDialogParagraphMs
871
- <a href="#base-typographyDialogParagraphMs"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>400 14px/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-typographyDialogParagraphM"
890
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: m; ">
891
- typographyDialogParagraphM
892
- <a href="#base-typographyDialogParagraphM"
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-typographyDialogParagraphMl"
911
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: ml; ">
912
- typographyDialogParagraphMl
913
- <a href="#base-typographyDialogParagraphMl"
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-typographyDialogParagraphL"
932
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: l; ">
933
- typographyDialogParagraphL
934
- <a href="#base-typographyDialogParagraphL"
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-typographyDialogParagraphXl"
953
- title="theme: base; category: typography; group: dialog; name: paragraph; variant: xl; ">
954
- typographyDialogParagraphXl
955
- <a href="#base-typographyDialogParagraphXl"
956
- title="permalink"
957
- class="permalink">
958
- 🔗
959
- </a>
960
- </td>
961
- <td class="is-vcentered">
962
- <pre>400 14px/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-typographyDrawerTitleM"
974
- title="theme: base; category: typography; group: drawer; name: title; variant: m; ">
975
- typographyDrawerTitleM
976
- <a href="#base-typographyDrawerTitleM"
977
- title="permalink"
978
- class="permalink">
979
- 🔗
980
- </a>
981
- </td>
982
- <td class="is-vcentered">
983
- <pre>700 22px/125% 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-typographyFlashTextM"
995
- title="theme: base; category: typography; group: flash; name: text; variant: m; ">
996
- typographyFlashTextM
997
- <a href="#base-typographyFlashTextM"
998
- title="permalink"
999
- class="permalink">
1000
- 🔗
1001
- </a>
1002
- </td>
1003
- <td class="is-vcentered">
1004
- <pre>400 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-typographyFlashTextL"
1016
- title="theme: base; category: typography; group: flash; name: text; variant: l; ">
1017
- typographyFlashTextL
1018
- <a href="#base-typographyFlashTextL"
1019
- title="permalink"
1020
- class="permalink">
1021
- 🔗
1022
- </a>
1023
- </td>
1024
- <td class="is-vcentered">
1025
- <pre>400 16px/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-typographyFormFieldLabelXs"
1037
- title="theme: base; category: typography; group: formField; name: label; variant: xs; ">
1038
- typographyFormFieldLabelXs
1039
- <a href="#base-typographyFormFieldLabelXs"
1040
- title="permalink"
1041
- class="permalink">
1042
- 🔗
1043
- </a>
1044
- </td>
1045
- <td class="is-vcentered">
1046
- <pre>500 14px/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-typographyFormFieldLabelS"
1058
- title="theme: base; category: typography; group: formField; name: label; variant: s; ">
1059
- typographyFormFieldLabelS
1060
- <a href="#base-typographyFormFieldLabelS"
1061
- title="permalink"
1062
- class="permalink">
1063
- 🔗
1064
- </a>
1065
- </td>
1066
- <td class="is-vcentered">
1067
- <pre>500 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-typographyFormFieldLabelM"
1079
- title="theme: base; category: typography; group: formField; name: label; variant: m; ">
1080
- typographyFormFieldLabelM
1081
- <a href="#base-typographyFormFieldLabelM"
1082
- title="permalink"
1083
- class="permalink">
1084
- 🔗
1085
- </a>
1086
- </td>
1087
- <td class="is-vcentered">
1088
- <pre>500 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-typographyFormFieldLabelL"
1100
- title="theme: base; category: typography; group: formField; name: label; variant: l; ">
1101
- typographyFormFieldLabelL
1102
- <a href="#base-typographyFormFieldLabelL"
1103
- title="permalink"
1104
- class="permalink">
1105
- 🔗
1106
- </a>
1107
- </td>
1108
- <td class="is-vcentered">
1109
- <pre>500 16px/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-typographyFormFieldHintTextXs"
1121
- title="theme: base; category: typography; group: formField; name: hintText; variant: xs; ">
1122
- typographyFormFieldHintTextXs
1123
- <a href="#base-typographyFormFieldHintTextXs"
1124
- title="permalink"
1125
- class="permalink">
1126
- 🔗
1127
- </a>
1128
- </td>
1129
- <td class="is-vcentered">
1130
- <pre>400 14px/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-typographyFormFieldHintTextS"
1142
- title="theme: base; category: typography; group: formField; name: hintText; variant: s; ">
1143
- typographyFormFieldHintTextS
1144
- <a href="#base-typographyFormFieldHintTextS"
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-typographyFormFieldHintTextM"
1163
- title="theme: base; category: typography; group: formField; name: hintText; variant: m; ">
1164
- typographyFormFieldHintTextM
1165
- <a href="#base-typographyFormFieldHintTextM"
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-typographyFormFieldHintTextL"
1184
- title="theme: base; category: typography; group: formField; name: hintText; variant: l; ">
1185
- typographyFormFieldHintTextL
1186
- <a href="#base-typographyFormFieldHintTextL"
1187
- title="permalink"
1188
- class="permalink">
1189
- 🔗
1190
- </a>
1191
- </td>
1192
- <td class="is-vcentered">
1193
- <pre>400 16px/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-typographyFormFieldErrorMessageXs"
1205
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: xs; ">
1206
- typographyFormFieldErrorMessageXs
1207
- <a href="#base-typographyFormFieldErrorMessageXs"
1208
- title="permalink"
1209
- class="permalink">
1210
- 🔗
1211
- </a>
1212
- </td>
1213
- <td class="is-vcentered">
1214
- <pre>500 14px/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-typographyFormFieldErrorMessageS"
1226
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: s; ">
1227
- typographyFormFieldErrorMessageS
1228
- <a href="#base-typographyFormFieldErrorMessageS"
1229
- title="permalink"
1230
- class="permalink">
1231
- 🔗
1232
- </a>
1233
- </td>
1234
- <td class="is-vcentered">
1235
- <pre>500 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-typographyFormFieldErrorMessageM"
1247
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: m; ">
1248
- typographyFormFieldErrorMessageM
1249
- <a href="#base-typographyFormFieldErrorMessageM"
1250
- title="permalink"
1251
- class="permalink">
1252
- 🔗
1253
- </a>
1254
- </td>
1255
- <td class="is-vcentered">
1256
- <pre>500 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-typographyFormFieldErrorMessageL"
1268
- title="theme: base; category: typography; group: formField; name: errorMessage; variant: l; ">
1269
- typographyFormFieldErrorMessageL
1270
- <a href="#base-typographyFormFieldErrorMessageL"
1271
- title="permalink"
1272
- class="permalink">
1273
- 🔗
1274
- </a>
1275
- </td>
1276
- <td class="is-vcentered">
1277
- <pre>500 16px/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-typographyFormFieldCautionMessageXs"
1289
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: xs; ">
1290
- typographyFormFieldCautionMessageXs
1291
- <a href="#base-typographyFormFieldCautionMessageXs"
1292
- title="permalink"
1293
- class="permalink">
1294
- 🔗
1295
- </a>
1296
- </td>
1297
- <td class="is-vcentered">
1298
- <pre>400 14px/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-typographyFormFieldCautionMessageS"
1310
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: s; ">
1311
- typographyFormFieldCautionMessageS
1312
- <a href="#base-typographyFormFieldCautionMessageS"
1313
- title="permalink"
1314
- class="permalink">
1315
- 🔗
1316
- </a>
1317
- </td>
1318
- <td class="is-vcentered">
1319
- <pre>400 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-typographyFormFieldCautionMessageM"
1331
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: m; ">
1332
- typographyFormFieldCautionMessageM
1333
- <a href="#base-typographyFormFieldCautionMessageM"
1334
- title="permalink"
1335
- class="permalink">
1336
- 🔗
1337
- </a>
1338
- </td>
1339
- <td class="is-vcentered">
1340
- <pre>400 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-typographyFormFieldCautionMessageL"
1352
- title="theme: base; category: typography; group: formField; name: cautionMessage; variant: l; ">
1353
- typographyFormFieldCautionMessageL
1354
- <a href="#base-typographyFormFieldCautionMessageL"
1355
- title="permalink"
1356
- class="permalink">
1357
- 🔗
1358
- </a>
1359
- </td>
1360
- <td class="is-vcentered">
1361
- <pre>400 16px/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-typographyFormFieldInputTextXs"
1373
- title="theme: base; category: typography; group: formField; name: inputText; variant: xs; ">
1374
- typographyFormFieldInputTextXs
1375
- <a href="#base-typographyFormFieldInputTextXs"
1376
- title="permalink"
1377
- class="permalink">
1378
- 🔗
1379
- </a>
1380
- </td>
1381
- <td class="is-vcentered">
1382
- <pre>400 14px/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-typographyFormFieldInputTextS"
1394
- title="theme: base; category: typography; group: formField; name: inputText; variant: s; ">
1395
- typographyFormFieldInputTextS
1396
- <a href="#base-typographyFormFieldInputTextS"
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-typographyFormFieldInputTextM"
1415
- title="theme: base; category: typography; group: formField; name: inputText; variant: m; ">
1416
- typographyFormFieldInputTextM
1417
- <a href="#base-typographyFormFieldInputTextM"
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-typographyFormFieldInputTextL"
1436
- title="theme: base; category: typography; group: formField; name: inputText; variant: l; ">
1437
- typographyFormFieldInputTextL
1438
- <a href="#base-typographyFormFieldInputTextL"
1439
- title="permalink"
1440
- class="permalink">
1441
- 🔗
1442
- </a>
1443
- </td>
1444
- <td class="is-vcentered">
1445
- <pre>400 16px/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-typographyFormFieldDropdownOptionsXs"
1457
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: xs; ">
1458
- typographyFormFieldDropdownOptionsXs
1459
- <a href="#base-typographyFormFieldDropdownOptionsXs"
1460
- title="permalink"
1461
- class="permalink">
1462
- 🔗
1463
- </a>
1464
- </td>
1465
- <td class="is-vcentered">
1466
- <pre>400 14px/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-typographyFormFieldDropdownOptionsS"
1478
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: s; ">
1479
- typographyFormFieldDropdownOptionsS
1480
- <a href="#base-typographyFormFieldDropdownOptionsS"
1481
- title="permalink"
1482
- class="permalink">
1483
- 🔗
1484
- </a>
1485
- </td>
1486
- <td class="is-vcentered">
1487
- <pre>400 14px/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-typographyFormFieldDropdownOptionsM"
1499
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: m; ">
1500
- typographyFormFieldDropdownOptionsM
1501
- <a href="#base-typographyFormFieldDropdownOptionsM"
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-typographyFormFieldDropdownOptionsL"
1520
- title="theme: base; category: typography; group: formField; name: dropdownOptions; variant: l; ">
1521
- typographyFormFieldDropdownOptionsL
1522
- <a href="#base-typographyFormFieldDropdownOptionsL"
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-typographyFormFieldSecondLabelXs"
1541
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: xs; ">
1542
- typographyFormFieldSecondLabelXs
1543
- <a href="#base-typographyFormFieldSecondLabelXs"
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-typographyFormFieldSecondLabelS"
1562
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: s; ">
1563
- typographyFormFieldSecondLabelS
1564
- <a href="#base-typographyFormFieldSecondLabelS"
1565
- title="permalink"
1566
- class="permalink">
1567
- 🔗
1568
- </a>
1569
- </td>
1570
- <td class="is-vcentered">
1571
- <pre>500 14px/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-typographyFormFieldSecondLabelM"
1583
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: m; ">
1584
- typographyFormFieldSecondLabelM
1585
- <a href="#base-typographyFormFieldSecondLabelM"
1586
- title="permalink"
1587
- class="permalink">
1588
- 🔗
1589
- </a>
1590
- </td>
1591
- <td class="is-vcentered">
1592
- <pre>500 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-typographyFormFieldSecondLabelL"
1604
- title="theme: base; category: typography; group: formField; name: secondLabel; variant: l; ">
1605
- typographyFormFieldSecondLabelL
1606
- <a href="#base-typographyFormFieldSecondLabelL"
1607
- title="permalink"
1608
- class="permalink">
1609
- 🔗
1610
- </a>
1611
- </td>
1612
- <td class="is-vcentered">
1613
- <pre>500 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-typographyFormFieldCharacterCountXs"
1625
- title="theme: base; category: typography; group: formField; name: characterCount; variant: xs; ">
1626
- typographyFormFieldCharacterCountXs
1627
- <a href="#base-typographyFormFieldCharacterCountXs"
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-typographyFormFieldCharacterCountS"
1646
- title="theme: base; category: typography; group: formField; name: characterCount; variant: s; ">
1647
- typographyFormFieldCharacterCountS
1648
- <a href="#base-typographyFormFieldCharacterCountS"
1649
- title="permalink"
1650
- class="permalink">
1651
- 🔗
1652
- </a>
1653
- </td>
1654
- <td class="is-vcentered">
1655
- <pre>400 14px/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-typographyFormFieldCharacterCountM"
1667
- title="theme: base; category: typography; group: formField; name: characterCount; variant: m; ">
1668
- typographyFormFieldCharacterCountM
1669
- <a href="#base-typographyFormFieldCharacterCountM"
1670
- title="permalink"
1671
- class="permalink">
1672
- 🔗
1673
- </a>
1674
- </td>
1675
- <td class="is-vcentered">
1676
- <pre>400 14px/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-typographyFormFieldCharacterCountL"
1688
- title="theme: base; category: typography; group: formField; name: characterCount; variant: l; ">
1689
- typographyFormFieldCharacterCountL
1690
- <a href="#base-typographyFormFieldCharacterCountL"
1691
- title="permalink"
1692
- class="permalink">
1693
- 🔗
1694
- </a>
1695
- </td>
1696
- <td class="is-vcentered">
1697
- <pre>400 16px/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-typographyLinkTextM"
1709
- title="theme: base; category: typography; group: link; name: text; variant: m; ">
1710
- typographyLinkTextM
1711
- <a href="#base-typographyLinkTextM"
1712
- title="permalink"
1713
- class="permalink">
1714
- 🔗
1715
- </a>
1716
- </td>
1717
- <td class="is-vcentered">
1718
- <pre>400 14px/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-typographyLinkTextL"
1730
- title="theme: base; category: typography; group: link; name: text; variant: l; ">
1731
- typographyLinkTextL
1732
- <a href="#base-typographyLinkTextL"
1733
- title="permalink"
1734
- class="permalink">
1735
- 🔗
1736
- </a>
1737
- </td>
1738
- <td class="is-vcentered">
1739
- <pre>400 16px/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-typographyMenuLabelM"
1751
- title="theme: base; category: typography; group: menu; name: label; variant: m; ">
1752
- typographyMenuLabelM
1753
- <a href="#base-typographyMenuLabelM"
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-typographyMenuSegmentTitleM"
1772
- title="theme: base; category: typography; group: menu; name: segmentTitle; variant: m; ">
1773
- typographyMenuSegmentTitleM
1774
- <a href="#base-typographyMenuSegmentTitleM"
1775
- title="permalink"
1776
- class="permalink">
1777
- 🔗
1778
- </a>
1779
- </td>
1780
- <td class="is-vcentered">
1781
- <pre>500 12px/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-typographyMessageHeadingM"
1793
- title="theme: base; category: typography; group: message; name: heading; variant: m; ">
1794
- typographyMessageHeadingM
1795
- <a href="#base-typographyMessageHeadingM"
1796
- title="permalink"
1797
- class="permalink">
1798
- 🔗
1799
- </a>
1800
- </td>
1801
- <td class="is-vcentered">
1802
- <pre>700 14px/150% 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-typographyMessageHeadingL"
1814
- title="theme: base; category: typography; group: message; name: heading; variant: l; ">
1815
- typographyMessageHeadingL
1816
- <a href="#base-typographyMessageHeadingL"
1817
- title="permalink"
1818
- class="permalink">
1819
- 🔗
1820
- </a>
1821
- </td>
1822
- <td class="is-vcentered">
1823
- <pre>700 16px/150% 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-typographyMessageTextM"
1835
- title="theme: base; category: typography; group: message; name: text; variant: m; ">
1836
- typographyMessageTextM
1837
- <a href="#base-typographyMessageTextM"
1838
- title="permalink"
1839
- class="permalink">
1840
- 🔗
1841
- </a>
1842
- </td>
1843
- <td class="is-vcentered">
1844
- <pre>400 14px/150% 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-typographyMessageTextL"
1856
- title="theme: base; category: typography; group: message; name: text; variant: l; ">
1857
- typographyMessageTextL
1858
- <a href="#base-typographyMessageTextL"
1859
- title="permalink"
1860
- class="permalink">
1861
- 🔗
1862
- </a>
1863
- </td>
1864
- <td class="is-vcentered">
1865
- <pre>400 16px/150% 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-typographyPaginationLabelM"
1877
- title="theme: base; category: typography; group: pagination; name: label; variant: m; ">
1878
- typographyPaginationLabelM
1879
- <a href="#base-typographyPaginationLabelM"
1880
- title="permalink"
1881
- class="permalink">
1882
- 🔗
1883
- </a>
1884
- </td>
1885
- <td class="is-vcentered">
1886
- <pre>400 13px/150% 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-typographyPillLabelS"
1898
- title="theme: base; category: typography; group: pill; name: label; variant: s; ">
1899
- typographyPillLabelS
1900
- <a href="#base-typographyPillLabelS"
1901
- title="permalink"
1902
- class="permalink">
1903
- 🔗
1904
- </a>
1905
- </td>
1906
- <td class="is-vcentered">
1907
- <pre>500 10px/150% 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-typographyPillLabelM"
1919
- title="theme: base; category: typography; group: pill; name: label; variant: m; ">
1920
- typographyPillLabelM
1921
- <a href="#base-typographyPillLabelM"
1922
- title="permalink"
1923
- class="permalink">
1924
- 🔗
1925
- </a>
1926
- </td>
1927
- <td class="is-vcentered">
1928
- <pre>500 12px/150% 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-typographyPillLabelL"
1940
- title="theme: base; category: typography; group: pill; name: label; variant: l; ">
1941
- typographyPillLabelL
1942
- <a href="#base-typographyPillLabelL"
1943
- title="permalink"
1944
- class="permalink">
1945
- 🔗
1946
- </a>
1947
- </td>
1948
- <td class="is-vcentered">
1949
- <pre>500 14px/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-typographyPillLabelXl"
1961
- title="theme: base; category: typography; group: pill; name: label; variant: xl; ">
1962
- typographyPillLabelXl
1963
- <a href="#base-typographyPillLabelXl"
1964
- title="permalink"
1965
- class="permalink">
1966
- 🔗
1967
- </a>
1968
- </td>
1969
- <td class="is-vcentered">
1970
- <pre>500 16px/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-typographyProfileEmailXs"
1982
- title="theme: base; category: typography; group: profile; name: email; variant: xs; ">
1983
- typographyProfileEmailXs
1984
- <a href="#base-typographyProfileEmailXs"
1985
- title="permalink"
1986
- class="permalink">
1987
- 🔗
1988
- </a>
1989
- </td>
1990
- <td class="is-vcentered">
1991
- <pre>400 12px/100% 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-typographyProfileEmailS"
2003
- title="theme: base; category: typography; group: profile; name: email; variant: s; ">
2004
- typographyProfileEmailS
2005
- <a href="#base-typographyProfileEmailS"
2006
- title="permalink"
2007
- class="permalink">
2008
- 🔗
2009
- </a>
2010
- </td>
2011
- <td class="is-vcentered">
2012
- <pre>400 14px/100% 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-typographyProfileEmailM"
2024
- title="theme: base; category: typography; group: profile; name: email; variant: m; ">
2025
- typographyProfileEmailM
2026
- <a href="#base-typographyProfileEmailM"
2027
- title="permalink"
2028
- class="permalink">
2029
- 🔗
2030
- </a>
2031
- </td>
2032
- <td class="is-vcentered">
2033
- <pre>400 14px/125% 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-typographyProfileEmailMl"
2045
- title="theme: base; category: typography; group: profile; name: email; variant: ml; ">
2046
- typographyProfileEmailMl
2047
- <a href="#base-typographyProfileEmailMl"
2048
- title="permalink"
2049
- class="permalink">
2050
- 🔗
2051
- </a>
2052
- </td>
2053
- <td class="is-vcentered">
2054
- <pre>400 14px/125% 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-typographyProfileEmailL"
2066
- title="theme: base; category: typography; group: profile; name: email; variant: l; ">
2067
- typographyProfileEmailL
2068
- <a href="#base-typographyProfileEmailL"
2069
- title="permalink"
2070
- class="permalink">
2071
- 🔗
2072
- </a>
2073
- </td>
2074
- <td class="is-vcentered">
2075
- <pre>400 14px/125% 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-typographyProfileEmailXl"
2087
- title="theme: base; category: typography; group: profile; name: email; variant: xl; ">
2088
- typographyProfileEmailXl
2089
- <a href="#base-typographyProfileEmailXl"
2090
- title="permalink"
2091
- class="permalink">
2092
- 🔗
2093
- </a>
2094
- </td>
2095
- <td class="is-vcentered">
2096
- <pre>400 18px/125% 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-typographyProfileEmailXxl"
2108
- title="theme: base; category: typography; group: profile; name: email; variant: xxl; ">
2109
- typographyProfileEmailXxl
2110
- <a href="#base-typographyProfileEmailXxl"
2111
- title="permalink"
2112
- class="permalink">
2113
- 🔗
2114
- </a>
2115
- </td>
2116
- <td class="is-vcentered">
2117
- <pre>400 24px/125% 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-typographyProfileInitialsXs"
2129
- title="theme: base; category: typography; group: profile; name: initials; variant: xs; ">
2130
- typographyProfileInitialsXs
2131
- <a href="#base-typographyProfileInitialsXs"
2132
- title="permalink"
2133
- class="permalink">
2134
- 🔗
2135
- </a>
2136
- </td>
2137
- <td class="is-vcentered">
2138
- <pre>500 10px/150% 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-typographyProfileInitialsS"
2150
- title="theme: base; category: typography; group: profile; name: initials; variant: s; ">
2151
- typographyProfileInitialsS
2152
- <a href="#base-typographyProfileInitialsS"
2153
- title="permalink"
2154
- class="permalink">
2155
- 🔗
2156
- </a>
2157
- </td>
2158
- <td class="is-vcentered">
2159
- <pre>500 14px/150% 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-typographyProfileInitialsM"
2171
- title="theme: base; category: typography; group: profile; name: initials; variant: m; ">
2172
- typographyProfileInitialsM
2173
- <a href="#base-typographyProfileInitialsM"
2174
- title="permalink"
2175
- class="permalink">
2176
- 🔗
2177
- </a>
2178
- </td>
2179
- <td class="is-vcentered">
2180
- <pre>500 18px/150% 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-typographyProfileInitialsMl"
2192
- title="theme: base; category: typography; group: profile; name: initials; variant: ml; ">
2193
- typographyProfileInitialsMl
2194
- <a href="#base-typographyProfileInitialsMl"
2195
- title="permalink"
2196
- class="permalink">
2197
- 🔗
2198
- </a>
2199
- </td>
2200
- <td class="is-vcentered">
2201
- <pre>500 24px/150% 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-typographyProfileInitialsL"
2213
- title="theme: base; category: typography; group: profile; name: initials; variant: l; ">
2214
- typographyProfileInitialsL
2215
- <a href="#base-typographyProfileInitialsL"
2216
- title="permalink"
2217
- class="permalink">
2218
- 🔗
2219
- </a>
2220
- </td>
2221
- <td class="is-vcentered">
2222
- <pre>500 32px/150% 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-typographyProfileInitialsXl"
2234
- title="theme: base; category: typography; group: profile; name: initials; variant: xl; ">
2235
- typographyProfileInitialsXl
2236
- <a href="#base-typographyProfileInitialsXl"
2237
- title="permalink"
2238
- class="permalink">
2239
- 🔗
2240
- </a>
2241
- </td>
2242
- <td class="is-vcentered">
2243
- <pre>500 48px/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-typographyProfileInitialsXxl"
2255
- title="theme: base; category: typography; group: profile; name: initials; variant: xxl; ">
2256
- typographyProfileInitialsXxl
2257
- <a href="#base-typographyProfileInitialsXxl"
2258
- title="permalink"
2259
- class="permalink">
2260
- 🔗
2261
- </a>
2262
- </td>
2263
- <td class="is-vcentered">
2264
- <pre>500 56px/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-typographyProfileNameXs"
2276
- title="theme: base; category: typography; group: profile; name: name; variant: xs; ">
2277
- typographyProfileNameXs
2278
- <a href="#base-typographyProfileNameXs"
2279
- title="permalink"
2280
- class="permalink">
2281
- 🔗
2282
- </a>
2283
- </td>
2284
- <td class="is-vcentered">
2285
- <pre>500 13px/100% 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-typographyProfileNameS"
2297
- title="theme: base; category: typography; group: profile; name: name; variant: s; ">
2298
- typographyProfileNameS
2299
- <a href="#base-typographyProfileNameS"
2300
- title="permalink"
2301
- class="permalink">
2302
- 🔗
2303
- </a>
2304
- </td>
2305
- <td class="is-vcentered">
2306
- <pre>500 14px/100% 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-typographyProfileNameM"
2318
- title="theme: base; category: typography; group: profile; name: name; variant: m; ">
2319
- typographyProfileNameM
2320
- <a href="#base-typographyProfileNameM"
2321
- title="permalink"
2322
- class="permalink">
2323
- 🔗
2324
- </a>
2325
- </td>
2326
- <td class="is-vcentered">
2327
- <pre>500 14px/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-typographyProfileNameMl"
2339
- title="theme: base; category: typography; group: profile; name: name; variant: ml; ">
2340
- typographyProfileNameMl
2341
- <a href="#base-typographyProfileNameMl"
2342
- title="permalink"
2343
- class="permalink">
2344
- 🔗
2345
- </a>
2346
- </td>
2347
- <td class="is-vcentered">
2348
- <pre>500 16px/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-typographyProfileNameL"
2360
- title="theme: base; category: typography; group: profile; name: name; variant: l; ">
2361
- typographyProfileNameL
2362
- <a href="#base-typographyProfileNameL"
2363
- title="permalink"
2364
- class="permalink">
2365
- 🔗
2366
- </a>
2367
- </td>
2368
- <td class="is-vcentered">
2369
- <pre>500 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-typographyProfileNameXl"
2381
- title="theme: base; category: typography; group: profile; name: name; variant: xl; ">
2382
- typographyProfileNameXl
2383
- <a href="#base-typographyProfileNameXl"
2384
- title="permalink"
2385
- class="permalink">
2386
- 🔗
2387
- </a>
2388
- </td>
2389
- <td class="is-vcentered">
2390
- <pre>500 24px/125% Sage UI</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-typographyProfileNameXxl"
2402
- title="theme: base; category: typography; group: profile; name: name; variant: xxl; ">
2403
- typographyProfileNameXxl
2404
- <a href="#base-typographyProfileNameXxl"
2405
- title="permalink"
2406
- class="permalink">
2407
- 🔗
2408
- </a>
2409
- </td>
2410
- <td class="is-vcentered">
2411
- <pre>500 32px/125% 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-typographyProgressTrackerValueLabelS"
2423
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: s; ">
2424
- typographyProgressTrackerValueLabelS
2425
- <a href="#base-typographyProgressTrackerValueLabelS"
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-typographyProgressTrackerValueLabelM"
2444
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: m; ">
2445
- typographyProgressTrackerValueLabelM
2446
- <a href="#base-typographyProgressTrackerValueLabelM"
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-typographyProgressTrackerValueLabelL"
2465
- title="theme: base; category: typography; group: progressTracker; name: valueLabel; variant: l; ">
2466
- typographyProgressTrackerValueLabelL
2467
- <a href="#base-typographyProgressTrackerValueLabelL"
2468
- title="permalink"
2469
- class="permalink">
2470
- 🔗
2471
- </a>
2472
- </td>
2473
- <td class="is-vcentered">
2474
- <pre>500 14px/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-typographySearchLabelM"
2486
- title="theme: base; category: typography; group: search; name: label; variant: m; ">
2487
- typographySearchLabelM
2488
- <a href="#base-typographySearchLabelM"
2489
- title="permalink"
2490
- class="permalink">
2491
- 🔗
2492
- </a>
2493
- </td>
2494
- <td class="is-vcentered">
2495
- <pre>400 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-typographySidebarTitleS"
2507
- title="theme: base; category: typography; group: sidebar; name: title; variant: s; ">
2508
- typographySidebarTitleS
2509
- <a href="#base-typographySidebarTitleS"
2510
- title="permalink"
2511
- class="permalink">
2512
- 🔗
2513
- </a>
2514
- </td>
2515
- <td class="is-vcentered">
2516
- <pre>700 20px/125% 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-typographySidebarTitleM"
2528
- title="theme: base; category: typography; group: sidebar; name: title; variant: m; ">
2529
- typographySidebarTitleM
2530
- <a href="#base-typographySidebarTitleM"
2531
- title="permalink"
2532
- class="permalink">
2533
- 🔗
2534
- </a>
2535
- </td>
2536
- <td class="is-vcentered">
2537
- <pre>700 20px/125% 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-typographySidebarTitleL"
2549
- title="theme: base; category: typography; group: sidebar; name: title; variant: l; ">
2550
- typographySidebarTitleL
2551
- <a href="#base-typographySidebarTitleL"
2552
- title="permalink"
2553
- class="permalink">
2554
- 🔗
2555
- </a>
2556
- </td>
2557
- <td class="is-vcentered">
2558
- <pre>700 20px/125% 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-typographyStepFlowCompleteLabelM"
2570
- title="theme: base; category: typography; group: stepFlow; name: completeLabel; variant: m; ">
2571
- typographyStepFlowCompleteLabelM
2572
- <a href="#base-typographyStepFlowCompleteLabelM"
2573
- title="permalink"
2574
- class="permalink">
2575
- 🔗
2576
- </a>
2577
- </td>
2578
- <td class="is-vcentered">
2579
- <pre>500 14px/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-typographyStepFlowCurrentLabelM"
2591
- title="theme: base; category: typography; group: stepFlow; name: currentLabel; variant: m; ">
2592
- typographyStepFlowCurrentLabelM
2593
- <a href="#base-typographyStepFlowCurrentLabelM"
2594
- title="permalink"
2595
- class="permalink">
2596
- 🔗
2597
- </a>
2598
- </td>
2599
- <td class="is-vcentered">
2600
- <pre>500 14px/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-typographyStepFlowIncompleteLabelM"
2612
- title="theme: base; category: typography; group: stepFlow; name: incompleteLabel; variant: m; ">
2613
- typographyStepFlowIncompleteLabelM
2614
- <a href="#base-typographyStepFlowIncompleteLabelM"
2615
- title="permalink"
2616
- class="permalink">
2617
- 🔗
2618
- </a>
2619
- </td>
2620
- <td class="is-vcentered">
2621
- <pre>500 14px/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-typographySwitchOptionLabelM"
2633
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: m; ">
2634
- typographySwitchOptionLabelM
2635
- <a href="#base-typographySwitchOptionLabelM"
2636
- title="permalink"
2637
- class="permalink">
2638
- 🔗
2639
- </a>
2640
- </td>
2641
- <td class="is-vcentered">
2642
- <pre>500 12px/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-typographySwitchOptionLabelL"
2654
- title="theme: base; category: typography; group: switch; name: optionLabel; variant: l; ">
2655
- typographySwitchOptionLabelL
2656
- <a href="#base-typographySwitchOptionLabelL"
2657
- title="permalink"
2658
- class="permalink">
2659
- 🔗
2660
- </a>
2661
- </td>
2662
- <td class="is-vcentered">
2663
- <pre>500 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-typographyTableHeaderTextM"
2675
- title="theme: base; category: typography; group: table; name: headerText; variant: m; ">
2676
- typographyTableHeaderTextM
2677
- <a href="#base-typographyTableHeaderTextM"
2678
- title="permalink"
2679
- class="permalink">
2680
- 🔗
2681
- </a>
2682
- </td>
2683
- <td class="is-vcentered">
2684
- <pre>500 14px/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-typographyTableCellTextM"
2696
- title="theme: base; category: typography; group: table; name: cellText; variant: m; ">
2697
- typographyTableCellTextM
2698
- <a href="#base-typographyTableCellTextM"
2699
- title="permalink"
2700
- class="permalink">
2701
- 🔗
2702
- </a>
2703
- </td>
2704
- <td class="is-vcentered">
2705
- <pre>400 14px/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>