@uxf/ui 11.19.0 → 11.21.0

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 (131) hide show
  1. package/_file-input-base/file-input-base.js +1 -1
  2. package/_input-with-popover/input-with-popover.d.ts +1 -4
  3. package/_input-with-popover/input-with-popover.js +15 -12
  4. package/alert-bubble/alert-bubble.d.ts +2 -2
  5. package/alert-bubble/alert-bubble.js +1 -1
  6. package/avatar-file-input/avatar-file-input.d.ts +1 -1
  7. package/avatar-file-input/avatar-file-input.js +4 -4
  8. package/button/button.d.ts +1 -1
  9. package/button/button.js +2 -2
  10. package/button-list/button-list.js +2 -2
  11. package/calendar/calendar-day-cell.js +4 -4
  12. package/checkbox/checkbox.d.ts +1 -1
  13. package/checkbox/checkbox.js +2 -2
  14. package/checkbox-input/checkbox-input.d.ts +1 -1
  15. package/checkbox-input/checkbox-input.js +1 -1
  16. package/chip/chip.d.ts +1 -1
  17. package/chip/chip.js +2 -2
  18. package/color-radio/color-radio.js +2 -2
  19. package/combobox/README.md +5 -4
  20. package/combobox/combobox.d.ts +40 -14
  21. package/combobox/combobox.js +64 -13
  22. package/combobox/combobox.stories.d.ts +2 -5
  23. package/combobox/index.d.ts +1 -1
  24. package/css/alert-bubble.css +8 -16
  25. package/css/avatar-file-input.css +13 -24
  26. package/css/avatar.css +1 -5
  27. package/css/badge.css +1 -5
  28. package/css/button-list.css +4 -18
  29. package/css/button.css +21 -89
  30. package/css/calendar.css +23 -41
  31. package/css/checkbox-button.css +54 -55
  32. package/css/checkbox-input.css +2 -4
  33. package/css/checkbox.css +47 -59
  34. package/css/chip.css +80 -140
  35. package/css/color-radio-group.css +2 -5
  36. package/css/color-radio.css +1 -5
  37. package/css/combobox.css +7 -0
  38. package/css/date-picker.css +2 -4
  39. package/css/dialog.css +2 -5
  40. package/css/dropdown.css +54 -40
  41. package/css/dropzone.css +4 -9
  42. package/css/file-input.css +5 -21
  43. package/css/flash-messages.css +20 -8
  44. package/css/input-with-popover.css +1 -5
  45. package/css/input.css +40 -55
  46. package/css/label.css +1 -5
  47. package/css/list-item.css +10 -13
  48. package/css/loader.css +4 -4
  49. package/css/message.css +2 -8
  50. package/css/multi-combobox.css +81 -56
  51. package/css/multi-select.css +98 -13
  52. package/css/pagination.css +5 -20
  53. package/css/radio-group.css +51 -92
  54. package/css/radio.css +49 -58
  55. package/css/select.css +11 -0
  56. package/css/tabs.css +12 -36
  57. package/css/text-link.css +3 -6
  58. package/css/textarea.css +16 -22
  59. package/css/toggle.css +20 -40
  60. package/dropdown/dropdown.d.ts +1 -1
  61. package/dropdown/dropdown.js +3 -3
  62. package/dropzone/dropzone-input.js +2 -2
  63. package/file-input/file-input.js +4 -4
  64. package/flash-messages/flash-message.d.ts +3 -2
  65. package/flash-messages/flash-message.js +11 -12
  66. package/flash-messages/flash-messages.js +22 -3
  67. package/flash-messages/flash-messages.stories.js +15 -1
  68. package/icon/icon.d.ts +1 -0
  69. package/icon/icon.js +3 -3
  70. package/icon/index.d.ts +1 -0
  71. package/image-gallery/components/close-button.js +1 -1
  72. package/image-gallery/components/next-button.js +1 -1
  73. package/image-gallery/components/prev-button.js +1 -1
  74. package/image-gallery/use-image.js +2 -2
  75. package/input/README.md +1 -1
  76. package/input/index.d.ts +2 -0
  77. package/input/index.js +2 -0
  78. package/input/input-arrow-icon.d.ts +8 -0
  79. package/input/input-arrow-icon.js +16 -0
  80. package/input/input.d.ts +3 -2
  81. package/input/input.js +8 -8
  82. package/input/input.stories.d.ts +1 -0
  83. package/list-item/list-item.d.ts +1 -1
  84. package/list-item/list-item.js +2 -2
  85. package/message/message.d.ts +1 -1
  86. package/multi-combobox/README.md +5 -2
  87. package/multi-combobox/multi-combobox.d.ts +2 -2
  88. package/multi-combobox/multi-combobox.js +118 -32
  89. package/multi-combobox/multi-combobox.stories.js +4 -6
  90. package/multi-combobox/types.d.ts +3 -1
  91. package/multi-select/README.md +5 -3
  92. package/multi-select/multi-select.d.ts +2 -2
  93. package/multi-select/multi-select.js +79 -23
  94. package/multi-select/multi-select.stories.js +1 -2
  95. package/multi-select/types.d.ts +3 -1
  96. package/package.json +4 -3
  97. package/pagination/pagination.js +2 -2
  98. package/radio/radio.d.ts +1 -1
  99. package/radio/radio.js +2 -2
  100. package/radio-group/radio-group.d.ts +2 -2
  101. package/radio-group/radio-group.js +1 -1
  102. package/raster-image/empty-image.d.ts +9 -0
  103. package/raster-image/empty-image.js +13 -0
  104. package/raster-image/img-sources.d.ts +17 -0
  105. package/raster-image/img-sources.js +45 -0
  106. package/raster-image/raster-image.d.ts +18 -13
  107. package/raster-image/raster-image.js +19 -20
  108. package/raster-image/raster-image.stories.d.ts +2 -1
  109. package/raster-image/responsive-img-sources.d.ts +15 -0
  110. package/raster-image/responsive-img-sources.js +20 -0
  111. package/select/README.md +5 -3
  112. package/select/select.d.ts +38 -13
  113. package/select/select.js +91 -13
  114. package/select/select.stories.js +3 -1
  115. package/tabs/tabs.js +2 -2
  116. package/text-input/text-input.js +4 -4
  117. package/text-link/text-link.d.ts +1 -1
  118. package/text-link/text-link.js +2 -2
  119. package/textarea/textarea.js +6 -6
  120. package/toggle/toggle.d.ts +1 -1
  121. package/tooltip/tooltip.js +2 -2
  122. package/utils/files/get-file-icon.d.ts +1 -1
  123. package/_select-base/_select-base.d.ts +0 -58
  124. package/_select-base/_select-base.js +0 -107
  125. package/_select-base/index.d.ts +0 -2
  126. package/_select-base/index.js +0 -5
  127. package/css/select-base.css +0 -50
  128. package/multi-combobox/_multi-combobox-base.d.ts +0 -8
  129. package/multi-combobox/_multi-combobox-base.js +0 -141
  130. package/multi-select/_multi-select-base.d.ts +0 -8
  131. package/multi-select/_multi-select-base.js +0 -78
package/css/chip.css CHANGED
@@ -76,11 +76,9 @@
76
76
  --button-color-hover: var(--color);
77
77
 
78
78
  &.uxf-chip--color-orange {
79
- :root .light & {
80
- --bg-color: theme("colors.orange.500");
81
- --button-bg-color-hover: theme("colors.orange.700");
82
- --color: theme("colors.white");
83
- }
79
+ --bg-color: theme("colors.orange.500");
80
+ --button-bg-color-hover: theme("colors.orange.700");
81
+ --color: theme("colors.white");
84
82
 
85
83
  :root .dark & {
86
84
  --bg-color: theme("colors.orange.700");
@@ -90,11 +88,9 @@
90
88
  }
91
89
 
92
90
  &.uxf-chip--color-red {
93
- :root .light & {
94
- --bg-color: theme("colors.red.500");
95
- --button-bg-color-hover: theme("colors.red.700");
96
- --color: theme("colors.white");
97
- }
91
+ --bg-color: theme("colors.red.500");
92
+ --button-bg-color-hover: theme("colors.red.700");
93
+ --color: theme("colors.white");
98
94
 
99
95
  :root .dark & {
100
96
  --bg-color: theme("colors.red.700");
@@ -104,11 +100,9 @@
104
100
  }
105
101
 
106
102
  &.uxf-chip--color-yellow {
107
- :root .light & {
108
- --bg-color: theme("colors.yellow.500");
109
- --button-bg-color-hover: theme("colors.yellow.700");
110
- --color: theme("colors.white");
111
- }
103
+ --bg-color: theme("colors.yellow.500");
104
+ --button-bg-color-hover: theme("colors.yellow.700");
105
+ --color: theme("colors.white");
112
106
 
113
107
  :root .dark & {
114
108
  --bg-color: theme("colors.yellow.700");
@@ -118,11 +112,9 @@
118
112
  }
119
113
 
120
114
  &.uxf-chip--color-pink {
121
- :root .light & {
122
- --bg-color: theme("colors.pink.500");
123
- --button-bg-color-hover: theme("colors.pink.700");
124
- --color: theme("colors.white");
125
- }
115
+ --bg-color: theme("colors.pink.500");
116
+ --button-bg-color-hover: theme("colors.pink.700");
117
+ --color: theme("colors.white");
126
118
 
127
119
  :root .dark & {
128
120
  --bg-color: theme("colors.pink.700");
@@ -132,11 +124,9 @@
132
124
  }
133
125
 
134
126
  &.uxf-chip--color-purple {
135
- :root .light & {
136
- --bg-color: theme("colors.purple.500");
137
- --button-bg-color-hover: theme("colors.purple.700");
138
- --color: theme("colors.white");
139
- }
127
+ --bg-color: theme("colors.purple.500");
128
+ --button-bg-color-hover: theme("colors.purple.700");
129
+ --color: theme("colors.white");
140
130
 
141
131
  :root .dark & {
142
132
  --bg-color: theme("colors.purple.700");
@@ -146,11 +136,9 @@
146
136
  }
147
137
 
148
138
  &.uxf-chip--color-indigo {
149
- :root .light & {
150
- --bg-color: theme("colors.indigo.500");
151
- --button-bg-color-hover: theme("colors.indigo.700");
152
- --color: theme("colors.white");
153
- }
139
+ --bg-color: theme("colors.indigo.500");
140
+ --button-bg-color-hover: theme("colors.indigo.700");
141
+ --color: theme("colors.white");
154
142
 
155
143
  :root .dark & {
156
144
  --bg-color: theme("colors.indigo.700");
@@ -160,11 +148,9 @@
160
148
  }
161
149
 
162
150
  &.uxf-chip--color-green {
163
- :root .light & {
164
- --bg-color: theme("colors.green.500");
165
- --button-bg-color-hover: theme("colors.green.700");
166
- --color: theme("colors.white");
167
- }
151
+ --bg-color: theme("colors.green.500");
152
+ --button-bg-color-hover: theme("colors.green.700");
153
+ --color: theme("colors.white");
168
154
 
169
155
  :root .dark & {
170
156
  --bg-color: theme("colors.green.700");
@@ -174,11 +160,9 @@
174
160
  }
175
161
 
176
162
  &.uxf-chip--color-blue {
177
- :root .light & {
178
- --bg-color: theme("colors.blue.500");
179
- --button-bg-color-hover: theme("colors.blue.700");
180
- --color: theme("colors.white");
181
- }
163
+ --bg-color: theme("colors.blue.500");
164
+ --button-bg-color-hover: theme("colors.blue.700");
165
+ --color: theme("colors.white");
182
166
 
183
167
  :root .dark & {
184
168
  --bg-color: theme("colors.blue.700");
@@ -188,11 +172,9 @@
188
172
  }
189
173
 
190
174
  &.uxf-chip--color-default {
191
- :root .light & {
192
- --bg-color: theme("colors.gray.500");
193
- --button-bg-color-hover: theme("colors.gray.700");
194
- --color: theme("colors.white");
195
- }
175
+ --bg-color: theme("colors.gray.500");
176
+ --button-bg-color-hover: theme("colors.gray.700");
177
+ --color: theme("colors.white");
196
178
 
197
179
  :root .dark & {
198
180
  --bg-color: theme("colors.gray.700");
@@ -202,11 +184,9 @@
202
184
  }
203
185
 
204
186
  &.uxf-chip--color-primary {
205
- :root .light & {
206
- --bg-color: theme("colors.primary.500");
207
- --button-bg-color-hover: theme("colors.primary.700");
208
- --color: theme("colors.white");
209
- }
187
+ --bg-color: theme("colors.primary.500");
188
+ --button-bg-color-hover: theme("colors.primary.700");
189
+ --color: theme("colors.white");
210
190
 
211
191
  :root .dark & {
212
192
  --bg-color: theme("colors.primary.700");
@@ -220,11 +200,9 @@
220
200
  --button-color-hover: var(--color);
221
201
 
222
202
  &.uxf-chip--color-orange {
223
- :root .light & {
224
- --bg-color: theme("colors.orange.100");
225
- --button-bg-color-hover: theme("colors.orange.300");
226
- --color: theme("colors.orange.700");
227
- }
203
+ --bg-color: theme("colors.orange.100");
204
+ --button-bg-color-hover: theme("colors.orange.300");
205
+ --color: theme("colors.orange.700");
228
206
 
229
207
  :root .dark & {
230
208
  --bg-color: theme("colors.orange.400");
@@ -234,11 +212,9 @@
234
212
  }
235
213
 
236
214
  &.uxf-chip--color-red {
237
- :root .light & {
238
- --bg-color: theme("colors.red.100");
239
- --button-bg-color-hover: theme("colors.red.300");
240
- --color: theme("colors.red.700");
241
- }
215
+ --bg-color: theme("colors.red.100");
216
+ --button-bg-color-hover: theme("colors.red.300");
217
+ --color: theme("colors.red.700");
242
218
 
243
219
  :root .dark & {
244
220
  --bg-color: theme("colors.red.400");
@@ -248,11 +224,9 @@
248
224
  }
249
225
 
250
226
  &.uxf-chip--color-yellow {
251
- :root .light & {
252
- --bg-color: theme("colors.yellow.100");
253
- --button-bg-color-hover: theme("colors.yellow.300");
254
- --color: theme("colors.yellow.700");
255
- }
227
+ --bg-color: theme("colors.yellow.100");
228
+ --button-bg-color-hover: theme("colors.yellow.300");
229
+ --color: theme("colors.yellow.700");
256
230
 
257
231
  :root .dark & {
258
232
  --bg-color: theme("colors.yellow.400");
@@ -262,11 +236,9 @@
262
236
  }
263
237
 
264
238
  &.uxf-chip--color-pink {
265
- :root .light & {
266
- --bg-color: theme("colors.pink.100");
267
- --button-bg-color-hover: theme("colors.pink.300");
268
- --color: theme("colors.pink.700");
269
- }
239
+ --bg-color: theme("colors.pink.100");
240
+ --button-bg-color-hover: theme("colors.pink.300");
241
+ --color: theme("colors.pink.700");
270
242
 
271
243
  :root .dark & {
272
244
  --bg-color: theme("colors.pink.400");
@@ -276,11 +248,9 @@
276
248
  }
277
249
 
278
250
  &.uxf-chip--color-purple {
279
- :root .light & {
280
- --bg-color: theme("colors.purple.100");
281
- --button-bg-color-hover: theme("colors.purple.300");
282
- --color: theme("colors.purple.700");
283
- }
251
+ --bg-color: theme("colors.purple.100");
252
+ --button-bg-color-hover: theme("colors.purple.300");
253
+ --color: theme("colors.purple.700");
284
254
 
285
255
  :root .dark & {
286
256
  --bg-color: theme("colors.purple.400");
@@ -290,11 +260,9 @@
290
260
  }
291
261
 
292
262
  &.uxf-chip--color-indigo {
293
- :root .light & {
294
- --bg-color: theme("colors.indigo.100");
295
- --button-bg-color-hover: theme("colors.indigo.300");
296
- --color: theme("colors.indigo.700");
297
- }
263
+ --bg-color: theme("colors.indigo.100");
264
+ --button-bg-color-hover: theme("colors.indigo.300");
265
+ --color: theme("colors.indigo.700");
298
266
 
299
267
  :root .dark & {
300
268
  --bg-color: theme("colors.indigo.400");
@@ -304,11 +272,9 @@
304
272
  }
305
273
 
306
274
  &.uxf-chip--color-green {
307
- :root .light & {
308
- --bg-color: theme("colors.green.100");
309
- --button-bg-color-hover: theme("colors.green.300");
310
- --color: theme("colors.green.700");
311
- }
275
+ --bg-color: theme("colors.green.100");
276
+ --button-bg-color-hover: theme("colors.green.300");
277
+ --color: theme("colors.green.700");
312
278
 
313
279
  :root .dark & {
314
280
  --bg-color: theme("colors.green.400");
@@ -318,11 +284,9 @@
318
284
  }
319
285
 
320
286
  &.uxf-chip--color-blue {
321
- :root .light & {
322
- --bg-color: theme("colors.blue.100");
323
- --button-bg-color-hover: theme("colors.blue.300");
324
- --color: theme("colors.blue.700");
325
- }
287
+ --bg-color: theme("colors.blue.100");
288
+ --button-bg-color-hover: theme("colors.blue.300");
289
+ --color: theme("colors.blue.700");
326
290
 
327
291
  :root .dark & {
328
292
  --bg-color: theme("colors.blue.400");
@@ -332,11 +296,9 @@
332
296
  }
333
297
 
334
298
  &.uxf-chip--color-default {
335
- :root .light & {
336
- --bg-color: theme("colors.gray.100");
337
- --button-bg-color-hover: theme("colors.gray.300");
338
- --color: theme("colors.gray.700");
339
- }
299
+ --bg-color: theme("colors.gray.100");
300
+ --button-bg-color-hover: theme("colors.gray.300");
301
+ --color: theme("colors.gray.700");
340
302
 
341
303
  :root .dark & {
342
304
  --bg-color: theme("colors.gray.400");
@@ -346,11 +308,9 @@
346
308
  }
347
309
 
348
310
  &.uxf-chip--color-primary {
349
- :root .light & {
350
- --bg-color: theme("colors.primary.100");
351
- --button-bg-color-hover: theme("colors.primary.300");
352
- --color: theme("colors.primary.700");
353
- }
311
+ --bg-color: theme("colors.primary.100");
312
+ --button-bg-color-hover: theme("colors.primary.300");
313
+ --color: theme("colors.primary.700");
354
314
 
355
315
  :root .dark & {
356
316
  --bg-color: theme("colors.primary.400");
@@ -368,10 +328,8 @@
368
328
  border: 1px solid var(--color);
369
329
 
370
330
  &.uxf-chip--color-orange {
371
- :root .light & {
372
- --button-bg-color-hover: theme("colors.orange.200");
373
- --color: theme("colors.orange.500");
374
- }
331
+ --button-bg-color-hover: theme("colors.orange.200");
332
+ --color: theme("colors.orange.500");
375
333
 
376
334
  :root .dark & {
377
335
  --button-bg-color-hover: theme("colors.orange.900");
@@ -380,10 +338,8 @@
380
338
  }
381
339
 
382
340
  &.uxf-chip--color-red {
383
- :root .light & {
384
- --button-bg-color-hover: theme("colors.red.200");
385
- --color: theme("colors.red.500");
386
- }
341
+ --button-bg-color-hover: theme("colors.red.200");
342
+ --color: theme("colors.red.500");
387
343
 
388
344
  :root .dark & {
389
345
  --button-bg-color-hover: theme("colors.red.900");
@@ -392,10 +348,8 @@
392
348
  }
393
349
 
394
350
  &.uxf-chip--color-yellow {
395
- :root .light & {
396
- --button-bg-color-hover: theme("colors.yellow.200");
397
- --color: theme("colors.yellow.500");
398
- }
351
+ --button-bg-color-hover: theme("colors.yellow.200");
352
+ --color: theme("colors.yellow.500");
399
353
 
400
354
  :root .dark & {
401
355
  --button-bg-color-hover: theme("colors.yellow.900");
@@ -404,10 +358,8 @@
404
358
  }
405
359
 
406
360
  &.uxf-chip--color-pink {
407
- :root .light & {
408
- --button-bg-color-hover: theme("colors.pink.200");
409
- --color: theme("colors.pink.500");
410
- }
361
+ --button-bg-color-hover: theme("colors.pink.200");
362
+ --color: theme("colors.pink.500");
411
363
 
412
364
  :root .dark & {
413
365
  --button-bg-color-hover: theme("colors.pink.900");
@@ -416,10 +368,8 @@
416
368
  }
417
369
 
418
370
  &.uxf-chip--color-purple {
419
- :root .light & {
420
- --button-bg-color-hover: theme("colors.purple.200");
421
- --color: theme("colors.purple.500");
422
- }
371
+ --button-bg-color-hover: theme("colors.purple.200");
372
+ --color: theme("colors.purple.500");
423
373
 
424
374
  :root .dark & {
425
375
  --button-bg-color-hover: theme("colors.purple.900");
@@ -428,10 +378,8 @@
428
378
  }
429
379
 
430
380
  &.uxf-chip--color-indigo {
431
- :root .light & {
432
- --button-bg-color-hover: theme("colors.indigo.200");
433
- --color: theme("colors.indigo.500");
434
- }
381
+ --button-bg-color-hover: theme("colors.indigo.200");
382
+ --color: theme("colors.indigo.500");
435
383
 
436
384
  :root .dark & {
437
385
  --button-bg-color-hover: theme("colors.indigo.900");
@@ -440,10 +388,8 @@
440
388
  }
441
389
 
442
390
  &.uxf-chip--color-green {
443
- :root .light & {
444
- --button-bg-color-hover: theme("colors.green.200");
445
- --color: theme("colors.green.500");
446
- }
391
+ --button-bg-color-hover: theme("colors.green.200");
392
+ --color: theme("colors.green.500");
447
393
 
448
394
  :root .dark & {
449
395
  --button-bg-color-hover: theme("colors.green.900");
@@ -452,10 +398,8 @@
452
398
  }
453
399
 
454
400
  &.uxf-chip--color-blue {
455
- :root .light & {
456
- --button-bg-color-hover: theme("colors.blue.200");
457
- --color: theme("colors.blue.500");
458
- }
401
+ --button-bg-color-hover: theme("colors.blue.200");
402
+ --color: theme("colors.blue.500");
459
403
 
460
404
  :root .dark & {
461
405
  --button-bg-color-hover: theme("colors.blue.900");
@@ -464,10 +408,8 @@
464
408
  }
465
409
 
466
410
  &.uxf-chip--color-default {
467
- :root .light & {
468
- --button-bg-color-hover: theme("colors.gray.200");
469
- --color: theme("colors.gray.500");
470
- }
411
+ --button-bg-color-hover: theme("colors.gray.200");
412
+ --color: theme("colors.gray.500");
471
413
 
472
414
  :root .dark & {
473
415
  --button-bg-color-hover: theme("colors.gray.900");
@@ -476,10 +418,8 @@
476
418
  }
477
419
 
478
420
  &.uxf-chip--color-primary {
479
- :root .light & {
480
- --button-bg-color-hover: theme("colors.primary.200");
481
- --color: theme("colors.primary.500");
482
- }
421
+ --button-bg-color-hover: theme("colors.primary.200");
422
+ --color: theme("colors.primary.500");
483
423
 
484
424
  :root .dark & {
485
425
  --button-bg-color-hover: theme("colors.primary.900");
package/css/color-radio-group.css CHANGED
@@ -1,10 +1,7 @@
1
1
  .uxf-color-radio-group {
2
2
  &__option {
3
- @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
4
-
5
- :root .light & {
6
- @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-white;
7
- }
3
+ @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--option-color)]
4
+ focus-visible:ring-offset-2 focus-visible:ring-offset-white;
8
5
 
9
6
  :root .dark & {
10
7
  @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-gray-900;
package/css/color-radio.css CHANGED
@@ -20,11 +20,7 @@
20
20
  }
21
21
 
22
22
  &.is-disabled {
23
- @apply after:rounded-inherit pointer-events-none after:absolute after:inset-0;
24
-
25
- :root .light & {
26
- @apply after:bg-white/50;
27
- }
23
+ @apply after:rounded-inherit pointer-events-none after:absolute after:inset-0 after:bg-white/50;
28
24
 
29
25
  :root .dark & {
30
26
  @apply after:bg-black/50;
package/css/combobox.css ADDED
@@ -0,0 +1,7 @@
1
+ .uxf-combobox {
2
+ .uxf-input__element {
3
+ align-items: center;
4
+ display: flex;
5
+ min-width: 0;
6
+ }
7
+ }
package/css/date-picker.css CHANGED
@@ -13,14 +13,12 @@
13
13
  margin-bottom: theme("spacing.4");
14
14
 
15
15
  &-title {
16
+ @apply text-lightMedium is-hoverable:text-lightHigh;
17
+
16
18
  font-size: 14px;
17
19
  font-weight: theme("fontWeight.medium");
18
20
  text-align: center;
19
21
 
20
- :root .light & {
21
- @apply text-lightMedium is-hoverable:text-lightHigh;
22
- }
23
-
24
22
  :root .dark & {
25
23
  @apply text-darkMedium is-hoverable:text-darkHigh;
26
24
  }
package/css/dialog.css CHANGED
@@ -31,18 +31,15 @@
31
31
  }
32
32
 
33
33
  &__panel {
34
+ background-color: theme("colors.white");
34
35
  border-top-left-radius: var(--panel-border-radius);
35
36
  border-top-right-radius: var(--panel-border-radius);
37
+ color: theme("colors.black");
36
38
  max-width: var(--panel-max-w);
37
39
  overflow: hidden;
38
40
  position: relative;
39
41
  width: 100%;
40
42
 
41
- :root .light & {
42
- background-color: theme("colors.white");
43
- color: theme("colors.black");
44
- }
45
-
46
43
  :root .dark & {
47
44
  background-color: theme("colors.gray.900");
48
45
  color: theme("colors.white");
package/css/dropdown.css CHANGED
@@ -1,78 +1,92 @@
1
1
  .uxf-dropdown {
2
- @apply z-dropdown absolute w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
3
- ring-opacity-5 sm:text-sm;
4
-
2
+ background-color: theme("colors.white");
3
+ border-radius: theme("borderRadius.md");
4
+ box-shadow: theme("boxShadow.lg");
5
+ color: theme("colors.gray.800");
5
6
  outline: none;
6
-
7
- :root .light & {
8
- @apply bg-white text-gray-800;
9
- }
7
+ overflow-y: auto;
8
+ padding-block: theme("spacing.1");
9
+ position: absolute;
10
+ width: 100%;
11
+ z-index: theme("zIndex.dropdown");
10
12
 
11
13
  :root .dark & {
12
- @apply bg-gray-800 text-white;
14
+ background-color: theme("colors.gray.800");
15
+ color: theme("colors.white");
13
16
  }
14
17
 
15
18
  &--bottom {
16
- @apply mt-1;
19
+ margin-top: theme("spacing.1");
17
20
  }
18
21
 
19
22
  &--top {
20
- @apply -mt-1;
23
+ margin-top: calc(-1 * theme("spacing.1"));
21
24
  }
22
25
 
23
26
  &__item {
24
- @apply relative cursor-default select-none px-4 py-2 transition-colors;
27
+ @apply transition-colors;
25
28
 
26
- &.is-selected {
27
- @apply font-bold;
28
- }
29
+ color: theme("colors.gray.800");
30
+ cursor: default;
31
+ display: block;
32
+ padding: theme("spacing.2") theme("spacing.4");
33
+ position: relative;
34
+ user-select: none;
29
35
 
30
- :root .light & {
31
- @apply text-gray-800;
32
-
33
- &.is-selected {
34
- @apply bg-primary-100 font-bold;
35
- }
36
+ :root .dark & {
37
+ color: theme("colors.white");
38
+ }
36
39
 
37
- &.is-active {
38
- @apply bg-primary text-white;
39
- }
40
+ &.is-selected {
41
+ background-color: theme("colors.primary.100");
42
+ font-weight: theme("fontWeight.bold");
40
43
 
41
- &.is-disabled {
42
- @apply text-gray-300;
44
+ :root .dark & {
45
+ background-color: theme("colors.primary.900");
43
46
  }
44
47
  }
45
48
 
46
- :root .dark & {
47
- @apply text-white;
49
+ &.is-active {
50
+ background-color: theme("colors.primary.DEFAULT");
51
+ color: theme("colors.white");
48
52
 
49
- &.is-selected {
50
- @apply bg-primary-900;
53
+ :root .dark & {
54
+ background-color: theme("colors.primary.DEFAULT");
55
+ color: theme("colors.white");
51
56
  }
57
+ }
52
58
 
53
- &.is-active {
54
- @apply bg-primary;
55
- }
59
+ &.is-disabled {
60
+ color: theme("colors.lightLow");
56
61
 
57
- &.is-disabled {
58
- @apply text-gray-600;
62
+ :root .dark & {
63
+ color: theme("colors.darkLow");
59
64
  }
60
65
  }
61
66
  }
62
67
 
63
68
  &__items {
64
- @apply absolute flex flex-col border border-black;
69
+ --deprecated: "WARNING: Use .uxf-dropdown class instead.";
65
70
 
66
- :root .light & {
67
- @apply bg-white;
68
- }
71
+ background-color: theme("colors.white");
72
+ border-radius: theme("borderRadius.md");
73
+ box-shadow: theme("boxShadow.lg");
74
+ display: flex;
75
+ flex-direction: column;
76
+ overflow: hidden;
77
+ position: absolute;
69
78
 
70
79
  :root .dark & {
71
- @apply bg-gray-800;
80
+ background-color: theme("colors.gray.800");
72
81
  }
73
82
  }
74
83
 
75
84
  &__empty-wrapper {
76
- @apply px-4 py-2 text-gray-800;
85
+ color: theme("colors.gray.800");
86
+ padding: theme("spacing.2") theme("spacing.4");
87
+
88
+ :root .dark & {
89
+ color: theme("colors.white");
90
+ }
77
91
  }
78
92
  }
package/css/dropzone.css CHANGED
@@ -54,19 +54,16 @@
54
54
  @apply space-x-6 sm:rounded-md sm:px-6;
55
55
 
56
56
  align-items: center;
57
+ border-color: theme("borderColor.lightBorder");
57
58
  border-width: 1px;
58
59
  box-shadow: theme("boxShadow.sm");
60
+ color: theme("colors.lightMedium");
59
61
  display: flex;
60
62
  justify-content: space-between;
61
63
  overflow: auto;
62
64
  padding: theme("spacing.3") theme("spacing.4");
63
65
  width: 100%;
64
66
 
65
- :root .light & {
66
- border-color: theme("borderColor.lightBorder");
67
- color: theme("colors.lightMedium");
68
- }
69
-
70
67
  :root .dark & {
71
68
  background-color: theme("backgroundColor.gray.800");
72
69
  border-color: theme("borderColor.gray.700");
@@ -74,10 +71,8 @@
74
71
  }
75
72
 
76
73
  &.is-invalid {
77
- :root .light & {
78
- border-color: theme("borderColor.error.DEFAULT");
79
- color: theme("colors.error.DEFAULT");
80
- }
74
+ border-color: theme("borderColor.error.DEFAULT");
75
+ color: theme("colors.error.DEFAULT");
81
76
 
82
77
  :root .dark & {
83
78
  border-color: theme("borderColor.error.DEFAULT");