@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/button.css CHANGED
@@ -132,22 +132,14 @@
132
132
  }
133
133
 
134
134
  &--variant-outlined {
135
- @apply border;
136
-
137
- :root .light & {
138
- @apply bg-white;
139
- }
135
+ @apply border bg-white;
140
136
 
141
137
  :root .dark & {
142
138
  @apply bg-lightHigh;
143
139
  }
144
140
 
145
141
  &.uxf-button--color-default {
146
- @apply focus-visible:ring-primary;
147
-
148
- :root .light & {
149
- @apply border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
150
- }
142
+ @apply focus-visible:ring-primary border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
151
143
 
152
144
  :root .dark & {
153
145
  @apply border-primary text-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
@@ -155,11 +147,7 @@
155
147
  }
156
148
 
157
149
  &.uxf-button--color-success {
158
- @apply focus-visible:ring-success;
159
-
160
- :root .light & {
161
- @apply border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
162
- }
150
+ @apply focus-visible:ring-success border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
163
151
 
164
152
  :root .dark & {
165
153
  @apply border-success text-success is-hoverable:border-success-300 is-hoverable:text-success-300;
@@ -167,11 +155,7 @@
167
155
  }
168
156
 
169
157
  &.uxf-button--color-warning {
170
- @apply focus-visible:ring-warning;
171
-
172
- :root .light & {
173
- @apply border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
174
- }
158
+ @apply focus-visible:ring-warning border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
175
159
 
176
160
  :root .dark & {
177
161
  @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
@@ -179,11 +163,7 @@
179
163
  }
180
164
 
181
165
  &.uxf-button--color-error {
182
- @apply focus-visible:ring-error;
183
-
184
- :root .light & {
185
- @apply border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
186
- }
166
+ @apply focus-visible:ring-error border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
187
167
 
188
168
  :root .dark & {
189
169
  @apply border-error text-error is-hoverable:border-error-300 is-hoverable:text-error-300;
@@ -191,9 +171,7 @@
191
171
  }
192
172
 
193
173
  &.is-disabled {
194
- :root .light & {
195
- @apply text-lightLow border-gray-300 bg-gray-300;
196
- }
174
+ @apply text-lightLow border-gray-300 bg-gray-300;
197
175
 
198
176
  :root .dark & {
199
177
  @apply text-darkLow border-gray-700 bg-gray-700;
@@ -209,20 +187,14 @@
209
187
  }
210
188
 
211
189
  &.uxf-button--color-default {
212
- @apply focus-visible:ring-primary;
213
-
214
- :root .light & {
215
- @apply bg-primary is-hoverable:bg-primary-700;
216
- }
190
+ @apply focus-visible:ring-primary bg-primary is-hoverable:bg-primary-700;
217
191
 
218
192
  :root .dark & {
219
193
  @apply bg-primary is-hoverable:bg-primary-400;
220
194
  }
221
195
 
222
196
  &.is-disabled {
223
- :root .light & {
224
- @apply text-lightLow bg-gray-300;
225
- }
197
+ @apply text-lightLow bg-gray-300;
226
198
 
227
199
  :root .dark & {
228
200
  @apply bg-gray-600 text-gray-400;
@@ -231,20 +203,14 @@
231
203
  }
232
204
 
233
205
  &.uxf-button--color-success {
234
- @apply focus-visible:ring-success;
235
-
236
- :root .light & {
237
- @apply bg-success is-hoverable:bg-success-700;
238
- }
206
+ @apply focus-visible:ring-success bg-success is-hoverable:bg-success-700;
239
207
 
240
208
  :root .dark & {
241
209
  @apply bg-success is-hoverable:bg-success-400;
242
210
  }
243
211
 
244
212
  &.is-disabled {
245
- :root .light & {
246
- @apply text-lightLow bg-gray-300;
247
- }
213
+ @apply text-lightLow bg-gray-300;
248
214
 
249
215
  :root .dark & {
250
216
  @apply bg-gray-600 text-gray-400;
@@ -253,20 +219,14 @@
253
219
  }
254
220
 
255
221
  &.uxf-button--color-error {
256
- @apply focus-visible:ring-error;
257
-
258
- :root .light & {
259
- @apply bg-error is-hoverable:bg-error-700;
260
- }
222
+ @apply focus-visible:ring-error bg-error is-hoverable:bg-error-700;
261
223
 
262
224
  :root .dark & {
263
225
  @apply bg-error is-hoverable:bg-error-400;
264
226
  }
265
227
 
266
228
  &.is-disabled {
267
- :root .light & {
268
- @apply text-lightLow bg-gray-300;
269
- }
229
+ @apply text-lightLow bg-gray-300;
270
230
 
271
231
  :root .dark & {
272
232
  @apply bg-gray-600 text-gray-400;
@@ -275,20 +235,14 @@
275
235
  }
276
236
 
277
237
  &.uxf-button--color-warning {
278
- @apply focus-visible:ring-warning;
279
-
280
- :root .light & {
281
- @apply bg-warning is-hoverable:bg-warning-700;
282
- }
238
+ @apply focus-visible:ring-warning bg-warning is-hoverable:bg-warning-700;
283
239
 
284
240
  :root .dark & {
285
241
  @apply bg-warning is-hoverable:bg-warning-400;
286
242
  }
287
243
 
288
244
  &.is-disabled {
289
- :root .light & {
290
- @apply text-lightLow bg-gray-300;
291
- }
245
+ @apply text-lightLow bg-gray-300;
292
246
 
293
247
  :root .dark & {
294
248
  @apply bg-gray-600 text-gray-400;
@@ -298,20 +252,14 @@
298
252
  }
299
253
 
300
254
  &--variant-white {
301
- @apply focus-visible:ring-primary border;
302
-
303
- :root .light & {
304
- @apply border-lightBorder text-lightMedium is-hoverable:bg-gray-100 bg-white;
305
- }
255
+ @apply focus-visible:ring-primary border-lightBorder text-lightMedium is-hoverable:bg-gray-100 border bg-white;
306
256
 
307
257
  :root .dark & {
308
258
  @apply border-darkBorder bg-lightHigh text-darkMedium is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
309
259
  }
310
260
 
311
261
  &.is-disabled {
312
- :root .light & {
313
- @apply text-lightLow;
314
- }
262
+ @apply text-lightLow;
315
263
 
316
264
  :root .dark & {
317
265
  @apply border-darkBorder text-darkLow;
@@ -323,9 +271,7 @@
323
271
  @apply shadow-none;
324
272
 
325
273
  &.uxf-button--color-default {
326
- :root .light & {
327
- @apply text-lightMedium is-hoverable:text-lightHigh;
328
- }
274
+ @apply text-lightMedium is-hoverable:text-lightHigh;
329
275
 
330
276
  :root .dark & {
331
277
  @apply text-darkMedium is-hoverable:text-darkHigh;
@@ -333,11 +279,7 @@
333
279
  }
334
280
 
335
281
  &.uxf-button--color-success {
336
- @apply text-success;
337
-
338
- :root .light & {
339
- @apply is-hoverable:text-success-700;
340
- }
282
+ @apply text-success is-hoverable:text-success-700;
341
283
 
342
284
  :root .dark & {
343
285
  @apply is-hoverable:text-success-300;
@@ -345,11 +287,7 @@
345
287
  }
346
288
 
347
289
  &.uxf-button--color-error {
348
- @apply text-error;
349
-
350
- :root .light & {
351
- @apply is-hoverable:text-error-700;
352
- }
290
+ @apply text-error is-hoverable:text-error-700;
353
291
 
354
292
  :root .dark & {
355
293
  @apply is-hoverable:text-error-300;
@@ -357,11 +295,7 @@
357
295
  }
358
296
 
359
297
  &.uxf-button--color-warning {
360
- @apply text-warning;
361
-
362
- :root .light & {
363
- @apply is-hoverable:text-warning-700;
364
- }
298
+ @apply text-warning is-hoverable:text-warning-700;
365
299
 
366
300
  :root .dark & {
367
301
  @apply is-hoverable:text-warning-300;
@@ -369,9 +303,7 @@
369
303
  }
370
304
 
371
305
  &.is-disabled {
372
- :root .light & {
373
- @apply text-lightLow;
374
- }
306
+ @apply text-lightLow;
375
307
 
376
308
  :root .dark & {
377
309
  @apply text-darkLow;
package/css/calendar.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .uxf-calendar {
2
2
  &__cell {
3
- --bg-color: unset;
4
- --color: unset;
3
+ --bg-color: theme("backgroundColor.white");
4
+ --color: theme("colors.lightMedium");
5
5
  --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
6
6
 
7
7
  align-items: center;
@@ -17,20 +17,13 @@
17
17
  position: relative;
18
18
  text-align: center;
19
19
 
20
- :root .light & {
21
- --bg-color: theme("backgroundColor.white");
22
- --color: theme("colors.lightMedium");
23
- }
24
-
25
20
  :root .dark & {
26
21
  --bg-color: theme("backgroundColor.gray.900");
27
22
  --color: theme("colors.darkMedium");
28
23
  }
29
24
 
30
25
  &:hover {
31
- :root .light & {
32
- --bg-color: theme("backgroundColor.gray.50");
33
- }
26
+ --bg-color: theme("backgroundColor.gray.50");
34
27
 
35
28
  :root .dark & {
36
29
  --bg-color: theme("backgroundColor.gray.950");
@@ -48,11 +41,9 @@
48
41
  }
49
42
 
50
43
  &.is-disabled {
51
- cursor: auto;
44
+ --bg-color: theme("backgroundColor.gray.100");
52
45
 
53
- :root .light & {
54
- --bg-color: theme("backgroundColor.gray.100");
55
- }
46
+ cursor: auto;
56
47
 
57
48
  :root .dark & {
58
49
  --bg-color: theme("backgroundColor.gray.800");
@@ -68,14 +59,17 @@
68
59
  }
69
60
 
70
61
  &--selected {
71
- :root .light &,
62
+ --bg-color: theme("backgroundColor.primary.500");
63
+ --color: theme("colors.white");
64
+
72
65
  :root .dark & {
73
66
  --bg-color: theme("backgroundColor.primary.500");
74
67
  --color: theme("colors.white");
75
68
  }
76
69
 
77
70
  &:hover {
78
- :root .light &,
71
+ --bg-color: theme("backgroundColor.primary.500");
72
+
79
73
  :root .dark & {
80
74
  --bg-color: theme("backgroundColor.primary.500");
81
75
  }
@@ -104,7 +98,11 @@
104
98
 
105
99
  &--today {
106
100
  .uxf-calendar__cell__inner {
101
+ --bg-color: theme("backgroundColor.lightHigh");
102
+ --color: theme("colors.white");
103
+
107
104
  align-items: center;
105
+ border: 2px solid theme("colors.lightMedium");
108
106
  border-radius: 999px;
109
107
  display: inline-flex;
110
108
  height: 32px;
@@ -112,13 +110,6 @@
112
110
  position: relative;
113
111
  width: 32px;
114
112
 
115
- :root .light & {
116
- --bg-color: theme("backgroundColor.lightHigh");
117
- --color: theme("colors.white");
118
-
119
- border: 2px solid theme("colors.lightMedium");
120
- }
121
-
122
113
  :root .dark & {
123
114
  --bg-color: theme("backgroundColor.transparent");
124
115
  --color: theme("colors.white");
@@ -130,10 +121,11 @@
130
121
  &.uxf-calendar__cell--selected {
131
122
  .uxf-calendar__cell__inner {
132
123
  background-color: theme("backgroundColor.transparent");
124
+ border-color: theme("colors.white");
133
125
  color: theme("colors.white");
134
126
 
135
- :root .light & {
136
- border-color: theme("colors.white");
127
+ :root .dark & {
128
+ border-color: theme("colors.darkMedium");
137
129
  }
138
130
  }
139
131
  }
@@ -155,10 +147,8 @@
155
147
  }
156
148
 
157
149
  &--not-current-month {
158
- :root .light & {
159
- --bg-color: theme("backgroundColor.gray.100");
160
- --color: theme("colors.lightLow");
161
- }
150
+ --bg-color: theme("backgroundColor.gray.100");
151
+ --color: theme("colors.lightLow");
162
152
 
163
153
  :root .dark & {
164
154
  --bg-color: theme("backgroundColor.gray.800");
@@ -200,6 +190,7 @@
200
190
  }
201
191
 
202
192
  &__weekdays {
193
+ color: theme("colors.lightLow");
203
194
  column-gap: 1px;
204
195
  display: grid;
205
196
  font-size: 10px;
@@ -210,10 +201,6 @@
210
201
  text-align: center;
211
202
  text-transform: uppercase;
212
203
 
213
- :root .light & {
214
- color: theme("colors.lightLow");
215
- }
216
-
217
204
  :root .dark & {
218
205
  color: theme("colors.darkLow");
219
206
  }
@@ -232,16 +219,13 @@
232
219
  &__decade,
233
220
  &__hours,
234
221
  &__minutes {
222
+ background-color: theme("backgroundColor.lightBorder");
235
223
  border-radius: 6px;
236
224
  display: grid;
237
225
  gap: 1px;
238
226
  padding: 1px;
239
227
  text-align: center;
240
228
 
241
- :root .light & {
242
- background-color: theme("backgroundColor.lightBorder");
243
- }
244
-
245
229
  :root .dark & {
246
230
  background-color: theme("backgroundColor.darkBorder");
247
231
  }
@@ -269,14 +253,12 @@
269
253
  margin-bottom: theme("spacing.4");
270
254
 
271
255
  &__title {
256
+ @apply text-lightMedium is-hoverable:text-lightHigh;
257
+
272
258
  font-size: 14px;
273
259
  font-weight: theme("fontWeight.medium");
274
260
  text-align: center;
275
261
 
276
- :root .light & {
277
- @apply text-lightMedium is-hoverable:text-lightHigh;
278
- }
279
-
280
262
  :root .dark & {
281
263
  @apply text-darkMedium is-hoverable:text-darkHigh;
282
264
  }
package/css/checkbox-button.css CHANGED
@@ -1,97 +1,96 @@
1
1
  .uxf-checkbox-button {
2
- @apply relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg px-4 py-3 outline-none
3
- transition before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent
4
- before:transition focus-visible:ring-2 focus-visible:ring-offset-2;
2
+ @apply focus-visible:ring-primary relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg bg-gray-200 px-4
3
+ py-3 outline-none transition before:absolute before:inset-0 before:rounded-lg
4
+ before:border before:border-transparent before:transition
5
+ focus-visible:ring-2 focus-visible:ring-offset-2;
5
6
 
6
7
  &__icon {
7
8
  @apply relative h-5 w-5 rounded bg-white p-1 text-transparent before:absolute before:inset-0 before:rounded
8
9
  before:border before:transition;
9
10
  }
10
11
 
11
- :root .light & {
12
- @apply focus-visible:ring-primary bg-gray-200;
12
+ @apply focus-visible:ring-primary bg-gray-200;
13
13
 
14
- .uxf-checkbox-button__icon {
15
- @apply before:border-gray-600;
16
- }
14
+ :root .dark & {
15
+ @apply focus-visible:ring-primary bg-gray-800 focus-visible:ring-offset-gray-900;
16
+ }
17
17
 
18
- .uxf-checkbox-button__label {
19
- @apply text-gray-600;
20
- }
18
+ .uxf-checkbox-button__icon {
19
+ @apply before:border-gray-600;
21
20
 
22
- &.is-selected {
23
- @apply bg-primary;
21
+ :root .dark & {
22
+ @apply before:border-transparent;
23
+ }
24
+ }
24
25
 
25
- .uxf-checkbox-button__icon {
26
- @apply text-primary before:border-transparent;
27
- }
26
+ .uxf-checkbox-button__label {
27
+ @apply text-gray-600;
28
28
 
29
- .uxf-checkbox-button__label {
30
- @apply text-white;
31
- }
29
+ :root .dark & {
30
+ @apply text-gray-400;
32
31
  }
32
+ }
33
33
 
34
- &.is-disabled {
35
- @apply pointer-events-none bg-gray-100;
36
-
37
- .uxf-checkbox-button__icon {
38
- @apply before:border-gray-300;
39
- }
34
+ &.is-selected {
35
+ @apply bg-primary;
40
36
 
41
- &.is-selected {
42
- @apply bg-gray-300;
37
+ :root .dark & {
38
+ @apply bg-primary text-white;
39
+ }
43
40
 
44
- .uxf-checkbox-button__icon {
45
- @apply text-gray-400 before:border-transparent;
46
- }
41
+ .uxf-checkbox-button__icon {
42
+ @apply text-primary before:border-transparent;
47
43
 
48
- .uxf-checkbox-button__label {
49
- @apply text-white;
50
- }
44
+ :root .dark & {
45
+ @apply text-primary before:border-transparent;
51
46
  }
52
47
  }
53
48
 
54
- &.is-invalid {
55
- @apply before:border-error;
49
+ .uxf-checkbox-button__label {
50
+ @apply text-white;
51
+
52
+ :root .dark & {
53
+ @apply text-white;
54
+ }
56
55
  }
57
56
  }
58
57
 
59
- :root .dark & {
60
- @apply focus-visible:ring-primary bg-gray-800 focus-visible:ring-offset-gray-900;
58
+ &.is-disabled {
59
+ @apply pointer-events-none bg-gray-100;
61
60
 
62
- .uxf-checkbox-button__icon {
63
- @apply before:border-transparent;
61
+ :root .dark & {
62
+ @apply pointer-events-none bg-gray-800;
64
63
  }
65
64
 
66
- .uxf-checkbox-button__label {
67
- @apply text-gray-400;
65
+ .uxf-checkbox-button__icon {
66
+ @apply before:border-gray-300;
68
67
  }
69
68
 
70
69
  &.is-selected {
71
- @apply bg-primary text-white;
70
+ @apply bg-gray-300;
71
+
72
+ :root .dark & {
73
+ @apply bg-gray-600;
74
+ }
72
75
 
73
76
  .uxf-checkbox-button__icon {
74
- @apply text-primary before:border-transparent;
77
+ @apply text-gray-400 before:border-transparent;
78
+
79
+ :root .dark & {
80
+ @apply text-gray-800;
81
+ }
75
82
  }
76
83
 
77
84
  .uxf-checkbox-button__label {
78
85
  @apply text-white;
79
86
  }
80
87
  }
88
+ }
81
89
 
82
- &.is-disabled {
83
- @apply pointer-events-none bg-gray-800;
84
-
85
- &.is-selected {
86
- @apply bg-gray-600;
87
-
88
- .uxf-checkbox-button__icon {
89
- @apply text-gray-800;
90
- }
91
- }
92
- }
90
+ &.is-invalid {
91
+ @apply before:border-error;
93
92
 
94
- &.is-invalid {
93
+ :root .dark & {
95
94
  @apply before:border-error;
96
95
  }
97
96
  }
package/css/checkbox-input.css CHANGED
@@ -9,11 +9,9 @@
9
9
  }
10
10
 
11
11
  &__label {
12
- width: 100%;
12
+ @apply text-gray-600;
13
13
 
14
- :root .light & {
15
- @apply text-gray-600;
16
- }
14
+ width: 100%;
17
15
 
18
16
  :root .dark & {
19
17
  @apply text-gray-400;