@harjs/react-ui 1.1.10 → 1.1.11

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 (24) hide show
  1. package/dist/assets/css/components/data-display/chip/styles.css +1 -0
  2. package/dist/assets/css/components/form/checkbox/color.checked.css +1020 -1024
  3. package/dist/assets/css/components/form/checkbox/color.radio-checked.css +1150 -1154
  4. package/dist/assets/css/components/form/checkbox/color.radio-unchecked.css +727 -735
  5. package/dist/assets/css/components/form/checkbox/color.unchecked.css +727 -735
  6. package/dist/assets/css/components/form/checkbox/css.cjs +4 -4
  7. package/dist/assets/css/components/form/input/addon.css +19 -15
  8. package/dist/assets/css/components/form/input/color.addon.css +511 -0
  9. package/dist/assets/css/components/form/input/css.cjs +4 -0
  10. package/dist/assets/css/components/form/input/styles.css +7 -0
  11. package/dist/assets/css/components/form/input/templates/color.addon.template.css +50 -0
  12. package/dist/assets/css/components/form/select/color.css +635 -0
  13. package/dist/assets/css/components/form/select/css.cjs +43 -0
  14. package/dist/assets/css/components/form/select/options.css +121 -100
  15. package/dist/assets/css/components/form/select/radius.css +45 -0
  16. package/dist/assets/css/components/form/select/size.css +35 -0
  17. package/dist/assets/css/components/form/select/styles.css +8 -6
  18. package/dist/assets/css/components/form/select/templates/color.template.css +62 -0
  19. package/dist/assets/css/components/form/select/templates/radius.template.css +3 -0
  20. package/dist/assets/css/components/form/select/templates/size.template.css +4 -0
  21. package/dist/components/form/checkbox/index.js +1 -3
  22. package/dist/components/form/input/index.js +1 -1
  23. package/dist/components/form/select/index.js +33 -24
  24. package/package.json +1 -1
package/dist/assets/css/components/form/checkbox/color.radio-checked.css CHANGED
@@ -1,1157 +1,1153 @@
1
- .har-checkbox-wrapper {
2
- > label {
3
- > input[type="radio"] {
4
- &:checked {
5
- + span {
6
- > .har-checkbox {
7
- &.blue {
8
- &.filled {
9
- background-color: var(--blue-500);
10
- border: solid var(--stroke-1) var(--blue-500);
11
-
12
- &::before {
13
- background-color: var(--white-100);
14
- }
15
-
16
- &:hover {
17
- background-color: var(--blue-400);
18
- border: solid var(--stroke-1) var(--blue-400);
19
- }
20
-
21
- &:active {
22
- background-color: var(--blue-600);
23
- border: solid var(--stroke-1) var(--blue-600);
24
- }
25
- }
26
-
27
- &.surface {
28
- background-color: var(--blue-100);
29
- border: solid var(--stroke-1) var(--blue-200);
30
- color: var(--blue-700);
31
-
32
- &::before {
33
- background-color: var(--blue-700);
34
- }
35
-
36
- &:hover {
37
- background-color: var(--blue-200);
38
- }
39
-
40
- &:active {
41
- background-color: var(--blue-300);
42
- border: solid var(--stroke-1) var(--blue-300);
43
- }
44
- }
45
-
46
- &.surface-borderless {
47
- background-color: var(--blue-100);
48
- border: solid var(--stroke-1) transparent;
49
- color: var(--blue-700);
50
-
51
- &::before {
52
- background-color: var(--blue-700);
53
- }
54
-
55
- &:hover {
56
- background-color: var(--blue-200);
57
- }
58
-
59
- &:active {
60
- background-color: var(--blue-300);
61
- border: solid var(--stroke-1) var(--blue-300);
62
- }
63
- }
64
-
65
- &.outlined {
66
- background-color: transparent;
67
- border: solid var(--stroke-1) var(--blue-500);
68
- color: var(--blue-700);
69
-
70
- &::before {
71
- background-color: var(--blue-700);
72
- }
73
-
74
- &:hover {
75
- background-color: var(--blue-100);
76
- }
77
-
78
- &:active {
79
- background-color: var(--blue-200);
80
- }
81
- }
82
-
83
- &.dashed {
84
- background-color: transparent;
85
- border: dashed var(--stroke-1) var(--blue-500);
86
- color: var(--blue-700);
87
-
88
- &::before {
89
- background-color: var(--blue-700);
90
- }
91
-
92
- &:hover {
93
- border: dashed var(--stroke-1) var(--blue-300);
94
- color: var(--blue-300);
95
- }
96
-
97
- &:active {
98
- border: dashed var(--stroke-1) var(--blue-500);
99
- color: var(--blue-700);
100
- }
101
- }
102
-
103
- &.borderless {
104
- background-color: transparent;
105
- border: solid var(--stroke-1) transparent;
106
- color: var(--blue-700);
107
-
108
- &::before {
109
- background-color: var(--blue-700);
110
- }
111
-
112
- &:hover {
113
- color: var(--blue-300);
114
- }
115
-
116
- &:active {
117
- color: var(--blue-700);
118
- }
119
- }
120
- }
121
-
122
- &.purple {
123
- &.filled {
124
- background-color: var(--purple-500);
125
- border: solid var(--stroke-1) var(--purple-500);
126
-
127
- &::before {
128
- background-color: var(--white-100);
129
- }
130
-
131
- &:hover {
132
- background-color: var(--purple-400);
133
- border: solid var(--stroke-1) var(--purple-400);
134
- }
135
-
136
- &:active {
137
- background-color: var(--purple-600);
138
- border: solid var(--stroke-1) var(--purple-600);
139
- }
140
- }
141
-
142
- &.surface {
143
- background-color: var(--purple-100);
144
- border: solid var(--stroke-1) var(--purple-200);
145
- color: var(--purple-700);
146
-
147
- &::before {
148
- background-color: var(--purple-700);
149
- }
150
-
151
- &:hover {
152
- background-color: var(--purple-200);
153
- }
154
-
155
- &:active {
156
- background-color: var(--purple-300);
157
- border: solid var(--stroke-1) var(--purple-300);
158
- }
159
- }
160
-
161
- &.surface-borderless {
162
- background-color: var(--purple-100);
163
- border: solid var(--stroke-1) transparent;
164
- color: var(--purple-700);
165
-
166
- &::before {
167
- background-color: var(--purple-700);
168
- }
169
-
170
- &:hover {
171
- background-color: var(--purple-200);
172
- }
173
-
174
- &:active {
175
- background-color: var(--purple-300);
176
- border: solid var(--stroke-1) var(--purple-300);
177
- }
178
- }
179
-
180
- &.outlined {
181
- background-color: transparent;
182
- border: solid var(--stroke-1) var(--purple-500);
183
- color: var(--purple-700);
184
-
185
- &::before {
186
- background-color: var(--purple-700);
187
- }
188
-
189
- &:hover {
190
- background-color: var(--purple-100);
191
- }
192
-
193
- &:active {
194
- background-color: var(--purple-200);
195
- }
196
- }
197
-
198
- &.dashed {
199
- background-color: transparent;
200
- border: dashed var(--stroke-1) var(--purple-500);
201
- color: var(--purple-700);
202
-
203
- &::before {
204
- background-color: var(--purple-700);
205
- }
206
-
207
- &:hover {
208
- border: dashed var(--stroke-1) var(--purple-300);
209
- color: var(--purple-300);
210
- }
211
-
212
- &:active {
213
- border: dashed var(--stroke-1) var(--purple-500);
214
- color: var(--purple-700);
215
- }
216
- }
217
-
218
- &.borderless {
219
- background-color: transparent;
220
- border: solid var(--stroke-1) transparent;
221
- color: var(--purple-700);
222
-
223
- &::before {
224
- background-color: var(--purple-700);
225
- }
226
-
227
- &:hover {
228
- color: var(--purple-300);
229
- }
230
-
231
- &:active {
232
- color: var(--purple-700);
233
- }
234
- }
235
- }
236
-
237
- &.pink {
238
- &.filled {
239
- background-color: var(--pink-500);
240
- border: solid var(--stroke-1) var(--pink-500);
241
-
242
- &::before {
243
- background-color: var(--white-100);
244
- }
245
-
246
- &:hover {
247
- background-color: var(--pink-400);
248
- border: solid var(--stroke-1) var(--pink-400);
249
- }
250
-
251
- &:active {
252
- background-color: var(--pink-600);
253
- border: solid var(--stroke-1) var(--pink-600);
254
- }
255
- }
256
-
257
- &.surface {
258
- background-color: var(--pink-100);
259
- border: solid var(--stroke-1) var(--pink-200);
260
- color: var(--pink-700);
261
-
262
- &::before {
263
- background-color: var(--pink-700);
264
- }
265
-
266
- &:hover {
267
- background-color: var(--pink-200);
268
- }
269
-
270
- &:active {
271
- background-color: var(--pink-300);
272
- border: solid var(--stroke-1) var(--pink-300);
273
- }
274
- }
275
-
276
- &.surface-borderless {
277
- background-color: var(--pink-100);
278
- border: solid var(--stroke-1) transparent;
279
- color: var(--pink-700);
280
-
281
- &::before {
282
- background-color: var(--pink-700);
283
- }
284
-
285
- &:hover {
286
- background-color: var(--pink-200);
287
- }
288
-
289
- &:active {
290
- background-color: var(--pink-300);
291
- border: solid var(--stroke-1) var(--pink-300);
292
- }
293
- }
294
-
295
- &.outlined {
296
- background-color: transparent;
297
- border: solid var(--stroke-1) var(--pink-500);
298
- color: var(--pink-700);
299
-
300
- &::before {
301
- background-color: var(--pink-700);
302
- }
303
-
304
- &:hover {
305
- background-color: var(--pink-100);
306
- }
307
-
308
- &:active {
309
- background-color: var(--pink-200);
310
- }
311
- }
312
-
313
- &.dashed {
314
- background-color: transparent;
315
- border: dashed var(--stroke-1) var(--pink-500);
316
- color: var(--pink-700);
317
-
318
- &::before {
319
- background-color: var(--pink-700);
320
- }
321
-
322
- &:hover {
323
- border: dashed var(--stroke-1) var(--pink-300);
324
- color: var(--pink-300);
325
- }
326
-
327
- &:active {
328
- border: dashed var(--stroke-1) var(--pink-500);
329
- color: var(--pink-700);
330
- }
331
- }
332
-
333
- &.borderless {
334
- background-color: transparent;
335
- border: solid var(--stroke-1) transparent;
336
- color: var(--pink-700);
337
-
338
- &::before {
339
- background-color: var(--pink-700);
340
- }
341
-
342
- &:hover {
343
- color: var(--pink-300);
344
- }
345
-
346
- &:active {
347
- color: var(--pink-700);
348
- }
349
- }
350
- }
351
-
352
- &.red {
353
- &.filled {
354
- background-color: var(--red-500);
355
- border: solid var(--stroke-1) var(--red-500);
356
-
357
- &::before {
358
- background-color: var(--white-100);
359
- }
360
-
361
- &:hover {
362
- background-color: var(--red-400);
363
- border: solid var(--stroke-1) var(--red-400);
364
- }
365
-
366
- &:active {
367
- background-color: var(--red-600);
368
- border: solid var(--stroke-1) var(--red-600);
369
- }
370
- }
371
-
372
- &.surface {
373
- background-color: var(--red-100);
374
- border: solid var(--stroke-1) var(--red-200);
375
- color: var(--red-700);
376
-
377
- &::before {
378
- background-color: var(--red-700);
379
- }
380
-
381
- &:hover {
382
- background-color: var(--red-200);
383
- }
384
-
385
- &:active {
386
- background-color: var(--red-300);
387
- border: solid var(--stroke-1) var(--red-300);
388
- }
389
- }
390
-
391
- &.surface-borderless {
392
- background-color: var(--red-100);
393
- border: solid var(--stroke-1) transparent;
394
- color: var(--red-700);
395
-
396
- &::before {
397
- background-color: var(--red-700);
398
- }
399
-
400
- &:hover {
401
- background-color: var(--red-200);
402
- }
403
-
404
- &:active {
405
- background-color: var(--red-300);
406
- border: solid var(--stroke-1) var(--red-300);
407
- }
408
- }
409
-
410
- &.outlined {
411
- background-color: transparent;
412
- border: solid var(--stroke-1) var(--red-500);
413
- color: var(--red-700);
414
-
415
- &::before {
416
- background-color: var(--red-700);
417
- }
418
-
419
- &:hover {
420
- background-color: var(--red-100);
421
- }
422
-
423
- &:active {
424
- background-color: var(--red-200);
425
- }
426
- }
427
-
428
- &.dashed {
429
- background-color: transparent;
430
- border: dashed var(--stroke-1) var(--red-500);
431
- color: var(--red-700);
432
-
433
- &::before {
434
- background-color: var(--red-700);
435
- }
436
-
437
- &:hover {
438
- border: dashed var(--stroke-1) var(--red-300);
439
- color: var(--red-300);
440
- }
441
-
442
- &:active {
443
- border: dashed var(--stroke-1) var(--red-500);
444
- color: var(--red-700);
445
- }
446
- }
447
-
448
- &.borderless {
449
- background-color: transparent;
450
- border: solid var(--stroke-1) transparent;
451
- color: var(--red-700);
452
-
453
- &::before {
454
- background-color: var(--red-700);
455
- }
456
-
457
- &:hover {
458
- color: var(--red-300);
459
- }
460
-
461
- &:active {
462
- color: var(--red-700);
463
- }
464
- }
465
- }
466
-
467
- &.orange {
468
- &.filled {
469
- background-color: var(--orange-500);
470
- border: solid var(--stroke-1) var(--orange-500);
471
-
472
- &::before {
473
- background-color: var(--white-100);
474
- }
475
-
476
- &:hover {
477
- background-color: var(--orange-400);
478
- border: solid var(--stroke-1) var(--orange-400);
479
- }
480
-
481
- &:active {
482
- background-color: var(--orange-600);
483
- border: solid var(--stroke-1) var(--orange-600);
484
- }
485
- }
486
-
487
- &.surface {
488
- background-color: var(--orange-100);
489
- border: solid var(--stroke-1) var(--orange-200);
490
- color: var(--orange-700);
491
-
492
- &::before {
493
- background-color: var(--orange-700);
494
- }
495
-
496
- &:hover {
497
- background-color: var(--orange-200);
498
- }
499
-
500
- &:active {
501
- background-color: var(--orange-300);
502
- border: solid var(--stroke-1) var(--orange-300);
503
- }
504
- }
505
-
506
- &.surface-borderless {
507
- background-color: var(--orange-100);
508
- border: solid var(--stroke-1) transparent;
509
- color: var(--orange-700);
510
-
511
- &::before {
512
- background-color: var(--orange-700);
513
- }
514
-
515
- &:hover {
516
- background-color: var(--orange-200);
517
- }
518
-
519
- &:active {
520
- background-color: var(--orange-300);
521
- border: solid var(--stroke-1) var(--orange-300);
522
- }
523
- }
524
-
525
- &.outlined {
526
- background-color: transparent;
527
- border: solid var(--stroke-1) var(--orange-500);
528
- color: var(--orange-700);
529
-
530
- &::before {
531
- background-color: var(--orange-700);
532
- }
533
-
534
- &:hover {
535
- background-color: var(--orange-100);
536
- }
537
-
538
- &:active {
539
- background-color: var(--orange-200);
540
- }
541
- }
542
-
543
- &.dashed {
544
- background-color: transparent;
545
- border: dashed var(--stroke-1) var(--orange-500);
546
- color: var(--orange-700);
547
-
548
- &::before {
549
- background-color: var(--orange-700);
550
- }
551
-
552
- &:hover {
553
- border: dashed var(--stroke-1) var(--orange-300);
554
- color: var(--orange-300);
555
- }
556
-
557
- &:active {
558
- border: dashed var(--stroke-1) var(--orange-500);
559
- color: var(--orange-700);
560
- }
561
- }
562
-
563
- &.borderless {
564
- background-color: transparent;
565
- border: solid var(--stroke-1) transparent;
566
- color: var(--orange-700);
567
-
568
- &::before {
569
- background-color: var(--orange-700);
570
- }
571
-
572
- &:hover {
573
- color: var(--orange-300);
574
- }
575
-
576
- &:active {
577
- color: var(--orange-700);
578
- }
579
- }
580
- }
581
-
582
- &.yellow {
583
- &.filled {
584
- background-color: var(--yellow-500);
585
- border: solid var(--stroke-1) var(--yellow-500);
586
-
587
- &::before {
588
- background-color: var(--white-100);
589
- }
590
-
591
- &:hover {
592
- background-color: var(--yellow-400);
593
- border: solid var(--stroke-1) var(--yellow-400);
594
- }
595
-
596
- &:active {
597
- background-color: var(--yellow-600);
598
- border: solid var(--stroke-1) var(--yellow-600);
599
- }
600
- }
601
-
602
- &.surface {
603
- background-color: var(--yellow-100);
604
- border: solid var(--stroke-1) var(--yellow-200);
605
- color: var(--yellow-700);
606
-
607
- &::before {
608
- background-color: var(--yellow-700);
609
- }
610
-
611
- &:hover {
612
- background-color: var(--yellow-200);
613
- }
614
-
615
- &:active {
616
- background-color: var(--yellow-300);
617
- border: solid var(--stroke-1) var(--yellow-300);
618
- }
619
- }
620
-
621
- &.surface-borderless {
622
- background-color: var(--yellow-100);
623
- border: solid var(--stroke-1) transparent;
624
- color: var(--yellow-700);
625
-
626
- &::before {
627
- background-color: var(--yellow-700);
628
- }
629
-
630
- &:hover {
631
- background-color: var(--yellow-200);
632
- }
633
-
634
- &:active {
635
- background-color: var(--yellow-300);
636
- border: solid var(--stroke-1) var(--yellow-300);
637
- }
638
- }
639
-
640
- &.outlined {
641
- background-color: transparent;
642
- border: solid var(--stroke-1) var(--yellow-500);
643
- color: var(--yellow-700);
644
-
645
- &::before {
646
- background-color: var(--yellow-700);
647
- }
648
-
649
- &:hover {
650
- background-color: var(--yellow-100);
651
- }
652
-
653
- &:active {
654
- background-color: var(--yellow-200);
655
- }
656
- }
657
-
658
- &.dashed {
659
- background-color: transparent;
660
- border: dashed var(--stroke-1) var(--yellow-500);
661
- color: var(--yellow-700);
662
-
663
- &::before {
664
- background-color: var(--yellow-700);
665
- }
666
-
667
- &:hover {
668
- border: dashed var(--stroke-1) var(--yellow-300);
669
- color: var(--yellow-300);
670
- }
671
-
672
- &:active {
673
- border: dashed var(--stroke-1) var(--yellow-500);
674
- color: var(--yellow-700);
675
- }
676
- }
677
-
678
- &.borderless {
679
- background-color: transparent;
680
- border: solid var(--stroke-1) transparent;
681
- color: var(--yellow-700);
682
-
683
- &::before {
684
- background-color: var(--yellow-700);
685
- }
686
-
687
- &:hover {
688
- color: var(--yellow-300);
689
- }
690
-
691
- &:active {
692
- color: var(--yellow-700);
693
- }
694
- }
695
- }
696
-
697
- &.green {
698
- &.filled {
699
- background-color: var(--green-500);
700
- border: solid var(--stroke-1) var(--green-500);
701
-
702
- &::before {
703
- background-color: var(--white-100);
704
- }
705
-
706
- &:hover {
707
- background-color: var(--green-400);
708
- border: solid var(--stroke-1) var(--green-400);
709
- }
710
-
711
- &:active {
712
- background-color: var(--green-600);
713
- border: solid var(--stroke-1) var(--green-600);
714
- }
715
- }
716
-
717
- &.surface {
718
- background-color: var(--green-100);
719
- border: solid var(--stroke-1) var(--green-200);
720
- color: var(--green-700);
721
-
722
- &::before {
723
- background-color: var(--green-700);
724
- }
725
-
726
- &:hover {
727
- background-color: var(--green-200);
728
- }
729
-
730
- &:active {
731
- background-color: var(--green-300);
732
- border: solid var(--stroke-1) var(--green-300);
733
- }
734
- }
735
-
736
- &.surface-borderless {
737
- background-color: var(--green-100);
738
- border: solid var(--stroke-1) transparent;
739
- color: var(--green-700);
740
-
741
- &::before {
742
- background-color: var(--green-700);
743
- }
744
-
745
- &:hover {
746
- background-color: var(--green-200);
747
- }
748
-
749
- &:active {
750
- background-color: var(--green-300);
751
- border: solid var(--stroke-1) var(--green-300);
752
- }
753
- }
754
-
755
- &.outlined {
756
- background-color: transparent;
757
- border: solid var(--stroke-1) var(--green-500);
758
- color: var(--green-700);
759
-
760
- &::before {
761
- background-color: var(--green-700);
762
- }
763
-
764
- &:hover {
765
- background-color: var(--green-100);
766
- }
767
-
768
- &:active {
769
- background-color: var(--green-200);
770
- }
771
- }
772
-
773
- &.dashed {
774
- background-color: transparent;
775
- border: dashed var(--stroke-1) var(--green-500);
776
- color: var(--green-700);
777
-
778
- &::before {
779
- background-color: var(--green-700);
780
- }
781
-
782
- &:hover {
783
- border: dashed var(--stroke-1) var(--green-300);
784
- color: var(--green-300);
785
- }
786
-
787
- &:active {
788
- border: dashed var(--stroke-1) var(--green-500);
789
- color: var(--green-700);
790
- }
791
- }
792
-
793
- &.borderless {
794
- background-color: transparent;
795
- border: solid var(--stroke-1) transparent;
796
- color: var(--green-700);
797
-
798
- &::before {
799
- background-color: var(--green-700);
800
- }
801
-
802
- &:hover {
803
- color: var(--green-300);
804
- }
805
-
806
- &:active {
807
- color: var(--green-700);
808
- }
809
- }
810
- }
811
-
812
- &.teal {
813
- &.filled {
814
- background-color: var(--teal-500);
815
- border: solid var(--stroke-1) var(--teal-500);
816
-
817
- &::before {
818
- background-color: var(--white-100);
819
- }
820
-
821
- &:hover {
822
- background-color: var(--teal-400);
823
- border: solid var(--stroke-1) var(--teal-400);
824
- }
825
-
826
- &:active {
827
- background-color: var(--teal-600);
828
- border: solid var(--stroke-1) var(--teal-600);
829
- }
830
- }
831
-
832
- &.surface {
833
- background-color: var(--teal-100);
834
- border: solid var(--stroke-1) var(--teal-200);
835
- color: var(--teal-700);
836
-
837
- &::before {
838
- background-color: var(--teal-700);
839
- }
840
-
841
- &:hover {
842
- background-color: var(--teal-200);
843
- }
844
-
845
- &:active {
846
- background-color: var(--teal-300);
847
- border: solid var(--stroke-1) var(--teal-300);
848
- }
849
- }
850
-
851
- &.surface-borderless {
852
- background-color: var(--teal-100);
853
- border: solid var(--stroke-1) transparent;
854
- color: var(--teal-700);
855
-
856
- &::before {
857
- background-color: var(--teal-700);
858
- }
859
-
860
- &:hover {
861
- background-color: var(--teal-200);
862
- }
863
-
864
- &:active {
865
- background-color: var(--teal-300);
866
- border: solid var(--stroke-1) var(--teal-300);
867
- }
868
- }
869
-
870
- &.outlined {
871
- background-color: transparent;
872
- border: solid var(--stroke-1) var(--teal-500);
873
- color: var(--teal-700);
874
-
875
- &::before {
876
- background-color: var(--teal-700);
877
- }
878
-
879
- &:hover {
880
- background-color: var(--teal-100);
881
- }
882
-
883
- &:active {
884
- background-color: var(--teal-200);
885
- }
886
- }
887
-
888
- &.dashed {
889
- background-color: transparent;
890
- border: dashed var(--stroke-1) var(--teal-500);
891
- color: var(--teal-700);
892
-
893
- &::before {
894
- background-color: var(--teal-700);
895
- }
896
-
897
- &:hover {
898
- border: dashed var(--stroke-1) var(--teal-300);
899
- color: var(--teal-300);
900
- }
901
-
902
- &:active {
903
- border: dashed var(--stroke-1) var(--teal-500);
904
- color: var(--teal-700);
905
- }
906
- }
907
-
908
- &.borderless {
909
- background-color: transparent;
910
- border: solid var(--stroke-1) transparent;
911
- color: var(--teal-700);
912
-
913
- &::before {
914
- background-color: var(--teal-700);
915
- }
916
-
917
- &:hover {
918
- color: var(--teal-300);
919
- }
920
-
921
- &:active {
922
- color: var(--teal-700);
923
- }
924
- }
925
- }
926
-
927
- &.cyan {
928
- &.filled {
929
- background-color: var(--cyan-500);
930
- border: solid var(--stroke-1) var(--cyan-500);
931
-
932
- &::before {
933
- background-color: var(--white-100);
934
- }
935
-
936
- &:hover {
937
- background-color: var(--cyan-400);
938
- border: solid var(--stroke-1) var(--cyan-400);
939
- }
940
-
941
- &:active {
942
- background-color: var(--cyan-600);
943
- border: solid var(--stroke-1) var(--cyan-600);
944
- }
945
- }
946
-
947
- &.surface {
948
- background-color: var(--cyan-100);
949
- border: solid var(--stroke-1) var(--cyan-200);
950
- color: var(--cyan-700);
951
-
952
- &::before {
953
- background-color: var(--cyan-700);
954
- }
955
-
956
- &:hover {
957
- background-color: var(--cyan-200);
958
- }
959
-
960
- &:active {
961
- background-color: var(--cyan-300);
962
- border: solid var(--stroke-1) var(--cyan-300);
963
- }
964
- }
965
-
966
- &.surface-borderless {
967
- background-color: var(--cyan-100);
968
- border: solid var(--stroke-1) transparent;
969
- color: var(--cyan-700);
970
-
971
- &::before {
972
- background-color: var(--cyan-700);
973
- }
974
-
975
- &:hover {
976
- background-color: var(--cyan-200);
977
- }
978
-
979
- &:active {
980
- background-color: var(--cyan-300);
981
- border: solid var(--stroke-1) var(--cyan-300);
982
- }
983
- }
984
-
985
- &.outlined {
986
- background-color: transparent;
987
- border: solid var(--stroke-1) var(--cyan-500);
988
- color: var(--cyan-700);
989
-
990
- &::before {
991
- background-color: var(--cyan-700);
992
- }
993
-
994
- &:hover {
995
- background-color: var(--cyan-100);
996
- }
997
-
998
- &:active {
999
- background-color: var(--cyan-200);
1000
- }
1001
- }
1002
-
1003
- &.dashed {
1004
- background-color: transparent;
1005
- border: dashed var(--stroke-1) var(--cyan-500);
1006
- color: var(--cyan-700);
1007
-
1008
- &::before {
1009
- background-color: var(--cyan-700);
1010
- }
1011
-
1012
- &:hover {
1013
- border: dashed var(--stroke-1) var(--cyan-300);
1014
- color: var(--cyan-300);
1015
- }
1016
-
1017
- &:active {
1018
- border: dashed var(--stroke-1) var(--cyan-500);
1019
- color: var(--cyan-700);
1020
- }
1021
- }
1022
-
1023
- &.borderless {
1024
- background-color: transparent;
1025
- border: solid var(--stroke-1) transparent;
1026
- color: var(--cyan-700);
1027
-
1028
- &::before {
1029
- background-color: var(--cyan-700);
1030
- }
1031
-
1032
- &:hover {
1033
- color: var(--cyan-300);
1034
- }
1035
-
1036
- &:active {
1037
- color: var(--cyan-700);
1038
- }
1039
- }
1040
- }
1041
-
1042
- &.gray {
1043
- &.filled {
1044
- background-color: var(--gray-500);
1045
- border: solid var(--stroke-1) var(--gray-500);
1046
-
1047
- &::before {
1048
- background-color: var(--white-100);
1049
- }
1050
-
1051
- &:hover {
1052
- background-color: var(--gray-400);
1053
- border: solid var(--stroke-1) var(--gray-400);
1054
- }
1055
-
1056
- &:active {
1057
- background-color: var(--gray-600);
1058
- border: solid var(--stroke-1) var(--gray-600);
1059
- }
1060
- }
1061
-
1062
- &.surface {
1063
- background-color: var(--gray-100);
1064
- border: solid var(--stroke-1) var(--gray-200);
1065
- color: var(--gray-700);
1066
-
1067
- &::before {
1068
- background-color: var(--gray-700);
1069
- }
1070
-
1071
- &:hover {
1072
- background-color: var(--gray-200);
1073
- }
1074
-
1075
- &:active {
1076
- background-color: var(--gray-300);
1077
- border: solid var(--stroke-1) var(--gray-300);
1078
- }
1079
- }
1080
-
1081
- &.surface-borderless {
1082
- background-color: var(--gray-100);
1083
- border: solid var(--stroke-1) transparent;
1084
- color: var(--gray-700);
1085
-
1086
- &::before {
1087
- background-color: var(--gray-700);
1088
- }
1089
-
1090
- &:hover {
1091
- background-color: var(--gray-200);
1092
- }
1093
-
1094
- &:active {
1095
- background-color: var(--gray-300);
1096
- border: solid var(--stroke-1) var(--gray-300);
1097
- }
1098
- }
1099
-
1100
- &.outlined {
1101
- background-color: transparent;
1102
- border: solid var(--stroke-1) var(--gray-500);
1103
- color: var(--gray-700);
1104
-
1105
- &::before {
1106
- background-color: var(--gray-700);
1107
- }
1108
-
1109
- &:hover {
1110
- background-color: var(--gray-100);
1111
- }
1112
-
1113
- &:active {
1114
- background-color: var(--gray-200);
1115
- }
1116
- }
1117
-
1118
- &.dashed {
1119
- background-color: transparent;
1120
- border: dashed var(--stroke-1) var(--gray-500);
1121
- color: var(--gray-700);
1122
-
1123
- &::before {
1124
- background-color: var(--gray-700);
1125
- }
1126
-
1127
- &:hover {
1128
- border: dashed var(--stroke-1) var(--gray-300);
1129
- color: var(--gray-300);
1130
- }
1131
-
1132
- &:active {
1133
- border: dashed var(--stroke-1) var(--gray-500);
1134
- color: var(--gray-700);
1135
- }
1136
- }
1137
-
1138
- &.borderless {
1139
- background-color: transparent;
1140
- border: solid var(--stroke-1) transparent;
1141
- color: var(--gray-700);
1142
-
1143
- &::before {
1144
- background-color: var(--gray-700);
1145
- }
1146
-
1147
- &:hover {
1148
- color: var(--gray-300);
1149
- }
1150
-
1151
- &:active {
1152
- color: var(--gray-700);
1153
- }
1154
- }
1
+ input[type="radio"] {
2
+ &:checked {
3
+ + span {
4
+ > .har-checkbox {
5
+ &.blue {
6
+ &.filled {
7
+ background-color: var(--blue-500);
8
+ border: solid var(--stroke-1) var(--blue-500);
9
+
10
+ &::before {
11
+ background-color: var(--white-100);
12
+ }
13
+
14
+ &:hover {
15
+ background-color: var(--blue-400);
16
+ border: solid var(--stroke-1) var(--blue-400);
17
+ }
18
+
19
+ &:active {
20
+ background-color: var(--blue-600);
21
+ border: solid var(--stroke-1) var(--blue-600);
22
+ }
23
+ }
24
+
25
+ &.surface {
26
+ background-color: var(--blue-100);
27
+ border: solid var(--stroke-1) var(--blue-200);
28
+ color: var(--blue-700);
29
+
30
+ &::before {
31
+ background-color: var(--blue-700);
32
+ }
33
+
34
+ &:hover {
35
+ background-color: var(--blue-200);
36
+ }
37
+
38
+ &:active {
39
+ background-color: var(--blue-300);
40
+ border: solid var(--stroke-1) var(--blue-300);
41
+ }
42
+ }
43
+
44
+ &.surface-borderless {
45
+ background-color: var(--blue-100);
46
+ border: solid var(--stroke-1) transparent;
47
+ color: var(--blue-700);
48
+
49
+ &::before {
50
+ background-color: var(--blue-700);
51
+ }
52
+
53
+ &:hover {
54
+ background-color: var(--blue-200);
55
+ }
56
+
57
+ &:active {
58
+ background-color: var(--blue-300);
59
+ border: solid var(--stroke-1) var(--blue-300);
60
+ }
61
+ }
62
+
63
+ &.outlined {
64
+ background-color: transparent;
65
+ border: solid var(--stroke-1) var(--blue-500);
66
+ color: var(--blue-700);
67
+
68
+ &::before {
69
+ background-color: var(--blue-700);
70
+ }
71
+
72
+ &:hover {
73
+ background-color: var(--blue-100);
74
+ }
75
+
76
+ &:active {
77
+ background-color: var(--blue-200);
78
+ }
79
+ }
80
+
81
+ &.dashed {
82
+ background-color: transparent;
83
+ border: dashed var(--stroke-1) var(--blue-500);
84
+ color: var(--blue-700);
85
+
86
+ &::before {
87
+ background-color: var(--blue-700);
88
+ }
89
+
90
+ &:hover {
91
+ border: dashed var(--stroke-1) var(--blue-300);
92
+ color: var(--blue-300);
93
+ }
94
+
95
+ &:active {
96
+ border: dashed var(--stroke-1) var(--blue-500);
97
+ color: var(--blue-700);
98
+ }
99
+ }
100
+
101
+ &.borderless {
102
+ background-color: transparent;
103
+ border: solid var(--stroke-1) transparent;
104
+ color: var(--blue-700);
105
+
106
+ &::before {
107
+ background-color: var(--blue-700);
108
+ }
109
+
110
+ &:hover {
111
+ color: var(--blue-300);
112
+ }
113
+
114
+ &:active {
115
+ color: var(--blue-700);
116
+ }
117
+ }
118
+ }
119
+
120
+ &.purple {
121
+ &.filled {
122
+ background-color: var(--purple-500);
123
+ border: solid var(--stroke-1) var(--purple-500);
124
+
125
+ &::before {
126
+ background-color: var(--white-100);
127
+ }
128
+
129
+ &:hover {
130
+ background-color: var(--purple-400);
131
+ border: solid var(--stroke-1) var(--purple-400);
132
+ }
133
+
134
+ &:active {
135
+ background-color: var(--purple-600);
136
+ border: solid var(--stroke-1) var(--purple-600);
137
+ }
138
+ }
139
+
140
+ &.surface {
141
+ background-color: var(--purple-100);
142
+ border: solid var(--stroke-1) var(--purple-200);
143
+ color: var(--purple-700);
144
+
145
+ &::before {
146
+ background-color: var(--purple-700);
147
+ }
148
+
149
+ &:hover {
150
+ background-color: var(--purple-200);
151
+ }
152
+
153
+ &:active {
154
+ background-color: var(--purple-300);
155
+ border: solid var(--stroke-1) var(--purple-300);
156
+ }
157
+ }
158
+
159
+ &.surface-borderless {
160
+ background-color: var(--purple-100);
161
+ border: solid var(--stroke-1) transparent;
162
+ color: var(--purple-700);
163
+
164
+ &::before {
165
+ background-color: var(--purple-700);
166
+ }
167
+
168
+ &:hover {
169
+ background-color: var(--purple-200);
170
+ }
171
+
172
+ &:active {
173
+ background-color: var(--purple-300);
174
+ border: solid var(--stroke-1) var(--purple-300);
175
+ }
176
+ }
177
+
178
+ &.outlined {
179
+ background-color: transparent;
180
+ border: solid var(--stroke-1) var(--purple-500);
181
+ color: var(--purple-700);
182
+
183
+ &::before {
184
+ background-color: var(--purple-700);
185
+ }
186
+
187
+ &:hover {
188
+ background-color: var(--purple-100);
189
+ }
190
+
191
+ &:active {
192
+ background-color: var(--purple-200);
193
+ }
194
+ }
195
+
196
+ &.dashed {
197
+ background-color: transparent;
198
+ border: dashed var(--stroke-1) var(--purple-500);
199
+ color: var(--purple-700);
200
+
201
+ &::before {
202
+ background-color: var(--purple-700);
203
+ }
204
+
205
+ &:hover {
206
+ border: dashed var(--stroke-1) var(--purple-300);
207
+ color: var(--purple-300);
208
+ }
209
+
210
+ &:active {
211
+ border: dashed var(--stroke-1) var(--purple-500);
212
+ color: var(--purple-700);
213
+ }
214
+ }
215
+
216
+ &.borderless {
217
+ background-color: transparent;
218
+ border: solid var(--stroke-1) transparent;
219
+ color: var(--purple-700);
220
+
221
+ &::before {
222
+ background-color: var(--purple-700);
223
+ }
224
+
225
+ &:hover {
226
+ color: var(--purple-300);
227
+ }
228
+
229
+ &:active {
230
+ color: var(--purple-700);
231
+ }
232
+ }
233
+ }
234
+
235
+ &.pink {
236
+ &.filled {
237
+ background-color: var(--pink-500);
238
+ border: solid var(--stroke-1) var(--pink-500);
239
+
240
+ &::before {
241
+ background-color: var(--white-100);
242
+ }
243
+
244
+ &:hover {
245
+ background-color: var(--pink-400);
246
+ border: solid var(--stroke-1) var(--pink-400);
247
+ }
248
+
249
+ &:active {
250
+ background-color: var(--pink-600);
251
+ border: solid var(--stroke-1) var(--pink-600);
252
+ }
253
+ }
254
+
255
+ &.surface {
256
+ background-color: var(--pink-100);
257
+ border: solid var(--stroke-1) var(--pink-200);
258
+ color: var(--pink-700);
259
+
260
+ &::before {
261
+ background-color: var(--pink-700);
262
+ }
263
+
264
+ &:hover {
265
+ background-color: var(--pink-200);
266
+ }
267
+
268
+ &:active {
269
+ background-color: var(--pink-300);
270
+ border: solid var(--stroke-1) var(--pink-300);
271
+ }
272
+ }
273
+
274
+ &.surface-borderless {
275
+ background-color: var(--pink-100);
276
+ border: solid var(--stroke-1) transparent;
277
+ color: var(--pink-700);
278
+
279
+ &::before {
280
+ background-color: var(--pink-700);
281
+ }
282
+
283
+ &:hover {
284
+ background-color: var(--pink-200);
285
+ }
286
+
287
+ &:active {
288
+ background-color: var(--pink-300);
289
+ border: solid var(--stroke-1) var(--pink-300);
290
+ }
291
+ }
292
+
293
+ &.outlined {
294
+ background-color: transparent;
295
+ border: solid var(--stroke-1) var(--pink-500);
296
+ color: var(--pink-700);
297
+
298
+ &::before {
299
+ background-color: var(--pink-700);
300
+ }
301
+
302
+ &:hover {
303
+ background-color: var(--pink-100);
304
+ }
305
+
306
+ &:active {
307
+ background-color: var(--pink-200);
308
+ }
309
+ }
310
+
311
+ &.dashed {
312
+ background-color: transparent;
313
+ border: dashed var(--stroke-1) var(--pink-500);
314
+ color: var(--pink-700);
315
+
316
+ &::before {
317
+ background-color: var(--pink-700);
318
+ }
319
+
320
+ &:hover {
321
+ border: dashed var(--stroke-1) var(--pink-300);
322
+ color: var(--pink-300);
323
+ }
324
+
325
+ &:active {
326
+ border: dashed var(--stroke-1) var(--pink-500);
327
+ color: var(--pink-700);
328
+ }
329
+ }
330
+
331
+ &.borderless {
332
+ background-color: transparent;
333
+ border: solid var(--stroke-1) transparent;
334
+ color: var(--pink-700);
335
+
336
+ &::before {
337
+ background-color: var(--pink-700);
338
+ }
339
+
340
+ &:hover {
341
+ color: var(--pink-300);
342
+ }
343
+
344
+ &:active {
345
+ color: var(--pink-700);
346
+ }
347
+ }
348
+ }
349
+
350
+ &.red {
351
+ &.filled {
352
+ background-color: var(--red-500);
353
+ border: solid var(--stroke-1) var(--red-500);
354
+
355
+ &::before {
356
+ background-color: var(--white-100);
357
+ }
358
+
359
+ &:hover {
360
+ background-color: var(--red-400);
361
+ border: solid var(--stroke-1) var(--red-400);
362
+ }
363
+
364
+ &:active {
365
+ background-color: var(--red-600);
366
+ border: solid var(--stroke-1) var(--red-600);
367
+ }
368
+ }
369
+
370
+ &.surface {
371
+ background-color: var(--red-100);
372
+ border: solid var(--stroke-1) var(--red-200);
373
+ color: var(--red-700);
374
+
375
+ &::before {
376
+ background-color: var(--red-700);
377
+ }
378
+
379
+ &:hover {
380
+ background-color: var(--red-200);
381
+ }
382
+
383
+ &:active {
384
+ background-color: var(--red-300);
385
+ border: solid var(--stroke-1) var(--red-300);
386
+ }
387
+ }
388
+
389
+ &.surface-borderless {
390
+ background-color: var(--red-100);
391
+ border: solid var(--stroke-1) transparent;
392
+ color: var(--red-700);
393
+
394
+ &::before {
395
+ background-color: var(--red-700);
396
+ }
397
+
398
+ &:hover {
399
+ background-color: var(--red-200);
400
+ }
401
+
402
+ &:active {
403
+ background-color: var(--red-300);
404
+ border: solid var(--stroke-1) var(--red-300);
405
+ }
406
+ }
407
+
408
+ &.outlined {
409
+ background-color: transparent;
410
+ border: solid var(--stroke-1) var(--red-500);
411
+ color: var(--red-700);
412
+
413
+ &::before {
414
+ background-color: var(--red-700);
415
+ }
416
+
417
+ &:hover {
418
+ background-color: var(--red-100);
419
+ }
420
+
421
+ &:active {
422
+ background-color: var(--red-200);
423
+ }
424
+ }
425
+
426
+ &.dashed {
427
+ background-color: transparent;
428
+ border: dashed var(--stroke-1) var(--red-500);
429
+ color: var(--red-700);
430
+
431
+ &::before {
432
+ background-color: var(--red-700);
433
+ }
434
+
435
+ &:hover {
436
+ border: dashed var(--stroke-1) var(--red-300);
437
+ color: var(--red-300);
438
+ }
439
+
440
+ &:active {
441
+ border: dashed var(--stroke-1) var(--red-500);
442
+ color: var(--red-700);
443
+ }
444
+ }
445
+
446
+ &.borderless {
447
+ background-color: transparent;
448
+ border: solid var(--stroke-1) transparent;
449
+ color: var(--red-700);
450
+
451
+ &::before {
452
+ background-color: var(--red-700);
453
+ }
454
+
455
+ &:hover {
456
+ color: var(--red-300);
457
+ }
458
+
459
+ &:active {
460
+ color: var(--red-700);
461
+ }
462
+ }
463
+ }
464
+
465
+ &.orange {
466
+ &.filled {
467
+ background-color: var(--orange-500);
468
+ border: solid var(--stroke-1) var(--orange-500);
469
+
470
+ &::before {
471
+ background-color: var(--white-100);
472
+ }
473
+
474
+ &:hover {
475
+ background-color: var(--orange-400);
476
+ border: solid var(--stroke-1) var(--orange-400);
477
+ }
478
+
479
+ &:active {
480
+ background-color: var(--orange-600);
481
+ border: solid var(--stroke-1) var(--orange-600);
482
+ }
483
+ }
484
+
485
+ &.surface {
486
+ background-color: var(--orange-100);
487
+ border: solid var(--stroke-1) var(--orange-200);
488
+ color: var(--orange-700);
489
+
490
+ &::before {
491
+ background-color: var(--orange-700);
492
+ }
493
+
494
+ &:hover {
495
+ background-color: var(--orange-200);
496
+ }
497
+
498
+ &:active {
499
+ background-color: var(--orange-300);
500
+ border: solid var(--stroke-1) var(--orange-300);
501
+ }
502
+ }
503
+
504
+ &.surface-borderless {
505
+ background-color: var(--orange-100);
506
+ border: solid var(--stroke-1) transparent;
507
+ color: var(--orange-700);
508
+
509
+ &::before {
510
+ background-color: var(--orange-700);
511
+ }
512
+
513
+ &:hover {
514
+ background-color: var(--orange-200);
515
+ }
516
+
517
+ &:active {
518
+ background-color: var(--orange-300);
519
+ border: solid var(--stroke-1) var(--orange-300);
520
+ }
521
+ }
522
+
523
+ &.outlined {
524
+ background-color: transparent;
525
+ border: solid var(--stroke-1) var(--orange-500);
526
+ color: var(--orange-700);
527
+
528
+ &::before {
529
+ background-color: var(--orange-700);
530
+ }
531
+
532
+ &:hover {
533
+ background-color: var(--orange-100);
534
+ }
535
+
536
+ &:active {
537
+ background-color: var(--orange-200);
538
+ }
539
+ }
540
+
541
+ &.dashed {
542
+ background-color: transparent;
543
+ border: dashed var(--stroke-1) var(--orange-500);
544
+ color: var(--orange-700);
545
+
546
+ &::before {
547
+ background-color: var(--orange-700);
548
+ }
549
+
550
+ &:hover {
551
+ border: dashed var(--stroke-1) var(--orange-300);
552
+ color: var(--orange-300);
553
+ }
554
+
555
+ &:active {
556
+ border: dashed var(--stroke-1) var(--orange-500);
557
+ color: var(--orange-700);
558
+ }
559
+ }
560
+
561
+ &.borderless {
562
+ background-color: transparent;
563
+ border: solid var(--stroke-1) transparent;
564
+ color: var(--orange-700);
565
+
566
+ &::before {
567
+ background-color: var(--orange-700);
568
+ }
569
+
570
+ &:hover {
571
+ color: var(--orange-300);
572
+ }
573
+
574
+ &:active {
575
+ color: var(--orange-700);
576
+ }
577
+ }
578
+ }
579
+
580
+ &.yellow {
581
+ &.filled {
582
+ background-color: var(--yellow-500);
583
+ border: solid var(--stroke-1) var(--yellow-500);
584
+
585
+ &::before {
586
+ background-color: var(--white-100);
587
+ }
588
+
589
+ &:hover {
590
+ background-color: var(--yellow-400);
591
+ border: solid var(--stroke-1) var(--yellow-400);
592
+ }
593
+
594
+ &:active {
595
+ background-color: var(--yellow-600);
596
+ border: solid var(--stroke-1) var(--yellow-600);
597
+ }
598
+ }
599
+
600
+ &.surface {
601
+ background-color: var(--yellow-100);
602
+ border: solid var(--stroke-1) var(--yellow-200);
603
+ color: var(--yellow-700);
604
+
605
+ &::before {
606
+ background-color: var(--yellow-700);
607
+ }
608
+
609
+ &:hover {
610
+ background-color: var(--yellow-200);
611
+ }
612
+
613
+ &:active {
614
+ background-color: var(--yellow-300);
615
+ border: solid var(--stroke-1) var(--yellow-300);
616
+ }
617
+ }
618
+
619
+ &.surface-borderless {
620
+ background-color: var(--yellow-100);
621
+ border: solid var(--stroke-1) transparent;
622
+ color: var(--yellow-700);
623
+
624
+ &::before {
625
+ background-color: var(--yellow-700);
626
+ }
627
+
628
+ &:hover {
629
+ background-color: var(--yellow-200);
630
+ }
631
+
632
+ &:active {
633
+ background-color: var(--yellow-300);
634
+ border: solid var(--stroke-1) var(--yellow-300);
635
+ }
636
+ }
637
+
638
+ &.outlined {
639
+ background-color: transparent;
640
+ border: solid var(--stroke-1) var(--yellow-500);
641
+ color: var(--yellow-700);
642
+
643
+ &::before {
644
+ background-color: var(--yellow-700);
645
+ }
646
+
647
+ &:hover {
648
+ background-color: var(--yellow-100);
649
+ }
650
+
651
+ &:active {
652
+ background-color: var(--yellow-200);
653
+ }
654
+ }
655
+
656
+ &.dashed {
657
+ background-color: transparent;
658
+ border: dashed var(--stroke-1) var(--yellow-500);
659
+ color: var(--yellow-700);
660
+
661
+ &::before {
662
+ background-color: var(--yellow-700);
663
+ }
664
+
665
+ &:hover {
666
+ border: dashed var(--stroke-1) var(--yellow-300);
667
+ color: var(--yellow-300);
668
+ }
669
+
670
+ &:active {
671
+ border: dashed var(--stroke-1) var(--yellow-500);
672
+ color: var(--yellow-700);
673
+ }
674
+ }
675
+
676
+ &.borderless {
677
+ background-color: transparent;
678
+ border: solid var(--stroke-1) transparent;
679
+ color: var(--yellow-700);
680
+
681
+ &::before {
682
+ background-color: var(--yellow-700);
683
+ }
684
+
685
+ &:hover {
686
+ color: var(--yellow-300);
687
+ }
688
+
689
+ &:active {
690
+ color: var(--yellow-700);
691
+ }
692
+ }
693
+ }
694
+
695
+ &.green {
696
+ &.filled {
697
+ background-color: var(--green-500);
698
+ border: solid var(--stroke-1) var(--green-500);
699
+
700
+ &::before {
701
+ background-color: var(--white-100);
702
+ }
703
+
704
+ &:hover {
705
+ background-color: var(--green-400);
706
+ border: solid var(--stroke-1) var(--green-400);
707
+ }
708
+
709
+ &:active {
710
+ background-color: var(--green-600);
711
+ border: solid var(--stroke-1) var(--green-600);
712
+ }
713
+ }
714
+
715
+ &.surface {
716
+ background-color: var(--green-100);
717
+ border: solid var(--stroke-1) var(--green-200);
718
+ color: var(--green-700);
719
+
720
+ &::before {
721
+ background-color: var(--green-700);
722
+ }
723
+
724
+ &:hover {
725
+ background-color: var(--green-200);
726
+ }
727
+
728
+ &:active {
729
+ background-color: var(--green-300);
730
+ border: solid var(--stroke-1) var(--green-300);
731
+ }
732
+ }
733
+
734
+ &.surface-borderless {
735
+ background-color: var(--green-100);
736
+ border: solid var(--stroke-1) transparent;
737
+ color: var(--green-700);
738
+
739
+ &::before {
740
+ background-color: var(--green-700);
741
+ }
742
+
743
+ &:hover {
744
+ background-color: var(--green-200);
745
+ }
746
+
747
+ &:active {
748
+ background-color: var(--green-300);
749
+ border: solid var(--stroke-1) var(--green-300);
750
+ }
751
+ }
752
+
753
+ &.outlined {
754
+ background-color: transparent;
755
+ border: solid var(--stroke-1) var(--green-500);
756
+ color: var(--green-700);
757
+
758
+ &::before {
759
+ background-color: var(--green-700);
760
+ }
761
+
762
+ &:hover {
763
+ background-color: var(--green-100);
764
+ }
765
+
766
+ &:active {
767
+ background-color: var(--green-200);
768
+ }
769
+ }
770
+
771
+ &.dashed {
772
+ background-color: transparent;
773
+ border: dashed var(--stroke-1) var(--green-500);
774
+ color: var(--green-700);
775
+
776
+ &::before {
777
+ background-color: var(--green-700);
778
+ }
779
+
780
+ &:hover {
781
+ border: dashed var(--stroke-1) var(--green-300);
782
+ color: var(--green-300);
783
+ }
784
+
785
+ &:active {
786
+ border: dashed var(--stroke-1) var(--green-500);
787
+ color: var(--green-700);
788
+ }
789
+ }
790
+
791
+ &.borderless {
792
+ background-color: transparent;
793
+ border: solid var(--stroke-1) transparent;
794
+ color: var(--green-700);
795
+
796
+ &::before {
797
+ background-color: var(--green-700);
798
+ }
799
+
800
+ &:hover {
801
+ color: var(--green-300);
802
+ }
803
+
804
+ &:active {
805
+ color: var(--green-700);
806
+ }
807
+ }
808
+ }
809
+
810
+ &.teal {
811
+ &.filled {
812
+ background-color: var(--teal-500);
813
+ border: solid var(--stroke-1) var(--teal-500);
814
+
815
+ &::before {
816
+ background-color: var(--white-100);
817
+ }
818
+
819
+ &:hover {
820
+ background-color: var(--teal-400);
821
+ border: solid var(--stroke-1) var(--teal-400);
822
+ }
823
+
824
+ &:active {
825
+ background-color: var(--teal-600);
826
+ border: solid var(--stroke-1) var(--teal-600);
827
+ }
828
+ }
829
+
830
+ &.surface {
831
+ background-color: var(--teal-100);
832
+ border: solid var(--stroke-1) var(--teal-200);
833
+ color: var(--teal-700);
834
+
835
+ &::before {
836
+ background-color: var(--teal-700);
837
+ }
838
+
839
+ &:hover {
840
+ background-color: var(--teal-200);
841
+ }
842
+
843
+ &:active {
844
+ background-color: var(--teal-300);
845
+ border: solid var(--stroke-1) var(--teal-300);
846
+ }
847
+ }
848
+
849
+ &.surface-borderless {
850
+ background-color: var(--teal-100);
851
+ border: solid var(--stroke-1) transparent;
852
+ color: var(--teal-700);
853
+
854
+ &::before {
855
+ background-color: var(--teal-700);
856
+ }
857
+
858
+ &:hover {
859
+ background-color: var(--teal-200);
860
+ }
861
+
862
+ &:active {
863
+ background-color: var(--teal-300);
864
+ border: solid var(--stroke-1) var(--teal-300);
865
+ }
866
+ }
867
+
868
+ &.outlined {
869
+ background-color: transparent;
870
+ border: solid var(--stroke-1) var(--teal-500);
871
+ color: var(--teal-700);
872
+
873
+ &::before {
874
+ background-color: var(--teal-700);
875
+ }
876
+
877
+ &:hover {
878
+ background-color: var(--teal-100);
879
+ }
880
+
881
+ &:active {
882
+ background-color: var(--teal-200);
883
+ }
884
+ }
885
+
886
+ &.dashed {
887
+ background-color: transparent;
888
+ border: dashed var(--stroke-1) var(--teal-500);
889
+ color: var(--teal-700);
890
+
891
+ &::before {
892
+ background-color: var(--teal-700);
893
+ }
894
+
895
+ &:hover {
896
+ border: dashed var(--stroke-1) var(--teal-300);
897
+ color: var(--teal-300);
898
+ }
899
+
900
+ &:active {
901
+ border: dashed var(--stroke-1) var(--teal-500);
902
+ color: var(--teal-700);
903
+ }
904
+ }
905
+
906
+ &.borderless {
907
+ background-color: transparent;
908
+ border: solid var(--stroke-1) transparent;
909
+ color: var(--teal-700);
910
+
911
+ &::before {
912
+ background-color: var(--teal-700);
913
+ }
914
+
915
+ &:hover {
916
+ color: var(--teal-300);
917
+ }
918
+
919
+ &:active {
920
+ color: var(--teal-700);
921
+ }
922
+ }
923
+ }
924
+
925
+ &.cyan {
926
+ &.filled {
927
+ background-color: var(--cyan-500);
928
+ border: solid var(--stroke-1) var(--cyan-500);
929
+
930
+ &::before {
931
+ background-color: var(--white-100);
932
+ }
933
+
934
+ &:hover {
935
+ background-color: var(--cyan-400);
936
+ border: solid var(--stroke-1) var(--cyan-400);
937
+ }
938
+
939
+ &:active {
940
+ background-color: var(--cyan-600);
941
+ border: solid var(--stroke-1) var(--cyan-600);
942
+ }
943
+ }
944
+
945
+ &.surface {
946
+ background-color: var(--cyan-100);
947
+ border: solid var(--stroke-1) var(--cyan-200);
948
+ color: var(--cyan-700);
949
+
950
+ &::before {
951
+ background-color: var(--cyan-700);
952
+ }
953
+
954
+ &:hover {
955
+ background-color: var(--cyan-200);
956
+ }
957
+
958
+ &:active {
959
+ background-color: var(--cyan-300);
960
+ border: solid var(--stroke-1) var(--cyan-300);
961
+ }
962
+ }
963
+
964
+ &.surface-borderless {
965
+ background-color: var(--cyan-100);
966
+ border: solid var(--stroke-1) transparent;
967
+ color: var(--cyan-700);
968
+
969
+ &::before {
970
+ background-color: var(--cyan-700);
971
+ }
972
+
973
+ &:hover {
974
+ background-color: var(--cyan-200);
975
+ }
976
+
977
+ &:active {
978
+ background-color: var(--cyan-300);
979
+ border: solid var(--stroke-1) var(--cyan-300);
980
+ }
981
+ }
982
+
983
+ &.outlined {
984
+ background-color: transparent;
985
+ border: solid var(--stroke-1) var(--cyan-500);
986
+ color: var(--cyan-700);
987
+
988
+ &::before {
989
+ background-color: var(--cyan-700);
990
+ }
991
+
992
+ &:hover {
993
+ background-color: var(--cyan-100);
994
+ }
995
+
996
+ &:active {
997
+ background-color: var(--cyan-200);
998
+ }
999
+ }
1000
+
1001
+ &.dashed {
1002
+ background-color: transparent;
1003
+ border: dashed var(--stroke-1) var(--cyan-500);
1004
+ color: var(--cyan-700);
1005
+
1006
+ &::before {
1007
+ background-color: var(--cyan-700);
1008
+ }
1009
+
1010
+ &:hover {
1011
+ border: dashed var(--stroke-1) var(--cyan-300);
1012
+ color: var(--cyan-300);
1013
+ }
1014
+
1015
+ &:active {
1016
+ border: dashed var(--stroke-1) var(--cyan-500);
1017
+ color: var(--cyan-700);
1018
+ }
1019
+ }
1020
+
1021
+ &.borderless {
1022
+ background-color: transparent;
1023
+ border: solid var(--stroke-1) transparent;
1024
+ color: var(--cyan-700);
1025
+
1026
+ &::before {
1027
+ background-color: var(--cyan-700);
1028
+ }
1029
+
1030
+ &:hover {
1031
+ color: var(--cyan-300);
1032
+ }
1033
+
1034
+ &:active {
1035
+ color: var(--cyan-700);
1036
+ }
1037
+ }
1038
+ }
1039
+
1040
+ &.gray {
1041
+ &.filled {
1042
+ background-color: var(--gray-500);
1043
+ border: solid var(--stroke-1) var(--gray-500);
1044
+
1045
+ &::before {
1046
+ background-color: var(--white-100);
1047
+ }
1048
+
1049
+ &:hover {
1050
+ background-color: var(--gray-400);
1051
+ border: solid var(--stroke-1) var(--gray-400);
1052
+ }
1053
+
1054
+ &:active {
1055
+ background-color: var(--gray-600);
1056
+ border: solid var(--stroke-1) var(--gray-600);
1057
+ }
1058
+ }
1059
+
1060
+ &.surface {
1061
+ background-color: var(--gray-100);
1062
+ border: solid var(--stroke-1) var(--gray-200);
1063
+ color: var(--gray-700);
1064
+
1065
+ &::before {
1066
+ background-color: var(--gray-700);
1067
+ }
1068
+
1069
+ &:hover {
1070
+ background-color: var(--gray-200);
1071
+ }
1072
+
1073
+ &:active {
1074
+ background-color: var(--gray-300);
1075
+ border: solid var(--stroke-1) var(--gray-300);
1076
+ }
1077
+ }
1078
+
1079
+ &.surface-borderless {
1080
+ background-color: var(--gray-100);
1081
+ border: solid var(--stroke-1) transparent;
1082
+ color: var(--gray-700);
1083
+
1084
+ &::before {
1085
+ background-color: var(--gray-700);
1086
+ }
1087
+
1088
+ &:hover {
1089
+ background-color: var(--gray-200);
1090
+ }
1091
+
1092
+ &:active {
1093
+ background-color: var(--gray-300);
1094
+ border: solid var(--stroke-1) var(--gray-300);
1095
+ }
1096
+ }
1097
+
1098
+ &.outlined {
1099
+ background-color: transparent;
1100
+ border: solid var(--stroke-1) var(--gray-500);
1101
+ color: var(--gray-700);
1102
+
1103
+ &::before {
1104
+ background-color: var(--gray-700);
1105
+ }
1106
+
1107
+ &:hover {
1108
+ background-color: var(--gray-100);
1109
+ }
1110
+
1111
+ &:active {
1112
+ background-color: var(--gray-200);
1113
+ }
1114
+ }
1115
+
1116
+ &.dashed {
1117
+ background-color: transparent;
1118
+ border: dashed var(--stroke-1) var(--gray-500);
1119
+ color: var(--gray-700);
1120
+
1121
+ &::before {
1122
+ background-color: var(--gray-700);
1123
+ }
1124
+
1125
+ &:hover {
1126
+ border: dashed var(--stroke-1) var(--gray-300);
1127
+ color: var(--gray-300);
1128
+ }
1129
+
1130
+ &:active {
1131
+ border: dashed var(--stroke-1) var(--gray-500);
1132
+ color: var(--gray-700);
1133
+ }
1134
+ }
1135
+
1136
+ &.borderless {
1137
+ background-color: transparent;
1138
+ border: solid var(--stroke-1) transparent;
1139
+ color: var(--gray-700);
1140
+
1141
+ &::before {
1142
+ background-color: var(--gray-700);
1143
+ }
1144
+
1145
+ &:hover {
1146
+ color: var(--gray-300);
1147
+ }
1148
+
1149
+ &:active {
1150
+ color: var(--gray-700);
1155
1151
  }
1156
1152
  }
1157
1153
  }