ui-lab-theme-onyx 0.3.412 → 0.4.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +698 -521
package/styles.css CHANGED
@@ -1,323 +1,388 @@
1
- /* Onyx Theme - Button Styles */
1
+ @reference "tailwindcss";
2
+
3
+ :root {
4
+ --spacing: 0.25rem;
5
+ --spacing-xs: calc(var(--spacing) * 1);
6
+ --spacing-sm: calc(var(--spacing) * 2);
7
+ --spacing-md: calc(var(--spacing) * 4);
8
+ --spacing-lg: calc(var(--spacing) * 6);
9
+ --spacing-xl: calc(var(--spacing) * 8);
10
+
11
+ --text-xs: calc(var(--spacing) * 3);
12
+ --text-sm: calc(var(--spacing) * 3.25);
13
+ --text-base: calc(var(--spacing) * 3.75);
14
+ --text-md: var(--text-base);
15
+ --text-lg: calc(var(--spacing) * 4.5);
16
+ --text-xl: calc(var(--spacing) * 5);
17
+ --text-2xl: calc(var(--spacing) * 6);
18
+ --text-3xl: calc(var(--spacing) * 7);
19
+ --text-4xl: calc(var(--spacing) * 9);
20
+ --text-5xl: calc(var(--spacing) * 11);
21
+ --text-body-size: var(--text-base);
22
+ --leading-sm: 1.25rem;
23
+ --leading-body: 1.6;
24
+
25
+
26
+ --hover-enter-duration: 0ms;
27
+ --hover-leave-duration: 300ms;
28
+ --hover-duration: var(--hover-leave-duration);
29
+ --hover-transition-timing-function: var(--ease-snappy-pop, ease-out);
30
+
31
+ --ring-background: #0f74c5
32
+ }
33
+
34
+ /* Keep theme tokens above component fallbacks even when component CSS is auto-imported later. */
35
+ @layer components.defaults, components.theme;
36
+
37
+ @layer components.theme {
38
+ [data-ring="true"] {
39
+ --ring: var(--ring-background);
40
+ --ring-width: 2px;
41
+ --ring-border: var(--ring);
42
+ --ring-border-visible: var(--ring-border);
43
+ --ring-shadow: 0 0 0 var(--ring-width) var(--ring);
44
+ --ring-z: 10;
45
+ }
2
46
 
3
- @layer components {
4
47
  .button {
5
48
  --background: var(--background-800);
6
- --foreground: var(--foreground-200);
7
49
  --background-border: var(--background-700);
8
- --background-hover: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
9
- --background-hover-border: var(--background-600);
10
- --background-pressed: color-mix(in srgb, var(--background-600) 60%, var(--background-950));
11
- --background-pressed-border: var(--background-600);
12
50
  --focus-visible: var(--accent-400);
13
- font-size: var(--text-xs);
51
+ --foreground: var(--foreground-300);
52
+ --icon-foreground: var(--foreground-400);
14
53
  }
15
54
 
16
- .button.icon { @apply aspect-square }
17
- .button.sm { @apply px-2 py-1.5 text-xs font-semibold }
18
- .button.md { @apply px-3 py-1.5 }
19
- .button.lg { @apply px-10 py-2 }
20
-
21
- .button.primary {
22
- --background: var(--foreground-100);
23
- --foreground: var(--background-900);
24
- --background-border: var(--foreground-200);
25
- --background-hover: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
26
- --background-hover-border: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
27
- --background-pressed: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
28
- --background-pressed-border: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
55
+ .button:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
56
+ --background: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
57
+ --background-border: var(--background-600);
29
58
  }
30
59
 
31
- .button.secondary {
32
- --background: var(--background-900);
33
- --foreground: var(--foreground-200);
34
- --background-border: var(--background-700);
35
- --background-hover: color-mix(in srgb, var(--background-700) 50%, var(--background-950));
36
- --background-hover-border: var(--background-700);
37
- --background-pressed: color-mix(in srgb, var(--background-700) 60%, var(--background-950));
38
- --background-pressed-border: var(--background-700);
60
+ .button[data-pressed="true"]:not([data-disabled="true"]) {
61
+ --background: color-mix(in srgb, var(--background-600) 60%, var(--background-950));
62
+ --background-border: var(--background-600);
39
63
  }
40
64
 
41
- .button.outline {
42
- --background: transparent;
43
- --foreground: var(--foreground-300);
44
- --background-border: var(--background-700);
45
- --background-hover: color-mix(in srgb, var(--background-950) 90%, var(--background-500));
46
- --background-hover-border: var(--background-600);
47
- --background-pressed: color-mix(in srgb, var(--background-900) 90%, var(--background-500));
48
- --background-pressed-border: var(--background-600);
49
- /* Override tailwind *outline* class */
50
- outline-style: unset !important;
51
- }
65
+ .button.sm { @apply px-2.5 py-1; }
66
+ .button.md { @apply px-5 py-2; }
67
+ .button.lg { @apply px-3.5 py-2.5; }
52
68
 
53
- .button.danger {
54
- --background: color-mix(in srgb, var(--danger-500) 15%, transparent);
55
- --foreground: var(--danger-600);
56
- --background-border: transparent;
57
- --focus-visible: var(--danger-400);
58
- --background-hover: color-mix(in srgb, var(--danger-500) 25%, transparent);
59
- --background-hover-border: transparent;
60
- --background-pressed: color-mix(in srgb, var(--danger-500) 30%, transparent);
61
- --background-pressed-border: transparent;
69
+ .button[data-hint="true"] {
70
+ @apply pr-1;
62
71
  }
63
72
 
64
- .button.ghost {
65
- --background: transparent;
66
- --foreground: var(--foreground-300);
67
- --background-border: transparent;
68
- --background-hover: var(--background-800);
69
- --background-hover-border: transparent;
73
+ .gallery > .item {
74
+ --background: var(--background-950);
75
+ --background-border: var(--background-700);
76
+ --focus-visible: var(--accent-400);
70
77
  }
71
78
 
72
- /* Gallery Styles */
79
+ .gallery > .item[data-hovered="true"]:not([data-disabled="true"]) {
80
+ --background-border: var(--background-600);
81
+ }
73
82
 
74
- .gallery.item {
75
- --background: var(--background-950);
76
- --background-border: var(--background-700);
77
- --background-hover-border: var(--background-600);
78
- --background-pressed-border: var(--accent-500);
79
- --focus-visible: var(--accent-500);
83
+ .gallery > .item[data-pressed="true"]:not([data-disabled="true"]) {
84
+ --background-border: var(--accent-500);
80
85
  }
81
86
 
82
- .gallery.view {
87
+ .gallery > .item > .view {
83
88
  --background: var(--background-950);
84
89
  }
85
90
 
86
- .gallery.body {
91
+ .gallery > .item > .body {
87
92
  --foreground: var(--foreground-50);
88
93
  --foreground-muted: var(--foreground-300);
89
94
  }
90
95
 
91
- /* Expand Styles */
96
+ .expand > .trigger {
97
+ --background: transparent;
98
+ --foreground: var(--foreground-50);
99
+ }
92
100
 
93
- .expand {
94
- --trigger-background: transparent;
95
- --trigger-background-hover: var(--background-900);
96
- --trigger-foreground: var(--foreground-50);
97
- --content-background: transparent;
98
- --content-foreground: var(--foreground-300);
101
+ .expand > .trigger:hover:not([data-disabled="true"]),
102
+ .expand > .trigger[data-hovered="true"]:not([data-disabled="true"]) {
103
+ --background: var(--background-900);
99
104
  }
100
105
 
101
- /* Card Styles */
106
+ .expand > .content {
107
+ --background: transparent;
108
+ --closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
109
+ --foreground: var(--foreground-300);
110
+ --open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
111
+ }
102
112
 
103
113
  .card {
104
- --background: var(--background-800);
105
- --border: var(--background-700);
106
- --focus-ring: var(--accent-400);
114
+ --background: var(--background-900);
115
+ --background-border: var(--background-700);
116
+ --focus-visible: var(--accent-400);
117
+ --foreground: var(--foreground-200);
107
118
  }
108
119
 
109
- .card.header {
110
- --border: var(--background-700);
120
+ .card > .footer {
121
+ --background: color-mix(in srgb, var(--background-900) 50%, transparent);
111
122
  }
112
123
 
113
- .card.footer {
114
- --background: color-mix(in srgb, var(--background-900) 50%, transparent);
115
- --border: var(--background-700);
124
+ .list {
125
+ --foreground: var(--foreground-50);
116
126
  }
117
127
 
118
- /* List Styles */
128
+ .list > .header > .title {
129
+ --foreground: var(--foreground-50);
130
+ }
119
131
 
120
- .list {
132
+ .list > .header > .subtitle,
133
+ .list > .description {
134
+ --foreground: var(--foreground-400);
135
+ }
136
+ .list > [role="option"] {
137
+ --background: transparent;
121
138
  --foreground: var(--foreground-50);
122
- --background-hover: color-mix(in srgb, var(--background-500) 6%, transparent);
123
- --background-highlighted: color-mix(in srgb, var(--background-500) 6%, transparent);
124
- --item-background: transparent;
125
- --item-background-hover: var(--background-hover);
126
- --item-background-highlighted: var(--background-highlighted);
127
- --header-title-foreground: var(--foreground-50);
128
- --header-subtitle-foreground: var(--foreground-400);
129
- --desc-foreground: var(--foreground-400);
130
- --action-foreground: var(--foreground-400);
131
- --action-foreground-hover: var(--foreground-50);
132
- --action-background-hover: var(--background-hover);
139
+ }
140
+ .list > [role="option"]:hover:not([data-disabled="true"]),
141
+ .list > [role="option"][data-highlighted="true"]:not([data-disabled="true"]) {
142
+ --background: color-mix(in srgb, var(--background-500) 6%, transparent);
143
+ }
144
+
145
+ .list > [role="option"][data-selected="true"] {
146
+ --background: color-mix(in srgb, var(--background-500) 10%, transparent);
133
147
  }
134
148
 
135
- /* Group Styles */
149
+ .list > [role="option"][data-selected="true"]:hover:not([data-disabled="true"]),
150
+ .list > [role="option"][data-selected="true"][data-highlighted="true"]:not([data-disabled="true"]) {
151
+ --background: color-mix(in srgb, var(--background-500) 14%, transparent);
152
+ }
153
+
154
+ .list > [role="option"] > .actions > .button {
155
+ --background: transparent;
156
+ --foreground: var(--foreground-400);
157
+ }
158
+
159
+ .list > [role="option"] > .actions > .button:hover:not([data-disabled="true"]) {
160
+ --background: color-mix(in srgb, var(--background-500) 6%, transparent);
161
+ --foreground: var(--foreground-50);
162
+ }
136
163
 
137
164
  .group {
138
165
  --background: var(--background-950);
139
166
  --background-border: var(--background-700);
140
- --focus-visible: var(--accent-500);
141
167
  }
142
168
 
143
- .group.button {
144
- --button-selected-background: var(--background-800);
145
- --button-selected-foreground: var(--foreground-100);
169
+ .group > .input,
170
+ .group > .item > .input {
171
+ --background: var(--background-950);
172
+ --background-border: var(--background-600);
173
+ }
174
+
175
+ .group > .divider {
176
+ --background: var(--background-border);
146
177
  }
147
178
 
148
- .group.ghost {
179
+ .group.outline > .input,
180
+ .group.outline > .item > .input {
149
181
  --background: transparent;
150
182
  }
151
183
 
152
- /* Command Styles */
184
+ .group > .button[data-selected="true"],
185
+ .group > .item > .button[data-selected="true"] {
186
+ --foreground: var(--foreground-100);
187
+ }
188
+
189
+ .group > .select > .value,
190
+ .group > .item > .select > .value {
191
+ padding-inline: calc(var(--spacing) * 1.5);
192
+ }
193
+
194
+ .group > .select > .value:has(> .button[data-hovered="true"]:not([data-disabled="true"])),
195
+ .group > .item > .select > .value:has(> .button[data-hovered="true"]:not([data-disabled="true"])) {
196
+ --background: color-mix(in srgb, var(--background-800) 50%, transparent);
197
+ }
198
+
199
+ .group > .select > .value > .button,
200
+ .group > .item > .select > .value > .button {
201
+ height: 100%;
202
+ padding-inline: calc(var(--spacing) * 3) !important;
203
+ border-radius: var(--background-inner-radius) 0 0
204
+ var(--background-inner-radius);
205
+ }
206
+
153
207
  .command {
154
208
  --background: var(--background-900);
155
- --background-hover: var(--background-800);
156
- --background-pressed: var(--background-800);
157
209
  --background-list: var(--background-950);
158
210
  --background-footer: var(--background-800);
159
- --border-color: var(--background-700);
211
+ --border: var(--background-700);
160
212
  --foreground: var(--foreground-300);
161
213
  --foreground-muted: var(--foreground-400);
162
- --overlay: rgb(0 0 0 / 0.2);
214
+ --overlay: rgb(0 0 0 / 20%);
163
215
  --overlay-backdrop: blur(4px);
164
- --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35);
216
+ --shadow: 0 20px 25px -5px rgb(0 0 0 / 35%);
217
+ --leading: var(--leading-sm);
218
+ font-weight: var(--font-weight-body-medium, 500);
165
219
  }
166
220
 
221
+ .command [role="option"] {
222
+ --background: transparent;
223
+ --foreground: var(--foreground-300);
224
+ }
167
225
 
168
- /* Date Styles */
226
+ .command [role="option"]:hover:not([data-disabled="true"]),
227
+ .command [role="option"][data-highlighted="true"]:not([data-disabled="true"]) {
228
+ --background: var(--background-800);
229
+ }
169
230
 
170
231
  .date {
171
232
  --background: var(--background-950);
172
233
  --border: var(--background-700);
173
- --focus-ring: var(--foreground-300);
234
+ --focus-ring: var(--accent-400);
174
235
  }
175
-
176
- .date.date-header {
177
- --header-color: var(--foreground-300);
236
+ .date > .row,
237
+ .date > .grid {
238
+ --background: var(--background-900);
178
239
  }
179
-
180
- .date.date-day-headers {
181
- --day-headers-background: var(--background-900);
240
+ .date > .row > .title {
241
+ --foreground: var(--foreground-300);
182
242
  }
183
-
184
- .date.date-day-header {
185
- --day-header-color: var(--foreground-400);
243
+ .date > .row > .label {
244
+ --foreground: var(--foreground-400);
186
245
  }
187
-
188
- .date.date-nav-button {
189
- --nav-button-color: var(--foreground-400);
190
- --nav-button-background-hover: var(--background-800);
246
+ .date > .row > .button {
247
+ --background: transparent;
248
+ --foreground: var(--foreground-400);
249
+ }
250
+ .date > .row > .button:hover:not([data-disabled="true"]) {
251
+ --background: var(--background-800);
191
252
  }
192
253
 
193
- .date.date-grid {
194
- --grid-background: var(--background-900);
254
+ .date > .day {
255
+ --background: transparent;
256
+ --foreground: var(--foreground-300);
195
257
  }
196
258
 
197
- .date.date-day {
198
- --cell-text: var(--foreground-300);
259
+ .date > .day[data-selected="true"],
260
+ .date > .day[data-today="true"] {
261
+ --background: var(--background-800);
262
+ --foreground: var(--foreground-50);
199
263
  }
200
264
 
201
- .date.date-day[data-selected="true"] {
202
- --cell-background: var(--background-800);
203
- --cell-text: var(--foreground-50);
265
+ .date > .day[data-disabled="true"],
266
+ .date > .day[data-out-of-range="true"] {
267
+ --foreground: var(--foreground-400);
204
268
  }
205
269
 
206
- .date.date-day[data-today="true"] {
207
- --cell-background: var(--background-800);
208
- --cell-text: var(--foreground-50);
270
+ .date > .day:hover:not([data-disabled="true"]):not([data-out-of-range="true"]),
271
+ .date > .day[data-hovered="true"]:not([data-disabled="true"]):not([data-out-of-range="true"]) {
272
+ --background: var(--background-800);
209
273
  }
210
274
 
211
- .date.date-day[data-disabled="true"],
212
- .date.date-day[data-out-of-range="true"] {
213
- --cell-text: var(--foreground-400);
275
+ .table {
276
+ --background: var(--background-950);
277
+ --border: var(--background-700);
278
+ --focus-ring: var(--accent-400);
279
+ --foreground: var(--foreground-300);
280
+ }
281
+ .table > .header,
282
+ .table > .filter {
283
+ --background: var(--background-900);
284
+ }
285
+ .table > .header {
286
+ --foreground: var(--foreground-400);
287
+ }
288
+ .table .row {
289
+ --background: transparent;
290
+ --foreground: var(--foreground-300);
214
291
  }
215
292
 
216
- .date.date-day:hover:not([data-disabled="true"]):not([data-out-of-range="true"]) {
217
- --cell-background: var(--background-800);
293
+ .table .row:hover:not([data-disabled="true"]),
294
+ .table .row[data-selected="true"]:not([data-disabled="true"]) {
295
+ --background: var(--background-800);
218
296
  }
219
297
 
220
- /* Checkbox Styles */
298
+ .table > .filter > .label,
299
+ .table > .empty {
300
+ --foreground: var(--foreground-400);
301
+ }
221
302
 
222
303
  .checkbox {
223
304
  --background: var(--background-900);
224
305
  --background-border: var(--background-700);
225
- --background-hover: color-mix(in srgb, var(--background-500) 10%, transparent);
226
- --background-hover-border: var(--background-600);
227
- --focus-visible: var(--accent-500);
306
+ --helper-error-foreground: var(--danger-600);
307
+ --helper-foreground: var(--foreground-400);
308
+ --ring: var(--accent-500);
228
309
  }
229
310
 
230
- .checkbox[data-selected="true"] {
231
- --background-selected: var(--accent-500);
232
- --background-selected-border: var(--accent-500);
233
- --background-hover: var(--accent-600);
234
- --background-hover-border: var(--accent-400);
311
+ .checkbox:hover:not([data-disabled="true"]),
312
+ .checkbox[data-hovered="true"]:not([data-disabled="true"]) {
313
+ --background: color-mix(in srgb, var(--background-500) 10%, var(--background-900));
314
+ --background-border: var(--background-600);
235
315
  }
236
316
 
237
- .checkbox[data-indeterminate="true"] {
238
- --background-indeterminate: var(--accent-600);
239
- --background-indeterminate-border: var(--accent-600);
240
- --background-hover: var(--accent-500);
241
- --background-hover-border: var(--accent-400);
242
- }
317
+ .checkbox:is([data-selected="true"], [data-indeterminate="true"]) {
318
+ --background: var(--background-900);
319
+ --background-border: var(--background-700);
243
320
 
244
- .checkbox.checkmark,
245
- .checkbox.indeterminate {
246
- --icon-foreground: white;
321
+ &:is(:hover, [data-hovered="true"]):not([data-disabled="true"]) {
322
+ --background: var(--background-800);
323
+ --background-border: var(--background-600);
324
+ }
247
325
  }
248
326
 
249
- .checkbox-root.helper-text {
250
- --helper-text-foreground: currentColor;
251
- --helper-text-error-foreground: white;
327
+ .checkbox > :is(.checkmark, .indeterminate) {
328
+ --foreground: var(--foreground-400);
252
329
  }
253
330
 
254
- /* Color Styles */
255
-
256
331
  .color {
257
332
  --background: color-mix(in srgb, var(--background-800) 30%, transparent);
258
333
  --background-border: var(--background-700);
259
- --focus-visible: var(--accent-500);
334
+ --focus-visible: var(--accent-400);
260
335
  }
261
-
262
- .color.canvas-pointer {
336
+ .color > .canvas > .pointer {
263
337
  --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);
264
338
  }
265
-
266
- .color.hue-thumb,
267
- .color.opacity-thumb {
268
- --thumb-border: white;
269
- --thumb-background: white;
339
+ .color > .controls > .hue > .track > .thumb,
340
+ .color > .controls > .opacity > .track > .thumb {
341
+ --background: white;
342
+ --border: white;
270
343
  }
271
-
272
- .color.opacity-track {
344
+ .color > .controls > .opacity > .track {
273
345
  --checkerboard-dark: var(--background-800);
274
346
  --checkerboard-light: var(--background-700);
275
347
  }
276
-
277
- .color.preview-swatch,
278
- .color.preview {
348
+ .color > .controls > .group > .swatch,
349
+ .color > .controls > .group > .preview {
279
350
  --checkerboard-dark: var(--background-700);
280
351
  --checkerboard-light: var(--background-800);
281
352
  }
282
353
 
283
- /* Label Styles */
284
-
285
354
  .label {
286
- --foreground: var(--foreground-300);
287
355
  --disabled-foreground: var(--foreground-400);
288
356
  --error-foreground: var(--danger-600);
357
+ --foreground: var(--foreground-300);
289
358
  }
290
359
 
291
- .label.required-indicator {
360
+ .label > .text > .required {
292
361
  --required-color: var(--danger-600);
293
362
  }
294
363
 
295
- .label.helper-text {
364
+ .label > .helper {
296
365
  --helper-color: var(--foreground-400);
297
366
  }
298
367
 
299
- .label.helper-text[data-error] {
368
+ .label > .helper[data-error] {
300
369
  --helper-error-color: var(--danger-600);
301
370
  }
302
371
 
303
- /* Input Styles */
304
-
305
372
  .input {
306
373
  --background: var(--background-950);
307
- --foreground: var(--foreground-50);
308
- --placeholder: var(--foreground-400);
309
374
  --background-border: var(--background-700);
310
- --background-focused-border: var(--accent-500);
311
- --focus-visible: var(--accent-500);
312
375
  --disabled-background: var(--background-900);
313
376
  --disabled-foreground: var(--foreground-400);
314
- font-size: var(--text-xs);
315
- font-weight: var(--font-weight-medium)
377
+ --foreground: var(--foreground-300);
378
+ --placeholder: color-mix(in srgb, var(--foreground-400) 80%, transparent);
379
+ --ring: var(--accent-500);
380
+ --ring-border: var(--ring);
381
+ --ring-border-visible: var(--ring-border);
316
382
  }
317
383
 
318
384
  .input[data-error] {
319
- --background-focused-border: var(--danger-600);
320
- --focus-visible: var(--danger-600);
385
+ --ring: var(--danger-600);
321
386
  }
322
387
 
323
388
  .input[data-variant="ghost"] {
@@ -329,563 +394,675 @@
329
394
  box-shadow: none;
330
395
  }
331
396
 
332
- .input.icon-wrapper {
333
- color: var(--foreground-400);
397
+ .input > .icon {
398
+ --foreground: var(--foreground-300);
334
399
  }
335
400
 
336
- .input.spin-button {
337
- --controls-color: var(--foreground-400);
338
- --controls-hover-background: var(--background-800);
339
- --controls-hover-color: var(--foreground-200);
340
- --controls-active-background: var(--background-700);
341
- --controls-active-color: var(--accent-500);
401
+ .input > .stepper {
402
+ --active-background: var(--background-700);
403
+ --active-color: var(--foreground-100);
404
+ --foreground: var(--foreground-400);
405
+ --hover-background: var(--background-800);
406
+ --hover-color: var(--foreground-200);
342
407
  }
343
408
 
344
- /* Radio Styles */
345
-
346
409
  .radio {
347
- --background: var(--background-800);
410
+ --background: var(--background-900);
348
411
  --background-border: var(--background-700);
349
- --background-selected: var(--accent-500);
350
- --background-selected-border: var(--accent-500);
351
- --background-hover: var(--accent-500);
352
- --background-hover-border: var(--background-500);
353
- --background-error-border: var(--danger-500);
354
- --dot-color: transparent;
355
- --dot-selected-color: var(--accent-50);
356
- --focus-visible: rgb(59, 130, 246);
412
+ --focus-visible: var(--accent-400);
357
413
  }
358
-
359
- .radio.radio-label {
360
- --foreground: var(--foreground-300);
361
- --foreground-disabled: var(--foreground-400);
414
+ .radio.outline {
415
+ --background: transparent;
362
416
  }
363
417
 
364
- .radio.radio-description {
365
- --foreground: var(--foreground-400);
366
- --foreground-error: var(--danger-500);
418
+ .radio:hover:not([data-disabled="true"]),
419
+ .radio[data-hovered="true"]:not([data-disabled="true"]) {
420
+ --background: color-mix(in srgb, var(--background-500) 10%, var(--background-900));
421
+ --background-border: var(--background-600);
367
422
  }
368
423
 
369
- .radio.helper-text {
370
- --foreground: var(--foreground-400);
371
- --foreground-error: var(--danger-500);
424
+ .radio[data-selected="true"] {
425
+ --background: var(--background-900);
426
+ --background-border: var(--background-700);
372
427
  }
373
428
 
374
- .radio.primary[data-selected="true"] {
375
- --background-selected: var(--accent-500);
376
- --background-selected-border: var(--accent-500);
429
+ .radio.outline[data-selected="true"] {
430
+ --background: var(--background-600);
431
+ --background-border: var(--background-600);
377
432
  }
378
433
 
379
- .radio.secondary {
434
+ .radio[data-selected="true"]:hover:not([data-disabled="true"]),
435
+ .radio[data-selected="true"][data-hovered="true"]:not([data-disabled="true"]) {
380
436
  --background: var(--background-800);
381
- --background-border: var(--background-700);
437
+ --background-border: var(--background-600);
382
438
  }
383
439
 
384
- .radio.outline {
385
- --background: transparent;
386
- --background-border: var(--background-700);
440
+ .radio[data-error="true"]:not([data-selected="true"]) {
441
+ --background-border: var(--danger-600);
387
442
  }
388
-
389
- .radio.outline[data-selected="true"] {
390
- --background-selected: color-mix(in srgb, var(--accent-500) 15%, transparent);
391
- --background-selected-border: var(--accent-500);
392
- --dot-selected-color: var(--accent-500);
443
+ .radio > .dot {
444
+ --background: var(--foreground-300);
445
+ }
446
+ .radio[data-selected="true"] > .dot {
447
+ --background: var(--foreground-400);
448
+ }
449
+ .radio.outline[data-selected="true"] > .dot {
450
+ --background: var(--accent-500);
451
+ }
452
+ .radio > .label {
453
+ --foreground: var(--foreground-300);
454
+ }
455
+ .radio > .label[data-disabled="true"] {
456
+ --foreground: var(--foreground-400);
457
+ }
458
+ .radio > .description,
459
+ .radio > .helper {
460
+ --foreground: var(--foreground-400);
461
+ }
462
+ .radio > .description[data-error="true"],
463
+ .radio > .helper[data-error="true"] {
464
+ --foreground: var(--danger-600);
393
465
  }
394
-
395
- /* Select Styles */
396
466
 
397
467
  .select {
398
- --background: color-mix(in srgb, var(--background-800) 50%, transparent);
399
- --foreground: var(--foreground-300);
468
+ --background: color-mix(in srgb, var(--background-800) 30%, transparent);
400
469
  --background-border: var(--background-700);
401
470
  --focus-visible: var(--accent-400);
402
471
  --focus-visible-background: var(--background-950);
403
- --background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
404
- --background-pressed: color-mix(in srgb, var(--background-600) 50%, transparent);
405
- --foreground-size: var(--text-xs)
472
+ --foreground: var(--foreground-300);
473
+ --size: var(--text-sm);
474
+ --trigger-background-hover: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
475
+ }
476
+
477
+ .select[data-pressed="true"]:not([data-disabled]) {
478
+ --background: color-mix(in srgb, var(--background-600) 50%, transparent);
479
+ }
480
+
481
+ .select[data-open="true"] {
482
+ --background: color-mix(in srgb, var(--background-800) 50%, transparent);
406
483
  }
407
484
 
408
485
  .select.ghost {
409
486
  --background: transparent;
410
487
  --background-border: transparent;
411
- --background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
412
- --background-pressed: color-mix(in srgb, var(--background-700) 50%, transparent);
488
+ --trigger-background-hover: var(--background-800);
413
489
  }
414
490
 
415
- .select.content,
416
- .select.sub-content {
417
- --background: var(--background-900);
418
- --background-border: var(--background-700);
491
+ .select.ghost[data-pressed="true"]:not([data-disabled]),
492
+ .select.ghost[data-open="true"] {
493
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
419
494
  }
420
495
 
421
- .select.item,
422
- .select.sub-trigger {
496
+ .select > :is(.content, .sub-content) {
497
+ --background: var(--background-800);
498
+ --background-border: var(--background-600);
499
+ }
500
+
501
+ .select > :is(.content, .sub-content) [role="option"]:is(.item, .trigger) {
502
+ --background: transparent;
423
503
  --foreground: var(--foreground-300);
424
504
  --foreground-muted: var(--foreground-400);
425
505
  --icon-foreground: var(--foreground-300);
426
506
  --indicator-foreground: var(--accent-300);
427
- --background-highlighted: color-mix(in srgb, var(--background-700) 50%, transparent);
428
- --item-background: transparent;
429
- --item-background-hover: var(--background-highlighted);
430
- --item-background-highlighted: var(--background-highlighted);
431
- }
432
507
 
433
- .select.placeholder {
434
- --foreground-muted: var(--foreground-400);
508
+ &:is([data-highlighted="true"], [data-open="true"]) {
509
+ --background: color-mix(in srgb, var(--background-500) 15%, transparent);
510
+ }
435
511
  }
436
512
 
437
- .select.search-trigger {
438
- --focus-visible: var(--accent-500);
513
+ .select > .placeholder {
514
+ --foreground-muted: var(--foreground-400);
439
515
  }
440
516
 
441
- /* Slider Styles */
442
-
443
- .slider.track {
444
- --track-background: var(--background-800);
517
+ .slider > .track {
518
+ --background: var(--background-900);
445
519
  }
446
520
 
447
- .slider.range {
448
- --range-background: color-mix(in srgb, var(--accent-500) 60%, transparent);
449
- --range-disabled-background: var(--background-600);
521
+ .slider > .track > .thumb {
522
+ --background: var(--foreground-400);
523
+ --background-border: color-mix(in srgb, var(--background-500) 40%, transparent);
524
+ --disabled-background: var(--background-500);
525
+ --focus-visible: color-mix(in srgb, var(--background-500) 40%, transparent);
526
+ --radius: calc(var(--spacing) * 0.6);
450
527
  }
451
528
 
452
- .slider.thumb {
453
- --thumb-background: var(--accent-500);
454
- --thumb-focused-background: var(--accent-400);
455
- --thumb-disabled-background: var(--background-500);
456
- --focus-visible: color-mix(in srgb, var(--accent-500) 40%, transparent);
529
+ .slider > .track > .range {
530
+ --background: color-mix(in srgb, var(--background-500) 20%, transparent);
531
+ --disabled-background: var(--background-600);
457
532
  }
458
533
 
459
- /* Switch Styles */
460
-
461
534
  .switch {
462
535
  --background: var(--background-700);
463
- --background-active: color-mix(in srgb, var(--accent-500) 80%, var(--background-500));
536
+ --background-border: var(--background-600);
537
+ --focus-visible: var(--accent-400);
464
538
  --foreground: var(--background-500);
465
- --foreground-active: white;
539
+ --transition-duration: 120ms;
540
+ --transition-easing: linear;
541
+ }
466
542
 
467
- --border-color: var(--background-600);
468
- --border-color-hover: transparent;
469
- --border-color-pressed: transparent;
470
- --border-color-active: transparent;
543
+ .switch[data-selected="true"] {
544
+ --background: color-mix(in srgb, var(--background-500) 90%, transparent);
545
+ --background-border: color-mix(in srgb, var(--background-500) 20%, transparent);
546
+ --foreground: color-mix(in srgb, var(--foreground-400) 20%, white);
547
+ }
471
548
 
472
- --focus-visible: 0 0 0 3px color-mix(in srgb, var(--accent-500) 40%, transparent);
549
+ .switch[data-selected="true"]:active:not([data-disabled="true"]),
550
+ .switch[data-selected="true"][data-hovered="true"]:not([data-disabled="true"]) {
551
+ --background-border: color-mix(in srgb, var(--background-500) 30%, transparent);
473
552
  }
474
553
 
475
- /* Textarea Styles */
554
+ .switch[data-selected="true"]:active:not([data-disabled="true"]) {
555
+ --background: var(--background-600);
556
+ }
476
557
 
477
558
  .textarea {
478
559
  --background: var(--background-950);
479
- --foreground: var(--foreground-50);
480
- --placeholder: var(--foreground-400);
481
560
  --background-border: var(--background-700);
482
- --background-focused-border: var(--accent-500);
483
- --focus-visible: var(--accent-500);
484
- --background-disabled: var(--background-900);
485
- --foreground-disabled: var(--foreground-400);
561
+ --disabled-opacity: 0.6;
562
+ --foreground: var(--foreground-300);
563
+ --placeholder: color-mix(in srgb, var(--foreground-400) 80%, transparent);
564
+ }
565
+
566
+ .textarea[data-disabled="true"] {
567
+ --background: var(--background-900);
568
+ --foreground: var(--foreground-400);
486
569
  }
487
570
 
488
- .textarea[data-error] {
489
- --background-error-border: var(--danger-600);
490
- --background-error-focused-border: var(--danger-600);
491
- --focus-visible: var(--danger-600);
571
+ .textarea[data-error="true"] {
572
+ --background-border: var(--danger-600);
492
573
  }
493
574
 
494
- .textarea.scroll-wrapper {
575
+ .textarea > .scope > .surface > .scroll {
495
576
  --background: var(--background-950);
496
577
  --background-border: var(--background-700);
497
- --background-focused-border: var(--accent-500);
498
- --focus-visible: var(--accent-500);
499
- --background-disabled: var(--background-900);
578
+ --disabled-opacity: 0.6;
500
579
  }
501
580
 
502
- .textarea.scroll-wrapper[data-error] {
503
- --background-error-border: var(--danger-600);
504
- --background-error-focused-border: var(--danger-600);
505
- --focus-visible: var(--danger-600);
581
+ .textarea > .scope > .surface > .handle {
582
+ --background: color-mix(in srgb, var(--foreground-400) 72%, transparent);
506
583
  }
507
584
 
508
- .textarea.resize-handle {
509
- --handle-background: color-mix(in srgb, var(--foreground-400) 72%, transparent);
510
- --handle-hover-background: color-mix(in srgb, var(--foreground-200) 90%, transparent);
585
+ .textarea > .scope > .surface > .handle:hover {
586
+ --background: color-mix(in srgb, var(--foreground-200) 90%, transparent);
511
587
  }
512
588
 
513
- .textarea.character-count {
514
- --count-foreground: var(--foreground-400);
515
- --count-over-limit-foreground: var(--danger-600);
589
+ .textarea > .scope > .count {
590
+ --foreground: var(--foreground-400);
591
+ --foreground-error: var(--danger-600);
516
592
  }
517
593
 
518
- /* Banner Styles */
519
-
520
594
  .banner {
521
595
  --background: var(--background-900);
522
- --foreground: var(--info-50);
523
596
  --border: var(--info-600);
597
+ --foreground: var(--info-50);
524
598
  }
525
599
 
526
- .banner.note {
527
- --background: var(--background-900);
600
+ .badge {
601
+ --background: var(--background-800);
602
+ --background-border: var(--background-600);
528
603
  --foreground: var(--foreground-200);
529
- --border: var(--background-700);
530
- --icon-color: var(--background-500);
531
604
  }
532
605
 
533
- .banner.info {
534
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
535
- --foreground: var(--foreground-200);
536
- --border: color-mix(in srgb, var(--info-600) 30%, var(--background-900));
537
- --icon-color: var(--info-600);
606
+ .badge.sm {
607
+ @apply px-1.5 py-0.5;
538
608
  }
539
609
 
540
- .banner.success {
541
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
542
- --foreground: var(--foreground-200);
543
- --border: color-mix(in srgb, var(--success-600) 30%, var(--background-900));
544
- --icon-color: var(--success-600);
610
+ .badge.md {
611
+ @apply px-2 py-1.5;
545
612
  }
546
613
 
547
- .banner.warning {
548
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
549
- --foreground: var(--foreground-200);
550
- --border: color-mix(in srgb, var(--warning-600) 30%, var(--background-900));
551
- --icon-color: var(--warning-600);
614
+ .badge.lg {
615
+ @apply px-3 py-1.5;
552
616
  }
553
617
 
554
- .banner.danger {
555
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
618
+ .badge > .dismiss {
619
+ --focus-visible: var(--accent-400);
620
+ --foreground: var(--foreground-400);
621
+ }
622
+
623
+ .badge > .dismiss[data-hovered="true"] {
624
+ --background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
625
+ }
626
+
627
+ .badge > .dismiss[data-pressed="true"] {
628
+ --background: var(--background-700);
629
+ }
630
+
631
+ .popover > .content,
632
+ .tooltip > .content {
633
+ --background: var(--background-900);
634
+ --background-border: var(--background-700);
556
635
  --foreground: var(--foreground-200);
557
- --border: color-mix(in srgb, var(--danger-600) 30%, var(--background-900));
558
- --icon-color: var(--danger-600);
559
636
  }
560
637
 
561
- /* Badge Styles */
638
+ .tooltip > .content {
639
+ font-family: var(--font-body);
640
+ font-size: var(--text-xs);
641
+ font-weight: var(--font-weight-body-medium, 500);
642
+ letter-spacing: normal;
643
+ line-height: 1rem;
644
+ }
562
645
 
563
- .badge.sm {
564
- @apply px-1.5 py-0.5 font-semibold
646
+ .progress > .track {
647
+ --background: color-mix(in srgb, var(--background-500) 20%, transparent);
648
+ --radius: calc(var(--spacing) * 0.8)
565
649
  }
566
650
 
567
- .badge.md {
568
- @apply px-2 py-1.5
651
+ .progress > .label {
652
+ --foreground: var(--foreground-400);
569
653
  }
570
654
 
571
- .badge.lg {
572
- @apply px-3 py-1.5
655
+ .progress > .range {
656
+ --radius: calc(var(--spacing) * 0.8)
573
657
  }
574
658
 
575
- .badge {
576
- --background: var(--background-800);
577
- --foreground: var(--foreground-200);
659
+ .progress > .track > .thumb {
660
+ --background: var(--foreground-400);
661
+ --radius: calc(var(--spacing) * 0.6);
662
+ }
663
+
664
+ .toast {
665
+ --background: var(--background-900);
578
666
  --background-border: var(--background-600);
579
- font-weight: var(--font-weight-semibold);
580
- font-size: var(--text-xs)
667
+ --background-shadow: 0 10px 25px -5px rgb(0 0 0 / 10%);
668
+ --foreground: var(--foreground-200);
581
669
  }
582
670
 
583
- .badge.dismiss {
584
- --dismiss-foreground: var(--foreground-400);
585
- --dismiss-hover-background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
586
- --dismiss-pressed-background: var(--background-700);
587
- --dismiss-focus-visible: var(--accent-400);
671
+ .toast > .icon > .glyph {
672
+ --foreground: currentColor;
588
673
  }
589
674
 
590
- .badge.default {
591
- --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
592
- --foreground: var(--foreground-200);
593
- --background-border: var(--background-700);
675
+ .toast > .content > .title {
676
+ --foreground: var(--foreground-100);
594
677
  }
595
678
 
596
- .badge.secondary {
597
- --background: color-mix(in srgb, var(--background-900) 90%, var(--background-600));
679
+ .toast > .content > .description {
598
680
  --foreground: var(--foreground-300);
599
- --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);
600
681
  }
601
682
 
602
- .badge.success {
603
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
604
- --foreground: var(--success-600);
605
- --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
683
+ .toast > .close {
684
+ --background: transparent;
685
+ --focus-visible: var(--accent-400);
686
+ --foreground: currentColor;
606
687
  }
607
688
 
608
- .badge.warning {
609
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
610
- --foreground: var(--warning-600);
611
- --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
689
+ .menu > :is(.content, .sub-content) {
690
+ --background: var(--background-700);
691
+ --background-border: var(--background-600);
692
+ --closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
693
+ --foreground: var(--foreground-300);
694
+ --foreground-muted: var(--foreground-400);
695
+ --open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
612
696
  }
613
697
 
614
- .badge.danger {
615
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
616
- --foreground: var(--danger-600);
617
- --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
698
+ .menu > .trigger {
699
+ --background: transparent;
700
+ --focus-visible: var(--accent-400);
701
+ --foreground: var(--foreground-300);
618
702
  }
619
703
 
620
- .badge.info {
621
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
622
- --foreground: var(--info-600);
623
- --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
704
+ .menu > .trigger[data-hovered="true"]:not([data-disabled="true"]) {
705
+ --background: var(--background-800);
624
706
  }
625
707
 
626
- /* Popover Styles */
708
+ .menu > .trigger[data-pressed="true"]:not([data-disabled="true"]) {
709
+ --background: var(--background-700);
710
+ }
627
711
 
628
- .popover.content {
629
- --popover-fill: var(--background-900);
630
- --popover-border-color: var(--background-700);
712
+ .menu > :is(.content, .sub-content) [role^="menuitem"]:is(.item, .trigger) {
713
+ --background: transparent;
714
+ --foreground: var(--foreground-300);
715
+ --foreground-muted: var(--foreground-400);
716
+ --icon-foreground: var(--foreground-300);
717
+ --indicator-foreground: var(--accent-300);
718
+
719
+ &:is([data-highlighted="true"], [data-focused="true"], [data-open="true"]) {
720
+ --background: color-mix(in srgb, var(--background-500) 15%, transparent);
721
+ }
631
722
  }
632
723
 
633
- .popover.frame {
634
- --foreground: var(--foreground-200);
724
+ .menu > :is(.content, .sub-content) [role^="menuitem"].item[data-disabled="true"] {
725
+ --foreground: var(--foreground-400);
726
+ opacity: 0.5;
635
727
  }
636
728
 
637
- /* Tooltip Styles */
729
+ .menu > :is(.content, .sub-content) :is(.indicator, .label, .shortcut) {
730
+ --foreground: var(--foreground-400);
731
+ }
638
732
 
639
- .tooltip.content {
640
- --background: var(--background-900);
641
- --background-hover: var(--background-900);
642
- --background-border: var(--background-700);
643
- font-size: var(--text-xs);
644
- font-weight: var(--font-weight-medium);
733
+ .path > .link {
734
+ --background: transparent;
735
+ --disabled-opacity: 0.6;
736
+ --focus-visible: var(--accent-400);
737
+ --foreground: var(--foreground-300);
645
738
  }
646
739
 
647
- .tooltip.frame {
740
+ .path > .link[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
741
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
648
742
  --foreground: var(--foreground-200);
649
743
  }
650
744
 
651
- /* Progress Styles */
745
+ .path > .link[data-pressed="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
746
+ --background: color-mix(in srgb, var(--background-700) 70%, transparent);
747
+ }
652
748
 
653
- .progress {
654
- --background: var(--background-700);
655
- --fill-background: color-mix(in srgb, var(--accent-600) 60%, var(--background-500));
749
+ .path > .link[data-selected="true"] {
750
+ --foreground: var(--foreground-100);
656
751
  }
657
752
 
658
- .progress.label-row {
753
+ .path > .separator,
754
+ .path > .item {
659
755
  --foreground: var(--foreground-400);
660
756
  }
661
757
 
662
- .progress[data-variant="default"] .fill {
663
- --fill-background: var(--accent-500);
758
+ .tabs > .indicator {
759
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
664
760
  }
665
761
 
666
- .progress[data-variant="success"] .fill {
667
- --fill-background: var(--success-500);
762
+ .tabs > .indicator.underline {
763
+ --background: var(--accent-500);
764
+ }
765
+ .tabs > .list.underline[data-orientation="vertical"] {
766
+ --border: var(--background-700);
668
767
  }
669
768
 
670
- .progress[data-variant="warning"] .fill {
671
- --fill-background: var(--warning-500);
769
+ .tabs > .trigger {
770
+ --background: transparent;
771
+ --foreground: var(--foreground-300);
772
+ --underline-border: var(--accent-500);
773
+ font-family: var(--font-body);
774
+ font-size: var(--text-md);
775
+ font-weight: var(--font-weight-body-medium, 500);
776
+ letter-spacing: normal;
777
+ line-height: var(--leading-sm);
672
778
  }
673
779
 
674
- .progress[data-variant="error"] .fill {
675
- --fill-background: var(--danger-500);
780
+ .tabs > .trigger[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
781
+ --background: var(--background-900);
782
+ --foreground: var(--foreground-200);
676
783
  }
677
784
 
678
- /* Toast Styles */
785
+ .tabs > .trigger[data-pressed="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
786
+ --background: var(--background-800);
787
+ --foreground: var(--foreground-50);
788
+ }
789
+ .tabs > .trigger[data-selected="true"] {
790
+ --foreground: var(--foreground-50);
791
+ }
792
+ .tabs > .content {
793
+ --focus-visible: var(--accent-400);
794
+ }
679
795
 
680
- .toast {
681
- --background: var(--background-900);
796
+ .anchor {
797
+ @apply py-1.5;
798
+ --focus-ring: var(--background-600);
682
799
  --foreground: var(--foreground-200);
683
- --background-border: var(--background-600);
684
- --background-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
800
+ --underline-background: var(--background-600);
801
+ font-family: var(--font-body);
802
+ font-size: var(--text-sm);
803
+ font-weight: var(--font-weight-body-medium, 500);
804
+ letter-spacing: normal;
805
+ line-height: var(--leading-sm);
806
+ }
807
+
808
+ .anchor[data-hovered="true"]:not([data-disabled="true"]) {
809
+ --underline-background: var(--foreground-400);
685
810
  }
686
811
 
687
- .toast.default {
812
+ .modal {
688
813
  --background: var(--background-900);
689
- --foreground: var(--foreground-200);
690
- --background-border: var(--background-600);
814
+ --background-border: var(--background-700);
815
+ --focus-visible: var(--accent-400);
816
+ --foreground: var(--foreground-300);
691
817
  }
692
818
 
693
- .toast.danger {
694
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
695
- --foreground: var(--foreground-200);
696
- --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
819
+ .modal > .panel > .header > .title {
820
+ --foreground: var(--foreground-100);
697
821
  }
698
822
 
699
- .toast.success {
700
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
701
- --foreground: var(--foreground-200);
702
- --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
823
+ .modal > .panel > .header > .close {
824
+ --focus-visible: var(--accent-400);
825
+ --foreground: var(--foreground-400);
703
826
  }
704
827
 
705
- .toast.info {
706
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
828
+ .modal > .panel > .header > .close[data-hovered="true"]:not([data-disabled="true"]) {
707
829
  --foreground: var(--foreground-200);
708
- --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
709
830
  }
710
831
 
711
- .toast.warning {
712
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
713
- --foreground: var(--foreground-200);
714
- --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
832
+ .modal > .panel > .footer {
833
+ --background: var(--background-900);
715
834
  }
716
835
 
717
- .toast.icon {
718
- --foreground: currentColor;
836
+ .modal > .backdrop {
837
+ --background: rgb(0 0 0 / 50%);
719
838
  }
720
839
 
721
- .toast.danger.icon {
722
- --foreground: var(--danger-600);
840
+ .divider {
841
+ --background: var(--background-700);
723
842
  }
724
843
 
725
- .toast.success.icon {
726
- --foreground: var(--success-600);
844
+ .skeleton {
845
+ --background: var(--background-800);
846
+ --radius: var(--radius-sm, 0.375rem);
727
847
  }
728
848
 
729
- .toast.info.icon {
730
- --foreground: var(--info-600);
849
+ .skeleton-text {
850
+ --last-line-width: 70%;
731
851
  }
732
852
 
733
- .toast.warning.icon {
734
- --foreground: var(--warning-600);
853
+ .skeleton-text[data-size="body"] {
854
+ --row-height: 0.75rem;
855
+ --gap: 0.375rem;
735
856
  }
736
857
 
737
- .toast.title {
738
- --foreground: var(--foreground-100);
858
+ .skeleton-text[data-size="heading"] {
859
+ --row-height: 1.25rem;
860
+ --gap: 0.5rem;
739
861
  }
740
862
 
741
- .toast.description {
742
- --foreground: var(--foreground-300);
863
+ .skeleton-text[data-size="display"] {
864
+ --row-height: 2rem;
865
+ --gap: 0.625rem;
743
866
  }
744
867
 
745
- .toast.close {
746
- --foreground: currentColor;
747
- --background-hover: transparent;
748
- --focus-visible: var(--accent-400);
868
+ .skeleton-image {
869
+ --ratio: 16 / 9;
749
870
  }
750
871
 
751
- .toast.danger.close {
752
- --foreground: color-mix(in srgb, var(--danger-600) 60%, var(--foreground-50));
753
- --background-hover: color-mix(in srgb, var(--danger-500) 20%, var(--background-900));
754
- --focus-visible: var(--danger-400);
872
+ [data-skeleton-animate] {
873
+ --animation: skeleton-pulse 1.6s var(--ease-gentle-ease, ease-in-out) infinite;
755
874
  }
756
875
 
757
- .toast.success.close {
758
- --foreground: color-mix(in srgb, var(--success-600) 60%, var(--foreground-50));
759
- --background-hover: color-mix(in srgb, var(--success-500) 20%, var(--background-900));
760
- --focus-visible: var(--success-400);
876
+ @keyframes skeleton-pulse {
877
+ 0%, 100% { opacity: 1; }
878
+ 50% { opacity: 0.48; }
761
879
  }
762
880
 
763
- .toast.info.close {
764
- --foreground: color-mix(in srgb, var(--info-600) 60%, var(--foreground-50));
765
- --background-hover: color-mix(in srgb, var(--info-500) 20%, var(--background-900));
766
- --focus-visible: var(--info-400);
881
+ .scroll > .track {
882
+ --background: transparent;
767
883
  }
768
884
 
769
- .toast.warning.close {
770
- --foreground: color-mix(in srgb, var(--warning-600) 60%, var(--foreground-50));
771
- --background-hover: color-mix(in srgb, var(--warning-500) 20%, var(--background-900));
772
- --focus-visible: var(--warning-400);
885
+ .scroll > .track > .thumb {
886
+ --background: var(--background-600);
773
887
  }
774
888
 
775
- /* Menu Styles */
889
+ .scroll > .track > .thumb:hover {
890
+ --background: var(--background-500);
891
+ }
776
892
 
777
- .menu.content,
778
- .menu.sub-content {
779
- --background: var(--background-900);
893
+ .scroll[data-pressed="true"] > .track > .thumb {
894
+ --background: var(--foreground-400);
895
+ }
896
+ }
897
+
898
+ @layer utilities {
899
+ .button.primary {
900
+ --background: var(--foreground-100);
901
+ --background-border: var(--foreground-100);
902
+ --foreground: var(--background-900);
903
+ --icon-foreground: var(--background-700);
904
+ }
905
+
906
+ .button.primary:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
907
+ --background: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
908
+ --background-border: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
909
+ }
910
+
911
+ .button.primary[data-pressed="true"]:not([data-disabled="true"]) {
912
+ --background: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
913
+ --background-border: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
914
+ }
915
+
916
+ .button.secondary {
917
+ --background: color-mix(in srgb, var(--background-900) 50%, transparent);
918
+ --background-border: var(--background-800);
919
+ --foreground: var(--foreground-300);
920
+ }
921
+
922
+ .button.secondary:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
923
+ --background: var(--background-700);
780
924
  --background-border: var(--background-700);
781
- --content-open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
782
- --content-closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
783
- font-size: var(--text-xs)
784
925
  }
785
926
 
786
- .menu.trigger {
787
- --background-pressed: var(--background-700);
927
+ .button.secondary[data-pressed="true"]:not([data-disabled="true"]) {
928
+ --background: color-mix(in srgb, var(--background-700) 60%, var(--background-950));
929
+ --background-border: var(--background-700);
788
930
  }
789
931
 
790
- .menu.item,
791
- .menu.checkbox-item,
792
- .menu.radio-item,
793
- .menu.sub-trigger {
932
+ .button.ghost {
933
+ --background: transparent;
934
+ --background-border: transparent;
794
935
  --foreground: var(--foreground-300);
795
- --background-focused: color-mix(in srgb, var(--background-700) 50%, transparent);
796
936
  }
797
937
 
798
- .menu.item-indicator {
799
- --indicator-foreground: var(--accent-300);
938
+ .button.ghost:is([data-hovered="true"], [data-pressed="true"], [data-selected="true"]):not([data-disabled="true"]) {
939
+ --background: var(--background-800);
800
940
  }
801
941
 
802
- .menu.label,
803
- .menu.shortcut {
804
- --foreground-muted: var(--foreground-400);
942
+ .default {
943
+ --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
944
+ --background-border: var(--background-700);
945
+ --focus-visible: var(--accent-400);
946
+ --foreground: var(--foreground-200);
805
947
  }
806
948
 
807
- /* Tabs Styles */
949
+ .default:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
950
+ --background: color-mix(in srgb, var(--background-500) 20%, var(--background-900));
951
+ }
808
952
 
809
- .tabs.indicator {
810
- --background: color-mix(in srgb, var(--background-700) 50%, transparent);
953
+ .default[data-pressed="true"]:not([data-disabled="true"]) {
954
+ --background: color-mix(in srgb, var(--background-500) 30%, var(--background-900));
811
955
  }
812
956
 
813
- .tabs.indicator.underline {
814
- --background: var(--accent-500);
957
+ .danger, .success, .warning, .info {
958
+ --focus-visible: var(--accent-400);
815
959
  }
816
960
 
817
- .tabs.list[data-variant="underline"][data-orientation="vertical"] {
818
- --border-color: var(--background-700);
961
+ .danger {
962
+ --background: color-mix(in srgb, var(--danger-500) 15%, transparent);
963
+ --background-border: transparent;
964
+ --focus-visible: var(--danger-400);
965
+ --foreground: var(--danger-600);
966
+ --icon-foreground: var(--danger-700);
819
967
  }
820
968
 
821
- .tabs.trigger {
822
- --background: transparent;
823
- --background-hover: var(--background-900);
824
- --background-pressed: var(--background-800);
825
- --background-selected: transparent;
826
- --background-focused: var(--background-800);
827
- --foreground: var(--foreground-400);
828
- --foreground-hover: var(--foreground-200);
829
- --foreground-pressed: var(--foreground-50);
830
- --foreground-selected: var(--foreground-50);
831
- --underline-border: var(--accent-500);
832
- font-size: var(--text-xs);
969
+ .danger[data-hovered="true"]:not([data-disabled="true"]),
970
+ .danger[data-pressed="true"]:not([data-disabled="true"]) {
971
+ --background: color-mix(in srgb, var(--danger-500) 20%, transparent);
972
+ --background-border: transparent;
833
973
  }
834
974
 
835
- .tabs.content {
836
- --focus-visible: var(--accent-500);
975
+ .success {
976
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
977
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
978
+ --focus-visible: var(--success-400);
979
+ --foreground: var(--success-600);
980
+ --icon-foreground: var(--success-700);
837
981
  }
838
982
 
839
- /* Anchor Styles */
983
+ .success[data-hovered="true"]:not([data-disabled="true"]),
984
+ .success[data-pressed="true"]:not([data-disabled="true"]) {
985
+ --background-border: var(--background-600);
986
+ }
840
987
 
841
- .anchor.trigger {
842
- --foreground: var(--foreground-200);
843
- --underline-background: var(--background-600);
844
- --underline-background-hover: var(--foreground-400);
845
- --focus-ring: var(--color-background-600);
988
+ .warning {
989
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
990
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
991
+ --focus-visible: var(--warning-400);
992
+ --foreground: var(--warning-600);
993
+ --icon-foreground: var(--warning-700);
994
+ }
995
+
996
+ .warning[data-hovered="true"]:not([data-disabled="true"]),
997
+ .warning[data-pressed="true"]:not([data-disabled="true"]) {
998
+ --background-border: var(--background-600);
846
999
  }
847
1000
 
848
- /* Modal Styles */
1001
+ .info {
1002
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1003
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
1004
+ --focus-visible: var(--info-400);
1005
+ --foreground: var(--info-600);
1006
+ --icon-foreground: var(--info-700);
1007
+ }
849
1008
 
850
- .modal {
1009
+ .info[data-hovered="true"]:not([data-disabled="true"]),
1010
+ .info[data-pressed="true"]:not([data-disabled="true"]) {
1011
+ --background-border: var(--background-600);
1012
+ }
1013
+
1014
+ .banner.note {
851
1015
  --background: var(--background-900);
852
- --background-border: var(--background-700);
853
- --foreground: var(--foreground-300);
854
- --focus-visible: var(--accent-500);
855
- --scrollbar-thumb-background: var(--background-700);
856
- --scrollbar-thumb-hover-background: var(--foreground-400);
1016
+ --border: var(--background-600);
1017
+ --foreground: var(--foreground-200);
1018
+ --icon-color: currentColor;
1019
+ }
1020
+
1021
+ .banner.info {
1022
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1023
+ --border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
1024
+ --foreground: var(--foreground-200);
1025
+ --icon-color: var(--info-600);
857
1026
  }
858
1027
 
859
- .modal.title {
860
- --title-foreground: var(--foreground-100);
1028
+ .banner.success {
1029
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
1030
+ --border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
1031
+ --foreground: var(--foreground-200);
1032
+ --icon-color: var(--success-600);
861
1033
  }
862
1034
 
863
- .modal.close {
864
- --close-foreground: var(--foreground-400);
865
- --close-hover-foreground: var(--foreground-200);
866
- --focus-visible: var(--accent-500);
1035
+ .banner.warning {
1036
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
1037
+ --border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
1038
+ --foreground: var(--foreground-200);
1039
+ --icon-color: var(--warning-600);
867
1040
  }
868
1041
 
869
- .modal.footer {
870
- --footer-background: var(--background-900);
1042
+ .banner.danger {
1043
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
1044
+ --border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
1045
+ --foreground: var(--foreground-200);
1046
+ --icon-color: var(--danger-600);
871
1047
  }
872
1048
 
873
- .modal.backdrop {
874
- --backdrop-background: rgb(0 0 0 / 50%);
1049
+ .toast.danger {
1050
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
1051
+ --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
875
1052
  }
876
1053
 
877
- .divider {
878
- --background: var(--background-700)
1054
+ .toast.success {
1055
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
1056
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
879
1057
  }
880
1058
 
881
- /* Scroll Component */
882
- .scroll.track {
883
- --track-background: transparent;
1059
+ .toast.info {
1060
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1061
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
884
1062
  }
885
1063
 
886
- .scroll.thumb {
887
- --thumb-background: var(--background-700);
888
- --thumb-background-hover: var(--background-600);
889
- --thumb-background-pressed: color-mix(in srgb, var(--background-500) 40%, var(--background-900));
1064
+ .toast.warning {
1065
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
1066
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
890
1067
  }
891
1068
  }