@hyvor/design 2.1.18 → 2.1.20-beta.1

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 (30) hide show
  1. package/dist/components/Button/Button.svelte +413 -349
  2. package/dist/components/ButtonGroup/ButtonGroup.svelte +62 -63
  3. package/dist/components/Dropdown/Dropdown.svelte +14 -12
  4. package/dist/components/Dropdown/Dropdown.svelte.d.ts +1 -0
  5. package/dist/components/Dropdown/DropdownContent.svelte +21 -13
  6. package/dist/components/FileUploader/FileUploader.svelte +19 -17
  7. package/dist/components/FileUploader/Media/Media.svelte +44 -44
  8. package/dist/components/FileUploader/TabUpload/TabUpload.svelte +47 -45
  9. package/dist/components/FileUploader/Unsplash/Unsplash.svelte +38 -38
  10. package/dist/components/FormControl/Validation.svelte +30 -30
  11. package/dist/components/IconButton/IconButton.svelte +266 -204
  12. package/dist/components/Kbd/Kbd.svelte +33 -28
  13. package/dist/components/Loader/Loader.svelte +81 -78
  14. package/dist/components/Radio/Radio.svelte +71 -69
  15. package/dist/components/SplitControl/SplitControl.svelte +45 -40
  16. package/dist/components/Tag/Tag.svelte +152 -130
  17. package/dist/components/TextInput/TextInput.svelte +90 -89
  18. package/dist/components/Textarea/Textarea.svelte +1 -2
  19. package/dist/components/Tooltip/Tooltip.svelte +4 -1
  20. package/dist/components/Usage/Usage.svelte +40 -40
  21. package/dist/components/directives/clickOutside.d.ts +2 -1
  22. package/dist/components/directives/clickOutside.js +25 -7
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.js +1 -1
  25. package/dist/marketing/Docs/Toc.svelte +103 -91
  26. package/dist/marketing/Document/Document.svelte +77 -62
  27. package/dist/marketing/Testimonials/Testimonials.svelte +3 -27
  28. package/dist/marketing/Testimonials/Testimonials.svelte.d.ts +0 -1
  29. package/dist/{variables.scss → variables.css} +1 -7
  30. package/package.json +20 -20
package/dist/components/Button/Button.svelte CHANGED
@@ -96,352 +96,416 @@
96
96
  {/if}
97
97
  </svelte:element>
98
98
 
99
- <style>.slot.start {
100
- margin-right: 6px;
101
- display: inline-flex;
102
- align-items: center;
103
- }
104
- .slot.start:empty {
105
- margin-right: 0;
106
- }
107
-
108
- .slot.end {
109
- margin-left: 6px;
110
- display: inline-flex;
111
- align-items: center;
112
- }
113
- .slot.end:empty {
114
- margin-left: 0;
115
- }
116
-
117
- .button {
118
- position: relative;
119
- display: inline-flex;
120
- align-items: center;
121
- font-weight: 600;
122
- font-size: 14px;
123
- border-radius: 20px;
124
- line-height: 1;
125
- cursor: pointer;
126
- --local-hover-shadow-size: 2.5px;
127
- --local-hover-shadow-color: var(--accent-light);
128
- }
129
- .button:active {
130
- --local-hover-shadow-size: 4px;
131
- }
132
- .button.block {
133
- display: flex;
134
- width: 100%;
135
- }
136
- .button:hover {
137
- box-shadow: 0 0 0 var(--local-hover-shadow-size) var(--local-hover-shadow-color);
138
- }
139
- .button:focus-visible {
140
- outline: none;
141
- box-shadow: 0 0 0 calc(var(--local-hover-shadow-size) + 1px) var(--local-hover-shadow-color);
142
- }
143
-
144
- .button-content {
145
- display: inline-flex;
146
- align-items: center;
147
- justify-content: center;
148
- flex: 1;
149
- }
150
-
151
- .button.start .button-content {
152
- justify-content: flex-start;
153
- }
154
-
155
- .action {
156
- display: inline-flex;
157
- align-items: center;
158
- justify-content: center;
159
- margin-left: 6px;
160
- }
161
-
162
- /* Sizes */
163
- .button.x-small {
164
- padding: 4px 8px;
165
- font-size: 12px;
166
- --local-hover-shadow-size: 1px;
167
- }
168
- .button.x-small:active {
169
- --local-hover-shadow-size: 2px;
170
- }
171
-
172
- .button.small {
173
- padding: 6px 12px;
174
- --local-hover-shadow-size: 2px;
175
- }
176
- .button.small:active {
177
- --local-hover-shadow-size: 3px;
178
- }
179
- .button.small .slot.start {
180
- margin-right: 4px;
181
- }
182
- .button.small .slot.end {
183
- margin-left: 4px;
184
- }
185
-
186
- .button.medium {
187
- padding: 8px 14px;
188
- }
189
-
190
- .button.large {
191
- padding: 11px 20px;
192
- --local-hover-shadow-size: 3px;
193
- }
194
- .button.large:active {
195
- --local-hover-shadow-size: 5px;
196
- }
197
-
198
- .button.x-large {
199
- padding: 12px 26px;
200
- font-size: 16px;
201
- }
202
-
203
- .button.fill.accent {
204
- background-color: var(--accent);
205
- color: var(--accent-text);
206
- transition: 0.2s box-shadow;
207
- --local-hover-shadow-color: var(--accent-light);
208
- }
209
- .button.fill.gray {
210
- background-color: var(--gray-dark);
211
- color: var(--text-white);
212
- transition: 0.2s box-shadow;
213
- --local-hover-shadow-color: var(--gray-light);
214
- }
215
- .button.fill.green {
216
- background-color: var(--green-dark);
217
- color: var(--text-white);
218
- transition: 0.2s box-shadow;
219
- --local-hover-shadow-color: var(--green-light);
220
- }
221
- .button.fill.red {
222
- background-color: var(--red-dark);
223
- color: var(--text-white);
224
- transition: 0.2s box-shadow;
225
- --local-hover-shadow-color: var(--red-light);
226
- }
227
- .button.fill.blue {
228
- background-color: var(--blue-dark);
229
- color: var(--text-white);
230
- transition: 0.2s box-shadow;
231
- --local-hover-shadow-color: var(--blue-light);
232
- }
233
- .button.fill.orange {
234
- background-color: var(--orange-dark);
235
- color: var(--text-white);
236
- transition: 0.2s box-shadow;
237
- --local-hover-shadow-color: var(--orange-light);
238
- }
239
- .button.fill.input {
240
- background-color: var(--input);
241
- color: var(--text);
242
- transition: 0.2s box-shadow;
243
- --local-hover-shadow-color: var(--input-hover);
244
- }
245
- .button.fill-light.accent {
246
- background-color: var(--accent-light);
247
- color: var(--accent);
248
- transition: 0.2s box-shadow;
249
- --local-hover-shadow-color: var(--accent-lightest);
250
- }
251
- .button.fill-light.gray {
252
- background-color: var(--gray-light);
253
- color: var(--gray-dark);
254
- transition: 0.2s box-shadow;
255
- --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
256
- }
257
- .button.fill-light.green {
258
- background-color: var(--green-light);
259
- color: var(--green-dark);
260
- transition: 0.2s box-shadow;
261
- --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
262
- }
263
- .button.fill-light.red {
264
- background-color: var(--red-light);
265
- color: var(--red-dark);
266
- transition: 0.2s box-shadow;
267
- --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
268
- }
269
- .button.fill-light.blue {
270
- background-color: var(--blue-light);
271
- color: var(--blue-dark);
272
- transition: 0.2s box-shadow;
273
- --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
274
- }
275
- .button.fill-light.orange {
276
- background-color: var(--orange-light);
277
- color: var(--orange-dark);
278
- transition: 0.2s box-shadow;
279
- --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
280
- }
281
- .button.outline {
282
- border: 1px solid;
283
- }
284
- .button.outline.accent {
285
- background-color: transparent;
286
- border-color: var(--accent);
287
- color: var(--accent);
288
- transition: 0.2s box-shadow;
289
- --local-hover-shadow-color: var(--accent-light);
290
- }
291
- .button.outline.gray {
292
- background-color: transparent;
293
- border-color: var(--gray-dark);
294
- color: var(--gray-dark);
295
- transition: 0.2s box-shadow;
296
- --local-hover-shadow-color: var(--gray-light);
297
- }
298
- .button.outline.green {
299
- background-color: transparent;
300
- border-color: var(--green-dark);
301
- color: var(--green-dark);
302
- transition: 0.2s box-shadow;
303
- --local-hover-shadow-color: var(--green-light);
304
- }
305
- .button.outline.red {
306
- background-color: transparent;
307
- border-color: var(--red-dark);
308
- color: var(--red-dark);
309
- transition: 0.2s box-shadow;
310
- --local-hover-shadow-color: var(--red-light);
311
- }
312
- .button.outline.blue {
313
- background-color: transparent;
314
- border-color: var(--blue-dark);
315
- color: var(--blue-dark);
316
- transition: 0.2s box-shadow;
317
- --local-hover-shadow-color: var(--blue-light);
318
- }
319
- .button.outline.orange {
320
- background-color: transparent;
321
- border-color: var(--orange-dark);
322
- color: var(--orange-dark);
323
- transition: 0.2s box-shadow;
324
- --local-hover-shadow-color: var(--orange-light);
325
- }
326
- .button.outline-fill {
327
- border: 1px solid;
328
- }
329
- .button.outline-fill.accent {
330
- background-color: var(--accent-light);
331
- border-color: var(--accent);
332
- color: var(--accent);
333
- transition: 0.2s box-shadow;
334
- --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
335
- }
336
- .button.outline-fill.gray {
337
- background-color: var(--gray-light);
338
- border-color: var(--gray-dark);
339
- color: var(--gray-dark);
340
- transition: 0.2s box-shadow;
341
- --local-hover-shadow-color: var(--gray-light);
342
- }
343
- .button.outline-fill.green {
344
- background-color: var(--green-light);
345
- border-color: var(--green-dark);
346
- color: var(--green-dark);
347
- transition: 0.2s box-shadow;
348
- --local-hover-shadow-color: var(--green-light);
349
- }
350
- .button.outline-fill.red {
351
- background-color: var(--red-light);
352
- border-color: var(--red-dark);
353
- color: var(--red-dark);
354
- transition: 0.2s box-shadow;
355
- --local-hover-shadow-color: var(--red-light);
356
- }
357
- .button.outline-fill.blue {
358
- background-color: var(--blue-light);
359
- border-color: var(--blue-dark);
360
- color: var(--blue-dark);
361
- transition: 0.2s box-shadow;
362
- --local-hover-shadow-color: var(--blue-light);
363
- }
364
- .button.outline-fill.orange {
365
- background-color: var(--orange-light);
366
- border-color: var(--orange-dark);
367
- color: var(--orange-dark);
368
- transition: 0.2s box-shadow;
369
- --local-hover-shadow-color: var(--orange-light);
370
- }
371
- .button.invisible {
372
- background-color: transparent;
373
- transition: 0.2s background-color;
374
- }
375
- .button.invisible.accent:hover {
376
- background-color: var(--accent-light);
377
- box-shadow: none !important;
378
- }
379
- .button.invisible.gray:hover {
380
- background-color: var(--gray-light);
381
- box-shadow: none !important;
382
- color: var(--gray-dark);
383
- }
384
- .button.invisible.green:hover {
385
- background-color: var(--green-light);
386
- box-shadow: none !important;
387
- color: var(--green-dark);
388
- }
389
- .button.invisible.red:hover {
390
- background-color: var(--red-light);
391
- box-shadow: none !important;
392
- color: var(--red-dark);
393
- }
394
- .button.invisible.blue:hover {
395
- background-color: var(--blue-light);
396
- box-shadow: none !important;
397
- color: var(--blue-dark);
398
- }
399
- .button.invisible.orange:hover {
400
- background-color: var(--orange-light);
401
- box-shadow: none !important;
402
- color: var(--orange-dark);
403
- }
404
- .button.invisible.input:hover {
405
- background-color: var(--input);
406
- box-shadow: none !important;
407
- color: var(--text);
408
- }
409
-
410
- :global(:root.dark) .button.light {
411
- background-color: #2e2e2e;
412
- }
413
-
414
- .button.invisible {
415
- background-color: transparent;
416
- color: var(--text);
417
- transition: 0.2s background-color;
418
- }
419
- .button.invisible:hover {
420
- background-color: var(--accent-light);
421
- box-shadow: none !important;
422
- }
423
- .button.invisible {
424
- /*styles for disabled state*/
425
- }
426
- .button.invisible[disabled] {
427
- background-color: transparent;
428
- color: var(--text);
429
- box-shadow: none !important;
430
- cursor: not-allowed;
431
- opacity: 0.2;
432
- }
433
- .button.invisible[disabled]:hover {
434
- background-color: transparent;
435
- box-shadow: none !important;
436
- color: var(--text);
437
- }
438
-
439
- /*Styles for button disabled state*/
440
- .button[disabled] {
441
- cursor: not-allowed;
442
- opacity: 0.2;
443
- box-shadow: none !important;
444
- }
445
- .button[disabled]:hover {
446
- box-shadow: none !important;
447
- }</style>
99
+ <style>
100
+ .slot.start {
101
+ margin-right: 6px;
102
+ display: inline-flex;
103
+ align-items: center;
104
+ &:empty {
105
+ margin-right: 0;
106
+ }
107
+ }
108
+
109
+ .slot.end {
110
+ margin-left: 6px;
111
+ display: inline-flex;
112
+ align-items: center;
113
+ &:empty {
114
+ margin-left: 0;
115
+ }
116
+ }
117
+
118
+ .button {
119
+ position: relative;
120
+ display: inline-flex;
121
+ align-items: center;
122
+ font-weight: 600;
123
+ font-size: 14px;
124
+ border-radius: 20px;
125
+ line-height: 1;
126
+ cursor: pointer;
127
+
128
+ --local-hover-shadow-size: 2.5px;
129
+ --local-hover-shadow-color: var(--accent-light);
130
+ &:active {
131
+ --local-hover-shadow-size: 4px;
132
+ }
133
+
134
+ &.block {
135
+ display: flex;
136
+ width: 100%;
137
+ }
138
+
139
+ &:hover {
140
+ box-shadow: 0 0 0 var(--local-hover-shadow-size) var(--local-hover-shadow-color);
141
+ }
142
+
143
+ &:focus-visible {
144
+ outline: none;
145
+ box-shadow: 0 0 0 calc(var(--local-hover-shadow-size) + 1px) var(--local-hover-shadow-color);
146
+ }
147
+ }
148
+
149
+ .button-content {
150
+ display: inline-flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ flex: 1;
154
+ }
155
+ .button.start .button-content {
156
+ justify-content: flex-start;
157
+ }
158
+
159
+ .action {
160
+ display: inline-flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ margin-left: 6px;
164
+ }
165
+
166
+ /* Sizes */
167
+ .button.x-small {
168
+ /* height: 20px; */
169
+ padding: 4px 8px;
170
+ font-size: 12px;
171
+ --local-hover-shadow-size: 1px;
172
+ &:active {
173
+ --local-hover-shadow-size: 2px;
174
+ }
175
+ }
176
+
177
+ .button.small {
178
+ /* height: 26px; */
179
+ padding: 6px 12px;
180
+
181
+ --local-hover-shadow-size: 2px;
182
+ &:active {
183
+ --local-hover-shadow-size: 3px;
184
+ }
185
+
186
+ .slot.start {
187
+ margin-right: 4px;
188
+ }
189
+ .slot.end {
190
+ margin-left: 4px;
191
+ }
192
+ }
193
+ .button.medium {
194
+ /* height: 30px; */
195
+ padding: 8px 14px;
196
+ }
197
+ .button.large {
198
+ /* height: 36px; */
199
+ padding: 11px 20px;
200
+ --local-hover-shadow-size: 3px;
201
+ &:active {
202
+ --local-hover-shadow-size: 5px;
203
+ }
204
+ }
205
+
206
+ .button.x-large {
207
+ /* height: 40px; */
208
+ padding: 12px 26px;
209
+ font-size: 16px;
210
+ }
211
+
212
+ .button {
213
+ &.fill {
214
+ &.accent {
215
+ background-color: var(--accent);
216
+ color: var(--accent-text);
217
+ transition: 0.2s box-shadow;
218
+ --local-hover-shadow-color: var(--accent-light);
219
+ }
220
+
221
+ &.gray {
222
+ background-color: var(--gray-dark);
223
+ color: var(--text-white);
224
+ transition: 0.2s box-shadow;
225
+ --local-hover-shadow-color: var(--gray-light);
226
+ }
227
+
228
+ &.green {
229
+ background-color: var(--green-dark);
230
+ color: var(--text-white);
231
+ transition: 0.2s box-shadow;
232
+ --local-hover-shadow-color: var(--green-light);
233
+ }
234
+
235
+ &.red {
236
+ background-color: var(--red-dark);
237
+ color: var(--text-white);
238
+ transition: 0.2s box-shadow;
239
+ --local-hover-shadow-color: var(--red-light);
240
+ }
241
+
242
+ &.blue {
243
+ background-color: var(--blue-dark);
244
+ color: var(--text-white);
245
+ transition: 0.2s box-shadow;
246
+ --local-hover-shadow-color: var(--blue-light);
247
+ }
248
+
249
+ &.orange {
250
+ background-color: var(--orange-dark);
251
+ color: var(--text-white);
252
+ transition: 0.2s box-shadow;
253
+ --local-hover-shadow-color: var(--orange-light);
254
+ }
255
+
256
+ &.input {
257
+ background-color: var(--input);
258
+ color: var(--text);
259
+ transition: 0.2s box-shadow;
260
+ --local-hover-shadow-color: var(--input-hover);
261
+ }
262
+ }
263
+
264
+ &.fill-light {
265
+ &.accent {
266
+ background-color: var(--accent-light);
267
+ color: var(--accent);
268
+ transition: 0.2s box-shadow;
269
+ --local-hover-shadow-color: var(--accent-lightest);
270
+ }
271
+
272
+ &.gray {
273
+ background-color: var(--gray-light);
274
+ color: var(--gray-dark);
275
+ transition: 0.2s box-shadow;
276
+ --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
277
+ }
278
+
279
+ &.green {
280
+ background-color: var(--green-light);
281
+ color: var(--green-dark);
282
+ transition: 0.2s box-shadow;
283
+ --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
284
+ }
285
+
286
+ &.red {
287
+ background-color: var(--red-light);
288
+ color: var(--red-dark);
289
+ transition: 0.2s box-shadow;
290
+ --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
291
+ }
292
+
293
+ &.blue {
294
+ background-color: var(--blue-light);
295
+ color: var(--blue-dark);
296
+ transition: 0.2s box-shadow;
297
+ --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
298
+ }
299
+
300
+ &.orange {
301
+ background-color: var(--orange-light);
302
+ color: var(--orange-dark);
303
+ transition: 0.2s box-shadow;
304
+ --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
305
+ }
306
+ }
307
+
308
+ &.outline {
309
+ border: 1px solid;
310
+ &.accent {
311
+ background-color: transparent;
312
+ border-color: var(--accent);
313
+ color: var(--accent);
314
+ transition: 0.2s box-shadow;
315
+ --local-hover-shadow-color: var(--accent-light);
316
+ }
317
+
318
+ &.gray {
319
+ background-color: transparent;
320
+ border-color: var(--gray-dark);
321
+ color: var(--gray-dark);
322
+ transition: 0.2s box-shadow;
323
+ --local-hover-shadow-color: var(--gray-light);
324
+ }
325
+
326
+ &.green {
327
+ background-color: transparent;
328
+ border-color: var(--green-dark);
329
+ color: var(--green-dark);
330
+ transition: 0.2s box-shadow;
331
+ --local-hover-shadow-color: var(--green-light);
332
+ }
333
+
334
+ &.red {
335
+ background-color: transparent;
336
+ border-color: var(--red-dark);
337
+ color: var(--red-dark);
338
+ transition: 0.2s box-shadow;
339
+ --local-hover-shadow-color: var(--red-light);
340
+ }
341
+
342
+ &.blue {
343
+ background-color: transparent;
344
+ border-color: var(--blue-dark);
345
+ color: var(--blue-dark);
346
+ transition: 0.2s box-shadow;
347
+ --local-hover-shadow-color: var(--blue-light);
348
+ }
349
+
350
+ &.orange {
351
+ background-color: transparent;
352
+ border-color: var(--orange-dark);
353
+ color: var(--orange-dark);
354
+ transition: 0.2s box-shadow;
355
+ --local-hover-shadow-color: var(--orange-light);
356
+ }
357
+ }
358
+
359
+ &.outline-fill {
360
+ border: 1px solid;
361
+
362
+ &.accent {
363
+ background-color: var(--accent-light);
364
+ border-color: var(--accent);
365
+ color: var(--accent);
366
+ transition: 0.2s box-shadow;
367
+ --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
368
+ }
369
+
370
+ &.gray {
371
+ background-color: var(--gray-light);
372
+ border-color: var(--gray-dark);
373
+ color: var(--gray-dark);
374
+ transition: 0.2s box-shadow;
375
+ --local-hover-shadow-color: var(--gray-light);
376
+ }
377
+
378
+ &.green {
379
+ background-color: var(--green-light);
380
+ border-color: var(--green-dark);
381
+ color: var(--green-dark);
382
+ transition: 0.2s box-shadow;
383
+ --local-hover-shadow-color: var(--green-light);
384
+ }
385
+
386
+ &.red {
387
+ background-color: var(--red-light);
388
+ border-color: var(--red-dark);
389
+ color: var(--red-dark);
390
+ transition: 0.2s box-shadow;
391
+ --local-hover-shadow-color: var(--red-light);
392
+ }
393
+
394
+ &.blue {
395
+ background-color: var(--blue-light);
396
+ border-color: var(--blue-dark);
397
+ color: var(--blue-dark);
398
+ transition: 0.2s box-shadow;
399
+ --local-hover-shadow-color: var(--blue-light);
400
+ }
401
+
402
+ &.orange {
403
+ background-color: var(--orange-light);
404
+ border-color: var(--orange-dark);
405
+ color: var(--orange-dark);
406
+ transition: 0.2s box-shadow;
407
+ --local-hover-shadow-color: var(--orange-light);
408
+ }
409
+ }
410
+
411
+ &.invisible {
412
+ background-color: transparent;
413
+ transition: 0.2s background-color;
414
+
415
+ &.accent {
416
+ &:hover {
417
+ background-color: var(--accent-light);
418
+ box-shadow: none !important;
419
+ }
420
+ }
421
+
422
+ &.gray {
423
+ &:hover {
424
+ background-color: var(--gray-light);
425
+ box-shadow: none !important;
426
+ color: var(--gray-dark);
427
+ }
428
+ }
429
+
430
+ &.green {
431
+ &:hover {
432
+ background-color: var(--green-light);
433
+ box-shadow: none !important;
434
+ color: var(--green-dark);
435
+ }
436
+ }
437
+
438
+ &.red {
439
+ &:hover {
440
+ background-color: var(--red-light);
441
+ box-shadow: none !important;
442
+ color: var(--red-dark);
443
+ }
444
+ }
445
+
446
+ &.blue {
447
+ &:hover {
448
+ background-color: var(--blue-light);
449
+ box-shadow: none !important;
450
+ color: var(--blue-dark);
451
+ }
452
+ }
453
+
454
+ &.orange {
455
+ &:hover {
456
+ background-color: var(--orange-light);
457
+ box-shadow: none !important;
458
+ color: var(--orange-dark);
459
+ }
460
+ }
461
+
462
+ &.input {
463
+ &:hover {
464
+ background-color: var(--input);
465
+ box-shadow: none !important;
466
+ color: var(--text);
467
+ }
468
+ }
469
+ }
470
+ }
471
+
472
+ :global(:root.dark) .button.light {
473
+ background-color: #2e2e2e;
474
+ }
475
+
476
+ .button.invisible {
477
+ background-color: transparent;
478
+ color: var(--text);
479
+ transition: 0.2s background-color;
480
+ &:hover {
481
+ background-color: var(--accent-light);
482
+ box-shadow: none !important;
483
+ }
484
+
485
+ /*styles for disabled state*/
486
+ &[disabled] {
487
+ background-color: transparent;
488
+ color: var(--text);
489
+ box-shadow: none !important;
490
+ cursor: not-allowed;
491
+ opacity: 0.2;
492
+
493
+ &:hover {
494
+ background-color: transparent;
495
+ box-shadow: none !important;
496
+ color: var(--text);
497
+ }
498
+ }
499
+ }
500
+
501
+ /*Styles for button disabled state*/
502
+ .button[disabled] {
503
+ cursor: not-allowed;
504
+ opacity: 0.2;
505
+ box-shadow: none !important;
506
+
507
+ &:hover {
508
+ box-shadow: none !important;
509
+ }
510
+ }
511
+ </style>