@sage/design-tokens 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/android/no-theme.xml +1 -1
  2. package/css/no-theme.css +1 -1
  3. package/data/tokens.json +0 -2864
  4. package/docs/tokens/index.html +68 -8329
  5. package/docs/tokens/no-theme/border-radius/index.html +0 -79
  6. package/docs/tokens/no-theme/border-width/index.html +0 -79
  7. package/docs/tokens/no-theme/box-shadow/index.html +0 -79
  8. package/docs/tokens/no-theme/colors/index.html +0 -79
  9. package/docs/tokens/no-theme/font-families/index.html +0 -79
  10. package/docs/tokens/no-theme/font-sizes/index.html +0 -79
  11. package/docs/tokens/no-theme/font-weights/index.html +0 -79
  12. package/docs/tokens/no-theme/index.html +0 -79
  13. package/docs/tokens/no-theme/line-heights/index.html +0 -79
  14. package/docs/tokens/no-theme/sizing/index.html +0 -79
  15. package/docs/tokens/no-theme/spacing/index.html +0 -79
  16. package/docs/tokens/no-theme/typography/index.html +0 -79
  17. package/index.d.ts +0 -2
  18. package/index.js +0 -2
  19. package/ios/no-theme.h +1 -1
  20. package/js/no-theme/common.js +1 -1
  21. package/package.json +1 -1
  22. package/sage-design-tokens-2.2.0.tgz +0 -0
  23. package/scss/no-theme.scss +1 -1
  24. package/android/base.xml +0 -385
  25. package/css/base.css +0 -387
  26. package/docs/tokens/base/border-radius/index.html +0 -399
  27. package/docs/tokens/base/border-width/index.html +0 -483
  28. package/docs/tokens/base/box-shadow/index.html +0 -525
  29. package/docs/tokens/base/colors/index.html +0 -4137
  30. package/docs/tokens/base/font-families/index.html +0 -462
  31. package/docs/tokens/base/font-sizes/index.html +0 -664
  32. package/docs/tokens/base/font-weights/index.html +0 -441
  33. package/docs/tokens/base/index.html +0 -8427
  34. package/docs/tokens/base/line-heights/index.html +0 -441
  35. package/docs/tokens/base/opacity/index.html +0 -441
  36. package/docs/tokens/base/sizing/index.html +0 -903
  37. package/docs/tokens/base/spacing/index.html +0 -735
  38. package/docs/tokens/base/typography/index.html +0 -2772
  39. package/docs/tokens/figma-only/index.html +0 -394
  40. package/docs/tokens/figma-only/sizing/index.html +0 -399
  41. package/ios/base.h +0 -389
  42. package/js/base/common.d.ts +0 -376
  43. package/js/base/common.js +0 -387
  44. package/js/base/es6.d.ts +0 -379
  45. package/js/base/es6.js +0 -382
  46. package/sage-design-tokens-2.1.0.tgz +0 -0
  47. package/scss/base.scss +0 -384
package/docs/tokens/base/sizing/index.html DELETED
@@ -1,903 +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 / sizing</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
- sizing
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-sizing100"
365
- title="theme: base; category: sizing; variant: 100; ">
366
- sizing100
367
- <a href="#base-sizing100"
368
- title="permalink"
369
- class="permalink">
370
- 🔗
371
- </a>
372
- </td>
373
- <td class="is-vcentered">
374
- <pre>8px</pre>
375
- </td>
376
- <td class="is-vcentered">
377
- <div class="table__sizing-preview"
378
- style="width: 8px; height: 8px">
379
- </div>
380
-
381
- </td>
382
- </tr>
383
- <tr>
384
- <td class="with-icons is-vcentered"
385
- id="base-sizing125"
386
- title="theme: base; category: sizing; variant: 125; ">
387
- sizing125
388
- <a href="#base-sizing125"
389
- title="permalink"
390
- class="permalink">
391
- 🔗
392
- </a>
393
- </td>
394
- <td class="is-vcentered">
395
- <pre>10px</pre>
396
- </td>
397
- <td class="is-vcentered">
398
- <div class="table__sizing-preview"
399
- style="width: 10px; height: 10px">
400
- </div>
401
-
402
- </td>
403
- </tr>
404
- <tr>
405
- <td class="with-icons is-vcentered"
406
- id="base-sizing150"
407
- title="theme: base; category: sizing; variant: 150; ">
408
- sizing150
409
- <a href="#base-sizing150"
410
- title="permalink"
411
- class="permalink">
412
- 🔗
413
- </a>
414
- </td>
415
- <td class="is-vcentered">
416
- <pre>12px</pre>
417
- </td>
418
- <td class="is-vcentered">
419
- <div class="table__sizing-preview"
420
- style="width: 12px; height: 12px">
421
- </div>
422
-
423
- </td>
424
- </tr>
425
- <tr>
426
- <td class="with-icons is-vcentered"
427
- id="base-sizing175"
428
- title="theme: base; category: sizing; variant: 175; ">
429
- sizing175
430
- <a href="#base-sizing175"
431
- title="permalink"
432
- class="permalink">
433
- 🔗
434
- </a>
435
- </td>
436
- <td class="is-vcentered">
437
- <pre>14px</pre>
438
- </td>
439
- <td class="is-vcentered">
440
- <div class="table__sizing-preview"
441
- style="width: 14px; height: 14px">
442
- </div>
443
-
444
- </td>
445
- </tr>
446
- <tr>
447
- <td class="with-icons is-vcentered"
448
- id="base-sizing200"
449
- title="theme: base; category: sizing; variant: 200; ">
450
- sizing200
451
- <a href="#base-sizing200"
452
- title="permalink"
453
- class="permalink">
454
- 🔗
455
- </a>
456
- </td>
457
- <td class="is-vcentered">
458
- <pre>16px</pre>
459
- </td>
460
- <td class="is-vcentered">
461
- <div class="table__sizing-preview"
462
- style="width: 16px; height: 16px">
463
- </div>
464
-
465
- </td>
466
- </tr>
467
- <tr>
468
- <td class="with-icons is-vcentered"
469
- id="base-sizing250"
470
- title="theme: base; category: sizing; variant: 250; ">
471
- sizing250
472
- <a href="#base-sizing250"
473
- title="permalink"
474
- class="permalink">
475
- 🔗
476
- </a>
477
- </td>
478
- <td class="is-vcentered">
479
- <pre>20px</pre>
480
- </td>
481
- <td class="is-vcentered">
482
- <div class="table__sizing-preview"
483
- style="width: 20px; height: 20px">
484
- </div>
485
-
486
- </td>
487
- </tr>
488
- <tr>
489
- <td class="with-icons is-vcentered"
490
- id="base-sizing275"
491
- title="theme: base; category: sizing; variant: 275; ">
492
- sizing275
493
- <a href="#base-sizing275"
494
- title="permalink"
495
- class="permalink">
496
- 🔗
497
- </a>
498
- </td>
499
- <td class="is-vcentered">
500
- <pre>22px</pre>
501
- </td>
502
- <td class="is-vcentered">
503
- <div class="table__sizing-preview"
504
- style="width: 22px; height: 22px">
505
- </div>
506
-
507
- </td>
508
- </tr>
509
- <tr>
510
- <td class="with-icons is-vcentered"
511
- id="base-sizing300"
512
- title="theme: base; category: sizing; variant: 300; ">
513
- sizing300
514
- <a href="#base-sizing300"
515
- title="permalink"
516
- class="permalink">
517
- 🔗
518
- </a>
519
- </td>
520
- <td class="is-vcentered">
521
- <pre>24px</pre>
522
- </td>
523
- <td class="is-vcentered">
524
- <div class="table__sizing-preview"
525
- style="width: 24px; height: 24px">
526
- </div>
527
-
528
- </td>
529
- </tr>
530
- <tr>
531
- <td class="with-icons is-vcentered"
532
- id="base-sizing350"
533
- title="theme: base; category: sizing; variant: 350; ">
534
- sizing350
535
- <a href="#base-sizing350"
536
- title="permalink"
537
- class="permalink">
538
- 🔗
539
- </a>
540
- </td>
541
- <td class="is-vcentered">
542
- <pre>28px</pre>
543
- </td>
544
- <td class="is-vcentered">
545
- <div class="table__sizing-preview"
546
- style="width: 28px; height: 28px">
547
- </div>
548
-
549
- </td>
550
- </tr>
551
- <tr>
552
- <td class="with-icons is-vcentered"
553
- id="base-sizing375"
554
- title="theme: base; category: sizing; variant: 375; ">
555
- sizing375
556
- <a href="#base-sizing375"
557
- title="permalink"
558
- class="permalink">
559
- 🔗
560
- </a>
561
- </td>
562
- <td class="is-vcentered">
563
- <pre>30px</pre>
564
- </td>
565
- <td class="is-vcentered">
566
- <div class="table__sizing-preview"
567
- style="width: 30px; height: 30px">
568
- </div>
569
-
570
- </td>
571
- </tr>
572
- <tr>
573
- <td class="with-icons is-vcentered"
574
- id="base-sizing400"
575
- title="theme: base; category: sizing; variant: 400; ">
576
- sizing400
577
- <a href="#base-sizing400"
578
- title="permalink"
579
- class="permalink">
580
- 🔗
581
- </a>
582
- </td>
583
- <td class="is-vcentered">
584
- <pre>32px</pre>
585
- </td>
586
- <td class="is-vcentered">
587
- <div class="table__sizing-preview"
588
- style="width: 32px; height: 32px">
589
- </div>
590
-
591
- </td>
592
- </tr>
593
- <tr>
594
- <td class="with-icons is-vcentered"
595
- id="base-sizing450"
596
- title="theme: base; category: sizing; variant: 450; ">
597
- sizing450
598
- <a href="#base-sizing450"
599
- title="permalink"
600
- class="permalink">
601
- 🔗
602
- </a>
603
- </td>
604
- <td class="is-vcentered">
605
- <pre>36px</pre>
606
- </td>
607
- <td class="is-vcentered">
608
- <div class="table__sizing-preview"
609
- style="width: 36px; height: 36px">
610
- </div>
611
-
612
- </td>
613
- </tr>
614
- <tr>
615
- <td class="with-icons is-vcentered"
616
- id="base-sizing500"
617
- title="theme: base; category: sizing; variant: 500; ">
618
- sizing500
619
- <a href="#base-sizing500"
620
- title="permalink"
621
- class="permalink">
622
- 🔗
623
- </a>
624
- </td>
625
- <td class="is-vcentered">
626
- <pre>40px</pre>
627
- </td>
628
- <td class="is-vcentered">
629
- <div class="table__sizing-preview"
630
- style="width: 40px; height: 40px">
631
- </div>
632
-
633
- </td>
634
- </tr>
635
- <tr>
636
- <td class="with-icons is-vcentered"
637
- id="base-sizing600"
638
- title="theme: base; category: sizing; variant: 600; ">
639
- sizing600
640
- <a href="#base-sizing600"
641
- title="permalink"
642
- class="permalink">
643
- 🔗
644
- </a>
645
- </td>
646
- <td class="is-vcentered">
647
- <pre>48px</pre>
648
- </td>
649
- <td class="is-vcentered">
650
- <div class="table__sizing-preview"
651
- style="width: 48px; height: 48px">
652
- </div>
653
-
654
- </td>
655
- </tr>
656
- <tr>
657
- <td class="with-icons is-vcentered"
658
- id="base-sizing700"
659
- title="theme: base; category: sizing; variant: 700; ">
660
- sizing700
661
- <a href="#base-sizing700"
662
- title="permalink"
663
- class="permalink">
664
- 🔗
665
- </a>
666
- </td>
667
- <td class="is-vcentered">
668
- <pre>56px</pre>
669
- </td>
670
- <td class="is-vcentered">
671
- <div class="table__sizing-preview"
672
- style="width: 56px; height: 56px">
673
- </div>
674
-
675
- </td>
676
- </tr>
677
- <tr>
678
- <td class="with-icons is-vcentered"
679
- id="base-sizing800"
680
- title="theme: base; category: sizing; variant: 800; ">
681
- sizing800
682
- <a href="#base-sizing800"
683
- title="permalink"
684
- class="permalink">
685
- 🔗
686
- </a>
687
- </td>
688
- <td class="is-vcentered">
689
- <pre>64px</pre>
690
- </td>
691
- <td class="is-vcentered">
692
- <div class="table__sizing-preview"
693
- style="width: 64px; height: 64px">
694
- </div>
695
-
696
- </td>
697
- </tr>
698
- <tr>
699
- <td class="with-icons is-vcentered"
700
- id="base-sizing900"
701
- title="theme: base; category: sizing; variant: 900; ">
702
- sizing900
703
- <a href="#base-sizing900"
704
- title="permalink"
705
- class="permalink">
706
- 🔗
707
- </a>
708
- </td>
709
- <td class="is-vcentered">
710
- <pre>72px</pre>
711
- </td>
712
- <td class="is-vcentered">
713
- <div class="table__sizing-preview"
714
- style="width: 72px; height: 72px">
715
- </div>
716
-
717
- </td>
718
- </tr>
719
- <tr>
720
- <td class="with-icons is-vcentered"
721
- id="base-sizing1000"
722
- title="theme: base; category: sizing; variant: 1000; ">
723
- sizing1000
724
- <a href="#base-sizing1000"
725
- title="permalink"
726
- class="permalink">
727
- 🔗
728
- </a>
729
- </td>
730
- <td class="is-vcentered">
731
- <pre>80px</pre>
732
- </td>
733
- <td class="is-vcentered">
734
- <div class="table__sizing-preview"
735
- style="width: 80px; height: 80px">
736
- </div>
737
-
738
- </td>
739
- </tr>
740
- <tr>
741
- <td class="with-icons is-vcentered"
742
- id="base-sizing1300"
743
- title="theme: base; category: sizing; variant: 1300; ">
744
- sizing1300
745
- <a href="#base-sizing1300"
746
- title="permalink"
747
- class="permalink">
748
- 🔗
749
- </a>
750
- </td>
751
- <td class="is-vcentered">
752
- <pre>104px</pre>
753
- </td>
754
- <td class="is-vcentered">
755
- <div class="table__sizing-preview"
756
- style="width: 104px; height: 104px">
757
- </div>
758
-
759
- </td>
760
- </tr>
761
- <tr>
762
- <td class="with-icons is-vcentered"
763
- id="base-sizing1600"
764
- title="theme: base; category: sizing; variant: 1600; ">
765
- sizing1600
766
- <a href="#base-sizing1600"
767
- title="permalink"
768
- class="permalink">
769
- 🔗
770
- </a>
771
- </td>
772
- <td class="is-vcentered">
773
- <pre>128px</pre>
774
- </td>
775
- <td class="is-vcentered">
776
- <div class="table__sizing-preview"
777
- style="width: 128px; height: 128px">
778
- </div>
779
-
780
- </td>
781
- </tr>
782
- <tr>
783
- <td class="with-icons is-vcentered"
784
- id="base-sizing025"
785
- title="theme: base; category: sizing; variant: 025; ">
786
- sizing025
787
- <a href="#base-sizing025"
788
- title="permalink"
789
- class="permalink">
790
- 🔗
791
- </a>
792
- </td>
793
- <td class="is-vcentered">
794
- <pre>2px</pre>
795
- </td>
796
- <td class="is-vcentered">
797
- <div class="table__sizing-preview"
798
- style="width: 2px; height: 2px">
799
- </div>
800
-
801
- </td>
802
- </tr>
803
- <tr>
804
- <td class="with-icons is-vcentered"
805
- id="base-sizing050"
806
- title="theme: base; category: sizing; variant: 050; ">
807
- sizing050
808
- <a href="#base-sizing050"
809
- title="permalink"
810
- class="permalink">
811
- 🔗
812
- </a>
813
- </td>
814
- <td class="is-vcentered">
815
- <pre>4px</pre>
816
- </td>
817
- <td class="is-vcentered">
818
- <div class="table__sizing-preview"
819
- style="width: 4px; height: 4px">
820
- </div>
821
-
822
- </td>
823
- </tr>
824
- <tr>
825
- <td class="with-icons is-vcentered"
826
- id="base-sizing075"
827
- title="theme: base; category: sizing; variant: 075; ">
828
- sizing075
829
- <a href="#base-sizing075"
830
- title="permalink"
831
- class="permalink">
832
- 🔗
833
- </a>
834
- </td>
835
- <td class="is-vcentered">
836
- <pre>6px</pre>
837
- </td>
838
- <td class="is-vcentered">
839
- <div class="table__sizing-preview"
840
- style="width: 6px; height: 6px">
841
- </div>
842
-
843
- </td>
844
- </tr>
845
- <tr>
846
- <td class="with-icons is-vcentered"
847
- id="base-sizingLogowidth"
848
- title="theme: base; category: sizing; variant: logowidth; ">
849
- sizingLogowidth
850
- <a href="#base-sizingLogowidth"
851
- title="permalink"
852
- class="permalink">
853
- 🔗
854
- </a>
855
- </td>
856
- <td class="is-vcentered">
857
- <pre>40px</pre>
858
- </td>
859
- <td class="is-vcentered">
860
- <div class="table__sizing-preview"
861
- style="width: 40px; height: 40px">
862
- </div>
863
-
864
- </td>
865
- </tr>
866
- <tr>
867
- <td class="with-icons is-vcentered"
868
- id="base-sizing010"
869
- title="theme: base; category: sizing; variant: 010; ">
870
- sizing010
871
- <a href="#base-sizing010"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>1px</pre>
879
- </td>
880
- <td class="is-vcentered">
881
- <div class="table__sizing-preview"
882
- style="width: 1px; height: 1px">
883
- </div>
884
-
885
- </td>
886
- </tr>
887
- </table>
888
- </section>
889
- </main>
890
- </div>
891
-
892
-
893
- </div>
894
-
895
- <script>
896
- const searchParams = new URLSearchParams(window.location.search);
897
- const embedded = !!searchParams.get('embedded');
898
- if(embedded) {
899
- document.body.classList.add('embedded')
900
- }
901
- </script>
902
- </body>
903
- </html>