@uxf/ui 11.20.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 (111) 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 +13 -10
  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 +2 -2
  8. package/calendar/calendar-day-cell.js +2 -2
  9. package/checkbox/checkbox.d.ts +1 -1
  10. package/checkbox-input/checkbox-input.d.ts +1 -1
  11. package/checkbox-input/checkbox-input.js +1 -1
  12. package/combobox/README.md +5 -4
  13. package/combobox/combobox.d.ts +40 -14
  14. package/combobox/combobox.js +64 -13
  15. package/combobox/combobox.stories.d.ts +2 -5
  16. package/combobox/index.d.ts +1 -1
  17. package/css/alert-bubble.css +8 -16
  18. package/css/avatar-file-input.css +13 -24
  19. package/css/avatar.css +1 -5
  20. package/css/badge.css +1 -5
  21. package/css/button-list.css +4 -18
  22. package/css/button.css +21 -89
  23. package/css/calendar.css +23 -41
  24. package/css/checkbox-button.css +54 -55
  25. package/css/checkbox-input.css +2 -4
  26. package/css/checkbox.css +47 -59
  27. package/css/chip.css +80 -140
  28. package/css/color-radio-group.css +2 -5
  29. package/css/color-radio.css +1 -5
  30. package/css/combobox.css +7 -0
  31. package/css/date-picker.css +2 -4
  32. package/css/dialog.css +2 -5
  33. package/css/dropdown.css +54 -40
  34. package/css/dropzone.css +4 -9
  35. package/css/file-input.css +5 -21
  36. package/css/input-with-popover.css +1 -5
  37. package/css/input.css +40 -55
  38. package/css/label.css +1 -5
  39. package/css/list-item.css +10 -13
  40. package/css/loader.css +4 -4
  41. package/css/message.css +2 -8
  42. package/css/multi-combobox.css +81 -56
  43. package/css/multi-select.css +98 -13
  44. package/css/pagination.css +5 -20
  45. package/css/radio-group.css +51 -92
  46. package/css/radio.css +49 -58
  47. package/css/select.css +11 -0
  48. package/css/tabs.css +12 -36
  49. package/css/text-link.css +3 -6
  50. package/css/textarea.css +16 -22
  51. package/css/toggle.css +20 -40
  52. package/dropdown/dropdown.js +1 -1
  53. package/dropzone/dropzone-input.js +2 -2
  54. package/file-input/file-input.js +2 -2
  55. package/flash-messages/flash-messages.js +2 -2
  56. package/icon/icon.d.ts +1 -0
  57. package/icon/icon.js +3 -3
  58. package/icon/index.d.ts +1 -0
  59. package/image-gallery/components/close-button.js +1 -1
  60. package/image-gallery/components/next-button.js +1 -1
  61. package/image-gallery/components/prev-button.js +1 -1
  62. package/input/README.md +1 -1
  63. package/input/index.d.ts +2 -0
  64. package/input/index.js +2 -0
  65. package/input/input-arrow-icon.d.ts +8 -0
  66. package/input/input-arrow-icon.js +16 -0
  67. package/input/input.d.ts +2 -1
  68. package/input/input.js +7 -7
  69. package/input/input.stories.d.ts +1 -0
  70. package/message/message.d.ts +1 -1
  71. package/multi-combobox/README.md +5 -2
  72. package/multi-combobox/multi-combobox.d.ts +2 -2
  73. package/multi-combobox/multi-combobox.js +118 -32
  74. package/multi-combobox/multi-combobox.stories.js +4 -6
  75. package/multi-combobox/types.d.ts +3 -1
  76. package/multi-select/README.md +5 -3
  77. package/multi-select/multi-select.d.ts +2 -2
  78. package/multi-select/multi-select.js +79 -23
  79. package/multi-select/multi-select.stories.js +1 -2
  80. package/multi-select/types.d.ts +3 -1
  81. package/package.json +4 -4
  82. package/radio/radio.d.ts +1 -1
  83. package/radio-group/radio-group.d.ts +2 -2
  84. package/radio-group/radio-group.js +1 -1
  85. package/raster-image/empty-image.d.ts +9 -0
  86. package/raster-image/empty-image.js +13 -0
  87. package/raster-image/img-sources.d.ts +1 -1
  88. package/raster-image/img-sources.js +6 -6
  89. package/raster-image/raster-image.d.ts +16 -12
  90. package/raster-image/raster-image.js +19 -21
  91. package/raster-image/raster-image.stories.d.ts +2 -1
  92. package/raster-image/responsive-img-sources.d.ts +15 -0
  93. package/raster-image/responsive-img-sources.js +20 -0
  94. package/select/README.md +5 -3
  95. package/select/select.d.ts +38 -13
  96. package/select/select.js +91 -13
  97. package/select/select.stories.js +3 -1
  98. package/text-input/text-input.js +2 -2
  99. package/textarea/textarea.js +2 -2
  100. package/toggle/toggle.d.ts +1 -1
  101. package/tooltip/tooltip.js +2 -2
  102. package/utils/files/get-file-icon.d.ts +1 -1
  103. package/_select-base/_select-base.d.ts +0 -58
  104. package/_select-base/_select-base.js +0 -107
  105. package/_select-base/index.d.ts +0 -2
  106. package/_select-base/index.js +0 -5
  107. package/css/select-base.css +0 -50
  108. package/multi-combobox/_multi-combobox-base.d.ts +0 -8
  109. package/multi-combobox/_multi-combobox-base.js +0 -141
  110. package/multi-select/_multi-select-base.d.ts +0 -8
  111. package/multi-select/_multi-select-base.js +0 -78
package/css/checkbox.css CHANGED
@@ -1,7 +1,11 @@
1
1
  .uxf-checkbox {
2
- @apply relative flex shrink-0 items-center justify-center rounded border outline-none transition
3
- focus-visible:before:absolute focus-visible:before:inset-[-5px]
4
- focus-visible:before:rounded-lg focus-visible:before:border-2;
2
+ @apply focus-visible:before:border-primary relative flex shrink-0 items-center justify-center rounded border border-gray-400
3
+ bg-white outline-none transition focus-visible:before:absolute
4
+ focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg focus-visible:before:border-2;
5
+
6
+ :root .dark & {
7
+ @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;
8
+ }
5
9
 
6
10
  &__inner {
7
11
  @apply hidden;
@@ -24,8 +28,18 @@
24
28
  }
25
29
 
26
30
  &.is-selected {
31
+ @apply bg-primary is-hoverable:bg-primary-700 border-transparent;
32
+
33
+ :root .dark & {
34
+ @apply bg-primary is-hoverable:bg-primary-300 border-transparent;
35
+ }
36
+
27
37
  .uxf-checkbox__inner {
28
- @apply block;
38
+ @apply block text-white;
39
+
40
+ :root .dark & {
41
+ @apply text-white;
42
+ }
29
43
  }
30
44
  }
31
45
 
@@ -34,85 +48,59 @@
34
48
  @apply pointer-events-none;
35
49
  }
36
50
 
37
- :root .light & {
38
- @apply focus-visible:before:border-primary border-gray-400 bg-white;
51
+ &.is-disabled {
52
+ @apply border-gray-200;
39
53
 
40
- &.is-selected {
41
- @apply bg-primary is-hoverable:bg-primary-700 border-transparent;
42
-
43
- .uxf-checkbox__inner {
44
- @apply text-white;
45
- }
54
+ :root .dark & {
55
+ @apply border-gray-600;
46
56
  }
47
57
 
48
- &.is-disabled {
49
- @apply border-gray-200;
50
-
51
- &.is-selected {
52
- @apply bg-gray-200;
53
- }
54
-
55
- .uxf-checkbox__inner {
56
- @apply text-gray-400;
57
- }
58
- }
58
+ &.is-selected {
59
+ @apply bg-gray-200;
59
60
 
60
- &.is-readonly {
61
- &.is-selected {
62
- @apply bg-primary/60;
61
+ :root .dark & {
62
+ @apply bg-gray-600;
63
63
  }
64
64
  }
65
65
 
66
- &.is-invalid {
67
- @apply border-error;
68
-
69
- &.is-selected {
70
- @apply bg-error;
71
- }
66
+ .uxf-checkbox__inner {
67
+ @apply text-gray-400;
72
68
 
73
- .uxf-checkbox__inner {
74
- @apply text-white;
69
+ :root .dark & {
70
+ @apply text-gray-800;
75
71
  }
76
72
  }
77
73
  }
78
74
 
79
- :root .dark & {
80
- @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;
81
-
75
+ &.is-readonly {
82
76
  &.is-selected {
83
- @apply bg-primary is-hoverable:bg-primary-300 border-transparent;
77
+ @apply bg-primary/60;
84
78
 
85
- .uxf-checkbox__inner {
86
- @apply text-white;
79
+ :root .dark & {
80
+ @apply bg-primary/60;
87
81
  }
88
82
  }
83
+ }
89
84
 
90
- &.is-disabled {
91
- @apply border-gray-600;
92
-
93
- &.is-selected {
94
- @apply bg-gray-600;
95
- }
96
-
97
- .uxf-checkbox__inner {
98
- @apply text-gray-800;
99
- }
100
- }
85
+ &.is-invalid {
86
+ @apply border-error;
101
87
 
102
- &.is-readonly {
103
- &.is-selected {
104
- @apply bg-primary/60;
105
- }
88
+ :root .dark & {
89
+ @apply border-error;
106
90
  }
107
91
 
108
- &.is-invalid {
109
- @apply border-error;
92
+ &.is-selected {
93
+ @apply bg-error;
110
94
 
111
- &.is-selected {
95
+ :root .dark & {
112
96
  @apply bg-error;
113
97
  }
98
+ }
99
+
100
+ .uxf-checkbox__inner {
101
+ @apply text-white;
114
102
 
115
- .uxf-checkbox__inner {
103
+ :root .dark & {
116
104
  @apply text-white;
117
105
  }
118
106
  }
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");