Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
<div class="midwest-layout size-default padding-default type-default" style="--layout-grid-gap: 2rem; --layout-sidebar-width: 350px">
  <div class="wrapper">
    <div data-controller="color-selector"
       data-action="midwest-color-picker:update->color-selector#apply"
      class="flex flex-col gap-8">
      <div class="flex flex-wrap gap-6">
        <div>
          <div data-controller="midwest-color-picker" data-scale-target="theme" class="midwest-color-picker midwest-form-group">
            <div class="midwest-form-group__top">
              <label class="midwest-label " for="field-103c0">
                Theme color
              </label>
            </div>
            <div class="midwest-color-picker-swatches">
              <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103c8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103c8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103c8">
                  <button type="button"
                class="midwest-color-picker-swatch theme-gray"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="gray"
                    aria-label="Gray"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103c8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103c8" data-midwest-tooltip-target="popover">
                  Gray
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103d0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103d0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103d0">
                  <button type="button"
                class="midwest-color-picker-swatch theme-red"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="red"
                    aria-label="Red"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103d0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103d0" data-midwest-tooltip-target="popover">
                  Red
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103d8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103d8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103d8">
                  <button type="button"
                class="midwest-color-picker-swatch theme-orange"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="orange"
                    aria-label="Orange"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103d8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103d8" data-midwest-tooltip-target="popover">
                  Orange
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103e0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103e0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103e0">
                  <button type="button"
                class="midwest-color-picker-swatch theme-gold"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="gold"
                    aria-label="Gold"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103e0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103e0" data-midwest-tooltip-target="popover">
                  Gold
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103e8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103e8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103e8">
                  <button type="button"
                class="midwest-color-picker-swatch theme-yellow"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="yellow"
                    aria-label="Yellow"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103e8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103e8" data-midwest-tooltip-target="popover">
                  Yellow
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103f0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103f0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103f0">
                  <button type="button"
                class="midwest-color-picker-swatch theme-green"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="green"
                    aria-label="Green"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103f0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103f0" data-midwest-tooltip-target="popover">
                  Green
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-103f8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-103f8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-103f8">
                  <button type="button"
                class="midwest-color-picker-swatch theme-lime"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="lime"
                    aria-label="Lime"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-103f8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-103f8" data-midwest-tooltip-target="popover">
                  Lime
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10400" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10400" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10400">
                  <button type="button"
                class="midwest-color-picker-swatch theme-teal"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="teal"
                    aria-label="Teal"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10400" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10400" data-midwest-tooltip-target="popover">
                  Teal
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10408" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10408" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10408">
                  <button type="button"
                class="midwest-color-picker-swatch theme-blue"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="blue"
                    aria-label="Blue"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10408" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10408" data-midwest-tooltip-target="popover">
                  Blue
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10410" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10410" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10410">
                  <button type="button"
                class="midwest-color-picker-swatch theme-indigo"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="indigo"
                    aria-label="Indigo"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10410" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10410" data-midwest-tooltip-target="popover">
                  Indigo
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10418" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10418" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10418">
                  <button type="button"
                class="midwest-color-picker-swatch theme-violet"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="violet"
                    aria-label="Violet"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10418" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10418" data-midwest-tooltip-target="popover">
                  Violet
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10420" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10420" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10420">
                  <button type="button"
                class="midwest-color-picker-swatch theme-magenta"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="magenta"
                    aria-label="Magenta"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10420" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10420" data-midwest-tooltip-target="popover">
                  Magenta
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10428" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10428" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10428">
                  <button type="button"
                class="midwest-color-picker-swatch theme-pink"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="pink"
                    aria-label="Pink"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10428" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10428" data-midwest-tooltip-target="popover">
                  Pink
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10430" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10430" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10430">
                  <button type="button"
                class="midwest-color-picker-swatch is-transparent"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="transparent"
                    aria-label="Default"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10430" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10430" data-midwest-tooltip-target="popover">
                  Default
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10438" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10438" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10438">
                  <button type="button"
                class="midwest-color-picker-swatch is-custom"
                data-action="click->midwest-color-picker#openCustom"
                    data-midwest-color-picker-target="swatch customSwatch"
                    data-color=""
                    aria-label="Custom color"
                    aria-pressed="false"
                    >
                  </button>
                </span>  <span id="tooltip-10438" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10438" data-midwest-tooltip-target="popover">
                  Custom
                </span></span>      <input type="color"
             data-midwest-color-picker-target="colorInput"
             class="sr-only"
             tabindex="-1"
             aria-hidden="true"
             autocomplete="off"
             >
            </div>
          </div>
        </div>
        <div>
          <div data-controller="midwest-color-picker" data-scale-target="complement" class="midwest-color-picker midwest-form-group">
            <div class="midwest-form-group__top">
              <label class="midwest-label " for="field-10440">
                Complement color
              </label>
            </div>
            <div class="midwest-color-picker-swatches">
              <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10448" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10448" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10448">
                  <button type="button"
                class="midwest-color-picker-swatch theme-gray"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="gray"
                    aria-label="Gray"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10448" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10448" data-midwest-tooltip-target="popover">
                  Gray
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10450" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10450" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10450">
                  <button type="button"
                class="midwest-color-picker-swatch theme-red"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="red"
                    aria-label="Red"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10450" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10450" data-midwest-tooltip-target="popover">
                  Red
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10458" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10458" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10458">
                  <button type="button"
                class="midwest-color-picker-swatch theme-orange"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="orange"
                    aria-label="Orange"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10458" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10458" data-midwest-tooltip-target="popover">
                  Orange
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10460" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10460" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10460">
                  <button type="button"
                class="midwest-color-picker-swatch theme-gold"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="gold"
                    aria-label="Gold"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10460" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10460" data-midwest-tooltip-target="popover">
                  Gold
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10468" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10468" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10468">
                  <button type="button"
                class="midwest-color-picker-swatch theme-yellow"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="yellow"
                    aria-label="Yellow"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10468" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10468" data-midwest-tooltip-target="popover">
                  Yellow
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10470" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10470" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10470">
                  <button type="button"
                class="midwest-color-picker-swatch theme-green"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="green"
                    aria-label="Green"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10470" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10470" data-midwest-tooltip-target="popover">
                  Green
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10478" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10478" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10478">
                  <button type="button"
                class="midwest-color-picker-swatch theme-lime"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="lime"
                    aria-label="Lime"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10478" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10478" data-midwest-tooltip-target="popover">
                  Lime
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10480" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10480" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10480">
                  <button type="button"
                class="midwest-color-picker-swatch theme-teal"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="teal"
                    aria-label="Teal"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10480" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10480" data-midwest-tooltip-target="popover">
                  Teal
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10488" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10488" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10488">
                  <button type="button"
                class="midwest-color-picker-swatch theme-blue"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="blue"
                    aria-label="Blue"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10488" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10488" data-midwest-tooltip-target="popover">
                  Blue
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10490" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10490" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10490">
                  <button type="button"
                class="midwest-color-picker-swatch theme-indigo"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="indigo"
                    aria-label="Indigo"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10490" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10490" data-midwest-tooltip-target="popover">
                  Indigo
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-10498" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-10498" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-10498">
                  <button type="button"
                class="midwest-color-picker-swatch theme-violet"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="violet"
                    aria-label="Violet"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-10498" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-10498" data-midwest-tooltip-target="popover">
                  Violet
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-104a0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-104a0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-104a0">
                  <button type="button"
                class="midwest-color-picker-swatch theme-magenta"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="magenta"
                    aria-label="Magenta"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-104a0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-104a0" data-midwest-tooltip-target="popover">
                  Magenta
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-104a8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-104a8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-104a8">
                  <button type="button"
                class="midwest-color-picker-swatch theme-pink"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="pink"
                    aria-label="Pink"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-104a8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-104a8" data-midwest-tooltip-target="popover">
                  Pink
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-104b0" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-104b0" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-104b0">
                  <button type="button"
                class="midwest-color-picker-swatch is-transparent"
                data-action="click->midwest-color-picker#select"
                    data-midwest-color-picker-target="swatch"
                    data-color="transparent"
                    aria-label="Default"
                    aria-pressed="false">
                  </button>
                </span>  <span id="tooltip-104b0" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-104b0" data-midwest-tooltip-target="popover">
                  Default
                </span></span>      <span class="midwest-tooltip" data-controller="midwest-tooltip">
                <span id="tooltip-trigger-104b8" class="midwest-tooltip-trigger" style="anchor-name: --tooltip-104b8" data-action="mouseenter->midwest-tooltip#show mouseleave->midwest-tooltip#hide focus->midwest-tooltip#show blur->midwest-tooltip#hide" aria-describedby="tooltip-104b8">
                  <button type="button"
                class="midwest-color-picker-swatch is-custom"
                data-action="click->midwest-color-picker#openCustom"
                    data-midwest-color-picker-target="swatch customSwatch"
                    data-color=""
                    aria-label="Custom color"
                    aria-pressed="false"
                    >
                  </button>
                </span>  <span id="tooltip-104b8" popover="manual" role="tooltip" class="midwest-tooltip-popover placement-top" style="position-anchor: --tooltip-104b8" data-midwest-tooltip-target="popover">
                  Custom
                </span></span>      <input type="color"
             data-midwest-color-picker-target="colorInput"
             class="sr-only"
             tabindex="-1"
             aria-hidden="true"
             autocomplete="off"
             >
            </div>
          </div>
        </div>
      </div>
      <div data-color-selector-target="strip" class="theme-blue complement-indigo flex flex-col gap-6">
        <div>
          <p class="text-xs font-mono font-semibold text-gray-5 uppercase tracking-widest mb-2">Theme</p>
          <div class="rounded-xl overflow-hidden flex">
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-0"></div>
              <div class="py-1.5 px-2 bg-theme-0 border-t border-theme-0">
                <span class="text-xs font-mono font-semibold text-theme-12">0</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-1"></div>
              <div class="py-1.5 px-2 bg-theme-1 border-t border-theme-0">
                <span class="text-xs font-mono font-semibold text-theme-12">1</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-2"></div>
              <div class="py-1.5 px-2 bg-theme-2 border-t border-theme-1">
                <span class="text-xs font-mono font-semibold text-theme-12">2</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-3"></div>
              <div class="py-1.5 px-2 bg-theme-3 border-t border-theme-2">
                <span class="text-xs font-mono font-semibold text-theme-12">3</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-4"></div>
              <div class="py-1.5 px-2 bg-theme-4 border-t border-theme-3">
                <span class="text-xs font-mono font-semibold text-theme-12">4</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-5"></div>
              <div class="py-1.5 px-2 bg-theme-5 border-t border-theme-4">
                <span class="text-xs font-mono font-semibold text-theme-12">5</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-6"></div>
              <div class="py-1.5 px-2 bg-theme-6 border-t border-theme-5">
                <span class="text-xs font-mono font-semibold text-theme-0">6</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-7"></div>
              <div class="py-1.5 px-2 bg-theme-7 border-t border-theme-6">
                <span class="text-xs font-mono font-semibold text-theme-0">7</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-8"></div>
              <div class="py-1.5 px-2 bg-theme-8 border-t border-theme-7">
                <span class="text-xs font-mono font-semibold text-theme-0">8</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-9"></div>
              <div class="py-1.5 px-2 bg-theme-9 border-t border-theme-8">
                <span class="text-xs font-mono font-semibold text-theme-0">9</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-10"></div>
              <div class="py-1.5 px-2 bg-theme-10 border-t border-theme-9">
                <span class="text-xs font-mono font-semibold text-theme-0">10</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-11"></div>
              <div class="py-1.5 px-2 bg-theme-11 border-t border-theme-10">
                <span class="text-xs font-mono font-semibold text-theme-0">11</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-12"></div>
              <div class="py-1.5 px-2 bg-theme-12 border-t border-theme-11">
                <span class="text-xs font-mono font-semibold text-theme-0">12</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <p class="text-xs font-mono font-semibold text-gray-5 uppercase tracking-widest mb-2">Complement</p>
          <div class="rounded-xl overflow-hidden flex">
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-0"></div>
              <div class="py-1.5 px-2 bg-complement-0 border-t border-complement-0">
                <span class="text-xs font-mono font-semibold text-complement-12">0</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-1"></div>
              <div class="py-1.5 px-2 bg-complement-1 border-t border-complement-0">
                <span class="text-xs font-mono font-semibold text-complement-12">1</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-2"></div>
              <div class="py-1.5 px-2 bg-complement-2 border-t border-complement-1">
                <span class="text-xs font-mono font-semibold text-complement-12">2</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-3"></div>
              <div class="py-1.5 px-2 bg-complement-3 border-t border-complement-2">
                <span class="text-xs font-mono font-semibold text-complement-12">3</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-4"></div>
              <div class="py-1.5 px-2 bg-complement-4 border-t border-complement-3">
                <span class="text-xs font-mono font-semibold text-complement-12">4</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-5"></div>
              <div class="py-1.5 px-2 bg-complement-5 border-t border-complement-4">
                <span class="text-xs font-mono font-semibold text-complement-12">5</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-6"></div>
              <div class="py-1.5 px-2 bg-complement-6 border-t border-complement-5">
                <span class="text-xs font-mono font-semibold text-complement-0">6</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-7"></div>
              <div class="py-1.5 px-2 bg-complement-7 border-t border-complement-6">
                <span class="text-xs font-mono font-semibold text-complement-0">7</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-8"></div>
              <div class="py-1.5 px-2 bg-complement-8 border-t border-complement-7">
                <span class="text-xs font-mono font-semibold text-complement-0">8</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-9"></div>
              <div class="py-1.5 px-2 bg-complement-9 border-t border-complement-8">
                <span class="text-xs font-mono font-semibold text-complement-0">9</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-10"></div>
              <div class="py-1.5 px-2 bg-complement-10 border-t border-complement-9">
                <span class="text-xs font-mono font-semibold text-complement-0">10</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-11"></div>
              <div class="py-1.5 px-2 bg-complement-11 border-t border-complement-10">
                <span class="text-xs font-mono font-semibold text-complement-0">11</span>
              </div>
            </div>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-12"></div>
              <div class="py-1.5 px-2 bg-complement-12 border-t border-complement-11">
                <span class="text-xs font-mono font-semibold text-complement-0">12</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap items-start gap-4">
          <a theme="theme" class="midwest-button variant-default size-default theme-primary" name="button" href="/">
            <span class="midwest-button-content">Primary</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <a theme="theme" class="midwest-button variant-outline size-default theme-primary" name="button" href="/">
            <span class="midwest-button-content">Secondary</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <a theme="theme" class="midwest-button variant-ghost size-default theme-primary" name="button" href="/">
            <span class="midwest-button-content">Ghost</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </a>
          <span theme="theme" class="midwest-badge size-default theme-primary">
            <span class="value">Theme badge</span>
          </span>
          <span theme="complement" class="midwest-badge size-default theme-primary">
            <span class="value">Complement badge</span>
          </span>
          <div class="midwest-icon text-6xl text-theme-5">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Alert for the Experience"><title>Alert for the Experience</title>
                <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
            </div>
          </div>
          <svg class="" fill="none" height="250" viewbox="0 0 650 650" width="250" height="250" xmlns="http://www.w3.org/2000/svg">
            <path class="fill-theme-8" d="M237.022 548.249C237.022 549.693 239.486 551.122 244.272 552.455C249.058 553.789 256.073 555.001 264.917 556.021C273.761 557.042 284.26 557.852 295.814 558.404C307.369 558.956 319.754 559.241 332.26 559.241C344.767 559.241 357.152 558.956 368.706 558.404C380.261 557.852 390.76 557.042 399.604 556.021C408.448 555.001 415.463 553.789 420.249 552.455C425.035 551.122 427.498 549.693 427.498 548.249C427.498 546.806 425.035 545.376 420.249 544.043C415.463 542.709 408.448 541.498 399.604 540.477C390.76 539.456 380.261 538.647 368.706 538.094C357.152 537.542 344.767 537.258 332.26 537.258C319.754 537.258 307.369 537.542 295.814 538.094C284.26 538.647 273.761 539.456 264.917 540.477C256.073 541.498 249.058 542.709 244.272 544.043C239.486 545.376 237.022 546.806 237.022 548.249Z" fill="#495057" opacity="0.15"></path>
            <path class="fill-theme-2" d="M133.868 299.091L133.842 299.065L133.855 299.032H133.861L133.868 299.039V299.091Z" fill="#FFE7B5"></path>
            <path class="fill-theme-4" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V189.287C310.282 191.229 309.51 193.091 308.136 194.465C306.763 195.838 304.901 196.61 302.958 196.612H175.181C173.825 196.607 172.497 196.226 171.345 195.511C170.193 194.796 169.262 193.776 168.655 192.563C168.049 191.35 167.791 189.992 167.91 188.642C168.03 187.291 168.522 186 169.331 184.912C212.179 127.478 276.445 112.567 302.178 109.85Z" fill="#FCC419" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-theme-6" d="M302.958 225.901C304.9 225.903 306.763 226.675 308.136 228.048C309.51 229.422 310.282 231.284 310.284 233.226V284.511C310.285 285.474 310.096 286.428 309.728 287.318C309.36 288.208 308.821 289.016 308.141 289.698C307.461 290.379 306.653 290.92 305.763 291.289C304.874 291.659 303.921 291.849 302.958 291.85H135.622C134.589 291.849 133.568 291.63 132.626 291.208C131.683 290.785 130.84 290.169 130.153 289.398C129.465 288.627 128.947 287.72 128.634 286.736C128.321 285.752 128.219 284.712 128.336 283.686C130.582 265.374 135.312 247.454 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.296 226.342 147.71 225.914 149.155 225.914L302.958 225.901Z" fill="#A7E354" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-theme-8" d="M302.959 321.139C304.901 321.141 306.764 321.913 308.137 323.286C309.51 324.66 310.283 326.522 310.284 328.464V379.749C310.283 381.692 309.51 383.554 308.137 384.927C306.764 386.301 304.901 387.073 302.959 387.075H149.156C147.711 387.073 146.298 386.645 145.096 385.843C143.893 385.042 142.954 383.903 142.396 382.57C135.338 365.532 130.613 347.619 128.349 329.316C128.229 328.288 128.328 327.247 128.639 326.26C128.951 325.273 129.468 324.363 130.156 323.591C130.845 322.818 131.689 322.2 132.633 321.778C133.578 321.355 134.601 321.137 135.636 321.139H302.959Z" fill="#82C91E" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-theme-10" d="M302.959 416.377C304.901 416.379 306.763 417.151 308.137 418.524C309.51 419.898 310.282 421.76 310.284 423.702V495.755C310.284 496.785 310.067 497.803 309.646 498.743C309.226 499.684 308.612 500.525 307.845 501.212C307.078 501.899 306.174 502.416 305.193 502.73C304.212 503.044 303.176 503.148 302.153 503.035C249.516 496.293 201.539 469.417 168.298 428.051C167.486 426.96 166.994 425.665 166.876 424.31C166.758 422.955 167.02 421.594 167.632 420.38C168.244 419.166 169.182 418.145 170.341 417.434C171.5 416.722 172.834 416.347 174.194 416.351L302.959 416.377Z" fill="#3FBFD5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-theme-3" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V153.296C270.192 156.129 231.948 171.25 200.759 196.599H175.181C173.825 196.594 172.497 196.213 171.345 195.498C170.193 194.783 169.262 193.763 168.655 192.55C168.049 191.337 167.791 189.979 167.91 188.629C168.03 187.278 168.522 185.987 169.331 184.899C212.186 127.478 276.451 112.567 302.178 109.85Z" fill="#FFD132"></path>
            <path class="fill-theme-5 the-glimmer" d="M171.379 225.901C155.454 245.405 143.439 267.797 135.993 291.85H135.616C134.582 291.85 133.56 291.63 132.617 291.207C131.673 290.784 130.83 290.166 130.143 289.393C129.455 288.621 128.939 287.712 128.628 286.726C128.316 285.741 128.217 284.7 128.336 283.673C130.589 265.367 135.318 247.451 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.297 226.342 147.71 225.914 149.155 225.914L171.379 225.901Z" fill="#B9EC71"></path>
            <path class="stroke-theme-12" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V189.287C310.282 191.229 309.51 193.091 308.136 194.465C306.763 195.838 304.901 196.61 302.958 196.612H175.181C173.825 196.607 172.497 196.226 171.345 195.511C170.193 194.796 169.262 193.776 168.655 192.563C168.049 191.35 167.791 189.992 167.91 188.642C168.03 187.291 168.522 186 169.331 184.912C212.179 127.478 276.445 112.567 302.178 109.85Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="stroke-theme-12" d="M302.958 225.901C304.9 225.903 306.763 226.675 308.136 228.048C309.51 229.422 310.282 231.284 310.284 233.226V284.511C310.284 285.474 310.096 286.428 309.728 287.318C309.36 288.208 308.821 289.016 308.141 289.698C307.461 290.379 306.653 290.92 305.763 291.289C304.874 291.659 303.921 291.849 302.958 291.85H135.622C134.589 291.849 133.568 291.63 132.626 291.208C131.683 290.785 130.84 290.169 130.153 289.398C129.465 288.627 128.947 287.72 128.634 286.736C128.321 285.752 128.219 284.712 128.336 283.686C130.582 265.374 135.312 247.454 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.296 226.342 147.71 225.914 149.155 225.914L302.958 225.901Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="stroke-theme-12" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-theme-6" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" fill="#1C7ED6"></path>
            <path class="fill-theme-5" d="M522.736 306.488C522.736 309.42 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.626 521.93 323.336C521.859 324.805 521.716 326.268 521.566 327.73C521.583 327.93 521.558 328.131 521.495 328.322C516.352 282.509 495.353 239.937 462.133 207.974C428.913 176.011 385.562 156.669 339.586 153.296V117.15C339.585 116.116 339.802 115.093 340.224 114.149C340.646 113.205 341.262 112.36 342.033 111.671C342.804 110.982 343.712 110.464 344.697 110.15C345.682 109.836 346.723 109.734 347.75 109.85C393.464 115.115 522.736 160.589 522.736 306.488Z" fill="#3691E3"></path>
            <path class="stroke-theme-12" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
            <path class="fill-complement-6" d="M422.877 244.868C423.512 243.581 424.494 242.497 425.713 241.739C426.932 240.981 428.338 240.579 429.774 240.579C431.209 240.579 432.615 240.981 433.834 241.739C435.053 242.497 436.035 243.581 436.67 244.868L450.58 273.065C451.132 274.184 451.948 275.153 452.959 275.885C453.969 276.618 455.143 277.094 456.378 277.27L487.494 281.82C488.914 282.026 490.248 282.625 491.346 283.55C492.443 284.475 493.26 285.688 493.704 287.053C494.147 288.418 494.2 289.88 493.856 291.273C493.512 292.667 492.785 293.936 491.758 294.937L469.242 316.888C468.349 317.76 467.682 318.835 467.296 320.021C466.91 321.208 466.817 322.47 467.025 323.7L472.342 354.698C472.585 356.113 472.427 357.567 471.886 358.897C471.346 360.226 470.443 361.378 469.282 362.221C468.121 363.065 466.747 363.566 465.315 363.669C463.883 363.772 462.452 363.473 461.182 362.804L433.349 348.172C432.247 347.591 431.02 347.287 429.774 347.287C428.528 347.287 427.3 347.591 426.199 348.172L398.366 362.804C397.096 363.473 395.664 363.772 394.232 363.669C392.801 363.566 391.426 363.065 390.265 362.221C389.104 361.378 388.202 360.226 387.661 358.897C387.12 357.567 386.962 356.113 387.205 354.698L392.516 323.7C392.728 322.47 392.638 321.208 392.253 320.021C391.868 318.834 391.199 317.759 390.306 316.888L367.79 294.937C366.762 293.936 366.035 292.667 365.691 291.273C365.347 289.88 365.4 288.418 365.843 287.053C366.287 285.688 367.104 284.475 368.201 283.55C369.299 282.625 370.633 282.026 372.054 281.82L403.169 277.27C404.404 277.095 405.578 276.62 406.587 275.887C407.596 275.154 408.411 274.185 408.961 273.065L422.877 244.868Z" fill="#FCC419"></path>
            <path class="fill-complement-5" d="M388.147 349.128L392.509 323.674C392.721 322.444 392.631 321.182 392.246 319.995C391.861 318.808 391.193 317.733 390.299 316.862L367.783 294.911C366.755 293.91 366.028 292.641 365.684 291.247C365.34 289.854 365.393 288.392 365.837 287.027C366.28 285.662 367.097 284.449 368.195 283.524C369.292 282.599 370.626 282 372.047 281.794L403.162 277.244C404.397 277.069 405.571 276.594 406.58 275.861C407.59 275.128 408.404 274.159 408.954 273.039L422.877 244.842C423.512 243.555 424.494 242.471 425.713 241.713C426.931 240.955 428.338 240.553 429.773 240.553C431.208 240.553 432.615 240.955 433.834 241.713C435.053 242.471 436.035 243.555 436.67 244.842L450.58 273.039C451.131 274.159 451.948 275.127 452.958 275.859C453.968 276.592 455.142 277.068 456.378 277.244L388.147 349.128Z" fill="#FFD132"></path>
            <path class="stroke-theme-12" d="M422.877 244.868C423.512 243.581 424.494 242.497 425.713 241.739C426.932 240.981 428.338 240.579 429.774 240.579C431.209 240.579 432.615 240.981 433.834 241.739C435.053 242.497 436.035 243.581 436.67 244.868L450.58 273.065C451.132 274.184 451.948 275.153 452.959 275.885C453.969 276.618 455.143 277.094 456.378 277.27L487.494 281.82C488.914 282.026 490.248 282.625 491.346 283.55C492.443 284.475 493.26 285.688 493.704 287.053C494.147 288.418 494.2 289.88 493.856 291.273C493.512 292.667 492.785 293.936 491.758 294.937L469.242 316.888C468.349 317.76 467.682 318.835 467.296 320.021C466.91 321.208 466.817 322.47 467.025 323.7L472.342 354.698C472.585 356.113 472.427 357.567 471.886 358.897C471.346 360.226 470.443 361.378 469.282 362.221C468.121 363.065 466.747 363.566 465.315 363.669C463.883 363.772 462.452 363.473 461.182 362.804L433.349 348.172C432.247 347.591 431.02 347.287 429.774 347.287C428.528 347.287 427.3 347.591 426.199 348.172L398.366 362.804C397.096 363.473 395.664 363.772 394.232 363.669C392.801 363.566 391.426 363.065 390.265 362.221C389.104 361.378 388.202 360.226 387.661 358.897C387.12 357.567 386.962 356.113 387.205 354.698L392.516 323.7C392.728 322.47 392.638 321.208 392.253 320.021C391.868 318.834 391.199 317.759 390.306 316.888L367.79 294.937C366.762 293.936 366.035 292.667 365.691 291.273C365.347 289.88 365.4 288.418 365.843 287.053C366.287 285.688 367.104 284.475 368.201 283.55C369.299 282.625 370.633 282.026 372.054 281.82L403.169 277.27C404.404 277.095 405.578 276.62 406.587 275.887C407.596 275.154 408.411 274.185 408.961 273.065L422.877 244.868Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%= midwest_layout do %>
  <div data-controller="color-selector"
       data-action="midwest-color-picker:update->color-selector#apply"
       class="flex flex-col gap-8">
    <%# Pickers %>
    <div class="flex flex-wrap gap-6">
      <div>
        <%= midwest_color_picker(custom: true, target: :theme, label: "Theme color") %>
      </div>
      <div>
        <%= midwest_color_picker(custom: true, target: :complement, label: "Complement color") %>
      </div>
    </div>
    <%# Scale strips + UI preview — theme/complement classes or inline CSS vars applied to this element %>
    <div data-color-selector-target="strip" class="theme-blue complement-indigo flex flex-col gap-6">
      <%# Theme scale strip %>
      <div>
        <p class="text-xs font-mono font-semibold text-gray-5 uppercase tracking-widest mb-2">Theme</p>
        <div class="rounded-xl overflow-hidden flex">
          <% 13.times do |i| %>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-theme-<%= i %>"></div>
              <div class="py-1.5 px-2 bg-theme-<%= i %> border-t border-theme-<%= [i - 1, 0].max %>">
                <span class="text-xs font-mono font-semibold text-theme-<%= i >= 6 ? 0 : 12 %>"><%= i %></span>
              </div>
            </div>
          <% end %>
        </div>
      </div>
      <%# Complement scale strip %>
      <div>
        <p class="text-xs font-mono font-semibold text-gray-5 uppercase tracking-widest mb-2">Complement</p>
        <div class="rounded-xl overflow-hidden flex">
          <% 13.times do |i| %>
            <div class="flex-1 flex flex-col">
              <div class="h-16 bg-complement-<%= i %>"></div>
              <div class="py-1.5 px-2 bg-complement-<%= i %> border-t border-complement-<%= [i - 1, 0].max %>">
                <span class="text-xs font-mono font-semibold text-complement-<%= i >= 6 ? 0 : 12 %>"><%= i %></span>
              </div>
            </div>
          <% end %>
        </div>
      </div>
      <%# Live UI preview %>
      <div class="flex flex-wrap items-start gap-4">
        <%= midwest_button("Primary", theme: :theme) %>
        <%= midwest_button("Secondary", theme: :theme, variant: :outline) %>
        <%= midwest_button("Ghost", theme: :theme, variant: :ghost) %>
        <%= midwest_badge("Theme badge", theme: :theme) %>
        <%= midwest_badge("Complement badge", theme: :complement) %>
        <%= midwest_icon(:'warning', "Alert for the Experience", class: "text-6xl text-theme-5" ) %>
        <svg class="" fill="none" height="250" viewbox="0 0 650 650" width="250" height="250" xmlns="http://www.w3.org/2000/svg">
          <path class="fill-theme-8" d="M237.022 548.249C237.022 549.693 239.486 551.122 244.272 552.455C249.058 553.789 256.073 555.001 264.917 556.021C273.761 557.042 284.26 557.852 295.814 558.404C307.369 558.956 319.754 559.241 332.26 559.241C344.767 559.241 357.152 558.956 368.706 558.404C380.261 557.852 390.76 557.042 399.604 556.021C408.448 555.001 415.463 553.789 420.249 552.455C425.035 551.122 427.498 549.693 427.498 548.249C427.498 546.806 425.035 545.376 420.249 544.043C415.463 542.709 408.448 541.498 399.604 540.477C390.76 539.456 380.261 538.647 368.706 538.094C357.152 537.542 344.767 537.258 332.26 537.258C319.754 537.258 307.369 537.542 295.814 538.094C284.26 538.647 273.761 539.456 264.917 540.477C256.073 541.498 249.058 542.709 244.272 544.043C239.486 545.376 237.022 546.806 237.022 548.249Z" fill="#495057" opacity="0.15"></path>
          <path class="fill-theme-2" d="M133.868 299.091L133.842 299.065L133.855 299.032H133.861L133.868 299.039V299.091Z" fill="#FFE7B5"></path>
          <path class="fill-theme-4" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V189.287C310.282 191.229 309.51 193.091 308.136 194.465C306.763 195.838 304.901 196.61 302.958 196.612H175.181C173.825 196.607 172.497 196.226 171.345 195.511C170.193 194.796 169.262 193.776 168.655 192.563C168.049 191.35 167.791 189.992 167.91 188.642C168.03 187.291 168.522 186 169.331 184.912C212.179 127.478 276.445 112.567 302.178 109.85Z" fill="#FCC419" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-theme-6" d="M302.958 225.901C304.9 225.903 306.763 226.675 308.136 228.048C309.51 229.422 310.282 231.284 310.284 233.226V284.511C310.285 285.474 310.096 286.428 309.728 287.318C309.36 288.208 308.821 289.016 308.141 289.698C307.461 290.379 306.653 290.92 305.763 291.289C304.874 291.659 303.921 291.849 302.958 291.85H135.622C134.589 291.849 133.568 291.63 132.626 291.208C131.683 290.785 130.84 290.169 130.153 289.398C129.465 288.627 128.947 287.72 128.634 286.736C128.321 285.752 128.219 284.712 128.336 283.686C130.582 265.374 135.312 247.454 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.296 226.342 147.71 225.914 149.155 225.914L302.958 225.901Z" fill="#A7E354" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-theme-8" d="M302.959 321.139C304.901 321.141 306.764 321.913 308.137 323.286C309.51 324.66 310.283 326.522 310.284 328.464V379.749C310.283 381.692 309.51 383.554 308.137 384.927C306.764 386.301 304.901 387.073 302.959 387.075H149.156C147.711 387.073 146.298 386.645 145.096 385.843C143.893 385.042 142.954 383.903 142.396 382.57C135.338 365.532 130.613 347.619 128.349 329.316C128.229 328.288 128.328 327.247 128.639 326.26C128.951 325.273 129.468 324.363 130.156 323.591C130.845 322.818 131.689 322.2 132.633 321.778C133.578 321.355 134.601 321.137 135.636 321.139H302.959Z" fill="#82C91E" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-theme-10" d="M302.959 416.377C304.901 416.379 306.763 417.151 308.137 418.524C309.51 419.898 310.282 421.76 310.284 423.702V495.755C310.284 496.785 310.067 497.803 309.646 498.743C309.226 499.684 308.612 500.525 307.845 501.212C307.078 501.899 306.174 502.416 305.193 502.73C304.212 503.044 303.176 503.148 302.153 503.035C249.516 496.293 201.539 469.417 168.298 428.051C167.486 426.96 166.994 425.665 166.876 424.31C166.758 422.955 167.02 421.594 167.632 420.38C168.244 419.166 169.182 418.145 170.341 417.434C171.5 416.722 172.834 416.347 174.194 416.351L302.959 416.377Z" fill="#3FBFD5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-theme-3" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V153.296C270.192 156.129 231.948 171.25 200.759 196.599H175.181C173.825 196.594 172.497 196.213 171.345 195.498C170.193 194.783 169.262 193.763 168.655 192.55C168.049 191.337 167.791 189.979 167.91 188.629C168.03 187.278 168.522 185.987 169.331 184.899C212.186 127.478 276.451 112.567 302.178 109.85Z" fill="#FFD132"></path>
          <path class="fill-theme-5 the-glimmer" d="M171.379 225.901C155.454 245.405 143.439 267.797 135.993 291.85H135.616C134.582 291.85 133.56 291.63 132.617 291.207C131.673 290.784 130.83 290.166 130.143 289.393C129.455 288.621 128.939 287.712 128.628 286.726C128.316 285.741 128.217 284.7 128.336 283.673C130.589 265.367 135.318 247.451 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.297 226.342 147.71 225.914 149.155 225.914L171.379 225.901Z" fill="#B9EC71"></path>
          <path class="stroke-theme-12" d="M302.178 109.85C303.2 109.744 304.233 109.853 305.209 110.17C306.186 110.488 307.086 111.007 307.849 111.693C308.613 112.38 309.225 113.219 309.644 114.157C310.063 115.094 310.281 116.109 310.284 117.137V189.287C310.282 191.229 309.51 193.091 308.136 194.465C306.763 195.838 304.901 196.61 302.958 196.612H175.181C173.825 196.607 172.497 196.226 171.345 195.511C170.193 194.796 169.262 193.776 168.655 192.563C168.049 191.35 167.791 189.992 167.91 188.642C168.03 187.291 168.522 186 169.331 184.912C212.179 127.478 276.445 112.567 302.178 109.85Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="stroke-theme-12" d="M302.958 225.901C304.9 225.903 306.763 226.675 308.136 228.048C309.51 229.422 310.282 231.284 310.284 233.226V284.511C310.284 285.474 310.096 286.428 309.728 287.318C309.36 288.208 308.821 289.016 308.141 289.698C307.461 290.379 306.653 290.92 305.763 291.289C304.874 291.659 303.921 291.849 302.958 291.85H135.622C134.589 291.849 133.568 291.63 132.626 291.208C131.683 290.785 130.84 290.169 130.153 289.398C129.465 288.627 128.947 287.72 128.634 286.736C128.321 285.752 128.219 284.712 128.336 283.686C130.582 265.374 135.312 247.454 142.395 230.418C142.952 229.084 143.891 227.945 145.094 227.143C146.296 226.342 147.71 225.914 149.155 225.914L302.958 225.901Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="stroke-theme-12" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-theme-6" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" fill="#1C7ED6"></path>
          <path class="fill-theme-5" d="M522.736 306.488C522.736 309.42 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.626 521.93 323.336C521.859 324.805 521.716 326.268 521.566 327.73C521.583 327.93 521.558 328.131 521.495 328.322C516.352 282.509 495.353 239.937 462.133 207.974C428.913 176.011 385.562 156.669 339.586 153.296V117.15C339.585 116.116 339.802 115.093 340.224 114.149C340.646 113.205 341.262 112.36 342.033 111.671C342.804 110.982 343.712 110.464 344.697 110.15C345.682 109.836 346.723 109.734 347.75 109.85C393.464 115.115 522.736 160.589 522.736 306.488Z" fill="#3691E3"></path>
          <path class="stroke-theme-12" d="M522.737 306.488C522.737 309.419 522.665 312.273 522.522 315.133C522.379 317.993 522.223 320.625 521.931 323.336C521.859 324.805 521.716 326.267 521.567 327.73C521.583 327.93 521.559 328.131 521.495 328.321C506.786 463.092 387.498 498.426 347.75 503.1C346.723 503.219 345.682 503.12 344.695 502.808C343.709 502.496 342.8 501.979 342.027 501.291C341.255 500.603 340.637 499.759 340.214 498.815C339.791 497.871 339.573 496.848 339.573 495.813V117.156C339.571 116.12 339.788 115.096 340.21 114.15C340.632 113.204 341.25 112.358 342.022 111.668C342.795 110.978 343.704 110.459 344.692 110.146C345.679 109.832 346.721 109.732 347.75 109.85C393.445 115.108 522.737 160.55 522.737 306.488Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
          <path class="fill-complement-6" d="M422.877 244.868C423.512 243.581 424.494 242.497 425.713 241.739C426.932 240.981 428.338 240.579 429.774 240.579C431.209 240.579 432.615 240.981 433.834 241.739C435.053 242.497 436.035 243.581 436.67 244.868L450.58 273.065C451.132 274.184 451.948 275.153 452.959 275.885C453.969 276.618 455.143 277.094 456.378 277.27L487.494 281.82C488.914 282.026 490.248 282.625 491.346 283.55C492.443 284.475 493.26 285.688 493.704 287.053C494.147 288.418 494.2 289.88 493.856 291.273C493.512 292.667 492.785 293.936 491.758 294.937L469.242 316.888C468.349 317.76 467.682 318.835 467.296 320.021C466.91 321.208 466.817 322.47 467.025 323.7L472.342 354.698C472.585 356.113 472.427 357.567 471.886 358.897C471.346 360.226 470.443 361.378 469.282 362.221C468.121 363.065 466.747 363.566 465.315 363.669C463.883 363.772 462.452 363.473 461.182 362.804L433.349 348.172C432.247 347.591 431.02 347.287 429.774 347.287C428.528 347.287 427.3 347.591 426.199 348.172L398.366 362.804C397.096 363.473 395.664 363.772 394.232 363.669C392.801 363.566 391.426 363.065 390.265 362.221C389.104 361.378 388.202 360.226 387.661 358.897C387.12 357.567 386.962 356.113 387.205 354.698L392.516 323.7C392.728 322.47 392.638 321.208 392.253 320.021C391.868 318.834 391.199 317.759 390.306 316.888L367.79 294.937C366.762 293.936 366.035 292.667 365.691 291.273C365.347 289.88 365.4 288.418 365.843 287.053C366.287 285.688 367.104 284.475 368.201 283.55C369.299 282.625 370.633 282.026 372.054 281.82L403.169 277.27C404.404 277.095 405.578 276.62 406.587 275.887C407.596 275.154 408.411 274.185 408.961 273.065L422.877 244.868Z" fill="#FCC419"></path>
          <path class="fill-complement-5" d="M388.147 349.128L392.509 323.674C392.721 322.444 392.631 321.182 392.246 319.995C391.861 318.808 391.193 317.733 390.299 316.862L367.783 294.911C366.755 293.91 366.028 292.641 365.684 291.247C365.34 289.854 365.393 288.392 365.837 287.027C366.28 285.662 367.097 284.449 368.195 283.524C369.292 282.599 370.626 282 372.047 281.794L403.162 277.244C404.397 277.069 405.571 276.594 406.58 275.861C407.59 275.128 408.404 274.159 408.954 273.039L422.877 244.842C423.512 243.555 424.494 242.471 425.713 241.713C426.931 240.955 428.338 240.553 429.773 240.553C431.208 240.553 432.615 240.955 433.834 241.713C435.053 242.471 436.035 243.555 436.67 244.842L450.58 273.039C451.131 274.159 451.948 275.127 452.958 275.859C453.968 276.592 455.142 277.068 456.378 277.244L388.147 349.128Z" fill="#FFD132"></path>
          <path class="stroke-theme-12" d="M422.877 244.868C423.512 243.581 424.494 242.497 425.713 241.739C426.932 240.981 428.338 240.579 429.774 240.579C431.209 240.579 432.615 240.981 433.834 241.739C435.053 242.497 436.035 243.581 436.67 244.868L450.58 273.065C451.132 274.184 451.948 275.153 452.959 275.885C453.969 276.618 455.143 277.094 456.378 277.27L487.494 281.82C488.914 282.026 490.248 282.625 491.346 283.55C492.443 284.475 493.26 285.688 493.704 287.053C494.147 288.418 494.2 289.88 493.856 291.273C493.512 292.667 492.785 293.936 491.758 294.937L469.242 316.888C468.349 317.76 467.682 318.835 467.296 320.021C466.91 321.208 466.817 322.47 467.025 323.7L472.342 354.698C472.585 356.113 472.427 357.567 471.886 358.897C471.346 360.226 470.443 361.378 469.282 362.221C468.121 363.065 466.747 363.566 465.315 363.669C463.883 363.772 462.452 363.473 461.182 362.804L433.349 348.172C432.247 347.591 431.02 347.287 429.774 347.287C428.528 347.287 427.3 347.591 426.199 348.172L398.366 362.804C397.096 363.473 395.664 363.772 394.232 363.669C392.801 363.566 391.426 363.065 390.265 362.221C389.104 361.378 388.202 360.226 387.661 358.897C387.12 357.567 386.962 356.113 387.205 354.698L392.516 323.7C392.728 322.47 392.638 321.208 392.253 320.021C391.868 318.834 391.199 317.759 390.306 316.888L367.79 294.937C366.762 293.936 366.035 292.667 365.691 291.273C365.347 289.88 365.4 288.418 365.843 287.053C366.287 285.688 367.104 284.475 368.201 283.55C369.299 282.625 370.633 282.026 372.054 281.82L403.169 277.27C404.404 277.095 405.578 276.62 406.587 275.887C407.596 275.154 408.411 274.185 408.961 273.065L422.877 244.868Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"></path>
        </svg>
      </div>
    </div><%# /strip %>
  </div>
<% end %>

Color Selector

Pick any named or custom color to see the full 13-step theme scale update live. Named colors swap a theme-{color} class on the strip; custom hex colors apply generated --theme-{0-12}-channels CSS custom properties directly so the scale reflects the exact hue you chose.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Color System/color_selector

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."