@itcase/ui 1.8.106 → 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 (18) hide show
  1. package/dist/css/components/Button/Button.css +2 -2
  2. package/dist/css/styles/align/align.css +6 -3
  3. package/dist/css/styles/align/align_horizontal-reverse.css +46 -43
  4. package/dist/css/styles/align/align_horizontal.css +42 -39
  5. package/dist/css/styles/align/align_vertical-reverse.css +43 -40
  6. package/dist/css/styles/align/align_vertical.css +41 -38
  7. package/dist/css/styles/border-color/border-color.css +36 -34
  8. package/dist/css/styles/border-color/border-color_active.css +37 -35
  9. package/dist/css/styles/border-color/border-color_active_hover.css +39 -37
  10. package/dist/css/styles/border-color/border-color_focus.css +41 -39
  11. package/dist/css/styles/border-color/border-color_hover.css +43 -41
  12. package/dist/css/styles/bundle.css +547 -506
  13. package/dist/css/styles/fill/fill.css +41 -39
  14. package/dist/css/styles/fill/fill_active.css +39 -37
  15. package/dist/css/styles/fill/fill_active_hover.css +77 -72
  16. package/dist/css/styles/fill/fill_gradient.css +13 -8
  17. package/dist/css/styles/fill/fill_hover.css +60 -58
  18. 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,59 +221,62 @@
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
  }
@@ -323,50 +338,9 @@ div.alignment {
323
338
  }
324
339
  }
325
340
  }
326
- .border-color,
327
- button.border-color {
328
- &_none {
329
- border-width: 1px;
330
- border-color: transparent;
331
- border-style: solid;
332
- }
333
- @each $type in accent, primary, secondary, surface, error, warning, success,
334
- danger, info, disabled {
335
- @each $color in primary, secondary, tertiary, quaternary {
336
- &_$(type) {
337
- &-border {
338
- &-$(color) {
339
- border-width: 1px;
340
- border-color: var(--color-$(type)-border-$(color));
341
- border-style: solid;
342
- }
343
- }
344
- }
345
- }
346
- }
347
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
348
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
349
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
350
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
351
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
352
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
353
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
354
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
355
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
356
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
357
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
358
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
359
- sonic-silver {
360
- &_$(palette) {
361
- border-width: 1px;
362
- border-color: var(--color-palette-$(palette));
363
- border-style: solid;
364
- }
365
- }
366
- }
367
- .border-color,
368
- button.border-color {
369
- &_active {
341
+ @each $selector in button, input, textarea {
342
+ .border-color,
343
+ $(selector).border-color {
370
344
  &_none {
371
345
  border-width: 1px;
372
346
  border-color: transparent;
@@ -407,21 +381,21 @@ button.border-color {
407
381
  }
408
382
  }
409
383
  }
410
- .border-color,
411
- button.border-color {
412
- &_active {
413
- &_none {
414
- border-width: 1px;
415
- border-color: transparent;
416
- border-style: solid;
417
- }
418
- @each $type in accent, primary, secondary, surface, error, warning, success,
419
- danger, info, disabled {
420
- @each $color in primary, secondary, tertiary, quaternary {
421
- &_$(type) {
422
- &-border {
423
- &-$(color) {
424
- &: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) {
425
399
  border-width: 1px;
426
400
  border-color: var(--color-$(type)-border-$(color));
427
401
  border-style: solid;
@@ -430,22 +404,20 @@ button.border-color {
430
404
  }
431
405
  }
432
406
  }
433
- }
434
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
435
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
436
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
437
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
438
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
439
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
440
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
441
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
442
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
443
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
444
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
445
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
446
- alto, athens-gray, sonic-silver {
447
- &_$(palette) {
448
- &: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) {
449
421
  border-width: 1px;
450
422
  border-color: var(--color-palette-$(palette));
451
423
  border-style: solid;
@@ -454,111 +426,164 @@ button.border-color {
454
426
  }
455
427
  }
456
428
  }
457
- .border-color,
458
- button.border-color {
459
- &_focus {
460
- &_none {
461
- border-width: 1px;
462
- border-color: transparent;
463
- border-style: solid;
464
- }
465
- @each $type in accent, primary, secondary, surface, error, warning, success,
466
- danger, info, disabled {
467
- @each $color in primary, secondary, tertiary, quaternary {
468
- &_$(type) {
469
- &-border {
470
- &-$(color) {
471
- &:focus {
472
- border-width: 1px;
473
- border-color: var(--color-$(type)-border-$(color)) !important;
474
- border-style: solid;
475
- 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
+ }
476
449
  }
477
450
  }
478
451
  }
479
452
  }
480
453
  }
481
- }
482
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
483
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
484
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
485
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
486
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
487
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
488
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
489
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
490
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
491
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
492
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
493
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
494
- alto, athens-gray, sonic-silver {
495
- &_$(palette) {
496
- &:focus {
497
- border-width: 1px;
498
- border-color: var(--color-palette-$(palette)) !important;
499
- border-style: solid;
500
- 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
+ }
501
473
  }
502
474
  }
503
475
  }
504
476
  }
505
477
  }
506
- .border-color,
507
- button.border-color {
508
- &_hover {
509
- &_none {
510
- border-width: 1px;
511
- border-color: transparent;
512
- border-style: solid;
513
- }
514
- @each $type in accent, primary, secondary, surface, error, warning, success,
515
- danger, info, disabled {
516
- @each $color in primary, secondary, tertiary, quaternary {
517
- &_$(type) {
518
- &-border {
519
- &-$(color) {
520
- &:hover {
521
- border-width: 1px;
522
- border-color: var(--color-$(type)-border-$(color));
523
- 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
+ }
524
499
  }
525
- &-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) {
526
544
  &:hover {
527
545
  border-width: 1px;
528
546
  border-color: var(--color-$(type)-border-$(color));
529
547
  border-style: solid;
530
548
  }
549
+ &-hover {
550
+ &:hover {
551
+ border-width: 1px;
552
+ border-color: var(--color-$(type)-border-$(color));
553
+ border-style: solid;
554
+ }
555
+ }
531
556
  }
532
557
  }
533
558
  }
534
559
  }
535
560
  }
536
- }
537
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
538
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
539
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
540
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
541
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
542
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
543
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
544
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
545
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
546
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
547
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
548
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
549
- alto, athens-gray, sonic-silver {
550
- &_$(palette) {
551
- &:hover {
552
- border-width: 1px;
553
- border-color: var(--color-palette-$(palette));
554
- border-style: solid;
555
- }
556
- &-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) {
557
575
  &:hover {
558
576
  border-width: 1px;
559
577
  border-color: var(--color-palette-$(palette));
560
578
  border-style: solid;
561
579
  }
580
+ &-hover {
581
+ &:hover {
582
+ border-width: 1px;
583
+ border-color: var(--color-palette-$(palette));
584
+ border-style: solid;
585
+ }
586
+ }
562
587
  }
563
588
  }
564
589
  }
@@ -766,82 +791,36 @@ button.border-color {
766
791
  }
767
792
  }
768
793
  }
769
- .fill,
770
- button.fill {
771
- &_none {
772
- background-color: transparent;
773
- }
774
- @each $type in accent, primary, secondary, surface, error, warning, success,
775
- danger, info, disabled {
776
- @each $color in primary, secondary, tertiary, quaternary {
777
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
778
- &_$(type) {
779
- &-item {
780
- &-$(color) {
781
- background: var(--color-$(type)-item-$(color));
782
-
783
- /* &$(alpha) {
784
- background: var(--color-$(type)-item-$(color)-$(alpha));
785
- } */
786
- }
787
- }
788
- &-$(color) {
789
- background: var(--color-$(type)-fill-$(color));
790
-
791
- /* &$(alpha) {
792
- background: var(--color-$(type)-$(color)-$(alpha));
793
- } */
794
- }
795
- }
796
-
797
- /* } */
798
- }
799
- }
800
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
801
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
802
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
803
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
804
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
805
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
806
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
807
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
808
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
809
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
810
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
811
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
812
- sonic-silver {
813
- &_$(palette) {
814
- background: var(--color-palette-$(palette));
815
- &-item {
816
- &_$(palette) {
817
- background: var(--color-palette-$(palette));
818
- }
819
- }
820
- }
821
- }
822
- }
823
- .fill,
824
- button.fill {
825
- &_active {
794
+ @each $selector in button, input, textarea {
795
+ .fill,
796
+ $(selector).fill {
826
797
  &_none {
827
798
  background-color: transparent;
828
799
  }
829
800
  @each $type in accent, primary, secondary, surface, error, warning, success,
830
801
  danger, info, disabled {
831
802
  @each $color in primary, secondary, tertiary, quaternary {
803
+ /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
832
804
  &_$(type) {
833
805
  &-item {
834
806
  &-$(color) {
835
807
  background: var(--color-$(type)-item-$(color));
808
+
809
+ /* &$(alpha) {
810
+ background: var(--color-$(type)-item-$(color)-$(alpha));
811
+ } */
836
812
  }
837
813
  }
838
814
  &-$(color) {
839
815
  background: var(--color-$(type)-fill-$(color));
840
- }
841
- &-$(color)-active {
842
- background: var(--color-$(type)-fill-active-$(color));
816
+
817
+ /* &$(alpha) {
818
+ background: var(--color-$(type)-$(color)-$(alpha));
819
+ } */
843
820
  }
844
821
  }
822
+
823
+ /* } */
845
824
  }
846
825
  }
847
826
  @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
@@ -868,112 +847,167 @@ button.fill {
868
847
  }
869
848
  }
870
849
  }
871
- .fill,
872
- button.fill {
873
- &_active {
874
- &_hover {
850
+ @each $selector in button, input, textarea {
851
+ .fill,
852
+ $(selector).fill {
853
+ &_active {
875
854
  &_none {
876
855
  background-color: transparent;
877
856
  }
878
857
  @each $type in accent, primary, secondary, surface, error, warning,
879
858
  success, danger, info, disabled {
880
859
  @each $color in primary, secondary, tertiary, quaternary {
881
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
882
860
  &_$(type) {
883
861
  &-item {
884
862
  &-$(color) {
885
- &:hover {
886
- background: var(--color-$(type)-item-$(color));
887
- }
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
+ }
888
918
 
889
- /* &$(alpha) {
919
+ /* &$(alpha) {
890
920
  &:hover {
891
921
  background: var(--color-$(type)-item-$(color)-$(alpha));
892
922
  }
893
923
  } */
894
- &-hover {
895
- &:hover {
896
- background: var(--color-$(type)-item-$(color)-hover);
897
- }
924
+ &-hover {
925
+ &:hover {
926
+ background: var(--color-$(type)-item-$(color)-hover);
927
+ }
898
928
 
899
- /* &$(alpha) {
929
+ /* &$(alpha) {
900
930
  &:hover {
901
931
  background: var(
902
932
  --color-$(type)-item-$(color)-$(alpha)-hover
903
933
  );
904
934
  }
905
935
  } */
906
- &-active {
907
- &:hover {
908
- background: var(
909
- --color-$(type)-item-$(color)-active-hover
910
- );
911
- }
936
+ &-active {
937
+ &:hover {
938
+ background: var(
939
+ --color-$(type)-item-$(color)-active-hover
940
+ );
941
+ }
912
942
 
913
- /* &$(alpha) {
943
+ /* &$(alpha) {
914
944
  &:hover {
915
945
  background: var(
916
946
  --color-$(type)-item-$(color)-$(alpha)-active-hover
917
947
  );
918
948
  }
919
949
  } */
950
+ }
920
951
  }
921
952
  }
922
953
  }
923
- }
924
- &-$(color) {
925
- &:hover {
926
- background: var(--color-$(type)-fill-$(color));
927
- }
928
- &-hover {
954
+ &-$(color) {
929
955
  &:hover {
930
- background: var(--color-$(type)-fill-$(color)-hover);
956
+ background: var(--color-$(type)-fill-$(color));
931
957
  }
932
- &-active {
958
+ &-hover {
933
959
  &:hover {
934
- 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
+ }
935
968
  }
936
969
  }
937
- }
938
- &-active {
939
- &:hover {
940
- background: var(--color-$(type)-fill-$(color)-active);
970
+ &-active {
971
+ &:hover {
972
+ background: var(--color-$(type)-fill-$(color)-active);
973
+ }
941
974
  }
942
975
  }
943
- }
944
- &-hover {
945
- &-$(color) {
946
- &:hover {
947
- background: var(--color-$(type)-fill-hover-$(color));
976
+ &-hover {
977
+ &-$(color) {
978
+ &:hover {
979
+ background: var(--color-$(type)-fill-hover-$(color));
980
+ }
948
981
  }
949
982
  }
950
983
  }
951
- }
952
984
 
953
- /* } */
954
- }
955
- }
956
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
957
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
958
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
959
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
960
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
961
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
962
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
963
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
964
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
965
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
966
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
967
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
968
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
969
- &_$(palette) {
970
- &:hover {
971
- background: var(--color-palette-$(palette));
985
+ /* } */
972
986
  }
973
- &-item {
974
- &_$(palette) {
975
- &:hover {
976
- 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
+ }
977
1011
  }
978
1012
  }
979
1013
  }
@@ -982,99 +1016,106 @@ button.fill {
982
1016
  }
983
1017
  }
984
1018
  }
985
- .fill_gradient,
986
- button.fill {
987
- @each $type in primary, secondary, tertiary, quaternary {
988
- &-$(type) {
989
- @each $direction, $degree in (top, right, diagonal, bottom, left),
990
- (0deg, 90deg, 135deg, 180deg, 270deg) {
991
- &-$(direction) {
992
- 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
+ }
993
1032
  }
994
1033
  }
995
1034
  }
996
1035
  }
997
1036
  }
998
- .fill,
999
- button.fill {
1000
- &_hover {
1001
- &_none {
1002
- background-color: transparent;
1003
- }
1004
- @each $type in accent, primary, secondary, surface, error, warning, success,
1005
- danger, info, disabled {
1006
- @each $color in primary, secondary, tertiary, quaternary {
1007
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
1008
- &_$(type) {
1009
- &-item {
1010
- &-$(color) {
1011
- &:hover {
1012
- background: var(--color-$(type)-item-$(color));
1013
- }
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
+ }
1014
1054
 
1015
- /* &$(alpha) {
1055
+ /* &$(alpha) {
1016
1056
  &:hover {
1017
1057
  background: var(--color-$(type)-item-$(color)-$(alpha));
1018
1058
  }
1019
1059
  } */
1020
- &-hover {
1021
- &:hover {
1022
- background: var(--color-$(type)-item-$(color)-hover);
1023
- }
1060
+ &-hover {
1061
+ &:hover {
1062
+ background: var(--color-$(type)-item-$(color)-hover);
1063
+ }
1024
1064
 
1025
- /* &$(alpha) {
1065
+ /* &$(alpha) {
1026
1066
  &:hover {
1027
1067
  background: var(
1028
1068
  --color-$(type)-item-$(color)-$(alpha)-hover
1029
1069
  );
1030
1070
  }
1031
1071
  } */
1072
+ }
1032
1073
  }
1033
1074
  }
1034
- }
1035
- &-$(color) {
1036
- &:hover {
1037
- background: var(--color-$(type)-fill-$(color));
1038
- }
1039
- &-hover {
1075
+ &-$(color) {
1040
1076
  &:hover {
1041
- 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
+ }
1042
1083
  }
1043
1084
  }
1044
- }
1045
- &-hover {
1046
- &-$(color) {
1047
- &:hover {
1048
- background: var(--color-$(type)-fill-hover-$(color));
1085
+ &-hover {
1086
+ &-$(color) {
1087
+ &:hover {
1088
+ background: var(--color-$(type)-fill-hover-$(color));
1089
+ }
1049
1090
  }
1050
1091
  }
1051
1092
  }
1052
- }
1053
1093
 
1054
- /* } */
1055
- }
1056
- }
1057
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
1058
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
1059
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
1060
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
1061
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
1062
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
1063
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
1064
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
1065
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
1066
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
1067
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
1068
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
1069
- alto, athens-gray, sonic-silver {
1070
- &_$(palette) {
1071
- &:hover {
1072
- background: var(--color-palette-$(palette));
1094
+ /* } */
1073
1095
  }
1074
- &-item {
1075
- &_$(palette) {
1076
- &:hover {
1077
- 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
+ }
1078
1119
  }
1079
1120
  }
1080
1121
  }