@e-burgos/tucu-ui 2.7.3 → 2.8.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 (58) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/README.md +17 -0
  3. package/base.css +225 -0
  4. package/components/inputs/input.mjs +43 -43
  5. package/components/inputs/select.mjs +1 -1
  6. package/components/loaders/loader.mjs +21 -21
  7. package/components/typography/index.mjs +30 -30
  8. package/index.css +1 -1
  9. package/index.js +1 -1
  10. package/macos/index.css +15 -0
  11. package/macos/sonoma/index.css +34 -0
  12. package/macos/sonoma/macos-auth.css +162 -0
  13. package/macos/sonoma/macos-backgrounds.css +314 -0
  14. package/macos/sonoma/macos-buttons.css +231 -0
  15. package/macos/sonoma/macos-cards.css +104 -0
  16. package/macos/sonoma/macos-content.css +157 -0
  17. package/macos/sonoma/macos-dialogs.css +122 -0
  18. package/macos/sonoma/macos-feedback.css +237 -0
  19. package/macos/sonoma/macos-fonts.css +7 -0
  20. package/macos/sonoma/macos-foundations.css +479 -0
  21. package/macos/sonoma/macos-inputs.css +1580 -0
  22. package/macos/sonoma/macos-layouts.css +223 -0
  23. package/macos/sonoma/macos-liquid-glass.css +279 -0
  24. package/macos/sonoma/macos-menus.css +184 -0
  25. package/macos/sonoma/macos-misc.css +635 -0
  26. package/macos/sonoma/macos-navigation.css +145 -0
  27. package/macos/sonoma/macos-selection.css +237 -0
  28. package/macos/sonoma/macos-sidebar.css +416 -0
  29. package/macos/sonoma/macos-tables.css +318 -0
  30. package/macos/sonoma/macos-toolbar.css +302 -0
  31. package/macos/sonoma/macos-typography.css +485 -0
  32. package/macos/sonoma/macos-window.css +273 -0
  33. package/macos/tahoe/index.css +34 -0
  34. package/macos/tahoe/macos-auth.css +162 -0
  35. package/macos/tahoe/macos-backgrounds.css +314 -0
  36. package/macos/tahoe/macos-buttons.css +286 -0
  37. package/macos/tahoe/macos-cards.css +125 -0
  38. package/macos/tahoe/macos-content.css +157 -0
  39. package/macos/tahoe/macos-dialogs.css +195 -0
  40. package/macos/tahoe/macos-feedback.css +273 -0
  41. package/macos/tahoe/macos-fonts.css +7 -0
  42. package/macos/tahoe/macos-foundations.css +516 -0
  43. package/macos/tahoe/macos-inputs.css +1656 -0
  44. package/macos/tahoe/macos-layouts.css +438 -0
  45. package/macos/tahoe/macos-liquid-glass.css +279 -0
  46. package/macos/tahoe/macos-menus.css +184 -0
  47. package/macos/tahoe/macos-misc.css +635 -0
  48. package/macos/tahoe/macos-navigation.css +191 -0
  49. package/macos/tahoe/macos-selection.css +237 -0
  50. package/macos/tahoe/macos-sidebar.css +420 -0
  51. package/macos/tahoe/macos-tables.css +320 -0
  52. package/macos/tahoe/macos-toolbar.css +304 -0
  53. package/macos/tahoe/macos-typography.css +485 -0
  54. package/macos/tahoe/macos-window.css +273 -0
  55. package/package.json +3 -2
  56. package/theme.css +812 -0
  57. package/third-party.css +39 -0
  58. package/utilities.css +105 -0
@@ -0,0 +1,1656 @@
1
+ /* ============================================================
2
+ macOS Tahoe 26 — Input/Form Control Overrides
3
+
4
+ Targets: Input, Select, Checkbox, Radio, Switch, InputSearcher,
5
+ TextArea, DatePicker, TimePicker, PasswordInput
6
+
7
+ References:
8
+ - Apple HIG > Text Fields: 22pt height, 10pt radius (Tahoe), 0.5px border
9
+ - Apple HIG > Toggles: Switch 38×22pt, Checkbox 14×14pt(r3), Radio 16×16pt
10
+ - Apple HIG > Color: controlAccentColor = systemBlue
11
+ - Focus ring: 3px systemBlue at 48% opacity
12
+ ============================================================ */
13
+
14
+ /* ── Text Input ──────────────────────────────────────────────── */
15
+ html.macos-tahoe [data-tucu='input'] {
16
+ min-height: var(--macos-control-height);
17
+ font-family: var(--macos-font-family);
18
+ font-size: var(--macos-font-size-body);
19
+ letter-spacing: var(--macos-tracking-13);
20
+ }
21
+
22
+ html.macos-tahoe [data-tucu='input-control'] {
23
+ border-radius: var(--macos-radius-md);
24
+ border: 1px solid var(--macos-separator) !important;
25
+ background-color: var(--macos-control-bg) !important;
26
+ color: var(--macos-label) !important;
27
+ font-family: var(--macos-font-family);
28
+ font-size: var(--macos-font-size-body);
29
+ letter-spacing: var(--macos-tracking-13);
30
+ transition: box-shadow var(--macos-transition-fast),
31
+ border-color var(--macos-transition-fast),
32
+ background-color var(--macos-transition-fast);
33
+ }
34
+
35
+ html.macos-tahoe [data-tucu='input-control']::placeholder {
36
+ color: var(--macos-secondary-label) !important;
37
+ }
38
+
39
+ html.macos-tahoe [data-tucu='input-control']:focus,
40
+ html.macos-tahoe [data-tucu='input']:focus-within {
41
+ box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring) !important;
42
+ outline: none;
43
+ border-color: var(--macos-control-accent) !important;
44
+ }
45
+
46
+ html.macos-tahoe [data-tucu='input-control']:disabled,
47
+ html.macos-tahoe [data-tucu='input']:disabled {
48
+ background-color: var(--macos-control-bg) !important;
49
+ opacity: 0.55;
50
+ cursor: default;
51
+ }
52
+
53
+ html.macos-tahoe [data-tucu='input'][data-size='sm'] {
54
+ min-height: 32px;
55
+ }
56
+
57
+ html.macos-tahoe
58
+ [data-tucu='input'][data-size='sm']
59
+ [data-tucu='input-control'] {
60
+ min-height: 32px !important;
61
+ padding-inline: 12px !important;
62
+ font-size: var(--macos-font-size-callout);
63
+ }
64
+
65
+ html.macos-tahoe [data-tucu='input'][data-size='md'] {
66
+ min-height: var(--macos-control-height);
67
+ }
68
+
69
+ html.macos-tahoe
70
+ [data-tucu='input'][data-size='md']
71
+ [data-tucu='input-control'] {
72
+ min-height: var(--macos-control-height) !important;
73
+ padding-inline: 16px !important;
74
+ }
75
+
76
+ html.macos-tahoe [data-tucu='input'][data-size='lg'] {
77
+ min-height: 48px;
78
+ }
79
+
80
+ html.macos-tahoe
81
+ [data-tucu='input'][data-size='lg']
82
+ [data-tucu='input-control'] {
83
+ min-height: 48px !important;
84
+ padding-inline: 16px !important;
85
+ }
86
+
87
+ /* Input variants */
88
+ html.macos-tahoe
89
+ [data-tucu='input'][data-variant='ghost']
90
+ [data-tucu='input-control'] {
91
+ background-color: var(--macos-control-bg) !important;
92
+ border: 1px solid var(--macos-separator) !important;
93
+ }
94
+
95
+ html.macos-tahoe
96
+ [data-tucu='input'][data-variant='solid']
97
+ [data-tucu='input-control'] {
98
+ background-color: var(--macos-gray6) !important;
99
+ border: 1px solid var(--macos-separator) !important;
100
+ }
101
+
102
+ html.macos-tahoe
103
+ [data-tucu='input'][data-variant='transparent']
104
+ [data-tucu='input-control'] {
105
+ border: none !important;
106
+ background-color: color-mix(
107
+ in srgb,
108
+ var(--macos-gray6) 82%,
109
+ var(--macos-control-bg)
110
+ ) !important;
111
+ }
112
+
113
+ /* Dark mode inputs */
114
+ html.macos-tahoe.dark [data-tucu='input-control'] {
115
+ background-color: var(--macos-control-bg) !important;
116
+ border-color: var(--macos-separator) !important;
117
+ }
118
+
119
+ html.macos-tahoe.dark
120
+ [data-tucu='input'][data-variant='solid']
121
+ [data-tucu='input-control'] {
122
+ background-color: var(--macos-gray5) !important;
123
+ }
124
+
125
+ html.macos-tahoe.dark
126
+ [data-tucu='input'][data-variant='transparent']
127
+ [data-tucu='input-control'] {
128
+ background-color: color-mix(
129
+ in srgb,
130
+ var(--macos-gray5) 82%,
131
+ var(--macos-control-bg)
132
+ ) !important;
133
+ border: none !important;
134
+ }
135
+
136
+ html.macos-tahoe [data-tucu='input'][data-color='primary'] {
137
+ --macos-input-color: var(--macos-system-blue);
138
+ }
139
+
140
+ html.macos-tahoe [data-tucu='input'][data-color='secondary'] {
141
+ --macos-input-color: var(--macos-secondary-label);
142
+ }
143
+
144
+ html.macos-tahoe [data-tucu='input'][data-color='danger'] {
145
+ --macos-input-color: var(--macos-system-red);
146
+ }
147
+
148
+ html.macos-tahoe [data-tucu='input'][data-color='info'] {
149
+ --macos-input-color: var(--macos-system-blue);
150
+ }
151
+
152
+ html.macos-tahoe [data-tucu='input'][data-color='success'] {
153
+ --macos-input-color: var(--macos-system-green);
154
+ }
155
+
156
+ html.macos-tahoe [data-tucu='input'][data-color='warning'] {
157
+ --macos-input-color: var(--macos-system-orange);
158
+ }
159
+
160
+ html.macos-tahoe [data-tucu='input'][data-color] [data-tucu='input-control'] {
161
+ border-color: color-mix(
162
+ in srgb,
163
+ var(--macos-input-color) 42%,
164
+ var(--macos-separator)
165
+ ) !important;
166
+ caret-color: var(--macos-input-color);
167
+ }
168
+
169
+ html.macos-tahoe
170
+ [data-tucu='input'][data-color][data-variant='ghost']
171
+ [data-tucu='input-control'] {
172
+ background-color: color-mix(
173
+ in srgb,
174
+ var(--macos-input-color) 10%,
175
+ var(--macos-control-bg)
176
+ ) !important;
177
+ }
178
+
179
+ html.macos-tahoe
180
+ [data-tucu='input'][data-color][data-variant='solid']
181
+ [data-tucu='input-control'] {
182
+ background-color: color-mix(
183
+ in srgb,
184
+ var(--macos-input-color) 12%,
185
+ var(--macos-gray6)
186
+ ) !important;
187
+ }
188
+
189
+ html.macos-tahoe
190
+ [data-tucu='input'][data-color][data-variant='transparent']
191
+ [data-tucu='input-control'] {
192
+ background-color: color-mix(
193
+ in srgb,
194
+ var(--macos-input-color) 12%,
195
+ color-mix(in srgb, var(--macos-gray6) 82%, var(--macos-control-bg))
196
+ ) !important;
197
+ }
198
+
199
+ html.macos-tahoe.dark
200
+ [data-tucu='input'][data-color]
201
+ [data-tucu='input-control'] {
202
+ border-color: color-mix(
203
+ in srgb,
204
+ var(--macos-input-color) 48%,
205
+ var(--macos-separator)
206
+ ) !important;
207
+ }
208
+
209
+ html.macos-tahoe.dark
210
+ [data-tucu='input'][data-color][data-variant='ghost']
211
+ [data-tucu='input-control'] {
212
+ background-color: color-mix(
213
+ in srgb,
214
+ var(--macos-input-color) 14%,
215
+ var(--macos-control-bg)
216
+ ) !important;
217
+ }
218
+
219
+ html.macos-tahoe.dark
220
+ [data-tucu='input'][data-color][data-variant='solid']
221
+ [data-tucu='input-control'] {
222
+ background-color: color-mix(
223
+ in srgb,
224
+ var(--macos-input-color) 16%,
225
+ var(--macos-gray5)
226
+ ) !important;
227
+ }
228
+
229
+ html.macos-tahoe.dark
230
+ [data-tucu='input'][data-color][data-variant='transparent']
231
+ [data-tucu='input-control'] {
232
+ background-color: color-mix(
233
+ in srgb,
234
+ var(--macos-input-color) 16%,
235
+ color-mix(in srgb, var(--macos-gray5) 82%, var(--macos-control-bg))
236
+ ) !important;
237
+ }
238
+
239
+ /* ── Input Label ─────────────────────────────────────────────── */
240
+ html.macos-tahoe [data-tucu='input-label'] {
241
+ font-size: var(--macos-font-size-callout);
242
+ font-weight: var(--macos-font-weight-medium);
243
+ color: var(--macos-secondary-label);
244
+ margin-bottom: var(--macos-space-1);
245
+ }
246
+
247
+ /* ── TextArea ────────────────────────────────────────────────── */
248
+ html.macos-tahoe [data-tucu='textarea'] {
249
+ border-radius: var(--macos-radius-md);
250
+ border: 1px solid var(--macos-separator) !important;
251
+ background-color: var(--macos-control-bg) !important;
252
+ color: var(--macos-label) !important;
253
+ font-family: var(--macos-font-family);
254
+ font-size: var(--macos-font-size-body);
255
+ padding: var(--macos-space-2);
256
+ transition: box-shadow var(--macos-transition-fast);
257
+ }
258
+
259
+ html.macos-tahoe [data-tucu='textarea'][data-size='sm'] {
260
+ min-height: 80px !important;
261
+ padding: 10px 12px !important;
262
+ font-size: var(--macos-font-size-callout);
263
+ }
264
+
265
+ html.macos-tahoe [data-tucu='textarea'][data-size='md'] {
266
+ min-height: 96px !important;
267
+ padding: var(--macos-space-2) !important;
268
+ }
269
+
270
+ html.macos-tahoe [data-tucu='textarea'][data-size='lg'] {
271
+ min-height: 128px !important;
272
+ padding: 14px 16px !important;
273
+ }
274
+
275
+ html.macos-tahoe [data-tucu='textarea']::placeholder {
276
+ color: var(--macos-secondary-label) !important;
277
+ }
278
+
279
+ html.macos-tahoe [data-tucu='textarea']:focus {
280
+ box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring) !important;
281
+ outline: none;
282
+ border-color: var(--macos-control-accent) !important;
283
+ }
284
+
285
+ html.macos-tahoe.dark [data-tucu='textarea'] {
286
+ background-color: var(--macos-control-bg);
287
+ border-color: var(--macos-separator) !important;
288
+ }
289
+
290
+ html.macos-tahoe [data-tucu='textarea'][data-color='primary'] {
291
+ --macos-textarea-color: var(--macos-system-blue);
292
+ }
293
+
294
+ html.macos-tahoe [data-tucu='textarea'][data-color='secondary'] {
295
+ --macos-textarea-color: var(--macos-secondary-label);
296
+ }
297
+
298
+ html.macos-tahoe [data-tucu='textarea'][data-color='danger'] {
299
+ --macos-textarea-color: var(--macos-system-red);
300
+ }
301
+
302
+ html.macos-tahoe [data-tucu='textarea'][data-color='info'] {
303
+ --macos-textarea-color: var(--macos-system-blue);
304
+ }
305
+
306
+ html.macos-tahoe [data-tucu='textarea'][data-color='success'] {
307
+ --macos-textarea-color: var(--macos-system-green);
308
+ }
309
+
310
+ html.macos-tahoe [data-tucu='textarea'][data-color='warning'] {
311
+ --macos-textarea-color: var(--macos-system-orange);
312
+ }
313
+
314
+ html.macos-tahoe [data-tucu='textarea'][data-color] {
315
+ border-color: color-mix(
316
+ in srgb,
317
+ var(--macos-textarea-color) 42%,
318
+ var(--macos-separator)
319
+ ) !important;
320
+ caret-color: var(--macos-textarea-color);
321
+ }
322
+
323
+ html.macos-tahoe [data-tucu='textarea'][data-color][data-variant='ghost'] {
324
+ background-color: color-mix(
325
+ in srgb,
326
+ var(--macos-textarea-color) 10%,
327
+ var(--macos-control-bg)
328
+ ) !important;
329
+ }
330
+
331
+ html.macos-tahoe [data-tucu='textarea'][data-variant='transparent'] {
332
+ border: none !important;
333
+ background-color: color-mix(
334
+ in srgb,
335
+ var(--macos-gray6) 82%,
336
+ var(--macos-control-bg)
337
+ ) !important;
338
+ }
339
+
340
+ html.macos-tahoe
341
+ [data-tucu='textarea'][data-color][data-variant='transparent'] {
342
+ background-color: color-mix(
343
+ in srgb,
344
+ var(--macos-textarea-color) 12%,
345
+ color-mix(in srgb, var(--macos-gray6) 82%, var(--macos-control-bg))
346
+ ) !important;
347
+ }
348
+
349
+ html.macos-tahoe [data-tucu='textarea'][data-variant='solid'] {
350
+ background-color: var(--macos-gray6) !important;
351
+ }
352
+
353
+ html.macos-tahoe [data-tucu='textarea'][data-color][data-variant='solid'] {
354
+ background-color: color-mix(
355
+ in srgb,
356
+ var(--macos-textarea-color) 12%,
357
+ var(--macos-gray6)
358
+ ) !important;
359
+ }
360
+
361
+ html.macos-tahoe.dark [data-tucu='textarea'][data-variant='transparent'] {
362
+ border: none !important;
363
+ background-color: color-mix(
364
+ in srgb,
365
+ var(--macos-gray5) 82%,
366
+ var(--macos-control-bg)
367
+ ) !important;
368
+ }
369
+
370
+ html.macos-tahoe.dark [data-tucu='textarea'][data-color] {
371
+ border-color: color-mix(
372
+ in srgb,
373
+ var(--macos-textarea-color) 48%,
374
+ var(--macos-separator)
375
+ ) !important;
376
+ }
377
+
378
+ html.macos-tahoe.dark [data-tucu='textarea'][data-color][data-variant='ghost'] {
379
+ background-color: color-mix(
380
+ in srgb,
381
+ var(--macos-textarea-color) 14%,
382
+ var(--macos-control-bg)
383
+ ) !important;
384
+ }
385
+
386
+ html.macos-tahoe.dark
387
+ [data-tucu='textarea'][data-color][data-variant='transparent'] {
388
+ background-color: color-mix(
389
+ in srgb,
390
+ var(--macos-textarea-color) 16%,
391
+ color-mix(in srgb, var(--macos-gray5) 82%, var(--macos-control-bg))
392
+ ) !important;
393
+ }
394
+
395
+ html.macos-tahoe.dark [data-tucu='textarea'][data-variant='solid'] {
396
+ background-color: var(--macos-gray5) !important;
397
+ }
398
+
399
+ html.macos-tahoe.dark [data-tucu='textarea'][data-color][data-variant='solid'] {
400
+ background-color: color-mix(
401
+ in srgb,
402
+ var(--macos-textarea-color) 16%,
403
+ var(--macos-gray5)
404
+ ) !important;
405
+ }
406
+
407
+ /* ── Select / Dropdown ───────────────────────────────────────── */
408
+ html.macos-tahoe [data-tucu='select'] {
409
+ min-height: var(--macos-control-height);
410
+ font-family: var(--macos-font-family);
411
+ font-size: var(--macos-font-size-body);
412
+ }
413
+
414
+ html.macos-tahoe [data-tucu='select-trigger'] {
415
+ border-radius: var(--macos-radius-md);
416
+ border: 1px solid var(--macos-separator) !important;
417
+ background-color: var(--macos-control-bg) !important;
418
+ color: var(--macos-label) !important;
419
+ font-family: var(--macos-font-family);
420
+ font-size: var(--macos-font-size-body);
421
+ transition: box-shadow var(--macos-transition-fast),
422
+ border-color var(--macos-transition-fast),
423
+ background-color var(--macos-transition-fast);
424
+ }
425
+
426
+ html.macos-tahoe [data-tucu='select'][data-size='sm'] {
427
+ min-height: 32px;
428
+ }
429
+
430
+ html.macos-tahoe
431
+ [data-tucu='select'][data-size='sm']
432
+ [data-tucu='select-trigger'] {
433
+ min-height: 32px !important;
434
+ padding-inline: 12px !important;
435
+ font-size: var(--macos-font-size-callout);
436
+ }
437
+
438
+ html.macos-tahoe [data-tucu='select'][data-size='md'] {
439
+ min-height: var(--macos-control-height);
440
+ }
441
+
442
+ html.macos-tahoe
443
+ [data-tucu='select'][data-size='md']
444
+ [data-tucu='select-trigger'] {
445
+ min-height: var(--macos-control-height) !important;
446
+ padding-inline: 16px !important;
447
+ }
448
+
449
+ html.macos-tahoe [data-tucu='select'][data-size='lg'] {
450
+ min-height: 48px;
451
+ }
452
+
453
+ html.macos-tahoe
454
+ [data-tucu='select'][data-size='lg']
455
+ [data-tucu='select-trigger'] {
456
+ min-height: 48px !important;
457
+ padding-inline: 16px !important;
458
+ }
459
+
460
+ html.macos-tahoe [data-tucu='select-trigger']:focus,
461
+ html.macos-tahoe [data-tucu='select']:focus-within {
462
+ box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring) !important;
463
+ border-color: var(--macos-control-accent) !important;
464
+ }
465
+
466
+ html.macos-tahoe
467
+ [data-tucu='select'][data-variant='transparent']
468
+ [data-tucu='select-trigger'] {
469
+ border: none !important;
470
+ background-color: color-mix(
471
+ in srgb,
472
+ var(--macos-gray6) 82%,
473
+ var(--macos-control-bg)
474
+ ) !important;
475
+ }
476
+
477
+ html.macos-tahoe
478
+ [data-tucu='select'][data-variant='solid']
479
+ [data-tucu='select-trigger'] {
480
+ background-color: var(--macos-gray6) !important;
481
+ }
482
+
483
+ html.macos-tahoe.dark [data-tucu='select-trigger'] {
484
+ background-color: var(--macos-control-bg) !important;
485
+ border-color: var(--macos-separator) !important;
486
+ }
487
+
488
+ html.macos-tahoe.dark
489
+ [data-tucu='select'][data-variant='solid']
490
+ [data-tucu='select-trigger'] {
491
+ background-color: var(--macos-gray5) !important;
492
+ }
493
+
494
+ html.macos-tahoe.dark
495
+ [data-tucu='select'][data-variant='transparent']
496
+ [data-tucu='select-trigger'] {
497
+ border: none !important;
498
+ background-color: color-mix(
499
+ in srgb,
500
+ var(--macos-gray5) 82%,
501
+ var(--macos-control-bg)
502
+ ) !important;
503
+ }
504
+
505
+ html.macos-tahoe [data-tucu='select'][data-color='primary'] {
506
+ --macos-select-color: var(--macos-system-blue);
507
+ }
508
+
509
+ html.macos-tahoe [data-tucu='select'][data-color='secondary'] {
510
+ --macos-select-color: var(--macos-secondary-label);
511
+ }
512
+
513
+ html.macos-tahoe [data-tucu='select'][data-color='danger'] {
514
+ --macos-select-color: var(--macos-system-red);
515
+ }
516
+
517
+ html.macos-tahoe [data-tucu='select'][data-color='info'] {
518
+ --macos-select-color: var(--macos-system-blue);
519
+ }
520
+
521
+ html.macos-tahoe [data-tucu='select'][data-color='success'] {
522
+ --macos-select-color: var(--macos-system-green);
523
+ }
524
+
525
+ html.macos-tahoe [data-tucu='select'][data-color='warning'] {
526
+ --macos-select-color: var(--macos-system-orange);
527
+ }
528
+
529
+ html.macos-tahoe [data-tucu='select'][data-color] [data-tucu='select-trigger'] {
530
+ border-color: color-mix(
531
+ in srgb,
532
+ var(--macos-select-color) 42%,
533
+ var(--macos-separator)
534
+ ) !important;
535
+ }
536
+
537
+ html.macos-tahoe
538
+ [data-tucu='select'][data-color][data-variant='ghost']
539
+ [data-tucu='select-trigger'] {
540
+ background-color: color-mix(
541
+ in srgb,
542
+ var(--macos-select-color) 10%,
543
+ var(--macos-control-bg)
544
+ ) !important;
545
+ }
546
+
547
+ html.macos-tahoe
548
+ [data-tucu='select'][data-color][data-variant='solid']
549
+ [data-tucu='select-trigger'] {
550
+ background-color: color-mix(
551
+ in srgb,
552
+ var(--macos-select-color) 12%,
553
+ var(--macos-gray6)
554
+ ) !important;
555
+ }
556
+
557
+ html.macos-tahoe
558
+ [data-tucu='select'][data-color][data-variant='transparent']
559
+ [data-tucu='select-trigger'] {
560
+ background-color: color-mix(
561
+ in srgb,
562
+ var(--macos-select-color) 12%,
563
+ color-mix(in srgb, var(--macos-gray6) 82%, var(--macos-control-bg))
564
+ ) !important;
565
+ }
566
+
567
+ html.macos-tahoe.dark
568
+ [data-tucu='select'][data-color]
569
+ [data-tucu='select-trigger'] {
570
+ border-color: color-mix(
571
+ in srgb,
572
+ var(--macos-select-color) 48%,
573
+ var(--macos-separator)
574
+ ) !important;
575
+ }
576
+
577
+ html.macos-tahoe.dark
578
+ [data-tucu='select'][data-color][data-variant='ghost']
579
+ [data-tucu='select-trigger'] {
580
+ background-color: color-mix(
581
+ in srgb,
582
+ var(--macos-select-color) 14%,
583
+ var(--macos-control-bg)
584
+ ) !important;
585
+ }
586
+
587
+ html.macos-tahoe.dark
588
+ [data-tucu='select'][data-color][data-variant='solid']
589
+ [data-tucu='select-trigger'] {
590
+ background-color: color-mix(
591
+ in srgb,
592
+ var(--macos-select-color) 16%,
593
+ var(--macos-gray5)
594
+ ) !important;
595
+ }
596
+
597
+ html.macos-tahoe.dark
598
+ [data-tucu='select'][data-color][data-variant='transparent']
599
+ [data-tucu='select-trigger'] {
600
+ background-color: color-mix(
601
+ in srgb,
602
+ var(--macos-select-color) 16%,
603
+ color-mix(in srgb, var(--macos-gray5) 82%, var(--macos-control-bg))
604
+ ) !important;
605
+ }
606
+
607
+ /* ── PinCode ─────────────────────────────────────────────────── */
608
+ html.macos-tahoe [data-tucu='pin-code-input'] {
609
+ border-radius: var(--macos-radius-md);
610
+ border: 1px solid var(--macos-separator) !important;
611
+ background-color: var(--macos-control-bg) !important;
612
+ color: var(--macos-label) !important;
613
+ font-family: var(--macos-font-family);
614
+ font-size: var(--macos-font-size-body);
615
+ transition: box-shadow var(--macos-transition-fast),
616
+ border-color var(--macos-transition-fast),
617
+ background-color var(--macos-transition-fast);
618
+ }
619
+
620
+ html.macos-tahoe [data-tucu='pin-code-input']::placeholder {
621
+ color: var(--macos-secondary-label) !important;
622
+ }
623
+
624
+ html.macos-tahoe [data-tucu='pin-code-input']:focus {
625
+ box-shadow: none !important;
626
+ outline: none;
627
+ border-color: var(--macos-control-accent) !important;
628
+ }
629
+
630
+ html.macos-tahoe
631
+ [data-tucu='pin-code'][data-variant='ghost']
632
+ [data-tucu='pin-code-input'] {
633
+ background-color: var(--macos-control-bg) !important;
634
+ }
635
+
636
+ html.macos-tahoe
637
+ [data-tucu='pin-code'][data-variant='solid']
638
+ [data-tucu='pin-code-input'] {
639
+ background-color: var(--macos-gray6) !important;
640
+ }
641
+
642
+ html.macos-tahoe
643
+ [data-tucu='pin-code'][data-variant='transparent']
644
+ [data-tucu='pin-code-input'] {
645
+ background-color: color-mix(
646
+ in srgb,
647
+ var(--macos-gray6) 82%,
648
+ var(--macos-control-bg)
649
+ ) !important;
650
+ border: none !important;
651
+ }
652
+
653
+ html.macos-tahoe.dark [data-tucu='pin-code-input'] {
654
+ background-color: var(--macos-control-bg) !important;
655
+ border-color: var(--macos-separator) !important;
656
+ }
657
+
658
+ html.macos-tahoe.dark
659
+ [data-tucu='pin-code'][data-variant='solid']
660
+ [data-tucu='pin-code-input'] {
661
+ background-color: var(--macos-gray5) !important;
662
+ }
663
+
664
+ html.macos-tahoe.dark
665
+ [data-tucu='pin-code'][data-variant='transparent']
666
+ [data-tucu='pin-code-input'] {
667
+ background-color: color-mix(
668
+ in srgb,
669
+ var(--macos-gray5) 82%,
670
+ var(--macos-control-bg)
671
+ ) !important;
672
+ border: none !important;
673
+ }
674
+
675
+ html.macos-tahoe [data-tucu='pin-code'][data-color='primary'] {
676
+ --macos-pin-code-color: var(--macos-system-blue);
677
+ }
678
+
679
+ html.macos-tahoe [data-tucu='pin-code'][data-color='secondary'] {
680
+ --macos-pin-code-color: var(--macos-secondary-label);
681
+ }
682
+
683
+ html.macos-tahoe [data-tucu='pin-code'][data-color='danger'] {
684
+ --macos-pin-code-color: var(--macos-system-red);
685
+ }
686
+
687
+ html.macos-tahoe [data-tucu='pin-code'][data-color='info'] {
688
+ --macos-pin-code-color: var(--macos-system-blue);
689
+ }
690
+
691
+ html.macos-tahoe [data-tucu='pin-code'][data-color='success'] {
692
+ --macos-pin-code-color: var(--macos-system-green);
693
+ }
694
+
695
+ html.macos-tahoe [data-tucu='pin-code'][data-color='warning'] {
696
+ --macos-pin-code-color: var(--macos-system-orange);
697
+ }
698
+
699
+ html.macos-tahoe
700
+ [data-tucu='pin-code'][data-color]
701
+ [data-tucu='pin-code-input'] {
702
+ border-color: color-mix(
703
+ in srgb,
704
+ var(--macos-pin-code-color) 42%,
705
+ var(--macos-separator)
706
+ ) !important;
707
+ caret-color: var(--macos-pin-code-color);
708
+ }
709
+
710
+ html.macos-tahoe
711
+ [data-tucu='pin-code'][data-color][data-variant='ghost']
712
+ [data-tucu='pin-code-input'] {
713
+ background-color: color-mix(
714
+ in srgb,
715
+ var(--macos-pin-code-color) 10%,
716
+ var(--macos-control-bg)
717
+ ) !important;
718
+ }
719
+
720
+ html.macos-tahoe
721
+ [data-tucu='pin-code'][data-color][data-variant='solid']
722
+ [data-tucu='pin-code-input'] {
723
+ background-color: color-mix(
724
+ in srgb,
725
+ var(--macos-pin-code-color) 12%,
726
+ var(--macos-gray6)
727
+ ) !important;
728
+ }
729
+
730
+ html.macos-tahoe
731
+ [data-tucu='pin-code'][data-color][data-variant='transparent']
732
+ [data-tucu='pin-code-input'] {
733
+ background-color: color-mix(
734
+ in srgb,
735
+ var(--macos-pin-code-color) 12%,
736
+ color-mix(in srgb, var(--macos-gray6) 82%, var(--macos-control-bg))
737
+ ) !important;
738
+ }
739
+
740
+ html.macos-tahoe.dark
741
+ [data-tucu='pin-code'][data-color]
742
+ [data-tucu='pin-code-input'] {
743
+ border-color: color-mix(
744
+ in srgb,
745
+ var(--macos-pin-code-color) 48%,
746
+ var(--macos-separator)
747
+ ) !important;
748
+ }
749
+
750
+ html.macos-tahoe.dark
751
+ [data-tucu='pin-code'][data-color][data-variant='ghost']
752
+ [data-tucu='pin-code-input'] {
753
+ background-color: color-mix(
754
+ in srgb,
755
+ var(--macos-pin-code-color) 14%,
756
+ var(--macos-control-bg)
757
+ ) !important;
758
+ }
759
+
760
+ html.macos-tahoe.dark
761
+ [data-tucu='pin-code'][data-color][data-variant='solid']
762
+ [data-tucu='pin-code-input'] {
763
+ background-color: color-mix(
764
+ in srgb,
765
+ var(--macos-pin-code-color) 16%,
766
+ var(--macos-gray5)
767
+ ) !important;
768
+ }
769
+
770
+ html.macos-tahoe.dark
771
+ [data-tucu='pin-code'][data-color][data-variant='transparent']
772
+ [data-tucu='pin-code-input'] {
773
+ background-color: color-mix(
774
+ in srgb,
775
+ var(--macos-pin-code-color) 16%,
776
+ color-mix(in srgb, var(--macos-gray5) 82%, var(--macos-control-bg))
777
+ ) !important;
778
+ }
779
+
780
+ /* Select dropdown menu */
781
+ html.macos-tahoe [data-tucu='select-menu'] {
782
+ border-radius: var(--macos-radius-lg);
783
+ border: 1px solid var(--macos-separator);
784
+ background-color: var(--macos-material-popover) !important;
785
+ backdrop-filter: blur(var(--macos-material-popover-blur));
786
+ -webkit-backdrop-filter: blur(var(--macos-material-popover-blur));
787
+ box-shadow: var(--macos-shadow-popover);
788
+ padding: var(--macos-space-1) 0;
789
+ }
790
+
791
+ html.macos-tahoe.dark [data-tucu='select-menu'] {
792
+ background-color: var(--macos-material-popover) !important;
793
+ border-color: var(--macos-separator);
794
+ }
795
+
796
+ html.macos-tahoe [data-tucu='select-search'] {
797
+ color: var(--macos-label) !important;
798
+ }
799
+
800
+ html.macos-tahoe [data-tucu='select-search']::placeholder {
801
+ color: var(--macos-secondary-label) !important;
802
+ }
803
+
804
+ html.macos-tahoe [data-tucu='select-option'] {
805
+ padding: var(--macos-space-1) var(--macos-space-3);
806
+ border-radius: var(--macos-radius-sm);
807
+ margin: 0 var(--macos-space-1);
808
+ font-size: var(--macos-font-size-body);
809
+ }
810
+
811
+ html.macos-tahoe [data-tucu='select-option']:hover,
812
+ html.macos-tahoe [data-tucu='select-option'][data-highlighted='true'] {
813
+ background-color: rgba(0, 122, 255, 0.12);
814
+ color: var(--macos-label);
815
+ }
816
+
817
+ html.macos-tahoe [data-tucu='select-option'][data-selected='true'] {
818
+ background-color: var(--macos-control-accent);
819
+ color: #ffffff;
820
+ }
821
+
822
+ /* ── Checkbox ────────────────────────────────────────────────── */
823
+ html.macos-tahoe [data-tucu='checkbox'] {
824
+ border: 1px solid var(--macos-separator);
825
+ background-color: var(--macos-control-bg);
826
+ transition: all var(--macos-transition-fast);
827
+ }
828
+
829
+ html.macos-tahoe [data-tucu='checkbox'][data-shape='square'] {
830
+ border-radius: var(--macos-radius-xs);
831
+ }
832
+
833
+ html.macos-tahoe [data-tucu='checkbox'][data-shape='rounded'] {
834
+ border-radius: 9999px;
835
+ }
836
+
837
+ html.macos-tahoe [data-tucu='checkbox'][data-size='sm'] {
838
+ width: 16px;
839
+ height: 16px;
840
+ }
841
+
842
+ html.macos-tahoe [data-tucu='checkbox'][data-size='md'] {
843
+ width: 20px;
844
+ height: 20px;
845
+ }
846
+
847
+ html.macos-tahoe [data-tucu='checkbox'][data-size='lg'] {
848
+ width: 24px;
849
+ height: 24px;
850
+ }
851
+
852
+ html.macos-tahoe [data-tucu='checkbox'][data-variant='ghost']:not(:checked) {
853
+ background-color: var(--macos-control-bg) !important;
854
+ }
855
+
856
+ html.macos-tahoe [data-tucu='checkbox'][data-variant='solid']:not(:checked) {
857
+ background-color: var(--macos-gray6) !important;
858
+ }
859
+
860
+ html.macos-tahoe
861
+ [data-tucu='checkbox'][data-variant='transparent']:not(:checked) {
862
+ background-color: color-mix(
863
+ in srgb,
864
+ var(--macos-gray6) 82%,
865
+ var(--macos-control-bg)
866
+ ) !important;
867
+ border: none !important;
868
+ }
869
+
870
+ html.macos-tahoe.dark
871
+ [data-tucu='checkbox'][data-variant='ghost']:not(:checked) {
872
+ background-color: var(--macos-control-bg) !important;
873
+ }
874
+
875
+ html.macos-tahoe.dark
876
+ [data-tucu='checkbox'][data-variant='solid']:not(:checked) {
877
+ background-color: var(--macos-gray5) !important;
878
+ }
879
+
880
+ html.macos-tahoe.dark
881
+ [data-tucu='checkbox'][data-variant='transparent']:not(:checked) {
882
+ background-color: color-mix(
883
+ in srgb,
884
+ var(--macos-gray5) 82%,
885
+ var(--macos-control-bg)
886
+ ) !important;
887
+ border: none !important;
888
+ }
889
+
890
+ html.macos-tahoe [data-tucu='checkbox'][data-variant='transparent']:checked,
891
+ html.macos-tahoe
892
+ [data-tucu='checkbox'][data-variant='transparent'][data-checked='true'] {
893
+ border: none !important;
894
+ }
895
+
896
+ html.macos-tahoe [data-tucu='checkbox']:checked,
897
+ html.macos-tahoe [data-tucu='checkbox'][data-checked='true'] {
898
+ background-color: var(--macos-control-accent);
899
+ border-color: var(--macos-control-accent);
900
+ }
901
+
902
+ html.macos-tahoe [data-tucu='checkbox']:focus-visible {
903
+ box-shadow: var(--macos-shadow-focus);
904
+ }
905
+
906
+ /* ── Radio ───────────────────────────────────────────────────── */
907
+ html.macos-tahoe [data-tucu='radio'] {
908
+ border-radius: 50%;
909
+ border: 1px solid var(--macos-separator);
910
+ background-color: var(--macos-control-bg);
911
+ transition: all var(--macos-transition-fast);
912
+ }
913
+
914
+ html.macos-tahoe [data-tucu='radio'][data-size='sm'] {
915
+ width: 16px;
916
+ height: 16px;
917
+ }
918
+
919
+ html.macos-tahoe [data-tucu='radio'][data-size='md'] {
920
+ width: 20px;
921
+ height: 20px;
922
+ }
923
+
924
+ html.macos-tahoe [data-tucu='radio'][data-size='lg'] {
925
+ width: 24px;
926
+ height: 24px;
927
+ }
928
+
929
+ html.macos-tahoe [data-tucu='radio'][data-size='xl'] {
930
+ width: 28px;
931
+ height: 28px;
932
+ }
933
+
934
+ html.macos-tahoe [data-tucu='radio'][data-variant='ghost']:not(:checked) {
935
+ background-color: var(--macos-control-bg) !important;
936
+ }
937
+
938
+ html.macos-tahoe [data-tucu='radio'][data-variant='solid']:not(:checked) {
939
+ background-color: var(--macos-gray6) !important;
940
+ }
941
+
942
+ html.macos-tahoe [data-tucu='radio'][data-variant='transparent']:not(:checked) {
943
+ background-color: color-mix(
944
+ in srgb,
945
+ var(--macos-gray6) 82%,
946
+ var(--macos-control-bg)
947
+ ) !important;
948
+ border: none !important;
949
+ }
950
+
951
+ html.macos-tahoe.dark [data-tucu='radio'][data-variant='ghost']:not(:checked) {
952
+ background-color: var(--macos-control-bg) !important;
953
+ }
954
+
955
+ html.macos-tahoe.dark [data-tucu='radio'][data-variant='solid']:not(:checked) {
956
+ background-color: var(--macos-gray5) !important;
957
+ }
958
+
959
+ html.macos-tahoe.dark
960
+ [data-tucu='radio'][data-variant='transparent']:not(:checked) {
961
+ background-color: color-mix(
962
+ in srgb,
963
+ var(--macos-gray5) 82%,
964
+ var(--macos-control-bg)
965
+ ) !important;
966
+ border: none !important;
967
+ }
968
+
969
+ html.macos-tahoe [data-tucu='radio'][data-color='primary'] {
970
+ --macos-radio-color: var(--macos-system-blue);
971
+ }
972
+
973
+ html.macos-tahoe [data-tucu='radio'][data-color='secondary'] {
974
+ --macos-radio-color: var(--macos-secondary-label);
975
+ }
976
+
977
+ html.macos-tahoe [data-tucu='radio'][data-color='danger'] {
978
+ --macos-radio-color: var(--macos-system-red);
979
+ }
980
+
981
+ html.macos-tahoe [data-tucu='radio'][data-color='info'] {
982
+ --macos-radio-color: var(--macos-system-blue);
983
+ }
984
+
985
+ html.macos-tahoe [data-tucu='radio'][data-color='success'] {
986
+ --macos-radio-color: var(--macos-system-green);
987
+ }
988
+
989
+ html.macos-tahoe [data-tucu='radio'][data-color='warning'] {
990
+ --macos-radio-color: var(--macos-system-orange);
991
+ }
992
+
993
+ html.macos-tahoe [data-tucu='radio'][data-color] {
994
+ border-color: color-mix(
995
+ in srgb,
996
+ var(--macos-radio-color) 42%,
997
+ var(--macos-separator)
998
+ ) !important;
999
+ }
1000
+
1001
+ html.macos-tahoe
1002
+ [data-tucu='radio'][data-color][data-variant='ghost']:not(:checked) {
1003
+ background-color: color-mix(
1004
+ in srgb,
1005
+ var(--macos-radio-color) 10%,
1006
+ var(--macos-control-bg)
1007
+ ) !important;
1008
+ }
1009
+
1010
+ html.macos-tahoe
1011
+ [data-tucu='radio'][data-color][data-variant='solid']:not(:checked) {
1012
+ background-color: color-mix(
1013
+ in srgb,
1014
+ var(--macos-radio-color) 12%,
1015
+ var(--macos-gray6)
1016
+ ) !important;
1017
+ }
1018
+
1019
+ html.macos-tahoe
1020
+ [data-tucu='radio'][data-color][data-variant='transparent']:not(:checked) {
1021
+ background-color: color-mix(
1022
+ in srgb,
1023
+ var(--macos-gray6) 82%,
1024
+ var(--macos-control-bg)
1025
+ ) !important;
1026
+ border: none !important;
1027
+ }
1028
+
1029
+ html.macos-tahoe.dark [data-tucu='radio'][data-color] {
1030
+ border-color: color-mix(
1031
+ in srgb,
1032
+ var(--macos-radio-color) 48%,
1033
+ var(--macos-separator)
1034
+ ) !important;
1035
+ }
1036
+
1037
+ html.macos-tahoe.dark
1038
+ [data-tucu='radio'][data-color][data-variant='ghost']:not(:checked) {
1039
+ background-color: color-mix(
1040
+ in srgb,
1041
+ var(--macos-radio-color) 14%,
1042
+ var(--macos-control-bg)
1043
+ ) !important;
1044
+ }
1045
+
1046
+ html.macos-tahoe.dark
1047
+ [data-tucu='radio'][data-color][data-variant='solid']:not(:checked) {
1048
+ background-color: color-mix(
1049
+ in srgb,
1050
+ var(--macos-radio-color) 16%,
1051
+ var(--macos-gray5)
1052
+ ) !important;
1053
+ }
1054
+
1055
+ html.macos-tahoe.dark
1056
+ [data-tucu='radio'][data-color][data-variant='transparent']:not(:checked) {
1057
+ background-color: color-mix(
1058
+ in srgb,
1059
+ var(--macos-gray5) 82%,
1060
+ var(--macos-control-bg)
1061
+ ) !important;
1062
+ border: none !important;
1063
+ }
1064
+
1065
+ html.macos-tahoe [data-tucu='radio']:checked,
1066
+ html.macos-tahoe [data-tucu='radio'][data-checked='true'] {
1067
+ background-color: var(--macos-control-accent);
1068
+ border-color: var(--macos-control-accent);
1069
+ }
1070
+
1071
+ html.macos-tahoe [data-tucu='radio'][data-color]:checked,
1072
+ html.macos-tahoe [data-tucu='radio'][data-color][data-checked='true'] {
1073
+ background-color: var(--macos-radio-color) !important;
1074
+ border-color: var(--macos-radio-color) !important;
1075
+ }
1076
+
1077
+ html.macos-tahoe [data-tucu='radio'][data-variant='transparent']:checked,
1078
+ html.macos-tahoe
1079
+ [data-tucu='radio'][data-variant='transparent'][data-checked='true'] {
1080
+ border: none !important;
1081
+ }
1082
+
1083
+ html.macos-tahoe [data-tucu='radio']:focus-visible {
1084
+ box-shadow: var(--macos-shadow-focus);
1085
+ }
1086
+
1087
+ /* ── Switch / Toggle ─────────────────────────────────────────── */
1088
+ /* data-tucu="switch" is on the wrapper <div>, children are:
1089
+ label > [optional text span] + input[checkbox] + span(offLabel) + span(onLabel) + span(knob) */
1090
+
1091
+ /* Track (the checkbox input) */
1092
+ html.macos-tahoe [data-tucu='switch-control'] {
1093
+ width: var(--macos-switch-width) !important;
1094
+ height: var(--macos-switch-height) !important;
1095
+ border-radius: var(--macos-radius-full);
1096
+ background-color: var(--macos-gray4) !important;
1097
+ border: none !important;
1098
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
1099
+ transition: background-color var(--macos-transition-fast);
1100
+ }
1101
+
1102
+ html.macos-tahoe
1103
+ [data-tucu='switch'][data-variant='ghost']
1104
+ [data-tucu='switch-control']:not(:checked) {
1105
+ background-color: var(--macos-control-bg) !important;
1106
+ border: 1px solid var(--macos-separator) !important;
1107
+ }
1108
+
1109
+ html.macos-tahoe
1110
+ [data-tucu='switch'][data-variant='solid']
1111
+ [data-tucu='switch-control']:not(:checked) {
1112
+ background-color: var(--macos-gray6) !important;
1113
+ border: 1px solid var(--macos-separator) !important;
1114
+ }
1115
+
1116
+ html.macos-tahoe
1117
+ [data-tucu='switch'][data-variant='transparent']
1118
+ [data-tucu='switch-control']:not(:checked) {
1119
+ background-color: color-mix(
1120
+ in srgb,
1121
+ var(--macos-gray6) 82%,
1122
+ var(--macos-control-bg)
1123
+ ) !important;
1124
+ }
1125
+
1126
+ html.macos-tahoe [data-tucu='switch'][data-color='primary'] {
1127
+ --macos-switch-color: var(--macos-system-blue);
1128
+ }
1129
+
1130
+ html.macos-tahoe [data-tucu='switch'][data-color='secondary'] {
1131
+ --macos-switch-color: var(--macos-secondary-label);
1132
+ }
1133
+
1134
+ html.macos-tahoe [data-tucu='switch'][data-color='danger'] {
1135
+ --macos-switch-color: var(--macos-system-red);
1136
+ }
1137
+
1138
+ html.macos-tahoe [data-tucu='switch'][data-color='info'] {
1139
+ --macos-switch-color: var(--macos-system-blue);
1140
+ }
1141
+
1142
+ html.macos-tahoe [data-tucu='switch'][data-color='success'] {
1143
+ --macos-switch-color: var(--macos-system-green);
1144
+ }
1145
+
1146
+ html.macos-tahoe [data-tucu='switch'][data-color='warning'] {
1147
+ --macos-switch-color: var(--macos-system-orange);
1148
+ }
1149
+
1150
+ html.macos-tahoe
1151
+ [data-tucu='switch'][data-color][data-variant='ghost']
1152
+ [data-tucu='switch-control']:not(:checked) {
1153
+ background-color: color-mix(
1154
+ in srgb,
1155
+ var(--macos-switch-color) 10%,
1156
+ var(--macos-control-bg)
1157
+ ) !important;
1158
+ border: 1px solid
1159
+ color-mix(in srgb, var(--macos-switch-color) 42%, var(--macos-separator)) !important;
1160
+ }
1161
+
1162
+ html.macos-tahoe
1163
+ [data-tucu='switch'][data-color][data-variant='solid']
1164
+ [data-tucu='switch-control']:not(:checked) {
1165
+ background-color: color-mix(
1166
+ in srgb,
1167
+ var(--macos-switch-color) 12%,
1168
+ var(--macos-gray6)
1169
+ ) !important;
1170
+ border: 1px solid
1171
+ color-mix(in srgb, var(--macos-switch-color) 42%, var(--macos-separator)) !important;
1172
+ }
1173
+
1174
+ html.macos-tahoe [data-tucu='switch-control']:checked {
1175
+ background-color: var(--macos-system-green) !important;
1176
+ }
1177
+
1178
+ html.macos-tahoe
1179
+ [data-tucu='switch'][data-color]
1180
+ [data-tucu='switch-control']:checked {
1181
+ background-color: var(--macos-switch-color) !important;
1182
+ }
1183
+
1184
+ html.macos-tahoe [data-tucu='switch-control']:focus-visible {
1185
+ box-shadow: var(--macos-shadow-focus);
1186
+ }
1187
+
1188
+ html.macos-tahoe.dark [data-tucu='switch-control'] {
1189
+ background-color: var(--macos-gray3) !important;
1190
+ }
1191
+
1192
+ html.macos-tahoe.dark
1193
+ [data-tucu='switch'][data-variant='ghost']
1194
+ [data-tucu='switch-control']:not(:checked) {
1195
+ background-color: var(--macos-control-bg) !important;
1196
+ border: 1px solid var(--macos-separator) !important;
1197
+ }
1198
+
1199
+ html.macos-tahoe.dark
1200
+ [data-tucu='switch'][data-variant='solid']
1201
+ [data-tucu='switch-control']:not(:checked) {
1202
+ background-color: var(--macos-gray5) !important;
1203
+ border: 1px solid var(--macos-separator) !important;
1204
+ }
1205
+
1206
+ html.macos-tahoe.dark
1207
+ [data-tucu='switch'][data-variant='transparent']
1208
+ [data-tucu='switch-control']:not(:checked) {
1209
+ background-color: color-mix(
1210
+ in srgb,
1211
+ var(--macos-gray5) 82%,
1212
+ var(--macos-control-bg)
1213
+ ) !important;
1214
+ }
1215
+
1216
+ html.macos-tahoe.dark
1217
+ [data-tucu='switch'][data-color][data-variant='ghost']
1218
+ [data-tucu='switch-control']:not(:checked) {
1219
+ background-color: color-mix(
1220
+ in srgb,
1221
+ var(--macos-switch-color) 14%,
1222
+ var(--macos-control-bg)
1223
+ ) !important;
1224
+ border: 1px solid
1225
+ color-mix(in srgb, var(--macos-switch-color) 48%, var(--macos-separator)) !important;
1226
+ }
1227
+
1228
+ html.macos-tahoe.dark
1229
+ [data-tucu='switch'][data-color][data-variant='solid']
1230
+ [data-tucu='switch-control']:not(:checked) {
1231
+ background-color: color-mix(
1232
+ in srgb,
1233
+ var(--macos-switch-color) 16%,
1234
+ var(--macos-gray5)
1235
+ ) !important;
1236
+ border: 1px solid
1237
+ color-mix(in srgb, var(--macos-switch-color) 48%, var(--macos-separator)) !important;
1238
+ }
1239
+
1240
+ html.macos-tahoe.dark [data-tucu='switch-control']:checked {
1241
+ background-color: var(--macos-system-green) !important;
1242
+ }
1243
+
1244
+ html.macos-tahoe.dark
1245
+ [data-tucu='switch'][data-color]
1246
+ [data-tucu='switch-control']:checked {
1247
+ background-color: var(--macos-switch-color) !important;
1248
+ }
1249
+
1250
+ /* Hide ON/OFF text/icon labels — macOS switches are clean */
1251
+ html.macos-tahoe
1252
+ [data-tucu='switch']
1253
+ input[type='checkbox']
1254
+ ~ span:not(:last-child) {
1255
+ display: none !important;
1256
+ }
1257
+
1258
+ /* Knob (last span sibling after the input) */
1259
+ html.macos-tahoe [data-tucu='switch'] input[type='checkbox'] ~ span:last-child {
1260
+ width: 18px !important;
1261
+ height: 18px !important;
1262
+ right: 18px !important;
1263
+ background-color: #ffffff !important;
1264
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
1265
+ }
1266
+
1267
+ /* Override Tailwind translate-x for macOS knob travel (38 - 18 - 2 = 18px → ~16px travel) */
1268
+ html.macos-tahoe
1269
+ [data-tucu='switch']
1270
+ input[type='checkbox']:checked
1271
+ ~ span:last-child {
1272
+ --tw-translate-x: 16px !important;
1273
+ }
1274
+
1275
+ html.macos-tahoe
1276
+ [data-tucu='switch']
1277
+ input[type='checkbox']:not(:checked)
1278
+ ~ span:last-child {
1279
+ --tw-translate-x: 0px !important;
1280
+ }
1281
+
1282
+ html.macos-tahoe.dark
1283
+ [data-tucu='switch']
1284
+ input[type='checkbox']
1285
+ ~ span:last-child {
1286
+ background-color: #ffffff !important;
1287
+ }
1288
+
1289
+ /* ── InputSearcher ───────────────────────────────────────────── */
1290
+ html.macos-tahoe [data-tucu='input-searcher'] {
1291
+ border-radius: var(--macos-radius-md);
1292
+ font-family: var(--macos-font-family);
1293
+ font-size: var(--macos-font-size-body);
1294
+ }
1295
+
1296
+ html.macos-tahoe [data-tucu='input-searcher']:focus-within {
1297
+ box-shadow: none !important;
1298
+ }
1299
+
1300
+ html.macos-tahoe.dark [data-tucu='input-searcher'] {
1301
+ background-color: transparent;
1302
+ }
1303
+
1304
+ /* ── Date Picker / Calendar Popover ─────────────────────────── */
1305
+ html.macos-tahoe [data-tucu='input-calendar'] {
1306
+ border-radius: var(--macos-radius-lg);
1307
+ border: 1px solid var(--macos-separator) !important;
1308
+ background-color: var(--macos-material-popover) !important;
1309
+ backdrop-filter: blur(var(--macos-material-popover-blur));
1310
+ -webkit-backdrop-filter: blur(var(--macos-material-popover-blur));
1311
+ box-shadow: var(--macos-shadow-window);
1312
+ }
1313
+
1314
+ html.macos-tahoe.dark [data-tucu='input-calendar'] {
1315
+ background-color: var(--macos-material-popover) !important;
1316
+ border-color: var(--macos-separator) !important;
1317
+ }
1318
+
1319
+ /* ── FileInput ──────────────────────────────────────────────── */
1320
+ html.macos-tahoe [data-tucu='file-input'] {
1321
+ border-radius: var(--macos-radius-xl);
1322
+ border: 1px solid var(--macos-separator) !important;
1323
+ background-color: color-mix(
1324
+ in srgb,
1325
+ var(--macos-gray6) 72%,
1326
+ var(--macos-control-bg)
1327
+ ) !important;
1328
+ }
1329
+
1330
+ html.macos-tahoe [data-tucu='file-input-dropzone'] {
1331
+ border-radius: var(--macos-radius-xl);
1332
+ border-color: color-mix(
1333
+ in srgb,
1334
+ var(--macos-control-accent) 20%,
1335
+ var(--macos-separator)
1336
+ ) !important;
1337
+ background-color: color-mix(
1338
+ in srgb,
1339
+ var(--macos-gray6) 82%,
1340
+ var(--macos-control-bg)
1341
+ ) !important;
1342
+ transition: background-color var(--macos-transition-fast),
1343
+ border-color var(--macos-transition-fast),
1344
+ box-shadow var(--macos-transition-fast);
1345
+ }
1346
+
1347
+ html.macos-tahoe [data-tucu='file-input-dropzone']:hover,
1348
+ html.macos-tahoe [data-tucu='file-input-dropzone']:focus-within {
1349
+ border-color: color-mix(
1350
+ in srgb,
1351
+ var(--macos-control-accent) 48%,
1352
+ var(--macos-separator)
1353
+ ) !important;
1354
+ background-color: color-mix(
1355
+ in srgb,
1356
+ var(--macos-gray6) 92%,
1357
+ var(--macos-control-bg)
1358
+ ) !important;
1359
+ }
1360
+
1361
+ html.macos-tahoe [data-tucu='file-input-content'] {
1362
+ width: min(100%, 18rem);
1363
+ padding-inline: var(--macos-space-4);
1364
+ margin-inline: auto;
1365
+ }
1366
+
1367
+ html.macos-tahoe [data-tucu='file-input-placeholder'] {
1368
+ max-width: 100%;
1369
+ margin-inline: auto;
1370
+ margin-bottom: var(--macos-space-4) !important;
1371
+ padding-inline: var(--macos-space-2);
1372
+ font-size: var(--macos-font-size-callout) !important;
1373
+ line-height: var(--macos-leading-callout);
1374
+ letter-spacing: var(--macos-tracking-12);
1375
+ color: var(--macos-secondary-label) !important;
1376
+ }
1377
+
1378
+ html.macos-tahoe [data-tucu='file-input-image-preview'],
1379
+ html.macos-tahoe [data-tucu='file-input-preview'] {
1380
+ border-color: var(--macos-separator) !important;
1381
+ background-color: color-mix(
1382
+ in srgb,
1383
+ var(--macos-gray6) 88%,
1384
+ var(--macos-control-bg)
1385
+ ) !important;
1386
+ }
1387
+
1388
+ html.macos-tahoe.dark [data-tucu='file-input'] {
1389
+ border-color: var(--macos-separator) !important;
1390
+ background-color: color-mix(
1391
+ in srgb,
1392
+ var(--macos-gray5) 78%,
1393
+ var(--macos-control-bg)
1394
+ ) !important;
1395
+ }
1396
+
1397
+ html.macos-tahoe [data-tucu='file-input'][data-color='primary'] {
1398
+ --macos-file-input-color: var(--macos-system-blue);
1399
+ }
1400
+
1401
+ html.macos-tahoe [data-tucu='file-input'][data-color='secondary'] {
1402
+ --macos-file-input-color: var(--macos-secondary-label);
1403
+ }
1404
+
1405
+ html.macos-tahoe [data-tucu='file-input'][data-color='danger'] {
1406
+ --macos-file-input-color: var(--macos-system-red);
1407
+ }
1408
+
1409
+ html.macos-tahoe [data-tucu='file-input'][data-color='info'] {
1410
+ --macos-file-input-color: var(--macos-system-blue);
1411
+ }
1412
+
1413
+ html.macos-tahoe [data-tucu='file-input'][data-color='success'] {
1414
+ --macos-file-input-color: var(--macos-system-green);
1415
+ }
1416
+
1417
+ html.macos-tahoe [data-tucu='file-input'][data-color='warning'] {
1418
+ --macos-file-input-color: var(--macos-system-orange);
1419
+ }
1420
+
1421
+ html.macos-tahoe [data-tucu='file-input'][data-color] {
1422
+ border-color: color-mix(
1423
+ in srgb,
1424
+ var(--macos-file-input-color) 32%,
1425
+ var(--macos-separator)
1426
+ ) !important;
1427
+ background-color: color-mix(
1428
+ in srgb,
1429
+ var(--macos-file-input-color) 8%,
1430
+ color-mix(in srgb, var(--macos-gray6) 72%, var(--macos-control-bg))
1431
+ ) !important;
1432
+ }
1433
+
1434
+ html.macos-tahoe
1435
+ [data-tucu='file-input'][data-color]
1436
+ [data-tucu='file-input-dropzone'] {
1437
+ border-color: color-mix(
1438
+ in srgb,
1439
+ var(--macos-file-input-color) 28%,
1440
+ var(--macos-separator)
1441
+ ) !important;
1442
+ background-color: color-mix(
1443
+ in srgb,
1444
+ var(--macos-file-input-color) 10%,
1445
+ color-mix(in srgb, var(--macos-gray6) 82%, var(--macos-control-bg))
1446
+ ) !important;
1447
+ }
1448
+
1449
+ html.macos-tahoe
1450
+ [data-tucu='file-input'][data-color]
1451
+ [data-tucu='file-input-dropzone']:hover,
1452
+ html.macos-tahoe
1453
+ [data-tucu='file-input'][data-color]
1454
+ [data-tucu='file-input-dropzone']:focus-within {
1455
+ border-color: color-mix(
1456
+ in srgb,
1457
+ var(--macos-file-input-color) 48%,
1458
+ var(--macos-separator)
1459
+ ) !important;
1460
+ background-color: color-mix(
1461
+ in srgb,
1462
+ var(--macos-file-input-color) 14%,
1463
+ color-mix(in srgb, var(--macos-gray6) 92%, var(--macos-control-bg))
1464
+ ) !important;
1465
+ }
1466
+
1467
+ html.macos-tahoe
1468
+ [data-tucu='file-input'][data-color]
1469
+ [data-tucu='file-input-image-preview'],
1470
+ html.macos-tahoe
1471
+ [data-tucu='file-input'][data-color]
1472
+ [data-tucu='file-input-preview'] {
1473
+ border-color: color-mix(
1474
+ in srgb,
1475
+ var(--macos-file-input-color) 28%,
1476
+ var(--macos-separator)
1477
+ ) !important;
1478
+ background-color: color-mix(
1479
+ in srgb,
1480
+ var(--macos-file-input-color) 10%,
1481
+ color-mix(in srgb, var(--macos-gray6) 88%, var(--macos-control-bg))
1482
+ ) !important;
1483
+ }
1484
+
1485
+ html.macos-tahoe.dark [data-tucu='file-input'][data-color] {
1486
+ border-color: color-mix(
1487
+ in srgb,
1488
+ var(--macos-file-input-color) 36%,
1489
+ var(--macos-separator)
1490
+ ) !important;
1491
+ background-color: color-mix(
1492
+ in srgb,
1493
+ var(--macos-file-input-color) 10%,
1494
+ color-mix(in srgb, var(--macos-gray5) 78%, var(--macos-control-bg))
1495
+ ) !important;
1496
+ }
1497
+
1498
+ html.macos-tahoe.dark
1499
+ [data-tucu='file-input'][data-color]
1500
+ [data-tucu='file-input-dropzone'] {
1501
+ border-color: color-mix(
1502
+ in srgb,
1503
+ var(--macos-file-input-color) 32%,
1504
+ var(--macos-separator)
1505
+ ) !important;
1506
+ background-color: color-mix(
1507
+ in srgb,
1508
+ var(--macos-file-input-color) 12%,
1509
+ color-mix(in srgb, var(--macos-gray5) 86%, var(--macos-control-bg))
1510
+ ) !important;
1511
+ }
1512
+
1513
+ html.macos-tahoe.dark
1514
+ [data-tucu='file-input'][data-color]
1515
+ [data-tucu='file-input-dropzone']:hover,
1516
+ html.macos-tahoe.dark
1517
+ [data-tucu='file-input'][data-color]
1518
+ [data-tucu='file-input-dropzone']:focus-within {
1519
+ border-color: color-mix(
1520
+ in srgb,
1521
+ var(--macos-file-input-color) 52%,
1522
+ var(--macos-separator)
1523
+ ) !important;
1524
+ background-color: color-mix(
1525
+ in srgb,
1526
+ var(--macos-file-input-color) 16%,
1527
+ color-mix(in srgb, var(--macos-gray5) 94%, var(--macos-control-bg))
1528
+ ) !important;
1529
+ }
1530
+
1531
+ html.macos-tahoe.dark
1532
+ [data-tucu='file-input'][data-color]
1533
+ [data-tucu='file-input-image-preview'],
1534
+ html.macos-tahoe.dark
1535
+ [data-tucu='file-input'][data-color]
1536
+ [data-tucu='file-input-preview'] {
1537
+ border-color: color-mix(
1538
+ in srgb,
1539
+ var(--macos-file-input-color) 32%,
1540
+ var(--macos-separator)
1541
+ ) !important;
1542
+ background-color: color-mix(
1543
+ in srgb,
1544
+ var(--macos-file-input-color) 12%,
1545
+ color-mix(in srgb, var(--macos-gray5) 90%, var(--macos-control-bg))
1546
+ ) !important;
1547
+ }
1548
+
1549
+ html.macos-tahoe.dark [data-tucu='file-input-dropzone'] {
1550
+ border-color: color-mix(
1551
+ in srgb,
1552
+ var(--macos-control-accent) 24%,
1553
+ var(--macos-separator)
1554
+ ) !important;
1555
+ background-color: color-mix(
1556
+ in srgb,
1557
+ var(--macos-gray5) 86%,
1558
+ var(--macos-control-bg)
1559
+ ) !important;
1560
+ }
1561
+
1562
+ html.macos-tahoe.dark [data-tucu='file-input-dropzone']:hover,
1563
+ html.macos-tahoe.dark [data-tucu='file-input-dropzone']:focus-within {
1564
+ border-color: color-mix(
1565
+ in srgb,
1566
+ var(--macos-control-accent) 52%,
1567
+ var(--macos-separator)
1568
+ ) !important;
1569
+ background-color: color-mix(
1570
+ in srgb,
1571
+ var(--macos-gray5) 94%,
1572
+ var(--macos-control-bg)
1573
+ ) !important;
1574
+ }
1575
+
1576
+ html.macos-tahoe.dark [data-tucu='file-input-placeholder'] {
1577
+ color: var(--macos-secondary-label) !important;
1578
+ }
1579
+
1580
+ html.macos-tahoe.dark [data-tucu='file-input-image-preview'],
1581
+ html.macos-tahoe.dark [data-tucu='file-input-preview'] {
1582
+ border-color: var(--macos-separator) !important;
1583
+ background-color: color-mix(
1584
+ in srgb,
1585
+ var(--macos-gray5) 90%,
1586
+ var(--macos-control-bg)
1587
+ ) !important;
1588
+ }
1589
+
1590
+ /* ── Responsive: larger touch targets on mobile ──────────────── */
1591
+ @media (max-width: 767px) {
1592
+ html.macos-tahoe [data-tucu='input'],
1593
+ html.macos-tahoe [data-tucu='select'],
1594
+ html.macos-tahoe [data-tucu='input-searcher'] {
1595
+ min-height: 44px;
1596
+ font-size: 16px; /* prevents iOS zoom on focus */
1597
+ }
1598
+
1599
+ html.macos-tahoe [data-tucu='checkbox'] {
1600
+ min-width: 20px;
1601
+ min-height: 20px;
1602
+ }
1603
+
1604
+ html.macos-tahoe [data-tucu='radio-group'] input[type='radio'] {
1605
+ min-width: 22px;
1606
+ min-height: 22px;
1607
+ }
1608
+
1609
+ html.macos-tahoe [data-tucu='switch'] {
1610
+ min-height: 28px;
1611
+ }
1612
+ }
1613
+
1614
+ /* ============================================================
1615
+ macOS Tahoe 26 — Inputs Overrides (Liquid Glass)
1616
+ ============================================================ */
1617
+
1618
+ /* ── Base Input/Select/Textarea Tahoe ───────────────────────── */
1619
+ html.macos-tahoe [data-tucu='input-control'],
1620
+ html.macos-tahoe [data-tucu='textarea'],
1621
+ html.macos-tahoe [data-tucu='select-trigger'] {
1622
+ background: var(--macos-glass-clear-bg);
1623
+ backdrop-filter: blur(var(--macos-glass-clear-blur));
1624
+ -webkit-backdrop-filter: blur(var(--macos-glass-clear-blur));
1625
+ border: 1px solid var(--macos-glass-clear-border);
1626
+ color: var(--macos-label);
1627
+ transition: all var(--macos-transition-fast);
1628
+ }
1629
+
1630
+ html.macos-tahoe [data-tucu='input-control']:focus,
1631
+ html.macos-tahoe [data-tucu='textarea']:focus,
1632
+ html.macos-tahoe [data-tucu='select-trigger']:focus {
1633
+ background: var(--macos-glass-regular-bg);
1634
+ backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
1635
+ -webkit-backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
1636
+ border: 1px solid var(--macos-glass-regular-border);
1637
+ box-shadow: var(--macos-glass-shadow), var(--macos-focus-ring);
1638
+ outline: none;
1639
+ }
1640
+
1641
+ html.macos-tahoe [data-tucu='input-control'][aria-invalid='true'],
1642
+ html.macos-tahoe [data-tucu='textarea'][aria-invalid='true'],
1643
+ html.macos-tahoe [data-tucu='select-trigger'][aria-invalid='true'] {
1644
+ border-color: var(--color-semantic-text-error);
1645
+ box-shadow: 0 0 0 2px var(--color-semantic-text-error-subtle);
1646
+ }
1647
+
1648
+ @media (prefers-reduced-transparency: reduce) {
1649
+ html.macos-tahoe [data-tucu='input-control'],
1650
+ html.macos-tahoe [data-tucu='textarea'],
1651
+ html.macos-tahoe [data-tucu='select-trigger'] {
1652
+ backdrop-filter: none !important;
1653
+ -webkit-backdrop-filter: none !important;
1654
+ background: var(--color-semantic-elevation-2);
1655
+ }
1656
+ }