@studiocms/ui 0.4.17 → 1.0.0-beta.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 (68) hide show
  1. package/dist/components/Accordion/Accordion.astro +1 -0
  2. package/dist/components/Accordion/Item.astro +8 -6
  3. package/dist/components/Accordion/accordion.css +35 -21
  4. package/dist/components/Accordion/accordion.d.ts +46 -1
  5. package/dist/components/Accordion/accordion.js +95 -70
  6. package/dist/components/Badge/Badge.astro +2 -2
  7. package/dist/components/Badge/badge.css +32 -32
  8. package/dist/components/Breadcrumbs/breadcrumbs.css +1 -1
  9. package/dist/components/Button/button.css +93 -93
  10. package/dist/components/Card/card.css +4 -4
  11. package/dist/components/Checkbox/checkbox.css +26 -26
  12. package/dist/components/Divider/Divider.astro +1 -1
  13. package/dist/components/Divider/divider.css +2 -2
  14. package/dist/components/Dropdown/Dropdown.astro +2 -2
  15. package/dist/components/Dropdown/dropdown.css +26 -26
  16. package/dist/components/Footer/footer.css +4 -4
  17. package/dist/components/Icon/Icon.astro +114 -6
  18. package/dist/components/Icon/IconBase.astro +108 -7
  19. package/dist/components/Icon/errors.d.ts +29 -0
  20. package/dist/components/Icon/errors.js +25 -0
  21. package/dist/components/Input/input.css +9 -9
  22. package/dist/components/Modal/Modal.astro +1 -1
  23. package/dist/components/Modal/modal.css +4 -4
  24. package/dist/components/Progress/progress.css +7 -7
  25. package/dist/components/RadioGroup/radiogroup.css +21 -21
  26. package/dist/components/SearchSelect/SearchSelect.astro +2 -2
  27. package/dist/components/SearchSelect/searchselect.css +28 -22
  28. package/dist/components/Select/Select.astro +2 -2
  29. package/dist/components/Select/select.css +36 -30
  30. package/dist/components/Sidebar/Double.astro +4 -4
  31. package/dist/components/Sidebar/Single.astro +2 -2
  32. package/dist/components/Skeleton/Skeleton.astro +61 -0
  33. package/dist/components/Skeleton/skeleton.css +111 -0
  34. package/dist/components/Skeleton/skeleton.d.ts +161 -0
  35. package/dist/components/Skeleton/skeleton.js +71 -0
  36. package/dist/components/Tabs/TabItem.astro +14 -9
  37. package/dist/components/Tabs/Tabs.astro +91 -54
  38. package/dist/components/Tabs/tabs.css +14 -14
  39. package/dist/components/Tabs/tabs.d.ts +17 -1
  40. package/dist/components/Tabs/tabs.js +99 -76
  41. package/dist/components/Textarea/textarea.css +8 -8
  42. package/dist/components/Toast/toaster.css +26 -23
  43. package/dist/components/Toast/toaster.js +4 -0
  44. package/dist/components/Toggle/toggle.css +13 -13
  45. package/dist/components/Tooltip/Tooltip.astro +119 -0
  46. package/dist/components/Tooltip/tooltip.css +187 -0
  47. package/dist/components/Tooltip/tooltip.d.ts +46 -0
  48. package/dist/components/Tooltip/tooltip.js +330 -0
  49. package/dist/components/User/User.astro +1 -1
  50. package/dist/components/User/user.css +3 -3
  51. package/dist/css/colors.css +85 -83
  52. package/dist/css/prose.css +360 -0
  53. package/dist/css/resets.css +3 -3
  54. package/dist/events.d.ts +104 -0
  55. package/dist/index.d.ts +25 -0
  56. package/dist/index.js +120 -313
  57. package/dist/toolbar/index.js +5 -5
  58. package/dist/types/index.d.ts +2 -0
  59. package/dist/utils/iconifyUtils.d.ts +1 -1
  60. package/dist/virtuals.d.js +0 -0
  61. package/dist/virtuals.d.ts +564 -0
  62. package/package.json +5 -1
  63. package/dist/components/Icon/iconType.d.ts +0 -2
  64. package/dist/components/ThemeToggle/ThemeToggle.astro +0 -21
  65. package/dist/components/ThemeToggle/themetoggle.css +0 -17
  66. package/dist/components/ThemeToggle/themetoggle.d.ts +0 -1
  67. package/dist/components/ThemeToggle/themetoggle.js +0 -4
  68. /package/dist/{components/Icon/iconType.js → events.d.js} +0 -0
package/dist/components/Button/button.css CHANGED
@@ -16,9 +16,9 @@
16
16
  color 0.15s;
17
17
  transition-timing-function: ease;
18
18
  cursor: pointer;
19
- background-color: hsl(var(--default-base));
20
- border-color: hsl(var(--border));
21
- color: hsl(var(--text-normal));
19
+ background-color: var(--default-base);
20
+ border-color: var(--border);
21
+ color: var(--text-normal);
22
22
  min-width: fit-content;
23
23
  will-change: transform;
24
24
  text-decoration: none;
@@ -32,26 +32,26 @@
32
32
  border-style: solid;
33
33
  }
34
34
  .sui-button.outlined:hover {
35
- background-color: hsl(var(--default-hover));
35
+ background-color: var(--default-hover);
36
36
  }
37
37
  .sui-button.outlined:active {
38
- background-color: hsl(var(--default-hover));
38
+ background-color: var(--default-hover);
39
39
  }
40
40
  .sui-button:hover {
41
- background-color: hsl(var(--default-hover));
41
+ background-color: var(--default-hover);
42
42
  }
43
43
  .sui-button:active {
44
- background-color: hsl(var(--default-active));
44
+ background-color: var(--default-active);
45
45
  transform: scale(0.95);
46
46
  }
47
47
  .sui-button.flat {
48
- background: hsla(var(--default-flat));
48
+ background: var(--default-flat);
49
49
  }
50
50
  .sui-button.flat:hover {
51
- background: hsla(var(--default-flat-hover));
51
+ background: var(--default-flat-hover);
52
52
  }
53
53
  .sui-button.flat:active {
54
- background: hsla(var(--default-flat-active));
54
+ background: var(--default-flat-active);
55
55
  }
56
56
  .sui-button.sm {
57
57
  height: 32px;
@@ -69,194 +69,194 @@
69
69
  font-size: 1em;
70
70
  }
71
71
  .sui-button:focus-visible {
72
- outline: 2px solid hsl(var(--text-normal));
72
+ outline: 2px solid var(--text-normal);
73
73
  outline-offset: 2px;
74
74
  }
75
75
  .sui-button.primary {
76
- background-color: hsl(var(--primary-base));
77
- border-color: hsl(var(--primary-base));
78
- color: hsl(var(--text-inverted));
76
+ background-color: var(--primary-base);
77
+ border-color: var(--primary-base);
78
+ color: var(--text-inverted);
79
79
  }
80
80
  .sui-button.primary:hover {
81
- background-color: hsl(var(--primary-hover));
81
+ background-color: var(--primary-hover);
82
82
  }
83
83
  .sui-button.primary:active {
84
- background-color: hsl(var(--primary-active));
84
+ background-color: var(--primary-active);
85
85
  }
86
86
  .sui-button.primary.outlined {
87
- background-color: hsl(var(--default-base));
88
- color: hsl(var(--text-normal));
87
+ background-color: var(--default-base);
88
+ color: var(--text-normal);
89
89
  }
90
90
  .sui-button.primary.outlined:hover {
91
- background-color: hsl(var(--default-hover));
91
+ background-color: var(--default-hover);
92
92
  }
93
93
  .sui-button.primary.outlined:active {
94
- background-color: hsl(var(--default-active));
94
+ background-color: var(--default-active);
95
95
  }
96
96
  .sui-button.primary.flat {
97
- background-color: hsla(var(--primary-flat));
97
+ background-color: var(--primary-flat);
98
98
  color: hsl(259, 96%, 79%);
99
99
  }
100
100
  .sui-button.primary.flat:hover {
101
- background-color: hsla(var(--primary-flat-hover));
101
+ background-color: var(--primary-flat-hover);
102
102
  }
103
103
  .sui-button.primary.flat:active {
104
- background-color: hsla(var(--primary-flat-active));
104
+ background-color: var(--primary-flat-active);
105
105
  }
106
106
  .sui-button.success {
107
- background-color: hsl(var(--success-base));
108
- border-color: hsl(var(--success-base));
109
- color: hsl(var(--text-dark));
107
+ background-color: var(--success-base);
108
+ border-color: var(--success-base);
109
+ color: var(--text-dark);
110
110
  }
111
111
  .sui-button.success:hover {
112
- background-color: hsl(var(--success-hover));
112
+ background-color: var(--success-hover);
113
113
  }
114
114
  .sui-button.success:active {
115
- background-color: hsl(var(--success-active));
115
+ background-color: var(--success-active);
116
116
  }
117
117
  .sui-button.success.outlined {
118
- background-color: hsl(var(--default-base));
119
- color: hsl(var(--text-normal));
118
+ background-color: var(--default-base);
119
+ color: var(--text-normal);
120
120
  }
121
121
  .sui-button.success.outlined:hover {
122
- background-color: hsl(var(--default-hover));
122
+ background-color: var(--default-hover);
123
123
  }
124
124
  .sui-button.success.outlined:active {
125
- background-color: hsl(var(--default-active));
125
+ background-color: var(--default-active);
126
126
  }
127
127
  .sui-button.success.flat {
128
- background-color: hsla(var(--success-flat));
129
- color: hsl(var(--success-base));
128
+ background-color: var(--success-flat);
129
+ color: var(--success-base);
130
130
  }
131
131
  .sui-button.success.flat:hover {
132
- background-color: hsla(var(--success-flat-hover));
132
+ background-color: var(--success-flat-hover);
133
133
  }
134
134
  .sui-button.success.flat:active {
135
- background-color: hsla(var(--success-flat-active));
135
+ background-color: var(--success-flat-active);
136
136
  }
137
137
  .sui-button.warning {
138
- background-color: hsl(var(--warning-base));
139
- border-color: hsl(var(--warning-base));
140
- color: hsl(var(--text-dark));
138
+ background-color: var(--warning-base);
139
+ border-color: var(--warning-base);
140
+ color: var(--text-dark);
141
141
  }
142
142
  .sui-button.warning:hover {
143
- background-color: hsl(var(--warning-hover));
143
+ background-color: var(--warning-hover);
144
144
  }
145
145
  .sui-button.warning:active {
146
- background-color: hsl(var(--warning-active));
146
+ background-color: var(--warning-active);
147
147
  }
148
148
  .sui-button.warning.outlined {
149
- background-color: hsl(var(--default-base));
150
- color: hsl(var(--text-normal));
149
+ background-color: var(--default-base);
150
+ color: var(--text-normal);
151
151
  }
152
152
  .sui-button.warning.outlined:hover {
153
- background-color: hsl(var(--default-hover));
153
+ background-color: var(--default-hover);
154
154
  }
155
155
  .sui-button.warning.outlined:active {
156
- background-color: hsl(var(--default-active));
156
+ background-color: var(--default-active);
157
157
  }
158
158
  .sui-button.warning.flat {
159
- background-color: hsla(var(--warning-flat));
160
- color: hsl(var(--warning-base));
159
+ background-color: var(--warning-flat);
160
+ color: var(--warning-base);
161
161
  }
162
162
  .sui-button.warning.flat:hover {
163
- background-color: hsla(var(--warning-flat-hover));
163
+ background-color: var(--warning-flat-hover);
164
164
  }
165
165
  .sui-button.warning.flat:active {
166
- background-color: hsla(var(--warning-flat-active));
166
+ background-color: var(--warning-flat-active);
167
167
  }
168
168
  .sui-button.danger {
169
- background-color: hsl(var(--danger-base));
170
- border-color: hsl(var(--danger-base));
171
- color: hsl(var(--text-light));
169
+ background-color: var(--danger-base);
170
+ border-color: var(--danger-base);
171
+ color: var(--text-light);
172
172
  }
173
173
  .sui-button.danger:hover {
174
- background-color: hsl(var(--danger-hover));
174
+ background-color: var(--danger-hover);
175
175
  }
176
176
  .sui-button.danger:active {
177
- background-color: hsl(var(--danger-active));
177
+ background-color: var(--danger-active);
178
178
  }
179
179
  .sui-button.danger.outlined {
180
- background-color: hsl(var(--default-base));
181
- color: hsl(var(--text-normal));
180
+ background-color: var(--default-base);
181
+ color: var(--text-normal);
182
182
  }
183
183
  .sui-button.danger.outlined:hover {
184
- background-color: hsl(var(--default-hover));
184
+ background-color: var(--default-hover);
185
185
  }
186
186
  .sui-button.danger.outlined:active {
187
- background-color: hsl(var(--default-active));
187
+ background-color: var(--default-active);
188
188
  }
189
189
  .sui-button.danger.flat {
190
- background-color: hsla(var(--danger-flat));
190
+ background-color: var(--danger-flat);
191
191
  color: hsl(337, 92%, 71%);
192
192
  }
193
193
  .sui-button.danger.flat:hover {
194
- background-color: hsla(var(--danger-flat-hover));
194
+ background-color: var(--danger-flat-hover);
195
195
  }
196
196
  .sui-button.danger.flat:active {
197
- background-color: hsla(var(--danger-flat-active));
197
+ background-color: var(--danger-flat-active);
198
198
  }
199
199
  .sui-button.info {
200
- background-color: hsl(var(--info-base));
201
- border-color: hsl(var(--info-base));
202
- color: hsl(var(--text-light));
200
+ background-color: var(--info-base);
201
+ border-color: var(--info-base);
202
+ color: var(--text-light);
203
203
  }
204
204
  .sui-button.info:hover {
205
- background-color: hsl(var(--info-hover));
205
+ background-color: var(--info-hover);
206
206
  }
207
207
  .sui-button.info:active {
208
- background-color: hsl(var(--info-active));
208
+ background-color: var(--info-active);
209
209
  }
210
210
  .sui-button.info.outlined {
211
- background-color: hsl(var(--default-base));
212
- color: hsl(var(--text-normal));
211
+ background-color: var(--default-base);
212
+ color: var(--text-normal);
213
213
  }
214
214
  .sui-button.info.outlined:hover {
215
- background-color: hsl(var(--default-hover));
215
+ background-color: var(--default-hover);
216
216
  }
217
217
  .sui-button.info.outlined:active {
218
- background-color: hsl(var(--default-active));
218
+ background-color: var(--default-active);
219
219
  }
220
220
  .sui-button.info.flat {
221
- background-color: hsla(var(--info-flat));
222
- color: hsl(var(--info-base));
221
+ background-color: var(--info-flat);
222
+ color: var(--info-base);
223
223
  }
224
224
  .sui-button.info.flat:hover {
225
- background-color: hsla(var(--info-flat-hover));
225
+ background-color: var(--info-flat-hover);
226
226
  }
227
227
  .sui-button.info.flat:active {
228
- background-color: hsla(var(--info-flat-active));
228
+ background-color: var(--info-flat-active);
229
229
  }
230
230
  .sui-button.mono {
231
- background-color: hsl(var(--mono-base));
232
- border-color: hsl(var(--mono-base));
233
- color: hsl(var(--text-inverted));
231
+ background-color: var(--mono-base);
232
+ border-color: var(--mono-base);
233
+ color: var(--text-inverted);
234
234
  }
235
235
  .sui-button.mono:hover {
236
- background-color: hsl(var(--mono-hover));
236
+ background-color: var(--mono-hover);
237
237
  }
238
238
  .sui-button.mono:active {
239
- background-color: hsl(var(--mono-active));
239
+ background-color: var(--mono-active);
240
240
  }
241
241
  .sui-button.mono.outlined {
242
- background-color: hsl(var(--default-base));
243
- color: hsl(var(--text-normal));
242
+ background-color: var(--default-base);
243
+ color: var(--text-normal);
244
244
  }
245
245
  .sui-button.mono.outlined:hover {
246
- background-color: hsl(var(--default-hover));
246
+ background-color: var(--default-hover);
247
247
  }
248
248
  .sui-button.mono.outlined:active {
249
- background-color: hsl(var(--default-active));
249
+ background-color: var(--default-active);
250
250
  }
251
251
  .sui-button.mono.flat {
252
- background-color: hsla(var(--mono-flat));
253
- color: hsl(var(--mono-base));
252
+ background-color: var(--mono-flat);
253
+ color: var(--mono-base);
254
254
  }
255
255
  .sui-button.mono.flat:hover {
256
- background-color: hsla(var(--mono-flat-hover));
256
+ background-color: var(--mono-flat-hover);
257
257
  }
258
258
  .sui-button.mono.flat:active {
259
- background-color: hsla(var(--mono-flat-active));
259
+ background-color: var(--mono-flat-active);
260
260
  }
261
261
  .sui-button.full {
262
262
  width: 100%;
@@ -267,24 +267,24 @@
267
267
  color: hsl(259, 84%, 45%);
268
268
  }
269
269
  .sui-button.success.flat {
270
- background-color: hsla(var(--success-base) / 0.2);
270
+ background-color: var(--success-flat-base);
271
271
  color: hsl(143, 59%, 20%);
272
272
  }
273
273
  .sui-button.success.flat:hover {
274
- background-color: hsla(var(--success-flat-hover));
274
+ background-color: var(--success-flat-hover);
275
275
  }
276
276
  .sui-button.success.flat:active {
277
- background-color: hsla(var(--success-flat-active));
277
+ background-color: var(--success-flat-active);
278
278
  }
279
279
  .sui-button.warning.flat {
280
- background-color: hsla(var(--warning-base) / 0.2);
280
+ background-color: var(--warning-flat-base);
281
281
  color: hsl(48, 78%, 20%);
282
282
  }
283
283
  .sui-button.warning.flat:hover {
284
- background-color: hsla(var(--warning-base) / 0.25);
284
+ background-color: var(--warning-flat-hover);
285
285
  }
286
286
  .sui-button.warning.flat:active {
287
- background-color: hsla(var(--warning-base) / 0.4);
287
+ background-color: var(--warning-flat-active);
288
288
  }
289
289
  .sui-button.danger.flat {
290
290
  color: hsl(339, 97%, 29%);
package/dist/components/Card/card.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .sui-card {
2
- border: 1px solid hsl(var(--border));
3
- background-color: hsl(var(--background-base));
2
+ border: 1px solid var(--border);
3
+ background-color: var(--background-base);
4
4
  border-radius: var(--radius-md);
5
5
  width: fit-content;
6
6
  height: fit-content;
7
7
  }
8
8
  .sui-card.filled {
9
- background-color: hsl(var(--background-step-3));
9
+ background-color: var(--background-step-3);
10
10
  border: none;
11
11
  }
12
12
  .sui-card.full-w {
@@ -25,7 +25,7 @@
25
25
  padding: 1rem;
26
26
  }
27
27
  .sui-card-footer:has(*) {
28
- border-top: 1px solid hsl(var(--border));
28
+ border-top: 1px solid var(--border);
29
29
  padding: 1rem;
30
30
  }
31
31
  .sui-card-footer:not(:has(*)) {
package/dist/components/Checkbox/checkbox.css CHANGED
@@ -9,14 +9,14 @@
9
9
  .sui-checkmark-label.disabled {
10
10
  opacity: 0.5;
11
11
  pointer-events: none;
12
- color: hsl(var(--text-muted));
12
+ color: var(--text-muted);
13
13
  }
14
14
  .sui-checkmark-container {
15
15
  display: flex;
16
16
  align-items: center;
17
17
  justify-content: center;
18
- background-color: hsl(var(--default-base));
19
- border: 2px solid hsl(var(--default-base));
18
+ background-color: var(--default-base);
19
+ border: 2px solid var(--default-base);
20
20
  border-radius: var(--radius-md);
21
21
  cursor: pointer;
22
22
  transition:
@@ -26,14 +26,14 @@
26
26
  transition-timing-function: ease;
27
27
  }
28
28
  .sui-checkmark-container:focus-visible {
29
- outline: 2px solid hsl(var(--text-normal));
29
+ outline: 2px solid var(--text-normal);
30
30
  outline-offset: 2px;
31
31
  }
32
32
  .sui-checkmark-label:hover .sui-checkmark-container {
33
- background-color: hsl(var(--default-hover));
33
+ background-color: var(--default-hover);
34
34
  }
35
35
  .sui-checkmark-label:active .sui-checkmark-container {
36
- background-color: hsl(var(--default-active));
36
+ background-color: var(--default-active);
37
37
  scale: 0.9;
38
38
  }
39
39
  .sui-checkmark-label.sm {
@@ -56,31 +56,31 @@
56
56
  padding: .125rem;
57
57
  }
58
58
  .primary .sui-checkmark-container:has(.sui-checkbox:checked) {
59
- border-color: hsl(var(--primary-base));
60
- background-color: hsl(var(--primary-base));
59
+ border-color: var(--primary-base);
60
+ background-color: var(--primary-base);
61
61
  }
62
62
  .success .sui-checkmark-container:has(.sui-checkbox:checked) {
63
- border-color: hsl(var(--success-base));
64
- background-color: hsl(var(--success-base));
63
+ border-color: var(--success-base);
64
+ background-color: var(--success-base);
65
65
  }
66
66
  .warning .sui-checkmark-container:has(.sui-checkbox:checked) {
67
- border-color: hsl(var(--warning-base));
68
- background-color: hsl(var(--warning-base));
67
+ border-color: var(--warning-base);
68
+ background-color: var(--warning-base);
69
69
  }
70
70
  .danger .sui-checkmark-container:has(.sui-checkbox:checked) {
71
- border-color: hsl(var(--danger-base));
72
- background-color: hsl(var(--danger-base));
71
+ border-color: var(--danger-base);
72
+ background-color: var(--danger-base);
73
73
  }
74
74
  .info .sui-checkmark-container:has(.sui-checkbox:checked) {
75
- border-color: hsl(var(--info-base));
76
- background-color: hsl(var(--info-base));
75
+ border-color: var(--info-base);
76
+ background-color: var(--info-base);
77
77
  }
78
78
  .mono .sui-checkmark-container:has(.sui-checkbox:checked) {
79
- border-color: hsl(var(--mono-base));
80
- background-color: hsl(var(--mono-base));
79
+ border-color: var(--mono-base);
80
+ background-color: var(--mono-base);
81
81
  }
82
82
  .req-star {
83
- color: hsl(var(--danger-base));
83
+ color: var(--danger-base);
84
84
  font-weight: 700;
85
85
  }
86
86
  .sui-checkbox {
@@ -92,25 +92,25 @@
92
92
  }
93
93
  .sui-checkmark polyline {
94
94
  transition: all .15s ease;
95
- color: hsl(var(--text-normal));
95
+ color: var(--text-normal);
96
96
  }
97
97
  .primary .sui-checkmark polyline {
98
- color: hsl(var(--text-inverted));
98
+ color: var(--text-inverted);
99
99
  }
100
100
  .success .sui-checkmark polyline {
101
- color: hsl(var(--text-dark));
101
+ color: var(--text-dark);
102
102
  }
103
103
  .warning .sui-checkmark polyline {
104
- color: hsl(var(--text-dark));
104
+ color: var(--text-dark);
105
105
  }
106
106
  .danger .sui-checkmark polyline {
107
- color: hsl(var(--text-light));
107
+ color: var(--text-light);
108
108
  }
109
109
  .info .sui-checkmark polyline {
110
- color: hsl(var(--text-light));
110
+ color: var(--text-light);
111
111
  }
112
112
  .mono .sui-checkmark polyline {
113
- color: hsl(var(--text-inverted));
113
+ color: var(--text-inverted);
114
114
  }
115
115
  .sui-checkmark-container:has(.sui-checkbox:checked) {
116
116
  .sui-checkmark polyline {
package/dist/components/Divider/Divider.astro CHANGED
@@ -19,7 +19,7 @@ const { background = 'background-base' } = Astro.props;
19
19
  <hr class="sui-divider-line" />
20
20
  <div
21
21
  class="sui-divider-content"
22
- style={`background-color: hsl(var(--${background})); padding: ${hasDefaultSlot ? '.25rem .5rem;' : '0'}`}
22
+ style={`background-color: var(--${background}); padding: ${hasDefaultSlot ? '.25rem .5rem;' : '0'}`}
23
23
  >
24
24
  <slot />
25
25
  </div>
package/dist/components/Divider/divider.css CHANGED
@@ -11,11 +11,11 @@
11
11
  transform: translate(-50%, 0);
12
12
  width: 100%;
13
13
  height: 1px;
14
- background-color: hsl(var(--border));
14
+ background-color: var(--border);
15
15
  z-index: 1;
16
16
  border: none;
17
17
  }
18
18
  .sui-divider-content {
19
19
  z-index: 2;
20
- color: hsl(var(--text-muted));
20
+ color: var(--text-muted);
21
21
  }
package/dist/components/Dropdown/Dropdown.astro CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
+ import type { AvailableIcons } from 'studiocms:ui/icons';
2
3
  import type { StudioCMSColorway } from '../../utils/colors.js';
3
4
  import Icon from '../Icon/Icon.astro';
4
- import type { HeroIconName } from '../Icon/iconType.js';
5
5
  import './dropdown.css';
6
6
 
7
7
  /**
@@ -27,7 +27,7 @@ interface Option {
27
27
  /**
28
28
  * The icon to display next to the option.
29
29
  */
30
- icon?: HeroIconName;
30
+ icon?: AvailableIcons;
31
31
  /**
32
32
  * The href to link to when the option is clicked. When given, the option will be rendered as an anchor tag.
33
33
  */
package/dist/components/Dropdown/dropdown.css CHANGED
@@ -14,7 +14,7 @@
14
14
  padding: 0;
15
15
  flex-direction: column;
16
16
  border-radius: var(--radius-md);
17
- background-color: hsl(var(--background-step-2));
17
+ background-color: var(--background-step-2);
18
18
  overflow: hidden;
19
19
  left: 0;
20
20
  z-index: 90;
@@ -24,7 +24,7 @@
24
24
  border: none;
25
25
  pointer-events: none;
26
26
  user-select: none;
27
- box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
27
+ box-shadow: 0px 4px 8px var(--shadow);
28
28
  }
29
29
  @keyframes pop-up {
30
30
  0% {
@@ -45,7 +45,7 @@
45
45
  pointer-events: all;
46
46
  top: auto;
47
47
  bottom: auto;
48
- border: 1px solid hsl(var(--border));
48
+ border: 1px solid var(--border);
49
49
  opacity: 1;
50
50
  user-select: all;
51
51
  }
@@ -57,7 +57,7 @@
57
57
  bottom: initial;
58
58
  top: auto;
59
59
  bottom: auto;
60
- border: 1px solid hsl(var(--border));
60
+ border: 1px solid var(--border);
61
61
  opacity: 0;
62
62
  }
63
63
  100% {
@@ -72,7 +72,7 @@
72
72
  }
73
73
  .sui-dropdown.initialized.active {
74
74
  display: flex;
75
- border: 1px solid hsl(var(--border));
75
+ border: 1px solid var(--border);
76
76
  height: auto;
77
77
  pointer-events: all;
78
78
  animation: pop-up .15s ease forwards;
@@ -121,7 +121,7 @@
121
121
  .sui-dropdown-option:hover,
122
122
  .sui-dropdown-option:focus,
123
123
  .sui-dropdown-option.focused {
124
- background-color: hsl(var(--background-step-3));
124
+ background-color: var(--background-step-3);
125
125
  }
126
126
  .sui-dropdown-option.has-href {
127
127
  padding: 0;
@@ -129,53 +129,53 @@
129
129
  .sui-dropdown-link {
130
130
  width: 100%;
131
131
  text-decoration: none;
132
- color: hsl(var(--text-normal));
132
+ color: var(--text-normal);
133
133
  }
134
134
  .sui-dropdown-option.primary {
135
- color: hsl(var(--primary-base));
135
+ color: var(--primary-base);
136
136
  }
137
137
  .sui-dropdown-option.primary:hover {
138
- background-color: hsl(var(--primary-base));
139
- color: hsl(var(--text-inverted));
138
+ background-color: var(--primary-base);
139
+ color: var(--text-inverted);
140
140
  }
141
141
  .sui-dropdown-option.success {
142
- color: hsl(var(--success-base));
142
+ color: var(--success-base);
143
143
  }
144
144
  .sui-dropdown-option.success:hover {
145
- background-color: hsl(var(--success-base));
146
- color: hsl(var(--text-dark));
145
+ background-color: var(--success-base);
146
+ color: var(--text-dark);
147
147
  }
148
148
  .sui-dropdown-option.warning {
149
- color: hsl(var(--warning-base));
149
+ color: var(--warning-base);
150
150
  }
151
151
  .sui-dropdown-option.warning:hover {
152
- background-color: hsl(var(--warning-base));
153
- color: hsl(var(--text-dark));
152
+ background-color: var(--warning-base);
153
+ color: var(--text-dark);
154
154
  }
155
155
  .sui-dropdown-option.danger {
156
- color: hsl(var(--danger-base));
156
+ color: var(--danger-base);
157
157
  }
158
158
  .sui-dropdown-option.danger:hover {
159
- background-color: hsl(var(--danger-base));
160
- color: hsl(var(--text-light));
159
+ background-color: var(--danger-base);
160
+ color: var(--text-light);
161
161
  }
162
162
  .sui-dropdown-option.info {
163
- color: hsl(var(--info-base));
163
+ color: var(--info-base);
164
164
  }
165
165
  .sui-dropdown-option.info:hover {
166
- background-color: hsl(var(--info-base));
167
- color: hsl(var(--text-light));
166
+ background-color: var(--info-base);
167
+ color: var(--text-light);
168
168
  }
169
169
  .sui-dropdown-option.mono {
170
- color: hsl(var(--text-normal));
170
+ color: var(--text-normal);
171
171
  }
172
172
  .sui-dropdown-option.mono:hover {
173
- background-color: hsl(var(--mono-base));
174
- color: hsl(var(--text-inverted));
173
+ background-color: var(--mono-base);
174
+ color: var(--text-inverted);
175
175
  }
176
176
  .sui-dropdown-option.disabled {
177
177
  pointer-events: none;
178
- color: hsl(var(--text-muted));
178
+ color: var(--text-muted);
179
179
  }
180
180
  .sui-dropdown-option.end {
181
181
  justify-content: space-between;
package/dist/components/Footer/footer.css CHANGED
@@ -2,9 +2,9 @@ footer.sui-footer {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 2rem;
5
- background-color: hsl(var(--background-step-1));
5
+ background-color: var(--background-step-1);
6
6
  padding: 2rem 10vw;
7
- color: hsl(var(--text-normal)) !important;
7
+ color: var(--text-normal) !important;
8
8
  }
9
9
  .upper,
10
10
  .lower {
@@ -26,7 +26,7 @@ footer.sui-footer {
26
26
  }
27
27
  .links ul li,
28
28
  .links ul li * {
29
- color: hsl(var(--text-normal)) !important;
29
+ color: var(--text-normal) !important;
30
30
  width: fit-content;
31
31
  }
32
32
  .links ul li:has(a):hover {
@@ -40,7 +40,7 @@ footer.sui-footer {
40
40
  height: 1px;
41
41
  width: 100%;
42
42
  border: none;
43
- background: hsl(var(--border));
43
+ background: var(--border);
44
44
  }
45
45
  .lower {
46
46
  align-items: center;