orbital-ds 0.6.2 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/AGENTS.md +20 -0
  2. package/README.md +87 -73
  3. package/components.manifest.json +2 -1
  4. package/contract.json +168 -162
  5. package/dist/styles.css +32 -10
  6. package/dist/themes/friendly.css +318 -310
  7. package/dist/themes/friendly.scoped.css +318 -310
  8. package/dist/themes/qratia.css +8 -0
  9. package/dist/themes/qratia.scoped.css +10 -2
  10. package/dist/themes/tactile.css +430 -415
  11. package/dist/themes/tactile.meta.json +75 -9
  12. package/dist/themes/tactile.scoped.css +430 -415
  13. package/dist/themes/twitter.css +298 -290
  14. package/dist/themes/twitter.meta.json +54 -7
  15. package/dist/themes/twitter.scoped.css +298 -290
  16. package/dist/themes/zyro.css +389 -381
  17. package/dist/themes/zyro.scoped.css +389 -381
  18. package/dist/ui/sidebar.js +1 -1
  19. package/dist/ui/tooltip.js +1 -1
  20. package/docs/CONTRACT.md +1 -1
  21. package/package.json +1 -1
  22. package/scripts/doctor.mjs +29 -0
  23. package/scripts/init.mjs +351 -89
package/dist/themes/tactile.scoped.css CHANGED
@@ -1,415 +1,430 @@
1
- /*
2
- * TEMA tactile — interfaz táctil de papel y tinta, con rotulador.
3
- *
4
- * Dirección ORIGINAL (no copia ninguna referencia: toma un principio de cada una).
5
- * - Lo que se pulsa lleva TINTA: contorno de 2px y una arista inferior de 5px que
6
- * baja al pulsar, como una tecla. Las superficies llevan filete suave.
7
- * - Un ROTULADOR mostaza translúcido bajo los títulos.
8
- * - Papel cálido y tinta berenjena casi negra (nunca #000). Un acento vivo
9
- * (mostaza, con texto de tinta: contraste 10:1) y uno pequeño (pino).
10
- * - Formas: 8 · 12 · 14 · 16. Sin sombras difusas: la profundidad la dan las aristas.
11
- * - Titulares en Fraunces (serifa suave) y cuerpo en Figtree.
12
- *
13
- * Importar DESPUÉS de la estructura. Variables `--zw-*`: privadas de este tema.
14
- * Fuentes: `tactile.fonts.css`, lo primero del CSS de la app.
15
- */
16
-
17
- /* ── VARIABLES · PIEL CLARA («papel») ────────────────────────────────────── */
18
- :root[data-theme='tactile'] {
19
- --radius: 16px;
20
-
21
- --ds-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
22
- --ds-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
23
- --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
24
- --ds-heading-tracking: -0.01em;
25
-
26
- --background: #f6f0e3;
27
- --foreground: #2a2233;
28
-
29
- --card: #fffcf4;
30
- --card-foreground: #2a2233;
31
- --popover: #fffcf4;
32
- --popover-foreground: #2a2233;
33
-
34
- --primary: #f2b33d;
35
- --primary-foreground: #2a2233;
36
- --secondary: #ede3cd;
37
- --secondary-foreground: #2a2233;
38
- --muted: #ede3cd;
39
- --muted-foreground: rgba(42, 34, 51, 0.7);
40
- --accent: rgba(242, 179, 61, 0.3);
41
- --accent-foreground: #2a2233;
42
- --destructive: #b53a22;
43
- --destructive-foreground: #fffcf4;
44
-
45
- --border: rgba(42, 34, 51, 0.14);
46
- --input: #2a2233;
47
- --ring: #17624f;
48
-
49
- --chart-1: #f2b33d;
50
- --chart-2: #17624f;
51
- --chart-3: #2f6fb0;
52
- --chart-4: #b53a22;
53
- --chart-5: #8b5a9e;
54
-
55
- --sidebar: #ede3cd;
56
- --sidebar-foreground: #2a2233;
57
- --sidebar-primary: #f2b33d;
58
- --sidebar-primary-foreground: #2a2233;
59
- --sidebar-accent: #fffcf4;
60
- --sidebar-accent-foreground: #2a2233;
61
- --sidebar-border: rgba(42, 34, 51, 0.26);
62
- --sidebar-ring: #17624f;
63
-
64
- --danger: #ae3821;
65
- --danger-soft: rgba(214, 69, 43, 0.13);
66
- --warning: #7a5200;
67
- --warning-soft: rgba(242, 179, 61, 0.3);
68
- --success: #17624f;
69
- --success-soft: rgba(23, 98, 79, 0.12);
70
- --info: #2a649e;
71
- --info-soft: rgba(47, 111, 176, 0.12);
72
- --neutral: rgba(42, 34, 51, 0.72);
73
- --neutral-soft: rgba(42, 34, 51, 0.08);
74
-
75
- --link: #17624f;
76
- --link-hover: #0f4538;
77
- --inset: #ede3cd;
78
- --inset-foreground: #2a2233;
79
- --brand: #f2b33d;
80
- --brand-bright: #f7c566;
81
-
82
- /* Formas */
83
- --ds-radius-sm: 8px;
84
- --ds-radius-md: 12px;
85
- --ds-radius-lg: 14px;
86
- --ds-radius-xl: 16px;
87
- --ds-radius-2xl: 20px;
88
- --ds-radius-control: 12px;
89
- --ds-radius-overlay: 18px;
90
-
91
- /* Sin sombras difusas: la profundidad la dan las aristas (ver la personalidad) */
92
- --ds-shadow-card: 0 0 #0000;
93
- --ds-shadow-card-hover: 0 0 #0000;
94
- --ds-shadow-control: 0 0 #0000;
95
- --ds-shadow-raised: 0 0 #0000;
96
- --ds-shadow-overlay: 0 8px 0 rgba(42, 34, 51, 0.12);
97
- --ds-shadow-popover: 0 6px 0 rgba(42, 34, 51, 0.12);
98
-
99
- /* Medidas: teclas generosas */
100
- --ds-control-h-sm: 2.25rem;
101
- --ds-control-h-md: 2.75rem;
102
- --ds-control-h-lg: 3.25rem;
103
- --ds-button-px-sm: 0.875rem;
104
- --ds-button-px-md: 1.125rem;
105
- --ds-button-px-lg: 1.5rem;
106
- --ds-field-px: 0.875rem;
107
- --ds-card-spacing: 1.25rem;
108
- --ds-card-spacing-sm: 1rem;
109
-
110
- /* Materiales: ninguno */
111
- --ds-card-backdrop: none;
112
- --ds-overlay-backdrop: none;
113
- --ds-field-backdrop: none;
114
- --ds-sidebar-backdrop: none;
115
- --ds-page-backdrop: none;
116
-
117
- /* Sidebar a ras de borde, papel más hondo, filas como teclas */
118
- --ds-sidebar-pad: 0px;
119
- --ds-sidebar-radius: 0px;
120
- --ds-sidebar-shadow: 0 0 #0000;
121
- --ds-sidebar-ring: 0px;
122
- --ds-sidebar-edge: 2px solid var(--sidebar-border);
123
- --ds-sidebar-item-radius: 14px;
124
- --ds-sidebar-item-h: 2.75rem;
125
- --ds-sidebar-rail-w: 4.5rem; /* raíl contraído: aire para la arista de la tecla activa */
126
-
127
- /* Baldosas de icono: grandes, tintadas y con relleno duotono suave */
128
- --ds-icon-tile-sm: 2.25rem;
129
- --ds-icon-tile-md: 3.5rem;
130
- --ds-icon-tile-lg: 4.5rem;
131
- --ds-icon-tile-radius: var(--ds-radius-xl);
132
- --ds-icon-tile-fill: 0.2;
133
-
134
- /* Privadas de tactile */
135
- --zw-outline: #2a2233;
136
- --zw-edge: rgba(42, 34, 51, 0.26);
137
- --zw-mark: rgba(242, 179, 61, 0.62);
138
- }
139
-
140
- /* ── VARIABLES · PIEL OSCURA («noche») ───────────────────────────────────── */
141
- :root[data-theme='tactile'].dark {
142
- --background: #1d1824;
143
- --foreground: #f4ebda;
144
-
145
- --card: #2c2636;
146
- --card-foreground: #f4ebda;
147
- --popover: #2c2636;
148
- --popover-foreground: #f4ebda;
149
-
150
- --primary: #f2b33d;
151
- --primary-foreground: #1d1824;
152
- --secondary: #25202e;
153
- --secondary-foreground: #f4ebda;
154
- --muted: #25202e;
155
- --muted-foreground: rgba(244, 235, 218, 0.72);
156
- --accent: rgba(242, 179, 61, 0.18);
157
- --accent-foreground: #f7c566;
158
- --destructive: #ff8266;
159
- --destructive-foreground: #1d1824;
160
-
161
- --border: rgba(244, 235, 218, 0.14);
162
- --input: rgba(244, 235, 218, 0.92);
163
- --ring: #5cc9a8;
164
-
165
- --chart-1: #f2b33d;
166
- --chart-2: #5cc9a8;
167
- --chart-3: #7db3f0;
168
- --chart-4: #ff8266;
169
- --chart-5: #c79ad8;
170
-
171
- --sidebar: #25202e;
172
- --sidebar-foreground: #f4ebda;
173
- --sidebar-primary: #f2b33d;
174
- --sidebar-primary-foreground: #1d1824;
175
- --sidebar-accent: #2c2636;
176
- --sidebar-accent-foreground: #f4ebda;
177
- --sidebar-border: rgba(244, 235, 218, 0.26);
178
- --sidebar-ring: #5cc9a8;
179
-
180
- --danger: #ff8266;
181
- --danger-soft: rgba(255, 130, 102, 0.16);
182
- --warning: #f2b33d;
183
- --warning-soft: rgba(242, 179, 61, 0.18);
184
- --success: #5cc9a8;
185
- --success-soft: rgba(92, 201, 168, 0.16);
186
- --info: #7db3f0;
187
- --info-soft: rgba(125, 179, 240, 0.16);
188
- --neutral: rgba(244, 235, 218, 0.72);
189
- --neutral-soft: rgba(244, 235, 218, 0.1);
190
-
191
- --link: #5cc9a8;
192
- --link-hover: #8ee0c4;
193
- --inset: #25202e;
194
- --inset-foreground: #f4ebda;
195
- --brand: #f2b33d;
196
- --brand-bright: #f7c566;
197
-
198
- --ds-shadow-overlay: 0 8px 0 rgba(0, 0, 0, 0.4);
199
- --ds-shadow-popover: 0 6px 0 rgba(0, 0, 0, 0.4);
200
-
201
- --zw-outline: rgba(244, 235, 218, 0.92);
202
- --zw-edge: rgba(244, 235, 218, 0.26);
203
- --zw-mark: rgba(242, 179, 61, 0.45);
204
- }
205
-
206
- /* ── PERSONALIDAD ────────────────────────────────────────────────────────────
207
- * Sin capa: gana a las utilidades de los componentes. Solo variables. No usa
208
- * box-shadow en los controles, así el anillo de foco sigue funcionando.
209
- */
210
- :root[data-theme='tactile'] {
211
- /* Teclas: contorno de tinta y arista inferior; al pulsar, se hunden */
212
- [data-slot='button'] {
213
- border: 2px solid var(--zw-outline);
214
- border-bottom-width: 5px;
215
- border-radius: 14px;
216
- font-weight: 700;
217
- transition:
218
- transform var(--ds-motion-fast) ease,
219
- border-bottom-width var(--ds-motion-fast) ease,
220
- background-color var(--ds-motion-base) ease;
221
- }
222
- [data-slot='button']:active:not(:disabled) {
223
- transform: translateY(3px);
224
- border-bottom-width: 2px;
225
- }
226
- [data-slot='button']:disabled {
227
- opacity: 0.45;
228
- }
229
- [data-slot='button'][data-variant='default']:hover:not(:disabled) {
230
- background-color: color-mix(in oklch, var(--primary) 78%, var(--card));
231
- }
232
- [data-slot='button'][data-variant='secondary'],
233
- [data-slot='button'][data-variant='outline'] {
234
- background: var(--card);
235
- color: var(--foreground);
236
- }
237
- [data-slot='button'][data-variant='outline'] {
238
- background: transparent;
239
- }
240
- [data-slot='button'][data-variant='secondary']:hover:not(:disabled),
241
- [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
242
- background: var(--secondary);
243
- }
244
- [data-slot='button'][data-variant='ghost'] {
245
- border-color: transparent;
246
- border-bottom-width: 2px;
247
- }
248
- [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
249
- background: var(--secondary);
250
- }
251
- [data-slot='button'][data-variant='destructive'] {
252
- background: var(--destructive);
253
- color: var(--destructive-foreground);
254
- }
255
- [data-slot='button'][data-variant='link'] {
256
- border: 0;
257
- font-weight: 700;
258
- }
259
- [data-slot='button'][data-variant='link']:active:not(:disabled) {
260
- transform: none;
261
- }
262
-
263
- /* Superficies: filete suave y una arista inferior más marcada */
264
- [data-slot='card'] {
265
- border: 2px solid var(--border);
266
- border-bottom: 5px solid var(--zw-edge);
267
- box-shadow: none;
268
- }
269
-
270
- /* Campos: contorno de tinta */
271
- [data-slot='input'],
272
- [data-slot='textarea'],
273
- [data-slot='select-trigger'] {
274
- background: var(--card);
275
- border: 2px solid var(--input);
276
- }
277
-
278
- /* Etiquetas: esquina de 8px, no píldora */
279
- [data-slot='badge'] {
280
- border-radius: 8px;
281
- font-weight: 700;
282
- }
283
-
284
- /* Pestañas: teclas pequeñas; la activa, en mostaza */
285
- [data-slot='tabs-list'] {
286
- background: transparent;
287
- gap: 8px;
288
- }
289
- [data-slot='tabs-trigger'] {
290
- border: 2px solid var(--border);
291
- border-bottom-width: 4px;
292
- border-radius: 12px;
293
- font-weight: 700;
294
- background: transparent;
295
- }
296
- [data-slot='tabs-trigger'][data-active] {
297
- background: var(--primary);
298
- color: var(--primary-foreground);
299
- border-color: var(--zw-outline);
300
- }
301
-
302
- /* Interruptor, casilla y progreso, con tinta */
303
- [data-slot='switch'] {
304
- border: 2px solid var(--zw-outline);
305
- border-bottom-width: 4px;
306
- border-radius: 12px;
307
- }
308
- [data-slot='switch'][data-checked] {
309
- background: var(--primary);
310
- }
311
- [data-slot='switch-thumb'] {
312
- border-radius: 7px;
313
- background: var(--zw-outline);
314
- }
315
- [data-slot='checkbox'] {
316
- border: 2px solid var(--zw-outline);
317
- border-radius: 8px;
318
- }
319
- [data-slot='checkbox'][data-checked] {
320
- background: var(--primary);
321
- color: var(--primary-foreground);
322
- }
323
- [data-slot='progress'] {
324
- border: 2px solid var(--zw-outline);
325
- border-radius: 8px;
326
- background: var(--background);
327
- }
328
- [data-slot='progress-indicator'] {
329
- background: var(--primary);
330
- }
331
-
332
- /* Capas flotantes: contorno de tinta y arista inferior */
333
- [data-slot='dialog-content'],
334
- [data-slot='sheet-content'] {
335
- border: 2px solid var(--zw-outline);
336
- border-bottom-width: 6px;
337
- }
338
- [data-slot='popover-content'],
339
- [data-slot='dropdown-menu-content'],
340
- [data-slot='select-content'] {
341
- border: 2px solid var(--zw-outline);
342
- border-bottom-width: 4px;
343
- }
344
-
345
- /* Avisos con tinta */
346
- [data-slot='alert'] {
347
- border: 2px solid var(--zw-outline);
348
- border-radius: 14px;
349
- }
350
-
351
- /* Tablas: filetes de 2px */
352
- [data-slot='table-row'] {
353
- border-top: 2px solid var(--border);
354
- }
355
- [data-slot='table-head'] {
356
- text-transform: uppercase;
357
- font-size: 0.75rem;
358
- letter-spacing: 0.08em;
359
- font-weight: 700;
360
- color: var(--muted-foreground);
361
- }
362
-
363
- /* Teclas del teclado */
364
- [data-slot='kbd'] {
365
- border: 2px solid var(--zw-outline);
366
- border-bottom-width: 4px;
367
- border-radius: 8px;
368
- background: var(--card);
369
- font-weight: 700;
370
- }
371
-
372
- /* ROTULADOR: franja translúcida bajo el título (la mitad inferior de la letra) */
373
- [data-slot='card-title'],
374
- [data-slot='dialog-title'],
375
- [data-slot='sheet-title'],
376
- header h1 {
377
- width: fit-content;
378
- max-width: 100%;
379
- background: linear-gradient(transparent 56%, var(--zw-mark) 56%);
380
- padding-inline: 0.14em;
381
- margin-inline: -0.14em;
382
- -webkit-box-decoration-break: clone;
383
- box-decoration-break: clone;
384
- }
385
-
386
- /* Sidebar: filas como teclas; la activa, elevada */
387
- [data-sidebar='menu-button'] {
388
- border: 2px solid transparent;
389
- border-radius: 14px;
390
- font-weight: 600;
391
- }
392
- /* Al señalar: la tecla se insinúa (filete y arista suave); al pulsar, se hunde */
393
- [data-sidebar='menu-button']:hover:not([data-active='true']) {
394
- background: var(--card);
395
- border-color: var(--zw-edge);
396
- border-bottom-width: 4px;
397
- }
398
- [data-sidebar='menu-button']:active:not([data-active='true']) {
399
- border-bottom-width: 2px;
400
- transform: translateY(2px);
401
- }
402
- [data-sidebar='menu-button'][data-active='true'] {
403
- background: var(--card);
404
- border-color: var(--zw-outline);
405
- border-bottom-width: 5px;
406
- }
407
- /* Tooltips: etiqueta de tinta con arista inferior, como una tecla invertida */
408
- [data-slot='tooltip-content'] {
409
- background: var(--foreground);
410
- color: var(--background);
411
- border-radius: 12px;
412
- border-bottom: 4px solid var(--zw-edge);
413
- font-weight: 700;
414
- }
415
- }
1
+ /*
2
+ * TEMA tactile — interfaz táctil de papel y tinta, con rotulador.
3
+ *
4
+ * Dirección ORIGINAL (no copia ninguna referencia: toma un principio de cada una).
5
+ * - Lo que se pulsa lleva TINTA: contorno de 2px y una arista inferior de 5px que
6
+ * baja al pulsar, como una tecla. Las superficies llevan filete suave.
7
+ * - Un ROTULADOR mostaza translúcido bajo los títulos.
8
+ * - Papel cálido y tinta berenjena casi negra (nunca #000). Un acento vivo
9
+ * (mostaza, con texto de tinta: contraste 10:1) y uno pequeño (pino).
10
+ * - Formas: 8 · 12 · 14 · 16. Sin sombras difusas: la profundidad la dan las aristas.
11
+ * - Titulares en Fraunces (serifa suave) y cuerpo en Figtree.
12
+ *
13
+ * Importar DESPUÉS de la estructura. Gesto: `--ds-key-outline`, `--ds-key-edge`, `--ds-marker`.
14
+ * Las antiguas `--zw-outline|edge|mark` siguen funcionando como alternativa, pero están obsoletas.
15
+ * Fuentes: `tactile.fonts.css`, lo primero del CSS de la app.
16
+ */
17
+
18
+ /* ── VARIABLES · PIEL CLARA («papel») ────────────────────────────────────── */
19
+ :root:where([data-theme='tactile']) {
20
+ --radius: 16px;
21
+
22
+ --ds-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
23
+ --ds-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
24
+ --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
25
+
26
+ /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
27
+ --ds-sidebar-icon: 1.5rem;
28
+ --ds-sidebar-icon-stroke: 2.1;
29
+ --ds-sidebar-rail-w: 5rem;
30
+ --ds-sidebar-rail-item: 3rem;
31
+ --ds-sidebar-logo: 2.5rem;
32
+ --ds-sidebar-sep-inset: -0.5rem;
33
+ --ds-heading-tracking: -0.01em;
34
+
35
+ --background: #f6f0e3;
36
+ --foreground: #2a2233;
37
+
38
+ --card: #fffcf4;
39
+ --card-foreground: #2a2233;
40
+ --popover: #fffcf4;
41
+ --popover-foreground: #2a2233;
42
+
43
+ --primary: #f2b33d;
44
+ --primary-foreground: #2a2233;
45
+ --secondary: #ede3cd;
46
+ --secondary-foreground: #2a2233;
47
+ --muted: #ede3cd;
48
+ --muted-foreground: rgba(42, 34, 51, 0.7);
49
+ --accent: color-mix(in srgb, var(--primary) 30%, transparent);
50
+ --accent-foreground: #2a2233;
51
+ --destructive: #b53a22;
52
+ --destructive-foreground: #fffcf4;
53
+
54
+ --border: rgba(42, 34, 51, 0.14);
55
+ --input: #2a2233;
56
+ --ring: #17624f;
57
+
58
+ --chart-1: #f2b33d;
59
+ --chart-2: #17624f;
60
+ --chart-3: #2f6fb0;
61
+ --chart-4: #b53a22;
62
+ --chart-5: #8b5a9e;
63
+
64
+ --sidebar: #ede3cd;
65
+ --sidebar-foreground: #2a2233;
66
+ --sidebar-primary: #f2b33d;
67
+ --sidebar-primary-foreground: #2a2233;
68
+ --sidebar-accent: #fffcf4;
69
+ --sidebar-accent-foreground: #2a2233;
70
+ --sidebar-border: rgba(42, 34, 51, 0.26);
71
+ --sidebar-ring: #17624f;
72
+
73
+ --danger: #ae3821;
74
+ --danger-soft: rgba(214, 69, 43, 0.13);
75
+ --warning: #7a5200;
76
+ --warning-soft: rgba(242, 179, 61, 0.3);
77
+ --success: #17624f;
78
+ --success-soft: rgba(23, 98, 79, 0.12);
79
+ --info: #2a649e;
80
+ --info-soft: rgba(47, 111, 176, 0.12);
81
+ --neutral: rgba(42, 34, 51, 0.72);
82
+ --neutral-soft: rgba(42, 34, 51, 0.08);
83
+
84
+ --link: #17624f;
85
+ --link-hover: #0f4538;
86
+ --inset: #ede3cd;
87
+ --inset-foreground: #2a2233;
88
+ --brand: #f2b33d;
89
+ --brand-bright: #f7c566;
90
+
91
+ /* Formas */
92
+ --ds-radius-sm: 8px;
93
+ --ds-radius-md: 12px;
94
+ --ds-radius-lg: 14px;
95
+ --ds-radius-xl: 16px;
96
+ --ds-radius-2xl: 20px;
97
+ --ds-radius-control: 12px;
98
+ --ds-radius-overlay: 18px;
99
+
100
+ /* Sin sombras difusas: la profundidad la dan las aristas (ver la personalidad) */
101
+ --ds-shadow-card: 0 0 #0000;
102
+ --ds-shadow-card-hover: 0 0 #0000;
103
+ --ds-shadow-control: 0 0 #0000;
104
+ --ds-shadow-raised: 0 0 #0000;
105
+ --ds-shadow-overlay: 0 8px 0 rgba(42, 34, 51, 0.12);
106
+ --ds-shadow-popover: 0 6px 0 rgba(42, 34, 51, 0.12);
107
+
108
+ /* Medidas: teclas generosas */
109
+ --ds-control-h-sm: 2.25rem;
110
+ --ds-control-h-md: 2.75rem;
111
+ --ds-control-h-lg: 3.25rem;
112
+ --ds-button-px-sm: 0.875rem;
113
+ --ds-button-px-md: 1.125rem;
114
+ --ds-button-px-lg: 1.5rem;
115
+ --ds-field-px: 0.875rem;
116
+ --ds-card-spacing: 1.25rem;
117
+ --ds-card-spacing-sm: 1rem;
118
+
119
+ /* Materiales: ninguno */
120
+ --ds-card-backdrop: none;
121
+ --ds-overlay-backdrop: none;
122
+ --ds-field-backdrop: none;
123
+ --ds-sidebar-backdrop: none;
124
+ --ds-page-backdrop: none;
125
+
126
+ /* Sidebar a ras de borde, papel más hondo, filas como teclas */
127
+ --ds-sidebar-pad: 0px;
128
+ --ds-sidebar-radius: 0px;
129
+ --ds-sidebar-shadow: 0 0 #0000;
130
+ --ds-sidebar-ring: 0px;
131
+ --ds-sidebar-edge: 2px solid var(--sidebar-border);
132
+ --ds-sidebar-item-radius: 14px;
133
+ --ds-sidebar-item-h: 3rem;
134
+
135
+ /* Baldosas de icono: grandes, tintadas y con relleno duotono suave */
136
+ --ds-icon-tile-sm: 2.25rem;
137
+ --ds-icon-tile-md: 3.5rem;
138
+ --ds-icon-tile-lg: 4.5rem;
139
+ --ds-icon-tile-radius: var(--ds-radius-xl);
140
+ --ds-icon-tile-fill: 0.2;
141
+
142
+ /* Gesto de tactile (variables públicas; apaga el rotulador con --ds-marker: transparent) */
143
+ --ds-key-outline: var(--zw-outline, #2a2233); /* contorno de las teclas (--zw-outline está obsoleta) */
144
+ --ds-key-edge: var(--zw-edge, rgba(42, 34, 51, 0.26)); /* arista de las teclas */
145
+ --ds-marker: var(--zw-mark, color-mix(in srgb, var(--primary) 62%, transparent)); /* rotulador bajo los títulos; transparent = apagado */
146
+ }
147
+
148
+ /* ── VARIABLES · PIEL OSCURA («noche») ───────────────────────────────────── */
149
+ :where(:root[data-theme='tactile']).dark {
150
+ --background: #1d1824;
151
+ --foreground: #f4ebda;
152
+
153
+ --card: #2c2636;
154
+ --card-foreground: #f4ebda;
155
+ --popover: #2c2636;
156
+ --popover-foreground: #f4ebda;
157
+
158
+ --primary: #f2b33d;
159
+ --primary-foreground: #1d1824;
160
+ --secondary: #25202e;
161
+ --secondary-foreground: #f4ebda;
162
+ --muted: #25202e;
163
+ --muted-foreground: rgba(244, 235, 218, 0.72);
164
+ --accent: color-mix(in srgb, var(--primary) 18%, transparent);
165
+ --accent-foreground: #f7c566;
166
+ --destructive: #ff8266;
167
+ --destructive-foreground: #1d1824;
168
+
169
+ --border: rgba(244, 235, 218, 0.14);
170
+ --input: rgba(244, 235, 218, 0.92);
171
+ --ring: #5cc9a8;
172
+
173
+ --chart-1: #f2b33d;
174
+ --chart-2: #5cc9a8;
175
+ --chart-3: #7db3f0;
176
+ --chart-4: #ff8266;
177
+ --chart-5: #c79ad8;
178
+
179
+ --sidebar: #25202e;
180
+ --sidebar-foreground: #f4ebda;
181
+ --sidebar-primary: #f2b33d;
182
+ --sidebar-primary-foreground: #1d1824;
183
+ --sidebar-accent: #2c2636;
184
+ --sidebar-accent-foreground: #f4ebda;
185
+ --sidebar-border: rgba(244, 235, 218, 0.26);
186
+ --sidebar-ring: #5cc9a8;
187
+
188
+ --danger: #ff8266;
189
+ --danger-soft: rgba(255, 130, 102, 0.16);
190
+ --warning: #f2b33d;
191
+ --warning-soft: rgba(242, 179, 61, 0.18);
192
+ --success: #5cc9a8;
193
+ --success-soft: rgba(92, 201, 168, 0.16);
194
+ --info: #7db3f0;
195
+ --info-soft: rgba(125, 179, 240, 0.16);
196
+ --neutral: rgba(244, 235, 218, 0.72);
197
+ --neutral-soft: rgba(244, 235, 218, 0.1);
198
+
199
+ --link: #5cc9a8;
200
+ --link-hover: #8ee0c4;
201
+ --inset: #25202e;
202
+ --inset-foreground: #f4ebda;
203
+ --brand: #f2b33d;
204
+ --brand-bright: #f7c566;
205
+
206
+ --ds-shadow-overlay: 0 8px 0 rgba(0, 0, 0, 0.4);
207
+ --ds-shadow-popover: 0 6px 0 rgba(0, 0, 0, 0.4);
208
+
209
+ --ds-key-outline: var(--zw-outline, rgba(244, 235, 218, 0.92));
210
+ --ds-key-edge: var(--zw-edge, rgba(244, 235, 218, 0.26));
211
+ --ds-marker: var(--zw-mark, color-mix(in srgb, var(--primary) 45%, transparent));
212
+ }
213
+
214
+ /* ── PERSONALIDAD ────────────────────────────────────────────────────────────
215
+ * Sin capa: gana a las utilidades de los componentes. Solo variables. No usa
216
+ * box-shadow en los controles, así el anillo de foco sigue funcionando.
217
+ */
218
+ :root:where([data-theme='tactile']) {
219
+ /* Teclas: contorno de tinta y arista inferior; al pulsar, se hunden */
220
+ [data-slot='button'] {
221
+ border: 2px solid var(--ds-key-outline);
222
+ border-bottom-width: 5px;
223
+ border-radius: 14px;
224
+ font-weight: 700;
225
+ transition:
226
+ transform var(--ds-motion-fast) ease,
227
+ border-bottom-width var(--ds-motion-fast) ease,
228
+ background-color var(--ds-motion-base) ease;
229
+ }
230
+ [data-slot='button']:active:not(:disabled) {
231
+ transform: translateY(3px);
232
+ border-bottom-width: 2px;
233
+ }
234
+ [data-slot='button']:disabled {
235
+ opacity: 0.45;
236
+ }
237
+ [data-slot='button'][data-variant='default']:hover:not(:disabled) {
238
+ background-color: color-mix(in oklch, var(--primary) 78%, var(--card));
239
+ }
240
+ [data-slot='button'][data-variant='secondary'],
241
+ [data-slot='button'][data-variant='outline'] {
242
+ background: var(--card);
243
+ color: var(--foreground);
244
+ }
245
+ [data-slot='button'][data-variant='outline'] {
246
+ background: transparent;
247
+ }
248
+ [data-slot='button'][data-variant='secondary']:hover:not(:disabled),
249
+ [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
250
+ background: var(--secondary);
251
+ }
252
+ [data-slot='button'][data-variant='ghost'] {
253
+ border-color: transparent;
254
+ border-bottom-width: 2px;
255
+ }
256
+ [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
257
+ background: var(--secondary);
258
+ }
259
+ [data-slot='button'][data-variant='destructive'] {
260
+ background: var(--destructive);
261
+ color: var(--destructive-foreground);
262
+ }
263
+ [data-slot='button'][data-variant='link'] {
264
+ border: 0;
265
+ font-weight: 700;
266
+ }
267
+ [data-slot='button'][data-variant='link']:active:not(:disabled) {
268
+ transform: none;
269
+ }
270
+
271
+ /* Superficies: filete suave y una arista inferior más marcada */
272
+ [data-slot='card'] {
273
+ border: 2px solid var(--border);
274
+ border-bottom: 5px solid var(--ds-key-edge);
275
+ box-shadow: none;
276
+ }
277
+
278
+ /* Campos: contorno de tinta */
279
+ [data-slot='input'],
280
+ [data-slot='textarea'],
281
+ [data-slot='select-trigger'] {
282
+ background: var(--card);
283
+ border: 2px solid var(--input);
284
+ }
285
+
286
+ /* Etiquetas: esquina de 8px, no píldora */
287
+ [data-slot='badge'] {
288
+ border-radius: 8px;
289
+ font-weight: 700;
290
+ }
291
+
292
+ /* Pestañas: teclas pequeñas; la activa, en mostaza */
293
+ [data-slot='tabs-list'] {
294
+ background: transparent;
295
+ gap: 8px;
296
+ }
297
+ [data-slot='tabs-trigger'] {
298
+ border: 2px solid var(--border);
299
+ border-bottom-width: 4px;
300
+ border-radius: 12px;
301
+ font-weight: 700;
302
+ background: transparent;
303
+ }
304
+ [data-slot='tabs-trigger'][data-active] {
305
+ background: var(--primary);
306
+ color: var(--primary-foreground);
307
+ border-color: var(--ds-key-outline);
308
+ }
309
+
310
+ /* Interruptor, casilla y progreso, con tinta */
311
+ [data-slot='switch'] {
312
+ border: 2px solid var(--ds-key-outline);
313
+ border-bottom-width: 4px;
314
+ border-radius: 12px;
315
+ }
316
+ [data-slot='switch'][data-checked] {
317
+ background: var(--primary);
318
+ }
319
+ [data-slot='switch-thumb'] {
320
+ border-radius: 7px;
321
+ background: var(--ds-key-outline);
322
+ }
323
+ [data-slot='checkbox'] {
324
+ border: 2px solid var(--ds-key-outline);
325
+ border-radius: 8px;
326
+ }
327
+ [data-slot='checkbox'][data-checked] {
328
+ background: var(--primary);
329
+ color: var(--primary-foreground);
330
+ }
331
+ [data-slot='progress'] {
332
+ border: 2px solid var(--ds-key-outline);
333
+ border-radius: 8px;
334
+ background: var(--background);
335
+ }
336
+ [data-slot='progress-indicator'] {
337
+ background: var(--primary);
338
+ }
339
+
340
+ /* Capas flotantes: contorno de tinta y arista inferior */
341
+ [data-slot='dialog-content'],
342
+ [data-slot='sheet-content'] {
343
+ border: 2px solid var(--ds-key-outline);
344
+ border-bottom-width: 6px;
345
+ }
346
+ [data-slot='popover-content'],
347
+ [data-slot='dropdown-menu-content'],
348
+ [data-slot='select-content'] {
349
+ border: 2px solid var(--ds-key-outline);
350
+ border-bottom-width: 4px;
351
+ }
352
+
353
+ /* Avisos con tinta */
354
+ [data-slot='alert'] {
355
+ border: 2px solid var(--ds-key-outline);
356
+ border-radius: 14px;
357
+ }
358
+
359
+ /* Tablas: filetes de 2px */
360
+ [data-slot='table-row'] {
361
+ border-top: 2px solid var(--border);
362
+ }
363
+ [data-slot='table-head'] {
364
+ text-transform: uppercase;
365
+ font-size: 0.75rem;
366
+ letter-spacing: 0.08em;
367
+ font-weight: 700;
368
+ color: var(--muted-foreground);
369
+ }
370
+
371
+ /* Teclas del teclado */
372
+ [data-slot='kbd'] {
373
+ border: 2px solid var(--ds-key-outline);
374
+ border-bottom-width: 4px;
375
+ border-radius: 8px;
376
+ background: var(--card);
377
+ font-weight: 700;
378
+ }
379
+
380
+ /* ROTULADOR: franja translúcida bajo el título (la mitad inferior de la letra) */
381
+ [data-slot='card-title'],
382
+ [data-slot='dialog-title'],
383
+ [data-slot='sheet-title'],
384
+ header h1 {
385
+ width: fit-content;
386
+ max-width: 100%;
387
+ background: linear-gradient(transparent 56%, var(--ds-marker) 56%);
388
+ padding-inline: 0.14em;
389
+ margin-inline: -0.14em;
390
+ -webkit-box-decoration-break: clone;
391
+ box-decoration-break: clone;
392
+ }
393
+
394
+ /* Sidebar: filas como teclas */
395
+ [data-sidebar='menu-button'] {
396
+ border: 2px solid transparent;
397
+ border-radius: 14px;
398
+ font-weight: 600;
399
+ font-size: 1rem;
400
+ }
401
+ /* Señalada: la tecla se asoma (papel de tarjeta, contorno de tinta y arista); pulsada, se hunde */
402
+ [data-sidebar='menu-button']:hover:not([data-active='true']) {
403
+ background: var(--card);
404
+ border-color: var(--ds-key-outline);
405
+ border-bottom-width: 4px;
406
+ }
407
+ [data-sidebar='menu-button']:active:not([data-active='true']) {
408
+ border-bottom-width: 2px;
409
+ transform: translateY(2px);
410
+ }
411
+ /* Activa: la tecla pulsada y rellena con el color principal */
412
+ [data-sidebar='menu-button'][data-active='true'] {
413
+ background: var(--primary);
414
+ color: var(--primary-foreground);
415
+ border-color: var(--ds-key-outline);
416
+ border-bottom-width: 5px;
417
+ }
418
+ /* Tooltips: etiqueta de tinta con arista inferior, como una tecla invertida */
419
+ [data-slot='tooltip-content'] {
420
+ background: var(--foreground);
421
+ color: var(--background);
422
+ border-radius: 12px;
423
+ border-bottom: 4px solid var(--ds-key-edge);
424
+ font-weight: 700;
425
+ }
426
+ /* Sin flecha: un rombo de tinta tapaba la primera letra de la etiqueta */
427
+ [data-slot='tooltip-arrow'] {
428
+ display: none;
429
+ }
430
+ }