@itcase/ui 1.8.105 → 1.8.107

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 (27) hide show
  1. package/dist/{ChipsGroup_cjs_BgSbk26L.js → ChipsGroup_cjs_DKLEgUi2.js} +3 -1
  2. package/dist/{ChipsGroup_es_C1U2hygj.js → ChipsGroup_es_vMh6YMRm.js} +3 -1
  3. package/dist/cjs/components/Chips.js +1 -1
  4. package/dist/cjs/components/DatePeriod.js +1 -1
  5. package/dist/components/Chips.js +1 -1
  6. package/dist/components/DatePeriod.js +1 -1
  7. package/dist/css/components/Button/Button.css +2 -2
  8. package/dist/css/components/Dropdown/Dropdown.css +0 -1
  9. package/dist/css/styles/align/align.css +6 -3
  10. package/dist/css/styles/align/align_horizontal-reverse.css +46 -43
  11. package/dist/css/styles/align/align_horizontal.css +42 -39
  12. package/dist/css/styles/align/align_vertical-reverse.css +43 -40
  13. package/dist/css/styles/align/align_vertical.css +41 -38
  14. package/dist/css/styles/alignment/alignment.css +4 -1
  15. package/dist/css/styles/border-color/border-color.css +36 -34
  16. package/dist/css/styles/border-color/border-color_active.css +37 -35
  17. package/dist/css/styles/border-color/border-color_active_hover.css +39 -37
  18. package/dist/css/styles/border-color/border-color_focus.css +41 -39
  19. package/dist/css/styles/border-color/border-color_hover.css +43 -41
  20. package/dist/css/styles/bundle.css +551 -507
  21. package/dist/css/styles/fill/fill.css +41 -39
  22. package/dist/css/styles/fill/fill_active.css +39 -37
  23. package/dist/css/styles/fill/fill_active_hover.css +77 -72
  24. package/dist/css/styles/fill/fill_gradient.css +13 -8
  25. package/dist/css/styles/fill/fill_hover.css +60 -58
  26. package/dist/types/components/Chips/appearance/chipsAccent.d.ts +2 -0
  27. package/package.json +1 -1
package/dist/css/styles/bundle.css CHANGED
@@ -12,72 +12,78 @@
12
12
  }
13
13
  }
14
14
  }
15
- .align {
16
- &_center {
17
- margin: 0 auto;
15
+ @each $selector in button, input, textarea {
16
+ .align,
17
+ $(selector).align {
18
+ &_center {
19
+ margin: 0 auto;
20
+ }
18
21
  }
19
22
  }
20
23
  %align-horizontal-reverse {
21
24
  display: flex;
22
25
  flex-direction: row-reverse;
23
26
  }
24
- .align {
25
- &_horizontal-reverse {
26
- display: flex;
27
- flex-direction: row-reverse;
28
- @extend %align-horizontal-reverse;
29
- &-top {
30
- &-left {
31
- align-items: flex-start;
32
- @extend %align-horizontal-reverse;
33
- }
34
- &-center {
35
- text-align: center;
36
- justify-content: center;
37
- align-items: flex-start;
38
- @extend %align-horizontal-reverse;
39
- }
40
- &-right {
41
- text-align: right;
42
- justify-content: flex-end;
43
- align-items: flex-start;
44
- @extend %align-horizontal-reverse;
45
- }
46
- }
47
- &-left {
48
- align-items: center;
49
- @extend %align-horizontal-reverse;
50
- }
51
- &-center {
52
- text-align: center;
53
- justify-content: center;
54
- align-items: center;
55
- @extend %align-horizontal-reverse;
56
- }
57
- &-right {
58
- text-align: right;
59
- justify-content: flex-end;
60
- align-items: center;
27
+ @each $selector in button, input, textarea {
28
+ .align,
29
+ $(selector).align {
30
+ &_horizontal-reverse {
31
+ display: flex;
32
+ flex-direction: row-reverse;
61
33
  @extend %align-horizontal-reverse;
62
- }
63
- &-bottom {
34
+ &-top {
35
+ &-left {
36
+ align-items: flex-start;
37
+ @extend %align-horizontal-reverse;
38
+ }
39
+ &-center {
40
+ text-align: center;
41
+ justify-content: center;
42
+ align-items: flex-start;
43
+ @extend %align-horizontal-reverse;
44
+ }
45
+ &-right {
46
+ text-align: right;
47
+ justify-content: flex-end;
48
+ align-items: flex-start;
49
+ @extend %align-horizontal-reverse;
50
+ }
51
+ }
64
52
  &-left {
65
- flex-direction: row;
66
- align-items: flex-end;
53
+ align-items: center;
67
54
  @extend %align-horizontal-reverse;
68
55
  }
69
56
  &-center {
70
57
  text-align: center;
71
58
  justify-content: center;
72
- align-items: flex-end;
59
+ align-items: center;
73
60
  @extend %align-horizontal-reverse;
74
61
  }
75
62
  &-right {
76
63
  text-align: right;
77
64
  justify-content: flex-end;
78
- align-items: flex-end;
65
+ align-items: center;
79
66
  @extend %align-horizontal-reverse;
80
67
  }
68
+ &-bottom {
69
+ &-left {
70
+ flex-direction: row;
71
+ align-items: flex-end;
72
+ @extend %align-horizontal-reverse;
73
+ }
74
+ &-center {
75
+ text-align: center;
76
+ justify-content: center;
77
+ align-items: flex-end;
78
+ @extend %align-horizontal-reverse;
79
+ }
80
+ &-right {
81
+ text-align: right;
82
+ justify-content: flex-end;
83
+ align-items: flex-end;
84
+ @extend %align-horizontal-reverse;
85
+ }
86
+ }
81
87
  }
82
88
  }
83
89
  }
@@ -85,122 +91,128 @@
85
91
  display: flex;
86
92
  flex-direction: row;
87
93
  }
88
- .align {
89
- &_horizontal {
90
- &_top {
91
- align-items: flex-start;
92
- @extend %align-horizontal;
93
- &-left {
94
- align-items: flex-start;
95
- @extend %align-horizontal;
96
- }
97
- &-center {
98
- text-align: center;
99
- justify-content: center;
94
+ @each $selector in button, input, textarea {
95
+ .align,
96
+ $(selector).align {
97
+ &_horizontal {
98
+ &_top {
100
99
  align-items: flex-start;
101
100
  @extend %align-horizontal;
101
+ &-left {
102
+ align-items: flex-start;
103
+ @extend %align-horizontal;
104
+ }
105
+ &-center {
106
+ text-align: center;
107
+ justify-content: center;
108
+ align-items: flex-start;
109
+ @extend %align-horizontal;
110
+ }
111
+ &-right {
112
+ text-align: right;
113
+ justify-content: flex-end;
114
+ align-items: flex-start;
115
+ @extend %align-horizontal;
116
+ }
102
117
  }
103
- &-right {
104
- text-align: right;
105
- justify-content: flex-end;
106
- align-items: flex-start;
118
+ &_bottom {
119
+ align-items: flex-end;
107
120
  @extend %align-horizontal;
121
+ &-left {
122
+ align-items: flex-end;
123
+ @extend %align-horizontal;
124
+ }
125
+ &-center {
126
+ text-align: center;
127
+ justify-content: center;
128
+ align-items: flex-end;
129
+ @extend %align-horizontal;
130
+ }
131
+ &-right {
132
+ text-align: right;
133
+ justify-content: flex-end;
134
+ align-items: flex-end;
135
+ @extend %align-horizontal;
136
+ }
108
137
  }
109
- }
110
- &_bottom {
111
- align-items: flex-end;
112
- @extend %align-horizontal;
113
138
  &-left {
114
- align-items: flex-end;
139
+ align-items: center;
115
140
  @extend %align-horizontal;
116
141
  }
117
142
  &-center {
118
143
  text-align: center;
119
144
  justify-content: center;
120
- align-items: flex-end;
145
+ align-items: center;
121
146
  @extend %align-horizontal;
122
147
  }
123
148
  &-right {
124
149
  text-align: right;
125
150
  justify-content: flex-end;
126
- align-items: flex-end;
151
+ align-items: center;
127
152
  @extend %align-horizontal;
128
153
  }
129
154
  }
130
- &-left {
131
- align-items: center;
132
- @extend %align-horizontal;
133
- }
134
- &-center {
135
- text-align: center;
136
- justify-content: center;
137
- align-items: center;
138
- @extend %align-horizontal;
139
- }
140
- &-right {
141
- text-align: right;
142
- justify-content: flex-end;
143
- align-items: center;
144
- @extend %align-horizontal;
145
- }
146
155
  }
147
156
  }
148
157
  %align-vertical-reverse {
149
158
  display: flex;
150
159
  flex-direction: column-reverse;
151
160
  }
152
- .align {
153
- &_vertical-reverse {
154
- &-top {
161
+ @each $selector in button, input, textarea {
162
+ .align,
163
+ $(selector).align {
164
+ &_vertical-reverse {
165
+ &-top {
166
+ &-left {
167
+ align-items: flex-start;
168
+ @extend %align-horizontal-reverse;
169
+ }
170
+ &-center {
171
+ text-align: center;
172
+ align-items: center;
173
+ @extend %align-horizontal-reverse;
174
+ }
175
+ &-right {
176
+ text-align: right;
177
+ align-items: flex-end;
178
+ @extend %align-horizontal-reverse;
179
+ }
180
+ }
155
181
  &-left {
156
- @extend %align-horizontal-reverse;
182
+ justify-content: center;
157
183
  align-items: flex-start;
184
+ @extend %align-horizontal-reverse;
158
185
  }
159
186
  &-center {
160
- @extend %align-horizontal-reverse;
161
187
  text-align: center;
188
+ justify-content: center;
162
189
  align-items: center;
190
+ @extend %align-horizontal-reverse;
163
191
  }
164
192
  &-right {
165
- @extend %align-horizontal-reverse;
166
193
  text-align: right;
194
+ justify-content: center;
167
195
  align-items: flex-end;
168
- }
169
- }
170
- &-left {
171
- @extend %align-horizontal-reverse;
172
- justify-content: center;
173
- align-items: flex-start;
174
- }
175
- &-center {
176
- @extend %align-horizontal-reverse;
177
- text-align: center;
178
- justify-content: center;
179
- align-items: center;
180
- }
181
- &-right {
182
- @extend %align-horizontal-reverse;
183
- text-align: right;
184
- justify-content: center;
185
- align-items: flex-end;
186
- }
187
- &-bottom {
188
- &-left {
189
- @extend %align-horizontal-reverse;
190
- justify-content: flex-end;
191
- align-items: flex-start;
192
- }
193
- &-center {
194
196
  @extend %align-horizontal-reverse;
195
- text-align: center;
196
- justify-content: flex-end;
197
- align-items: center;
198
197
  }
199
- &-right {
200
- @extend %align-horizontal-reverse;
201
- text-align: right;
202
- justify-content: flex-end;
203
- align-items: flex-end;
198
+ &-bottom {
199
+ &-left {
200
+ justify-content: flex-end;
201
+ align-items: flex-start;
202
+ @extend %align-horizontal-reverse;
203
+ }
204
+ &-center {
205
+ text-align: center;
206
+ justify-content: flex-end;
207
+ align-items: center;
208
+ @extend %align-horizontal-reverse;
209
+ }
210
+ &-right {
211
+ text-align: right;
212
+ justify-content: flex-end;
213
+ align-items: flex-end;
214
+ @extend %align-horizontal-reverse;
215
+ }
204
216
  }
205
217
  }
206
218
  }
@@ -209,63 +221,67 @@
209
221
  display: flex;
210
222
  flex-direction: column;
211
223
  }
212
- .align {
213
- &_vertical {
214
- &-top {
215
- &-left {
216
- align-items: flex-start;
217
- @extend %align-vertical;
218
- }
219
- &-center {
220
- text-align: center;
221
- align-items: center;
222
- @extend %align-vertical;
223
- }
224
- &-right {
225
- text-align: right;
226
- align-items: flex-end;
227
- @extend %align-vertical;
224
+ @each $selector in button, input, textarea {
225
+ .align,
226
+ $(selector).align {
227
+ &_vertical {
228
+ &-top {
229
+ &-left {
230
+ align-items: flex-start;
231
+ @extend %align-vertical;
232
+ }
233
+ &-center {
234
+ text-align: center;
235
+ align-items: center;
236
+ @extend %align-vertical;
237
+ }
238
+ &-right {
239
+ text-align: right;
240
+ align-items: flex-end;
241
+ @extend %align-vertical;
242
+ }
228
243
  }
229
- }
230
- &-left {
231
- justify-content: center;
232
- align-items: flex-start;
233
- @extend %align-vertical;
234
- }
235
- &-center {
236
- text-align: center;
237
- justify-content: center;
238
- align-items: center;
239
- @extend %align-vertical;
240
- }
241
- &-right {
242
- text-align: right;
243
- justify-content: center;
244
- align-items: flex-end;
245
- @extend %align-vertical;
246
- }
247
- &-bottom {
248
244
  &-left {
249
- justify-content: flex-end;
245
+ justify-content: center;
250
246
  align-items: flex-start;
251
247
  @extend %align-vertical;
252
248
  }
253
249
  &-center {
254
250
  text-align: center;
255
- justify-content: flex-end;
251
+ justify-content: center;
256
252
  align-items: center;
257
253
  @extend %align-vertical;
258
254
  }
259
255
  &-right {
260
256
  text-align: right;
261
- justify-content: flex-end;
257
+ justify-content: center;
262
258
  align-items: flex-end;
263
259
  @extend %align-vertical;
264
260
  }
261
+ &-bottom {
262
+ &-left {
263
+ justify-content: flex-end;
264
+ align-items: flex-start;
265
+ @extend %align-vertical;
266
+ }
267
+ &-center {
268
+ text-align: center;
269
+ justify-content: flex-end;
270
+ align-items: center;
271
+ @extend %align-vertical;
272
+ }
273
+ &-right {
274
+ text-align: right;
275
+ justify-content: flex-end;
276
+ align-items: flex-end;
277
+ @extend %align-vertical;
278
+ }
279
+ }
265
280
  }
266
281
  }
267
282
  }
268
- .alignment {
283
+ .alignment,
284
+ div.alignment {
269
285
  &_top {
270
286
  &-left {
271
287
  position: absolute;
@@ -276,6 +292,7 @@
276
292
  position: absolute;
277
293
  left: 50%;
278
294
  bottom: 100%;
295
+ transform: translateX(-50%);
279
296
  }
280
297
  &-right {
281
298
  position: absolute;
@@ -293,6 +310,7 @@
293
310
  position: absolute;
294
311
  left: 50%;
295
312
  top: 100%;
313
+ transform: translateX(-50%);
296
314
  }
297
315
  &-right {
298
316
  position: absolute;
@@ -320,50 +338,9 @@
320
338
  }
321
339
  }
322
340
  }
323
- .border-color,
324
- button.border-color {
325
- &_none {
326
- border-width: 1px;
327
- border-color: transparent;
328
- border-style: solid;
329
- }
330
- @each $type in accent, primary, secondary, surface, error, warning, success,
331
- danger, info, disabled {
332
- @each $color in primary, secondary, tertiary, quaternary {
333
- &_$(type) {
334
- &-border {
335
- &-$(color) {
336
- border-width: 1px;
337
- border-color: var(--color-$(type)-border-$(color));
338
- border-style: solid;
339
- }
340
- }
341
- }
342
- }
343
- }
344
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
345
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
346
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
347
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
348
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
349
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
350
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
351
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
352
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
353
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
354
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
355
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
356
- sonic-silver {
357
- &_$(palette) {
358
- border-width: 1px;
359
- border-color: var(--color-palette-$(palette));
360
- border-style: solid;
361
- }
362
- }
363
- }
364
- .border-color,
365
- button.border-color {
366
- &_active {
341
+ @each $selector in button, input, textarea {
342
+ .border-color,
343
+ $(selector).border-color {
367
344
  &_none {
368
345
  border-width: 1px;
369
346
  border-color: transparent;
@@ -404,21 +381,21 @@ button.border-color {
404
381
  }
405
382
  }
406
383
  }
407
- .border-color,
408
- button.border-color {
409
- &_active {
410
- &_none {
411
- border-width: 1px;
412
- border-color: transparent;
413
- border-style: solid;
414
- }
415
- @each $type in accent, primary, secondary, surface, error, warning, success,
416
- danger, info, disabled {
417
- @each $color in primary, secondary, tertiary, quaternary {
418
- &_$(type) {
419
- &-border {
420
- &-$(color) {
421
- &:hover {
384
+ @each $selector in button, input, textarea {
385
+ .border-color,
386
+ $(selector).border-color {
387
+ &_active {
388
+ &_none {
389
+ border-width: 1px;
390
+ border-color: transparent;
391
+ border-style: solid;
392
+ }
393
+ @each $type in accent, primary, secondary, surface, error, warning,
394
+ success, danger, info, disabled {
395
+ @each $color in primary, secondary, tertiary, quaternary {
396
+ &_$(type) {
397
+ &-border {
398
+ &-$(color) {
422
399
  border-width: 1px;
423
400
  border-color: var(--color-$(type)-border-$(color));
424
401
  border-style: solid;
@@ -427,22 +404,20 @@ button.border-color {
427
404
  }
428
405
  }
429
406
  }
430
- }
431
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
432
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
433
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
434
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
435
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
436
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
437
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
438
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
439
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
440
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
441
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
442
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
443
- alto, athens-gray, sonic-silver {
444
- &_$(palette) {
445
- &:hover {
407
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
408
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
409
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
410
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
411
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
412
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
413
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
414
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
415
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
416
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
417
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
418
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
419
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
420
+ &_$(palette) {
446
421
  border-width: 1px;
447
422
  border-color: var(--color-palette-$(palette));
448
423
  border-style: solid;
@@ -451,111 +426,164 @@ button.border-color {
451
426
  }
452
427
  }
453
428
  }
454
- .border-color,
455
- button.border-color {
456
- &_focus {
457
- &_none {
458
- border-width: 1px;
459
- border-color: transparent;
460
- border-style: solid;
461
- }
462
- @each $type in accent, primary, secondary, surface, error, warning, success,
463
- danger, info, disabled {
464
- @each $color in primary, secondary, tertiary, quaternary {
465
- &_$(type) {
466
- &-border {
467
- &-$(color) {
468
- &:focus {
469
- border-width: 1px;
470
- border-color: var(--color-$(type)-border-$(color)) !important;
471
- border-style: solid;
472
- outline: 0;
429
+ @each $selector in button, input, textarea {
430
+ .border-color,
431
+ $(selector).border-color {
432
+ &_active {
433
+ &_none {
434
+ border-width: 1px;
435
+ border-color: transparent;
436
+ border-style: solid;
437
+ }
438
+ @each $type in accent, primary, secondary, surface, error, warning,
439
+ success, danger, info, disabled {
440
+ @each $color in primary, secondary, tertiary, quaternary {
441
+ &_$(type) {
442
+ &-border {
443
+ &-$(color) {
444
+ &:hover {
445
+ border-width: 1px;
446
+ border-color: var(--color-$(type)-border-$(color));
447
+ border-style: solid;
448
+ }
473
449
  }
474
450
  }
475
451
  }
476
452
  }
477
453
  }
478
- }
479
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
480
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
481
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
482
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
483
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
484
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
485
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
486
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
487
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
488
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
489
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
490
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
491
- alto, athens-gray, sonic-silver {
492
- &_$(palette) {
493
- &:focus {
494
- border-width: 1px;
495
- border-color: var(--color-palette-$(palette)) !important;
496
- border-style: solid;
497
- outline: 0;
454
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
455
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
456
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
457
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
458
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
459
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
460
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
461
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
462
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
463
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
464
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
465
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
466
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
467
+ &_$(palette) {
468
+ &:hover {
469
+ border-width: 1px;
470
+ border-color: var(--color-palette-$(palette));
471
+ border-style: solid;
472
+ }
498
473
  }
499
474
  }
500
475
  }
501
476
  }
502
477
  }
503
- .border-color,
504
- button.border-color {
505
- &_hover {
506
- &_none {
507
- border-width: 1px;
508
- border-color: transparent;
509
- border-style: solid;
510
- }
511
- @each $type in accent, primary, secondary, surface, error, warning, success,
512
- danger, info, disabled {
513
- @each $color in primary, secondary, tertiary, quaternary {
514
- &_$(type) {
515
- &-border {
516
- &-$(color) {
517
- &:hover {
518
- border-width: 1px;
519
- border-color: var(--color-$(type)-border-$(color));
520
- border-style: solid;
478
+ @each $selector in button, input, textarea {
479
+ .border-color,
480
+ $(selector).border-color {
481
+ &_focus {
482
+ &_none {
483
+ border-width: 1px;
484
+ border-color: transparent;
485
+ border-style: solid;
486
+ }
487
+ @each $type in accent, primary, secondary, surface, error, warning,
488
+ success, danger, info, disabled {
489
+ @each $color in primary, secondary, tertiary, quaternary {
490
+ &_$(type) {
491
+ &-border {
492
+ &-$(color) {
493
+ &:focus {
494
+ border-width: 1px;
495
+ border-color: var(--color-$(type)-border-$(color)) !important;
496
+ border-style: solid;
497
+ outline: 0;
498
+ }
521
499
  }
522
- &-hover {
500
+ }
501
+ }
502
+ }
503
+ }
504
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
505
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
506
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
507
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
508
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
509
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
510
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
511
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
512
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
513
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
514
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
515
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
516
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
517
+ &_$(palette) {
518
+ &:focus {
519
+ border-width: 1px;
520
+ border-color: var(--color-palette-$(palette)) !important;
521
+ border-style: solid;
522
+ outline: 0;
523
+ }
524
+ }
525
+ }
526
+ }
527
+ }
528
+ }
529
+ @each $selector in button, input, textarea {
530
+ .border-color,
531
+ $(selector).border-color {
532
+ &_hover {
533
+ &_none {
534
+ border-width: 1px;
535
+ border-color: transparent;
536
+ border-style: solid;
537
+ }
538
+ @each $type in accent, primary, secondary, surface, error, warning,
539
+ success, danger, info, disabled {
540
+ @each $color in primary, secondary, tertiary, quaternary {
541
+ &_$(type) {
542
+ &-border {
543
+ &-$(color) {
523
544
  &:hover {
524
545
  border-width: 1px;
525
546
  border-color: var(--color-$(type)-border-$(color));
526
547
  border-style: solid;
527
548
  }
549
+ &-hover {
550
+ &:hover {
551
+ border-width: 1px;
552
+ border-color: var(--color-$(type)-border-$(color));
553
+ border-style: solid;
554
+ }
555
+ }
528
556
  }
529
557
  }
530
558
  }
531
559
  }
532
560
  }
533
- }
534
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
535
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
536
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
537
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
538
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
539
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
540
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
541
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
542
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
543
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
544
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
545
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
546
- alto, athens-gray, sonic-silver {
547
- &_$(palette) {
548
- &:hover {
549
- border-width: 1px;
550
- border-color: var(--color-palette-$(palette));
551
- border-style: solid;
552
- }
553
- &-hover {
561
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
562
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
563
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
564
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
565
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
566
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
567
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
568
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
569
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
570
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
571
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
572
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
573
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
574
+ &_$(palette) {
554
575
  &:hover {
555
576
  border-width: 1px;
556
577
  border-color: var(--color-palette-$(palette));
557
578
  border-style: solid;
558
579
  }
580
+ &-hover {
581
+ &:hover {
582
+ border-width: 1px;
583
+ border-color: var(--color-palette-$(palette));
584
+ border-style: solid;
585
+ }
586
+ }
559
587
  }
560
588
  }
561
589
  }
@@ -763,82 +791,36 @@ button.border-color {
763
791
  }
764
792
  }
765
793
  }
766
- .fill,
767
- button.fill {
768
- &_none {
769
- background-color: transparent;
770
- }
771
- @each $type in accent, primary, secondary, surface, error, warning, success,
772
- danger, info, disabled {
773
- @each $color in primary, secondary, tertiary, quaternary {
774
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
775
- &_$(type) {
776
- &-item {
777
- &-$(color) {
778
- background: var(--color-$(type)-item-$(color));
779
-
780
- /* &$(alpha) {
781
- background: var(--color-$(type)-item-$(color)-$(alpha));
782
- } */
783
- }
784
- }
785
- &-$(color) {
786
- background: var(--color-$(type)-fill-$(color));
787
-
788
- /* &$(alpha) {
789
- background: var(--color-$(type)-$(color)-$(alpha));
790
- } */
791
- }
792
- }
793
-
794
- /* } */
795
- }
796
- }
797
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
798
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
799
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
800
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
801
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
802
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
803
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
804
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
805
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
806
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
807
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
808
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
809
- sonic-silver {
810
- &_$(palette) {
811
- background: var(--color-palette-$(palette));
812
- &-item {
813
- &_$(palette) {
814
- background: var(--color-palette-$(palette));
815
- }
816
- }
817
- }
818
- }
819
- }
820
- .fill,
821
- button.fill {
822
- &_active {
794
+ @each $selector in button, input, textarea {
795
+ .fill,
796
+ $(selector).fill {
823
797
  &_none {
824
798
  background-color: transparent;
825
799
  }
826
800
  @each $type in accent, primary, secondary, surface, error, warning, success,
827
801
  danger, info, disabled {
828
802
  @each $color in primary, secondary, tertiary, quaternary {
803
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
829
804
  &_$(type) {
830
805
  &-item {
831
806
  &-$(color) {
832
807
  background: var(--color-$(type)-item-$(color));
808
+
809
+ /* &$(alpha) {
810
+ background: var(--color-$(type)-item-$(color)-$(alpha));
811
+ } */
833
812
  }
834
813
  }
835
814
  &-$(color) {
836
815
  background: var(--color-$(type)-fill-$(color));
837
- }
838
- &-$(color)-active {
839
- background: var(--color-$(type)-fill-active-$(color));
816
+
817
+ /* &$(alpha) {
818
+ background: var(--color-$(type)-$(color)-$(alpha));
819
+ } */
840
820
  }
841
821
  }
822
+
823
+ /* } */
842
824
  }
843
825
  }
844
826
  @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
@@ -865,112 +847,167 @@ button.fill {
865
847
  }
866
848
  }
867
849
  }
868
- .fill,
869
- button.fill {
870
- &_active {
871
- &_hover {
850
+ @each $selector in button, input, textarea {
851
+ .fill,
852
+ $(selector).fill {
853
+ &_active {
872
854
  &_none {
873
855
  background-color: transparent;
874
856
  }
875
857
  @each $type in accent, primary, secondary, surface, error, warning,
876
858
  success, danger, info, disabled {
877
859
  @each $color in primary, secondary, tertiary, quaternary {
878
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
879
860
  &_$(type) {
880
861
  &-item {
881
862
  &-$(color) {
882
- &:hover {
883
- background: var(--color-$(type)-item-$(color));
884
- }
863
+ background: var(--color-$(type)-item-$(color));
864
+ }
865
+ }
866
+ &-$(color) {
867
+ background: var(--color-$(type)-fill-$(color));
868
+ }
869
+ &-$(color)-active {
870
+ background: var(--color-$(type)-fill-active-$(color));
871
+ }
872
+ }
873
+ }
874
+ }
875
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
876
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
877
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
878
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
879
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
880
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
881
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
882
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
883
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
884
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
885
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
886
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
887
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
888
+ &_$(palette) {
889
+ background: var(--color-palette-$(palette));
890
+ &-item {
891
+ &_$(palette) {
892
+ background: var(--color-palette-$(palette));
893
+ }
894
+ }
895
+ }
896
+ }
897
+ }
898
+ }
899
+ }
900
+ @each $selector in button, input, textarea {
901
+ .fill,
902
+ $(selector).fill {
903
+ &_active {
904
+ &_hover {
905
+ &_none {
906
+ background-color: transparent;
907
+ }
908
+ @each $type in accent, primary, secondary, surface, error, warning,
909
+ success, danger, info, disabled {
910
+ @each $color in primary, secondary, tertiary, quaternary {
911
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
912
+ &_$(type) {
913
+ &-item {
914
+ &-$(color) {
915
+ &:hover {
916
+ background: var(--color-$(type)-item-$(color));
917
+ }
885
918
 
886
- /* &$(alpha) {
919
+ /* &$(alpha) {
887
920
  &:hover {
888
921
  background: var(--color-$(type)-item-$(color)-$(alpha));
889
922
  }
890
923
  } */
891
- &-hover {
892
- &:hover {
893
- background: var(--color-$(type)-item-$(color)-hover);
894
- }
924
+ &-hover {
925
+ &:hover {
926
+ background: var(--color-$(type)-item-$(color)-hover);
927
+ }
895
928
 
896
- /* &$(alpha) {
929
+ /* &$(alpha) {
897
930
  &:hover {
898
931
  background: var(
899
932
  --color-$(type)-item-$(color)-$(alpha)-hover
900
933
  );
901
934
  }
902
935
  } */
903
- &-active {
904
- &:hover {
905
- background: var(
906
- --color-$(type)-item-$(color)-active-hover
907
- );
908
- }
936
+ &-active {
937
+ &:hover {
938
+ background: var(
939
+ --color-$(type)-item-$(color)-active-hover
940
+ );
941
+ }
909
942
 
910
- /* &$(alpha) {
943
+ /* &$(alpha) {
911
944
  &:hover {
912
945
  background: var(
913
946
  --color-$(type)-item-$(color)-$(alpha)-active-hover
914
947
  );
915
948
  }
916
949
  } */
950
+ }
917
951
  }
918
952
  }
919
953
  }
920
- }
921
- &-$(color) {
922
- &:hover {
923
- background: var(--color-$(type)-fill-$(color));
924
- }
925
- &-hover {
954
+ &-$(color) {
926
955
  &:hover {
927
- background: var(--color-$(type)-fill-$(color)-hover);
956
+ background: var(--color-$(type)-fill-$(color));
928
957
  }
929
- &-active {
958
+ &-hover {
930
959
  &:hover {
931
- background: var(--color-$(type)-fill-$(color)-active-hover);
960
+ background: var(--color-$(type)-fill-$(color)-hover);
961
+ }
962
+ &-active {
963
+ &:hover {
964
+ background: var(
965
+ --color-$(type)-fill-$(color)-active-hover
966
+ );
967
+ }
932
968
  }
933
969
  }
934
- }
935
- &-active {
936
- &:hover {
937
- background: var(--color-$(type)-fill-$(color)-active);
970
+ &-active {
971
+ &:hover {
972
+ background: var(--color-$(type)-fill-$(color)-active);
973
+ }
938
974
  }
939
975
  }
940
- }
941
- &-hover {
942
- &-$(color) {
943
- &:hover {
944
- background: var(--color-$(type)-fill-hover-$(color));
976
+ &-hover {
977
+ &-$(color) {
978
+ &:hover {
979
+ background: var(--color-$(type)-fill-hover-$(color));
980
+ }
945
981
  }
946
982
  }
947
983
  }
948
- }
949
984
 
950
- /* } */
951
- }
952
- }
953
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
954
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
955
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
956
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
957
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
958
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
959
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
960
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
961
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
962
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
963
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
964
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
965
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
966
- &_$(palette) {
967
- &:hover {
968
- background: var(--color-palette-$(palette));
985
+ /* } */
969
986
  }
970
- &-item {
971
- &_$(palette) {
972
- &:hover {
973
- background: var(--color-palette-$(palette));
987
+ }
988
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
989
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
990
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
991
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
992
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
993
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
994
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
995
+ dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
996
+ midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
997
+ indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
998
+ pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
999
+ dark-olive, soft-white, antique-white, yellow-gold, gold, camel,
1000
+ walnut, stone, pebble, cocoa, coastal-gray, white, black, alto,
1001
+ athens-gray, sonic-silver {
1002
+ &_$(palette) {
1003
+ &:hover {
1004
+ background: var(--color-palette-$(palette));
1005
+ }
1006
+ &-item {
1007
+ &_$(palette) {
1008
+ &:hover {
1009
+ background: var(--color-palette-$(palette));
1010
+ }
974
1011
  }
975
1012
  }
976
1013
  }
@@ -979,99 +1016,106 @@ button.fill {
979
1016
  }
980
1017
  }
981
1018
  }
982
- .fill_gradient,
983
- button.fill {
984
- @each $type in primary, secondary, tertiary, quaternary {
985
- &-$(type) {
986
- @each $direction, $degree in (top, right, diagonal, bottom, left),
987
- (0deg, 90deg, 135deg, 180deg, 270deg) {
988
- &-$(direction) {
989
- background: linear-gradient($(degree), var(--color-gradient-$(type)));
1019
+ @each $selector in button, input, textarea {
1020
+ .fill_gradient,
1021
+ $(selector).fill_gradient {
1022
+ @each $type in primary, secondary, tertiary, quaternary {
1023
+ &-$(type) {
1024
+ @each $direction, $degree in (top, right, diagonal, bottom, left),
1025
+ (0deg, 90deg, 135deg, 180deg, 270deg) {
1026
+ &-$(direction) {
1027
+ background: linear-gradient(
1028
+ $(degree),
1029
+ var(--color-gradient-$(type))
1030
+ );
1031
+ }
990
1032
  }
991
1033
  }
992
1034
  }
993
1035
  }
994
1036
  }
995
- .fill,
996
- button.fill {
997
- &_hover {
998
- &_none {
999
- background-color: transparent;
1000
- }
1001
- @each $type in accent, primary, secondary, surface, error, warning, success,
1002
- danger, info, disabled {
1003
- @each $color in primary, secondary, tertiary, quaternary {
1004
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
1005
- &_$(type) {
1006
- &-item {
1007
- &-$(color) {
1008
- &:hover {
1009
- background: var(--color-$(type)-item-$(color));
1010
- }
1037
+ @each $selector in button, input, textarea {
1038
+ .fill,
1039
+ $(selector).fill {
1040
+ &_hover {
1041
+ &_none {
1042
+ background-color: transparent;
1043
+ }
1044
+ @each $type in accent, primary, secondary, surface, error, warning,
1045
+ success, danger, info, disabled {
1046
+ @each $color in primary, secondary, tertiary, quaternary {
1047
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
1048
+ &_$(type) {
1049
+ &-item {
1050
+ &-$(color) {
1051
+ &:hover {
1052
+ background: var(--color-$(type)-item-$(color));
1053
+ }
1011
1054
 
1012
- /* &$(alpha) {
1055
+ /* &$(alpha) {
1013
1056
  &:hover {
1014
1057
  background: var(--color-$(type)-item-$(color)-$(alpha));
1015
1058
  }
1016
1059
  } */
1017
- &-hover {
1018
- &:hover {
1019
- background: var(--color-$(type)-item-$(color)-hover);
1020
- }
1060
+ &-hover {
1061
+ &:hover {
1062
+ background: var(--color-$(type)-item-$(color)-hover);
1063
+ }
1021
1064
 
1022
- /* &$(alpha) {
1065
+ /* &$(alpha) {
1023
1066
  &:hover {
1024
1067
  background: var(
1025
1068
  --color-$(type)-item-$(color)-$(alpha)-hover
1026
1069
  );
1027
1070
  }
1028
1071
  } */
1072
+ }
1029
1073
  }
1030
1074
  }
1031
- }
1032
- &-$(color) {
1033
- &:hover {
1034
- background: var(--color-$(type)-fill-$(color));
1035
- }
1036
- &-hover {
1075
+ &-$(color) {
1037
1076
  &:hover {
1038
- background: var(--color-$(type)-fill-$(color)-hover);
1077
+ background: var(--color-$(type)-fill-$(color));
1078
+ }
1079
+ &-hover {
1080
+ &:hover {
1081
+ background: var(--color-$(type)-fill-$(color)-hover);
1082
+ }
1039
1083
  }
1040
1084
  }
1041
- }
1042
- &-hover {
1043
- &-$(color) {
1044
- &:hover {
1045
- background: var(--color-$(type)-fill-hover-$(color));
1085
+ &-hover {
1086
+ &-$(color) {
1087
+ &:hover {
1088
+ background: var(--color-$(type)-fill-hover-$(color));
1089
+ }
1046
1090
  }
1047
1091
  }
1048
1092
  }
1049
- }
1050
1093
 
1051
- /* } */
1052
- }
1053
- }
1054
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1055
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
1056
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
1057
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
1058
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
1059
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
1060
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
1061
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
1062
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
1063
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
1064
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
1065
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
1066
- alto, athens-gray, sonic-silver {
1067
- &_$(palette) {
1068
- &:hover {
1069
- background: var(--color-palette-$(palette));
1094
+ /* } */
1070
1095
  }
1071
- &-item {
1072
- &_$(palette) {
1073
- &:hover {
1074
- background: var(--color-palette-$(palette));
1096
+ }
1097
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1098
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
1099
+ orange, clementine, apricot, papaya, kumquat, light-orange, peach,
1100
+ flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
1101
+ mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
1102
+ dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
1103
+ light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
1104
+ blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
1105
+ ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
1106
+ lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
1107
+ northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
1108
+ antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
1109
+ coastal-gray, white, black, alto, athens-gray, sonic-silver {
1110
+ &_$(palette) {
1111
+ &:hover {
1112
+ background: var(--color-palette-$(palette));
1113
+ }
1114
+ &-item {
1115
+ &_$(palette) {
1116
+ &:hover {
1117
+ background: var(--color-palette-$(palette));
1118
+ }
1075
1119
  }
1076
1120
  }
1077
1121
  }