@harjs/react-ui 1.1.10 → 1.1.12

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