@sigx/zero-daisyui 0.2.0-beta.1 → 0.2.0-beta.3

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 (58) hide show
  1. package/dist/css/components/progress.css +8 -0
  2. package/dist/css/components/select.css +12 -0
  3. package/dist/css/components/slider.css +10 -0
  4. package/dist/css/index.css +30 -0
  5. package/dist/lynx/components/accordion.css +160 -0
  6. package/dist/lynx/components/alert.css +160 -0
  7. package/dist/lynx/components/avatar.css +5 -0
  8. package/dist/lynx/components/breadcrumbs.css +200 -0
  9. package/dist/lynx/components/button.css +180 -0
  10. package/dist/lynx/components/card.css +52 -0
  11. package/dist/lynx/components/carousel.css +162 -2
  12. package/dist/lynx/components/chat.css +40 -0
  13. package/dist/lynx/components/checkbox.css +7 -0
  14. package/dist/lynx/components/collapsible.css +160 -0
  15. package/dist/lynx/components/combobox.css +21 -0
  16. package/dist/lynx/components/countdown.css +160 -0
  17. package/dist/lynx/components/dialog.css +34 -0
  18. package/dist/lynx/components/diff.css +181 -0
  19. package/dist/lynx/components/divider.css +8 -0
  20. package/dist/lynx/components/drawer.css +12 -1
  21. package/dist/lynx/components/field.css +180 -0
  22. package/dist/lynx/components/file-upload.css +202 -0
  23. package/dist/lynx/components/input.css +37 -0
  24. package/dist/lynx/components/kbd.css +1 -0
  25. package/dist/lynx/components/menu.css +10 -0
  26. package/dist/lynx/components/native-select.css +30 -0
  27. package/dist/lynx/components/number-input.css +37 -0
  28. package/dist/lynx/components/pagination.css +33 -0
  29. package/dist/lynx/components/popover.css +12 -0
  30. package/dist/lynx/components/progress.css +220 -0
  31. package/dist/lynx/components/radial-progress.css +62 -0
  32. package/dist/lynx/components/radio-group.css +10 -0
  33. package/dist/lynx/components/rating-group.css +240 -0
  34. package/dist/lynx/components/select.css +32 -0
  35. package/dist/lynx/components/skeleton.css +160 -0
  36. package/dist/lynx/components/slider.css +22 -0
  37. package/dist/lynx/components/spinner.css +18 -0
  38. package/dist/lynx/components/stats.css +40 -0
  39. package/dist/lynx/components/status.css +18 -0
  40. package/dist/lynx/components/steps.css +236 -0
  41. package/dist/lynx/components/swap.css +160 -0
  42. package/dist/lynx/components/switch.css +41 -0
  43. package/dist/lynx/components/table.css +201 -0
  44. package/dist/lynx/components/tabs.css +21 -0
  45. package/dist/lynx/components/textarea.css +25 -0
  46. package/dist/lynx/components/timeline.css +18 -0
  47. package/dist/lynx/components/toast.css +0 -1
  48. package/dist/lynx/components/tooltip.css +10 -0
  49. package/dist/lynx/index.css +3707 -79
  50. package/dist/lynx/manifest.json +33 -9
  51. package/dist/lynx/tokens.css +14 -0
  52. package/dist/manifest.json +32 -8
  53. package/dist/recipes.d.ts.map +1 -1
  54. package/dist/recipes.js +30 -0
  55. package/dist/recipes.js.map +1 -1
  56. package/dist/report.json +245 -2071
  57. package/package.json +6 -6
  58. package/src/recipes.ts +30 -0
@@ -1,4 +1,5 @@
1
1
  .zx-radio-group__root {
2
+ --radio-size: calc(var(--size-selector) * 6);
2
3
  --radio-pad: 0.25rem;
3
4
  --radio-accent: var(--color-primary);
4
5
  }
@@ -62,6 +63,7 @@
62
63
  height: 100%;
63
64
  border-radius: 9999px;
64
65
  background-color: transparent;
66
+ background-size: auto, calc(var(--noise) * 100%);
65
67
  background-image: none, var(--fx-noise);
66
68
  transition: background-color var(--duration-instant) var(--ease-standard);
67
69
  }
@@ -109,6 +111,7 @@
109
111
  }
110
112
 
111
113
  .zx-radio-group__root.zx-a-size-xs {
114
+ --radio-size: calc(var(--size-selector) * 4);
112
115
  --radio-pad: 0.125rem;
113
116
  }
114
117
 
@@ -117,6 +120,7 @@
117
120
  }
118
121
 
119
122
  .zx-radio-group__root.zx-a-size-sm {
123
+ --radio-size: calc(var(--size-selector) * 5);
120
124
  --radio-pad: 0.1875rem;
121
125
  }
122
126
 
@@ -125,6 +129,7 @@
125
129
  }
126
130
 
127
131
  .zx-radio-group__root.zx-a-size-md {
132
+ --radio-size: calc(var(--size-selector) * 6);
128
133
  --radio-pad: 0.25rem;
129
134
  }
130
135
 
@@ -133,6 +138,7 @@
133
138
  }
134
139
 
135
140
  .zx-radio-group__root.zx-a-size-lg {
141
+ --radio-size: calc(var(--size-selector) * 7);
136
142
  --radio-pad: 0.3125rem;
137
143
  }
138
144
 
@@ -141,9 +147,13 @@
141
147
  }
142
148
 
143
149
  .zx-radio-group__root.zx-a-size-xl {
150
+ --radio-size: calc(var(--size-selector) * 8);
144
151
  --radio-pad: 0.375rem;
145
152
  }
146
153
 
147
154
  .zx-radio-group__item-label.zx-a-size-xl {
148
155
  font-size: var(--text-lg);
149
156
  }
157
+ @keyframes zero-daisy-radio {
158
+ 0% { padding: calc(var(--radio-pad) * 1.25); } 50% { padding: calc(var(--radio-pad) * 0.75); }
159
+ }
@@ -1,3 +1,27 @@
1
+ .zx-rating-group__root {
2
+ --rating-size: calc(var(--size-selector) * 6);
3
+ }
4
+
5
+ .zx-root .zx-rating-group__root {
6
+ --rating-fill: #c68005;
7
+ }
8
+
9
+ .zx-root.zx-theme-dark .zx-rating-group__root {
10
+ --rating-fill: #c68005;
11
+ }
12
+
13
+ .zx-root.zx-theme-dim .zx-rating-group__root {
14
+ --rating-fill: #8e7b31;
15
+ }
16
+
17
+ .zx-root.zx-theme-nord .zx-rating-group__root {
18
+ --rating-fill: #8c7851;
19
+ }
20
+
21
+ .zx-root.zx-theme-sunset .zx-rating-group__root {
22
+ --rating-fill: #8f7655;
23
+ }
24
+
1
25
  .zx-rating-group__root {
2
26
  display: inline-flex;
3
27
  flex-direction: column;
@@ -13,6 +37,26 @@
13
37
  opacity: var(--disabled-opacity);
14
38
  }
15
39
 
40
+ .zx-root .zx-rating-group__label.zx-f-invalid {
41
+ color: #d9576d;
42
+ }
43
+
44
+ .zx-root.zx-theme-dark .zx-rating-group__label.zx-f-invalid {
45
+ color: #ff7d90;
46
+ }
47
+
48
+ .zx-root.zx-theme-dim .zx-rating-group__label.zx-f-invalid {
49
+ color: #f5b3a4;
50
+ }
51
+
52
+ .zx-root.zx-theme-nord .zx-rating-group__label.zx-f-invalid {
53
+ color: #a85b64;
54
+ }
55
+
56
+ .zx-root.zx-theme-sunset .zx-rating-group__label.zx-f-invalid {
57
+ color: #f2bbc0;
58
+ }
59
+
16
60
  .zx-rating-group__control {
17
61
  display: inline-flex;
18
62
  gap: var(--space-2xs);
@@ -40,6 +84,26 @@
40
84
  transition: color var(--duration-fast) var(--ease-standard), mask-size var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
41
85
  }
42
86
 
87
+ .zx-root .zx-rating-group__item {
88
+ color: #07070899;
89
+ }
90
+
91
+ .zx-root.zx-theme-dark .zx-rating-group__item {
92
+ color: #767d8099;
93
+ }
94
+
95
+ .zx-root.zx-theme-dim .zx-rating-group__item {
96
+ color: #57656a99;
97
+ }
98
+
99
+ .zx-root.zx-theme-nord .zx-rating-group__item {
100
+ color: #12151b99;
101
+ }
102
+
103
+ .zx-root.zx-theme-sunset .zx-rating-group__item {
104
+ color: #4d5b6799;
105
+ }
106
+
43
107
  .zx-rating-group__item.zx-s-full {
44
108
  color: var(--rating-fill);
45
109
  }
@@ -67,3 +131,179 @@
67
131
  outline-offset: 1px;
68
132
  border-radius: var(--radius-selector);
69
133
  }
134
+
135
+ .zx-root .zx-rating-group__root.zx-a-color-primary {
136
+ --rating-fill: #676ee6;
137
+ }
138
+
139
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-primary {
140
+ --rating-fill: #848fff;
141
+ }
142
+
143
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-primary {
144
+ --rating-fill: #6da160;
145
+ }
146
+
147
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-primary {
148
+ --rating-fill: #3f5876;
149
+ }
150
+
151
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-primary {
152
+ --rating-fill: #b15b3d;
153
+ }
154
+
155
+ .zx-root .zx-rating-group__root.zx-a-color-secondary {
156
+ --rating-fill: #fb74b2;
157
+ }
158
+
159
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-secondary {
160
+ --rating-fill: #fb74b2;
161
+ }
162
+
163
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-secondary {
164
+ --rating-fill: #b1543e;
165
+ }
166
+
167
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-secondary {
168
+ --rating-fill: #586e85;
169
+ }
170
+
171
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-secondary {
172
+ --rating-fill: #b04b6b;
173
+ }
174
+
175
+ .zx-root .zx-rating-group__root.zx-a-color-accent {
176
+ --rating-fill: #07a897;
177
+ }
178
+
179
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-accent {
180
+ --rating-fill: #07a897;
181
+ }
182
+
183
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-accent {
184
+ --rating-fill: #8964a1;
185
+ }
186
+
187
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-accent {
188
+ --rating-fill: #5d8490;
189
+ }
190
+
191
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-accent {
192
+ --rating-fill: #7b5cad;
193
+ }
194
+
195
+ .zx-root .zx-rating-group__root.zx-a-color-neutral {
196
+ --rating-fill: #414143;
197
+ }
198
+
199
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-neutral {
200
+ --rating-fill: #414143;
201
+ }
202
+
203
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-neutral {
204
+ --rating-fill: #444f59;
205
+ }
206
+
207
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-neutral {
208
+ --rating-fill: #737c8e;
209
+ }
210
+
211
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-neutral {
212
+ --rating-fill: #3c484f;
213
+ }
214
+
215
+ .zx-root .zx-rating-group__root.zx-a-color-info {
216
+ --rating-fill: #058dc4;
217
+ }
218
+
219
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-info {
220
+ --rating-fill: #058dc4;
221
+ }
222
+
223
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-info {
224
+ --rating-fill: #19a3b1;
225
+ }
226
+
227
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-info {
228
+ --rating-fill: #7c6177;
229
+ }
230
+
231
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-info {
232
+ --rating-fill: #5d9ba3;
233
+ }
234
+
235
+ .zx-root .zx-rating-group__root.zx-a-color-success {
236
+ --rating-fill: #00a875;
237
+ }
238
+
239
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-success {
240
+ --rating-fill: #00a875;
241
+ }
242
+
243
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-success {
244
+ --rating-fill: #41a682;
245
+ }
246
+
247
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-success {
248
+ --rating-fill: #708360;
249
+ }
250
+
251
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-success {
252
+ --rating-fill: #779a77;
253
+ }
254
+
255
+ .zx-root .zx-rating-group__root.zx-a-color-warning {
256
+ --rating-fill: #c68005;
257
+ }
258
+
259
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-warning {
260
+ --rating-fill: #c68005;
261
+ }
262
+
263
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-warning {
264
+ --rating-fill: #8e7b31;
265
+ }
266
+
267
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-warning {
268
+ --rating-fill: #8c7851;
269
+ }
270
+
271
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-warning {
272
+ --rating-fill: #8f7655;
273
+ }
274
+
275
+ .zx-root .zx-rating-group__root.zx-a-color-error {
276
+ --rating-fill: #c6445c;
277
+ }
278
+
279
+ .zx-root.zx-theme-dark .zx-rating-group__root.zx-a-color-error {
280
+ --rating-fill: #c6445c;
281
+ }
282
+
283
+ .zx-root.zx-theme-dim .zx-rating-group__root.zx-a-color-error {
284
+ --rating-fill: #b1776a;
285
+ }
286
+
287
+ .zx-root.zx-theme-nord .zx-rating-group__root.zx-a-color-error {
288
+ --rating-fill: #834147;
289
+ }
290
+
291
+ .zx-root.zx-theme-sunset .zx-rating-group__root.zx-a-color-error {
292
+ --rating-fill: #b18182;
293
+ }
294
+
295
+ .zx-rating-group__root.zx-a-size-xs {
296
+ --rating-size: calc(var(--size-selector) * 4);
297
+ }
298
+
299
+ .zx-rating-group__root.zx-a-size-sm {
300
+ --rating-size: calc(var(--size-selector) * 5);
301
+ }
302
+
303
+ .zx-rating-group__root.zx-a-size-lg {
304
+ --rating-size: calc(var(--size-selector) * 7);
305
+ }
306
+
307
+ .zx-rating-group__root.zx-a-size-xl {
308
+ --rating-size: calc(var(--size-selector) * 8);
309
+ }
@@ -13,6 +13,8 @@
13
13
  align-items: center;
14
14
  justify-content: space-between;
15
15
  gap: var(--space-lg);
16
+ height: calc(var(--size-field) * 12);
17
+ padding-inline: calc(var(--size-field) * 4);
16
18
  font-size: var(--text-sm);
17
19
  font-weight: var(--weight-medium);
18
20
  color: var(--color-base-content);
@@ -44,6 +46,26 @@
44
46
  outline-offset: 2px;
45
47
  }
46
48
 
49
+ .zx-root .zx-select__value.zx-f-placeholder {
50
+ color: #07070899;
51
+ }
52
+
53
+ .zx-root.zx-theme-dark .zx-select__value.zx-f-placeholder {
54
+ color: #767d8099;
55
+ }
56
+
57
+ .zx-root.zx-theme-dim .zx-select__value.zx-f-placeholder {
58
+ color: #57656a99;
59
+ }
60
+
61
+ .zx-root.zx-theme-nord .zx-select__value.zx-f-placeholder {
62
+ color: #12151b99;
63
+ }
64
+
65
+ .zx-root.zx-theme-sunset .zx-select__value.zx-f-placeholder {
66
+ color: #4d5b6799;
67
+ }
68
+
47
69
  .zx-select__indicator {
48
70
  opacity: 0.6;
49
71
  transition: transform var(--duration-normal) var(--ease-standard);
@@ -143,21 +165,31 @@
143
165
  }
144
166
 
145
167
  .zx-select__trigger.zx-a-size-xs {
168
+ height: calc(var(--size-field) * 8);
169
+ padding-inline: calc(var(--size-field) * 2);
146
170
  font-size: var(--text-xs);
147
171
  }
148
172
 
149
173
  .zx-select__trigger.zx-a-size-sm {
174
+ height: calc(var(--size-field) * 10);
175
+ padding-inline: calc(var(--size-field) * 3);
150
176
  font-size: var(--text-sm);
151
177
  }
152
178
 
153
179
  .zx-select__trigger.zx-a-size-md {
180
+ height: calc(var(--size-field) * 12);
181
+ padding-inline: calc(var(--size-field) * 4);
154
182
  font-size: var(--text-sm);
155
183
  }
156
184
 
157
185
  .zx-select__trigger.zx-a-size-lg {
186
+ height: calc(var(--size-field) * 14);
187
+ padding-inline: calc(var(--size-field) * 5);
158
188
  font-size: var(--text-md);
159
189
  }
160
190
 
161
191
  .zx-select__trigger.zx-a-size-xl {
192
+ height: calc(var(--size-field) * 16);
193
+ padding-inline: calc(var(--size-field) * 6);
162
194
  font-size: var(--text-lg);
163
195
  }
@@ -14,6 +14,166 @@
14
14
  pointer-events: none;
15
15
  }
16
16
 
17
+ .zx-root .zx-skeleton__root.zx-a-color-primary {
18
+ --skeleton-fill: #c5cbee;
19
+ }
20
+
21
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-primary {
22
+ --skeleton-fill: #212845;
23
+ }
24
+
25
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-primary {
26
+ --skeleton-fill: #374741;
27
+ }
28
+
29
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-primary {
30
+ --skeleton-fill: #bfcbdd;
31
+ }
32
+
33
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-primary {
34
+ --skeleton-fill: #342928;
35
+ }
36
+
37
+ .zx-root .zx-skeleton__root.zx-a-color-secondary {
38
+ --skeleton-fill: #f6cedc;
39
+ }
40
+
41
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-secondary {
42
+ --skeleton-fill: #3e2434;
43
+ }
44
+
45
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-secondary {
46
+ --skeleton-fill: #493739;
47
+ }
48
+
49
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-secondary {
50
+ --skeleton-fill: #c6d2e1;
51
+ }
52
+
53
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-secondary {
54
+ --skeleton-fill: #352630;
55
+ }
56
+
57
+ .zx-root .zx-skeleton__root.zx-a-color-accent {
58
+ --skeleton-fill: #d0e9e4;
59
+ }
60
+
61
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-accent {
62
+ --skeleton-fill: #1f393a;
63
+ }
64
+
65
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-accent {
66
+ --skeleton-fill: #3e394f;
67
+ }
68
+
69
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-accent {
70
+ --skeleton-fill: #c9d8e4;
71
+ }
72
+
73
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-accent {
74
+ --skeleton-fill: #27283f;
75
+ }
76
+
77
+ .zx-root .zx-skeleton__root.zx-a-color-neutral {
78
+ --skeleton-fill: #b9b9ba;
79
+ }
80
+
81
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-neutral {
82
+ --skeleton-fill: #13161a;
83
+ }
84
+
85
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-neutral {
86
+ --skeleton-fill: #1f242d;
87
+ }
88
+
89
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-neutral {
90
+ --skeleton-fill: #bac1ce;
91
+ }
92
+
93
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-neutral {
94
+ --skeleton-fill: #0c171d;
95
+ }
96
+
97
+ .zx-root .zx-skeleton__root.zx-a-color-info {
98
+ --skeleton-fill: #cde5f2;
99
+ }
100
+
101
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-info {
102
+ --skeleton-fill: #1e3544;
103
+ }
104
+
105
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-info {
106
+ --skeleton-fill: #2c4853;
107
+ }
108
+
109
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-info {
110
+ --skeleton-fill: #d1cedd;
111
+ }
112
+
113
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-info {
114
+ --skeleton-fill: #1f353d;
115
+ }
116
+
117
+ .zx-root .zx-skeleton__root.zx-a-color-success {
118
+ --skeleton-fill: #cfeadb;
119
+ }
120
+
121
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-success {
122
+ --skeleton-fill: #1f3933;
123
+ }
124
+
125
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-success {
126
+ --skeleton-fill: #2f4848;
127
+ }
128
+
129
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-success {
130
+ --skeleton-fill: #cdd8d7;
131
+ }
132
+
133
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-success {
134
+ --skeleton-fill: #243634;
135
+ }
136
+
137
+ .zx-root .zx-skeleton__root.zx-a-color-warning {
138
+ --skeleton-fill: #f2e4cd;
139
+ }
140
+
141
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-warning {
142
+ --skeleton-fill: #3c3528;
143
+ }
144
+
145
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-warning {
146
+ --skeleton-fill: #44443b;
147
+ }
148
+
149
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-warning {
150
+ --skeleton-fill: #dcdbd7;
151
+ }
152
+
153
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-warning {
154
+ --skeleton-fill: #303230;
155
+ }
156
+
157
+ .zx-root .zx-skeleton__root.zx-a-color-error {
158
+ --skeleton-fill: #f6d4d7;
159
+ }
160
+
161
+ .zx-root.zx-theme-dark .zx-skeleton__root.zx-a-color-error {
162
+ --skeleton-fill: #3f2930;
163
+ }
164
+
165
+ .zx-root.zx-theme-dim .zx-skeleton__root.zx-a-color-error {
166
+ --skeleton-fill: #473e43;
167
+ }
168
+
169
+ .zx-root.zx-theme-nord .zx-skeleton__root.zx-a-color-error {
170
+ --skeleton-fill: #d6c5cf;
171
+ }
172
+
173
+ .zx-root.zx-theme-sunset .zx-skeleton__root.zx-a-color-error {
174
+ --skeleton-fill: #333036;
175
+ }
176
+
17
177
  .zx-skeleton__root.zx-a-size-xs {
18
178
  border-radius: var(--radius-selector);
19
179
  }
@@ -38,6 +38,8 @@
38
38
  }
39
39
 
40
40
  .zx-slider__track {
41
+ height: calc(var(--size-selector) * 2);
42
+ margin-block: calc(var(--size-selector) * 1.5);
41
43
  border-radius: 9999px;
42
44
  background: var(--color-base-300);
43
45
  cursor: pointer;
@@ -54,8 +56,11 @@
54
56
 
55
57
  .zx-slider__thumb {
56
58
  box-sizing: border-box;
59
+ width: calc(var(--size-selector) * 5);
60
+ height: calc(var(--size-selector) * 5);
57
61
  inset-block-start: 50%;
58
62
  translate: 0 -50%;
63
+ margin-inline-start: calc(var(--size-selector) * -2.5);
59
64
  border-radius: 9999px;
60
65
  cursor: pointer;
61
66
  outline: none;
@@ -72,6 +77,7 @@
72
77
  }
73
78
 
74
79
  .zx-slider__mark {
80
+ padding-block-start: calc(var(--size-selector) * 2 + var(--space-2xs));
75
81
  font-size: var(--text-xs);
76
82
  line-height: 1;
77
83
  white-space: nowrap;
@@ -115,10 +121,18 @@
115
121
  --slider-accent: var(--color-error);
116
122
  }
117
123
 
124
+ .zx-slider__control.zx-a-size-xs {
125
+ height: calc(var(--size-selector) * 3);
126
+ }
127
+
118
128
  .zx-slider__label.zx-a-size-xs {
119
129
  font-size: var(--text-xs);
120
130
  }
121
131
 
132
+ .zx-slider__control.zx-a-size-sm {
133
+ height: calc(var(--size-selector) * 4);
134
+ }
135
+
122
136
  .zx-slider__label.zx-a-size-sm {
123
137
  font-size: var(--text-sm);
124
138
  }
@@ -127,10 +141,18 @@
127
141
  font-size: var(--text-sm);
128
142
  }
129
143
 
144
+ .zx-slider__control.zx-a-size-lg {
145
+ height: calc(var(--size-selector) * 7);
146
+ }
147
+
130
148
  .zx-slider__label.zx-a-size-lg {
131
149
  font-size: var(--text-md);
132
150
  }
133
151
 
152
+ .zx-slider__control.zx-a-size-xl {
153
+ height: calc(var(--size-selector) * 8);
154
+ }
155
+
134
156
  .zx-slider__label.zx-a-size-xl {
135
157
  font-size: var(--text-lg);
136
158
  }
@@ -1,4 +1,5 @@
1
1
  .zx-spinner__root {
2
+ --spinner-size: calc(var(--size-field) * 0.5);
2
3
  --spinner-ink: var(--color-primary);
3
4
  --spinner-track: var(--color-base-300);
4
5
  }
@@ -9,6 +10,7 @@
9
10
  block-size: var(--spinner-size);
10
11
  box-sizing: border-box;
11
12
  border-radius: 50%;
13
+ border: calc(var(--border) * 2) solid var(--spinner-track);
12
14
  border-block-start-color: var(--spinner-ink);
13
15
  animation: zero-daisyui-spin 0.7s linear infinite;
14
16
  }
@@ -44,6 +46,22 @@
44
46
  .zx-spinner__root.zx-a-color-error {
45
47
  --spinner-ink: var(--color-error);
46
48
  }
49
+
50
+ .zx-spinner__root.zx-a-size-xs {
51
+ --spinner-size: calc(var(--size-field) * 0.35);
52
+ }
53
+
54
+ .zx-spinner__root.zx-a-size-sm {
55
+ --spinner-size: calc(var(--size-field) * 0.42);
56
+ }
57
+
58
+ .zx-spinner__root.zx-a-size-lg {
59
+ --spinner-size: calc(var(--size-field) * 0.7);
60
+ }
61
+
62
+ .zx-spinner__root.zx-a-size-xl {
63
+ --spinner-size: calc(var(--size-field) * 0.9);
64
+ }
47
65
  @keyframes zero-daisyui-spin {
48
66
  to { transform: rotate(360deg); }
49
67
  }
@@ -27,6 +27,26 @@
27
27
  font-size: var(--text-xs);
28
28
  }
29
29
 
30
+ .zx-root .zx-stats__title {
31
+ color: #0a0a0cb3;
32
+ }
33
+
34
+ .zx-root.zx-theme-dark .zx-stats__title {
35
+ color: #929a9eb3;
36
+ }
37
+
38
+ .zx-root.zx-theme-dim .zx-stats__title {
39
+ color: #6d7e84b3;
40
+ }
41
+
42
+ .zx-root.zx-theme-nord .zx-stats__title {
43
+ color: #181c24b3;
44
+ }
45
+
46
+ .zx-root.zx-theme-sunset .zx-stats__title {
47
+ color: #617180b3;
48
+ }
49
+
30
50
  .zx-stats__value {
31
51
  grid-column: 1;
32
52
  font-size: var(--text-2xl);
@@ -40,6 +60,26 @@
40
60
  font-size: var(--text-xs);
41
61
  }
42
62
 
63
+ .zx-root .zx-stats__desc {
64
+ color: #0a0a0cb3;
65
+ }
66
+
67
+ .zx-root.zx-theme-dark .zx-stats__desc {
68
+ color: #929a9eb3;
69
+ }
70
+
71
+ .zx-root.zx-theme-dim .zx-stats__desc {
72
+ color: #6d7e84b3;
73
+ }
74
+
75
+ .zx-root.zx-theme-nord .zx-stats__desc {
76
+ color: #181c24b3;
77
+ }
78
+
79
+ .zx-root.zx-theme-sunset .zx-stats__desc {
80
+ color: #617180b3;
81
+ }
82
+
43
83
  .zx-stats__figure {
44
84
  grid-column: 2;
45
85
  grid-row: 1 / span 3;