@sage/design-tokens 2.1.0 → 2.4.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 (51) hide show
  1. package/android/base.xml +9 -3
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +9 -3
  4. package/data/tokens.json +60 -1677
  5. package/docs/tokens/base/border-radius/index.html +0 -74
  6. package/docs/tokens/base/border-width/index.html +0 -74
  7. package/docs/tokens/base/box-shadow/index.html +0 -74
  8. package/docs/tokens/base/colors/index.html +0 -74
  9. package/docs/tokens/base/font-families/index.html +0 -74
  10. package/docs/tokens/base/font-sizes/index.html +0 -74
  11. package/docs/tokens/base/font-weights/index.html +0 -74
  12. package/docs/tokens/base/index.html +148 -96
  13. package/docs/tokens/base/line-heights/index.html +0 -74
  14. package/docs/tokens/base/opacity/index.html +0 -74
  15. package/docs/tokens/base/sizing/index.html +21 -95
  16. package/docs/tokens/base/spacing/index.html +63 -74
  17. package/docs/tokens/base/typography/index.html +64 -75
  18. package/docs/tokens/index.html +148 -5736
  19. package/index.d.ts +0 -2
  20. package/index.js +0 -2
  21. package/ios/base.h +9 -3
  22. package/js/base/common.d.ts +7 -1
  23. package/js/base/common.js +9 -3
  24. package/js/base/es6.d.ts +7 -1
  25. package/js/base/es6.js +8 -2
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.4.0.tgz +0 -0
  28. package/scss/base.scss +9 -3
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/figma-only/index.html +0 -394
  32. package/docs/tokens/figma-only/sizing/index.html +0 -399
  33. package/docs/tokens/no-theme/border-radius/index.html +0 -399
  34. package/docs/tokens/no-theme/border-width/index.html +0 -483
  35. package/docs/tokens/no-theme/box-shadow/index.html +0 -462
  36. package/docs/tokens/no-theme/colors/index.html +0 -2982
  37. package/docs/tokens/no-theme/font-families/index.html +0 -462
  38. package/docs/tokens/no-theme/font-sizes/index.html +0 -664
  39. package/docs/tokens/no-theme/font-weights/index.html +0 -441
  40. package/docs/tokens/no-theme/index.html +0 -5890
  41. package/docs/tokens/no-theme/line-heights/index.html +0 -420
  42. package/docs/tokens/no-theme/sizing/index.html +0 -819
  43. package/docs/tokens/no-theme/spacing/index.html +0 -735
  44. package/docs/tokens/no-theme/typography/index.html +0 -1638
  45. package/ios/no-theme.h +0 -269
  46. package/js/no-theme/common.d.ts +0 -256
  47. package/js/no-theme/common.js +0 -267
  48. package/js/no-theme/es6.d.ts +0 -259
  49. package/js/no-theme/es6.js +0 -262
  50. package/sage-design-tokens-2.1.0.tgz +0 -0
  51. package/scss/no-theme.scss +0 -264
package/docs/tokens/no-theme/typography/index.html DELETED
@@ -1,1638 +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 / no-theme / 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
- no-theme
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="no-theme-typographyButtonLabelS"
365
- title="theme: no-theme; category: typography; group: button; name: label; variant: s; ">
366
- typographyButtonLabelS
367
- <a href="#no-theme-typographyButtonLabelS"
368
- title="permalink"
369
- class="permalink">
370
- 🔗
371
- </a>
372
- </td>
373
- <td class="is-vcentered">
374
- <pre>700 14px/150% Pridi</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="no-theme-typographyButtonLabelM"
386
- title="theme: no-theme; category: typography; group: button; name: label; variant: m; ">
387
- typographyButtonLabelM
388
- <a href="#no-theme-typographyButtonLabelM"
389
- title="permalink"
390
- class="permalink">
391
- 🔗
392
- </a>
393
- </td>
394
- <td class="is-vcentered">
395
- <pre>700 14px/150% Pridi</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="no-theme-typographyButtonLabelL"
407
- title="theme: no-theme; category: typography; group: button; name: label; variant: l; ">
408
- typographyButtonLabelL
409
- <a href="#no-theme-typographyButtonLabelL"
410
- title="permalink"
411
- class="permalink">
412
- 🔗
413
- </a>
414
- </td>
415
- <td class="is-vcentered">
416
- <pre>700 16px/150% Pridi</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="no-theme-typographyDialogTitleXs"
428
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: xs; ">
429
- typographyDialogTitleXs
430
- <a href="#no-theme-typographyDialogTitleXs"
431
- title="permalink"
432
- class="permalink">
433
- 🔗
434
- </a>
435
- </td>
436
- <td class="is-vcentered">
437
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleS"
449
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: s; ">
450
- typographyDialogTitleS
451
- <a href="#no-theme-typographyDialogTitleS"
452
- title="permalink"
453
- class="permalink">
454
- 🔗
455
- </a>
456
- </td>
457
- <td class="is-vcentered">
458
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleMs"
470
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: ms; ">
471
- typographyDialogTitleMs
472
- <a href="#no-theme-typographyDialogTitleMs"
473
- title="permalink"
474
- class="permalink">
475
- 🔗
476
- </a>
477
- </td>
478
- <td class="is-vcentered">
479
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleM"
491
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: m; ">
492
- typographyDialogTitleM
493
- <a href="#no-theme-typographyDialogTitleM"
494
- title="permalink"
495
- class="permalink">
496
- 🔗
497
- </a>
498
- </td>
499
- <td class="is-vcentered">
500
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleMl"
512
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: ml; ">
513
- typographyDialogTitleMl
514
- <a href="#no-theme-typographyDialogTitleMl"
515
- title="permalink"
516
- class="permalink">
517
- 🔗
518
- </a>
519
- </td>
520
- <td class="is-vcentered">
521
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleL"
533
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: l; ">
534
- typographyDialogTitleL
535
- <a href="#no-theme-typographyDialogTitleL"
536
- title="permalink"
537
- class="permalink">
538
- 🔗
539
- </a>
540
- </td>
541
- <td class="is-vcentered">
542
- <pre>700 20px/125% Pridi</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="no-theme-typographyDialogTitleXl"
554
- title="theme: no-theme; category: typography; group: dialog; name: title; variant: xl; ">
555
- typographyDialogTitleXl
556
- <a href="#no-theme-typographyDialogTitleXl"
557
- title="permalink"
558
- class="permalink">
559
- 🔗
560
- </a>
561
- </td>
562
- <td class="is-vcentered">
563
- <pre>700 20px/125% Pridi</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="no-theme-typographyFlashTextM"
575
- title="theme: no-theme; category: typography; group: flash; name: text; variant: m; ">
576
- typographyFlashTextM
577
- <a href="#no-theme-typographyFlashTextM"
578
- title="permalink"
579
- class="permalink">
580
- 🔗
581
- </a>
582
- </td>
583
- <td class="is-vcentered">
584
- <pre>400 14px/150% Pridi</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="no-theme-typographyFlashTextL"
596
- title="theme: no-theme; category: typography; group: flash; name: text; variant: l; ">
597
- typographyFlashTextL
598
- <a href="#no-theme-typographyFlashTextL"
599
- title="permalink"
600
- class="permalink">
601
- 🔗
602
- </a>
603
- </td>
604
- <td class="is-vcentered">
605
- <pre>400 16px/150% Pridi</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="no-theme-typographyFormFieldLabelXs"
617
- title="theme: no-theme; category: typography; group: formField; name: label; variant: xs; ">
618
- typographyFormFieldLabelXs
619
- <a href="#no-theme-typographyFormFieldLabelXs"
620
- title="permalink"
621
- class="permalink">
622
- 🔗
623
- </a>
624
- </td>
625
- <td class="is-vcentered">
626
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldLabelS"
638
- title="theme: no-theme; category: typography; group: formField; name: label; variant: s; ">
639
- typographyFormFieldLabelS
640
- <a href="#no-theme-typographyFormFieldLabelS"
641
- title="permalink"
642
- class="permalink">
643
- 🔗
644
- </a>
645
- </td>
646
- <td class="is-vcentered">
647
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldLabelM"
659
- title="theme: no-theme; category: typography; group: formField; name: label; variant: m; ">
660
- typographyFormFieldLabelM
661
- <a href="#no-theme-typographyFormFieldLabelM"
662
- title="permalink"
663
- class="permalink">
664
- 🔗
665
- </a>
666
- </td>
667
- <td class="is-vcentered">
668
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldLabelL"
680
- title="theme: no-theme; category: typography; group: formField; name: label; variant: l; ">
681
- typographyFormFieldLabelL
682
- <a href="#no-theme-typographyFormFieldLabelL"
683
- title="permalink"
684
- class="permalink">
685
- 🔗
686
- </a>
687
- </td>
688
- <td class="is-vcentered">
689
- <pre>500 16px/150% Pridi</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="no-theme-typographyFormFieldHintTextXs"
701
- title="theme: no-theme; category: typography; group: formField; name: hintText; variant: xs; ">
702
- typographyFormFieldHintTextXs
703
- <a href="#no-theme-typographyFormFieldHintTextXs"
704
- title="permalink"
705
- class="permalink">
706
- 🔗
707
- </a>
708
- </td>
709
- <td class="is-vcentered">
710
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldHintTextS"
722
- title="theme: no-theme; category: typography; group: formField; name: hintText; variant: s; ">
723
- typographyFormFieldHintTextS
724
- <a href="#no-theme-typographyFormFieldHintTextS"
725
- title="permalink"
726
- class="permalink">
727
- 🔗
728
- </a>
729
- </td>
730
- <td class="is-vcentered">
731
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldHintTextM"
743
- title="theme: no-theme; category: typography; group: formField; name: hintText; variant: m; ">
744
- typographyFormFieldHintTextM
745
- <a href="#no-theme-typographyFormFieldHintTextM"
746
- title="permalink"
747
- class="permalink">
748
- 🔗
749
- </a>
750
- </td>
751
- <td class="is-vcentered">
752
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldHintTextL"
764
- title="theme: no-theme; category: typography; group: formField; name: hintText; variant: l; ">
765
- typographyFormFieldHintTextL
766
- <a href="#no-theme-typographyFormFieldHintTextL"
767
- title="permalink"
768
- class="permalink">
769
- 🔗
770
- </a>
771
- </td>
772
- <td class="is-vcentered">
773
- <pre>400 16px/150% Pridi</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="no-theme-typographyFormFieldErrorMessageXs"
785
- title="theme: no-theme; category: typography; group: formField; name: errorMessage; variant: xs; ">
786
- typographyFormFieldErrorMessageXs
787
- <a href="#no-theme-typographyFormFieldErrorMessageXs"
788
- title="permalink"
789
- class="permalink">
790
- 🔗
791
- </a>
792
- </td>
793
- <td class="is-vcentered">
794
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldErrorMessageS"
806
- title="theme: no-theme; category: typography; group: formField; name: errorMessage; variant: s; ">
807
- typographyFormFieldErrorMessageS
808
- <a href="#no-theme-typographyFormFieldErrorMessageS"
809
- title="permalink"
810
- class="permalink">
811
- 🔗
812
- </a>
813
- </td>
814
- <td class="is-vcentered">
815
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldErrorMessageM"
827
- title="theme: no-theme; category: typography; group: formField; name: errorMessage; variant: m; ">
828
- typographyFormFieldErrorMessageM
829
- <a href="#no-theme-typographyFormFieldErrorMessageM"
830
- title="permalink"
831
- class="permalink">
832
- 🔗
833
- </a>
834
- </td>
835
- <td class="is-vcentered">
836
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldErrorMessageL"
848
- title="theme: no-theme; category: typography; group: formField; name: errorMessage; variant: l; ">
849
- typographyFormFieldErrorMessageL
850
- <a href="#no-theme-typographyFormFieldErrorMessageL"
851
- title="permalink"
852
- class="permalink">
853
- 🔗
854
- </a>
855
- </td>
856
- <td class="is-vcentered">
857
- <pre>500 16px/150% Pridi</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="no-theme-typographyFormFieldCautionMessageXs"
869
- title="theme: no-theme; category: typography; group: formField; name: cautionMessage; variant: xs; ">
870
- typographyFormFieldCautionMessageXs
871
- <a href="#no-theme-typographyFormFieldCautionMessageXs"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCautionMessageS"
890
- title="theme: no-theme; category: typography; group: formField; name: cautionMessage; variant: s; ">
891
- typographyFormFieldCautionMessageS
892
- <a href="#no-theme-typographyFormFieldCautionMessageS"
893
- title="permalink"
894
- class="permalink">
895
- 🔗
896
- </a>
897
- </td>
898
- <td class="is-vcentered">
899
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCautionMessageM"
911
- title="theme: no-theme; category: typography; group: formField; name: cautionMessage; variant: m; ">
912
- typographyFormFieldCautionMessageM
913
- <a href="#no-theme-typographyFormFieldCautionMessageM"
914
- title="permalink"
915
- class="permalink">
916
- 🔗
917
- </a>
918
- </td>
919
- <td class="is-vcentered">
920
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCautionMessageL"
932
- title="theme: no-theme; category: typography; group: formField; name: cautionMessage; variant: l; ">
933
- typographyFormFieldCautionMessageL
934
- <a href="#no-theme-typographyFormFieldCautionMessageL"
935
- title="permalink"
936
- class="permalink">
937
- 🔗
938
- </a>
939
- </td>
940
- <td class="is-vcentered">
941
- <pre>400 16px/150% Pridi</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="no-theme-typographyFormFieldInputTextXs"
953
- title="theme: no-theme; category: typography; group: formField; name: inputText; variant: xs; ">
954
- typographyFormFieldInputTextXs
955
- <a href="#no-theme-typographyFormFieldInputTextXs"
956
- title="permalink"
957
- class="permalink">
958
- 🔗
959
- </a>
960
- </td>
961
- <td class="is-vcentered">
962
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldInputTextS"
974
- title="theme: no-theme; category: typography; group: formField; name: inputText; variant: s; ">
975
- typographyFormFieldInputTextS
976
- <a href="#no-theme-typographyFormFieldInputTextS"
977
- title="permalink"
978
- class="permalink">
979
- 🔗
980
- </a>
981
- </td>
982
- <td class="is-vcentered">
983
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldInputTextM"
995
- title="theme: no-theme; category: typography; group: formField; name: inputText; variant: m; ">
996
- typographyFormFieldInputTextM
997
- <a href="#no-theme-typographyFormFieldInputTextM"
998
- title="permalink"
999
- class="permalink">
1000
- 🔗
1001
- </a>
1002
- </td>
1003
- <td class="is-vcentered">
1004
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldInputTextL"
1016
- title="theme: no-theme; category: typography; group: formField; name: inputText; variant: l; ">
1017
- typographyFormFieldInputTextL
1018
- <a href="#no-theme-typographyFormFieldInputTextL"
1019
- title="permalink"
1020
- class="permalink">
1021
- 🔗
1022
- </a>
1023
- </td>
1024
- <td class="is-vcentered">
1025
- <pre>400 16px/150% Pridi</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="no-theme-typographyFormFieldDropdownOptionsXs"
1037
- title="theme: no-theme; category: typography; group: formField; name: dropdownOptions; variant: xs; ">
1038
- typographyFormFieldDropdownOptionsXs
1039
- <a href="#no-theme-typographyFormFieldDropdownOptionsXs"
1040
- title="permalink"
1041
- class="permalink">
1042
- 🔗
1043
- </a>
1044
- </td>
1045
- <td class="is-vcentered">
1046
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldDropdownOptionsS"
1058
- title="theme: no-theme; category: typography; group: formField; name: dropdownOptions; variant: s; ">
1059
- typographyFormFieldDropdownOptionsS
1060
- <a href="#no-theme-typographyFormFieldDropdownOptionsS"
1061
- title="permalink"
1062
- class="permalink">
1063
- 🔗
1064
- </a>
1065
- </td>
1066
- <td class="is-vcentered">
1067
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldDropdownOptionsM"
1079
- title="theme: no-theme; category: typography; group: formField; name: dropdownOptions; variant: m; ">
1080
- typographyFormFieldDropdownOptionsM
1081
- <a href="#no-theme-typographyFormFieldDropdownOptionsM"
1082
- title="permalink"
1083
- class="permalink">
1084
- 🔗
1085
- </a>
1086
- </td>
1087
- <td class="is-vcentered">
1088
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldDropdownOptionsL"
1100
- title="theme: no-theme; category: typography; group: formField; name: dropdownOptions; variant: l; ">
1101
- typographyFormFieldDropdownOptionsL
1102
- <a href="#no-theme-typographyFormFieldDropdownOptionsL"
1103
- title="permalink"
1104
- class="permalink">
1105
- 🔗
1106
- </a>
1107
- </td>
1108
- <td class="is-vcentered">
1109
- <pre>400 16px/150% Pridi</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="no-theme-typographyFormFieldSecondLabelXs"
1121
- title="theme: no-theme; category: typography; group: formField; name: secondLabel; variant: xs; ">
1122
- typographyFormFieldSecondLabelXs
1123
- <a href="#no-theme-typographyFormFieldSecondLabelXs"
1124
- title="permalink"
1125
- class="permalink">
1126
- 🔗
1127
- </a>
1128
- </td>
1129
- <td class="is-vcentered">
1130
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldSecondLabelS"
1142
- title="theme: no-theme; category: typography; group: formField; name: secondLabel; variant: s; ">
1143
- typographyFormFieldSecondLabelS
1144
- <a href="#no-theme-typographyFormFieldSecondLabelS"
1145
- title="permalink"
1146
- class="permalink">
1147
- 🔗
1148
- </a>
1149
- </td>
1150
- <td class="is-vcentered">
1151
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldSecondLabelM"
1163
- title="theme: no-theme; category: typography; group: formField; name: secondLabel; variant: m; ">
1164
- typographyFormFieldSecondLabelM
1165
- <a href="#no-theme-typographyFormFieldSecondLabelM"
1166
- title="permalink"
1167
- class="permalink">
1168
- 🔗
1169
- </a>
1170
- </td>
1171
- <td class="is-vcentered">
1172
- <pre>500 14px/150% Pridi</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="no-theme-typographyFormFieldSecondLabelL"
1184
- title="theme: no-theme; category: typography; group: formField; name: secondLabel; variant: l; ">
1185
- typographyFormFieldSecondLabelL
1186
- <a href="#no-theme-typographyFormFieldSecondLabelL"
1187
- title="permalink"
1188
- class="permalink">
1189
- 🔗
1190
- </a>
1191
- </td>
1192
- <td class="is-vcentered">
1193
- <pre>500 16px/150% Pridi</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="no-theme-typographyFormFieldCharacterCountXs"
1205
- title="theme: no-theme; category: typography; group: formField; name: characterCount; variant: xs; ">
1206
- typographyFormFieldCharacterCountXs
1207
- <a href="#no-theme-typographyFormFieldCharacterCountXs"
1208
- title="permalink"
1209
- class="permalink">
1210
- 🔗
1211
- </a>
1212
- </td>
1213
- <td class="is-vcentered">
1214
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCharacterCountS"
1226
- title="theme: no-theme; category: typography; group: formField; name: characterCount; variant: s; ">
1227
- typographyFormFieldCharacterCountS
1228
- <a href="#no-theme-typographyFormFieldCharacterCountS"
1229
- title="permalink"
1230
- class="permalink">
1231
- 🔗
1232
- </a>
1233
- </td>
1234
- <td class="is-vcentered">
1235
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCharacterCountM"
1247
- title="theme: no-theme; category: typography; group: formField; name: characterCount; variant: m; ">
1248
- typographyFormFieldCharacterCountM
1249
- <a href="#no-theme-typographyFormFieldCharacterCountM"
1250
- title="permalink"
1251
- class="permalink">
1252
- 🔗
1253
- </a>
1254
- </td>
1255
- <td class="is-vcentered">
1256
- <pre>400 14px/150% Pridi</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="no-theme-typographyFormFieldCharacterCountL"
1268
- title="theme: no-theme; category: typography; group: formField; name: characterCount; variant: l; ">
1269
- typographyFormFieldCharacterCountL
1270
- <a href="#no-theme-typographyFormFieldCharacterCountL"
1271
- title="permalink"
1272
- class="permalink">
1273
- 🔗
1274
- </a>
1275
- </td>
1276
- <td class="is-vcentered">
1277
- <pre>400 14px/150% Pridi</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="no-theme-typographyLinkTextM"
1289
- title="theme: no-theme; category: typography; group: link; name: text; variant: m; ">
1290
- typographyLinkTextM
1291
- <a href="#no-theme-typographyLinkTextM"
1292
- title="permalink"
1293
- class="permalink">
1294
- 🔗
1295
- </a>
1296
- </td>
1297
- <td class="is-vcentered">
1298
- <pre>400 14px/150% Pridi</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="no-theme-typographyLinkTextL"
1310
- title="theme: no-theme; category: typography; group: link; name: text; variant: l; ">
1311
- typographyLinkTextL
1312
- <a href="#no-theme-typographyLinkTextL"
1313
- title="permalink"
1314
- class="permalink">
1315
- 🔗
1316
- </a>
1317
- </td>
1318
- <td class="is-vcentered">
1319
- <pre>400 16px/150% Pridi</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="no-theme-typographyMessageHeadingM"
1331
- title="theme: no-theme; category: typography; group: message; name: heading; variant: m; ">
1332
- typographyMessageHeadingM
1333
- <a href="#no-theme-typographyMessageHeadingM"
1334
- title="permalink"
1335
- class="permalink">
1336
- 🔗
1337
- </a>
1338
- </td>
1339
- <td class="is-vcentered">
1340
- <pre>700 14px/150% Pridi</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="no-theme-typographyMessageHeadingL"
1352
- title="theme: no-theme; category: typography; group: message; name: heading; variant: l; ">
1353
- typographyMessageHeadingL
1354
- <a href="#no-theme-typographyMessageHeadingL"
1355
- title="permalink"
1356
- class="permalink">
1357
- 🔗
1358
- </a>
1359
- </td>
1360
- <td class="is-vcentered">
1361
- <pre>700 16px/150% Pridi</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="no-theme-typographyMessageTextM"
1373
- title="theme: no-theme; category: typography; group: message; name: text; variant: m; ">
1374
- typographyMessageTextM
1375
- <a href="#no-theme-typographyMessageTextM"
1376
- title="permalink"
1377
- class="permalink">
1378
- 🔗
1379
- </a>
1380
- </td>
1381
- <td class="is-vcentered">
1382
- <pre>400 14px/150% Pridi</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="no-theme-typographyMessageTextL"
1394
- title="theme: no-theme; category: typography; group: message; name: text; variant: l; ">
1395
- typographyMessageTextL
1396
- <a href="#no-theme-typographyMessageTextL"
1397
- title="permalink"
1398
- class="permalink">
1399
- 🔗
1400
- </a>
1401
- </td>
1402
- <td class="is-vcentered">
1403
- <pre>400 16px/150% Pridi</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="no-theme-typographyPillLabelS"
1415
- title="theme: no-theme; category: typography; group: pill; name: label; variant: s; ">
1416
- typographyPillLabelS
1417
- <a href="#no-theme-typographyPillLabelS"
1418
- title="permalink"
1419
- class="permalink">
1420
- 🔗
1421
- </a>
1422
- </td>
1423
- <td class="is-vcentered">
1424
- <pre>500 10px/150% Pridi</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="no-theme-typographyPillLabelM"
1436
- title="theme: no-theme; category: typography; group: pill; name: label; variant: m; ">
1437
- typographyPillLabelM
1438
- <a href="#no-theme-typographyPillLabelM"
1439
- title="permalink"
1440
- class="permalink">
1441
- 🔗
1442
- </a>
1443
- </td>
1444
- <td class="is-vcentered">
1445
- <pre>500 12px/150% Pridi</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="no-theme-typographyPillLabelL"
1457
- title="theme: no-theme; category: typography; group: pill; name: label; variant: l; ">
1458
- typographyPillLabelL
1459
- <a href="#no-theme-typographyPillLabelL"
1460
- title="permalink"
1461
- class="permalink">
1462
- 🔗
1463
- </a>
1464
- </td>
1465
- <td class="is-vcentered">
1466
- <pre>500 14px/150% Pridi</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="no-theme-typographyPillLabelXl"
1478
- title="theme: no-theme; category: typography; group: pill; name: label; variant: xl; ">
1479
- typographyPillLabelXl
1480
- <a href="#no-theme-typographyPillLabelXl"
1481
- title="permalink"
1482
- class="permalink">
1483
- 🔗
1484
- </a>
1485
- </td>
1486
- <td class="is-vcentered">
1487
- <pre>500 16px/150% Pridi</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="no-theme-typographySwitchOptionLabelM"
1499
- title="theme: no-theme; category: typography; group: switch; name: optionLabel; variant: m; ">
1500
- typographySwitchOptionLabelM
1501
- <a href="#no-theme-typographySwitchOptionLabelM"
1502
- title="permalink"
1503
- class="permalink">
1504
- 🔗
1505
- </a>
1506
- </td>
1507
- <td class="is-vcentered">
1508
- <pre>500 12px/150% Pridi</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="no-theme-typographySwitchOptionLabelL"
1520
- title="theme: no-theme; category: typography; group: switch; name: optionLabel; variant: l; ">
1521
- typographySwitchOptionLabelL
1522
- <a href="#no-theme-typographySwitchOptionLabelL"
1523
- title="permalink"
1524
- class="permalink">
1525
- 🔗
1526
- </a>
1527
- </td>
1528
- <td class="is-vcentered">
1529
- <pre>500 14px/150% Pridi</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="no-theme-typographyTableHeaderTextM"
1541
- title="theme: no-theme; category: typography; group: table; name: headerText; variant: m; ">
1542
- typographyTableHeaderTextM
1543
- <a href="#no-theme-typographyTableHeaderTextM"
1544
- title="permalink"
1545
- class="permalink">
1546
- 🔗
1547
- </a>
1548
- </td>
1549
- <td class="is-vcentered">
1550
- <pre>500 14px/150% Pridi</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="no-theme-typographyTableCellTextM"
1562
- title="theme: no-theme; category: typography; group: table; name: cellText; variant: m; ">
1563
- typographyTableCellTextM
1564
- <a href="#no-theme-typographyTableCellTextM"
1565
- title="permalink"
1566
- class="permalink">
1567
- 🔗
1568
- </a>
1569
- </td>
1570
- <td class="is-vcentered">
1571
- <pre>400 14px/150% Pridi</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="no-theme-typographyTooltipTextM"
1583
- title="theme: no-theme; category: typography; group: tooltip; name: text; variant: m; ">
1584
- typographyTooltipTextM
1585
- <a href="#no-theme-typographyTooltipTextM"
1586
- title="permalink"
1587
- class="permalink">
1588
- 🔗
1589
- </a>
1590
- </td>
1591
- <td class="is-vcentered">
1592
- <pre>400 14px/150% Pridi</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="no-theme-typographyTooltipTextL"
1604
- title="theme: no-theme; category: typography; group: tooltip; name: text; variant: l; ">
1605
- typographyTooltipTextL
1606
- <a href="#no-theme-typographyTooltipTextL"
1607
- title="permalink"
1608
- class="permalink">
1609
- 🔗
1610
- </a>
1611
- </td>
1612
- <td class="is-vcentered">
1613
- <pre>400 16px/150% Pridi</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
- </table>
1623
- </section>
1624
- </main>
1625
- </div>
1626
-
1627
-
1628
- </div>
1629
-
1630
- <script>
1631
- const searchParams = new URLSearchParams(window.location.search);
1632
- const embedded = !!searchParams.get('embedded');
1633
- if(embedded) {
1634
- document.body.classList.add('embedded')
1635
- }
1636
- </script>
1637
- </body>
1638
- </html>