@higinio/design-mcp 0.2.0 → 0.2.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.
- package/assets/bruma/design-doc.md +225 -33
- package/assets/bruma/framework.css +268 -51
- package/assets/bruma/styleguide.html +676 -168
- package/assets/bruma/tailwind.css +48 -6
- package/assets/bruma/tokens.css +61 -5
- package/assets/bruma/tokens.json +769 -25
- package/assets/celeste/design-doc.md +242 -40
- package/assets/celeste/framework.css +290 -62
- package/assets/celeste/styleguide.html +760 -178
- package/assets/celeste/tailwind.css +48 -6
- package/assets/celeste/tokens.css +67 -6
- package/assets/celeste/tokens.json +778 -26
- package/assets/nocturna/design-doc.md +346 -52
- package/assets/nocturna/framework.css +317 -108
- package/assets/nocturna/styleguide.html +809 -215
- package/assets/nocturna/tailwind.css +46 -3
- package/assets/nocturna/tokens.css +115 -6
- package/assets/nocturna/tokens.json +754 -21
- package/assets/salvia/design-doc.md +224 -31
- package/assets/salvia/framework.css +269 -51
- package/assets/salvia/styleguide.html +674 -168
- package/assets/salvia/tailwind.css +48 -6
- package/assets/salvia/tokens.css +61 -5
- package/assets/salvia/tokens.json +769 -25
- package/dist/server.js +1 -1
- package/dist/snippet.js +26 -17
- package/dist/tokens.js +42 -5
- package/package.json +32 -8
|
@@ -17,19 +17,16 @@
|
|
|
17
17
|
})();
|
|
18
18
|
</script>
|
|
19
19
|
<style>
|
|
20
|
-
/*
|
|
21
|
-
|
|
20
|
+
/* ============================================================
|
|
21
|
+
Salvia Serena — Design Tokens v1.0
|
|
22
22
|
Sistema de diseño de Higinio Sosa · light-first
|
|
23
23
|
Fuente de verdad: DESIGN-salvia-serena.md
|
|
24
|
-
Uso:
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
Uso: importar ANTES de cualquier estilo propio.
|
|
25
|
+
Los componentes consumen SOLO aliases semánticos, nunca hex.
|
|
26
|
+
============================================================ */
|
|
27
27
|
|
|
28
28
|
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500&display=swap");
|
|
29
29
|
|
|
30
|
-
/* --------------------------------------------------------------------------
|
|
31
|
-
1. TOKENS (§13)
|
|
32
|
-
-------------------------------------------------------------------------- */
|
|
33
30
|
:root {
|
|
34
31
|
/* == Primitivos: primario (Salvia) == */
|
|
35
32
|
--primary-50: #e2eadf; --primary-100: #d4e0d1; --primary-200: #b8cbb7;
|
|
@@ -68,12 +65,6 @@
|
|
|
68
65
|
--accent-soft: var(--primary-50);
|
|
69
66
|
--accent-soft-strong: var(--primary-100);
|
|
70
67
|
--link: var(--primary-600); /* AA 7.00:1 sobre --surface — texto de links y ghost */
|
|
71
|
-
--overlay: rgba(44, 54, 48, .5);
|
|
72
|
-
--tooltip-bg: var(--neutral-900);
|
|
73
|
-
--tooltip-text: var(--neutral-0);
|
|
74
|
-
--focus-color: var(--accent); /* contorno de foco de teclado */
|
|
75
|
-
--text-on-danger: var(--neutral-0); /* texto del botón destructivo */
|
|
76
|
-
--border-hover: var(--neutral-500); /* borde de campos en hover */
|
|
77
68
|
|
|
78
69
|
/* == Tipografía == */
|
|
79
70
|
--font-display: "Lora", Georgia, serif;
|
|
@@ -112,7 +103,6 @@
|
|
|
112
103
|
/* == Focus == */
|
|
113
104
|
--ring: 0 0 0 3px rgba(79,107,88,.25);
|
|
114
105
|
--ring-color: rgba(79,107,88,.25);
|
|
115
|
-
--ring-danger: 0 0 0 3px rgba(181,82,63,.22);
|
|
116
106
|
|
|
117
107
|
/* == Motion (pausado: nada urge) == */
|
|
118
108
|
--duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
|
|
@@ -124,9 +114,48 @@
|
|
|
124
114
|
--stagger-step: 30ms;
|
|
125
115
|
|
|
126
116
|
color-scheme: light;
|
|
127
|
-
}
|
|
128
117
|
|
|
129
|
-
|
|
118
|
+
--overlay: rgba(44, 54, 48, .5);
|
|
119
|
+
--tooltip-bg: var(--neutral-900);
|
|
120
|
+
--tooltip-text: var(--neutral-0);
|
|
121
|
+
--focus-color: var(--accent);
|
|
122
|
+
--text-on-danger: var(--neutral-0);
|
|
123
|
+
--border-hover: var(--neutral-500);
|
|
124
|
+
--ring-danger: 0 0 0 3px rgba(181,82,63,.22);
|
|
125
|
+
|
|
126
|
+
--action-bg: var(--accent);
|
|
127
|
+
--action-hover: var(--accent-hover);
|
|
128
|
+
--action-active: var(--accent-active);
|
|
129
|
+
--text-on-action: var(--text-on-primary);
|
|
130
|
+
--control-border: var(--border-strong);
|
|
131
|
+
--placeholder: var(--text-muted);
|
|
132
|
+
--selection-bg: var(--action-bg);
|
|
133
|
+
--selection-text: var(--text-on-action);
|
|
134
|
+
--font-ui-heading: var(--font-body);
|
|
135
|
+
--text-ui-title: 2rem;
|
|
136
|
+
--touch-target: 44px;
|
|
137
|
+
--text-display-fluid: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
|
|
138
|
+
|
|
139
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
140
|
+
--chart-1: #549864;
|
|
141
|
+
--chart-2: #8d4226;
|
|
142
|
+
--chart-3: #179a8e;
|
|
143
|
+
--chart-4: #81416d;
|
|
144
|
+
--chart-5: #8a8b39;
|
|
145
|
+
--chart-6: #195f91;
|
|
146
|
+
--chart-7: #996f18;
|
|
147
|
+
/* Ritmo de contenido y formularios. */
|
|
148
|
+
--field-gap: 6px;
|
|
149
|
+
--heading-gap: var(--space-2);
|
|
150
|
+
--content-gap: var(--space-4);
|
|
151
|
+
--card-content-gap: var(--space-4);
|
|
152
|
+
--card-group-gap: var(--space-8);
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* == Modo oscuro (variante) — alternar data-theme en <html> ==
|
|
157
|
+
Casi sin sombras: las capas se separan por superficie y borde, y solo
|
|
158
|
+
los overlays (lg/xl) conservan una sombra tenue. */
|
|
130
159
|
[data-theme="dark"] {
|
|
131
160
|
--bg: #151a17;
|
|
132
161
|
--surface: #1d231f;
|
|
@@ -145,30 +174,49 @@
|
|
|
145
174
|
--text-on-primary: #151a17;
|
|
146
175
|
--text-on-primary-solid: #b5d2bc;
|
|
147
176
|
--link: #b5d2bc;
|
|
148
|
-
--overlay: rgba(0, 0, 0, .6);
|
|
149
|
-
--tooltip-bg: #e3e8e2;
|
|
150
|
-
--tooltip-text: #2c3630;
|
|
151
|
-
--focus-color: var(--accent);
|
|
152
|
-
--text-on-danger: #151a17;
|
|
153
|
-
--border-hover: #a6b0a8;
|
|
154
177
|
--success-500: #6cc3ac; --success-100: #14271f; --success-text: #8ad3bf;
|
|
155
178
|
--warning-500: #d9a94f; --warning-100: #2a2213; --warning-text: #e6c17e;
|
|
156
179
|
--danger-500: #d9806d; --danger-100: #2c1814; --danger-text: #e9a597;
|
|
157
180
|
--info-500: #8fb0c9; --info-100: #18222b; --info-text: #a9c4d8;
|
|
158
181
|
--ring: 0 0 0 3px rgba(159,194,168,.3);
|
|
159
182
|
--ring-color: rgba(159,194,168,.3);
|
|
160
|
-
--ring-danger: 0 0 0 3px rgba(217,128,109,.25);
|
|
161
183
|
--shadow-xs: none;
|
|
162
184
|
--shadow-sm: none;
|
|
163
185
|
--shadow-md: none;
|
|
164
186
|
--shadow-lg: 0 8px 24px rgba(8,10,9,.3);
|
|
165
187
|
--shadow-xl: 0 16px 32px rgba(8,10,9,.35);
|
|
166
188
|
color-scheme: dark;
|
|
189
|
+
|
|
190
|
+
--overlay: rgba(0, 0, 0, .6);
|
|
191
|
+
--tooltip-bg: #e3e8e2;
|
|
192
|
+
--tooltip-text: #2c3630;
|
|
193
|
+
--focus-color: var(--accent);
|
|
194
|
+
--text-on-danger: #151a17;
|
|
195
|
+
--border-hover: #a6b0a8;
|
|
196
|
+
--ring-danger: 0 0 0 3px rgba(217,128,109,.25);
|
|
197
|
+
|
|
198
|
+
--selection-bg: var(--action-bg);
|
|
199
|
+
--selection-text: var(--text-on-action);
|
|
200
|
+
|
|
201
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
202
|
+
--chart-1: #60a46f;
|
|
203
|
+
--chart-2: #a85a3f;
|
|
204
|
+
--chart-3: #2da79b;
|
|
205
|
+
--chart-4: #9b5986;
|
|
206
|
+
--chart-5: #818230;
|
|
207
|
+
--chart-6: #3678ac;
|
|
208
|
+
--chart-7: #946b10;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* == Accesibilidad del movimiento == */
|
|
212
|
+
|
|
213
|
+
@media (prefers-reduced-motion: reduce) {
|
|
214
|
+
:root {
|
|
215
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
216
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
217
|
+
}
|
|
167
218
|
}
|
|
168
219
|
|
|
169
|
-
/* --------------------------------------------------------------------------
|
|
170
|
-
2. BASE (§6, §11.5, §13)
|
|
171
|
-
-------------------------------------------------------------------------- */
|
|
172
220
|
*, *::before, *::after { box-sizing: border-box; }
|
|
173
221
|
|
|
174
222
|
/* Focus ring global de teclado — especificidad cero vía :where() */
|
|
@@ -210,17 +258,10 @@
|
|
|
210
258
|
.salvia-reset h6 { font-size: var(--text-base); line-height: var(--leading-base); }
|
|
211
259
|
.salvia-reset p { max-width: var(--measure); margin: 0 0 1em; }
|
|
212
260
|
.salvia-reset table { font-variant-numeric: tabular-nums; }
|
|
213
|
-
.salvia-reset ::placeholder { color: var(--
|
|
261
|
+
.salvia-reset ::placeholder { color: var(--placeholder); }
|
|
214
262
|
.salvia-reset ::selection { background: var(--ring-color); }
|
|
215
263
|
|
|
216
|
-
|
|
217
|
-
*, *::before, *::after {
|
|
218
|
-
animation-duration: 0.01ms !important;
|
|
219
|
-
animation-iteration-count: 1 !important;
|
|
220
|
-
transition-duration: 0.01ms !important;
|
|
221
|
-
scroll-behavior: auto !important;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
264
|
+
|
|
224
265
|
|
|
225
266
|
/* --------------------------------------------------------------------------
|
|
226
267
|
3. LAYOUT — contenedor, grid 12 col (§14)
|
|
@@ -268,12 +309,12 @@
|
|
|
268
309
|
/* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow) van
|
|
269
310
|
dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
|
|
270
311
|
hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
|
|
271
|
-
.btn--primary { background: var(--
|
|
272
|
-
.btn--primary:hover:not(:disabled) { background: var(--
|
|
312
|
+
.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
|
|
313
|
+
.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
|
|
273
314
|
@media (hover: hover) and (pointer: fine) {
|
|
274
315
|
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
|
|
275
316
|
}
|
|
276
|
-
.btn--primary:active:not(:disabled) { background: var(--
|
|
317
|
+
.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
|
|
277
318
|
.btn--primary:disabled { background: var(--border); color: var(--text-disabled); box-shadow: none; }
|
|
278
319
|
|
|
279
320
|
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
|
|
@@ -340,7 +381,7 @@
|
|
|
340
381
|
.input, .textarea, .select {
|
|
341
382
|
width: 100%; font-family: var(--font-body); font-size: var(--text-base);
|
|
342
383
|
color: var(--text-primary); background: var(--surface);
|
|
343
|
-
border: var(--border-width) solid var(--border
|
|
384
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
344
385
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
345
386
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
346
387
|
}
|
|
@@ -438,7 +479,7 @@
|
|
|
438
479
|
}
|
|
439
480
|
.checkbox__box {
|
|
440
481
|
width: 20px; height: 20px; flex: none; display: grid; place-items: center;
|
|
441
|
-
background: var(--surface); border: 2px solid var(--border
|
|
482
|
+
background: var(--surface); border: 2px solid var(--control-border); border-radius: 4px;
|
|
442
483
|
transition: background-color var(--duration-fast) var(--ease-out),
|
|
443
484
|
border-color var(--duration-fast) var(--ease-out);
|
|
444
485
|
}
|
|
@@ -448,7 +489,7 @@
|
|
|
448
489
|
stroke-dasharray: 20; stroke-dashoffset: 20;
|
|
449
490
|
transition: stroke-dashoffset var(--duration-base) var(--ease-spring);
|
|
450
491
|
}
|
|
451
|
-
.checkbox:hover .checkbox__box { border-color: var(--
|
|
492
|
+
.checkbox:hover .checkbox__box { border-color: var(--focus-color); }
|
|
452
493
|
.checkbox input:checked ~ .checkbox__box { background: var(--accent); border-color: var(--accent); }
|
|
453
494
|
.checkbox input:checked ~ .checkbox__box svg { stroke-dashoffset: 0; }
|
|
454
495
|
.checkbox input:focus-visible ~ .checkbox__box { box-shadow: var(--ring); }
|
|
@@ -465,7 +506,7 @@
|
|
|
465
506
|
|
|
466
507
|
.radio__dot {
|
|
467
508
|
width: 20px; height: 20px; flex: none; display: grid; place-items: center;
|
|
468
|
-
background: var(--surface); border: 2px solid var(--border
|
|
509
|
+
background: var(--surface); border: 2px solid var(--control-border); border-radius: var(--radius-full);
|
|
469
510
|
transition: background-color var(--duration-fast) var(--ease-out),
|
|
470
511
|
border-color var(--duration-fast) var(--ease-out);
|
|
471
512
|
}
|
|
@@ -474,7 +515,7 @@
|
|
|
474
515
|
background: var(--text-on-primary); transform: scale(0);
|
|
475
516
|
transition: transform var(--duration-base) var(--ease-spring);
|
|
476
517
|
}
|
|
477
|
-
.radio:hover .radio__dot { border-color: var(--
|
|
518
|
+
.radio:hover .radio__dot { border-color: var(--focus-color); }
|
|
478
519
|
.radio input:checked ~ .radio__dot { background: var(--accent); border-color: var(--accent); }
|
|
479
520
|
.radio input:checked ~ .radio__dot::after { transform: scale(1); }
|
|
480
521
|
.radio input:focus-visible ~ .radio__dot { box-shadow: var(--ring); }
|
|
@@ -808,10 +849,14 @@
|
|
|
808
849
|
background: var(--surface); border: var(--border-width) solid var(--border);
|
|
809
850
|
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
|
|
810
851
|
opacity: 0; transform: translateY(-4px); pointer-events: none;
|
|
811
|
-
transition: opacity
|
|
852
|
+
transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
|
|
853
|
+
|
|
854
|
+
visibility: hidden;
|
|
855
|
+
|
|
856
|
+
display: none;
|
|
812
857
|
}
|
|
813
858
|
.menu--right { left: auto; right: 0; }
|
|
814
|
-
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
|
|
859
|
+
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
815
860
|
.menu__item {
|
|
816
861
|
display: flex; align-items: center; gap: 10px; width: 100%;
|
|
817
862
|
padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
|
|
@@ -1086,7 +1131,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1086
1131
|
width: 100%; height: var(--control-height-md); padding: 0 14px;
|
|
1087
1132
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1088
1133
|
color: var(--text-primary); background: var(--surface);
|
|
1089
|
-
border: var(--border-width) solid var(--border
|
|
1134
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1090
1135
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1091
1136
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1092
1137
|
}
|
|
@@ -1128,7 +1173,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1128
1173
|
width: 100%; height: var(--control-height-md); padding: 0 40px;
|
|
1129
1174
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1130
1175
|
color: var(--text-primary); background: var(--surface);
|
|
1131
|
-
border: var(--border-width) solid var(--border
|
|
1176
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1132
1177
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1133
1178
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1134
1179
|
}
|
|
@@ -1196,8 +1241,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1196
1241
|
transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
|
|
1197
1242
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1198
1243
|
transform var(--duration-base) var(--ease-out);
|
|
1244
|
+
|
|
1245
|
+
visibility: hidden;
|
|
1246
|
+
|
|
1247
|
+
display: none;
|
|
1199
1248
|
}
|
|
1200
|
-
.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; }
|
|
1249
|
+
.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
1201
1250
|
.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
|
|
1202
1251
|
|
|
1203
1252
|
/* ButtonGroup (§10.31) */
|
|
@@ -1222,7 +1271,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1222
1271
|
width: 100%; height: var(--control-height-md); padding: 0 40px 0 14px;
|
|
1223
1272
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1224
1273
|
color: var(--text-primary); background: var(--surface);
|
|
1225
|
-
border: var(--border-width) solid var(--border
|
|
1274
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1226
1275
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1227
1276
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1228
1277
|
}
|
|
@@ -1241,8 +1290,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1241
1290
|
transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
|
|
1242
1291
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1243
1292
|
transform var(--duration-base) var(--ease-out);
|
|
1293
|
+
|
|
1294
|
+
visibility: hidden;
|
|
1295
|
+
|
|
1296
|
+
display: none;
|
|
1244
1297
|
}
|
|
1245
|
-
.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; }
|
|
1298
|
+
.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
1246
1299
|
.datepicker--right .datepicker__calendar { left: auto; right: 0; transform-origin: top right; }
|
|
1247
1300
|
|
|
1248
1301
|
.calendar { width: 15.75rem; }
|
|
@@ -1388,10 +1441,176 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1388
1441
|
.u-muted { color: var(--text-muted); }
|
|
1389
1442
|
.u-measure { max-width: var(--measure); }
|
|
1390
1443
|
|
|
1444
|
+
/* CONTRATOS COMPARTIDOS GENERADOS */
|
|
1445
|
+
/* Contratos comunes de interacción; la identidad y los valores viven en tokens.css. */
|
|
1446
|
+
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
1447
|
+
.grid > *, .field, .card { min-inline-size: 0; }
|
|
1448
|
+
.stack, .card__content, .form-stack, .text-group { display: flex; flex-direction: column; align-items: stretch; }
|
|
1449
|
+
.stack, .card__content { gap: var(--content-gap); }
|
|
1450
|
+
.stack--tight, .text-group { gap: var(--heading-gap); }
|
|
1451
|
+
.stack--cards { gap: var(--card-group-gap); }
|
|
1452
|
+
.form-stack { gap: var(--form-gap); }
|
|
1453
|
+
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
|
|
1454
|
+
.card { display: flex; flex-direction: column; gap: var(--card-content-gap); }
|
|
1455
|
+
.field { gap: var(--field-gap); }
|
|
1456
|
+
.field__label, .field__help, .field__error, .field > :is(label, p, span, div) { margin-block: 0; }
|
|
1457
|
+
:where(.field + .field, .field + .btn, .field + .cluster) { margin-block-start: var(--form-gap); }
|
|
1458
|
+
:where(.card + .card) { margin-block-start: var(--card-group-gap); }
|
|
1459
|
+
.stack > *, .card__content > *, .form-stack > *, .text-group > *, .grid > .card,
|
|
1460
|
+
.card > :is(h1, h2, h3, h4, h5, h6, p), .text-group > :is(h1, h2, h3, h4, h5, h6, p),
|
|
1461
|
+
.stack > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
|
|
1462
|
+
.form-stack > .field { margin-block: 0; }
|
|
1463
|
+
.btn {
|
|
1464
|
+
block-size: auto;
|
|
1465
|
+
min-block-size: var(--control-height-md);
|
|
1466
|
+
max-inline-size: 100%;
|
|
1467
|
+
white-space: normal;
|
|
1468
|
+
line-height: 1.35;
|
|
1469
|
+
text-align: center;
|
|
1470
|
+
}
|
|
1471
|
+
.btn--sm { min-block-size: var(--control-height-sm, 36px); }
|
|
1472
|
+
.btn--lg { min-block-size: var(--control-height-lg, 52px); }
|
|
1473
|
+
.btn--primary, .icon-btn--primary, .calendar__day--selected, .pagination__btn.is-active {
|
|
1474
|
+
background: var(--action-bg);
|
|
1475
|
+
color: var(--text-on-action);
|
|
1476
|
+
}
|
|
1477
|
+
.btn--primary:hover:not(:disabled), .icon-btn--primary:hover:not(:disabled) { background: var(--action-hover); color: var(--text-on-action); }
|
|
1478
|
+
.btn--primary:active:not(:disabled), .icon-btn--primary:active:not(:disabled) { background: var(--action-active); color: var(--text-on-action); }
|
|
1479
|
+
.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1480
|
+
max-inline-size: 100%;
|
|
1481
|
+
caret-color: var(--focus-color);
|
|
1482
|
+
}
|
|
1483
|
+
.input, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1484
|
+
block-size: auto; min-block-size: var(--control-height-md);
|
|
1485
|
+
padding-block: var(--space-2); line-height: 1.5;
|
|
1486
|
+
}
|
|
1487
|
+
:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input):not(.input--error, .input--success, .textarea--error, [aria-invalid="true"]) { border-color: var(--control-border); }
|
|
1488
|
+
.input:hover:not(:disabled):not(:focus):not(.input--error, .input--success, [aria-invalid="true"]), .textarea:hover:not(:disabled):not(:focus):not(.textarea--error, [aria-invalid="true"]),
|
|
1489
|
+
.select:hover:not(:disabled):not(:focus), .combobox__input:hover:not(:disabled):not(:focus),
|
|
1490
|
+
.search__input:hover:not(:focus), .datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
|
|
1491
|
+
.input:focus-visible, .textarea:focus-visible, .select:focus-visible,
|
|
1492
|
+
.combobox__input:focus-visible, .search__input:focus-visible, .datepicker__input:focus-visible {
|
|
1493
|
+
outline: 2px solid var(--focus-color);
|
|
1494
|
+
outline-offset: 2px;
|
|
1495
|
+
}
|
|
1496
|
+
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text, var(--danger)); }
|
|
1497
|
+
.input.input--error, .textarea.textarea--error,
|
|
1498
|
+
.input.input--error:hover:not(:disabled):not(:focus), .textarea.textarea--error:hover:not(:disabled):not(:focus),
|
|
1499
|
+
:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input)[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
|
|
1500
|
+
border-color: var(--danger-text, var(--danger));
|
|
1501
|
+
}
|
|
1502
|
+
.input.input--success, .input.input--success:hover:not(:disabled):not(:focus) { border-color: var(--success-text, var(--success)); }
|
|
1503
|
+
.pagination { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1504
|
+
.pagination__ellipsis { color: var(--text-muted); }
|
|
1505
|
+
.step--current .step__marker { color: var(--link); border-color: var(--focus-color); }
|
|
1506
|
+
.checkbox input:focus-visible ~ .checkbox__box,
|
|
1507
|
+
.radio input:focus-visible ~ .radio__dot,
|
|
1508
|
+
.switch input:focus-visible ~ .switch__track {
|
|
1509
|
+
outline: 2px solid var(--focus-color);
|
|
1510
|
+
outline-offset: 2px;
|
|
1511
|
+
}
|
|
1512
|
+
input.checkbox, input.radio { border-color: var(--control-border); }
|
|
1513
|
+
input.checkbox:hover, input.radio:hover { border-color: var(--focus-color); }
|
|
1514
|
+
input.checkbox:checked, input.checkbox:indeterminate, input.radio:checked { border-color: var(--focus-color); }
|
|
1515
|
+
.switch__track { background: var(--control-border); }
|
|
1516
|
+
.tabs { max-inline-size: 100%; overflow-x: auto; }
|
|
1517
|
+
.tabs__tab { flex-shrink: 0; }
|
|
1518
|
+
.segmented { max-inline-size: 100%; block-size: auto; min-block-size: var(--control-height-md); overflow-x: auto; }
|
|
1519
|
+
.segmented label { padding-block: var(--space-2); }
|
|
1520
|
+
.stat__row, .breadcrumbs, .check-row { flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1521
|
+
.progress-row, .slider-row { flex-wrap: wrap; gap: var(--space-2); }
|
|
1522
|
+
.stat__value { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
|
|
1523
|
+
.file-upload, .file-upload__label { min-inline-size: 0; max-inline-size: 100%; }
|
|
1524
|
+
.file-upload__button { max-inline-size: 100%; white-space: normal; text-align: center; }
|
|
1525
|
+
.file-upload__hint { overflow-wrap: anywhere; }
|
|
1526
|
+
.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
|
|
1527
|
+
.popover__panel, .datepicker__calendar, .combobox__list {
|
|
1528
|
+
max-inline-size: calc(100vw - 2rem);
|
|
1529
|
+
max-block-size: min(32rem, 70dvh);
|
|
1530
|
+
overflow: auto;
|
|
1531
|
+
}
|
|
1532
|
+
.file-upload__input:focus-visible + .file-upload__label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1533
|
+
.calendar { max-inline-size: calc(100vw - 2rem); }
|
|
1534
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] :is(h1, h2, h3) {
|
|
1535
|
+
font-family: var(--font-ui-heading);
|
|
1536
|
+
letter-spacing: 0;
|
|
1537
|
+
line-height: 1.3;
|
|
1538
|
+
font-weight: var(--weight-semibold);
|
|
1539
|
+
}
|
|
1540
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] h1 { font-size: var(--text-ui-title); }
|
|
1541
|
+
[data-mode="operate"] h2 { font-size: var(--text-xl); }
|
|
1542
|
+
[data-mode="operate"] h3 { font-size: var(--text-lg); }
|
|
1543
|
+
.display, .reading-title, :is(h1, h2, h3, h4, h5, h6):is(.display, .reading-title) {
|
|
1544
|
+
font-family: var(--font-display);
|
|
1545
|
+
font-size: var(--text-display-fluid);
|
|
1546
|
+
line-height: 1.08;
|
|
1547
|
+
letter-spacing: var(--tracking-display);
|
|
1548
|
+
text-wrap: balance;
|
|
1549
|
+
}
|
|
1550
|
+
:where(.celeste-reset, .salvia-reset, .bruma-reset, .nocturna-reset, body[data-system]) {
|
|
1551
|
+
scrollbar-color: var(--control-border) var(--bg);
|
|
1552
|
+
}
|
|
1553
|
+
::selection,
|
|
1554
|
+
.celeste-reset ::selection, .salvia-reset ::selection, .bruma-reset ::selection {
|
|
1555
|
+
background: var(--selection-bg); color: var(--selection-text);
|
|
1556
|
+
}
|
|
1557
|
+
::placeholder { color: var(--placeholder); opacity: 1; }
|
|
1558
|
+
:where(a) { text-underline-offset: .2em; text-decoration-thickness: .08em; }
|
|
1559
|
+
.skip-link {
|
|
1560
|
+
position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
|
|
1561
|
+
z-index: 1000; padding: var(--space-3) var(--space-4);
|
|
1562
|
+
background: var(--action-bg); color: var(--text-on-action);
|
|
1563
|
+
border-radius: var(--radius-sm); transform: translateY(-180%);
|
|
1564
|
+
}
|
|
1565
|
+
.skip-link:focus { transform: none; outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1566
|
+
[data-tooltip]::before, [data-tooltip]::after { display: none; }
|
|
1567
|
+
[data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { display: block; }
|
|
1568
|
+
.has-tooltip .tooltip { display: none; }
|
|
1569
|
+
.has-tooltip:has(:focus-visible) .tooltip { display: block; opacity: 1; transform: translate(-50%, 0); }
|
|
1570
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1571
|
+
[data-tooltip]:hover::before, [data-tooltip]:hover::after { display: block; }
|
|
1572
|
+
.has-tooltip:hover .tooltip { display: block; }
|
|
1573
|
+
}
|
|
1574
|
+
@media (pointer: coarse) {
|
|
1575
|
+
.btn, .icon-btn, .segmented label, .pagination button,
|
|
1576
|
+
.tag__close, .search__clear, .toast__close, .check-row,
|
|
1577
|
+
.checkbox:not(input), .radio:not(input), .switch:not(input) {
|
|
1578
|
+
min-block-size: var(--touch-target);
|
|
1579
|
+
min-inline-size: var(--touch-target);
|
|
1580
|
+
}
|
|
1581
|
+
}
|
|
1582
|
+
@media (max-width: 479px) {
|
|
1583
|
+
.btn-group { flex-wrap: wrap; }
|
|
1584
|
+
.modal { max-inline-size: calc(100vw - 2rem); }
|
|
1585
|
+
.stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
|
|
1586
|
+
.step { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; min-inline-size: 0; }
|
|
1587
|
+
.step__label { overflow-wrap: anywhere; }
|
|
1588
|
+
.step__connector { display: none; }
|
|
1589
|
+
}
|
|
1590
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1591
|
+
html, html:focus-within { scroll-behavior: auto; }
|
|
1592
|
+
.spinner, .skeleton, .skeleton::after,
|
|
1593
|
+
.progress--indeterminate .progress__bar, .alert.is-leaving, .toast.is-leaving { animation: none; }
|
|
1594
|
+
.progress--indeterminate .progress__bar { transform: none; }
|
|
1595
|
+
.btn, .icon-btn, .card--interactive, .slider::-webkit-slider-thumb { transform: none; }
|
|
1596
|
+
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .card--interactive:hover { transform: none; }
|
|
1597
|
+
.btn, .icon-btn { transition: background-color 80ms linear, color 80ms linear; }
|
|
1598
|
+
.menu, .popover__panel, .datepicker__calendar, .link::after { transition: none; }
|
|
1599
|
+
.progress__bar, .progress-ring__value, .accordion__content, .accordion__body { transition: none; }
|
|
1600
|
+
}
|
|
1601
|
+
@media (forced-colors: active) {
|
|
1602
|
+
input.switch, .switch__track { border: 1px solid CanvasText; background: Canvas; }
|
|
1603
|
+
input.switch::after, .switch__track::after { background: CanvasText; }
|
|
1604
|
+
input.switch:checked, .switch input:checked ~ .switch__track { border-color: Highlight; }
|
|
1605
|
+
input.switch:checked::after, .switch input:checked ~ .switch__track::after { background: Highlight; }
|
|
1606
|
+
.checkbox__box, .radio__dot { border-color: CanvasText; }
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
|
|
1391
1610
|
/* ==========================================================================
|
|
1392
1611
|
ESTILOS DE LA PÁGINA DE DOCUMENTACIÓN (.ds-*)
|
|
1393
1612
|
========================================================================== */
|
|
1394
|
-
|
|
1613
|
+
|
|
1395
1614
|
.ds-topbar {
|
|
1396
1615
|
position: sticky; top: 0; z-index: 60;
|
|
1397
1616
|
display: flex; align-items: center; gap: var(--space-4);
|
|
@@ -1535,7 +1754,7 @@ html, body { overflow-x: clip; }
|
|
|
1535
1754
|
.ds-type-row__meta { width: 190px; flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
|
|
1536
1755
|
.ds-type-row__sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1537
1756
|
|
|
1538
|
-
.ds-font-card
|
|
1757
|
+
.ds-font-card h3 { margin-bottom: 2px; }
|
|
1539
1758
|
.ds-font-card .ds-font-sample { font-size: var(--text-3xl); line-height: 1.2; margin: 6px 0; }
|
|
1540
1759
|
.ds-font-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: none; }
|
|
1541
1760
|
|
|
@@ -1611,9 +1830,118 @@ html, body { overflow-x: clip; }
|
|
|
1611
1830
|
.ds-main, .ds-footer { margin-left: 0; }
|
|
1612
1831
|
.ds-main { padding: var(--space-8) var(--space-4) var(--space-16); }
|
|
1613
1832
|
}
|
|
1833
|
+
/* ESTILOS COMPARTIDOS GENERADOS */
|
|
1834
|
+
/* La documentación comparte navegación y deja que cada marca determine el ritmo. */
|
|
1835
|
+
.ds-topbar { gap: var(--space-3); }
|
|
1836
|
+
.ds-brand { min-inline-size: 0; }
|
|
1837
|
+
.ds-brand, .ds-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1838
|
+
.ds-theme-toggle, .ds-hamburger { flex-shrink: 0; }
|
|
1839
|
+
.ds-main { padding-block-start: var(--space-12); }
|
|
1840
|
+
.ds-main > section { scroll-margin-block-start: 88px; }
|
|
1841
|
+
.ds-main > section > h2 { text-wrap: balance; }
|
|
1842
|
+
.ds-main :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
|
|
1843
|
+
.ds-hero {
|
|
1844
|
+
display: grid;
|
|
1845
|
+
grid-template-columns: minmax(0, 1.45fr) minmax(12rem, .65fr);
|
|
1846
|
+
column-gap: var(--space-12);
|
|
1847
|
+
row-gap: var(--space-6);
|
|
1848
|
+
padding-block-start: var(--space-6);
|
|
1849
|
+
}
|
|
1850
|
+
.ds-hero > h1 {
|
|
1851
|
+
grid-column: 1 / -1;
|
|
1852
|
+
font-size: var(--text-display-fluid);
|
|
1853
|
+
line-height: 1.08;
|
|
1854
|
+
letter-spacing: var(--tracking-display);
|
|
1855
|
+
text-wrap: balance;
|
|
1856
|
+
margin: 0;
|
|
1857
|
+
}
|
|
1858
|
+
.ds-hero > .ds-lead { grid-column: 1; margin: 0; max-inline-size: 55ch; }
|
|
1859
|
+
.ds-hero > .ds-actions { grid-column: 1; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
|
|
1860
|
+
.ds-hero__palette {
|
|
1861
|
+
grid-column: 2; grid-row: 2 / 4;
|
|
1862
|
+
display: grid; grid-template-columns: 2fr 1.25fr .75fr;
|
|
1863
|
+
gap: var(--space-1); margin: 0; min-block-size: 150px;
|
|
1864
|
+
align-self: stretch; overflow: hidden; border-radius: var(--radius-lg);
|
|
1865
|
+
}
|
|
1866
|
+
.ds-hero__chip { inline-size: auto; block-size: auto; border: 0; border-radius: 0; }
|
|
1867
|
+
.ds-principles {
|
|
1868
|
+
grid-column: 1 / -1; display: grid;
|
|
1869
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1870
|
+
gap: var(--space-6) var(--space-10); margin-block: var(--space-4) 0;
|
|
1871
|
+
}
|
|
1872
|
+
.ds-principle { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
|
|
1873
|
+
.ds-principle h2 { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; margin: 0 0 var(--space-2); }
|
|
1874
|
+
.ds-principle p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; max-inline-size: 48ch; }
|
|
1875
|
+
.ds-hero > .alert, .ds-hero > .ds-callout { grid-column: 1 / -1; margin: var(--space-3) 0 0; }
|
|
1876
|
+
.ds-callout { border: 1px solid var(--border); border-radius: var(--radius-md); }
|
|
1877
|
+
.ds-recipes { margin: 0; }
|
|
1878
|
+
.ds-recipes > div {
|
|
1879
|
+
display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr);
|
|
1880
|
+
gap: var(--space-4); padding-block: var(--space-5); border-block-start: 1px solid var(--border);
|
|
1881
|
+
}
|
|
1882
|
+
.ds-recipes dt { font-weight: var(--weight-semibold); }
|
|
1883
|
+
.ds-recipes dd { margin: 0; color: var(--text-secondary); max-inline-size: 65ch; }
|
|
1884
|
+
.ds-chart-palette { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
|
1885
|
+
.ds-chart-palette li { display: grid; gap: var(--space-2); }
|
|
1886
|
+
.ds-chart-palette__color { display: block; block-size: 56px; border-radius: var(--radius-sm); }
|
|
1887
|
+
.ds-chart-palette code { font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
1888
|
+
.ds-chart-palette [data-chart-color] { color: var(--text-muted); font-size: var(--text-sm); }
|
|
1889
|
+
.ds-nav a { min-block-size: 36px; display: flex; align-items: center; }
|
|
1890
|
+
.ds-nav__sub a { font-size: var(--text-sm); }
|
|
1891
|
+
.ds-demo { min-inline-size: 0; max-inline-size: 100%; }
|
|
1892
|
+
.ds-demo > * { min-inline-size: 0; max-inline-size: 100%; }
|
|
1893
|
+
.ds-demo :has(> .divider--vertical) { flex-wrap: wrap; row-gap: var(--space-3); }
|
|
1894
|
+
.ds-wordmark-demo { display: inline-block; max-inline-size: 100%; overflow-x: auto; vertical-align: bottom; }
|
|
1895
|
+
.ds-main code:not(.ds-pre code), .ds-main .code, .ds-main .u-mono { overflow-wrap: anywhere; white-space: normal; }
|
|
1896
|
+
.ds-demo .popover__panel { max-inline-size: calc(100vw - var(--space-20)); }
|
|
1897
|
+
.ds-demo--grid, .ds-semantic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
|
|
1898
|
+
.ds-copy { min-block-size: 36px; }
|
|
1899
|
+
.ds-code summary { padding-block: var(--space-3); }
|
|
1900
|
+
.ds-pre { max-inline-size: 100%; }
|
|
1901
|
+
.ds-type-row__sample { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
1902
|
+
.ds-main table { min-inline-size: 0; }
|
|
1903
|
+
.ds-theme-toggle[data-tooltip]::after { left: auto; right: 0; transform: translateY(4px); }
|
|
1904
|
+
.ds-theme-toggle[data-tooltip]:hover::after, .ds-theme-toggle[data-tooltip]:focus-visible::after { transform: translateY(0); }
|
|
1905
|
+
[data-system="nocturna"] .ds-wordmark-badge { color: var(--night-50); }
|
|
1906
|
+
.ds-main p { overflow-wrap: anywhere; }
|
|
1907
|
+
.ds-type-row { min-inline-size: 0; }
|
|
1908
|
+
[data-system="celeste"] .ds-hero { padding-block-start: var(--space-10); }
|
|
1909
|
+
[data-system="salvia"] .ds-principles { row-gap: var(--space-8); }
|
|
1910
|
+
[data-system="bruma"] .ds-principles { gap: var(--space-4) var(--space-8); }
|
|
1911
|
+
[data-system="nocturna"] .ds-main { padding-block-start: calc(64px + var(--space-10)); }
|
|
1912
|
+
@media (max-width: 1023px) {
|
|
1913
|
+
.ds-main { padding-inline: var(--space-5); }
|
|
1914
|
+
.ds-hero { column-gap: var(--space-6); }
|
|
1915
|
+
.ds-nav a { min-block-size: var(--touch-target); }
|
|
1916
|
+
.ds-sidenav:not(.is-open), .ds-sidebar:not(.is-open) { visibility: hidden; }
|
|
1917
|
+
}
|
|
1918
|
+
@media (max-width: 639px) {
|
|
1919
|
+
.ds-topbar { padding-inline: var(--space-4); }
|
|
1920
|
+
.ds-version { max-inline-size: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1921
|
+
.ds-main { padding-inline: var(--space-4); padding-block-start: var(--space-8); }
|
|
1922
|
+
.ds-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); padding-block-start: var(--space-2); }
|
|
1923
|
+
.ds-hero > h1, .ds-hero > .ds-lead, .ds-hero > .ds-actions { grid-column: 1; }
|
|
1924
|
+
.ds-hero__palette { grid-column: 1; grid-row: auto; min-block-size: 64px; }
|
|
1925
|
+
.ds-principles { grid-template-columns: minmax(0, 1fr); }
|
|
1926
|
+
.ds-demo { padding: var(--space-4); }
|
|
1927
|
+
.ds-type-row { display: grid; gap: var(--space-2); }
|
|
1928
|
+
.ds-type-row__meta { inline-size: auto; }
|
|
1929
|
+
.ds-space-item { min-inline-size: 0; }
|
|
1930
|
+
.ds-space-item .u-mono { inline-size: 96px; flex: none; }
|
|
1931
|
+
.ds-space-bar { max-inline-size: calc(100vw - 164px); }
|
|
1932
|
+
.ds-recipes > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
|
|
1933
|
+
.ds-actions > .btn { flex: 1 1 12rem; }
|
|
1934
|
+
.ds-copy { min-block-size: var(--touch-target); }
|
|
1935
|
+
}
|
|
1936
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1937
|
+
.ds-sidenav, .ds-sidebar, .ds-swatch, .ds-ease-chip { transition: none; }
|
|
1938
|
+
.ds-swatch:hover, .ds-ease-chip:hover { transform: none; }
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1614
1941
|
</style>
|
|
1615
1942
|
</head>
|
|
1616
|
-
<body class="salvia-reset">
|
|
1943
|
+
<body class="salvia-reset" data-system="salvia" data-mode="read">
|
|
1944
|
+
<a class="skip-link" href="#contenido">Saltar al contenido</a>
|
|
1617
1945
|
|
|
1618
1946
|
<!-- Iconos (estilo Lucide, trazo 2px) -->
|
|
1619
1947
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
|
|
@@ -1672,10 +2000,13 @@ html, body { overflow-x: clip; }
|
|
|
1672
2000
|
<nav class="ds-nav" id="dsNav">
|
|
1673
2001
|
<div class="ds-nav__group">Fundamentos</div>
|
|
1674
2002
|
<a href="#introduccion">Introducción</a>
|
|
2003
|
+
<a href="#datos">Color para datos</a>
|
|
2004
|
+
<a href="#criterio">Criterio de uso</a>
|
|
1675
2005
|
<a href="#voz">Voz y contenido</a>
|
|
1676
2006
|
<a href="#colores">Colores</a>
|
|
1677
2007
|
<a href="#tipografia">Tipografía</a>
|
|
1678
2008
|
<a href="#espaciado">Espaciado</a>
|
|
2009
|
+
<a href="#ritmo">Ritmo de contenido</a>
|
|
1679
2010
|
<a href="#bordes">Bordes, radios y focus</a>
|
|
1680
2011
|
<a href="#elevacion">Elevación</a>
|
|
1681
2012
|
<a href="#iconografia">Iconografía</a>
|
|
@@ -1728,11 +2059,10 @@ html, body { overflow-x: clip; }
|
|
|
1728
2059
|
</nav>
|
|
1729
2060
|
</aside>
|
|
1730
2061
|
|
|
1731
|
-
<main class="ds-main">
|
|
2062
|
+
<main class="ds-main" id="contenido" tabindex="-1">
|
|
1732
2063
|
|
|
1733
2064
|
<!-- ============================== INTRODUCCIÓN ============================== -->
|
|
1734
2065
|
<section id="introduccion" class="ds-hero">
|
|
1735
|
-
<p class="ds-eyebrow">Sistema de diseño · Higinio Sosa</p>
|
|
1736
2066
|
<h1>Salvia Serena</h1>
|
|
1737
2067
|
<p class="ds-lead u-measure">
|
|
1738
2068
|
Sistema de marca <strong>light-first</strong>, natural y relajante, para los productos de bienestar,
|
|
@@ -1745,17 +2075,17 @@ html, body { overflow-x: clip; }
|
|
|
1745
2075
|
<div class="ds-hero__chip" style="background:var(--primary-900)"></div>
|
|
1746
2076
|
</div>
|
|
1747
2077
|
|
|
1748
|
-
<div
|
|
2078
|
+
<div class="ds-actions">
|
|
1749
2079
|
<button class="btn btn--primary" id="dsHeroStart">Empezar a construir</button>
|
|
1750
2080
|
<button class="btn btn--outline" id="dsHeroTokens">Ver tokens</button>
|
|
1751
2081
|
</div>
|
|
1752
2082
|
|
|
1753
2083
|
<div class="ds-principles">
|
|
1754
|
-
<div class="
|
|
1755
|
-
<div class="
|
|
1756
|
-
<div class="
|
|
1757
|
-
<div class="
|
|
1758
|
-
<div class="
|
|
2084
|
+
<div class="ds-principle"><h2>Calma antes que urgencia</h2><p>Nada parpadea, nada apremia. El sistema acompaña; nunca presiona ni cuenta hacia atrás.</p></div>
|
|
2085
|
+
<div class="ds-principle"><h2>Claridad primero</h2><p>El contenido siempre por encima de la decoración.</p></div>
|
|
2086
|
+
<div class="ds-principle"><h2>Un acento a la vez</h2><p>El salvia guía la acción; nunca compite consigo mismo y nunca comunica éxito.</p></div>
|
|
2087
|
+
<div class="ds-principle"><h2>La naturalidad la ponen el color y la tipografía</h2><p>Lino, salvia y una serif cálida. Sin hojas dibujadas ni texturas de papel.</p></div>
|
|
2088
|
+
<div class="ds-principle"><h2>Movimiento pausado y con propósito</h2><p>Algo más lento que lo habitual, porque relaja; la animación explica, nunca decora sola.</p></div>
|
|
1759
2089
|
</div>
|
|
1760
2090
|
|
|
1761
2091
|
<div class="alert alert--info" style="margin-top:24px">
|
|
@@ -1768,8 +2098,43 @@ html, body { overflow-x: clip; }
|
|
|
1768
2098
|
</section>
|
|
1769
2099
|
|
|
1770
2100
|
<!-- ============================== VOZ Y CONTENIDO ============================== -->
|
|
2101
|
+
<section id="datos">
|
|
2102
|
+
<h2>Color para datos</h2>
|
|
2103
|
+
<p>Serie categórica de orden estable, con pasos propios en cada tema. El color identifica; etiquetas, formas o patrones conservan el significado. Los labels usan tinta, no el color de la serie.</p>
|
|
2104
|
+
<ul class="ds-chart-palette"><li><span class="ds-chart-palette__color" style="background:var(--chart-1)" aria-hidden="true"></span><code>--chart-1</code><span data-chart-color="--chart-1"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-2)" aria-hidden="true"></span><code>--chart-2</code><span data-chart-color="--chart-2"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-3)" aria-hidden="true"></span><code>--chart-3</code><span data-chart-color="--chart-3"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-4)" aria-hidden="true"></span><code>--chart-4</code><span data-chart-color="--chart-4"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-5)" aria-hidden="true"></span><code>--chart-5</code><span data-chart-color="--chart-5"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-6)" aria-hidden="true"></span><code>--chart-6</code><span data-chart-color="--chart-6"></span></li><li><span class="ds-chart-palette__color" style="background:var(--chart-7)" aria-hidden="true"></span><code>--chart-7</code><span data-chart-color="--chart-7"></span></li></ul>
|
|
2105
|
+
<p class="u-muted">Las pruebas comprueban contraste con la superficie y separación perceptual entre colores adyacentes. Ofrece una tabla equivalente; más de siete series necesitan agrupación u otra composición.</p>
|
|
2106
|
+
</section>
|
|
2107
|
+
|
|
2108
|
+
<section id="ritmo">
|
|
2109
|
+
<h2>Ritmo de contenido</h2>
|
|
2110
|
+
<p>El espacio sigue a la relación: 6px dentro de un campo, 8px entre título y descripción, 16px entre bloques, 20px entre campos y 32px entre tarjetas. Las secciones se separan 64px.</p>
|
|
2111
|
+
<div class="stack stack--cards" data-spacing-example data-mode="operate">
|
|
2112
|
+
<section class="card">
|
|
2113
|
+
<header class="text-group"><h3>Datos de contacto</h3><p>Ejemplo de composición. El título y su descripción forman un grupo.</p></header>
|
|
2114
|
+
<form class="form-stack" onsubmit="return false">
|
|
2115
|
+
<div class="field"><label class="field__label" for="rh-name">Nombre</label><input class="input" id="rh-name" autocomplete="name" placeholder="Tu nombre"><p class="field__help">Escribe el nombre que quieres mostrar.</p></div>
|
|
2116
|
+
<div class="field"><label class="field__label" for="rh-email">Correo</label><input class="input" id="rh-email" type="email" autocomplete="email" placeholder="nombre@ejemplo.com"><p class="field__help">La ayuda puede ocupar varias líneas sin juntarse con el siguiente control.</p></div>
|
|
2117
|
+
<div class="cluster"><button class="btn btn--primary" type="button">Acción de ejemplo</button><button class="btn btn--secondary" type="button">Cancelar</button></div>
|
|
2118
|
+
</form>
|
|
2119
|
+
</section>
|
|
2120
|
+
<section class="card">
|
|
2121
|
+
<header class="text-group"><h3>Contenido relacionado</h3><p>Una tarjeta distinta conserva su propia distancia.</p></header>
|
|
2122
|
+
<div class="stack"><p>Los párrafos y los divs no necesitan una colección de márgenes manuales.</p><div>Este bloque mantiene 16px respecto al párrafo anterior.</div></div>
|
|
2123
|
+
</section>
|
|
2124
|
+
</div>
|
|
2125
|
+
</section>
|
|
2126
|
+
|
|
2127
|
+
<section id="criterio">
|
|
2128
|
+
<h2>Diseñar con Salvia Serena</h2>
|
|
2129
|
+
<dl class="ds-recipes">
|
|
2130
|
+
<div><dt>Operar</dt><dd>Una tarea clara por región. Títulos en la familia de UI, datos estables y una acción dominante por contexto. Usa <code>data-mode="operate"</code> en formularios, paneles y tablas.</dd></div>
|
|
2131
|
+
<div><dt>Leer</dt><dd>Display para abrir la lectura; cuerpo de 65–75 caracteres por línea. Agrupa lo relacionado y separa las secciones con espacio, sin convertir cada párrafo en una tarjeta.</dd></div>
|
|
2132
|
+
<div><dt>Decidir</dt><dd>La composición sigue a la decisión: contexto, evidencia y acción. Conserva la identidad de marca y evita trasladar la densidad de un dashboard a una landing.</dd></div>
|
|
2133
|
+
<div><dt>Interactuar</dt><dd>Los botones sólidos usan <code>--action-bg</code> y <code>--text-on-action</code>. Foco, hover y error deben seguir siendo reconocibles en ambos temas, con teclado y con movimiento reducido.</dd></div>
|
|
2134
|
+
</dl>
|
|
2135
|
+
</section>
|
|
2136
|
+
|
|
1771
2137
|
<section id="voz">
|
|
1772
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1773
2138
|
<h2>Voz y contenido</h2>
|
|
1774
2139
|
<p class="ds-lead">Serena, cercana y natural: acompaña sin presionar. Cálida sin ser empalagosa, natural sin ser rústica.</p>
|
|
1775
2140
|
<div class="ds-demo ds-demo--col">
|
|
@@ -1792,7 +2157,6 @@ html, body { overflow-x: clip; }
|
|
|
1792
2157
|
|
|
1793
2158
|
<!-- ============================== COLORES ============================== -->
|
|
1794
2159
|
<section id="colores">
|
|
1795
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1796
2160
|
<h2>Colores</h2>
|
|
1797
2161
|
<p class="ds-lead">Un solo acento — salvia <span class="u-mono">#4f6b58</span> — sobre neutrales de lino derivados de la tinta verde <span class="u-mono">#2c3630</span>. Haz clic en cualquier muestra para copiar su variable.</p>
|
|
1798
2162
|
|
|
@@ -1810,7 +2174,7 @@ html, body { overflow-x: clip; }
|
|
|
1810
2174
|
<p>Los componentes consumen <strong>solo esta capa</strong> — así el cambio de tema es un cambio de atributo.</p>
|
|
1811
2175
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
1812
2176
|
<table class="table" id="aliasTable">
|
|
1813
|
-
<thead><tr><th style="width:52px"></th><th>Alias</th><th>Valor (light)</th><th>Rol</th></tr></thead>
|
|
2177
|
+
<thead><tr><th style="width:min(100%, 52px)"></th><th>Alias</th><th>Valor (light)</th><th>Rol</th></tr></thead>
|
|
1814
2178
|
<tbody></tbody>
|
|
1815
2179
|
</table>
|
|
1816
2180
|
</div>
|
|
@@ -1839,14 +2203,13 @@ html, body { overflow-x: clip; }
|
|
|
1839
2203
|
<div class="ds-ratio">
|
|
1840
2204
|
<div style="flex:6;background:var(--bg);color:var(--text-secondary)">60% lino y superficies</div>
|
|
1841
2205
|
<div style="flex:3;background:var(--neutral-600);color:var(--neutral-0)">30% tinta y estructura</div>
|
|
1842
|
-
<div style="flex:1;background:var(--
|
|
2206
|
+
<div style="flex:1;background:var(--action-bg);color:var(--text-on-action)">10%</div>
|
|
1843
2207
|
</div>
|
|
1844
2208
|
<p><strong>Un solo botón primario visible por pantalla</strong>; el resto secundarios o ghost. Fondos siempre planos de lino: sin gradientes, texturas de papel, granulado ni ilustraciones de hojas. El acento pierde poder si supera el 10 %. Estado nunca solo con color: color + icono + texto, y el éxito nunca con el salvia del acento.</p>
|
|
1845
2209
|
</section>
|
|
1846
2210
|
|
|
1847
2211
|
<!-- ============================== TIPOGRAFÍA ============================== -->
|
|
1848
2212
|
<section id="tipografia">
|
|
1849
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1850
2213
|
<h2>Tipografía</h2>
|
|
1851
2214
|
<p class="ds-lead">Tres familias con roles estrictos. Escala 1.25 (tercera mayor) desde 16 px.</p>
|
|
1852
2215
|
|
|
@@ -1875,7 +2238,6 @@ html, body { overflow-x: clip; }
|
|
|
1875
2238
|
|
|
1876
2239
|
<!-- ============================== ESPACIADO ============================== -->
|
|
1877
2240
|
<section id="espaciado">
|
|
1878
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1879
2241
|
<h2>Espaciado</h2>
|
|
1880
2242
|
<p class="ds-lead">Escala base 4 px — cero valores mágicos. El número del token = px ÷ 4.</p>
|
|
1881
2243
|
<div class="ds-space-list" id="spaceScale"></div>
|
|
@@ -1897,7 +2259,6 @@ html, body { overflow-x: clip; }
|
|
|
1897
2259
|
|
|
1898
2260
|
<!-- ============================== BORDES, RADIOS Y FOCUS ============================== -->
|
|
1899
2261
|
<section id="bordes">
|
|
1900
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1901
2262
|
<h2>Bordes, radios y focus</h2>
|
|
1902
2263
|
<p class="ds-lead">Bordes de 1 px, radios amplios y un focus siempre visible. Las esquinas suaves bajan la tensión visual sin volver la UI infantil.</p>
|
|
1903
2264
|
<h3>Radios</h3>
|
|
@@ -1906,14 +2267,13 @@ html, body { overflow-x: clip; }
|
|
|
1906
2267
|
<div class="ds-radius-box" style="border-radius:var(--radius-md)">md · 12</div>
|
|
1907
2268
|
<div class="ds-radius-box" style="border-radius:var(--radius-lg)">lg · 16</div>
|
|
1908
2269
|
<div class="ds-radius-box" style="border-radius:var(--radius-xl)">xl · 24</div>
|
|
1909
|
-
<div class="ds-radius-box" style="border-radius:var(--radius-full);width:72px">full</div>
|
|
2270
|
+
<div class="ds-radius-box" style="border-radius:var(--radius-full);width:min(100%, 72px)">full</div>
|
|
1910
2271
|
</div>
|
|
1911
2272
|
<p>Borde por defecto <span class="u-mono">1px solid var(--border)</span>. Focus ring global de teclado: <span class="u-mono">2px var(--focus-color)</span> (el acento, en los dos modos) con offset 2px vía <span class="u-mono">:focus-visible</span>; el click de ratón no lo dispara. Único uso de transparencia: overlay de modal y ring de focus. <strong>No hay blur ni glassmorphism en Salvia Serena</strong>: las superficies son opacas y planas.</p>
|
|
1912
2273
|
</section>
|
|
1913
2274
|
|
|
1914
2275
|
<!-- ============================== ELEVACIÓN ============================== -->
|
|
1915
2276
|
<section id="elevacion">
|
|
1916
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1917
2277
|
<h2>Elevación</h2>
|
|
1918
2278
|
<p class="ds-lead">Sombras suaves teñidas con la tinta verde <span class="u-mono">rgba(44,54,48,…)</span>, nunca negro puro. Máximo 3 niveles de elevación visibles por pantalla. Sin resplandor de acento: la elevación es sombra y borde, nunca brillo.</p>
|
|
1919
2279
|
<h3>Niveles</h3>
|
|
@@ -1935,7 +2295,6 @@ html, body { overflow-x: clip; }
|
|
|
1935
2295
|
|
|
1936
2296
|
<!-- ============================== ICONOGRAFÍA ============================== -->
|
|
1937
2297
|
<section id="iconografia">
|
|
1938
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1939
2298
|
<h2>Iconografía</h2>
|
|
1940
2299
|
<p class="ds-lead">Set sustituto: <a class="link" href="https://lucide.dev" target="_blank" rel="noopener noreferrer">Lucide</a> — trazo 1.5–2 px y esquinas redondeadas, que casan con las formas suaves y el ritmo tranquilo de la marca. Si existe un set propio de marca, reemplazar.</p>
|
|
1941
2300
|
<div class="ds-icon-grid">
|
|
@@ -1957,7 +2316,6 @@ html, body { overflow-x: clip; }
|
|
|
1957
2316
|
|
|
1958
2317
|
<!-- ============================== MARCA / WORDMARK ============================== -->
|
|
1959
2318
|
<section id="marca">
|
|
1960
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1961
2319
|
<h2>Marca / wordmark</h2>
|
|
1962
2320
|
<p class="ds-lead">No hay logo ni imágenes de marca. Donde un mockup necesite logotipo se renderiza <strong>«Higinio»</strong> (o el nombre del producto) en <span class="u-mono">--font-display</span> (Lora) — nunca se dibuja un logo aproximado.</p>
|
|
1963
2321
|
<div class="ds-demo" style="gap:32px">
|
|
@@ -1978,7 +2336,6 @@ html, body { overflow-x: clip; }
|
|
|
1978
2336
|
|
|
1979
2337
|
<!-- ============================== COMPONENTES ============================== -->
|
|
1980
2338
|
<section id="componentes">
|
|
1981
|
-
<p class="ds-eyebrow">Biblioteca</p>
|
|
1982
2339
|
<h2>Componentes</h2>
|
|
1983
2340
|
<p class="ds-lead">Los 35 componentes del sistema, renderizados en vivo con las clases del framework <span class="u-mono">salvia-serena.css</span>. Cada bloque incluye su código de uso.</p>
|
|
1984
2341
|
|
|
@@ -2047,8 +2404,8 @@ html, body { overflow-x: clip; }
|
|
|
2047
2404
|
<p class="ds-spec">Trazo 2.5, rotación 0.8 s linear. Si la carga dura <300 ms, no mostrar spinner. Blanco dentro de botones primarios.</p>
|
|
2048
2405
|
<div class="ds-demo">
|
|
2049
2406
|
<svg class="spinner" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2050
|
-
<svg class="spinner" style="width:24px;height:24px" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2051
|
-
<svg class="spinner" style="width:32px;height:32px;color:var(--text-muted)" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2407
|
+
<svg class="spinner" style="width:min(100%, 24px);height:24px" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2408
|
+
<svg class="spinner" style="width:min(100%, 32px);height:32px;color:var(--text-muted)" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
|
2052
2409
|
</div>
|
|
2053
2410
|
<details class="ds-code"><summary>Ver código</summary>
|
|
2054
2411
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
@@ -2578,7 +2935,7 @@ html, body { overflow-x: clip; }
|
|
|
2578
2935
|
<p class="ds-spec">Panel 190 px mín. con <span class="u-mono">shadow-lg</span> · entrada fade + translateY(-4→0) 160 ms · ítem danger con hover <span class="u-mono">danger-100</span>.</p>
|
|
2579
2936
|
<div class="ds-demo" style="padding-bottom:180px">
|
|
2580
2937
|
<div class="menu-wrap">
|
|
2581
|
-
<button class="btn btn--secondary js-menu-toggle">Acciones<svg style="width:16px;height:16px"><use href="#i-chevron-down"/></svg></button>
|
|
2938
|
+
<button class="btn btn--secondary js-menu-toggle">Acciones<svg style="width:min(100%, 16px);height:16px"><use href="#i-chevron-down"/></svg></button>
|
|
2582
2939
|
<div class="menu" role="menu">
|
|
2583
2940
|
<button class="menu__item" role="menuitem"><svg><use href="#i-pencil"/></svg>Editar</button>
|
|
2584
2941
|
<button class="menu__item" role="menuitem"><svg><use href="#i-copy"/></svg>Duplicar</button>
|
|
@@ -2684,13 +3041,13 @@ html, body { overflow-x: clip; }
|
|
|
2684
3041
|
<!-- Stat -->
|
|
2685
3042
|
<div class="ds-component" id="comp-stat">
|
|
2686
3043
|
<h3>Stat</h3>
|
|
2687
|
-
<p class="ds-spec">KPI único, componer dentro de Card. Valor en mono <span class="u-mono">text-3xl</span> · el delta indica tendencia, no éxito: neutro por defecto (<span class="u-mono">--text-secondary</span>), y <span class="u-mono">--up</span> / <span class="u-mono">--down</span> solo cuando el producto decide qué sentido es bueno ·
|
|
3044
|
+
<p class="ds-spec">KPI único, componer dentro de Card. Valor en mono <span class="u-mono">text-3xl</span> · el delta indica tendencia, no éxito: neutro por defecto (<span class="u-mono">--text-secondary</span>), y <span class="u-mono">--up</span> / <span class="u-mono">--down</span> solo cuando el producto decide qué sentido es bueno · valor final visible desde la carga.</p>
|
|
2688
3045
|
<div class="grid">
|
|
2689
3046
|
<div class="card col-12 col-md-4">
|
|
2690
3047
|
<div class="stat">
|
|
2691
3048
|
<span class="stat__label"><svg><use href="#i-chart"/></svg>Ingresos del mes</span>
|
|
2692
3049
|
<div class="stat__row">
|
|
2693
|
-
<span class="stat__value
|
|
3050
|
+
<span class="stat__value " data-target="128400" data-prefix="$ ">$ 128,400</span>
|
|
2694
3051
|
<span class="stat__delta stat__delta--up"><svg><use href="#i-trending-up"/></svg>+12.4%</span>
|
|
2695
3052
|
</div>
|
|
2696
3053
|
</div>
|
|
@@ -2699,7 +3056,7 @@ html, body { overflow-x: clip; }
|
|
|
2699
3056
|
<div class="stat">
|
|
2700
3057
|
<span class="stat__label"><svg><use href="#i-user"/></svg>Clientes activos</span>
|
|
2701
3058
|
<div class="stat__row">
|
|
2702
|
-
<span class="stat__value
|
|
3059
|
+
<span class="stat__value " data-target="1284">1,284</span>
|
|
2703
3060
|
<span class="stat__delta"><svg><use href="#i-trending-down"/></svg>-2.1%</span>
|
|
2704
3061
|
</div>
|
|
2705
3062
|
</div>
|
|
@@ -2708,7 +3065,7 @@ html, body { overflow-x: clip; }
|
|
|
2708
3065
|
<div class="stat">
|
|
2709
3066
|
<span class="stat__label"><svg><use href="#i-folder"/></svg>Proyectos abiertos</span>
|
|
2710
3067
|
<div class="stat__row">
|
|
2711
|
-
<span class="stat__value
|
|
3068
|
+
<span class="stat__value " data-target="37">37</span>
|
|
2712
3069
|
<span class="stat__delta"><svg><use href="#i-minus"/></svg>0%</span>
|
|
2713
3070
|
</div>
|
|
2714
3071
|
</div>
|
|
@@ -2901,7 +3258,7 @@ html, body { overflow-x: clip; }
|
|
|
2901
3258
|
<div class="grid">
|
|
2902
3259
|
<div class="card col-12 col-md-6">
|
|
2903
3260
|
<div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
|
|
2904
|
-
<div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>
|
|
3261
|
+
<div class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px"></div>
|
|
2905
3262
|
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
|
2906
3263
|
<div class="skeleton" style="height:12px;width:60%"></div>
|
|
2907
3264
|
<div class="skeleton" style="height:10px;width:40%"></div>
|
|
@@ -2923,7 +3280,7 @@ html, body { overflow-x: clip; }
|
|
|
2923
3280
|
<details class="ds-code"><summary>Ver código</summary>
|
|
2924
3281
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
2925
3282
|
<pre class="ds-pre"><code><div class="skeleton" style="height:10px;width:85%"></div>
|
|
2926
|
-
<div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>
|
|
3283
|
+
<div class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px"></div>
|
|
2927
3284
|
|
|
2928
3285
|
<div class="empty-state">
|
|
2929
3286
|
<svg>…icono 40px…</svg>
|
|
@@ -3329,7 +3686,6 @@ html, body { overflow-x: clip; }
|
|
|
3329
3686
|
|
|
3330
3687
|
<!-- ============================== MOTION ============================== -->
|
|
3331
3688
|
<section id="motion">
|
|
3332
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3333
3689
|
<h2>Motion</h2>
|
|
3334
3690
|
<p class="ds-lead">Pausado y con propósito: las entradas son algo más largas que en un sistema utilitario, porque un ritmo pausado relaja; el feedback táctil sigue siendo inmediato. Solo <span class="u-mono">transform</span> y <span class="u-mono">opacity</span>, la salida ~20 % más corta que la entrada y distancias de 4–8 px.</p>
|
|
3335
3691
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
@@ -3355,13 +3711,12 @@ html, body { overflow-x: clip; }
|
|
|
3355
3711
|
<li>Stagger en listas: 30 ms por ítem, máximo 6 ítems.</li>
|
|
3356
3712
|
<li>Si la carga dura <300 ms, no mostrar spinner (evita parpadeo).</li>
|
|
3357
3713
|
<li>Ningún indicador late en loop (pulse, ping, glow): un latido sugiere urgencia, y aquí nada urge. El único pulso es el del skeleton, mientras carga.</li>
|
|
3358
|
-
<li><span class="u-mono">prefers-reduced-motion</span>
|
|
3714
|
+
<li><span class="u-mono">prefers-reduced-motion</span> conserva estados finales, evita desplazamientos y detiene la carga animada.</li>
|
|
3359
3715
|
</ul>
|
|
3360
3716
|
</section>
|
|
3361
3717
|
|
|
3362
3718
|
<!-- ============================== ACCESIBILIDAD ============================== -->
|
|
3363
3719
|
<section id="accesibilidad">
|
|
3364
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3365
3720
|
<h2>Accesibilidad</h2>
|
|
3366
3721
|
<p class="ds-lead">WCAG AA mínimo: 4.5:1 texto normal, 3:1 texto grande y componentes UI. Touch targets de 44×44 px. Estado nunca comunicado solo con color.</p>
|
|
3367
3722
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
@@ -3387,73 +3742,209 @@ html, body { overflow-x: clip; }
|
|
|
3387
3742
|
|
|
3388
3743
|
<!-- ============================== TOKENS Y DESCARGA ============================== -->
|
|
3389
3744
|
<section id="tokens">
|
|
3390
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3391
3745
|
<h2>Tokens y descarga</h2>
|
|
3392
3746
|
<p class="ds-lead">El sistema completo vive en <span class="u-mono">dist/salvia-serena/</span>: <span class="u-mono">salvia-serena.css</span> (framework completo), <span class="u-mono">tokens.css</span> (solo variables), <span class="u-mono">tailwind.css</span> (@theme para Tailwind v4) y <span class="u-mono">tokens.json</span> (W3C DTCG 2025.10, interoperable con Figma / Tokens Studio / Style Dictionary).</p>
|
|
3393
3747
|
|
|
3394
3748
|
<h3>Variables CSS</h3>
|
|
3395
3749
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
3396
|
-
<pre class="ds-pre"><code
|
|
3397
|
-
|
|
3750
|
+
<pre class="ds-pre"><code>/* ============================================================
|
|
3751
|
+
Salvia Serena — Design Tokens v1.0
|
|
3752
|
+
Sistema de diseño de Higinio Sosa · light-first
|
|
3753
|
+
Fuente de verdad: DESIGN-salvia-serena.md
|
|
3754
|
+
Uso: importar ANTES de cualquier estilo propio.
|
|
3755
|
+
Los componentes consumen SOLO aliases semánticos, nunca hex.
|
|
3756
|
+
============================================================ */
|
|
3757
|
+
|
|
3758
|
+
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500&display=swap");
|
|
3759
|
+
|
|
3760
|
+
:root {
|
|
3761
|
+
/* == Primitivos: primario (Salvia) == */
|
|
3398
3762
|
--primary-50: #e2eadf; --primary-100: #d4e0d1; --primary-200: #b8cbb7;
|
|
3399
3763
|
--primary-300: #97b09e; --primary-400: #73907c; --primary-500: #4f6b58;
|
|
3400
3764
|
--primary-600: #435c4b; --primary-700: #384d3f; --primary-800: #304236;
|
|
3401
3765
|
--primary-900: #2c3630;
|
|
3402
3766
|
|
|
3403
|
-
/*
|
|
3767
|
+
/* == Primitivos: neutrales (Lino) == */
|
|
3404
3768
|
--neutral-0: #fbfaf6; --neutral-50: #f3f2ec; --neutral-100: #eae9e1;
|
|
3405
3769
|
--neutral-200: #dfe0d6; --neutral-300: #b9beb4; --neutral-400: #858d84;
|
|
3406
3770
|
--neutral-500: #5c675f; --neutral-600: #47524b; --neutral-700: #38423b;
|
|
3407
3771
|
--neutral-800: #2c3630; --neutral-900: #1f2622;
|
|
3408
3772
|
|
|
3409
|
-
/*
|
|
3773
|
+
/* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) ==
|
|
3774
|
+
El éxito es verde azulado, lejos del acento salvia: el acento nunca comunica éxito. */
|
|
3410
3775
|
--success-500: #2f7d6a; --success-100: #dcefe8; --success-text: #22604f;
|
|
3411
3776
|
--warning-500: #b8862f; --warning-100: #f6ecd8; --warning-text: #7e5a17;
|
|
3412
3777
|
--danger-500: #b5523f; --danger-100: #f6e4df; --danger-text: #8a3a2b;
|
|
3413
3778
|
--info-500: #5b7891; --info-100: #e3eaf0; --info-text: #3f5a70;
|
|
3414
3779
|
|
|
3415
|
-
/* Aliases (los componentes consumen SOLO esto) */
|
|
3416
|
-
--bg: var(--neutral-50);
|
|
3417
|
-
--
|
|
3418
|
-
--
|
|
3419
|
-
--
|
|
3420
|
-
--
|
|
3421
|
-
--
|
|
3422
|
-
--
|
|
3423
|
-
--
|
|
3424
|
-
|
|
3425
|
-
|
|
3780
|
+
/* == Aliases semánticos (los componentes consumen SOLO esto) == */
|
|
3781
|
+
--bg: var(--neutral-50);
|
|
3782
|
+
--surface: var(--neutral-0);
|
|
3783
|
+
--surface-alt: var(--neutral-100);
|
|
3784
|
+
--border: var(--neutral-200);
|
|
3785
|
+
--border-strong: var(--neutral-400);
|
|
3786
|
+
--text-primary: var(--neutral-800);
|
|
3787
|
+
--text-secondary: var(--neutral-600);
|
|
3788
|
+
--text-muted: var(--neutral-500);
|
|
3789
|
+
--text-disabled: var(--neutral-400);
|
|
3790
|
+
--text-on-primary: #ffffff;
|
|
3791
|
+
--text-on-primary-solid: var(--primary-700);
|
|
3792
|
+
--accent: var(--primary-500);
|
|
3793
|
+
--accent-hover: var(--primary-600);
|
|
3794
|
+
--accent-active: var(--primary-700);
|
|
3795
|
+
--accent-soft: var(--primary-50);
|
|
3796
|
+
--accent-soft-strong: var(--primary-100);
|
|
3797
|
+
--link: var(--primary-600); /* AA 7.00:1 sobre --surface — texto de links y ghost */
|
|
3798
|
+
|
|
3799
|
+
/* == Tipografía == */
|
|
3426
3800
|
--font-display: "Lora", Georgia, serif;
|
|
3427
3801
|
--font-body: "Nunito Sans", system-ui, -apple-system, sans-serif;
|
|
3428
3802
|
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
|
3429
3803
|
--text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
|
|
3430
3804
|
--text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
|
|
3431
3805
|
--text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
|
|
3432
|
-
--
|
|
3806
|
+
--leading-xs: 1.5; --leading-sm: 1.5; --leading-base: 1.6; --leading-lg: 1.55;
|
|
3807
|
+
--leading-xl: 1.4; --leading-2xl: 1.3; --leading-3xl: 1.25;
|
|
3808
|
+
--leading-4xl: 1.15; --leading-5xl: 1.1;
|
|
3809
|
+
--tracking-display: -0.02em; --tracking-body: 0; --tracking-label: 0.04em;
|
|
3810
|
+
--weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
|
|
3811
|
+
--measure: 65ch;
|
|
3433
3812
|
|
|
3434
|
-
/* Espaciado (base 4px) */
|
|
3813
|
+
/* == Espaciado (escala base 4px) == */
|
|
3435
3814
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
3436
3815
|
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
|
|
3437
3816
|
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
|
|
3817
|
+
--card-padding: var(--space-6); --card-padding-mobile: var(--space-4);
|
|
3818
|
+
--section-gap: var(--space-16); --form-gap: var(--space-5);
|
|
3819
|
+
--button-padding-md: 12px 20px; --button-padding-sm: 8px 14px;
|
|
3438
3820
|
--control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px;
|
|
3821
|
+
--gutter: 24px; --gutter-mobile: 16px;
|
|
3439
3822
|
|
|
3440
|
-
/* Radios y sombras (teñidas de tinta verde) */
|
|
3823
|
+
/* == Radios, bordes y sombras (teñidas de tinta verde, nunca negro puro) == */
|
|
3441
3824
|
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
|
|
3442
3825
|
--radius-xl: 24px; --radius-full: 9999px;
|
|
3826
|
+
--border-width: 1px;
|
|
3443
3827
|
--shadow-xs: 0 1px 2px rgba(44,54,48,.06);
|
|
3444
3828
|
--shadow-sm: 0 1px 3px rgba(44,54,48,.08), 0 1px 2px rgba(44,54,48,.05);
|
|
3445
3829
|
--shadow-md: 0 4px 8px rgba(44,54,48,.09), 0 2px 4px rgba(44,54,48,.05);
|
|
3446
3830
|
--shadow-lg: 0 12px 24px rgba(44,54,48,.12), 0 4px 8px rgba(44,54,48,.06);
|
|
3447
3831
|
--shadow-xl: 0 24px 48px rgba(44,54,48,.16);
|
|
3832
|
+
|
|
3833
|
+
/* == Focus == */
|
|
3448
3834
|
--ring: 0 0 0 3px rgba(79,107,88,.25);
|
|
3835
|
+
--ring-color: rgba(79,107,88,.25);
|
|
3449
3836
|
|
|
3450
|
-
/* Motion (pausado: nada urge) */
|
|
3837
|
+
/* == Motion (pausado: nada urge) == */
|
|
3451
3838
|
--duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
|
|
3452
3839
|
--duration-slow: 280ms; --duration-page: 340ms;
|
|
3453
3840
|
--ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
3454
3841
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
3455
|
-
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
3842
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
|
|
3456
3843
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
3844
|
+
--stagger-step: 30ms;
|
|
3845
|
+
|
|
3846
|
+
color-scheme: light;
|
|
3847
|
+
|
|
3848
|
+
--overlay: rgba(44, 54, 48, .5);
|
|
3849
|
+
--tooltip-bg: var(--neutral-900);
|
|
3850
|
+
--tooltip-text: var(--neutral-0);
|
|
3851
|
+
--focus-color: var(--accent);
|
|
3852
|
+
--text-on-danger: var(--neutral-0);
|
|
3853
|
+
--border-hover: var(--neutral-500);
|
|
3854
|
+
--ring-danger: 0 0 0 3px rgba(181,82,63,.22);
|
|
3855
|
+
|
|
3856
|
+
--action-bg: var(--accent);
|
|
3857
|
+
--action-hover: var(--accent-hover);
|
|
3858
|
+
--action-active: var(--accent-active);
|
|
3859
|
+
--text-on-action: var(--text-on-primary);
|
|
3860
|
+
--control-border: var(--border-strong);
|
|
3861
|
+
--placeholder: var(--text-muted);
|
|
3862
|
+
--selection-bg: var(--action-bg);
|
|
3863
|
+
--selection-text: var(--text-on-action);
|
|
3864
|
+
--font-ui-heading: var(--font-body);
|
|
3865
|
+
--text-ui-title: 2rem;
|
|
3866
|
+
--touch-target: 44px;
|
|
3867
|
+
--text-display-fluid: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
|
|
3868
|
+
|
|
3869
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3870
|
+
--chart-1: #549864;
|
|
3871
|
+
--chart-2: #8d4226;
|
|
3872
|
+
--chart-3: #179a8e;
|
|
3873
|
+
--chart-4: #81416d;
|
|
3874
|
+
--chart-5: #8a8b39;
|
|
3875
|
+
--chart-6: #195f91;
|
|
3876
|
+
--chart-7: #996f18;
|
|
3877
|
+
/* Ritmo de contenido y formularios. */
|
|
3878
|
+
--field-gap: 6px;
|
|
3879
|
+
--heading-gap: var(--space-2);
|
|
3880
|
+
--content-gap: var(--space-4);
|
|
3881
|
+
--card-content-gap: var(--space-4);
|
|
3882
|
+
--card-group-gap: var(--space-8);
|
|
3883
|
+
|
|
3884
|
+
}
|
|
3885
|
+
|
|
3886
|
+
/* == Modo oscuro (variante) — alternar data-theme en <html> ==
|
|
3887
|
+
Casi sin sombras: las capas se separan por superficie y borde, y solo
|
|
3888
|
+
los overlays (lg/xl) conservan una sombra tenue. */
|
|
3889
|
+
[data-theme="dark"] {
|
|
3890
|
+
--bg: #151a17;
|
|
3891
|
+
--surface: #1d231f;
|
|
3892
|
+
--surface-alt: #252c27;
|
|
3893
|
+
--border: #2d3530;
|
|
3894
|
+
--border-strong: #6f7b72;
|
|
3895
|
+
--text-primary: #e3e8e2;
|
|
3896
|
+
--text-secondary: #c4ccc5;
|
|
3897
|
+
--text-muted: #a6b0a8;
|
|
3898
|
+
--text-disabled: #79837b;
|
|
3899
|
+
--accent: #9fc2a8;
|
|
3900
|
+
--accent-hover: #b5d2bc;
|
|
3901
|
+
--accent-active: #8ab295;
|
|
3902
|
+
--accent-soft: #26332b;
|
|
3903
|
+
--accent-soft-strong: #2f4035;
|
|
3904
|
+
--text-on-primary: #151a17;
|
|
3905
|
+
--text-on-primary-solid: #b5d2bc;
|
|
3906
|
+
--link: #b5d2bc;
|
|
3907
|
+
--success-500: #6cc3ac; --success-100: #14271f; --success-text: #8ad3bf;
|
|
3908
|
+
--warning-500: #d9a94f; --warning-100: #2a2213; --warning-text: #e6c17e;
|
|
3909
|
+
--danger-500: #d9806d; --danger-100: #2c1814; --danger-text: #e9a597;
|
|
3910
|
+
--info-500: #8fb0c9; --info-100: #18222b; --info-text: #a9c4d8;
|
|
3911
|
+
--ring: 0 0 0 3px rgba(159,194,168,.3);
|
|
3912
|
+
--ring-color: rgba(159,194,168,.3);
|
|
3913
|
+
--shadow-xs: none;
|
|
3914
|
+
--shadow-sm: none;
|
|
3915
|
+
--shadow-md: none;
|
|
3916
|
+
--shadow-lg: 0 8px 24px rgba(8,10,9,.3);
|
|
3917
|
+
--shadow-xl: 0 16px 32px rgba(8,10,9,.35);
|
|
3918
|
+
color-scheme: dark;
|
|
3919
|
+
|
|
3920
|
+
--overlay: rgba(0, 0, 0, .6);
|
|
3921
|
+
--tooltip-bg: #e3e8e2;
|
|
3922
|
+
--tooltip-text: #2c3630;
|
|
3923
|
+
--focus-color: var(--accent);
|
|
3924
|
+
--text-on-danger: #151a17;
|
|
3925
|
+
--border-hover: #a6b0a8;
|
|
3926
|
+
--ring-danger: 0 0 0 3px rgba(217,128,109,.25);
|
|
3927
|
+
|
|
3928
|
+
--selection-bg: var(--action-bg);
|
|
3929
|
+
--selection-text: var(--text-on-action);
|
|
3930
|
+
|
|
3931
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3932
|
+
--chart-1: #60a46f;
|
|
3933
|
+
--chart-2: #a85a3f;
|
|
3934
|
+
--chart-3: #2da79b;
|
|
3935
|
+
--chart-4: #9b5986;
|
|
3936
|
+
--chart-5: #818230;
|
|
3937
|
+
--chart-6: #3678ac;
|
|
3938
|
+
--chart-7: #946b10;
|
|
3939
|
+
}
|
|
3940
|
+
|
|
3941
|
+
/* == Accesibilidad del movimiento == */
|
|
3942
|
+
|
|
3943
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3944
|
+
:root {
|
|
3945
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
3946
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
3947
|
+
}
|
|
3457
3948
|
}</code></pre>
|
|
3458
3949
|
</div>
|
|
3459
3950
|
|
|
@@ -3516,7 +4007,6 @@ html, body { overflow-x: clip; }
|
|
|
3516
4007
|
|
|
3517
4008
|
<!-- ============================== INSTALACIÓN ============================== -->
|
|
3518
4009
|
<section id="instalacion">
|
|
3519
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3520
4010
|
<h2>Instalación</h2>
|
|
3521
4011
|
<p class="ds-lead">El sistema se distribuye como paquete npm (<span class="u-mono">@higinio/design-css</span>) y también como archivos sueltos en <span class="u-mono">dist/salvia-serena/</span>. Instálalo o cópialos, y elige qué importar según tu stack (A/B/C). En todas: <strong>light por defecto</strong>; <span class="u-mono"><html data-theme="dark"></span> activa el modo oscuro, y los componentes consumen <strong>solo aliases semánticos</strong>, nunca hex.</p>
|
|
3522
4012
|
|
|
@@ -3581,7 +4071,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3581
4071
|
|
|
3582
4072
|
<!-- ============================== MCP ============================== -->
|
|
3583
4073
|
<section id="mcp">
|
|
3584
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3585
4074
|
<h2>MCP</h2>
|
|
3586
4075
|
<p class="ds-lead">El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Salvia Serena (<span class="u-mono">system="salvia"</span>), a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
|
|
3587
4076
|
|
|
@@ -3785,24 +4274,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3785
4274
|
if (heroStart) heroStart.addEventListener("click", function () { scrollToId("componentes"); });
|
|
3786
4275
|
if (heroTokens) heroTokens.addEventListener("click", function () { scrollToId("tokens"); });
|
|
3787
4276
|
|
|
3788
|
-
/* ---------- Menú móvil ---------- */
|
|
3789
|
-
var burger = d.getElementById("dsHamburger");
|
|
3790
|
-
var sidenav = d.getElementById("dsSidenav");
|
|
3791
|
-
if (burger && sidenav) {
|
|
3792
|
-
burger.addEventListener("click", function (e) {
|
|
3793
|
-
e.stopPropagation();
|
|
3794
|
-
sidenav.classList.toggle("is-open");
|
|
3795
|
-
});
|
|
3796
|
-
d.addEventListener("click", function (e) {
|
|
3797
|
-
if (sidenav.classList.contains("is-open") && !sidenav.contains(e.target) && e.target !== burger) {
|
|
3798
|
-
sidenav.classList.remove("is-open");
|
|
3799
|
-
}
|
|
3800
|
-
});
|
|
3801
|
-
sidenav.addEventListener("click", function (e) {
|
|
3802
|
-
if (e.target.closest("a")) sidenav.classList.remove("is-open");
|
|
3803
|
-
});
|
|
3804
|
-
}
|
|
3805
|
-
|
|
3806
4277
|
/* ---------- Copiar al portapapeles ---------- */
|
|
3807
4278
|
function copyText(text, feedbackFn) {
|
|
3808
4279
|
function done() { if (feedbackFn) feedbackFn(); }
|
|
@@ -3878,11 +4349,11 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3878
4349
|
["--text-primary", "neutral-800", "Texto principal"],
|
|
3879
4350
|
["--text-secondary", "neutral-600", "Texto secundario"],
|
|
3880
4351
|
["--text-muted", "neutral-500", "Terciario, captions"],
|
|
3881
|
-
["--text-disabled", "neutral-400", "
|
|
3882
|
-
["--text-on-primary", "#ffffff", "Texto sobre
|
|
4352
|
+
["--text-disabled", "neutral-400", "Solo controles deshabilitados"],
|
|
4353
|
+
["--text-on-primary", "#ffffff", "Texto de compatibilidad sobre acento"],
|
|
3883
4354
|
["--text-on-primary-solid", "primary-700", "Texto de peso normal sobre primary-100"],
|
|
3884
|
-
["--accent", "primary-500", "
|
|
3885
|
-
["--accent-hover", "primary-600", "Hover del
|
|
4355
|
+
["--accent", "primary-500", "Firma de marca y acentos de UI"],
|
|
4356
|
+
["--accent-hover", "primary-600", "Hover del acento de marca"],
|
|
3886
4357
|
["--accent-active", "primary-700", "Pressed"],
|
|
3887
4358
|
["--accent-soft", "primary-50", "Hover de ghost, fondos sutiles"],
|
|
3888
4359
|
["--accent-soft-strong", "primary-100", "Seleccionados suaves"],
|
|
@@ -3930,7 +4401,7 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3930
4401
|
var tr = d.createElement("tr");
|
|
3931
4402
|
var chipColor = a[1].indexOf("#") === 0 ? a[1] : "var(--" + a[1] + ")";
|
|
3932
4403
|
tr.innerHTML =
|
|
3933
|
-
'<td><span style="display:inline-block;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:' + chipColor + '"></span></td>' +
|
|
4404
|
+
'<td><span style="display:inline-block;width:min(100%, 24px);height:24px;border-radius:6px;border:1px solid var(--border);background:' + chipColor + '"></span></td>' +
|
|
3934
4405
|
'<td class="u-mono">' + a[0] + "</td>" +
|
|
3935
4406
|
'<td class="u-mono" style="color:var(--text-muted)">' + a[1] + "</td>" +
|
|
3936
4407
|
"<td>" + a[2] + "</td>";
|
|
@@ -4236,7 +4707,8 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4236
4707
|
function dismiss() {
|
|
4237
4708
|
if (!toast.parentElement) return;
|
|
4238
4709
|
toast.classList.add("is-leaving");
|
|
4239
|
-
toast.addEventListener("animationend", function () { toast.remove(); });
|
|
4710
|
+
toast.addEventListener("animationend", function () { toast.remove(); }, { once: true });
|
|
4711
|
+
setTimeout(function () { toast.remove(); }, 400);
|
|
4240
4712
|
if (reduceMotion) toast.remove();
|
|
4241
4713
|
}
|
|
4242
4714
|
}
|
|
@@ -4312,41 +4784,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4312
4784
|
renderPagination();
|
|
4313
4785
|
}
|
|
4314
4786
|
|
|
4315
|
-
/* ---------- Count-up de Stat ---------- */
|
|
4316
|
-
function countUp(el) {
|
|
4317
|
-
var target = parseFloat(el.getAttribute("data-target") || 0);
|
|
4318
|
-
var prefix = el.getAttribute("data-prefix") || "";
|
|
4319
|
-
var suffix = el.getAttribute("data-suffix") || "";
|
|
4320
|
-
function fmt(v) { return prefix + Math.round(v).toLocaleString("es-MX") + suffix; }
|
|
4321
|
-
if (reduceMotion) { el.textContent = fmt(target); return; }
|
|
4322
|
-
/* Dura --duration-page, el techo de motion del sistema */
|
|
4323
|
-
var start = null, DUR = parseFloat(getComputedStyle(d.documentElement).getPropertyValue("--duration-page")) || 340;
|
|
4324
|
-
function tick(ts) {
|
|
4325
|
-
if (start === null) start = ts;
|
|
4326
|
-
var t = Math.min(1, (ts - start) / DUR);
|
|
4327
|
-
var eased = 1 - Math.pow(1 - t, 3);
|
|
4328
|
-
el.textContent = fmt(target * eased);
|
|
4329
|
-
if (t < 1) requestAnimationFrame(tick);
|
|
4330
|
-
}
|
|
4331
|
-
requestAnimationFrame(tick);
|
|
4332
|
-
}
|
|
4333
|
-
var countEls = d.querySelectorAll(".js-countup");
|
|
4334
|
-
if ("IntersectionObserver" in window) {
|
|
4335
|
-
var seen = new WeakSet();
|
|
4336
|
-
var counter = new IntersectionObserver(function (entries) {
|
|
4337
|
-
entries.forEach(function (entry) {
|
|
4338
|
-
if (entry.isIntersecting && !seen.has(entry.target)) {
|
|
4339
|
-
seen.add(entry.target);
|
|
4340
|
-
countUp(entry.target);
|
|
4341
|
-
counter.unobserve(entry.target);
|
|
4342
|
-
}
|
|
4343
|
-
});
|
|
4344
|
-
}, { threshold: 0.4 });
|
|
4345
|
-
Array.prototype.forEach.call(countEls, function (el) { counter.observe(el); });
|
|
4346
|
-
} else {
|
|
4347
|
-
Array.prototype.forEach.call(countEls, countUp);
|
|
4348
|
-
}
|
|
4349
|
-
|
|
4350
4787
|
/* ---------- Drawer (§10.29): focus-trap + retorno de foco + Esc ---------- */
|
|
4351
4788
|
var drawerTrigger = null;
|
|
4352
4789
|
function openDrawer(dr, trigger) {
|
|
@@ -4665,6 +5102,75 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4665
5102
|
});
|
|
4666
5103
|
}
|
|
4667
5104
|
})();
|
|
5105
|
+
</script>
|
|
5106
|
+
<!-- INTERACCIONES COMPARTIDAS GENERADAS -->
|
|
5107
|
+
<script>
|
|
5108
|
+
(function () {
|
|
5109
|
+
"use strict";
|
|
5110
|
+
var trigger = document.getElementById("dsHamburger");
|
|
5111
|
+
var panel = document.getElementById("dsSidenav") || document.getElementById("dsSidebar");
|
|
5112
|
+
var mobile = window.matchMedia("(max-width: 1023px)");
|
|
5113
|
+
|
|
5114
|
+
/**
|
|
5115
|
+
* Actualiza la navegación como disclosure, sin crear una trampa de foco.
|
|
5116
|
+
* @param {boolean} open - Si la navegación móvil debe estar disponible.
|
|
5117
|
+
* @param {boolean} restore - Si el cierre debe devolver foco al disparador.
|
|
5118
|
+
* @returns {void}
|
|
5119
|
+
*/
|
|
5120
|
+
function setNavigation(open, restore) {
|
|
5121
|
+
if (!trigger || !panel) return;
|
|
5122
|
+
panel.classList.toggle("is-open", open);
|
|
5123
|
+
panel.inert = mobile.matches && !open;
|
|
5124
|
+
trigger.setAttribute("aria-expanded", String(open));
|
|
5125
|
+
trigger.setAttribute("aria-label", open ? "Cerrar navegación" : "Abrir navegación");
|
|
5126
|
+
if (restore) trigger.focus();
|
|
5127
|
+
}
|
|
5128
|
+
|
|
5129
|
+
if (trigger && panel) {
|
|
5130
|
+
trigger.setAttribute("aria-controls", panel.id);
|
|
5131
|
+
setNavigation(false, false);
|
|
5132
|
+
trigger.addEventListener("click", function () { setNavigation(!panel.classList.contains("is-open"), false); });
|
|
5133
|
+
panel.addEventListener("click", function (event) {
|
|
5134
|
+
var link = event.target.closest("a[href^='#']");
|
|
5135
|
+
if (!link || !mobile.matches) return;
|
|
5136
|
+
var target = document.getElementById(link.hash.slice(1));
|
|
5137
|
+
setNavigation(false, false);
|
|
5138
|
+
if (target) {
|
|
5139
|
+
target.setAttribute("tabindex", "-1");
|
|
5140
|
+
target.focus({ preventScroll: true });
|
|
5141
|
+
}
|
|
5142
|
+
});
|
|
5143
|
+
document.addEventListener("keydown", function (event) {
|
|
5144
|
+
if (event.key === "Escape" && mobile.matches && panel.classList.contains("is-open")) setNavigation(false, true);
|
|
5145
|
+
});
|
|
5146
|
+
document.addEventListener("click", function (event) {
|
|
5147
|
+
if (mobile.matches && !panel.contains(event.target) && !trigger.contains(event.target)) setNavigation(false, false);
|
|
5148
|
+
});
|
|
5149
|
+
mobile.addEventListener("change", function () { setNavigation(false, false); });
|
|
5150
|
+
}
|
|
5151
|
+
|
|
5152
|
+
var themeButton = document.getElementById("dsThemeToggle") || document.getElementById("dsTheme");
|
|
5153
|
+
/**
|
|
5154
|
+
* Nombra la acción de tema y mantiene semántica de ubicación en el índice.
|
|
5155
|
+
* @returns {void}
|
|
5156
|
+
*/
|
|
5157
|
+
function updateLabels() {
|
|
5158
|
+
if (themeButton) themeButton.setAttribute("aria-label", document.documentElement.dataset.theme === "dark" ? "Usar tema claro" : "Usar tema oscuro");
|
|
5159
|
+
document.querySelectorAll(".ds-nav a").forEach(function (link) {
|
|
5160
|
+
if (link.classList.contains("is-active")) link.setAttribute("aria-current", "location");
|
|
5161
|
+
else link.removeAttribute("aria-current");
|
|
5162
|
+
});
|
|
5163
|
+
var style = getComputedStyle(document.documentElement);
|
|
5164
|
+
document.querySelectorAll("[data-chart-color]").forEach(function (label) {
|
|
5165
|
+
label.textContent = style.getPropertyValue(label.getAttribute("data-chart-color")).trim();
|
|
5166
|
+
});
|
|
5167
|
+
}
|
|
5168
|
+
updateLabels();
|
|
5169
|
+
new MutationObserver(updateLabels).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
|
|
5170
|
+
var nav = document.querySelector(".ds-nav");
|
|
5171
|
+
if (nav) new MutationObserver(updateLabels).observe(nav, { subtree: true, attributes: true, attributeFilter: ["class"] });
|
|
5172
|
+
})();
|
|
5173
|
+
|
|
4668
5174
|
</script>
|
|
4669
5175
|
</body>
|
|
4670
5176
|
</html>
|