@sage/design-tokens 2.2.0 → 2.3.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 (38) hide show
  1. package/android/base.xml +385 -0
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +387 -0
  4. package/data/tokens.json +1450 -257
  5. package/docs/tokens/{no-theme → base}/border-radius/index.html +25 -20
  6. package/docs/tokens/{no-theme → base}/border-width/index.html +35 -30
  7. package/docs/tokens/base/box-shadow/index.html +451 -0
  8. package/docs/tokens/base/colors/index.html +4063 -0
  9. package/docs/tokens/{no-theme → base}/font-families/index.html +33 -28
  10. package/docs/tokens/{no-theme → base}/font-sizes/index.html +65 -60
  11. package/docs/tokens/{no-theme → base}/font-weights/index.html +29 -24
  12. package/docs/tokens/base/index.html +8353 -0
  13. package/docs/tokens/{no-theme → base}/line-heights/index.html +47 -21
  14. package/docs/tokens/{no-theme/box-shadow → base/opacity}/index.html +42 -58
  15. package/docs/tokens/{no-theme → base}/sizing/index.html +167 -78
  16. package/docs/tokens/{no-theme → base}/spacing/index.html +71 -66
  17. package/docs/tokens/base/typography/index.html +2698 -0
  18. package/docs/tokens/index.html +4318 -1771
  19. package/index.d.ts +2 -2
  20. package/index.js +2 -2
  21. package/ios/base.h +389 -0
  22. package/js/{no-theme → base}/common.d.ts +136 -16
  23. package/js/base/common.js +387 -0
  24. package/js/{no-theme → base}/es6.d.ts +136 -16
  25. package/js/base/es6.js +382 -0
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.3.0.tgz +0 -0
  28. package/scss/base.scss +384 -0
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/no-theme/colors/index.html +0 -2903
  32. package/docs/tokens/no-theme/index.html +0 -5811
  33. package/docs/tokens/no-theme/typography/index.html +0 -1559
  34. package/ios/no-theme.h +0 -269
  35. package/js/no-theme/common.js +0 -267
  36. package/js/no-theme/es6.js +0 -262
  37. package/sage-design-tokens-2.2.0.tgz +0 -0
  38. package/scss/no-theme.scss +0 -264
package/docs/tokens/base/colors/index.html ADDED
@@ -0,0 +1,4063 @@
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 / colors</title>
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,500,600" rel="stylesheet">
14
+ <meta name="description" content="">
15
+ <style>
16
+ *, *::before, *::after {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ html {
21
+ font-size: 62.5%;
22
+ }
23
+
24
+ body {
25
+ font-size: 1.4rem;
26
+ font-family: 'Lato', Arial, sans-serif;
27
+ padding: 20px 40px;
28
+ }
29
+
30
+ table {
31
+ width: 100%;
32
+ }
33
+
34
+ .menu {
35
+ position: sticky;
36
+ display: inline-block;
37
+ vertical-align: top;
38
+ max-height: 100vh;
39
+ overflow-y: auto;
40
+ top: 0;
41
+ bottom: 0;
42
+ font-size: 14px;
43
+ }
44
+
45
+ .with-icons:hover .permalink {
46
+ visibility: visible;
47
+ }
48
+
49
+ .permalink {
50
+ visibility: hidden;
51
+ font-size: 80%;
52
+ line-height: inherit;
53
+ text-decoration: none;
54
+ vertical-align: middle;
55
+ }
56
+
57
+ .table__color-preview,
58
+ .table__spacing-preview,
59
+ .table__border-width-preview,
60
+ .table__font-size-preview,
61
+ .table__sizing-preview,
62
+ .table__opacity-preview,
63
+ .table__typography-preview,
64
+ .table__font-weight-preview,
65
+ .table__box-shadow-preview,
66
+ .table__font-family-preview,
67
+ .table__border-radius-preview {
68
+ height: 40px;
69
+ width: 100%;
70
+ }
71
+
72
+ .table__font-size-preview,
73
+ .table__typography-preview,
74
+ .table__font-weight-preview,
75
+ .table__font-family-preview {
76
+ vertical-align: middle;
77
+ display: table-cell;
78
+ }
79
+
80
+ .table__box-shadow-preview {
81
+ height: 50px;
82
+ }
83
+
84
+ .table__spacing-preview {
85
+ background-color: #626566;
86
+ height: 10px;
87
+ }
88
+
89
+ .table__border-width-preview {
90
+ border-style: solid;
91
+ border-color: #CCD6DB;
92
+ background-color: #626566;
93
+ }
94
+
95
+ .table__sizing-preview {
96
+ background-color: #626566;
97
+ }
98
+
99
+ .table__opacity-preview {
100
+ background-color: #ccc;
101
+ }
102
+
103
+ .table__opacity-preview div {
104
+ width: 100%;
105
+ height: 100%;
106
+ background-color: #fff;
107
+ }
108
+
109
+ .table__border-radius-preview {
110
+ width: 40px;
111
+ border-color: #626566;
112
+ border-width: 3px 3px 0 0;
113
+ border-style: solid;
114
+ }
115
+
116
+ #main-container {
117
+ max-width: 1024px;
118
+ margin: 0 auto;
119
+ }
120
+
121
+ .embedded #main-container {
122
+ max-width: 100%;
123
+ }
124
+
125
+ #icons-container {
126
+ display: grid;
127
+ grid-template-columns: repeat(6, 1fr);
128
+ grid-gap: 20px;
129
+ }
130
+
131
+ .divider {
132
+ margin: 20px 0 30px;
133
+ }
134
+
135
+ .grid-item {
136
+ display: block;
137
+ text-align: center;
138
+ position: relative;
139
+ padding-bottom: 40px;
140
+ padding-top: 20px;
141
+ border: 1px solid #dbdbdb;
142
+ }
143
+
144
+ .grid-item .codes {
145
+ position: absolute;
146
+ display: flex;
147
+ justify-content: space-between;
148
+ padding: 5px 20px;
149
+ bottom: 0;
150
+ left: 0;
151
+ right: 0;
152
+ border-top: 1px solid rgba(10, 10, 10, .1);
153
+ }
154
+
155
+ .grid-item .codes div {
156
+ cursor: default;
157
+ color: rgba(10, 10, 10, .6);
158
+ }
159
+
160
+ .preview {
161
+ display: block;
162
+ width: 32px;
163
+ height: auto;
164
+ }
165
+
166
+ .layout {
167
+ display: flex;
168
+ }
169
+
170
+ .layout .navigation {
171
+ flex: 0 0 200px;
172
+ }
173
+
174
+ .layout .content {
175
+ flex: 1 1 auto;
176
+ }
177
+
178
+ .embedded {
179
+ padding: 10px;
180
+ }
181
+
182
+ .embedded .hide-on-embedded {
183
+ display: none;
184
+ }
185
+ </style>
186
+ </head>
187
+ <body>
188
+ <div id="main-container">
189
+ <div class="layout">
190
+ <aside class="hide-on-embedded navigation menu py-0">
191
+ <section class="my-6">
192
+ <p class="menu-label">
193
+ <a href="../../base/index.html">
194
+ base
195
+ </a>
196
+ </p>
197
+ <ul class="menu-list">
198
+ <li>
199
+ <a href="../../base/colors/index.html">
200
+ colors
201
+ </a>
202
+ </li>
203
+ <li>
204
+ <a href="../../base/sizing/index.html">
205
+ sizing
206
+ </a>
207
+ </li>
208
+ <li>
209
+ <a href="../../base/spacing/index.html">
210
+ spacing
211
+ </a>
212
+ </li>
213
+ <li>
214
+ <a href="../../base/border-width/index.html">
215
+ borderWidth
216
+ </a>
217
+ </li>
218
+ <li>
219
+ <a href="../../base/font-sizes/index.html">
220
+ fontSizes
221
+ </a>
222
+ </li>
223
+ <li>
224
+ <a href="../../base/box-shadow/index.html">
225
+ boxShadow
226
+ </a>
227
+ </li>
228
+ <li>
229
+ <a href="../../base/font-weights/index.html">
230
+ fontWeights
231
+ </a>
232
+ </li>
233
+ <li>
234
+ <a href="../../base/line-heights/index.html">
235
+ lineHeights
236
+ </a>
237
+ </li>
238
+ <li>
239
+ <a href="../../base/font-families/index.html">
240
+ fontFamilies
241
+ </a>
242
+ </li>
243
+ <li>
244
+ <a href="../../base/border-radius/index.html">
245
+ borderRadius
246
+ </a>
247
+ </li>
248
+ <li>
249
+ <a href="../../base/typography/index.html">
250
+ typography
251
+ </a>
252
+ </li>
253
+ <li>
254
+ <a href="../../base/opacity/index.html">
255
+ opacity
256
+ </a>
257
+ </li>
258
+ </ul>
259
+ </section>
260
+ </aside>
261
+ <main class="content">
262
+ <h1 class="hide-on-embedded">
263
+ <a href="../../index.html">
264
+ Sage Design Tokens
265
+ </a>
266
+ /
267
+ <a href="../index.html">
268
+ base
269
+ </a>
270
+ /
271
+ colors
272
+ </h1>
273
+
274
+ <section class="my-6">
275
+ <table class="table is-bordered is-hoverable is-fullwidth">
276
+ <colgroup>
277
+ <col width="50%">
278
+ <col width="25%">
279
+ <col width="35%">
280
+ </colgroup>
281
+ <thead>
282
+ <tr>
283
+ <th class="has-background-light">Name</th>
284
+ <th class="has-background-light">Value</th>
285
+ <th class="has-background-light">Preview</th>
286
+ </tr>
287
+ </thead>
288
+ <tr>
289
+ <td class="with-icons is-vcentered"
290
+ id="base-colorsLogo"
291
+ title="theme: base; category: colors; variant: logo; ">
292
+ colorsLogo
293
+ <a href="#base-colorsLogo"
294
+ title="permalink"
295
+ class="permalink">
296
+ 🔗
297
+ </a>
298
+ </td>
299
+ <td class="is-vcentered">
300
+ <pre>#00d639ff</pre>
301
+ </td>
302
+ <td class="is-vcentered">
303
+ <div class="table__color-preview"
304
+ style="background-color: #00d639ff;">
305
+ </div>
306
+
307
+ </td>
308
+ </tr>
309
+ <tr>
310
+ <td class="with-icons is-vcentered"
311
+ id="base-colorsTransparent"
312
+ title="theme: base; category: colors; variant: transparent; ">
313
+ colorsTransparent
314
+ <a href="#base-colorsTransparent"
315
+ title="permalink"
316
+ class="permalink">
317
+ 🔗
318
+ </a>
319
+ </td>
320
+ <td class="is-vcentered">
321
+ <pre>#00000000</pre>
322
+ </td>
323
+ <td class="is-vcentered">
324
+ <div class="table__color-preview"
325
+ style="background-color: #00000000;">
326
+ </div>
327
+
328
+ </td>
329
+ </tr>
330
+ <tr>
331
+ <td class="with-icons is-vcentered"
332
+ id="base-colorsYin030"
333
+ title="theme: base; category: colors; name: yin; variant: 030; ">
334
+ colorsYin030
335
+ <a href="#base-colorsYin030"
336
+ title="permalink"
337
+ class="permalink">
338
+ 🔗
339
+ </a>
340
+ </td>
341
+ <td class="is-vcentered">
342
+ <pre>#0000004d</pre>
343
+ </td>
344
+ <td class="is-vcentered">
345
+ <div class="table__color-preview"
346
+ style="background-color: #0000004d;">
347
+ </div>
348
+
349
+ </td>
350
+ </tr>
351
+ <tr>
352
+ <td class="with-icons is-vcentered"
353
+ id="base-colorsYin055"
354
+ title="theme: base; category: colors; name: yin; variant: 055; ">
355
+ colorsYin055
356
+ <a href="#base-colorsYin055"
357
+ title="permalink"
358
+ class="permalink">
359
+ 🔗
360
+ </a>
361
+ </td>
362
+ <td class="is-vcentered">
363
+ <pre>#0000008c</pre>
364
+ </td>
365
+ <td class="is-vcentered">
366
+ <div class="table__color-preview"
367
+ style="background-color: #0000008c;">
368
+ </div>
369
+
370
+ </td>
371
+ </tr>
372
+ <tr>
373
+ <td class="with-icons is-vcentered"
374
+ id="base-colorsYin065"
375
+ title="theme: base; category: colors; name: yin; variant: 065; ">
376
+ colorsYin065
377
+ <a href="#base-colorsYin065"
378
+ title="permalink"
379
+ class="permalink">
380
+ 🔗
381
+ </a>
382
+ </td>
383
+ <td class="is-vcentered">
384
+ <pre>#000000a6</pre>
385
+ </td>
386
+ <td class="is-vcentered">
387
+ <div class="table__color-preview"
388
+ style="background-color: #000000a6;">
389
+ </div>
390
+
391
+ </td>
392
+ </tr>
393
+ <tr>
394
+ <td class="with-icons is-vcentered"
395
+ id="base-colorsYin075"
396
+ title="theme: base; category: colors; name: yin; variant: 075; ">
397
+ colorsYin075
398
+ <a href="#base-colorsYin075"
399
+ title="permalink"
400
+ class="permalink">
401
+ 🔗
402
+ </a>
403
+ </td>
404
+ <td class="is-vcentered">
405
+ <pre>#000000bf</pre>
406
+ </td>
407
+ <td class="is-vcentered">
408
+ <div class="table__color-preview"
409
+ style="background-color: #000000bf;">
410
+ </div>
411
+
412
+ </td>
413
+ </tr>
414
+ <tr>
415
+ <td class="with-icons is-vcentered"
416
+ id="base-colorsYin090"
417
+ title="theme: base; category: colors; name: yin; variant: 090; ">
418
+ colorsYin090
419
+ <a href="#base-colorsYin090"
420
+ title="permalink"
421
+ class="permalink">
422
+ 🔗
423
+ </a>
424
+ </td>
425
+ <td class="is-vcentered">
426
+ <pre>#000000e6</pre>
427
+ </td>
428
+ <td class="is-vcentered">
429
+ <div class="table__color-preview"
430
+ style="background-color: #000000e6;">
431
+ </div>
432
+
433
+ </td>
434
+ </tr>
435
+ <tr>
436
+ <td class="with-icons is-vcentered"
437
+ id="base-colorsYang100"
438
+ title="theme: base; category: colors; name: yang; variant: 100; ">
439
+ colorsYang100
440
+ <a href="#base-colorsYang100"
441
+ title="permalink"
442
+ class="permalink">
443
+ 🔗
444
+ </a>
445
+ </td>
446
+ <td class="is-vcentered">
447
+ <pre>#ffffffff</pre>
448
+ </td>
449
+ <td class="is-vcentered">
450
+ <div class="table__color-preview"
451
+ style="background-color: #ffffffff;">
452
+ </div>
453
+
454
+ </td>
455
+ </tr>
456
+ <tr>
457
+ <td class="with-icons is-vcentered"
458
+ id="base-colorsYang030"
459
+ title="theme: base; category: colors; name: yang; variant: 030; ">
460
+ colorsYang030
461
+ <a href="#base-colorsYang030"
462
+ title="permalink"
463
+ class="permalink">
464
+ 🔗
465
+ </a>
466
+ </td>
467
+ <td class="is-vcentered">
468
+ <pre>#ffffff4d</pre>
469
+ </td>
470
+ <td class="is-vcentered">
471
+ <div class="table__color-preview"
472
+ style="background-color: #ffffff4d;">
473
+ </div>
474
+
475
+ </td>
476
+ </tr>
477
+ <tr>
478
+ <td class="with-icons is-vcentered"
479
+ id="base-colorsYang080"
480
+ title="theme: base; category: colors; name: yang; variant: 080; ">
481
+ colorsYang080
482
+ <a href="#base-colorsYang080"
483
+ title="permalink"
484
+ class="permalink">
485
+ 🔗
486
+ </a>
487
+ </td>
488
+ <td class="is-vcentered">
489
+ <pre>#ffffffcc</pre>
490
+ </td>
491
+ <td class="is-vcentered">
492
+ <div class="table__color-preview"
493
+ style="background-color: #ffffffcc;">
494
+ </div>
495
+
496
+ </td>
497
+ </tr>
498
+ <tr>
499
+ <td class="with-icons is-vcentered"
500
+ id="base-colorsGray850"
501
+ title="theme: base; category: colors; name: gray; variant: 850; ">
502
+ colorsGray850
503
+ <a href="#base-colorsGray850"
504
+ title="permalink"
505
+ class="permalink">
506
+ 🔗
507
+ </a>
508
+ </td>
509
+ <td class="is-vcentered">
510
+ <pre>#262626ff</pre>
511
+ </td>
512
+ <td class="is-vcentered">
513
+ <div class="table__color-preview"
514
+ style="background-color: #262626ff;">
515
+ </div>
516
+
517
+ </td>
518
+ </tr>
519
+ <tr>
520
+ <td class="with-icons is-vcentered"
521
+ id="base-colorsGray900"
522
+ title="theme: base; category: colors; name: gray; variant: 900; ">
523
+ colorsGray900
524
+ <a href="#base-colorsGray900"
525
+ title="permalink"
526
+ class="permalink">
527
+ 🔗
528
+ </a>
529
+ </td>
530
+ <td class="is-vcentered">
531
+ <pre>#1a1a1aff</pre>
532
+ </td>
533
+ <td class="is-vcentered">
534
+ <div class="table__color-preview"
535
+ style="background-color: #1a1a1aff;">
536
+ </div>
537
+
538
+ </td>
539
+ </tr>
540
+ <tr>
541
+ <td class="with-icons is-vcentered"
542
+ id="base-colorsGray1000"
543
+ title="theme: base; category: colors; name: gray; variant: 1000; ">
544
+ colorsGray1000
545
+ <a href="#base-colorsGray1000"
546
+ title="permalink"
547
+ class="permalink">
548
+ 🔗
549
+ </a>
550
+ </td>
551
+ <td class="is-vcentered">
552
+ <pre>#000000ff</pre>
553
+ </td>
554
+ <td class="is-vcentered">
555
+ <div class="table__color-preview"
556
+ style="background-color: #000000ff;">
557
+ </div>
558
+
559
+ </td>
560
+ </tr>
561
+ <tr>
562
+ <td class="with-icons is-vcentered"
563
+ id="base-colorsGray000"
564
+ title="theme: base; category: colors; name: gray; variant: 000; ">
565
+ colorsGray000
566
+ <a href="#base-colorsGray000"
567
+ title="permalink"
568
+ class="permalink">
569
+ 🔗
570
+ </a>
571
+ </td>
572
+ <td class="is-vcentered">
573
+ <pre>#ffffffff</pre>
574
+ </td>
575
+ <td class="is-vcentered">
576
+ <div class="table__color-preview"
577
+ style="background-color: #ffffffff;">
578
+ </div>
579
+
580
+ </td>
581
+ </tr>
582
+ <tr>
583
+ <td class="with-icons is-vcentered"
584
+ id="base-colorsDisabled400"
585
+ title="theme: base; category: colors; name: disabled; variant: 400; ">
586
+ colorsDisabled400
587
+ <a href="#base-colorsDisabled400"
588
+ title="permalink"
589
+ class="permalink">
590
+ 🔗
591
+ </a>
592
+ </td>
593
+ <td class="is-vcentered">
594
+ <pre>#f2f5f6ff</pre>
595
+ </td>
596
+ <td class="is-vcentered">
597
+ <div class="table__color-preview"
598
+ style="background-color: #f2f5f6ff;">
599
+ </div>
600
+
601
+ </td>
602
+ </tr>
603
+ <tr>
604
+ <td class="with-icons is-vcentered"
605
+ id="base-colorsDisabled500"
606
+ title="theme: base; category: colors; name: disabled; variant: 500; ">
607
+ colorsDisabled500
608
+ <a href="#base-colorsDisabled500"
609
+ title="permalink"
610
+ class="permalink">
611
+ 🔗
612
+ </a>
613
+ </td>
614
+ <td class="is-vcentered">
615
+ <pre>#e6ebedff</pre>
616
+ </td>
617
+ <td class="is-vcentered">
618
+ <div class="table__color-preview"
619
+ style="background-color: #e6ebedff;">
620
+ </div>
621
+
622
+ </td>
623
+ </tr>
624
+ <tr>
625
+ <td class="with-icons is-vcentered"
626
+ id="base-colorsDisabled600"
627
+ title="theme: base; category: colors; name: disabled; variant: 600; ">
628
+ colorsDisabled600
629
+ <a href="#base-colorsDisabled600"
630
+ title="permalink"
631
+ class="permalink">
632
+ 🔗
633
+ </a>
634
+ </td>
635
+ <td class="is-vcentered">
636
+ <pre>#ccd6dbff</pre>
637
+ </td>
638
+ <td class="is-vcentered">
639
+ <div class="table__color-preview"
640
+ style="background-color: #ccd6dbff;">
641
+ </div>
642
+
643
+ </td>
644
+ </tr>
645
+ <tr>
646
+ <td class="with-icons is-vcentered"
647
+ id="base-colorsReadOnly400"
648
+ title="theme: base; category: colors; name: readOnly; variant: 400; ">
649
+ colorsReadOnly400
650
+ <a href="#base-colorsReadOnly400"
651
+ title="permalink"
652
+ class="permalink">
653
+ 🔗
654
+ </a>
655
+ </td>
656
+ <td class="is-vcentered">
657
+ <pre>#f2f5f6ff</pre>
658
+ </td>
659
+ <td class="is-vcentered">
660
+ <div class="table__color-preview"
661
+ style="background-color: #f2f5f6ff;">
662
+ </div>
663
+
664
+ </td>
665
+ </tr>
666
+ <tr>
667
+ <td class="with-icons is-vcentered"
668
+ id="base-colorsReadOnly500"
669
+ title="theme: base; category: colors; name: readOnly; variant: 500; ">
670
+ colorsReadOnly500
671
+ <a href="#base-colorsReadOnly500"
672
+ title="permalink"
673
+ class="permalink">
674
+ 🔗
675
+ </a>
676
+ </td>
677
+ <td class="is-vcentered">
678
+ <pre>#e6ebedff</pre>
679
+ </td>
680
+ <td class="is-vcentered">
681
+ <div class="table__color-preview"
682
+ style="background-color: #e6ebedff;">
683
+ </div>
684
+
685
+ </td>
686
+ </tr>
687
+ <tr>
688
+ <td class="with-icons is-vcentered"
689
+ id="base-colorsReadOnly600"
690
+ title="theme: base; category: colors; name: readOnly; variant: 600; ">
691
+ colorsReadOnly600
692
+ <a href="#base-colorsReadOnly600"
693
+ title="permalink"
694
+ class="permalink">
695
+ 🔗
696
+ </a>
697
+ </td>
698
+ <td class="is-vcentered">
699
+ <pre>#ccd6dbff</pre>
700
+ </td>
701
+ <td class="is-vcentered">
702
+ <div class="table__color-preview"
703
+ style="background-color: #ccd6dbff;">
704
+ </div>
705
+
706
+ </td>
707
+ </tr>
708
+ <tr>
709
+ <td class="with-icons is-vcentered"
710
+ id="base-colorsComponentsMenuSpringStandard500"
711
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: standard; variant: 500; ">
712
+ colorsComponentsMenuSpringStandard500
713
+ <a href="#base-colorsComponentsMenuSpringStandard500"
714
+ title="permalink"
715
+ class="permalink">
716
+ 🔗
717
+ </a>
718
+ </td>
719
+ <td class="is-vcentered">
720
+ <pre>#e6ebedff</pre>
721
+ </td>
722
+ <td class="is-vcentered">
723
+ <div class="table__color-preview"
724
+ style="background-color: #e6ebedff;">
725
+ </div>
726
+
727
+ </td>
728
+ </tr>
729
+ <tr>
730
+ <td class="with-icons is-vcentered"
731
+ id="base-colorsComponentsMenuSpringStandard600"
732
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: standard; variant: 600; ">
733
+ colorsComponentsMenuSpringStandard600
734
+ <a href="#base-colorsComponentsMenuSpringStandard600"
735
+ title="permalink"
736
+ class="permalink">
737
+ 🔗
738
+ </a>
739
+ </td>
740
+ <td class="is-vcentered">
741
+ <pre>#007e45ff</pre>
742
+ </td>
743
+ <td class="is-vcentered">
744
+ <div class="table__color-preview"
745
+ style="background-color: #007e45ff;">
746
+ </div>
747
+
748
+ </td>
749
+ </tr>
750
+ <tr>
751
+ <td class="with-icons is-vcentered"
752
+ id="base-colorsComponentsMenuSpringStandard700"
753
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: standard; variant: 700; ">
754
+ colorsComponentsMenuSpringStandard700
755
+ <a href="#base-colorsComponentsMenuSpringStandard700"
756
+ title="permalink"
757
+ class="permalink">
758
+ 🔗
759
+ </a>
760
+ </td>
761
+ <td class="is-vcentered">
762
+ <pre>#d9e0e4ff</pre>
763
+ </td>
764
+ <td class="is-vcentered">
765
+ <div class="table__color-preview"
766
+ style="background-color: #d9e0e4ff;">
767
+ </div>
768
+
769
+ </td>
770
+ </tr>
771
+ <tr>
772
+ <td class="with-icons is-vcentered"
773
+ id="base-colorsComponentsMenuSpringParent500"
774
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: parent; variant: 500; ">
775
+ colorsComponentsMenuSpringParent500
776
+ <a href="#base-colorsComponentsMenuSpringParent500"
777
+ title="permalink"
778
+ class="permalink">
779
+ 🔗
780
+ </a>
781
+ </td>
782
+ <td class="is-vcentered">
783
+ <pre>#e6ebedff</pre>
784
+ </td>
785
+ <td class="is-vcentered">
786
+ <div class="table__color-preview"
787
+ style="background-color: #e6ebedff;">
788
+ </div>
789
+
790
+ </td>
791
+ </tr>
792
+ <tr>
793
+ <td class="with-icons is-vcentered"
794
+ id="base-colorsComponentsMenuSpringParent600"
795
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: parent; variant: 600; ">
796
+ colorsComponentsMenuSpringParent600
797
+ <a href="#base-colorsComponentsMenuSpringParent600"
798
+ title="permalink"
799
+ class="permalink">
800
+ 🔗
801
+ </a>
802
+ </td>
803
+ <td class="is-vcentered">
804
+ <pre>#ffffffff</pre>
805
+ </td>
806
+ <td class="is-vcentered">
807
+ <div class="table__color-preview"
808
+ style="background-color: #ffffffff;">
809
+ </div>
810
+
811
+ </td>
812
+ </tr>
813
+ <tr>
814
+ <td class="with-icons is-vcentered"
815
+ id="base-colorsComponentsMenuSpringParent700"
816
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: parent; variant: 700; ">
817
+ colorsComponentsMenuSpringParent700
818
+ <a href="#base-colorsComponentsMenuSpringParent700"
819
+ title="permalink"
820
+ class="permalink">
821
+ 🔗
822
+ </a>
823
+ </td>
824
+ <td class="is-vcentered">
825
+ <pre>#d9e0e4ff</pre>
826
+ </td>
827
+ <td class="is-vcentered">
828
+ <div class="table__color-preview"
829
+ style="background-color: #d9e0e4ff;">
830
+ </div>
831
+
832
+ </td>
833
+ </tr>
834
+ <tr>
835
+ <td class="with-icons is-vcentered"
836
+ id="base-colorsComponentsMenuSpringChild400"
837
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: child; variant: 400; ">
838
+ colorsComponentsMenuSpringChild400
839
+ <a href="#base-colorsComponentsMenuSpringChild400"
840
+ title="permalink"
841
+ class="permalink">
842
+ 🔗
843
+ </a>
844
+ </td>
845
+ <td class="is-vcentered">
846
+ <pre>#ccd6dbff</pre>
847
+ </td>
848
+ <td class="is-vcentered">
849
+ <div class="table__color-preview"
850
+ style="background-color: #ccd6dbff;">
851
+ </div>
852
+
853
+ </td>
854
+ </tr>
855
+ <tr>
856
+ <td class="with-icons is-vcentered"
857
+ id="base-colorsComponentsMenuSpringChild500"
858
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: child; variant: 500; ">
859
+ colorsComponentsMenuSpringChild500
860
+ <a href="#base-colorsComponentsMenuSpringChild500"
861
+ title="permalink"
862
+ class="permalink">
863
+ 🔗
864
+ </a>
865
+ </td>
866
+ <td class="is-vcentered">
867
+ <pre>#ffffffff</pre>
868
+ </td>
869
+ <td class="is-vcentered">
870
+ <div class="table__color-preview"
871
+ style="background-color: #ffffffff;">
872
+ </div>
873
+
874
+ </td>
875
+ </tr>
876
+ <tr>
877
+ <td class="with-icons is-vcentered"
878
+ id="base-colorsComponentsMenuSpringChild600"
879
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: child; variant: 600; ">
880
+ colorsComponentsMenuSpringChild600
881
+ <a href="#base-colorsComponentsMenuSpringChild600"
882
+ title="permalink"
883
+ class="permalink">
884
+ 🔗
885
+ </a>
886
+ </td>
887
+ <td class="is-vcentered">
888
+ <pre>#007e45ff</pre>
889
+ </td>
890
+ <td class="is-vcentered">
891
+ <div class="table__color-preview"
892
+ style="background-color: #007e45ff;">
893
+ </div>
894
+
895
+ </td>
896
+ </tr>
897
+ <tr>
898
+ <td class="with-icons is-vcentered"
899
+ id="base-colorsComponentsMenuSpringChildAlt500"
900
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 500; ">
901
+ colorsComponentsMenuSpringChildAlt500
902
+ <a href="#base-colorsComponentsMenuSpringChildAlt500"
903
+ title="permalink"
904
+ class="permalink">
905
+ 🔗
906
+ </a>
907
+ </td>
908
+ <td class="is-vcentered">
909
+ <pre>#e6ebedff</pre>
910
+ </td>
911
+ <td class="is-vcentered">
912
+ <div class="table__color-preview"
913
+ style="background-color: #e6ebedff;">
914
+ </div>
915
+
916
+ </td>
917
+ </tr>
918
+ <tr>
919
+ <td class="with-icons is-vcentered"
920
+ id="base-colorsComponentsMenuSpringChildAlt600"
921
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 600; ">
922
+ colorsComponentsMenuSpringChildAlt600
923
+ <a href="#base-colorsComponentsMenuSpringChildAlt600"
924
+ title="permalink"
925
+ class="permalink">
926
+ 🔗
927
+ </a>
928
+ </td>
929
+ <td class="is-vcentered">
930
+ <pre>#007e45ff</pre>
931
+ </td>
932
+ <td class="is-vcentered">
933
+ <div class="table__color-preview"
934
+ style="background-color: #007e45ff;">
935
+ </div>
936
+
937
+ </td>
938
+ </tr>
939
+ <tr>
940
+ <td class="with-icons is-vcentered"
941
+ id="base-colorsComponentsMenuSummerStandard500"
942
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 500; ">
943
+ colorsComponentsMenuSummerStandard500
944
+ <a href="#base-colorsComponentsMenuSummerStandard500"
945
+ title="permalink"
946
+ class="permalink">
947
+ 🔗
948
+ </a>
949
+ </td>
950
+ <td class="is-vcentered">
951
+ <pre>#ffffffff</pre>
952
+ </td>
953
+ <td class="is-vcentered">
954
+ <div class="table__color-preview"
955
+ style="background-color: #ffffffff;">
956
+ </div>
957
+
958
+ </td>
959
+ </tr>
960
+ <tr>
961
+ <td class="with-icons is-vcentered"
962
+ id="base-colorsComponentsMenuSummerStandard600"
963
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 600; ">
964
+ colorsComponentsMenuSummerStandard600
965
+ <a href="#base-colorsComponentsMenuSummerStandard600"
966
+ title="permalink"
967
+ class="permalink">
968
+ 🔗
969
+ </a>
970
+ </td>
971
+ <td class="is-vcentered">
972
+ <pre>#007e45ff</pre>
973
+ </td>
974
+ <td class="is-vcentered">
975
+ <div class="table__color-preview"
976
+ style="background-color: #007e45ff;">
977
+ </div>
978
+
979
+ </td>
980
+ </tr>
981
+ <tr>
982
+ <td class="with-icons is-vcentered"
983
+ id="base-colorsComponentsMenuSummerStandard700"
984
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 700; ">
985
+ colorsComponentsMenuSummerStandard700
986
+ <a href="#base-colorsComponentsMenuSummerStandard700"
987
+ title="permalink"
988
+ class="permalink">
989
+ 🔗
990
+ </a>
991
+ </td>
992
+ <td class="is-vcentered">
993
+ <pre>#f2f5f6ff</pre>
994
+ </td>
995
+ <td class="is-vcentered">
996
+ <div class="table__color-preview"
997
+ style="background-color: #f2f5f6ff;">
998
+ </div>
999
+
1000
+ </td>
1001
+ </tr>
1002
+ <tr>
1003
+ <td class="with-icons is-vcentered"
1004
+ id="base-colorsComponentsMenuSummerParent500"
1005
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: parent; variant: 500; ">
1006
+ colorsComponentsMenuSummerParent500
1007
+ <a href="#base-colorsComponentsMenuSummerParent500"
1008
+ title="permalink"
1009
+ class="permalink">
1010
+ 🔗
1011
+ </a>
1012
+ </td>
1013
+ <td class="is-vcentered">
1014
+ <pre>#ffffffff</pre>
1015
+ </td>
1016
+ <td class="is-vcentered">
1017
+ <div class="table__color-preview"
1018
+ style="background-color: #ffffffff;">
1019
+ </div>
1020
+
1021
+ </td>
1022
+ </tr>
1023
+ <tr>
1024
+ <td class="with-icons is-vcentered"
1025
+ id="base-colorsComponentsMenuSummerParent600"
1026
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: parent; variant: 600; ">
1027
+ colorsComponentsMenuSummerParent600
1028
+ <a href="#base-colorsComponentsMenuSummerParent600"
1029
+ title="permalink"
1030
+ class="permalink">
1031
+ 🔗
1032
+ </a>
1033
+ </td>
1034
+ <td class="is-vcentered">
1035
+ <pre>#e6ebedff</pre>
1036
+ </td>
1037
+ <td class="is-vcentered">
1038
+ <div class="table__color-preview"
1039
+ style="background-color: #e6ebedff;">
1040
+ </div>
1041
+
1042
+ </td>
1043
+ </tr>
1044
+ <tr>
1045
+ <td class="with-icons is-vcentered"
1046
+ id="base-colorsComponentsMenuSummerParent700"
1047
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: parent; variant: 700; ">
1048
+ colorsComponentsMenuSummerParent700
1049
+ <a href="#base-colorsComponentsMenuSummerParent700"
1050
+ title="permalink"
1051
+ class="permalink">
1052
+ 🔗
1053
+ </a>
1054
+ </td>
1055
+ <td class="is-vcentered">
1056
+ <pre>#f2f5f6ff</pre>
1057
+ </td>
1058
+ <td class="is-vcentered">
1059
+ <div class="table__color-preview"
1060
+ style="background-color: #f2f5f6ff;">
1061
+ </div>
1062
+
1063
+ </td>
1064
+ </tr>
1065
+ <tr>
1066
+ <td class="with-icons is-vcentered"
1067
+ id="base-colorsComponentsMenuSummerChild400"
1068
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 400; ">
1069
+ colorsComponentsMenuSummerChild400
1070
+ <a href="#base-colorsComponentsMenuSummerChild400"
1071
+ title="permalink"
1072
+ class="permalink">
1073
+ 🔗
1074
+ </a>
1075
+ </td>
1076
+ <td class="is-vcentered">
1077
+ <pre>#b3c2c9ff</pre>
1078
+ </td>
1079
+ <td class="is-vcentered">
1080
+ <div class="table__color-preview"
1081
+ style="background-color: #b3c2c9ff;">
1082
+ </div>
1083
+
1084
+ </td>
1085
+ </tr>
1086
+ <tr>
1087
+ <td class="with-icons is-vcentered"
1088
+ id="base-colorsComponentsMenuSummerChild500"
1089
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 500; ">
1090
+ colorsComponentsMenuSummerChild500
1091
+ <a href="#base-colorsComponentsMenuSummerChild500"
1092
+ title="permalink"
1093
+ class="permalink">
1094
+ 🔗
1095
+ </a>
1096
+ </td>
1097
+ <td class="is-vcentered">
1098
+ <pre>#e6ebedff</pre>
1099
+ </td>
1100
+ <td class="is-vcentered">
1101
+ <div class="table__color-preview"
1102
+ style="background-color: #e6ebedff;">
1103
+ </div>
1104
+
1105
+ </td>
1106
+ </tr>
1107
+ <tr>
1108
+ <td class="with-icons is-vcentered"
1109
+ id="base-colorsComponentsMenuSummerChild600"
1110
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 600; ">
1111
+ colorsComponentsMenuSummerChild600
1112
+ <a href="#base-colorsComponentsMenuSummerChild600"
1113
+ title="permalink"
1114
+ class="permalink">
1115
+ 🔗
1116
+ </a>
1117
+ </td>
1118
+ <td class="is-vcentered">
1119
+ <pre>#007e45ff</pre>
1120
+ </td>
1121
+ <td class="is-vcentered">
1122
+ <div class="table__color-preview"
1123
+ style="background-color: #007e45ff;">
1124
+ </div>
1125
+
1126
+ </td>
1127
+ </tr>
1128
+ <tr>
1129
+ <td class="with-icons is-vcentered"
1130
+ id="base-colorsComponentsMenuSummerChildAlt500"
1131
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 500; ">
1132
+ colorsComponentsMenuSummerChildAlt500
1133
+ <a href="#base-colorsComponentsMenuSummerChildAlt500"
1134
+ title="permalink"
1135
+ class="permalink">
1136
+ 🔗
1137
+ </a>
1138
+ </td>
1139
+ <td class="is-vcentered">
1140
+ <pre>#ccd6dbff</pre>
1141
+ </td>
1142
+ <td class="is-vcentered">
1143
+ <div class="table__color-preview"
1144
+ style="background-color: #ccd6dbff;">
1145
+ </div>
1146
+
1147
+ </td>
1148
+ </tr>
1149
+ <tr>
1150
+ <td class="with-icons is-vcentered"
1151
+ id="base-colorsComponentsMenuSummerChildAlt600"
1152
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 600; ">
1153
+ colorsComponentsMenuSummerChildAlt600
1154
+ <a href="#base-colorsComponentsMenuSummerChildAlt600"
1155
+ title="permalink"
1156
+ class="permalink">
1157
+ 🔗
1158
+ </a>
1159
+ </td>
1160
+ <td class="is-vcentered">
1161
+ <pre>#007e45ff</pre>
1162
+ </td>
1163
+ <td class="is-vcentered">
1164
+ <div class="table__color-preview"
1165
+ style="background-color: #007e45ff;">
1166
+ </div>
1167
+
1168
+ </td>
1169
+ </tr>
1170
+ <tr>
1171
+ <td class="with-icons is-vcentered"
1172
+ id="base-colorsComponentsMenuAutumnStandard500"
1173
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 500; ">
1174
+ colorsComponentsMenuAutumnStandard500
1175
+ <a href="#base-colorsComponentsMenuAutumnStandard500"
1176
+ title="permalink"
1177
+ class="permalink">
1178
+ 🔗
1179
+ </a>
1180
+ </td>
1181
+ <td class="is-vcentered">
1182
+ <pre>#00324cff</pre>
1183
+ </td>
1184
+ <td class="is-vcentered">
1185
+ <div class="table__color-preview"
1186
+ style="background-color: #00324cff;">
1187
+ </div>
1188
+
1189
+ </td>
1190
+ </tr>
1191
+ <tr>
1192
+ <td class="with-icons is-vcentered"
1193
+ id="base-colorsComponentsMenuAutumnStandard600"
1194
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 600; ">
1195
+ colorsComponentsMenuAutumnStandard600
1196
+ <a href="#base-colorsComponentsMenuAutumnStandard600"
1197
+ title="permalink"
1198
+ class="permalink">
1199
+ 🔗
1200
+ </a>
1201
+ </td>
1202
+ <td class="is-vcentered">
1203
+ <pre>#007e45ff</pre>
1204
+ </td>
1205
+ <td class="is-vcentered">
1206
+ <div class="table__color-preview"
1207
+ style="background-color: #007e45ff;">
1208
+ </div>
1209
+
1210
+ </td>
1211
+ </tr>
1212
+ <tr>
1213
+ <td class="with-icons is-vcentered"
1214
+ id="base-colorsComponentsMenuAutumnStandard700"
1215
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: standard; variant: 700; ">
1216
+ colorsComponentsMenuAutumnStandard700
1217
+ <a href="#base-colorsComponentsMenuAutumnStandard700"
1218
+ title="permalink"
1219
+ class="permalink">
1220
+ 🔗
1221
+ </a>
1222
+ </td>
1223
+ <td class="is-vcentered">
1224
+ <pre>#19475eff</pre>
1225
+ </td>
1226
+ <td class="is-vcentered">
1227
+ <div class="table__color-preview"
1228
+ style="background-color: #19475eff;">
1229
+ </div>
1230
+
1231
+ </td>
1232
+ </tr>
1233
+ <tr>
1234
+ <td class="with-icons is-vcentered"
1235
+ id="base-colorsComponentsMenuAutumnParent500"
1236
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 500; ">
1237
+ colorsComponentsMenuAutumnParent500
1238
+ <a href="#base-colorsComponentsMenuAutumnParent500"
1239
+ title="permalink"
1240
+ class="permalink">
1241
+ 🔗
1242
+ </a>
1243
+ </td>
1244
+ <td class="is-vcentered">
1245
+ <pre>#00324cff</pre>
1246
+ </td>
1247
+ <td class="is-vcentered">
1248
+ <div class="table__color-preview"
1249
+ style="background-color: #00324cff;">
1250
+ </div>
1251
+
1252
+ </td>
1253
+ </tr>
1254
+ <tr>
1255
+ <td class="with-icons is-vcentered"
1256
+ id="base-colorsComponentsMenuAutumnParent600"
1257
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 600; ">
1258
+ colorsComponentsMenuAutumnParent600
1259
+ <a href="#base-colorsComponentsMenuAutumnParent600"
1260
+ title="permalink"
1261
+ class="permalink">
1262
+ 🔗
1263
+ </a>
1264
+ </td>
1265
+ <td class="is-vcentered">
1266
+ <pre>#001926ff</pre>
1267
+ </td>
1268
+ <td class="is-vcentered">
1269
+ <div class="table__color-preview"
1270
+ style="background-color: #001926ff;">
1271
+ </div>
1272
+
1273
+ </td>
1274
+ </tr>
1275
+ <tr>
1276
+ <td class="with-icons is-vcentered"
1277
+ id="base-colorsComponentsMenuAutumnParent700"
1278
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: parent; variant: 700; ">
1279
+ colorsComponentsMenuAutumnParent700
1280
+ <a href="#base-colorsComponentsMenuAutumnParent700"
1281
+ title="permalink"
1282
+ class="permalink">
1283
+ 🔗
1284
+ </a>
1285
+ </td>
1286
+ <td class="is-vcentered">
1287
+ <pre>#19475eff</pre>
1288
+ </td>
1289
+ <td class="is-vcentered">
1290
+ <div class="table__color-preview"
1291
+ style="background-color: #19475eff;">
1292
+ </div>
1293
+
1294
+ </td>
1295
+ </tr>
1296
+ <tr>
1297
+ <td class="with-icons is-vcentered"
1298
+ id="base-colorsComponentsMenuAutumnChild400"
1299
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 400; ">
1300
+ colorsComponentsMenuAutumnChild400
1301
+ <a href="#base-colorsComponentsMenuAutumnChild400"
1302
+ title="permalink"
1303
+ class="permalink">
1304
+ 🔗
1305
+ </a>
1306
+ </td>
1307
+ <td class="is-vcentered">
1308
+ <pre>#19475eff</pre>
1309
+ </td>
1310
+ <td class="is-vcentered">
1311
+ <div class="table__color-preview"
1312
+ style="background-color: #19475eff;">
1313
+ </div>
1314
+
1315
+ </td>
1316
+ </tr>
1317
+ <tr>
1318
+ <td class="with-icons is-vcentered"
1319
+ id="base-colorsComponentsMenuAutumnChild500"
1320
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 500; ">
1321
+ colorsComponentsMenuAutumnChild500
1322
+ <a href="#base-colorsComponentsMenuAutumnChild500"
1323
+ title="permalink"
1324
+ class="permalink">
1325
+ 🔗
1326
+ </a>
1327
+ </td>
1328
+ <td class="is-vcentered">
1329
+ <pre>#001926ff</pre>
1330
+ </td>
1331
+ <td class="is-vcentered">
1332
+ <div class="table__color-preview"
1333
+ style="background-color: #001926ff;">
1334
+ </div>
1335
+
1336
+ </td>
1337
+ </tr>
1338
+ <tr>
1339
+ <td class="with-icons is-vcentered"
1340
+ id="base-colorsComponentsMenuAutumnChild600"
1341
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: child; variant: 600; ">
1342
+ colorsComponentsMenuAutumnChild600
1343
+ <a href="#base-colorsComponentsMenuAutumnChild600"
1344
+ title="permalink"
1345
+ class="permalink">
1346
+ 🔗
1347
+ </a>
1348
+ </td>
1349
+ <td class="is-vcentered">
1350
+ <pre>#007e45ff</pre>
1351
+ </td>
1352
+ <td class="is-vcentered">
1353
+ <div class="table__color-preview"
1354
+ style="background-color: #007e45ff;">
1355
+ </div>
1356
+
1357
+ </td>
1358
+ </tr>
1359
+ <tr>
1360
+ <td class="with-icons is-vcentered"
1361
+ id="base-colorsComponentsMenuAutumnChildAlt500"
1362
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 500; ">
1363
+ colorsComponentsMenuAutumnChildAlt500
1364
+ <a href="#base-colorsComponentsMenuAutumnChildAlt500"
1365
+ title="permalink"
1366
+ class="permalink">
1367
+ 🔗
1368
+ </a>
1369
+ </td>
1370
+ <td class="is-vcentered">
1371
+ <pre>#00324cff</pre>
1372
+ </td>
1373
+ <td class="is-vcentered">
1374
+ <div class="table__color-preview"
1375
+ style="background-color: #00324cff;">
1376
+ </div>
1377
+
1378
+ </td>
1379
+ </tr>
1380
+ <tr>
1381
+ <td class="with-icons is-vcentered"
1382
+ id="base-colorsComponentsMenuAutumnChildAlt600"
1383
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 600; ">
1384
+ colorsComponentsMenuAutumnChildAlt600
1385
+ <a href="#base-colorsComponentsMenuAutumnChildAlt600"
1386
+ title="permalink"
1387
+ class="permalink">
1388
+ 🔗
1389
+ </a>
1390
+ </td>
1391
+ <td class="is-vcentered">
1392
+ <pre>#007e45ff</pre>
1393
+ </td>
1394
+ <td class="is-vcentered">
1395
+ <div class="table__color-preview"
1396
+ style="background-color: #007e45ff;">
1397
+ </div>
1398
+
1399
+ </td>
1400
+ </tr>
1401
+ <tr>
1402
+ <td class="with-icons is-vcentered"
1403
+ id="base-colorsComponentsMenuWinterStandard500"
1404
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 500; ">
1405
+ colorsComponentsMenuWinterStandard500
1406
+ <a href="#base-colorsComponentsMenuWinterStandard500"
1407
+ title="permalink"
1408
+ class="permalink">
1409
+ 🔗
1410
+ </a>
1411
+ </td>
1412
+ <td class="is-vcentered">
1413
+ <pre>#000000ff</pre>
1414
+ </td>
1415
+ <td class="is-vcentered">
1416
+ <div class="table__color-preview"
1417
+ style="background-color: #000000ff;">
1418
+ </div>
1419
+
1420
+ </td>
1421
+ </tr>
1422
+ <tr>
1423
+ <td class="with-icons is-vcentered"
1424
+ id="base-colorsComponentsMenuWinterStandard600"
1425
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 600; ">
1426
+ colorsComponentsMenuWinterStandard600
1427
+ <a href="#base-colorsComponentsMenuWinterStandard600"
1428
+ title="permalink"
1429
+ class="permalink">
1430
+ 🔗
1431
+ </a>
1432
+ </td>
1433
+ <td class="is-vcentered">
1434
+ <pre>#007e45ff</pre>
1435
+ </td>
1436
+ <td class="is-vcentered">
1437
+ <div class="table__color-preview"
1438
+ style="background-color: #007e45ff;">
1439
+ </div>
1440
+
1441
+ </td>
1442
+ </tr>
1443
+ <tr>
1444
+ <td class="with-icons is-vcentered"
1445
+ id="base-colorsComponentsMenuWinterStandard700"
1446
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: standard; variant: 700; ">
1447
+ colorsComponentsMenuWinterStandard700
1448
+ <a href="#base-colorsComponentsMenuWinterStandard700"
1449
+ title="permalink"
1450
+ class="permalink">
1451
+ 🔗
1452
+ </a>
1453
+ </td>
1454
+ <td class="is-vcentered">
1455
+ <pre>#262626ff</pre>
1456
+ </td>
1457
+ <td class="is-vcentered">
1458
+ <div class="table__color-preview"
1459
+ style="background-color: #262626ff;">
1460
+ </div>
1461
+
1462
+ </td>
1463
+ </tr>
1464
+ <tr>
1465
+ <td class="with-icons is-vcentered"
1466
+ id="base-colorsComponentsMenuWinterParent500"
1467
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: parent; variant: 500; ">
1468
+ colorsComponentsMenuWinterParent500
1469
+ <a href="#base-colorsComponentsMenuWinterParent500"
1470
+ title="permalink"
1471
+ class="permalink">
1472
+ 🔗
1473
+ </a>
1474
+ </td>
1475
+ <td class="is-vcentered">
1476
+ <pre>#000000ff</pre>
1477
+ </td>
1478
+ <td class="is-vcentered">
1479
+ <div class="table__color-preview"
1480
+ style="background-color: #000000ff;">
1481
+ </div>
1482
+
1483
+ </td>
1484
+ </tr>
1485
+ <tr>
1486
+ <td class="with-icons is-vcentered"
1487
+ id="base-colorsComponentsMenuWinterParent600"
1488
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: parent; variant: 600; ">
1489
+ colorsComponentsMenuWinterParent600
1490
+ <a href="#base-colorsComponentsMenuWinterParent600"
1491
+ title="permalink"
1492
+ class="permalink">
1493
+ 🔗
1494
+ </a>
1495
+ </td>
1496
+ <td class="is-vcentered">
1497
+ <pre>#000000ff</pre>
1498
+ </td>
1499
+ <td class="is-vcentered">
1500
+ <div class="table__color-preview"
1501
+ style="background-color: #000000ff;">
1502
+ </div>
1503
+
1504
+ </td>
1505
+ </tr>
1506
+ <tr>
1507
+ <td class="with-icons is-vcentered"
1508
+ id="base-colorsComponentsMenuWinterParent700"
1509
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: parent; variant: 700; ">
1510
+ colorsComponentsMenuWinterParent700
1511
+ <a href="#base-colorsComponentsMenuWinterParent700"
1512
+ title="permalink"
1513
+ class="permalink">
1514
+ 🔗
1515
+ </a>
1516
+ </td>
1517
+ <td class="is-vcentered">
1518
+ <pre>#262626ff</pre>
1519
+ </td>
1520
+ <td class="is-vcentered">
1521
+ <div class="table__color-preview"
1522
+ style="background-color: #262626ff;">
1523
+ </div>
1524
+
1525
+ </td>
1526
+ </tr>
1527
+ <tr>
1528
+ <td class="with-icons is-vcentered"
1529
+ id="base-colorsComponentsMenuWinterChild400"
1530
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 400; ">
1531
+ colorsComponentsMenuWinterChild400
1532
+ <a href="#base-colorsComponentsMenuWinterChild400"
1533
+ title="permalink"
1534
+ class="permalink">
1535
+ 🔗
1536
+ </a>
1537
+ </td>
1538
+ <td class="is-vcentered">
1539
+ <pre>#262626ff</pre>
1540
+ </td>
1541
+ <td class="is-vcentered">
1542
+ <div class="table__color-preview"
1543
+ style="background-color: #262626ff;">
1544
+ </div>
1545
+
1546
+ </td>
1547
+ </tr>
1548
+ <tr>
1549
+ <td class="with-icons is-vcentered"
1550
+ id="base-colorsComponentsMenuWinterChild500"
1551
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 500; ">
1552
+ colorsComponentsMenuWinterChild500
1553
+ <a href="#base-colorsComponentsMenuWinterChild500"
1554
+ title="permalink"
1555
+ class="permalink">
1556
+ 🔗
1557
+ </a>
1558
+ </td>
1559
+ <td class="is-vcentered">
1560
+ <pre>#000000ff</pre>
1561
+ </td>
1562
+ <td class="is-vcentered">
1563
+ <div class="table__color-preview"
1564
+ style="background-color: #000000ff;">
1565
+ </div>
1566
+
1567
+ </td>
1568
+ </tr>
1569
+ <tr>
1570
+ <td class="with-icons is-vcentered"
1571
+ id="base-colorsComponentsMenuWinterChild600"
1572
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: child; variant: 600; ">
1573
+ colorsComponentsMenuWinterChild600
1574
+ <a href="#base-colorsComponentsMenuWinterChild600"
1575
+ title="permalink"
1576
+ class="permalink">
1577
+ 🔗
1578
+ </a>
1579
+ </td>
1580
+ <td class="is-vcentered">
1581
+ <pre>#007e45ff</pre>
1582
+ </td>
1583
+ <td class="is-vcentered">
1584
+ <div class="table__color-preview"
1585
+ style="background-color: #007e45ff;">
1586
+ </div>
1587
+
1588
+ </td>
1589
+ </tr>
1590
+ <tr>
1591
+ <td class="with-icons is-vcentered"
1592
+ id="base-colorsComponentsMenuWinterChildAlt500"
1593
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 500; ">
1594
+ colorsComponentsMenuWinterChildAlt500
1595
+ <a href="#base-colorsComponentsMenuWinterChildAlt500"
1596
+ title="permalink"
1597
+ class="permalink">
1598
+ 🔗
1599
+ </a>
1600
+ </td>
1601
+ <td class="is-vcentered">
1602
+ <pre>#1a1a1aff</pre>
1603
+ </td>
1604
+ <td class="is-vcentered">
1605
+ <div class="table__color-preview"
1606
+ style="background-color: #1a1a1aff;">
1607
+ </div>
1608
+
1609
+ </td>
1610
+ </tr>
1611
+ <tr>
1612
+ <td class="with-icons is-vcentered"
1613
+ id="base-colorsComponentsMenuWinterChildAlt600"
1614
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 600; ">
1615
+ colorsComponentsMenuWinterChildAlt600
1616
+ <a href="#base-colorsComponentsMenuWinterChildAlt600"
1617
+ title="permalink"
1618
+ class="permalink">
1619
+ 🔗
1620
+ </a>
1621
+ </td>
1622
+ <td class="is-vcentered">
1623
+ <pre>#007e45ff</pre>
1624
+ </td>
1625
+ <td class="is-vcentered">
1626
+ <div class="table__color-preview"
1627
+ style="background-color: #007e45ff;">
1628
+ </div>
1629
+
1630
+ </td>
1631
+ </tr>
1632
+ <tr>
1633
+ <td class="with-icons is-vcentered"
1634
+ id="base-colorsComponentsMenuYin100"
1635
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yin; variant: 100; ">
1636
+ colorsComponentsMenuYin100
1637
+ <a href="#base-colorsComponentsMenuYin100"
1638
+ title="permalink"
1639
+ class="permalink">
1640
+ 🔗
1641
+ </a>
1642
+ </td>
1643
+ <td class="is-vcentered">
1644
+ <pre>#000000ff</pre>
1645
+ </td>
1646
+ <td class="is-vcentered">
1647
+ <div class="table__color-preview"
1648
+ style="background-color: #000000ff;">
1649
+ </div>
1650
+
1651
+ </td>
1652
+ </tr>
1653
+ <tr>
1654
+ <td class="with-icons is-vcentered"
1655
+ id="base-colorsComponentsMenuYin065"
1656
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yin; variant: 065; ">
1657
+ colorsComponentsMenuYin065
1658
+ <a href="#base-colorsComponentsMenuYin065"
1659
+ title="permalink"
1660
+ class="permalink">
1661
+ 🔗
1662
+ </a>
1663
+ </td>
1664
+ <td class="is-vcentered">
1665
+ <pre>#000000a6</pre>
1666
+ </td>
1667
+ <td class="is-vcentered">
1668
+ <div class="table__color-preview"
1669
+ style="background-color: #000000a6;">
1670
+ </div>
1671
+
1672
+ </td>
1673
+ </tr>
1674
+ <tr>
1675
+ <td class="with-icons is-vcentered"
1676
+ id="base-colorsComponentsMenuYin090"
1677
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yin; variant: 090; ">
1678
+ colorsComponentsMenuYin090
1679
+ <a href="#base-colorsComponentsMenuYin090"
1680
+ title="permalink"
1681
+ class="permalink">
1682
+ 🔗
1683
+ </a>
1684
+ </td>
1685
+ <td class="is-vcentered">
1686
+ <pre>#000000e6</pre>
1687
+ </td>
1688
+ <td class="is-vcentered">
1689
+ <div class="table__color-preview"
1690
+ style="background-color: #000000e6;">
1691
+ </div>
1692
+
1693
+ </td>
1694
+ </tr>
1695
+ <tr>
1696
+ <td class="with-icons is-vcentered"
1697
+ id="base-colorsComponentsMenuYang100"
1698
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yang; variant: 100; ">
1699
+ colorsComponentsMenuYang100
1700
+ <a href="#base-colorsComponentsMenuYang100"
1701
+ title="permalink"
1702
+ class="permalink">
1703
+ 🔗
1704
+ </a>
1705
+ </td>
1706
+ <td class="is-vcentered">
1707
+ <pre>#ffffffff</pre>
1708
+ </td>
1709
+ <td class="is-vcentered">
1710
+ <div class="table__color-preview"
1711
+ style="background-color: #ffffffff;">
1712
+ </div>
1713
+
1714
+ </td>
1715
+ </tr>
1716
+ <tr>
1717
+ <td class="with-icons is-vcentered"
1718
+ id="base-colorsComponentsMenuYang080"
1719
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yang; variant: 080; ">
1720
+ colorsComponentsMenuYang080
1721
+ <a href="#base-colorsComponentsMenuYang080"
1722
+ title="permalink"
1723
+ class="permalink">
1724
+ 🔗
1725
+ </a>
1726
+ </td>
1727
+ <td class="is-vcentered">
1728
+ <pre>#ffffffcc</pre>
1729
+ </td>
1730
+ <td class="is-vcentered">
1731
+ <div class="table__color-preview"
1732
+ style="background-color: #ffffffcc;">
1733
+ </div>
1734
+
1735
+ </td>
1736
+ </tr>
1737
+ <tr>
1738
+ <td class="with-icons is-vcentered"
1739
+ id="base-colorsUtilityMajor100"
1740
+ title="theme: base; category: colors; group: utility; name: major; variant: 100; ">
1741
+ colorsUtilityMajor100
1742
+ <a href="#base-colorsUtilityMajor100"
1743
+ title="permalink"
1744
+ class="permalink">
1745
+ 🔗
1746
+ </a>
1747
+ </td>
1748
+ <td class="is-vcentered">
1749
+ <pre>#ccd6dbff</pre>
1750
+ </td>
1751
+ <td class="is-vcentered">
1752
+ <div class="table__color-preview"
1753
+ style="background-color: #ccd6dbff;">
1754
+ </div>
1755
+
1756
+ </td>
1757
+ </tr>
1758
+ <tr>
1759
+ <td class="with-icons is-vcentered"
1760
+ id="base-colorsUtilityMajor150"
1761
+ title="theme: base; category: colors; group: utility; name: major; variant: 150; ">
1762
+ colorsUtilityMajor150
1763
+ <a href="#base-colorsUtilityMajor150"
1764
+ title="permalink"
1765
+ class="permalink">
1766
+ 🔗
1767
+ </a>
1768
+ </td>
1769
+ <td class="is-vcentered">
1770
+ <pre>#b3c2c9ff</pre>
1771
+ </td>
1772
+ <td class="is-vcentered">
1773
+ <div class="table__color-preview"
1774
+ style="background-color: #b3c2c9ff;">
1775
+ </div>
1776
+
1777
+ </td>
1778
+ </tr>
1779
+ <tr>
1780
+ <td class="with-icons is-vcentered"
1781
+ id="base-colorsUtilityMajor200"
1782
+ title="theme: base; category: colors; group: utility; name: major; variant: 200; ">
1783
+ colorsUtilityMajor200
1784
+ <a href="#base-colorsUtilityMajor200"
1785
+ title="permalink"
1786
+ class="permalink">
1787
+ 🔗
1788
+ </a>
1789
+ </td>
1790
+ <td class="is-vcentered">
1791
+ <pre>#99adb7ff</pre>
1792
+ </td>
1793
+ <td class="is-vcentered">
1794
+ <div class="table__color-preview"
1795
+ style="background-color: #99adb7ff;">
1796
+ </div>
1797
+
1798
+ </td>
1799
+ </tr>
1800
+ <tr>
1801
+ <td class="with-icons is-vcentered"
1802
+ id="base-colorsUtilityMajor300"
1803
+ title="theme: base; category: colors; group: utility; name: major; variant: 300; ">
1804
+ colorsUtilityMajor300
1805
+ <a href="#base-colorsUtilityMajor300"
1806
+ title="permalink"
1807
+ class="permalink">
1808
+ 🔗
1809
+ </a>
1810
+ </td>
1811
+ <td class="is-vcentered">
1812
+ <pre>#668494ff</pre>
1813
+ </td>
1814
+ <td class="is-vcentered">
1815
+ <div class="table__color-preview"
1816
+ style="background-color: #668494ff;">
1817
+ </div>
1818
+
1819
+ </td>
1820
+ </tr>
1821
+ <tr>
1822
+ <td class="with-icons is-vcentered"
1823
+ id="base-colorsUtilityMajor400"
1824
+ title="theme: base; category: colors; group: utility; name: major; variant: 400; ">
1825
+ colorsUtilityMajor400
1826
+ <a href="#base-colorsUtilityMajor400"
1827
+ title="permalink"
1828
+ class="permalink">
1829
+ 🔗
1830
+ </a>
1831
+ </td>
1832
+ <td class="is-vcentered">
1833
+ <pre>#335b70ff</pre>
1834
+ </td>
1835
+ <td class="is-vcentered">
1836
+ <div class="table__color-preview"
1837
+ style="background-color: #335b70ff;">
1838
+ </div>
1839
+
1840
+ </td>
1841
+ </tr>
1842
+ <tr>
1843
+ <td class="with-icons is-vcentered"
1844
+ id="base-colorsUtilityMajor500"
1845
+ title="theme: base; category: colors; group: utility; name: major; variant: 500; ">
1846
+ colorsUtilityMajor500
1847
+ <a href="#base-colorsUtilityMajor500"
1848
+ title="permalink"
1849
+ class="permalink">
1850
+ 🔗
1851
+ </a>
1852
+ </td>
1853
+ <td class="is-vcentered">
1854
+ <pre>#00324cff</pre>
1855
+ </td>
1856
+ <td class="is-vcentered">
1857
+ <div class="table__color-preview"
1858
+ style="background-color: #00324cff;">
1859
+ </div>
1860
+
1861
+ </td>
1862
+ </tr>
1863
+ <tr>
1864
+ <td class="with-icons is-vcentered"
1865
+ id="base-colorsUtilityMajor800"
1866
+ title="theme: base; category: colors; group: utility; name: major; variant: 800; ">
1867
+ colorsUtilityMajor800
1868
+ <a href="#base-colorsUtilityMajor800"
1869
+ title="permalink"
1870
+ class="permalink">
1871
+ 🔗
1872
+ </a>
1873
+ </td>
1874
+ <td class="is-vcentered">
1875
+ <pre>#00141eff</pre>
1876
+ </td>
1877
+ <td class="is-vcentered">
1878
+ <div class="table__color-preview"
1879
+ style="background-color: #00141eff;">
1880
+ </div>
1881
+
1882
+ </td>
1883
+ </tr>
1884
+ <tr>
1885
+ <td class="with-icons is-vcentered"
1886
+ id="base-colorsUtilityMajor025"
1887
+ title="theme: base; category: colors; group: utility; name: major; variant: 025; ">
1888
+ colorsUtilityMajor025
1889
+ <a href="#base-colorsUtilityMajor025"
1890
+ title="permalink"
1891
+ class="permalink">
1892
+ 🔗
1893
+ </a>
1894
+ </td>
1895
+ <td class="is-vcentered">
1896
+ <pre>#f2f5f6ff</pre>
1897
+ </td>
1898
+ <td class="is-vcentered">
1899
+ <div class="table__color-preview"
1900
+ style="background-color: #f2f5f6ff;">
1901
+ </div>
1902
+
1903
+ </td>
1904
+ </tr>
1905
+ <tr>
1906
+ <td class="with-icons is-vcentered"
1907
+ id="base-colorsUtilityMajor010"
1908
+ title="theme: base; category: colors; group: utility; name: major; variant: 010; ">
1909
+ colorsUtilityMajor010
1910
+ <a href="#base-colorsUtilityMajor010"
1911
+ title="permalink"
1912
+ class="permalink">
1913
+ 🔗
1914
+ </a>
1915
+ </td>
1916
+ <td class="is-vcentered">
1917
+ <pre>#fafbfbff</pre>
1918
+ </td>
1919
+ <td class="is-vcentered">
1920
+ <div class="table__color-preview"
1921
+ style="background-color: #fafbfbff;">
1922
+ </div>
1923
+
1924
+ </td>
1925
+ </tr>
1926
+ <tr>
1927
+ <td class="with-icons is-vcentered"
1928
+ id="base-colorsUtilityMajor040"
1929
+ title="theme: base; category: colors; group: utility; name: major; variant: 040; ">
1930
+ colorsUtilityMajor040
1931
+ <a href="#base-colorsUtilityMajor040"
1932
+ title="permalink"
1933
+ class="permalink">
1934
+ 🔗
1935
+ </a>
1936
+ </td>
1937
+ <td class="is-vcentered">
1938
+ <pre>#edf1f2ff</pre>
1939
+ </td>
1940
+ <td class="is-vcentered">
1941
+ <div class="table__color-preview"
1942
+ style="background-color: #edf1f2ff;">
1943
+ </div>
1944
+
1945
+ </td>
1946
+ </tr>
1947
+ <tr>
1948
+ <td class="with-icons is-vcentered"
1949
+ id="base-colorsUtilityMajor050"
1950
+ title="theme: base; category: colors; group: utility; name: major; variant: 050; ">
1951
+ colorsUtilityMajor050
1952
+ <a href="#base-colorsUtilityMajor050"
1953
+ title="permalink"
1954
+ class="permalink">
1955
+ 🔗
1956
+ </a>
1957
+ </td>
1958
+ <td class="is-vcentered">
1959
+ <pre>#e6ebedff</pre>
1960
+ </td>
1961
+ <td class="is-vcentered">
1962
+ <div class="table__color-preview"
1963
+ style="background-color: #e6ebedff;">
1964
+ </div>
1965
+
1966
+ </td>
1967
+ </tr>
1968
+ <tr>
1969
+ <td class="with-icons is-vcentered"
1970
+ id="base-colorsUtilityMajor075"
1971
+ title="theme: base; category: colors; group: utility; name: major; variant: 075; ">
1972
+ colorsUtilityMajor075
1973
+ <a href="#base-colorsUtilityMajor075"
1974
+ title="permalink"
1975
+ class="permalink">
1976
+ 🔗
1977
+ </a>
1978
+ </td>
1979
+ <td class="is-vcentered">
1980
+ <pre>#d9e0e4ff</pre>
1981
+ </td>
1982
+ <td class="is-vcentered">
1983
+ <div class="table__color-preview"
1984
+ style="background-color: #d9e0e4ff;">
1985
+ </div>
1986
+
1987
+ </td>
1988
+ </tr>
1989
+ <tr>
1990
+ <td class="with-icons is-vcentered"
1991
+ id="base-colorsUtilityMajorTransparent"
1992
+ title="theme: base; category: colors; group: utility; name: major; variant: transparent; ">
1993
+ colorsUtilityMajorTransparent
1994
+ <a href="#base-colorsUtilityMajorTransparent"
1995
+ title="permalink"
1996
+ class="permalink">
1997
+ 🔗
1998
+ </a>
1999
+ </td>
2000
+ <td class="is-vcentered">
2001
+ <pre>#00000000</pre>
2002
+ </td>
2003
+ <td class="is-vcentered">
2004
+ <div class="table__color-preview"
2005
+ style="background-color: #00000000;">
2006
+ </div>
2007
+
2008
+ </td>
2009
+ </tr>
2010
+ <tr>
2011
+ <td class="with-icons is-vcentered"
2012
+ id="base-colorsUtilityYin030"
2013
+ title="theme: base; category: colors; group: utility; name: yin; variant: 030; ">
2014
+ colorsUtilityYin030
2015
+ <a href="#base-colorsUtilityYin030"
2016
+ title="permalink"
2017
+ class="permalink">
2018
+ 🔗
2019
+ </a>
2020
+ </td>
2021
+ <td class="is-vcentered">
2022
+ <pre>#0000004d</pre>
2023
+ </td>
2024
+ <td class="is-vcentered">
2025
+ <div class="table__color-preview"
2026
+ style="background-color: #0000004d;">
2027
+ </div>
2028
+
2029
+ </td>
2030
+ </tr>
2031
+ <tr>
2032
+ <td class="with-icons is-vcentered"
2033
+ id="base-colorsUtilityYin055"
2034
+ title="theme: base; category: colors; group: utility; name: yin; variant: 055; ">
2035
+ colorsUtilityYin055
2036
+ <a href="#base-colorsUtilityYin055"
2037
+ title="permalink"
2038
+ class="permalink">
2039
+ 🔗
2040
+ </a>
2041
+ </td>
2042
+ <td class="is-vcentered">
2043
+ <pre>#0000008c</pre>
2044
+ </td>
2045
+ <td class="is-vcentered">
2046
+ <div class="table__color-preview"
2047
+ style="background-color: #0000008c;">
2048
+ </div>
2049
+
2050
+ </td>
2051
+ </tr>
2052
+ <tr>
2053
+ <td class="with-icons is-vcentered"
2054
+ id="base-colorsUtilityYin065"
2055
+ title="theme: base; category: colors; group: utility; name: yin; variant: 065; ">
2056
+ colorsUtilityYin065
2057
+ <a href="#base-colorsUtilityYin065"
2058
+ title="permalink"
2059
+ class="permalink">
2060
+ 🔗
2061
+ </a>
2062
+ </td>
2063
+ <td class="is-vcentered">
2064
+ <pre>#000000a6</pre>
2065
+ </td>
2066
+ <td class="is-vcentered">
2067
+ <div class="table__color-preview"
2068
+ style="background-color: #000000a6;">
2069
+ </div>
2070
+
2071
+ </td>
2072
+ </tr>
2073
+ <tr>
2074
+ <td class="with-icons is-vcentered"
2075
+ id="base-colorsUtilityYin090"
2076
+ title="theme: base; category: colors; group: utility; name: yin; variant: 090; ">
2077
+ colorsUtilityYin090
2078
+ <a href="#base-colorsUtilityYin090"
2079
+ title="permalink"
2080
+ class="permalink">
2081
+ 🔗
2082
+ </a>
2083
+ </td>
2084
+ <td class="is-vcentered">
2085
+ <pre>#000000e6</pre>
2086
+ </td>
2087
+ <td class="is-vcentered">
2088
+ <div class="table__color-preview"
2089
+ style="background-color: #000000e6;">
2090
+ </div>
2091
+
2092
+ </td>
2093
+ </tr>
2094
+ <tr>
2095
+ <td class="with-icons is-vcentered"
2096
+ id="base-colorsUtilityYang100"
2097
+ title="theme: base; category: colors; group: utility; name: yang; variant: 100; ">
2098
+ colorsUtilityYang100
2099
+ <a href="#base-colorsUtilityYang100"
2100
+ title="permalink"
2101
+ class="permalink">
2102
+ 🔗
2103
+ </a>
2104
+ </td>
2105
+ <td class="is-vcentered">
2106
+ <pre>#ffffffff</pre>
2107
+ </td>
2108
+ <td class="is-vcentered">
2109
+ <div class="table__color-preview"
2110
+ style="background-color: #ffffffff;">
2111
+ </div>
2112
+
2113
+ </td>
2114
+ </tr>
2115
+ <tr>
2116
+ <td class="with-icons is-vcentered"
2117
+ id="base-colorsUtilityDisabled400"
2118
+ title="theme: base; category: colors; group: utility; name: disabled; variant: 400; ">
2119
+ colorsUtilityDisabled400
2120
+ <a href="#base-colorsUtilityDisabled400"
2121
+ title="permalink"
2122
+ class="permalink">
2123
+ 🔗
2124
+ </a>
2125
+ </td>
2126
+ <td class="is-vcentered">
2127
+ <pre>#f2f5f6ff</pre>
2128
+ </td>
2129
+ <td class="is-vcentered">
2130
+ <div class="table__color-preview"
2131
+ style="background-color: #f2f5f6ff;">
2132
+ </div>
2133
+
2134
+ </td>
2135
+ </tr>
2136
+ <tr>
2137
+ <td class="with-icons is-vcentered"
2138
+ id="base-colorsUtilityDisabled500"
2139
+ title="theme: base; category: colors; group: utility; name: disabled; variant: 500; ">
2140
+ colorsUtilityDisabled500
2141
+ <a href="#base-colorsUtilityDisabled500"
2142
+ title="permalink"
2143
+ class="permalink">
2144
+ 🔗
2145
+ </a>
2146
+ </td>
2147
+ <td class="is-vcentered">
2148
+ <pre>#e6ebedff</pre>
2149
+ </td>
2150
+ <td class="is-vcentered">
2151
+ <div class="table__color-preview"
2152
+ style="background-color: #e6ebedff;">
2153
+ </div>
2154
+
2155
+ </td>
2156
+ </tr>
2157
+ <tr>
2158
+ <td class="with-icons is-vcentered"
2159
+ id="base-colorsUtilityDisabled600"
2160
+ title="theme: base; category: colors; group: utility; name: disabled; variant: 600; ">
2161
+ colorsUtilityDisabled600
2162
+ <a href="#base-colorsUtilityDisabled600"
2163
+ title="permalink"
2164
+ class="permalink">
2165
+ 🔗
2166
+ </a>
2167
+ </td>
2168
+ <td class="is-vcentered">
2169
+ <pre>#ccd6dbff</pre>
2170
+ </td>
2171
+ <td class="is-vcentered">
2172
+ <div class="table__color-preview"
2173
+ style="background-color: #ccd6dbff;">
2174
+ </div>
2175
+
2176
+ </td>
2177
+ </tr>
2178
+ <tr>
2179
+ <td class="with-icons is-vcentered"
2180
+ id="base-colorsUtilityReadOnly400"
2181
+ title="theme: base; category: colors; group: utility; name: readOnly; variant: 400; ">
2182
+ colorsUtilityReadOnly400
2183
+ <a href="#base-colorsUtilityReadOnly400"
2184
+ title="permalink"
2185
+ class="permalink">
2186
+ 🔗
2187
+ </a>
2188
+ </td>
2189
+ <td class="is-vcentered">
2190
+ <pre>#f2f5f6ff</pre>
2191
+ </td>
2192
+ <td class="is-vcentered">
2193
+ <div class="table__color-preview"
2194
+ style="background-color: #f2f5f6ff;">
2195
+ </div>
2196
+
2197
+ </td>
2198
+ </tr>
2199
+ <tr>
2200
+ <td class="with-icons is-vcentered"
2201
+ id="base-colorsUtilityReadOnly500"
2202
+ title="theme: base; category: colors; group: utility; name: readOnly; variant: 500; ">
2203
+ colorsUtilityReadOnly500
2204
+ <a href="#base-colorsUtilityReadOnly500"
2205
+ title="permalink"
2206
+ class="permalink">
2207
+ 🔗
2208
+ </a>
2209
+ </td>
2210
+ <td class="is-vcentered">
2211
+ <pre>#e6ebedff</pre>
2212
+ </td>
2213
+ <td class="is-vcentered">
2214
+ <div class="table__color-preview"
2215
+ style="background-color: #e6ebedff;">
2216
+ </div>
2217
+
2218
+ </td>
2219
+ </tr>
2220
+ <tr>
2221
+ <td class="with-icons is-vcentered"
2222
+ id="base-colorsUtilityReadOnly600"
2223
+ title="theme: base; category: colors; group: utility; name: readOnly; variant: 600; ">
2224
+ colorsUtilityReadOnly600
2225
+ <a href="#base-colorsUtilityReadOnly600"
2226
+ title="permalink"
2227
+ class="permalink">
2228
+ 🔗
2229
+ </a>
2230
+ </td>
2231
+ <td class="is-vcentered">
2232
+ <pre>#ccd6dbff</pre>
2233
+ </td>
2234
+ <td class="is-vcentered">
2235
+ <div class="table__color-preview"
2236
+ style="background-color: #ccd6dbff;">
2237
+ </div>
2238
+
2239
+ </td>
2240
+ </tr>
2241
+ <tr>
2242
+ <td class="with-icons is-vcentered"
2243
+ id="base-colorsActionMajor150"
2244
+ title="theme: base; category: colors; group: action; name: major; variant: 150; ">
2245
+ colorsActionMajor150
2246
+ <a href="#base-colorsActionMajor150"
2247
+ title="permalink"
2248
+ class="permalink">
2249
+ 🔗
2250
+ </a>
2251
+ </td>
2252
+ <td class="is-vcentered">
2253
+ <pre>#b3d9c8ff</pre>
2254
+ </td>
2255
+ <td class="is-vcentered">
2256
+ <div class="table__color-preview"
2257
+ style="background-color: #b3d9c8ff;">
2258
+ </div>
2259
+
2260
+ </td>
2261
+ </tr>
2262
+ <tr>
2263
+ <td class="with-icons is-vcentered"
2264
+ id="base-colorsActionMajor350"
2265
+ title="theme: base; category: colors; group: action; name: major; variant: 350; ">
2266
+ colorsActionMajor350
2267
+ <a href="#base-colorsActionMajor350"
2268
+ title="permalink"
2269
+ class="permalink">
2270
+ 🔗
2271
+ </a>
2272
+ </td>
2273
+ <td class="is-vcentered">
2274
+ <pre>#4da77eff</pre>
2275
+ </td>
2276
+ <td class="is-vcentered">
2277
+ <div class="table__color-preview"
2278
+ style="background-color: #4da77eff;">
2279
+ </div>
2280
+
2281
+ </td>
2282
+ </tr>
2283
+ <tr>
2284
+ <td class="with-icons is-vcentered"
2285
+ id="base-colorsActionMajor450"
2286
+ title="theme: base; category: colors; group: action; name: major; variant: 450; ">
2287
+ colorsActionMajor450
2288
+ <a href="#base-colorsActionMajor450"
2289
+ title="permalink"
2290
+ class="permalink">
2291
+ 🔗
2292
+ </a>
2293
+ </td>
2294
+ <td class="is-vcentered">
2295
+ <pre>#198e59ff</pre>
2296
+ </td>
2297
+ <td class="is-vcentered">
2298
+ <div class="table__color-preview"
2299
+ style="background-color: #198e59ff;">
2300
+ </div>
2301
+
2302
+ </td>
2303
+ </tr>
2304
+ <tr>
2305
+ <td class="with-icons is-vcentered"
2306
+ id="base-colorsActionMajor500"
2307
+ title="theme: base; category: colors; group: action; name: major; variant: 500; ">
2308
+ colorsActionMajor500
2309
+ <a href="#base-colorsActionMajor500"
2310
+ title="permalink"
2311
+ class="permalink">
2312
+ 🔗
2313
+ </a>
2314
+ </td>
2315
+ <td class="is-vcentered">
2316
+ <pre>#007e45ff</pre>
2317
+ </td>
2318
+ <td class="is-vcentered">
2319
+ <div class="table__color-preview"
2320
+ style="background-color: #007e45ff;">
2321
+ </div>
2322
+
2323
+ </td>
2324
+ </tr>
2325
+ <tr>
2326
+ <td class="with-icons is-vcentered"
2327
+ id="base-colorsActionMajor600"
2328
+ title="theme: base; category: colors; group: action; name: major; variant: 600; ">
2329
+ colorsActionMajor600
2330
+ <a href="#base-colorsActionMajor600"
2331
+ title="permalink"
2332
+ class="permalink">
2333
+ 🔗
2334
+ </a>
2335
+ </td>
2336
+ <td class="is-vcentered">
2337
+ <pre>#006738ff</pre>
2338
+ </td>
2339
+ <td class="is-vcentered">
2340
+ <div class="table__color-preview"
2341
+ style="background-color: #006738ff;">
2342
+ </div>
2343
+
2344
+ </td>
2345
+ </tr>
2346
+ <tr>
2347
+ <td class="with-icons is-vcentered"
2348
+ id="base-colorsActionMajor700"
2349
+ title="theme: base; category: colors; group: action; name: major; variant: 700; ">
2350
+ colorsActionMajor700
2351
+ <a href="#base-colorsActionMajor700"
2352
+ title="permalink"
2353
+ class="permalink">
2354
+ 🔗
2355
+ </a>
2356
+ </td>
2357
+ <td class="is-vcentered">
2358
+ <pre>#004d2aff</pre>
2359
+ </td>
2360
+ <td class="is-vcentered">
2361
+ <div class="table__color-preview"
2362
+ style="background-color: #004d2aff;">
2363
+ </div>
2364
+
2365
+ </td>
2366
+ </tr>
2367
+ <tr>
2368
+ <td class="with-icons is-vcentered"
2369
+ id="base-colorsActionMajor025"
2370
+ title="theme: base; category: colors; group: action; name: major; variant: 025; ">
2371
+ colorsActionMajor025
2372
+ <a href="#base-colorsActionMajor025"
2373
+ title="permalink"
2374
+ class="permalink">
2375
+ 🔗
2376
+ </a>
2377
+ </td>
2378
+ <td class="is-vcentered">
2379
+ <pre>#f2f9f6ff</pre>
2380
+ </td>
2381
+ <td class="is-vcentered">
2382
+ <div class="table__color-preview"
2383
+ style="background-color: #f2f9f6ff;">
2384
+ </div>
2385
+
2386
+ </td>
2387
+ </tr>
2388
+ <tr>
2389
+ <td class="with-icons is-vcentered"
2390
+ id="base-colorsActionMajorTransparent"
2391
+ title="theme: base; category: colors; group: action; name: major; variant: transparent; ">
2392
+ colorsActionMajorTransparent
2393
+ <a href="#base-colorsActionMajorTransparent"
2394
+ title="permalink"
2395
+ class="permalink">
2396
+ 🔗
2397
+ </a>
2398
+ </td>
2399
+ <td class="is-vcentered">
2400
+ <pre>#00000000</pre>
2401
+ </td>
2402
+ <td class="is-vcentered">
2403
+ <div class="table__color-preview"
2404
+ style="background-color: #00000000;">
2405
+ </div>
2406
+
2407
+ </td>
2408
+ </tr>
2409
+ <tr>
2410
+ <td class="with-icons is-vcentered"
2411
+ id="base-colorsActionMajorYin030"
2412
+ title="theme: base; category: colors; group: action; name: major; subgroup: yin; variant: 030; ">
2413
+ colorsActionMajorYin030
2414
+ <a href="#base-colorsActionMajorYin030"
2415
+ title="permalink"
2416
+ class="permalink">
2417
+ 🔗
2418
+ </a>
2419
+ </td>
2420
+ <td class="is-vcentered">
2421
+ <pre>#0000004d</pre>
2422
+ </td>
2423
+ <td class="is-vcentered">
2424
+ <div class="table__color-preview"
2425
+ style="background-color: #0000004d;">
2426
+ </div>
2427
+
2428
+ </td>
2429
+ </tr>
2430
+ <tr>
2431
+ <td class="with-icons is-vcentered"
2432
+ id="base-colorsActionMajorYin055"
2433
+ title="theme: base; category: colors; group: action; name: major; subgroup: yin; variant: 055; ">
2434
+ colorsActionMajorYin055
2435
+ <a href="#base-colorsActionMajorYin055"
2436
+ title="permalink"
2437
+ class="permalink">
2438
+ 🔗
2439
+ </a>
2440
+ </td>
2441
+ <td class="is-vcentered">
2442
+ <pre>#0000008c</pre>
2443
+ </td>
2444
+ <td class="is-vcentered">
2445
+ <div class="table__color-preview"
2446
+ style="background-color: #0000008c;">
2447
+ </div>
2448
+
2449
+ </td>
2450
+ </tr>
2451
+ <tr>
2452
+ <td class="with-icons is-vcentered"
2453
+ id="base-colorsActionMajorYin065"
2454
+ title="theme: base; category: colors; group: action; name: major; subgroup: yin; variant: 065; ">
2455
+ colorsActionMajorYin065
2456
+ <a href="#base-colorsActionMajorYin065"
2457
+ title="permalink"
2458
+ class="permalink">
2459
+ 🔗
2460
+ </a>
2461
+ </td>
2462
+ <td class="is-vcentered">
2463
+ <pre>#000000a6</pre>
2464
+ </td>
2465
+ <td class="is-vcentered">
2466
+ <div class="table__color-preview"
2467
+ style="background-color: #000000a6;">
2468
+ </div>
2469
+
2470
+ </td>
2471
+ </tr>
2472
+ <tr>
2473
+ <td class="with-icons is-vcentered"
2474
+ id="base-colorsActionMajorYin090"
2475
+ title="theme: base; category: colors; group: action; name: major; subgroup: yin; variant: 090; ">
2476
+ colorsActionMajorYin090
2477
+ <a href="#base-colorsActionMajorYin090"
2478
+ title="permalink"
2479
+ class="permalink">
2480
+ 🔗
2481
+ </a>
2482
+ </td>
2483
+ <td class="is-vcentered">
2484
+ <pre>#000000e6</pre>
2485
+ </td>
2486
+ <td class="is-vcentered">
2487
+ <div class="table__color-preview"
2488
+ style="background-color: #000000e6;">
2489
+ </div>
2490
+
2491
+ </td>
2492
+ </tr>
2493
+ <tr>
2494
+ <td class="with-icons is-vcentered"
2495
+ id="base-colorsActionMajorYang100"
2496
+ title="theme: base; category: colors; group: action; name: major; subgroup: yang; variant: 100; ">
2497
+ colorsActionMajorYang100
2498
+ <a href="#base-colorsActionMajorYang100"
2499
+ title="permalink"
2500
+ class="permalink">
2501
+ 🔗
2502
+ </a>
2503
+ </td>
2504
+ <td class="is-vcentered">
2505
+ <pre>#ffffffff</pre>
2506
+ </td>
2507
+ <td class="is-vcentered">
2508
+ <div class="table__color-preview"
2509
+ style="background-color: #ffffffff;">
2510
+ </div>
2511
+
2512
+ </td>
2513
+ </tr>
2514
+ <tr>
2515
+ <td class="with-icons is-vcentered"
2516
+ id="base-colorsActionMajorYang030"
2517
+ title="theme: base; category: colors; group: action; name: major; subgroup: yang; variant: 030; ">
2518
+ colorsActionMajorYang030
2519
+ <a href="#base-colorsActionMajorYang030"
2520
+ title="permalink"
2521
+ class="permalink">
2522
+ 🔗
2523
+ </a>
2524
+ </td>
2525
+ <td class="is-vcentered">
2526
+ <pre>#ffffff4d</pre>
2527
+ </td>
2528
+ <td class="is-vcentered">
2529
+ <div class="table__color-preview"
2530
+ style="background-color: #ffffff4d;">
2531
+ </div>
2532
+
2533
+ </td>
2534
+ </tr>
2535
+ <tr>
2536
+ <td class="with-icons is-vcentered"
2537
+ id="base-colorsActionMinor100"
2538
+ title="theme: base; category: colors; group: action; name: minor; variant: 100; ">
2539
+ colorsActionMinor100
2540
+ <a href="#base-colorsActionMinor100"
2541
+ title="permalink"
2542
+ class="permalink">
2543
+ 🔗
2544
+ </a>
2545
+ </td>
2546
+ <td class="is-vcentered">
2547
+ <pre>#e6ebedff</pre>
2548
+ </td>
2549
+ <td class="is-vcentered">
2550
+ <div class="table__color-preview"
2551
+ style="background-color: #e6ebedff;">
2552
+ </div>
2553
+
2554
+ </td>
2555
+ </tr>
2556
+ <tr>
2557
+ <td class="with-icons is-vcentered"
2558
+ id="base-colorsActionMinor150"
2559
+ title="theme: base; category: colors; group: action; name: minor; variant: 150; ">
2560
+ colorsActionMinor150
2561
+ <a href="#base-colorsActionMinor150"
2562
+ title="permalink"
2563
+ class="permalink">
2564
+ 🔗
2565
+ </a>
2566
+ </td>
2567
+ <td class="is-vcentered">
2568
+ <pre>#d9e0e4ff</pre>
2569
+ </td>
2570
+ <td class="is-vcentered">
2571
+ <div class="table__color-preview"
2572
+ style="background-color: #d9e0e4ff;">
2573
+ </div>
2574
+
2575
+ </td>
2576
+ </tr>
2577
+ <tr>
2578
+ <td class="with-icons is-vcentered"
2579
+ id="base-colorsActionMinor200"
2580
+ title="theme: base; category: colors; group: action; name: minor; variant: 200; ">
2581
+ colorsActionMinor200
2582
+ <a href="#base-colorsActionMinor200"
2583
+ title="permalink"
2584
+ class="permalink">
2585
+ 🔗
2586
+ </a>
2587
+ </td>
2588
+ <td class="is-vcentered">
2589
+ <pre>#ccd6dbff</pre>
2590
+ </td>
2591
+ <td class="is-vcentered">
2592
+ <div class="table__color-preview"
2593
+ style="background-color: #ccd6dbff;">
2594
+ </div>
2595
+
2596
+ </td>
2597
+ </tr>
2598
+ <tr>
2599
+ <td class="with-icons is-vcentered"
2600
+ id="base-colorsActionMinor250"
2601
+ title="theme: base; category: colors; group: action; name: minor; variant: 250; ">
2602
+ colorsActionMinor250
2603
+ <a href="#base-colorsActionMinor250"
2604
+ title="permalink"
2605
+ class="permalink">
2606
+ 🔗
2607
+ </a>
2608
+ </td>
2609
+ <td class="is-vcentered">
2610
+ <pre>#b3c2c9ff</pre>
2611
+ </td>
2612
+ <td class="is-vcentered">
2613
+ <div class="table__color-preview"
2614
+ style="background-color: #b3c2c9ff;">
2615
+ </div>
2616
+
2617
+ </td>
2618
+ </tr>
2619
+ <tr>
2620
+ <td class="with-icons is-vcentered"
2621
+ id="base-colorsActionMinor300"
2622
+ title="theme: base; category: colors; group: action; name: minor; variant: 300; ">
2623
+ colorsActionMinor300
2624
+ <a href="#base-colorsActionMinor300"
2625
+ title="permalink"
2626
+ class="permalink">
2627
+ 🔗
2628
+ </a>
2629
+ </td>
2630
+ <td class="is-vcentered">
2631
+ <pre>#99adb7ff</pre>
2632
+ </td>
2633
+ <td class="is-vcentered">
2634
+ <div class="table__color-preview"
2635
+ style="background-color: #99adb7ff;">
2636
+ </div>
2637
+
2638
+ </td>
2639
+ </tr>
2640
+ <tr>
2641
+ <td class="with-icons is-vcentered"
2642
+ id="base-colorsActionMinor400"
2643
+ title="theme: base; category: colors; group: action; name: minor; variant: 400; ">
2644
+ colorsActionMinor400
2645
+ <a href="#base-colorsActionMinor400"
2646
+ title="permalink"
2647
+ class="permalink">
2648
+ 🔗
2649
+ </a>
2650
+ </td>
2651
+ <td class="is-vcentered">
2652
+ <pre>#668494ff</pre>
2653
+ </td>
2654
+ <td class="is-vcentered">
2655
+ <div class="table__color-preview"
2656
+ style="background-color: #668494ff;">
2657
+ </div>
2658
+
2659
+ </td>
2660
+ </tr>
2661
+ <tr>
2662
+ <td class="with-icons is-vcentered"
2663
+ id="base-colorsActionMinor500"
2664
+ title="theme: base; category: colors; group: action; name: minor; variant: 500; ">
2665
+ colorsActionMinor500
2666
+ <a href="#base-colorsActionMinor500"
2667
+ title="permalink"
2668
+ class="permalink">
2669
+ 🔗
2670
+ </a>
2671
+ </td>
2672
+ <td class="is-vcentered">
2673
+ <pre>#335b70ff</pre>
2674
+ </td>
2675
+ <td class="is-vcentered">
2676
+ <div class="table__color-preview"
2677
+ style="background-color: #335b70ff;">
2678
+ </div>
2679
+
2680
+ </td>
2681
+ </tr>
2682
+ <tr>
2683
+ <td class="with-icons is-vcentered"
2684
+ id="base-colorsActionMinor550"
2685
+ title="theme: base; category: colors; group: action; name: minor; variant: 550; ">
2686
+ colorsActionMinor550
2687
+ <a href="#base-colorsActionMinor550"
2688
+ title="permalink"
2689
+ class="permalink">
2690
+ 🔗
2691
+ </a>
2692
+ </td>
2693
+ <td class="is-vcentered">
2694
+ <pre>#19475eff</pre>
2695
+ </td>
2696
+ <td class="is-vcentered">
2697
+ <div class="table__color-preview"
2698
+ style="background-color: #19475eff;">
2699
+ </div>
2700
+
2701
+ </td>
2702
+ </tr>
2703
+ <tr>
2704
+ <td class="with-icons is-vcentered"
2705
+ id="base-colorsActionMinor600"
2706
+ title="theme: base; category: colors; group: action; name: minor; variant: 600; ">
2707
+ colorsActionMinor600
2708
+ <a href="#base-colorsActionMinor600"
2709
+ title="permalink"
2710
+ class="permalink">
2711
+ 🔗
2712
+ </a>
2713
+ </td>
2714
+ <td class="is-vcentered">
2715
+ <pre>#00324cff</pre>
2716
+ </td>
2717
+ <td class="is-vcentered">
2718
+ <div class="table__color-preview"
2719
+ style="background-color: #00324cff;">
2720
+ </div>
2721
+
2722
+ </td>
2723
+ </tr>
2724
+ <tr>
2725
+ <td class="with-icons is-vcentered"
2726
+ id="base-colorsActionMinor850"
2727
+ title="theme: base; category: colors; group: action; name: minor; variant: 850; ">
2728
+ colorsActionMinor850
2729
+ <a href="#base-colorsActionMinor850"
2730
+ title="permalink"
2731
+ class="permalink">
2732
+ 🔗
2733
+ </a>
2734
+ </td>
2735
+ <td class="is-vcentered">
2736
+ <pre>#001926ff</pre>
2737
+ </td>
2738
+ <td class="is-vcentered">
2739
+ <div class="table__color-preview"
2740
+ style="background-color: #001926ff;">
2741
+ </div>
2742
+
2743
+ </td>
2744
+ </tr>
2745
+ <tr>
2746
+ <td class="with-icons is-vcentered"
2747
+ id="base-colorsActionMinor900"
2748
+ title="theme: base; category: colors; group: action; name: minor; variant: 900; ">
2749
+ colorsActionMinor900
2750
+ <a href="#base-colorsActionMinor900"
2751
+ title="permalink"
2752
+ class="permalink">
2753
+ 🔗
2754
+ </a>
2755
+ </td>
2756
+ <td class="is-vcentered">
2757
+ <pre>#00141eff</pre>
2758
+ </td>
2759
+ <td class="is-vcentered">
2760
+ <div class="table__color-preview"
2761
+ style="background-color: #00141eff;">
2762
+ </div>
2763
+
2764
+ </td>
2765
+ </tr>
2766
+ <tr>
2767
+ <td class="with-icons is-vcentered"
2768
+ id="base-colorsActionMinor025"
2769
+ title="theme: base; category: colors; group: action; name: minor; variant: 025; ">
2770
+ colorsActionMinor025
2771
+ <a href="#base-colorsActionMinor025"
2772
+ title="permalink"
2773
+ class="permalink">
2774
+ 🔗
2775
+ </a>
2776
+ </td>
2777
+ <td class="is-vcentered">
2778
+ <pre>#fafbfbff</pre>
2779
+ </td>
2780
+ <td class="is-vcentered">
2781
+ <div class="table__color-preview"
2782
+ style="background-color: #fafbfbff;">
2783
+ </div>
2784
+
2785
+ </td>
2786
+ </tr>
2787
+ <tr>
2788
+ <td class="with-icons is-vcentered"
2789
+ id="base-colorsActionMinor050"
2790
+ title="theme: base; category: colors; group: action; name: minor; variant: 050; ">
2791
+ colorsActionMinor050
2792
+ <a href="#base-colorsActionMinor050"
2793
+ title="permalink"
2794
+ class="permalink">
2795
+ 🔗
2796
+ </a>
2797
+ </td>
2798
+ <td class="is-vcentered">
2799
+ <pre>#f2f5f6ff</pre>
2800
+ </td>
2801
+ <td class="is-vcentered">
2802
+ <div class="table__color-preview"
2803
+ style="background-color: #f2f5f6ff;">
2804
+ </div>
2805
+
2806
+ </td>
2807
+ </tr>
2808
+ <tr>
2809
+ <td class="with-icons is-vcentered"
2810
+ id="base-colorsActionMinorTransparent"
2811
+ title="theme: base; category: colors; group: action; name: minor; variant: transparent; ">
2812
+ colorsActionMinorTransparent
2813
+ <a href="#base-colorsActionMinorTransparent"
2814
+ title="permalink"
2815
+ class="permalink">
2816
+ 🔗
2817
+ </a>
2818
+ </td>
2819
+ <td class="is-vcentered">
2820
+ <pre>#00000000</pre>
2821
+ </td>
2822
+ <td class="is-vcentered">
2823
+ <div class="table__color-preview"
2824
+ style="background-color: #00000000;">
2825
+ </div>
2826
+
2827
+ </td>
2828
+ </tr>
2829
+ <tr>
2830
+ <td class="with-icons is-vcentered"
2831
+ id="base-colorsActionMinorYin030"
2832
+ title="theme: base; category: colors; group: action; name: minor; subgroup: yin; variant: 030; ">
2833
+ colorsActionMinorYin030
2834
+ <a href="#base-colorsActionMinorYin030"
2835
+ title="permalink"
2836
+ class="permalink">
2837
+ 🔗
2838
+ </a>
2839
+ </td>
2840
+ <td class="is-vcentered">
2841
+ <pre>#0000004d</pre>
2842
+ </td>
2843
+ <td class="is-vcentered">
2844
+ <div class="table__color-preview"
2845
+ style="background-color: #0000004d;">
2846
+ </div>
2847
+
2848
+ </td>
2849
+ </tr>
2850
+ <tr>
2851
+ <td class="with-icons is-vcentered"
2852
+ id="base-colorsActionMinorYin055"
2853
+ title="theme: base; category: colors; group: action; name: minor; subgroup: yin; variant: 055; ">
2854
+ colorsActionMinorYin055
2855
+ <a href="#base-colorsActionMinorYin055"
2856
+ title="permalink"
2857
+ class="permalink">
2858
+ 🔗
2859
+ </a>
2860
+ </td>
2861
+ <td class="is-vcentered">
2862
+ <pre>#0000008c</pre>
2863
+ </td>
2864
+ <td class="is-vcentered">
2865
+ <div class="table__color-preview"
2866
+ style="background-color: #0000008c;">
2867
+ </div>
2868
+
2869
+ </td>
2870
+ </tr>
2871
+ <tr>
2872
+ <td class="with-icons is-vcentered"
2873
+ id="base-colorsActionMinorYin065"
2874
+ title="theme: base; category: colors; group: action; name: minor; subgroup: yin; variant: 065; ">
2875
+ colorsActionMinorYin065
2876
+ <a href="#base-colorsActionMinorYin065"
2877
+ title="permalink"
2878
+ class="permalink">
2879
+ 🔗
2880
+ </a>
2881
+ </td>
2882
+ <td class="is-vcentered">
2883
+ <pre>#000000a6</pre>
2884
+ </td>
2885
+ <td class="is-vcentered">
2886
+ <div class="table__color-preview"
2887
+ style="background-color: #000000a6;">
2888
+ </div>
2889
+
2890
+ </td>
2891
+ </tr>
2892
+ <tr>
2893
+ <td class="with-icons is-vcentered"
2894
+ id="base-colorsActionMinorYin090"
2895
+ title="theme: base; category: colors; group: action; name: minor; subgroup: yin; variant: 090; ">
2896
+ colorsActionMinorYin090
2897
+ <a href="#base-colorsActionMinorYin090"
2898
+ title="permalink"
2899
+ class="permalink">
2900
+ 🔗
2901
+ </a>
2902
+ </td>
2903
+ <td class="is-vcentered">
2904
+ <pre>#000000e6</pre>
2905
+ </td>
2906
+ <td class="is-vcentered">
2907
+ <div class="table__color-preview"
2908
+ style="background-color: #000000e6;">
2909
+ </div>
2910
+
2911
+ </td>
2912
+ </tr>
2913
+ <tr>
2914
+ <td class="with-icons is-vcentered"
2915
+ id="base-colorsActionMinorYang100"
2916
+ title="theme: base; category: colors; group: action; name: minor; subgroup: yang; variant: 100; ">
2917
+ colorsActionMinorYang100
2918
+ <a href="#base-colorsActionMinorYang100"
2919
+ title="permalink"
2920
+ class="permalink">
2921
+ 🔗
2922
+ </a>
2923
+ </td>
2924
+ <td class="is-vcentered">
2925
+ <pre>#ffffffff</pre>
2926
+ </td>
2927
+ <td class="is-vcentered">
2928
+ <div class="table__color-preview"
2929
+ style="background-color: #ffffffff;">
2930
+ </div>
2931
+
2932
+ </td>
2933
+ </tr>
2934
+ <tr>
2935
+ <td class="with-icons is-vcentered"
2936
+ id="base-colorsActionDisabled400"
2937
+ title="theme: base; category: colors; group: action; name: disabled; variant: 400; ">
2938
+ colorsActionDisabled400
2939
+ <a href="#base-colorsActionDisabled400"
2940
+ title="permalink"
2941
+ class="permalink">
2942
+ 🔗
2943
+ </a>
2944
+ </td>
2945
+ <td class="is-vcentered">
2946
+ <pre>#f2f5f6ff</pre>
2947
+ </td>
2948
+ <td class="is-vcentered">
2949
+ <div class="table__color-preview"
2950
+ style="background-color: #f2f5f6ff;">
2951
+ </div>
2952
+
2953
+ </td>
2954
+ </tr>
2955
+ <tr>
2956
+ <td class="with-icons is-vcentered"
2957
+ id="base-colorsActionDisabled500"
2958
+ title="theme: base; category: colors; group: action; name: disabled; variant: 500; ">
2959
+ colorsActionDisabled500
2960
+ <a href="#base-colorsActionDisabled500"
2961
+ title="permalink"
2962
+ class="permalink">
2963
+ 🔗
2964
+ </a>
2965
+ </td>
2966
+ <td class="is-vcentered">
2967
+ <pre>#e6ebedff</pre>
2968
+ </td>
2969
+ <td class="is-vcentered">
2970
+ <div class="table__color-preview"
2971
+ style="background-color: #e6ebedff;">
2972
+ </div>
2973
+
2974
+ </td>
2975
+ </tr>
2976
+ <tr>
2977
+ <td class="with-icons is-vcentered"
2978
+ id="base-colorsActionDisabled600"
2979
+ title="theme: base; category: colors; group: action; name: disabled; variant: 600; ">
2980
+ colorsActionDisabled600
2981
+ <a href="#base-colorsActionDisabled600"
2982
+ title="permalink"
2983
+ class="permalink">
2984
+ 🔗
2985
+ </a>
2986
+ </td>
2987
+ <td class="is-vcentered">
2988
+ <pre>#ccd6dbff</pre>
2989
+ </td>
2990
+ <td class="is-vcentered">
2991
+ <div class="table__color-preview"
2992
+ style="background-color: #ccd6dbff;">
2993
+ </div>
2994
+
2995
+ </td>
2996
+ </tr>
2997
+ <tr>
2998
+ <td class="with-icons is-vcentered"
2999
+ id="base-colorsActionReadOnly400"
3000
+ title="theme: base; category: colors; group: action; name: readOnly; variant: 400; ">
3001
+ colorsActionReadOnly400
3002
+ <a href="#base-colorsActionReadOnly400"
3003
+ title="permalink"
3004
+ class="permalink">
3005
+ 🔗
3006
+ </a>
3007
+ </td>
3008
+ <td class="is-vcentered">
3009
+ <pre>#f2f5f6ff</pre>
3010
+ </td>
3011
+ <td class="is-vcentered">
3012
+ <div class="table__color-preview"
3013
+ style="background-color: #f2f5f6ff;">
3014
+ </div>
3015
+
3016
+ </td>
3017
+ </tr>
3018
+ <tr>
3019
+ <td class="with-icons is-vcentered"
3020
+ id="base-colorsActionReadOnly500"
3021
+ title="theme: base; category: colors; group: action; name: readOnly; variant: 500; ">
3022
+ colorsActionReadOnly500
3023
+ <a href="#base-colorsActionReadOnly500"
3024
+ title="permalink"
3025
+ class="permalink">
3026
+ 🔗
3027
+ </a>
3028
+ </td>
3029
+ <td class="is-vcentered">
3030
+ <pre>#e6ebedff</pre>
3031
+ </td>
3032
+ <td class="is-vcentered">
3033
+ <div class="table__color-preview"
3034
+ style="background-color: #e6ebedff;">
3035
+ </div>
3036
+
3037
+ </td>
3038
+ </tr>
3039
+ <tr>
3040
+ <td class="with-icons is-vcentered"
3041
+ id="base-colorsActionReadOnly600"
3042
+ title="theme: base; category: colors; group: action; name: readOnly; variant: 600; ">
3043
+ colorsActionReadOnly600
3044
+ <a href="#base-colorsActionReadOnly600"
3045
+ title="permalink"
3046
+ class="permalink">
3047
+ 🔗
3048
+ </a>
3049
+ </td>
3050
+ <td class="is-vcentered">
3051
+ <pre>#ccd6dbff</pre>
3052
+ </td>
3053
+ <td class="is-vcentered">
3054
+ <div class="table__color-preview"
3055
+ style="background-color: #ccd6dbff;">
3056
+ </div>
3057
+
3058
+ </td>
3059
+ </tr>
3060
+ <tr>
3061
+ <td class="with-icons is-vcentered"
3062
+ id="base-colorsSemanticNeutral200"
3063
+ title="theme: base; category: colors; group: semantic; name: neutral; variant: 200; ">
3064
+ colorsSemanticNeutral200
3065
+ <a href="#base-colorsSemanticNeutral200"
3066
+ title="permalink"
3067
+ class="permalink">
3068
+ 🔗
3069
+ </a>
3070
+ </td>
3071
+ <td class="is-vcentered">
3072
+ <pre>#ccd6dbff</pre>
3073
+ </td>
3074
+ <td class="is-vcentered">
3075
+ <div class="table__color-preview"
3076
+ style="background-color: #ccd6dbff;">
3077
+ </div>
3078
+
3079
+ </td>
3080
+ </tr>
3081
+ <tr>
3082
+ <td class="with-icons is-vcentered"
3083
+ id="base-colorsSemanticNeutral500"
3084
+ title="theme: base; category: colors; group: semantic; name: neutral; variant: 500; ">
3085
+ colorsSemanticNeutral500
3086
+ <a href="#base-colorsSemanticNeutral500"
3087
+ title="permalink"
3088
+ class="permalink">
3089
+ 🔗
3090
+ </a>
3091
+ </td>
3092
+ <td class="is-vcentered">
3093
+ <pre>#335b70ff</pre>
3094
+ </td>
3095
+ <td class="is-vcentered">
3096
+ <div class="table__color-preview"
3097
+ style="background-color: #335b70ff;">
3098
+ </div>
3099
+
3100
+ </td>
3101
+ </tr>
3102
+ <tr>
3103
+ <td class="with-icons is-vcentered"
3104
+ id="base-colorsSemanticNeutral600"
3105
+ title="theme: base; category: colors; group: semantic; name: neutral; variant: 600; ">
3106
+ colorsSemanticNeutral600
3107
+ <a href="#base-colorsSemanticNeutral600"
3108
+ title="permalink"
3109
+ class="permalink">
3110
+ 🔗
3111
+ </a>
3112
+ </td>
3113
+ <td class="is-vcentered">
3114
+ <pre>#00324cff</pre>
3115
+ </td>
3116
+ <td class="is-vcentered">
3117
+ <div class="table__color-preview"
3118
+ style="background-color: #00324cff;">
3119
+ </div>
3120
+
3121
+ </td>
3122
+ </tr>
3123
+ <tr>
3124
+ <td class="with-icons is-vcentered"
3125
+ id="base-colorsSemanticNeutralTransparent"
3126
+ title="theme: base; category: colors; group: semantic; name: neutral; variant: transparent; ">
3127
+ colorsSemanticNeutralTransparent
3128
+ <a href="#base-colorsSemanticNeutralTransparent"
3129
+ title="permalink"
3130
+ class="permalink">
3131
+ 🔗
3132
+ </a>
3133
+ </td>
3134
+ <td class="is-vcentered">
3135
+ <pre>#00000000</pre>
3136
+ </td>
3137
+ <td class="is-vcentered">
3138
+ <div class="table__color-preview"
3139
+ style="background-color: #00000000;">
3140
+ </div>
3141
+
3142
+ </td>
3143
+ </tr>
3144
+ <tr>
3145
+ <td class="with-icons is-vcentered"
3146
+ id="base-colorsSemanticNeutralYin030"
3147
+ title="theme: base; category: colors; group: semantic; name: neutral; subgroup: yin; variant: 030; ">
3148
+ colorsSemanticNeutralYin030
3149
+ <a href="#base-colorsSemanticNeutralYin030"
3150
+ title="permalink"
3151
+ class="permalink">
3152
+ 🔗
3153
+ </a>
3154
+ </td>
3155
+ <td class="is-vcentered">
3156
+ <pre>#0000004d</pre>
3157
+ </td>
3158
+ <td class="is-vcentered">
3159
+ <div class="table__color-preview"
3160
+ style="background-color: #0000004d;">
3161
+ </div>
3162
+
3163
+ </td>
3164
+ </tr>
3165
+ <tr>
3166
+ <td class="with-icons is-vcentered"
3167
+ id="base-colorsSemanticNeutralYin055"
3168
+ title="theme: base; category: colors; group: semantic; name: neutral; subgroup: yin; variant: 055; ">
3169
+ colorsSemanticNeutralYin055
3170
+ <a href="#base-colorsSemanticNeutralYin055"
3171
+ title="permalink"
3172
+ class="permalink">
3173
+ 🔗
3174
+ </a>
3175
+ </td>
3176
+ <td class="is-vcentered">
3177
+ <pre>#0000008c</pre>
3178
+ </td>
3179
+ <td class="is-vcentered">
3180
+ <div class="table__color-preview"
3181
+ style="background-color: #0000008c;">
3182
+ </div>
3183
+
3184
+ </td>
3185
+ </tr>
3186
+ <tr>
3187
+ <td class="with-icons is-vcentered"
3188
+ id="base-colorsSemanticNeutralYin065"
3189
+ title="theme: base; category: colors; group: semantic; name: neutral; subgroup: yin; variant: 065; ">
3190
+ colorsSemanticNeutralYin065
3191
+ <a href="#base-colorsSemanticNeutralYin065"
3192
+ title="permalink"
3193
+ class="permalink">
3194
+ 🔗
3195
+ </a>
3196
+ </td>
3197
+ <td class="is-vcentered">
3198
+ <pre>#000000a6</pre>
3199
+ </td>
3200
+ <td class="is-vcentered">
3201
+ <div class="table__color-preview"
3202
+ style="background-color: #000000a6;">
3203
+ </div>
3204
+
3205
+ </td>
3206
+ </tr>
3207
+ <tr>
3208
+ <td class="with-icons is-vcentered"
3209
+ id="base-colorsSemanticNeutralYin090"
3210
+ title="theme: base; category: colors; group: semantic; name: neutral; subgroup: yin; variant: 090; ">
3211
+ colorsSemanticNeutralYin090
3212
+ <a href="#base-colorsSemanticNeutralYin090"
3213
+ title="permalink"
3214
+ class="permalink">
3215
+ 🔗
3216
+ </a>
3217
+ </td>
3218
+ <td class="is-vcentered">
3219
+ <pre>#000000e6</pre>
3220
+ </td>
3221
+ <td class="is-vcentered">
3222
+ <div class="table__color-preview"
3223
+ style="background-color: #000000e6;">
3224
+ </div>
3225
+
3226
+ </td>
3227
+ </tr>
3228
+ <tr>
3229
+ <td class="with-icons is-vcentered"
3230
+ id="base-colorsSemanticNeutralYang100"
3231
+ title="theme: base; category: colors; group: semantic; name: neutral; subgroup: yang; variant: 100; ">
3232
+ colorsSemanticNeutralYang100
3233
+ <a href="#base-colorsSemanticNeutralYang100"
3234
+ title="permalink"
3235
+ class="permalink">
3236
+ 🔗
3237
+ </a>
3238
+ </td>
3239
+ <td class="is-vcentered">
3240
+ <pre>#ffffffff</pre>
3241
+ </td>
3242
+ <td class="is-vcentered">
3243
+ <div class="table__color-preview"
3244
+ style="background-color: #ffffffff;">
3245
+ </div>
3246
+
3247
+ </td>
3248
+ </tr>
3249
+ <tr>
3250
+ <td class="with-icons is-vcentered"
3251
+ id="base-colorsSemanticFocus250"
3252
+ title="theme: base; category: colors; group: semantic; name: focus; variant: 250; ">
3253
+ colorsSemanticFocus250
3254
+ <a href="#base-colorsSemanticFocus250"
3255
+ title="permalink"
3256
+ class="permalink">
3257
+ 🔗
3258
+ </a>
3259
+ </td>
3260
+ <td class="is-vcentered">
3261
+ <pre>#ffda80ff</pre>
3262
+ </td>
3263
+ <td class="is-vcentered">
3264
+ <div class="table__color-preview"
3265
+ style="background-color: #ffda80ff;">
3266
+ </div>
3267
+
3268
+ </td>
3269
+ </tr>
3270
+ <tr>
3271
+ <td class="with-icons is-vcentered"
3272
+ id="base-colorsSemanticFocus500"
3273
+ title="theme: base; category: colors; group: semantic; name: focus; variant: 500; ">
3274
+ colorsSemanticFocus500
3275
+ <a href="#base-colorsSemanticFocus500"
3276
+ title="permalink"
3277
+ class="permalink">
3278
+ 🔗
3279
+ </a>
3280
+ </td>
3281
+ <td class="is-vcentered">
3282
+ <pre>#ffb500ff</pre>
3283
+ </td>
3284
+ <td class="is-vcentered">
3285
+ <div class="table__color-preview"
3286
+ style="background-color: #ffb500ff;">
3287
+ </div>
3288
+
3289
+ </td>
3290
+ </tr>
3291
+ <tr>
3292
+ <td class="with-icons is-vcentered"
3293
+ id="base-colorsSemanticFocusTransparent"
3294
+ title="theme: base; category: colors; group: semantic; name: focus; variant: transparent; ">
3295
+ colorsSemanticFocusTransparent
3296
+ <a href="#base-colorsSemanticFocusTransparent"
3297
+ title="permalink"
3298
+ class="permalink">
3299
+ 🔗
3300
+ </a>
3301
+ </td>
3302
+ <td class="is-vcentered">
3303
+ <pre>#00000000</pre>
3304
+ </td>
3305
+ <td class="is-vcentered">
3306
+ <div class="table__color-preview"
3307
+ style="background-color: #00000000;">
3308
+ </div>
3309
+
3310
+ </td>
3311
+ </tr>
3312
+ <tr>
3313
+ <td class="with-icons is-vcentered"
3314
+ id="base-colorsSemanticPositive500"
3315
+ title="theme: base; category: colors; group: semantic; name: positive; variant: 500; ">
3316
+ colorsSemanticPositive500
3317
+ <a href="#base-colorsSemanticPositive500"
3318
+ title="permalink"
3319
+ class="permalink">
3320
+ 🔗
3321
+ </a>
3322
+ </td>
3323
+ <td class="is-vcentered">
3324
+ <pre>#008a21ff</pre>
3325
+ </td>
3326
+ <td class="is-vcentered">
3327
+ <div class="table__color-preview"
3328
+ style="background-color: #008a21ff;">
3329
+ </div>
3330
+
3331
+ </td>
3332
+ </tr>
3333
+ <tr>
3334
+ <td class="with-icons is-vcentered"
3335
+ id="base-colorsSemanticPositive600"
3336
+ title="theme: base; category: colors; group: semantic; name: positive; variant: 600; ">
3337
+ colorsSemanticPositive600
3338
+ <a href="#base-colorsSemanticPositive600"
3339
+ title="permalink"
3340
+ class="permalink">
3341
+ 🔗
3342
+ </a>
3343
+ </td>
3344
+ <td class="is-vcentered">
3345
+ <pre>#006e1aff</pre>
3346
+ </td>
3347
+ <td class="is-vcentered">
3348
+ <div class="table__color-preview"
3349
+ style="background-color: #006e1aff;">
3350
+ </div>
3351
+
3352
+ </td>
3353
+ </tr>
3354
+ <tr>
3355
+ <td class="with-icons is-vcentered"
3356
+ id="base-colorsSemanticPositiveTransparent"
3357
+ title="theme: base; category: colors; group: semantic; name: positive; variant: transparent; ">
3358
+ colorsSemanticPositiveTransparent
3359
+ <a href="#base-colorsSemanticPositiveTransparent"
3360
+ title="permalink"
3361
+ class="permalink">
3362
+ 🔗
3363
+ </a>
3364
+ </td>
3365
+ <td class="is-vcentered">
3366
+ <pre>#00000000</pre>
3367
+ </td>
3368
+ <td class="is-vcentered">
3369
+ <div class="table__color-preview"
3370
+ style="background-color: #00000000;">
3371
+ </div>
3372
+
3373
+ </td>
3374
+ </tr>
3375
+ <tr>
3376
+ <td class="with-icons is-vcentered"
3377
+ id="base-colorsSemanticPositiveYin030"
3378
+ title="theme: base; category: colors; group: semantic; name: positive; subgroup: yin; variant: 030; ">
3379
+ colorsSemanticPositiveYin030
3380
+ <a href="#base-colorsSemanticPositiveYin030"
3381
+ title="permalink"
3382
+ class="permalink">
3383
+ 🔗
3384
+ </a>
3385
+ </td>
3386
+ <td class="is-vcentered">
3387
+ <pre>#0000004d</pre>
3388
+ </td>
3389
+ <td class="is-vcentered">
3390
+ <div class="table__color-preview"
3391
+ style="background-color: #0000004d;">
3392
+ </div>
3393
+
3394
+ </td>
3395
+ </tr>
3396
+ <tr>
3397
+ <td class="with-icons is-vcentered"
3398
+ id="base-colorsSemanticPositiveYin055"
3399
+ title="theme: base; category: colors; group: semantic; name: positive; subgroup: yin; variant: 055; ">
3400
+ colorsSemanticPositiveYin055
3401
+ <a href="#base-colorsSemanticPositiveYin055"
3402
+ title="permalink"
3403
+ class="permalink">
3404
+ 🔗
3405
+ </a>
3406
+ </td>
3407
+ <td class="is-vcentered">
3408
+ <pre>#0000008c</pre>
3409
+ </td>
3410
+ <td class="is-vcentered">
3411
+ <div class="table__color-preview"
3412
+ style="background-color: #0000008c;">
3413
+ </div>
3414
+
3415
+ </td>
3416
+ </tr>
3417
+ <tr>
3418
+ <td class="with-icons is-vcentered"
3419
+ id="base-colorsSemanticPositiveYin065"
3420
+ title="theme: base; category: colors; group: semantic; name: positive; subgroup: yin; variant: 065; ">
3421
+ colorsSemanticPositiveYin065
3422
+ <a href="#base-colorsSemanticPositiveYin065"
3423
+ title="permalink"
3424
+ class="permalink">
3425
+ 🔗
3426
+ </a>
3427
+ </td>
3428
+ <td class="is-vcentered">
3429
+ <pre>#000000a6</pre>
3430
+ </td>
3431
+ <td class="is-vcentered">
3432
+ <div class="table__color-preview"
3433
+ style="background-color: #000000a6;">
3434
+ </div>
3435
+
3436
+ </td>
3437
+ </tr>
3438
+ <tr>
3439
+ <td class="with-icons is-vcentered"
3440
+ id="base-colorsSemanticPositiveYin090"
3441
+ title="theme: base; category: colors; group: semantic; name: positive; subgroup: yin; variant: 090; ">
3442
+ colorsSemanticPositiveYin090
3443
+ <a href="#base-colorsSemanticPositiveYin090"
3444
+ title="permalink"
3445
+ class="permalink">
3446
+ 🔗
3447
+ </a>
3448
+ </td>
3449
+ <td class="is-vcentered">
3450
+ <pre>#000000e6</pre>
3451
+ </td>
3452
+ <td class="is-vcentered">
3453
+ <div class="table__color-preview"
3454
+ style="background-color: #000000e6;">
3455
+ </div>
3456
+
3457
+ </td>
3458
+ </tr>
3459
+ <tr>
3460
+ <td class="with-icons is-vcentered"
3461
+ id="base-colorsSemanticPositiveYang100"
3462
+ title="theme: base; category: colors; group: semantic; name: positive; subgroup: yang; variant: 100; ">
3463
+ colorsSemanticPositiveYang100
3464
+ <a href="#base-colorsSemanticPositiveYang100"
3465
+ title="permalink"
3466
+ class="permalink">
3467
+ 🔗
3468
+ </a>
3469
+ </td>
3470
+ <td class="is-vcentered">
3471
+ <pre>#ffffffff</pre>
3472
+ </td>
3473
+ <td class="is-vcentered">
3474
+ <div class="table__color-preview"
3475
+ style="background-color: #ffffffff;">
3476
+ </div>
3477
+
3478
+ </td>
3479
+ </tr>
3480
+ <tr>
3481
+ <td class="with-icons is-vcentered"
3482
+ id="base-colorsSemanticNegative500"
3483
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 500; ">
3484
+ colorsSemanticNegative500
3485
+ <a href="#base-colorsSemanticNegative500"
3486
+ title="permalink"
3487
+ class="permalink">
3488
+ 🔗
3489
+ </a>
3490
+ </td>
3491
+ <td class="is-vcentered">
3492
+ <pre>#cd384bff</pre>
3493
+ </td>
3494
+ <td class="is-vcentered">
3495
+ <div class="table__color-preview"
3496
+ style="background-color: #cd384bff;">
3497
+ </div>
3498
+
3499
+ </td>
3500
+ </tr>
3501
+ <tr>
3502
+ <td class="with-icons is-vcentered"
3503
+ id="base-colorsSemanticNegative600"
3504
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 600; ">
3505
+ colorsSemanticNegative600
3506
+ <a href="#base-colorsSemanticNegative600"
3507
+ title="permalink"
3508
+ class="permalink">
3509
+ 🔗
3510
+ </a>
3511
+ </td>
3512
+ <td class="is-vcentered">
3513
+ <pre>#a42d3cff</pre>
3514
+ </td>
3515
+ <td class="is-vcentered">
3516
+ <div class="table__color-preview"
3517
+ style="background-color: #a42d3cff;">
3518
+ </div>
3519
+
3520
+ </td>
3521
+ </tr>
3522
+ <tr>
3523
+ <td class="with-icons is-vcentered"
3524
+ id="base-colorsSemanticNegativeTransparent"
3525
+ title="theme: base; category: colors; group: semantic; name: negative; variant: transparent; ">
3526
+ colorsSemanticNegativeTransparent
3527
+ <a href="#base-colorsSemanticNegativeTransparent"
3528
+ title="permalink"
3529
+ class="permalink">
3530
+ 🔗
3531
+ </a>
3532
+ </td>
3533
+ <td class="is-vcentered">
3534
+ <pre>#00000000</pre>
3535
+ </td>
3536
+ <td class="is-vcentered">
3537
+ <div class="table__color-preview"
3538
+ style="background-color: #00000000;">
3539
+ </div>
3540
+
3541
+ </td>
3542
+ </tr>
3543
+ <tr>
3544
+ <td class="with-icons is-vcentered"
3545
+ id="base-colorsSemanticNegativeYin030"
3546
+ title="theme: base; category: colors; group: semantic; name: negative; subgroup: yin; variant: 030; ">
3547
+ colorsSemanticNegativeYin030
3548
+ <a href="#base-colorsSemanticNegativeYin030"
3549
+ title="permalink"
3550
+ class="permalink">
3551
+ 🔗
3552
+ </a>
3553
+ </td>
3554
+ <td class="is-vcentered">
3555
+ <pre>#0000004d</pre>
3556
+ </td>
3557
+ <td class="is-vcentered">
3558
+ <div class="table__color-preview"
3559
+ style="background-color: #0000004d;">
3560
+ </div>
3561
+
3562
+ </td>
3563
+ </tr>
3564
+ <tr>
3565
+ <td class="with-icons is-vcentered"
3566
+ id="base-colorsSemanticNegativeYin055"
3567
+ title="theme: base; category: colors; group: semantic; name: negative; subgroup: yin; variant: 055; ">
3568
+ colorsSemanticNegativeYin055
3569
+ <a href="#base-colorsSemanticNegativeYin055"
3570
+ title="permalink"
3571
+ class="permalink">
3572
+ 🔗
3573
+ </a>
3574
+ </td>
3575
+ <td class="is-vcentered">
3576
+ <pre>#0000008c</pre>
3577
+ </td>
3578
+ <td class="is-vcentered">
3579
+ <div class="table__color-preview"
3580
+ style="background-color: #0000008c;">
3581
+ </div>
3582
+
3583
+ </td>
3584
+ </tr>
3585
+ <tr>
3586
+ <td class="with-icons is-vcentered"
3587
+ id="base-colorsSemanticNegativeYin065"
3588
+ title="theme: base; category: colors; group: semantic; name: negative; subgroup: yin; variant: 065; ">
3589
+ colorsSemanticNegativeYin065
3590
+ <a href="#base-colorsSemanticNegativeYin065"
3591
+ title="permalink"
3592
+ class="permalink">
3593
+ 🔗
3594
+ </a>
3595
+ </td>
3596
+ <td class="is-vcentered">
3597
+ <pre>#000000a6</pre>
3598
+ </td>
3599
+ <td class="is-vcentered">
3600
+ <div class="table__color-preview"
3601
+ style="background-color: #000000a6;">
3602
+ </div>
3603
+
3604
+ </td>
3605
+ </tr>
3606
+ <tr>
3607
+ <td class="with-icons is-vcentered"
3608
+ id="base-colorsSemanticNegativeYin090"
3609
+ title="theme: base; category: colors; group: semantic; name: negative; subgroup: yin; variant: 090; ">
3610
+ colorsSemanticNegativeYin090
3611
+ <a href="#base-colorsSemanticNegativeYin090"
3612
+ title="permalink"
3613
+ class="permalink">
3614
+ 🔗
3615
+ </a>
3616
+ </td>
3617
+ <td class="is-vcentered">
3618
+ <pre>#000000e6</pre>
3619
+ </td>
3620
+ <td class="is-vcentered">
3621
+ <div class="table__color-preview"
3622
+ style="background-color: #000000e6;">
3623
+ </div>
3624
+
3625
+ </td>
3626
+ </tr>
3627
+ <tr>
3628
+ <td class="with-icons is-vcentered"
3629
+ id="base-colorsSemanticNegativeYang100"
3630
+ title="theme: base; category: colors; group: semantic; name: negative; subgroup: yang; variant: 100; ">
3631
+ colorsSemanticNegativeYang100
3632
+ <a href="#base-colorsSemanticNegativeYang100"
3633
+ title="permalink"
3634
+ class="permalink">
3635
+ 🔗
3636
+ </a>
3637
+ </td>
3638
+ <td class="is-vcentered">
3639
+ <pre>#ffffffff</pre>
3640
+ </td>
3641
+ <td class="is-vcentered">
3642
+ <div class="table__color-preview"
3643
+ style="background-color: #ffffffff;">
3644
+ </div>
3645
+
3646
+ </td>
3647
+ </tr>
3648
+ <tr>
3649
+ <td class="with-icons is-vcentered"
3650
+ id="base-colorsSemanticCaution400"
3651
+ title="theme: base; category: colors; group: semantic; name: caution; variant: 400; ">
3652
+ colorsSemanticCaution400
3653
+ <a href="#base-colorsSemanticCaution400"
3654
+ title="permalink"
3655
+ class="permalink">
3656
+ 🔗
3657
+ </a>
3658
+ </td>
3659
+ <td class="is-vcentered">
3660
+ <pre>#f28533ff</pre>
3661
+ </td>
3662
+ <td class="is-vcentered">
3663
+ <div class="table__color-preview"
3664
+ style="background-color: #f28533ff;">
3665
+ </div>
3666
+
3667
+ </td>
3668
+ </tr>
3669
+ <tr>
3670
+ <td class="with-icons is-vcentered"
3671
+ id="base-colorsSemanticCaution500"
3672
+ title="theme: base; category: colors; group: semantic; name: caution; variant: 500; ">
3673
+ colorsSemanticCaution500
3674
+ <a href="#base-colorsSemanticCaution500"
3675
+ title="permalink"
3676
+ class="permalink">
3677
+ 🔗
3678
+ </a>
3679
+ </td>
3680
+ <td class="is-vcentered">
3681
+ <pre>#ef6700ff</pre>
3682
+ </td>
3683
+ <td class="is-vcentered">
3684
+ <div class="table__color-preview"
3685
+ style="background-color: #ef6700ff;">
3686
+ </div>
3687
+
3688
+ </td>
3689
+ </tr>
3690
+ <tr>
3691
+ <td class="with-icons is-vcentered"
3692
+ id="base-colorsSemanticCaution600"
3693
+ title="theme: base; category: colors; group: semantic; name: caution; variant: 600; ">
3694
+ colorsSemanticCaution600
3695
+ <a href="#base-colorsSemanticCaution600"
3696
+ title="permalink"
3697
+ class="permalink">
3698
+ 🔗
3699
+ </a>
3700
+ </td>
3701
+ <td class="is-vcentered">
3702
+ <pre>#bf5200ff</pre>
3703
+ </td>
3704
+ <td class="is-vcentered">
3705
+ <div class="table__color-preview"
3706
+ style="background-color: #bf5200ff;">
3707
+ </div>
3708
+
3709
+ </td>
3710
+ </tr>
3711
+ <tr>
3712
+ <td class="with-icons is-vcentered"
3713
+ id="base-colorsSemanticCaution650"
3714
+ title="theme: base; category: colors; group: semantic; name: caution; variant: 650; ">
3715
+ colorsSemanticCaution650
3716
+ <a href="#base-colorsSemanticCaution650"
3717
+ title="permalink"
3718
+ class="permalink">
3719
+ 🔗
3720
+ </a>
3721
+ </td>
3722
+ <td class="is-vcentered">
3723
+ <pre>#a74800ff</pre>
3724
+ </td>
3725
+ <td class="is-vcentered">
3726
+ <div class="table__color-preview"
3727
+ style="background-color: #a74800ff;">
3728
+ </div>
3729
+
3730
+ </td>
3731
+ </tr>
3732
+ <tr>
3733
+ <td class="with-icons is-vcentered"
3734
+ id="base-colorsSemanticCautionTransparent"
3735
+ title="theme: base; category: colors; group: semantic; name: caution; variant: transparent; ">
3736
+ colorsSemanticCautionTransparent
3737
+ <a href="#base-colorsSemanticCautionTransparent"
3738
+ title="permalink"
3739
+ class="permalink">
3740
+ 🔗
3741
+ </a>
3742
+ </td>
3743
+ <td class="is-vcentered">
3744
+ <pre>#00000000</pre>
3745
+ </td>
3746
+ <td class="is-vcentered">
3747
+ <div class="table__color-preview"
3748
+ style="background-color: #00000000;">
3749
+ </div>
3750
+
3751
+ </td>
3752
+ </tr>
3753
+ <tr>
3754
+ <td class="with-icons is-vcentered"
3755
+ id="base-colorsSemanticCautionYin030"
3756
+ title="theme: base; category: colors; group: semantic; name: caution; subgroup: yin; variant: 030; ">
3757
+ colorsSemanticCautionYin030
3758
+ <a href="#base-colorsSemanticCautionYin030"
3759
+ title="permalink"
3760
+ class="permalink">
3761
+ 🔗
3762
+ </a>
3763
+ </td>
3764
+ <td class="is-vcentered">
3765
+ <pre>#0000004d</pre>
3766
+ </td>
3767
+ <td class="is-vcentered">
3768
+ <div class="table__color-preview"
3769
+ style="background-color: #0000004d;">
3770
+ </div>
3771
+
3772
+ </td>
3773
+ </tr>
3774
+ <tr>
3775
+ <td class="with-icons is-vcentered"
3776
+ id="base-colorsSemanticCautionYin055"
3777
+ title="theme: base; category: colors; group: semantic; name: caution; subgroup: yin; variant: 055; ">
3778
+ colorsSemanticCautionYin055
3779
+ <a href="#base-colorsSemanticCautionYin055"
3780
+ title="permalink"
3781
+ class="permalink">
3782
+ 🔗
3783
+ </a>
3784
+ </td>
3785
+ <td class="is-vcentered">
3786
+ <pre>#0000008c</pre>
3787
+ </td>
3788
+ <td class="is-vcentered">
3789
+ <div class="table__color-preview"
3790
+ style="background-color: #0000008c;">
3791
+ </div>
3792
+
3793
+ </td>
3794
+ </tr>
3795
+ <tr>
3796
+ <td class="with-icons is-vcentered"
3797
+ id="base-colorsSemanticCautionYin065"
3798
+ title="theme: base; category: colors; group: semantic; name: caution; subgroup: yin; variant: 065; ">
3799
+ colorsSemanticCautionYin065
3800
+ <a href="#base-colorsSemanticCautionYin065"
3801
+ title="permalink"
3802
+ class="permalink">
3803
+ 🔗
3804
+ </a>
3805
+ </td>
3806
+ <td class="is-vcentered">
3807
+ <pre>#000000a6</pre>
3808
+ </td>
3809
+ <td class="is-vcentered">
3810
+ <div class="table__color-preview"
3811
+ style="background-color: #000000a6;">
3812
+ </div>
3813
+
3814
+ </td>
3815
+ </tr>
3816
+ <tr>
3817
+ <td class="with-icons is-vcentered"
3818
+ id="base-colorsSemanticCautionYin090"
3819
+ title="theme: base; category: colors; group: semantic; name: caution; subgroup: yin; variant: 090; ">
3820
+ colorsSemanticCautionYin090
3821
+ <a href="#base-colorsSemanticCautionYin090"
3822
+ title="permalink"
3823
+ class="permalink">
3824
+ 🔗
3825
+ </a>
3826
+ </td>
3827
+ <td class="is-vcentered">
3828
+ <pre>#000000e6</pre>
3829
+ </td>
3830
+ <td class="is-vcentered">
3831
+ <div class="table__color-preview"
3832
+ style="background-color: #000000e6;">
3833
+ </div>
3834
+
3835
+ </td>
3836
+ </tr>
3837
+ <tr>
3838
+ <td class="with-icons is-vcentered"
3839
+ id="base-colorsSemanticCautionYang100"
3840
+ title="theme: base; category: colors; group: semantic; name: caution; subgroup: yang; variant: 100; ">
3841
+ colorsSemanticCautionYang100
3842
+ <a href="#base-colorsSemanticCautionYang100"
3843
+ title="permalink"
3844
+ class="permalink">
3845
+ 🔗
3846
+ </a>
3847
+ </td>
3848
+ <td class="is-vcentered">
3849
+ <pre>#ffffffff</pre>
3850
+ </td>
3851
+ <td class="is-vcentered">
3852
+ <div class="table__color-preview"
3853
+ style="background-color: #ffffffff;">
3854
+ </div>
3855
+
3856
+ </td>
3857
+ </tr>
3858
+ <tr>
3859
+ <td class="with-icons is-vcentered"
3860
+ id="base-colorsSemanticInfo150"
3861
+ title="theme: base; category: colors; group: semantic; name: info; variant: 150; ">
3862
+ colorsSemanticInfo150
3863
+ <a href="#base-colorsSemanticInfo150"
3864
+ title="permalink"
3865
+ class="permalink">
3866
+ 🔗
3867
+ </a>
3868
+ </td>
3869
+ <td class="is-vcentered">
3870
+ <pre>#b3cfe5ff</pre>
3871
+ </td>
3872
+ <td class="is-vcentered">
3873
+ <div class="table__color-preview"
3874
+ style="background-color: #b3cfe5ff;">
3875
+ </div>
3876
+
3877
+ </td>
3878
+ </tr>
3879
+ <tr>
3880
+ <td class="with-icons is-vcentered"
3881
+ id="base-colorsSemanticInfo500"
3882
+ title="theme: base; category: colors; group: semantic; name: info; variant: 500; ">
3883
+ colorsSemanticInfo500
3884
+ <a href="#base-colorsSemanticInfo500"
3885
+ title="permalink"
3886
+ class="permalink">
3887
+ 🔗
3888
+ </a>
3889
+ </td>
3890
+ <td class="is-vcentered">
3891
+ <pre>#0060a7ff</pre>
3892
+ </td>
3893
+ <td class="is-vcentered">
3894
+ <div class="table__color-preview"
3895
+ style="background-color: #0060a7ff;">
3896
+ </div>
3897
+
3898
+ </td>
3899
+ </tr>
3900
+ <tr>
3901
+ <td class="with-icons is-vcentered"
3902
+ id="base-colorsSemanticInfo600"
3903
+ title="theme: base; category: colors; group: semantic; name: info; variant: 600; ">
3904
+ colorsSemanticInfo600
3905
+ <a href="#base-colorsSemanticInfo600"
3906
+ title="permalink"
3907
+ class="permalink">
3908
+ 🔗
3909
+ </a>
3910
+ </td>
3911
+ <td class="is-vcentered">
3912
+ <pre>#004d86ff</pre>
3913
+ </td>
3914
+ <td class="is-vcentered">
3915
+ <div class="table__color-preview"
3916
+ style="background-color: #004d86ff;">
3917
+ </div>
3918
+
3919
+ </td>
3920
+ </tr>
3921
+ <tr>
3922
+ <td class="with-icons is-vcentered"
3923
+ id="base-colorsSemanticInfoTransparent"
3924
+ title="theme: base; category: colors; group: semantic; name: info; variant: transparent; ">
3925
+ colorsSemanticInfoTransparent
3926
+ <a href="#base-colorsSemanticInfoTransparent"
3927
+ title="permalink"
3928
+ class="permalink">
3929
+ 🔗
3930
+ </a>
3931
+ </td>
3932
+ <td class="is-vcentered">
3933
+ <pre>#00000000</pre>
3934
+ </td>
3935
+ <td class="is-vcentered">
3936
+ <div class="table__color-preview"
3937
+ style="background-color: #00000000;">
3938
+ </div>
3939
+
3940
+ </td>
3941
+ </tr>
3942
+ <tr>
3943
+ <td class="with-icons is-vcentered"
3944
+ id="base-colorsSemanticInfoYin030"
3945
+ title="theme: base; category: colors; group: semantic; name: info; subgroup: yin; variant: 030; ">
3946
+ colorsSemanticInfoYin030
3947
+ <a href="#base-colorsSemanticInfoYin030"
3948
+ title="permalink"
3949
+ class="permalink">
3950
+ 🔗
3951
+ </a>
3952
+ </td>
3953
+ <td class="is-vcentered">
3954
+ <pre>#0000004d</pre>
3955
+ </td>
3956
+ <td class="is-vcentered">
3957
+ <div class="table__color-preview"
3958
+ style="background-color: #0000004d;">
3959
+ </div>
3960
+
3961
+ </td>
3962
+ </tr>
3963
+ <tr>
3964
+ <td class="with-icons is-vcentered"
3965
+ id="base-colorsSemanticInfoYin055"
3966
+ title="theme: base; category: colors; group: semantic; name: info; subgroup: yin; variant: 055; ">
3967
+ colorsSemanticInfoYin055
3968
+ <a href="#base-colorsSemanticInfoYin055"
3969
+ title="permalink"
3970
+ class="permalink">
3971
+ 🔗
3972
+ </a>
3973
+ </td>
3974
+ <td class="is-vcentered">
3975
+ <pre>#0000008c</pre>
3976
+ </td>
3977
+ <td class="is-vcentered">
3978
+ <div class="table__color-preview"
3979
+ style="background-color: #0000008c;">
3980
+ </div>
3981
+
3982
+ </td>
3983
+ </tr>
3984
+ <tr>
3985
+ <td class="with-icons is-vcentered"
3986
+ id="base-colorsSemanticInfoYin065"
3987
+ title="theme: base; category: colors; group: semantic; name: info; subgroup: yin; variant: 065; ">
3988
+ colorsSemanticInfoYin065
3989
+ <a href="#base-colorsSemanticInfoYin065"
3990
+ title="permalink"
3991
+ class="permalink">
3992
+ 🔗
3993
+ </a>
3994
+ </td>
3995
+ <td class="is-vcentered">
3996
+ <pre>#000000a6</pre>
3997
+ </td>
3998
+ <td class="is-vcentered">
3999
+ <div class="table__color-preview"
4000
+ style="background-color: #000000a6;">
4001
+ </div>
4002
+
4003
+ </td>
4004
+ </tr>
4005
+ <tr>
4006
+ <td class="with-icons is-vcentered"
4007
+ id="base-colorsSemanticInfoYin090"
4008
+ title="theme: base; category: colors; group: semantic; name: info; subgroup: yin; variant: 090; ">
4009
+ colorsSemanticInfoYin090
4010
+ <a href="#base-colorsSemanticInfoYin090"
4011
+ title="permalink"
4012
+ class="permalink">
4013
+ 🔗
4014
+ </a>
4015
+ </td>
4016
+ <td class="is-vcentered">
4017
+ <pre>#000000e6</pre>
4018
+ </td>
4019
+ <td class="is-vcentered">
4020
+ <div class="table__color-preview"
4021
+ style="background-color: #000000e6;">
4022
+ </div>
4023
+
4024
+ </td>
4025
+ </tr>
4026
+ <tr>
4027
+ <td class="with-icons is-vcentered"
4028
+ id="base-colorsSemanticInfoYang100"
4029
+ title="theme: base; category: colors; group: semantic; name: info; subgroup: yang; variant: 100; ">
4030
+ colorsSemanticInfoYang100
4031
+ <a href="#base-colorsSemanticInfoYang100"
4032
+ title="permalink"
4033
+ class="permalink">
4034
+ 🔗
4035
+ </a>
4036
+ </td>
4037
+ <td class="is-vcentered">
4038
+ <pre>#ffffffff</pre>
4039
+ </td>
4040
+ <td class="is-vcentered">
4041
+ <div class="table__color-preview"
4042
+ style="background-color: #ffffffff;">
4043
+ </div>
4044
+
4045
+ </td>
4046
+ </tr>
4047
+ </table>
4048
+ </section>
4049
+ </main>
4050
+ </div>
4051
+
4052
+
4053
+ </div>
4054
+
4055
+ <script>
4056
+ const searchParams = new URLSearchParams(window.location.search);
4057
+ const embedded = !!searchParams.get('embedded');
4058
+ if(embedded) {
4059
+ document.body.classList.add('embedded')
4060
+ }
4061
+ </script>
4062
+ </body>
4063
+ </html>