ui-lab-theme-onyx 0.3.412 → 0.4.1

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