@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
|
+
Bruma Lavanda — Design Tokens v1.0
|
|
22
22
|
Sistema de diseño de Higinio Sosa · light-first
|
|
23
23
|
Fuente de verdad: DESIGN-bruma-lavanda.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=Bricolage+Grotesque:wght@600;700&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap");
|
|
29
29
|
|
|
30
|
-
/* --------------------------------------------------------------------------
|
|
31
|
-
1. TOKENS (§13)
|
|
32
|
-
-------------------------------------------------------------------------- */
|
|
33
30
|
:root {
|
|
34
31
|
/* == Primitivos: primario (Lavanda) ==
|
|
35
32
|
Lavanda apagada, nunca violeta saturado. El acento no rellena áreas grandes:
|
|
@@ -70,12 +67,6 @@
|
|
|
70
67
|
--accent-soft: var(--primary-50);
|
|
71
68
|
--accent-soft-strong: var(--primary-100);
|
|
72
69
|
--link: var(--primary-600); /* AA 7.98:1 sobre --surface — texto de links y ghost */
|
|
73
|
-
--overlay: rgba(31, 30, 40, .5);
|
|
74
|
-
--tooltip-bg: var(--neutral-900); /* 15.94:1 con --tooltip-text */
|
|
75
|
-
--tooltip-text: var(--neutral-0);
|
|
76
|
-
--focus-color: var(--accent); /* contorno de foco de teclado: 6.40:1 sobre --surface */
|
|
77
|
-
--text-on-danger: var(--neutral-0); /* texto del botón destructivo: 5.01:1 sobre --danger-500 */
|
|
78
|
-
--border-hover: var(--neutral-500); /* borde de campos en hover: 6.38:1 sobre --surface */
|
|
79
70
|
|
|
80
71
|
/* == Tipografía == */
|
|
81
72
|
--font-display: "Bricolage Grotesque", system-ui, sans-serif;
|
|
@@ -116,7 +107,6 @@
|
|
|
116
107
|
/* == Focus == */
|
|
117
108
|
--ring: 0 0 0 3px rgba(91,87,138,.25);
|
|
118
109
|
--ring-color: rgba(91,87,138,.25);
|
|
119
|
-
--ring-danger: 0 0 0 3px rgba(178,76,85,.22);
|
|
120
110
|
|
|
121
111
|
/* == Motion (corto y preciso) == */
|
|
122
112
|
--duration-instant: 100ms; --duration-fast: 140ms; --duration-base: 180ms;
|
|
@@ -128,9 +118,48 @@
|
|
|
128
118
|
--stagger-step: 30ms;
|
|
129
119
|
|
|
130
120
|
color-scheme: light;
|
|
131
|
-
}
|
|
132
121
|
|
|
133
|
-
|
|
122
|
+
--overlay: rgba(31, 30, 40, .5);
|
|
123
|
+
--tooltip-bg: var(--neutral-900);
|
|
124
|
+
--tooltip-text: var(--neutral-0);
|
|
125
|
+
--focus-color: var(--accent);
|
|
126
|
+
--text-on-danger: var(--neutral-0);
|
|
127
|
+
--border-hover: var(--neutral-500);
|
|
128
|
+
--ring-danger: 0 0 0 3px rgba(178,76,85,.22);
|
|
129
|
+
|
|
130
|
+
--action-bg: var(--accent);
|
|
131
|
+
--action-hover: var(--accent-hover);
|
|
132
|
+
--action-active: var(--accent-active);
|
|
133
|
+
--text-on-action: var(--text-on-primary);
|
|
134
|
+
--control-border: var(--border-strong);
|
|
135
|
+
--placeholder: var(--text-muted);
|
|
136
|
+
--selection-bg: var(--action-bg);
|
|
137
|
+
--selection-text: var(--text-on-action);
|
|
138
|
+
--font-ui-heading: var(--font-body);
|
|
139
|
+
--text-ui-title: 2rem;
|
|
140
|
+
--touch-target: 44px;
|
|
141
|
+
--text-display-fluid: clamp(2.5rem, 1.8rem + 2.2vw, 4.25rem);
|
|
142
|
+
|
|
143
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
144
|
+
--chart-1: #857bc1;
|
|
145
|
+
--chart-2: #8a600a;
|
|
146
|
+
--chart-3: #4a8cc1;
|
|
147
|
+
--chart-4: #853f63;
|
|
148
|
+
--chart-5: #129a92;
|
|
149
|
+
--chart-6: #8e4031;
|
|
150
|
+
--chart-7: #5b975e;
|
|
151
|
+
/* Ritmo de contenido y formularios. */
|
|
152
|
+
--field-gap: 6px;
|
|
153
|
+
--heading-gap: var(--space-2);
|
|
154
|
+
--content-gap: var(--space-4);
|
|
155
|
+
--card-content-gap: var(--space-4);
|
|
156
|
+
--card-group-gap: var(--space-5);
|
|
157
|
+
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* == Modo oscuro (variante) — alternar data-theme en <html> ==
|
|
161
|
+
Sin sombras en las capas: se separan por superficie y borde, y solo
|
|
162
|
+
los overlays (lg/xl) conservan una sombra tenue. */
|
|
134
163
|
[data-theme="dark"] {
|
|
135
164
|
--bg: #16151c;
|
|
136
165
|
--surface: #1f1e27;
|
|
@@ -149,31 +178,49 @@
|
|
|
149
178
|
--text-on-primary: #16151c;
|
|
150
179
|
--text-on-primary-solid: #c4c1e6;
|
|
151
180
|
--link: #c4c1e6;
|
|
152
|
-
--overlay: rgba(0, 0, 0, .6);
|
|
153
|
-
--tooltip-bg: #e7e6ef; /* 13.31:1 con --tooltip-text */
|
|
154
|
-
--tooltip-text: #1f1e28;
|
|
155
|
-
--focus-color: var(--accent); /* 7.68:1 sobre --surface */
|
|
156
|
-
--text-on-danger: #16151c; /* 6.99:1 sobre --danger-500 */
|
|
157
|
-
--border-hover: #aaa8bb; /* 7.09:1 sobre --surface */
|
|
158
181
|
--success-500: #6cc1ad; --success-100: #13261f; --success-text: #8bd1c0;
|
|
159
182
|
--warning-500: #d6a752; --warning-100: #29220f; --warning-text: #e4c07f;
|
|
160
183
|
--danger-500: #e08890; --danger-100: #2c171a; --danger-text: #eba4ab;
|
|
161
184
|
--info-500: #8daecb; --info-100: #172129; --info-text: #a8c3da;
|
|
162
185
|
--ring: 0 0 0 3px rgba(176,172,220,.3);
|
|
163
186
|
--ring-color: rgba(176,172,220,.3);
|
|
164
|
-
--ring-danger: 0 0 0 3px rgba(224,136,144,.25);
|
|
165
187
|
--shadow-xs: none;
|
|
166
188
|
--shadow-sm: none;
|
|
167
189
|
--shadow-md: none;
|
|
168
190
|
--shadow-lg: 0 8px 20px rgba(8,8,12,.28);
|
|
169
191
|
--shadow-xl: 0 16px 32px rgba(8,8,12,.32);
|
|
170
192
|
color-scheme: dark;
|
|
193
|
+
|
|
194
|
+
--overlay: rgba(0, 0, 0, .6);
|
|
195
|
+
--tooltip-bg: #e7e6ef;
|
|
196
|
+
--tooltip-text: #1f1e28;
|
|
197
|
+
--focus-color: var(--accent);
|
|
198
|
+
--text-on-danger: #16151c;
|
|
199
|
+
--border-hover: #aaa8bb;
|
|
200
|
+
--ring-danger: 0 0 0 3px rgba(224,136,144,.25);
|
|
201
|
+
|
|
202
|
+
--selection-bg: var(--action-bg);
|
|
203
|
+
--selection-text: var(--text-on-action);
|
|
204
|
+
|
|
205
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
206
|
+
--chart-1: #877cc3;
|
|
207
|
+
--chart-2: #946a1c;
|
|
208
|
+
--chart-3: #5798ce;
|
|
209
|
+
--chart-4: #a0587c;
|
|
210
|
+
--chart-5: #2aa79e;
|
|
211
|
+
--chart-6: #aa5849;
|
|
212
|
+
--chart-7: #67a369;
|
|
171
213
|
}
|
|
172
214
|
|
|
215
|
+
/* == Accesibilidad del movimiento == */
|
|
216
|
+
|
|
217
|
+
@media (prefers-reduced-motion: reduce) {
|
|
218
|
+
:root {
|
|
219
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
220
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
173
223
|
|
|
174
|
-
/* --------------------------------------------------------------------------
|
|
175
|
-
2. BASE (§6, §11.5, §13)
|
|
176
|
-
-------------------------------------------------------------------------- */
|
|
177
224
|
*, *::before, *::after { box-sizing: border-box; }
|
|
178
225
|
|
|
179
226
|
/* Focus ring global de teclado — especificidad cero vía :where() */
|
|
@@ -215,17 +262,10 @@
|
|
|
215
262
|
.bruma-reset h6 { font-size: var(--text-base); line-height: var(--leading-base); }
|
|
216
263
|
.bruma-reset p { max-width: var(--measure); margin: 0 0 1em; }
|
|
217
264
|
.bruma-reset table { font-variant-numeric: tabular-nums; }
|
|
218
|
-
.bruma-reset ::placeholder { color: var(--
|
|
265
|
+
.bruma-reset ::placeholder { color: var(--placeholder); }
|
|
219
266
|
.bruma-reset ::selection { background: var(--ring-color); }
|
|
220
267
|
|
|
221
|
-
|
|
222
|
-
*, *::before, *::after {
|
|
223
|
-
animation-duration: 0.01ms !important;
|
|
224
|
-
animation-iteration-count: 1 !important;
|
|
225
|
-
transition-duration: 0.01ms !important;
|
|
226
|
-
scroll-behavior: auto !important;
|
|
227
|
-
}
|
|
228
|
-
}
|
|
268
|
+
|
|
229
269
|
|
|
230
270
|
/* --------------------------------------------------------------------------
|
|
231
271
|
3. LAYOUT — contenedor, grid 12 col (§14)
|
|
@@ -273,12 +313,12 @@
|
|
|
273
313
|
/* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow) van
|
|
274
314
|
dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
|
|
275
315
|
hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
|
|
276
|
-
.btn--primary { background: var(--
|
|
277
|
-
.btn--primary:hover:not(:disabled) { background: var(--
|
|
316
|
+
.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
|
|
317
|
+
.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
|
|
278
318
|
@media (hover: hover) and (pointer: fine) {
|
|
279
319
|
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
|
|
280
320
|
}
|
|
281
|
-
.btn--primary:active:not(:disabled) { background: var(--
|
|
321
|
+
.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
|
|
282
322
|
.btn--primary:disabled { background: var(--border); color: var(--text-disabled); box-shadow: none; }
|
|
283
323
|
|
|
284
324
|
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
|
|
@@ -345,7 +385,7 @@
|
|
|
345
385
|
.input, .textarea, .select {
|
|
346
386
|
width: 100%; font-family: var(--font-body); font-size: var(--text-base);
|
|
347
387
|
color: var(--text-primary); background: var(--surface);
|
|
348
|
-
border: var(--border-width) solid var(--border
|
|
388
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
349
389
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
350
390
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
351
391
|
}
|
|
@@ -443,7 +483,7 @@
|
|
|
443
483
|
}
|
|
444
484
|
.checkbox__box {
|
|
445
485
|
width: 20px; height: 20px; flex: none; display: grid; place-items: center;
|
|
446
|
-
background: var(--surface); border: 2px solid var(--border
|
|
486
|
+
background: var(--surface); border: 2px solid var(--control-border); border-radius: 4px;
|
|
447
487
|
transition: background-color var(--duration-fast) var(--ease-out),
|
|
448
488
|
border-color var(--duration-fast) var(--ease-out);
|
|
449
489
|
}
|
|
@@ -453,7 +493,7 @@
|
|
|
453
493
|
stroke-dasharray: 20; stroke-dashoffset: 20;
|
|
454
494
|
transition: stroke-dashoffset var(--duration-base) var(--ease-spring);
|
|
455
495
|
}
|
|
456
|
-
.checkbox:hover .checkbox__box { border-color: var(--
|
|
496
|
+
.checkbox:hover .checkbox__box { border-color: var(--focus-color); }
|
|
457
497
|
.checkbox input:checked ~ .checkbox__box { background: var(--accent); border-color: var(--accent); }
|
|
458
498
|
.checkbox input:checked ~ .checkbox__box svg { stroke-dashoffset: 0; }
|
|
459
499
|
.checkbox input:focus-visible ~ .checkbox__box { box-shadow: var(--ring); }
|
|
@@ -470,7 +510,7 @@
|
|
|
470
510
|
|
|
471
511
|
.radio__dot {
|
|
472
512
|
width: 20px; height: 20px; flex: none; display: grid; place-items: center;
|
|
473
|
-
background: var(--surface); border: 2px solid var(--border
|
|
513
|
+
background: var(--surface); border: 2px solid var(--control-border); border-radius: var(--radius-full);
|
|
474
514
|
transition: background-color var(--duration-fast) var(--ease-out),
|
|
475
515
|
border-color var(--duration-fast) var(--ease-out);
|
|
476
516
|
}
|
|
@@ -479,7 +519,7 @@
|
|
|
479
519
|
background: var(--text-on-primary); transform: scale(0);
|
|
480
520
|
transition: transform var(--duration-base) var(--ease-spring);
|
|
481
521
|
}
|
|
482
|
-
.radio:hover .radio__dot { border-color: var(--
|
|
522
|
+
.radio:hover .radio__dot { border-color: var(--focus-color); }
|
|
483
523
|
.radio input:checked ~ .radio__dot { background: var(--accent); border-color: var(--accent); }
|
|
484
524
|
.radio input:checked ~ .radio__dot::after { transform: scale(1); }
|
|
485
525
|
.radio input:focus-visible ~ .radio__dot { box-shadow: var(--ring); }
|
|
@@ -812,10 +852,14 @@
|
|
|
812
852
|
background: var(--surface); border: var(--border-width) solid var(--border);
|
|
813
853
|
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
|
|
814
854
|
opacity: 0; transform: translateY(-4px); pointer-events: none;
|
|
815
|
-
transition: opacity
|
|
855
|
+
transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
|
|
856
|
+
|
|
857
|
+
visibility: hidden;
|
|
858
|
+
|
|
859
|
+
display: none;
|
|
816
860
|
}
|
|
817
861
|
.menu--right { left: auto; right: 0; }
|
|
818
|
-
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
|
|
862
|
+
.menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
819
863
|
.menu__item {
|
|
820
864
|
display: flex; align-items: center; gap: 10px; width: 100%;
|
|
821
865
|
padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
|
|
@@ -1090,7 +1134,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1090
1134
|
width: 100%; height: var(--control-height-md); padding: 0 14px;
|
|
1091
1135
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1092
1136
|
color: var(--text-primary); background: var(--surface);
|
|
1093
|
-
border: var(--border-width) solid var(--border
|
|
1137
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1094
1138
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1095
1139
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1096
1140
|
}
|
|
@@ -1132,7 +1176,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1132
1176
|
width: 100%; height: var(--control-height-md); padding: 0 40px;
|
|
1133
1177
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1134
1178
|
color: var(--text-primary); background: var(--surface);
|
|
1135
|
-
border: var(--border-width) solid var(--border
|
|
1179
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1136
1180
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1137
1181
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1138
1182
|
}
|
|
@@ -1200,8 +1244,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1200
1244
|
transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
|
|
1201
1245
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1202
1246
|
transform var(--duration-base) var(--ease-out);
|
|
1247
|
+
|
|
1248
|
+
visibility: hidden;
|
|
1249
|
+
|
|
1250
|
+
display: none;
|
|
1203
1251
|
}
|
|
1204
|
-
.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; }
|
|
1252
|
+
.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
1205
1253
|
.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
|
|
1206
1254
|
|
|
1207
1255
|
/* ButtonGroup (§10.31) */
|
|
@@ -1226,7 +1274,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1226
1274
|
width: 100%; height: var(--control-height-md); padding: 0 40px 0 14px;
|
|
1227
1275
|
font-family: var(--font-body); font-size: var(--text-base);
|
|
1228
1276
|
color: var(--text-primary); background: var(--surface);
|
|
1229
|
-
border: var(--border-width) solid var(--border
|
|
1277
|
+
border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
|
|
1230
1278
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
1231
1279
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
1232
1280
|
}
|
|
@@ -1245,8 +1293,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1245
1293
|
transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
|
|
1246
1294
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1247
1295
|
transform var(--duration-base) var(--ease-out);
|
|
1296
|
+
|
|
1297
|
+
visibility: hidden;
|
|
1298
|
+
|
|
1299
|
+
display: none;
|
|
1248
1300
|
}
|
|
1249
|
-
.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; }
|
|
1301
|
+
.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; display: block; }
|
|
1250
1302
|
.datepicker--right .datepicker__calendar { left: auto; right: 0; transform-origin: top right; }
|
|
1251
1303
|
|
|
1252
1304
|
.calendar { width: 15.75rem; }
|
|
@@ -1392,10 +1444,176 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
|
|
|
1392
1444
|
.u-muted { color: var(--text-muted); }
|
|
1393
1445
|
.u-measure { max-width: var(--measure); }
|
|
1394
1446
|
|
|
1447
|
+
/* CONTRATOS COMPARTIDOS GENERADOS */
|
|
1448
|
+
/* Contratos comunes de interacción; la identidad y los valores viven en tokens.css. */
|
|
1449
|
+
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
1450
|
+
.grid > *, .field, .card { min-inline-size: 0; }
|
|
1451
|
+
.stack, .card__content, .form-stack, .text-group { display: flex; flex-direction: column; align-items: stretch; }
|
|
1452
|
+
.stack, .card__content { gap: var(--content-gap); }
|
|
1453
|
+
.stack--tight, .text-group { gap: var(--heading-gap); }
|
|
1454
|
+
.stack--cards { gap: var(--card-group-gap); }
|
|
1455
|
+
.form-stack { gap: var(--form-gap); }
|
|
1456
|
+
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
|
|
1457
|
+
.card { display: flex; flex-direction: column; gap: var(--card-content-gap); }
|
|
1458
|
+
.field { gap: var(--field-gap); }
|
|
1459
|
+
.field__label, .field__help, .field__error, .field > :is(label, p, span, div) { margin-block: 0; }
|
|
1460
|
+
:where(.field + .field, .field + .btn, .field + .cluster) { margin-block-start: var(--form-gap); }
|
|
1461
|
+
:where(.card + .card) { margin-block-start: var(--card-group-gap); }
|
|
1462
|
+
.stack > *, .card__content > *, .form-stack > *, .text-group > *, .grid > .card,
|
|
1463
|
+
.card > :is(h1, h2, h3, h4, h5, h6, p), .text-group > :is(h1, h2, h3, h4, h5, h6, p),
|
|
1464
|
+
.stack > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
|
|
1465
|
+
.form-stack > .field { margin-block: 0; }
|
|
1466
|
+
.btn {
|
|
1467
|
+
block-size: auto;
|
|
1468
|
+
min-block-size: var(--control-height-md);
|
|
1469
|
+
max-inline-size: 100%;
|
|
1470
|
+
white-space: normal;
|
|
1471
|
+
line-height: 1.35;
|
|
1472
|
+
text-align: center;
|
|
1473
|
+
}
|
|
1474
|
+
.btn--sm { min-block-size: var(--control-height-sm, 36px); }
|
|
1475
|
+
.btn--lg { min-block-size: var(--control-height-lg, 52px); }
|
|
1476
|
+
.btn--primary, .icon-btn--primary, .calendar__day--selected, .pagination__btn.is-active {
|
|
1477
|
+
background: var(--action-bg);
|
|
1478
|
+
color: var(--text-on-action);
|
|
1479
|
+
}
|
|
1480
|
+
.btn--primary:hover:not(:disabled), .icon-btn--primary:hover:not(:disabled) { background: var(--action-hover); color: var(--text-on-action); }
|
|
1481
|
+
.btn--primary:active:not(:disabled), .icon-btn--primary:active:not(:disabled) { background: var(--action-active); color: var(--text-on-action); }
|
|
1482
|
+
.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1483
|
+
max-inline-size: 100%;
|
|
1484
|
+
caret-color: var(--focus-color);
|
|
1485
|
+
}
|
|
1486
|
+
.input, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1487
|
+
block-size: auto; min-block-size: var(--control-height-md);
|
|
1488
|
+
padding-block: var(--space-2); line-height: 1.5;
|
|
1489
|
+
}
|
|
1490
|
+
: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); }
|
|
1491
|
+
.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"]),
|
|
1492
|
+
.select:hover:not(:disabled):not(:focus), .combobox__input:hover:not(:disabled):not(:focus),
|
|
1493
|
+
.search__input:hover:not(:focus), .datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
|
|
1494
|
+
.input:focus-visible, .textarea:focus-visible, .select:focus-visible,
|
|
1495
|
+
.combobox__input:focus-visible, .search__input:focus-visible, .datepicker__input:focus-visible {
|
|
1496
|
+
outline: 2px solid var(--focus-color);
|
|
1497
|
+
outline-offset: 2px;
|
|
1498
|
+
}
|
|
1499
|
+
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text, var(--danger)); }
|
|
1500
|
+
.input.input--error, .textarea.textarea--error,
|
|
1501
|
+
.input.input--error:hover:not(:disabled):not(:focus), .textarea.textarea--error:hover:not(:disabled):not(:focus),
|
|
1502
|
+
:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input)[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
|
|
1503
|
+
border-color: var(--danger-text, var(--danger));
|
|
1504
|
+
}
|
|
1505
|
+
.input.input--success, .input.input--success:hover:not(:disabled):not(:focus) { border-color: var(--success-text, var(--success)); }
|
|
1506
|
+
.pagination { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1507
|
+
.pagination__ellipsis { color: var(--text-muted); }
|
|
1508
|
+
.step--current .step__marker { color: var(--link); border-color: var(--focus-color); }
|
|
1509
|
+
.checkbox input:focus-visible ~ .checkbox__box,
|
|
1510
|
+
.radio input:focus-visible ~ .radio__dot,
|
|
1511
|
+
.switch input:focus-visible ~ .switch__track {
|
|
1512
|
+
outline: 2px solid var(--focus-color);
|
|
1513
|
+
outline-offset: 2px;
|
|
1514
|
+
}
|
|
1515
|
+
input.checkbox, input.radio { border-color: var(--control-border); }
|
|
1516
|
+
input.checkbox:hover, input.radio:hover { border-color: var(--focus-color); }
|
|
1517
|
+
input.checkbox:checked, input.checkbox:indeterminate, input.radio:checked { border-color: var(--focus-color); }
|
|
1518
|
+
.switch__track { background: var(--control-border); }
|
|
1519
|
+
.tabs { max-inline-size: 100%; overflow-x: auto; }
|
|
1520
|
+
.tabs__tab { flex-shrink: 0; }
|
|
1521
|
+
.segmented { max-inline-size: 100%; block-size: auto; min-block-size: var(--control-height-md); overflow-x: auto; }
|
|
1522
|
+
.segmented label { padding-block: var(--space-2); }
|
|
1523
|
+
.stat__row, .breadcrumbs, .check-row { flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1524
|
+
.progress-row, .slider-row { flex-wrap: wrap; gap: var(--space-2); }
|
|
1525
|
+
.stat__value { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
|
|
1526
|
+
.file-upload, .file-upload__label { min-inline-size: 0; max-inline-size: 100%; }
|
|
1527
|
+
.file-upload__button { max-inline-size: 100%; white-space: normal; text-align: center; }
|
|
1528
|
+
.file-upload__hint { overflow-wrap: anywhere; }
|
|
1529
|
+
.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
|
|
1530
|
+
.popover__panel, .datepicker__calendar, .combobox__list {
|
|
1531
|
+
max-inline-size: calc(100vw - 2rem);
|
|
1532
|
+
max-block-size: min(32rem, 70dvh);
|
|
1533
|
+
overflow: auto;
|
|
1534
|
+
}
|
|
1535
|
+
.file-upload__input:focus-visible + .file-upload__label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1536
|
+
.calendar { max-inline-size: calc(100vw - 2rem); }
|
|
1537
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] :is(h1, h2, h3) {
|
|
1538
|
+
font-family: var(--font-ui-heading);
|
|
1539
|
+
letter-spacing: 0;
|
|
1540
|
+
line-height: 1.3;
|
|
1541
|
+
font-weight: var(--weight-semibold);
|
|
1542
|
+
}
|
|
1543
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] h1 { font-size: var(--text-ui-title); }
|
|
1544
|
+
[data-mode="operate"] h2 { font-size: var(--text-xl); }
|
|
1545
|
+
[data-mode="operate"] h3 { font-size: var(--text-lg); }
|
|
1546
|
+
.display, .reading-title, :is(h1, h2, h3, h4, h5, h6):is(.display, .reading-title) {
|
|
1547
|
+
font-family: var(--font-display);
|
|
1548
|
+
font-size: var(--text-display-fluid);
|
|
1549
|
+
line-height: 1.08;
|
|
1550
|
+
letter-spacing: var(--tracking-display);
|
|
1551
|
+
text-wrap: balance;
|
|
1552
|
+
}
|
|
1553
|
+
:where(.celeste-reset, .salvia-reset, .bruma-reset, .nocturna-reset, body[data-system]) {
|
|
1554
|
+
scrollbar-color: var(--control-border) var(--bg);
|
|
1555
|
+
}
|
|
1556
|
+
::selection,
|
|
1557
|
+
.celeste-reset ::selection, .salvia-reset ::selection, .bruma-reset ::selection {
|
|
1558
|
+
background: var(--selection-bg); color: var(--selection-text);
|
|
1559
|
+
}
|
|
1560
|
+
::placeholder { color: var(--placeholder); opacity: 1; }
|
|
1561
|
+
:where(a) { text-underline-offset: .2em; text-decoration-thickness: .08em; }
|
|
1562
|
+
.skip-link {
|
|
1563
|
+
position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
|
|
1564
|
+
z-index: 1000; padding: var(--space-3) var(--space-4);
|
|
1565
|
+
background: var(--action-bg); color: var(--text-on-action);
|
|
1566
|
+
border-radius: var(--radius-sm); transform: translateY(-180%);
|
|
1567
|
+
}
|
|
1568
|
+
.skip-link:focus { transform: none; outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1569
|
+
[data-tooltip]::before, [data-tooltip]::after { display: none; }
|
|
1570
|
+
[data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { display: block; }
|
|
1571
|
+
.has-tooltip .tooltip { display: none; }
|
|
1572
|
+
.has-tooltip:has(:focus-visible) .tooltip { display: block; opacity: 1; transform: translate(-50%, 0); }
|
|
1573
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1574
|
+
[data-tooltip]:hover::before, [data-tooltip]:hover::after { display: block; }
|
|
1575
|
+
.has-tooltip:hover .tooltip { display: block; }
|
|
1576
|
+
}
|
|
1577
|
+
@media (pointer: coarse) {
|
|
1578
|
+
.btn, .icon-btn, .segmented label, .pagination button,
|
|
1579
|
+
.tag__close, .search__clear, .toast__close, .check-row,
|
|
1580
|
+
.checkbox:not(input), .radio:not(input), .switch:not(input) {
|
|
1581
|
+
min-block-size: var(--touch-target);
|
|
1582
|
+
min-inline-size: var(--touch-target);
|
|
1583
|
+
}
|
|
1584
|
+
}
|
|
1585
|
+
@media (max-width: 479px) {
|
|
1586
|
+
.btn-group { flex-wrap: wrap; }
|
|
1587
|
+
.modal { max-inline-size: calc(100vw - 2rem); }
|
|
1588
|
+
.stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
|
|
1589
|
+
.step { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; min-inline-size: 0; }
|
|
1590
|
+
.step__label { overflow-wrap: anywhere; }
|
|
1591
|
+
.step__connector { display: none; }
|
|
1592
|
+
}
|
|
1593
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1594
|
+
html, html:focus-within { scroll-behavior: auto; }
|
|
1595
|
+
.spinner, .skeleton, .skeleton::after,
|
|
1596
|
+
.progress--indeterminate .progress__bar, .alert.is-leaving, .toast.is-leaving { animation: none; }
|
|
1597
|
+
.progress--indeterminate .progress__bar { transform: none; }
|
|
1598
|
+
.btn, .icon-btn, .card--interactive, .slider::-webkit-slider-thumb { transform: none; }
|
|
1599
|
+
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .card--interactive:hover { transform: none; }
|
|
1600
|
+
.btn, .icon-btn { transition: background-color 80ms linear, color 80ms linear; }
|
|
1601
|
+
.menu, .popover__panel, .datepicker__calendar, .link::after { transition: none; }
|
|
1602
|
+
.progress__bar, .progress-ring__value, .accordion__content, .accordion__body { transition: none; }
|
|
1603
|
+
}
|
|
1604
|
+
@media (forced-colors: active) {
|
|
1605
|
+
input.switch, .switch__track { border: 1px solid CanvasText; background: Canvas; }
|
|
1606
|
+
input.switch::after, .switch__track::after { background: CanvasText; }
|
|
1607
|
+
input.switch:checked, .switch input:checked ~ .switch__track { border-color: Highlight; }
|
|
1608
|
+
input.switch:checked::after, .switch input:checked ~ .switch__track::after { background: Highlight; }
|
|
1609
|
+
.checkbox__box, .radio__dot { border-color: CanvasText; }
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
|
|
1395
1613
|
/* ==========================================================================
|
|
1396
1614
|
ESTILOS DE LA PÁGINA DE DOCUMENTACIÓN (.ds-*)
|
|
1397
1615
|
========================================================================== */
|
|
1398
|
-
|
|
1616
|
+
|
|
1399
1617
|
.ds-topbar {
|
|
1400
1618
|
position: sticky; top: 0; z-index: 60;
|
|
1401
1619
|
display: flex; align-items: center; gap: var(--space-4);
|
|
@@ -1540,7 +1758,7 @@ html, body { overflow-x: clip; }
|
|
|
1540
1758
|
.ds-type-row__meta { width: 190px; flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
|
|
1541
1759
|
.ds-type-row__sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1542
1760
|
|
|
1543
|
-
.ds-font-card
|
|
1761
|
+
.ds-font-card h3 { margin-bottom: 2px; }
|
|
1544
1762
|
.ds-font-card .ds-font-sample { font-size: var(--text-3xl); line-height: 1.2; margin: 6px 0; }
|
|
1545
1763
|
.ds-font-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: none; }
|
|
1546
1764
|
|
|
@@ -1617,9 +1835,118 @@ html, body { overflow-x: clip; }
|
|
|
1617
1835
|
.ds-main, .ds-footer { margin-left: 0; }
|
|
1618
1836
|
.ds-main { padding: var(--space-8) var(--space-4) var(--space-16); }
|
|
1619
1837
|
}
|
|
1838
|
+
/* ESTILOS COMPARTIDOS GENERADOS */
|
|
1839
|
+
/* La documentación comparte navegación y deja que cada marca determine el ritmo. */
|
|
1840
|
+
.ds-topbar { gap: var(--space-3); }
|
|
1841
|
+
.ds-brand { min-inline-size: 0; }
|
|
1842
|
+
.ds-brand, .ds-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1843
|
+
.ds-theme-toggle, .ds-hamburger { flex-shrink: 0; }
|
|
1844
|
+
.ds-main { padding-block-start: var(--space-12); }
|
|
1845
|
+
.ds-main > section { scroll-margin-block-start: 88px; }
|
|
1846
|
+
.ds-main > section > h2 { text-wrap: balance; }
|
|
1847
|
+
.ds-main :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
|
|
1848
|
+
.ds-hero {
|
|
1849
|
+
display: grid;
|
|
1850
|
+
grid-template-columns: minmax(0, 1.45fr) minmax(12rem, .65fr);
|
|
1851
|
+
column-gap: var(--space-12);
|
|
1852
|
+
row-gap: var(--space-6);
|
|
1853
|
+
padding-block-start: var(--space-6);
|
|
1854
|
+
}
|
|
1855
|
+
.ds-hero > h1 {
|
|
1856
|
+
grid-column: 1 / -1;
|
|
1857
|
+
font-size: var(--text-display-fluid);
|
|
1858
|
+
line-height: 1.08;
|
|
1859
|
+
letter-spacing: var(--tracking-display);
|
|
1860
|
+
text-wrap: balance;
|
|
1861
|
+
margin: 0;
|
|
1862
|
+
}
|
|
1863
|
+
.ds-hero > .ds-lead { grid-column: 1; margin: 0; max-inline-size: 55ch; }
|
|
1864
|
+
.ds-hero > .ds-actions { grid-column: 1; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
|
|
1865
|
+
.ds-hero__palette {
|
|
1866
|
+
grid-column: 2; grid-row: 2 / 4;
|
|
1867
|
+
display: grid; grid-template-columns: 2fr 1.25fr .75fr;
|
|
1868
|
+
gap: var(--space-1); margin: 0; min-block-size: 150px;
|
|
1869
|
+
align-self: stretch; overflow: hidden; border-radius: var(--radius-lg);
|
|
1870
|
+
}
|
|
1871
|
+
.ds-hero__chip { inline-size: auto; block-size: auto; border: 0; border-radius: 0; }
|
|
1872
|
+
.ds-principles {
|
|
1873
|
+
grid-column: 1 / -1; display: grid;
|
|
1874
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1875
|
+
gap: var(--space-6) var(--space-10); margin-block: var(--space-4) 0;
|
|
1876
|
+
}
|
|
1877
|
+
.ds-principle { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
|
|
1878
|
+
.ds-principle h2 { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; margin: 0 0 var(--space-2); }
|
|
1879
|
+
.ds-principle p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; max-inline-size: 48ch; }
|
|
1880
|
+
.ds-hero > .alert, .ds-hero > .ds-callout { grid-column: 1 / -1; margin: var(--space-3) 0 0; }
|
|
1881
|
+
.ds-callout { border: 1px solid var(--border); border-radius: var(--radius-md); }
|
|
1882
|
+
.ds-recipes { margin: 0; }
|
|
1883
|
+
.ds-recipes > div {
|
|
1884
|
+
display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr);
|
|
1885
|
+
gap: var(--space-4); padding-block: var(--space-5); border-block-start: 1px solid var(--border);
|
|
1886
|
+
}
|
|
1887
|
+
.ds-recipes dt { font-weight: var(--weight-semibold); }
|
|
1888
|
+
.ds-recipes dd { margin: 0; color: var(--text-secondary); max-inline-size: 65ch; }
|
|
1889
|
+
.ds-chart-palette { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
|
1890
|
+
.ds-chart-palette li { display: grid; gap: var(--space-2); }
|
|
1891
|
+
.ds-chart-palette__color { display: block; block-size: 56px; border-radius: var(--radius-sm); }
|
|
1892
|
+
.ds-chart-palette code { font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
1893
|
+
.ds-chart-palette [data-chart-color] { color: var(--text-muted); font-size: var(--text-sm); }
|
|
1894
|
+
.ds-nav a { min-block-size: 36px; display: flex; align-items: center; }
|
|
1895
|
+
.ds-nav__sub a { font-size: var(--text-sm); }
|
|
1896
|
+
.ds-demo { min-inline-size: 0; max-inline-size: 100%; }
|
|
1897
|
+
.ds-demo > * { min-inline-size: 0; max-inline-size: 100%; }
|
|
1898
|
+
.ds-demo :has(> .divider--vertical) { flex-wrap: wrap; row-gap: var(--space-3); }
|
|
1899
|
+
.ds-wordmark-demo { display: inline-block; max-inline-size: 100%; overflow-x: auto; vertical-align: bottom; }
|
|
1900
|
+
.ds-main code:not(.ds-pre code), .ds-main .code, .ds-main .u-mono { overflow-wrap: anywhere; white-space: normal; }
|
|
1901
|
+
.ds-demo .popover__panel { max-inline-size: calc(100vw - var(--space-20)); }
|
|
1902
|
+
.ds-demo--grid, .ds-semantic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
|
|
1903
|
+
.ds-copy { min-block-size: 36px; }
|
|
1904
|
+
.ds-code summary { padding-block: var(--space-3); }
|
|
1905
|
+
.ds-pre { max-inline-size: 100%; }
|
|
1906
|
+
.ds-type-row__sample { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
1907
|
+
.ds-main table { min-inline-size: 0; }
|
|
1908
|
+
.ds-theme-toggle[data-tooltip]::after { left: auto; right: 0; transform: translateY(4px); }
|
|
1909
|
+
.ds-theme-toggle[data-tooltip]:hover::after, .ds-theme-toggle[data-tooltip]:focus-visible::after { transform: translateY(0); }
|
|
1910
|
+
[data-system="nocturna"] .ds-wordmark-badge { color: var(--night-50); }
|
|
1911
|
+
.ds-main p { overflow-wrap: anywhere; }
|
|
1912
|
+
.ds-type-row { min-inline-size: 0; }
|
|
1913
|
+
[data-system="celeste"] .ds-hero { padding-block-start: var(--space-10); }
|
|
1914
|
+
[data-system="salvia"] .ds-principles { row-gap: var(--space-8); }
|
|
1915
|
+
[data-system="bruma"] .ds-principles { gap: var(--space-4) var(--space-8); }
|
|
1916
|
+
[data-system="nocturna"] .ds-main { padding-block-start: calc(64px + var(--space-10)); }
|
|
1917
|
+
@media (max-width: 1023px) {
|
|
1918
|
+
.ds-main { padding-inline: var(--space-5); }
|
|
1919
|
+
.ds-hero { column-gap: var(--space-6); }
|
|
1920
|
+
.ds-nav a { min-block-size: var(--touch-target); }
|
|
1921
|
+
.ds-sidenav:not(.is-open), .ds-sidebar:not(.is-open) { visibility: hidden; }
|
|
1922
|
+
}
|
|
1923
|
+
@media (max-width: 639px) {
|
|
1924
|
+
.ds-topbar { padding-inline: var(--space-4); }
|
|
1925
|
+
.ds-version { max-inline-size: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1926
|
+
.ds-main { padding-inline: var(--space-4); padding-block-start: var(--space-8); }
|
|
1927
|
+
.ds-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); padding-block-start: var(--space-2); }
|
|
1928
|
+
.ds-hero > h1, .ds-hero > .ds-lead, .ds-hero > .ds-actions { grid-column: 1; }
|
|
1929
|
+
.ds-hero__palette { grid-column: 1; grid-row: auto; min-block-size: 64px; }
|
|
1930
|
+
.ds-principles { grid-template-columns: minmax(0, 1fr); }
|
|
1931
|
+
.ds-demo { padding: var(--space-4); }
|
|
1932
|
+
.ds-type-row { display: grid; gap: var(--space-2); }
|
|
1933
|
+
.ds-type-row__meta { inline-size: auto; }
|
|
1934
|
+
.ds-space-item { min-inline-size: 0; }
|
|
1935
|
+
.ds-space-item .u-mono { inline-size: 96px; flex: none; }
|
|
1936
|
+
.ds-space-bar { max-inline-size: calc(100vw - 164px); }
|
|
1937
|
+
.ds-recipes > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
|
|
1938
|
+
.ds-actions > .btn { flex: 1 1 12rem; }
|
|
1939
|
+
.ds-copy { min-block-size: var(--touch-target); }
|
|
1940
|
+
}
|
|
1941
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1942
|
+
.ds-sidenav, .ds-sidebar, .ds-swatch, .ds-ease-chip { transition: none; }
|
|
1943
|
+
.ds-swatch:hover, .ds-ease-chip:hover { transform: none; }
|
|
1944
|
+
}
|
|
1945
|
+
|
|
1620
1946
|
</style>
|
|
1621
1947
|
</head>
|
|
1622
|
-
<body class="bruma-reset">
|
|
1948
|
+
<body class="bruma-reset" data-system="bruma" data-mode="read">
|
|
1949
|
+
<a class="skip-link" href="#contenido">Saltar al contenido</a>
|
|
1623
1950
|
|
|
1624
1951
|
<!-- Iconos (estilo Lucide, trazo 2px) -->
|
|
1625
1952
|
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
|
|
@@ -1678,10 +2005,13 @@ html, body { overflow-x: clip; }
|
|
|
1678
2005
|
<nav class="ds-nav" id="dsNav">
|
|
1679
2006
|
<div class="ds-nav__group">Fundamentos</div>
|
|
1680
2007
|
<a href="#introduccion">Introducción</a>
|
|
2008
|
+
<a href="#datos">Color para datos</a>
|
|
2009
|
+
<a href="#criterio">Criterio de uso</a>
|
|
1681
2010
|
<a href="#voz">Voz y contenido</a>
|
|
1682
2011
|
<a href="#colores">Colores</a>
|
|
1683
2012
|
<a href="#tipografia">Tipografía</a>
|
|
1684
2013
|
<a href="#espaciado">Espaciado</a>
|
|
2014
|
+
<a href="#ritmo">Ritmo de contenido</a>
|
|
1685
2015
|
<a href="#bordes">Bordes, radios y focus</a>
|
|
1686
2016
|
<a href="#elevacion">Elevación</a>
|
|
1687
2017
|
<a href="#iconografia">Iconografía</a>
|
|
@@ -1734,11 +2064,10 @@ html, body { overflow-x: clip; }
|
|
|
1734
2064
|
</nav>
|
|
1735
2065
|
</aside>
|
|
1736
2066
|
|
|
1737
|
-
<main class="ds-main">
|
|
2067
|
+
<main class="ds-main" id="contenido" tabindex="-1">
|
|
1738
2068
|
|
|
1739
2069
|
<!-- ============================== INTRODUCCIÓN ============================== -->
|
|
1740
2070
|
<section id="introduccion" class="ds-hero">
|
|
1741
|
-
<p class="ds-eyebrow">Sistema de diseño · Higinio Sosa</p>
|
|
1742
2071
|
<h1>Bruma Lavanda</h1>
|
|
1743
2072
|
<p class="ds-lead u-measure">
|
|
1744
2073
|
Sistema de marca <strong>light-first</strong>, calmo y preciso, para los productos de seguimiento,
|
|
@@ -1751,17 +2080,17 @@ html, body { overflow-x: clip; }
|
|
|
1751
2080
|
<div class="ds-hero__chip" style="background:var(--primary-900)"></div>
|
|
1752
2081
|
</div>
|
|
1753
2082
|
|
|
1754
|
-
<div
|
|
2083
|
+
<div class="ds-actions">
|
|
1755
2084
|
<button class="btn btn--primary" id="dsHeroStart">Empezar a construir</button>
|
|
1756
2085
|
<button class="btn btn--outline" id="dsHeroTokens">Ver tokens</button>
|
|
1757
2086
|
</div>
|
|
1758
2087
|
|
|
1759
2088
|
<div class="ds-principles">
|
|
1760
|
-
<div class="
|
|
1761
|
-
<div class="
|
|
1762
|
-
<div class="
|
|
1763
|
-
<div class="
|
|
1764
|
-
<div class="
|
|
2089
|
+
<div class="ds-principle"><h2>Orden antes que adorno</h2><p>Todo tiene su sitio. La jerarquía la ponen el espacio, el borde y el peso tipográfico, no la decoración.</p></div>
|
|
2090
|
+
<div class="ds-principle"><h2>Legibilidad primero</h2><p>Una tipografía de UI pensada para baja visión y contrastes holgados en los dos modos. Si un dato no se lee a la primera, el diseño falló.</p></div>
|
|
2091
|
+
<div class="ds-principle"><h2>Un acento a la vez, y pequeño</h2><p>La lavanda <span class="u-mono">#5b578a</span> marca la acción, el estado activo y el foco. Nunca rellena áreas grandes ni compite consigo misma.</p></div>
|
|
2092
|
+
<div class="ds-principle"><h2>La niebla es el fondo, no el texto</h2><p>Fondos planos y fríos, superficies opacas. Nada difuminado: sin blur, sin degradados, sin texto sobre veladuras.</p></div>
|
|
2093
|
+
<div class="ds-principle"><h2>Movimiento corto y preciso</h2><p>La animación confirma lo que pasó y se aparta. Es breve porque el control no espera.</p></div>
|
|
1765
2094
|
</div>
|
|
1766
2095
|
|
|
1767
2096
|
<div class="alert alert--info" style="margin-top:24px">
|
|
@@ -1774,8 +2103,43 @@ html, body { overflow-x: clip; }
|
|
|
1774
2103
|
</section>
|
|
1775
2104
|
|
|
1776
2105
|
<!-- ============================== VOZ Y CONTENIDO ============================== -->
|
|
2106
|
+
<section id="datos">
|
|
2107
|
+
<h2>Color para datos</h2>
|
|
2108
|
+
<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>
|
|
2109
|
+
<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>
|
|
2110
|
+
<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>
|
|
2111
|
+
</section>
|
|
2112
|
+
|
|
2113
|
+
<section id="ritmo">
|
|
2114
|
+
<h2>Ritmo de contenido</h2>
|
|
2115
|
+
<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 20px entre tarjetas. Las secciones se separan 48px.</p>
|
|
2116
|
+
<div class="stack stack--cards" data-spacing-example data-mode="operate">
|
|
2117
|
+
<section class="card">
|
|
2118
|
+
<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>
|
|
2119
|
+
<form class="form-stack" onsubmit="return false">
|
|
2120
|
+
<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>
|
|
2121
|
+
<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>
|
|
2122
|
+
<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>
|
|
2123
|
+
</form>
|
|
2124
|
+
</section>
|
|
2125
|
+
<section class="card">
|
|
2126
|
+
<header class="text-group"><h3>Contenido relacionado</h3><p>Una tarjeta distinta conserva su propia distancia.</p></header>
|
|
2127
|
+
<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>
|
|
2128
|
+
</section>
|
|
2129
|
+
</div>
|
|
2130
|
+
</section>
|
|
2131
|
+
|
|
2132
|
+
<section id="criterio">
|
|
2133
|
+
<h2>Diseñar con Bruma Lavanda</h2>
|
|
2134
|
+
<dl class="ds-recipes">
|
|
2135
|
+
<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>
|
|
2136
|
+
<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>
|
|
2137
|
+
<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>
|
|
2138
|
+
<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>
|
|
2139
|
+
</dl>
|
|
2140
|
+
</section>
|
|
2141
|
+
|
|
1777
2142
|
<section id="voz">
|
|
1778
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1779
2143
|
<h2>Voz y contenido</h2>
|
|
1780
2144
|
<p class="ds-lead">Serena, precisa y directa: frases cortas que informan, el dato antes que el adjetivo. Clara sin ser seca, amable sin ser melosa.</p>
|
|
1781
2145
|
<div class="ds-demo ds-demo--col">
|
|
@@ -1799,7 +2163,6 @@ html, body { overflow-x: clip; }
|
|
|
1799
2163
|
|
|
1800
2164
|
<!-- ============================== COLORES ============================== -->
|
|
1801
2165
|
<section id="colores">
|
|
1802
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1803
2166
|
<h2>Colores</h2>
|
|
1804
2167
|
<p class="ds-lead">Un solo acento — lavanda <span class="u-mono">#5b578a</span>, apagada y grisácea — sobre neutrales de niebla derivados de la tinta <span class="u-mono">#2c2b38</span>. Haz clic en cualquier muestra para copiar su variable.</p>
|
|
1805
2168
|
|
|
@@ -1817,7 +2180,7 @@ html, body { overflow-x: clip; }
|
|
|
1817
2180
|
<p>Los componentes consumen <strong>solo esta capa</strong> — así el cambio de tema es un cambio de atributo.</p>
|
|
1818
2181
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
1819
2182
|
<table class="table" id="aliasTable">
|
|
1820
|
-
<thead><tr><th style="width:52px"></th><th>Alias</th><th>Valor (light)</th><th>Rol</th></tr></thead>
|
|
2183
|
+
<thead><tr><th style="width:min(100%, 52px)"></th><th>Alias</th><th>Valor (light)</th><th>Rol</th></tr></thead>
|
|
1821
2184
|
<tbody></tbody>
|
|
1822
2185
|
</table>
|
|
1823
2186
|
</div>
|
|
@@ -1854,14 +2217,13 @@ html, body { overflow-x: clip; }
|
|
|
1854
2217
|
<div class="ds-ratio">
|
|
1855
2218
|
<div style="flex:6;background:var(--bg);color:var(--text-secondary)">60% niebla y superficies</div>
|
|
1856
2219
|
<div style="flex:3;background:var(--neutral-600);color:var(--neutral-0)">30% tinta y estructura</div>
|
|
1857
|
-
<div style="flex:1;background:var(--
|
|
2220
|
+
<div style="flex:1;background:var(--action-bg);color:var(--text-on-action)">10%</div>
|
|
1858
2221
|
</div>
|
|
1859
2222
|
<p><strong>Un solo botón primario visible por pantalla</strong>; el resto secundarios o ghost. Fondos siempre planos de niebla: sin degradados de ningún tipo, sin texturas, granulado ni patrones, sin veladuras. El acento pierde poder si supera el 10 %, y nunca se concentra en una sola área grande. Estado nunca solo con color: color + icono + texto, y el éxito nunca con la lavanda del acento.</p>
|
|
1860
2223
|
</section>
|
|
1861
2224
|
|
|
1862
2225
|
<!-- ============================== TIPOGRAFÍA ============================== -->
|
|
1863
2226
|
<section id="tipografia">
|
|
1864
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1865
2227
|
<h2>Tipografía</h2>
|
|
1866
2228
|
<p class="ds-lead">Tres familias con roles estrictos. Escala 1.25 (tercera mayor) desde 16 px.</p>
|
|
1867
2229
|
|
|
@@ -1890,7 +2252,6 @@ html, body { overflow-x: clip; }
|
|
|
1890
2252
|
|
|
1891
2253
|
<!-- ============================== ESPACIADO ============================== -->
|
|
1892
2254
|
<section id="espaciado">
|
|
1893
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1894
2255
|
<h2>Espaciado</h2>
|
|
1895
2256
|
<p class="ds-lead">Escala base 4 px — cero valores mágicos. El número del token = px ÷ 4. Densidad algo compacta: tarjetas y secciones respiran menos para mostrar más datos sin apretar.</p>
|
|
1896
2257
|
<div class="ds-space-list" id="spaceScale"></div>
|
|
@@ -1912,7 +2273,6 @@ html, body { overflow-x: clip; }
|
|
|
1912
2273
|
|
|
1913
2274
|
<!-- ============================== BORDES, RADIOS Y FOCUS ============================== -->
|
|
1914
2275
|
<section id="bordes">
|
|
1915
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1916
2276
|
<h2>Bordes, radios y focus</h2>
|
|
1917
2277
|
<p class="ds-lead">Bordes de 1 px, radios contenidos y un focus siempre visible. Las formas más rectas ordenan la pantalla y alinean mejor en rejilla, sin llegar a la esquina viva.</p>
|
|
1918
2278
|
<h3>Radios</h3>
|
|
@@ -1921,14 +2281,13 @@ html, body { overflow-x: clip; }
|
|
|
1921
2281
|
<div class="ds-radius-box" style="border-radius:var(--radius-md)">md · 8</div>
|
|
1922
2282
|
<div class="ds-radius-box" style="border-radius:var(--radius-lg)">lg · 12</div>
|
|
1923
2283
|
<div class="ds-radius-box" style="border-radius:var(--radius-xl)">xl · 16</div>
|
|
1924
|
-
<div class="ds-radius-box" style="border-radius:var(--radius-full);width:72px">full</div>
|
|
2284
|
+
<div class="ds-radius-box" style="border-radius:var(--radius-full);width:min(100%, 72px)">full</div>
|
|
1925
2285
|
</div>
|
|
1926
2286
|
<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 Bruma Lavanda</strong>: la niebla es un color de fondo, no un efecto; las superficies son opacas y planas.</p>
|
|
1927
2287
|
</section>
|
|
1928
2288
|
|
|
1929
2289
|
<!-- ============================== ELEVACIÓN ============================== -->
|
|
1930
2290
|
<section id="elevacion">
|
|
1931
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1932
2291
|
<h2>Elevación</h2>
|
|
1933
2292
|
<p class="ds-lead">La elevación se apoya en el borde más que en la sombra: cada capa se separa por su superficie y su contorno, y la sombra, mínima y teñida con la tinta <span class="u-mono">rgba(44,43,56,…)</span> (nunca negro puro), solo confirma lo que el borde ya dice. Máximo 3 niveles visibles por pantalla. Sin resplandor de acento.</p>
|
|
1934
2293
|
<h3>Niveles</h3>
|
|
@@ -1950,7 +2309,6 @@ html, body { overflow-x: clip; }
|
|
|
1950
2309
|
|
|
1951
2310
|
<!-- ============================== ICONOGRAFÍA ============================== -->
|
|
1952
2311
|
<section id="iconografia">
|
|
1953
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1954
2312
|
<h2>Iconografía</h2>
|
|
1955
2313
|
<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 los radios contenidos y la lectura limpia de la marca. Si existe un set propio de marca, reemplazar.</p>
|
|
1956
2314
|
<div class="ds-icon-grid">
|
|
@@ -1972,7 +2330,6 @@ html, body { overflow-x: clip; }
|
|
|
1972
2330
|
|
|
1973
2331
|
<!-- ============================== MARCA / WORDMARK ============================== -->
|
|
1974
2332
|
<section id="marca">
|
|
1975
|
-
<p class="ds-eyebrow">Fundamentos</p>
|
|
1976
2333
|
<h2>Marca / wordmark</h2>
|
|
1977
2334
|
<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> (Bricolage Grotesque) — nunca se dibuja un logo aproximado.</p>
|
|
1978
2335
|
<div class="ds-demo" style="gap:32px">
|
|
@@ -1993,7 +2350,6 @@ html, body { overflow-x: clip; }
|
|
|
1993
2350
|
|
|
1994
2351
|
<!-- ============================== COMPONENTES ============================== -->
|
|
1995
2352
|
<section id="componentes">
|
|
1996
|
-
<p class="ds-eyebrow">Biblioteca</p>
|
|
1997
2353
|
<h2>Componentes</h2>
|
|
1998
2354
|
<p class="ds-lead">Los 35 componentes del sistema, renderizados en vivo con las clases del framework <span class="u-mono">bruma-lavanda.css</span>. Cada bloque incluye su código de uso.</p>
|
|
1999
2355
|
|
|
@@ -2062,8 +2418,8 @@ html, body { overflow-x: clip; }
|
|
|
2062
2418
|
<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>
|
|
2063
2419
|
<div class="ds-demo">
|
|
2064
2420
|
<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>
|
|
2065
|
-
<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>
|
|
2066
|
-
<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>
|
|
2421
|
+
<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>
|
|
2422
|
+
<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>
|
|
2067
2423
|
</div>
|
|
2068
2424
|
<details class="ds-code"><summary>Ver código</summary>
|
|
2069
2425
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
@@ -2593,7 +2949,7 @@ html, body { overflow-x: clip; }
|
|
|
2593
2949
|
<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>
|
|
2594
2950
|
<div class="ds-demo" style="padding-bottom:180px">
|
|
2595
2951
|
<div class="menu-wrap">
|
|
2596
|
-
<button class="btn btn--secondary js-menu-toggle">Acciones<svg style="width:16px;height:16px"><use href="#i-chevron-down"/></svg></button>
|
|
2952
|
+
<button class="btn btn--secondary js-menu-toggle">Acciones<svg style="width:min(100%, 16px);height:16px"><use href="#i-chevron-down"/></svg></button>
|
|
2597
2953
|
<div class="menu" role="menu">
|
|
2598
2954
|
<button class="menu__item" role="menuitem"><svg><use href="#i-pencil"/></svg>Editar</button>
|
|
2599
2955
|
<button class="menu__item" role="menuitem"><svg><use href="#i-copy"/></svg>Duplicar</button>
|
|
@@ -2699,13 +3055,13 @@ html, body { overflow-x: clip; }
|
|
|
2699
3055
|
<!-- Stat -->
|
|
2700
3056
|
<div class="ds-component" id="comp-stat">
|
|
2701
3057
|
<h3>Stat</h3>
|
|
2702
|
-
<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 ·
|
|
3058
|
+
<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>
|
|
2703
3059
|
<div class="grid">
|
|
2704
3060
|
<div class="card col-12 col-md-4">
|
|
2705
3061
|
<div class="stat">
|
|
2706
3062
|
<span class="stat__label"><svg><use href="#i-chart"/></svg>Ingresos del mes</span>
|
|
2707
3063
|
<div class="stat__row">
|
|
2708
|
-
<span class="stat__value
|
|
3064
|
+
<span class="stat__value " data-target="128400" data-prefix="$ ">$ 128,400</span>
|
|
2709
3065
|
<span class="stat__delta stat__delta--up"><svg><use href="#i-trending-up"/></svg>+12.4%</span>
|
|
2710
3066
|
</div>
|
|
2711
3067
|
</div>
|
|
@@ -2714,7 +3070,7 @@ html, body { overflow-x: clip; }
|
|
|
2714
3070
|
<div class="stat">
|
|
2715
3071
|
<span class="stat__label"><svg><use href="#i-user"/></svg>Clientes activos</span>
|
|
2716
3072
|
<div class="stat__row">
|
|
2717
|
-
<span class="stat__value
|
|
3073
|
+
<span class="stat__value " data-target="1284">1,284</span>
|
|
2718
3074
|
<span class="stat__delta"><svg><use href="#i-trending-down"/></svg>-2.1%</span>
|
|
2719
3075
|
</div>
|
|
2720
3076
|
</div>
|
|
@@ -2723,7 +3079,7 @@ html, body { overflow-x: clip; }
|
|
|
2723
3079
|
<div class="stat">
|
|
2724
3080
|
<span class="stat__label"><svg><use href="#i-folder"/></svg>Proyectos abiertos</span>
|
|
2725
3081
|
<div class="stat__row">
|
|
2726
|
-
<span class="stat__value
|
|
3082
|
+
<span class="stat__value " data-target="37">37</span>
|
|
2727
3083
|
<span class="stat__delta"><svg><use href="#i-minus"/></svg>0%</span>
|
|
2728
3084
|
</div>
|
|
2729
3085
|
</div>
|
|
@@ -2916,7 +3272,7 @@ html, body { overflow-x: clip; }
|
|
|
2916
3272
|
<div class="grid">
|
|
2917
3273
|
<div class="card col-12 col-md-6">
|
|
2918
3274
|
<div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
|
|
2919
|
-
<div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>
|
|
3275
|
+
<div class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px"></div>
|
|
2920
3276
|
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
|
2921
3277
|
<div class="skeleton" style="height:12px;width:60%"></div>
|
|
2922
3278
|
<div class="skeleton" style="height:10px;width:40%"></div>
|
|
@@ -2938,7 +3294,7 @@ html, body { overflow-x: clip; }
|
|
|
2938
3294
|
<details class="ds-code"><summary>Ver código</summary>
|
|
2939
3295
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
2940
3296
|
<pre class="ds-pre"><code><div class="skeleton" style="height:10px;width:85%"></div>
|
|
2941
|
-
<div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>
|
|
3297
|
+
<div class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px"></div>
|
|
2942
3298
|
|
|
2943
3299
|
<div class="empty-state">
|
|
2944
3300
|
<svg>…icono 40px…</svg>
|
|
@@ -3344,7 +3700,6 @@ html, body { overflow-x: clip; }
|
|
|
3344
3700
|
|
|
3345
3701
|
<!-- ============================== MOTION ============================== -->
|
|
3346
3702
|
<section id="motion">
|
|
3347
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3348
3703
|
<h2>Motion</h2>
|
|
3349
3704
|
<p class="ds-lead">Corto y preciso: el movimiento confirma lo que pasó y se aparta, y esa rapidez es parte de la sensación de control. El feedback táctil es inmediato y el techo no pasa de 300 ms. 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>
|
|
3350
3705
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
@@ -3370,13 +3725,12 @@ html, body { overflow-x: clip; }
|
|
|
3370
3725
|
<li>Stagger en listas: 30 ms por ítem, máximo 6 ítems.</li>
|
|
3371
3726
|
<li>Si la carga dura <300 ms, no mostrar spinner (evita parpadeo).</li>
|
|
3372
3727
|
<li>Ningún indicador late en loop (pulse, ping, glow): un latido sugiere urgencia y rompe la sensación de control. El único pulso es el del skeleton, mientras carga.</li>
|
|
3373
|
-
<li><span class="u-mono">prefers-reduced-motion</span>
|
|
3728
|
+
<li><span class="u-mono">prefers-reduced-motion</span> conserva estados finales, evita desplazamientos y detiene la carga animada.</li>
|
|
3374
3729
|
</ul>
|
|
3375
3730
|
</section>
|
|
3376
3731
|
|
|
3377
3732
|
<!-- ============================== ACCESIBILIDAD ============================== -->
|
|
3378
3733
|
<section id="accesibilidad">
|
|
3379
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3380
3734
|
<h2>Accesibilidad</h2>
|
|
3381
3735
|
<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>
|
|
3382
3736
|
<div class="ds-demo ds-demo--col" style="padding:16px">
|
|
@@ -3403,74 +3757,213 @@ html, body { overflow-x: clip; }
|
|
|
3403
3757
|
|
|
3404
3758
|
<!-- ============================== TOKENS Y DESCARGA ============================== -->
|
|
3405
3759
|
<section id="tokens">
|
|
3406
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3407
3760
|
<h2>Tokens y descarga</h2>
|
|
3408
3761
|
<p class="ds-lead">El sistema completo vive en <span class="u-mono">dist/bruma-lavanda/</span>: <span class="u-mono">bruma-lavanda.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>
|
|
3409
3762
|
|
|
3410
3763
|
<h3>Variables CSS</h3>
|
|
3411
3764
|
<div class="ds-code-box"><button class="ds-copy">Copiar</button>
|
|
3412
|
-
<pre class="ds-pre"><code
|
|
3413
|
-
|
|
3765
|
+
<pre class="ds-pre"><code>/* ============================================================
|
|
3766
|
+
Bruma Lavanda — Design Tokens v1.0
|
|
3767
|
+
Sistema de diseño de Higinio Sosa · light-first
|
|
3768
|
+
Fuente de verdad: DESIGN-bruma-lavanda.md
|
|
3769
|
+
Uso: importar ANTES de cualquier estilo propio.
|
|
3770
|
+
Los componentes consumen SOLO aliases semánticos, nunca hex.
|
|
3771
|
+
============================================================ */
|
|
3772
|
+
|
|
3773
|
+
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap");
|
|
3774
|
+
|
|
3775
|
+
:root {
|
|
3776
|
+
/* == Primitivos: primario (Lavanda) ==
|
|
3777
|
+
Lavanda apagada, nunca violeta saturado. El acento no rellena áreas grandes:
|
|
3778
|
+
solo controles, estados activos y anillos de foco. */
|
|
3414
3779
|
--primary-50: #e5e3f1; --primary-100: #d8d5ea; --primary-200: #bdb9da;
|
|
3415
3780
|
--primary-300: #9d99c4; --primary-400: #7c78a8; --primary-500: #5b578a;
|
|
3416
3781
|
--primary-600: #4d4979; --primary-700: #403d66; --primary-800: #35334f;
|
|
3417
3782
|
--primary-900: #2c2b38;
|
|
3418
3783
|
|
|
3419
|
-
/*
|
|
3784
|
+
/* == Primitivos: neutrales (Niebla) == */
|
|
3420
3785
|
--neutral-0: #fbfbfd; --neutral-50: #f2f1f6; --neutral-100: #e9e8f0;
|
|
3421
3786
|
--neutral-200: #dedce8; --neutral-300: #b8b6c8; --neutral-400: #86849a;
|
|
3422
3787
|
--neutral-500: #5d5b6e; --neutral-600: #48475a; --neutral-700: #393846;
|
|
3423
3788
|
--neutral-800: #2c2b38; --neutral-900: #1f1e28;
|
|
3424
3789
|
|
|
3425
|
-
/*
|
|
3790
|
+
/* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) ==
|
|
3791
|
+
El éxito es verde azulado, lejos del acento lavanda: el acento nunca comunica éxito. */
|
|
3426
3792
|
--success-500: #2f7a68; --success-100: #dcefe9; --success-text: #235e50;
|
|
3427
3793
|
--warning-500: #b07f2a; --warning-100: #f5ecd9; --warning-text: #7a5716;
|
|
3428
3794
|
--danger-500: #b24c55; --danger-100: #f6e3e5; --danger-text: #8b3540;
|
|
3429
3795
|
--info-500: #4f7896; --info-100: #e1eaf1; --info-text: #3a5b74;
|
|
3430
3796
|
|
|
3431
|
-
/* Aliases (los componentes consumen SOLO esto) */
|
|
3432
|
-
--bg: var(--neutral-50);
|
|
3433
|
-
--
|
|
3434
|
-
--
|
|
3435
|
-
--
|
|
3436
|
-
--
|
|
3437
|
-
--
|
|
3438
|
-
--
|
|
3439
|
-
--
|
|
3440
|
-
|
|
3441
|
-
|
|
3797
|
+
/* == Aliases semánticos (los componentes consumen SOLO esto) == */
|
|
3798
|
+
--bg: var(--neutral-50);
|
|
3799
|
+
--surface: var(--neutral-0);
|
|
3800
|
+
--surface-alt: var(--neutral-100);
|
|
3801
|
+
--border: var(--neutral-200);
|
|
3802
|
+
--border-strong: var(--neutral-400);
|
|
3803
|
+
--text-primary: var(--neutral-800);
|
|
3804
|
+
--text-secondary: var(--neutral-600);
|
|
3805
|
+
--text-muted: var(--neutral-500);
|
|
3806
|
+
--text-disabled: var(--neutral-400);
|
|
3807
|
+
--text-on-primary: #ffffff;
|
|
3808
|
+
--text-on-primary-solid: var(--primary-700);
|
|
3809
|
+
--accent: var(--primary-500);
|
|
3810
|
+
--accent-hover: var(--primary-600);
|
|
3811
|
+
--accent-active: var(--primary-700);
|
|
3812
|
+
--accent-soft: var(--primary-50);
|
|
3813
|
+
--accent-soft-strong: var(--primary-100);
|
|
3814
|
+
--link: var(--primary-600); /* AA 7.98:1 sobre --surface — texto de links y ghost */
|
|
3815
|
+
|
|
3816
|
+
/* == Tipografía == */
|
|
3442
3817
|
--font-display: "Bricolage Grotesque", system-ui, sans-serif;
|
|
3443
3818
|
--font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
|
|
3444
3819
|
--font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
|
|
3445
3820
|
--text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
|
|
3446
3821
|
--text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
|
|
3447
3822
|
--text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
|
|
3448
|
-
--
|
|
3823
|
+
--leading-xs: 1.5; --leading-sm: 1.5; --leading-base: 1.6; --leading-lg: 1.55;
|
|
3824
|
+
--leading-xl: 1.4; --leading-2xl: 1.3; --leading-3xl: 1.25;
|
|
3825
|
+
--leading-4xl: 1.15; --leading-5xl: 1.1;
|
|
3826
|
+
--tracking-display: -0.02em; --tracking-body: 0; --tracking-label: 0.04em;
|
|
3827
|
+
--weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
|
|
3828
|
+
--measure: 65ch;
|
|
3449
3829
|
|
|
3450
|
-
/* Espaciado (base 4px; densidad algo compacta) */
|
|
3830
|
+
/* == Espaciado (escala base 4px; densidad algo compacta) == */
|
|
3451
3831
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
3452
3832
|
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
|
|
3453
3833
|
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
|
|
3454
|
-
--card-padding: var(--space-5); --
|
|
3834
|
+
--card-padding: var(--space-5); --card-padding-mobile: var(--space-4);
|
|
3835
|
+
--section-gap: var(--space-12); --form-gap: var(--space-5);
|
|
3836
|
+
--button-padding-md: 12px 20px; --button-padding-sm: 8px 14px;
|
|
3455
3837
|
--control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px;
|
|
3838
|
+
--gutter: 24px; --gutter-mobile: 16px;
|
|
3456
3839
|
|
|
3457
|
-
/* Radios y sombras
|
|
3840
|
+
/* == Radios, bordes y sombras ==
|
|
3841
|
+
La elevación se apoya en el borde; las sombras son mínimas y van
|
|
3842
|
+
teñidas de la tinta, nunca negro puro. */
|
|
3458
3843
|
--radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
|
|
3459
3844
|
--radius-xl: 16px; --radius-full: 9999px;
|
|
3845
|
+
--border-width: 1px;
|
|
3460
3846
|
--shadow-xs: 0 1px 1px rgba(44,43,56,.04);
|
|
3461
3847
|
--shadow-sm: 0 1px 2px rgba(44,43,56,.06);
|
|
3462
3848
|
--shadow-md: 0 2px 6px rgba(44,43,56,.07), 0 1px 2px rgba(44,43,56,.04);
|
|
3463
3849
|
--shadow-lg: 0 8px 20px rgba(44,43,56,.09), 0 2px 6px rgba(44,43,56,.05);
|
|
3464
3850
|
--shadow-xl: 0 16px 36px rgba(44,43,56,.12);
|
|
3851
|
+
|
|
3852
|
+
/* == Focus == */
|
|
3465
3853
|
--ring: 0 0 0 3px rgba(91,87,138,.25);
|
|
3854
|
+
--ring-color: rgba(91,87,138,.25);
|
|
3466
3855
|
|
|
3467
|
-
/* Motion (corto y preciso) */
|
|
3856
|
+
/* == Motion (corto y preciso) == */
|
|
3468
3857
|
--duration-instant: 100ms; --duration-fast: 140ms; --duration-base: 180ms;
|
|
3469
3858
|
--duration-slow: 240ms; --duration-page: 300ms;
|
|
3470
3859
|
--ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
3471
3860
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
3472
|
-
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
3861
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
|
|
3473
3862
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
3863
|
+
--stagger-step: 30ms;
|
|
3864
|
+
|
|
3865
|
+
color-scheme: light;
|
|
3866
|
+
|
|
3867
|
+
--overlay: rgba(31, 30, 40, .5);
|
|
3868
|
+
--tooltip-bg: var(--neutral-900);
|
|
3869
|
+
--tooltip-text: var(--neutral-0);
|
|
3870
|
+
--focus-color: var(--accent);
|
|
3871
|
+
--text-on-danger: var(--neutral-0);
|
|
3872
|
+
--border-hover: var(--neutral-500);
|
|
3873
|
+
--ring-danger: 0 0 0 3px rgba(178,76,85,.22);
|
|
3874
|
+
|
|
3875
|
+
--action-bg: var(--accent);
|
|
3876
|
+
--action-hover: var(--accent-hover);
|
|
3877
|
+
--action-active: var(--accent-active);
|
|
3878
|
+
--text-on-action: var(--text-on-primary);
|
|
3879
|
+
--control-border: var(--border-strong);
|
|
3880
|
+
--placeholder: var(--text-muted);
|
|
3881
|
+
--selection-bg: var(--action-bg);
|
|
3882
|
+
--selection-text: var(--text-on-action);
|
|
3883
|
+
--font-ui-heading: var(--font-body);
|
|
3884
|
+
--text-ui-title: 2rem;
|
|
3885
|
+
--touch-target: 44px;
|
|
3886
|
+
--text-display-fluid: clamp(2.5rem, 1.8rem + 2.2vw, 4.25rem);
|
|
3887
|
+
|
|
3888
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3889
|
+
--chart-1: #857bc1;
|
|
3890
|
+
--chart-2: #8a600a;
|
|
3891
|
+
--chart-3: #4a8cc1;
|
|
3892
|
+
--chart-4: #853f63;
|
|
3893
|
+
--chart-5: #129a92;
|
|
3894
|
+
--chart-6: #8e4031;
|
|
3895
|
+
--chart-7: #5b975e;
|
|
3896
|
+
/* Ritmo de contenido y formularios. */
|
|
3897
|
+
--field-gap: 6px;
|
|
3898
|
+
--heading-gap: var(--space-2);
|
|
3899
|
+
--content-gap: var(--space-4);
|
|
3900
|
+
--card-content-gap: var(--space-4);
|
|
3901
|
+
--card-group-gap: var(--space-5);
|
|
3902
|
+
|
|
3903
|
+
}
|
|
3904
|
+
|
|
3905
|
+
/* == Modo oscuro (variante) — alternar data-theme en <html> ==
|
|
3906
|
+
Sin sombras en las capas: se separan por superficie y borde, y solo
|
|
3907
|
+
los overlays (lg/xl) conservan una sombra tenue. */
|
|
3908
|
+
[data-theme="dark"] {
|
|
3909
|
+
--bg: #16151c;
|
|
3910
|
+
--surface: #1f1e27;
|
|
3911
|
+
--surface-alt: #27262f;
|
|
3912
|
+
--border: #2f2d3a;
|
|
3913
|
+
--border-strong: #747189;
|
|
3914
|
+
--text-primary: #e7e6ef;
|
|
3915
|
+
--text-secondary: #c9c7d6;
|
|
3916
|
+
--text-muted: #aaa8bb;
|
|
3917
|
+
--text-disabled: #7b7990;
|
|
3918
|
+
--accent: #b0acdc;
|
|
3919
|
+
--accent-hover: #c4c1e6;
|
|
3920
|
+
--accent-active: #9d98cf;
|
|
3921
|
+
--accent-soft: #2b2940;
|
|
3922
|
+
--accent-soft-strong: #36334f;
|
|
3923
|
+
--text-on-primary: #16151c;
|
|
3924
|
+
--text-on-primary-solid: #c4c1e6;
|
|
3925
|
+
--link: #c4c1e6;
|
|
3926
|
+
--success-500: #6cc1ad; --success-100: #13261f; --success-text: #8bd1c0;
|
|
3927
|
+
--warning-500: #d6a752; --warning-100: #29220f; --warning-text: #e4c07f;
|
|
3928
|
+
--danger-500: #e08890; --danger-100: #2c171a; --danger-text: #eba4ab;
|
|
3929
|
+
--info-500: #8daecb; --info-100: #172129; --info-text: #a8c3da;
|
|
3930
|
+
--ring: 0 0 0 3px rgba(176,172,220,.3);
|
|
3931
|
+
--ring-color: rgba(176,172,220,.3);
|
|
3932
|
+
--shadow-xs: none;
|
|
3933
|
+
--shadow-sm: none;
|
|
3934
|
+
--shadow-md: none;
|
|
3935
|
+
--shadow-lg: 0 8px 20px rgba(8,8,12,.28);
|
|
3936
|
+
--shadow-xl: 0 16px 32px rgba(8,8,12,.32);
|
|
3937
|
+
color-scheme: dark;
|
|
3938
|
+
|
|
3939
|
+
--overlay: rgba(0, 0, 0, .6);
|
|
3940
|
+
--tooltip-bg: #e7e6ef;
|
|
3941
|
+
--tooltip-text: #1f1e28;
|
|
3942
|
+
--focus-color: var(--accent);
|
|
3943
|
+
--text-on-danger: #16151c;
|
|
3944
|
+
--border-hover: #aaa8bb;
|
|
3945
|
+
--ring-danger: 0 0 0 3px rgba(224,136,144,.25);
|
|
3946
|
+
|
|
3947
|
+
--selection-bg: var(--action-bg);
|
|
3948
|
+
--selection-text: var(--text-on-action);
|
|
3949
|
+
|
|
3950
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3951
|
+
--chart-1: #877cc3;
|
|
3952
|
+
--chart-2: #946a1c;
|
|
3953
|
+
--chart-3: #5798ce;
|
|
3954
|
+
--chart-4: #a0587c;
|
|
3955
|
+
--chart-5: #2aa79e;
|
|
3956
|
+
--chart-6: #aa5849;
|
|
3957
|
+
--chart-7: #67a369;
|
|
3958
|
+
}
|
|
3959
|
+
|
|
3960
|
+
/* == Accesibilidad del movimiento == */
|
|
3961
|
+
|
|
3962
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3963
|
+
:root {
|
|
3964
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
3965
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
3966
|
+
}
|
|
3474
3967
|
}</code></pre>
|
|
3475
3968
|
</div>
|
|
3476
3969
|
|
|
@@ -3533,7 +4026,6 @@ html, body { overflow-x: clip; }
|
|
|
3533
4026
|
|
|
3534
4027
|
<!-- ============================== INSTALACIÓN ============================== -->
|
|
3535
4028
|
<section id="instalacion">
|
|
3536
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3537
4029
|
<h2>Instalación</h2>
|
|
3538
4030
|
<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/bruma-lavanda/</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>
|
|
3539
4031
|
|
|
@@ -3598,7 +4090,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3598
4090
|
|
|
3599
4091
|
<!-- ============================== MCP ============================== -->
|
|
3600
4092
|
<section id="mcp">
|
|
3601
|
-
<p class="ds-eyebrow">Sistema</p>
|
|
3602
4093
|
<h2>MCP</h2>
|
|
3603
4094
|
<p class="ds-lead">El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Bruma Lavanda (<span class="u-mono">system="bruma"</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>
|
|
3604
4095
|
|
|
@@ -3802,24 +4293,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3802
4293
|
if (heroStart) heroStart.addEventListener("click", function () { scrollToId("componentes"); });
|
|
3803
4294
|
if (heroTokens) heroTokens.addEventListener("click", function () { scrollToId("tokens"); });
|
|
3804
4295
|
|
|
3805
|
-
/* ---------- Menú móvil ---------- */
|
|
3806
|
-
var burger = d.getElementById("dsHamburger");
|
|
3807
|
-
var sidenav = d.getElementById("dsSidenav");
|
|
3808
|
-
if (burger && sidenav) {
|
|
3809
|
-
burger.addEventListener("click", function (e) {
|
|
3810
|
-
e.stopPropagation();
|
|
3811
|
-
sidenav.classList.toggle("is-open");
|
|
3812
|
-
});
|
|
3813
|
-
d.addEventListener("click", function (e) {
|
|
3814
|
-
if (sidenav.classList.contains("is-open") && !sidenav.contains(e.target) && e.target !== burger) {
|
|
3815
|
-
sidenav.classList.remove("is-open");
|
|
3816
|
-
}
|
|
3817
|
-
});
|
|
3818
|
-
sidenav.addEventListener("click", function (e) {
|
|
3819
|
-
if (e.target.closest("a")) sidenav.classList.remove("is-open");
|
|
3820
|
-
});
|
|
3821
|
-
}
|
|
3822
|
-
|
|
3823
4296
|
/* ---------- Copiar al portapapeles ---------- */
|
|
3824
4297
|
function copyText(text, feedbackFn) {
|
|
3825
4298
|
function done() { if (feedbackFn) feedbackFn(); }
|
|
@@ -3895,11 +4368,11 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3895
4368
|
["--text-primary", "neutral-800", "Texto principal"],
|
|
3896
4369
|
["--text-secondary", "neutral-600", "Texto secundario"],
|
|
3897
4370
|
["--text-muted", "neutral-500", "Terciario, captions"],
|
|
3898
|
-
["--text-disabled", "neutral-400", "
|
|
3899
|
-
["--text-on-primary", "#ffffff", "Texto sobre
|
|
4371
|
+
["--text-disabled", "neutral-400", "Solo controles deshabilitados"],
|
|
4372
|
+
["--text-on-primary", "#ffffff", "Texto de compatibilidad sobre acento"],
|
|
3900
4373
|
["--text-on-primary-solid", "primary-700", "Texto de peso normal sobre primary-100"],
|
|
3901
4374
|
["--accent", "primary-500", "Rellenos de controles, bordes activos, focus"],
|
|
3902
|
-
["--accent-hover", "primary-600", "Hover del
|
|
4375
|
+
["--accent-hover", "primary-600", "Hover del acento de marca"],
|
|
3903
4376
|
["--accent-active", "primary-700", "Pressed"],
|
|
3904
4377
|
["--accent-soft", "primary-50", "Hover de ghost, selección sutil"],
|
|
3905
4378
|
["--accent-soft-strong", "primary-100", "Seleccionados suaves"],
|
|
@@ -3947,7 +4420,7 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3947
4420
|
var tr = d.createElement("tr");
|
|
3948
4421
|
var chipColor = a[1].indexOf("#") === 0 ? a[1] : "var(--" + a[1] + ")";
|
|
3949
4422
|
tr.innerHTML =
|
|
3950
|
-
'<td><span style="display:inline-block;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:' + chipColor + '"></span></td>' +
|
|
4423
|
+
'<td><span style="display:inline-block;width:min(100%, 24px);height:24px;border-radius:6px;border:1px solid var(--border);background:' + chipColor + '"></span></td>' +
|
|
3951
4424
|
'<td class="u-mono">' + a[0] + "</td>" +
|
|
3952
4425
|
'<td class="u-mono" style="color:var(--text-muted)">' + a[1] + "</td>" +
|
|
3953
4426
|
"<td>" + a[2] + "</td>";
|
|
@@ -4253,7 +4726,8 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4253
4726
|
function dismiss() {
|
|
4254
4727
|
if (!toast.parentElement) return;
|
|
4255
4728
|
toast.classList.add("is-leaving");
|
|
4256
|
-
toast.addEventListener("animationend", function () { toast.remove(); });
|
|
4729
|
+
toast.addEventListener("animationend", function () { toast.remove(); }, { once: true });
|
|
4730
|
+
setTimeout(function () { toast.remove(); }, 400);
|
|
4257
4731
|
if (reduceMotion) toast.remove();
|
|
4258
4732
|
}
|
|
4259
4733
|
}
|
|
@@ -4329,41 +4803,6 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4329
4803
|
renderPagination();
|
|
4330
4804
|
}
|
|
4331
4805
|
|
|
4332
|
-
/* ---------- Count-up de Stat ---------- */
|
|
4333
|
-
function countUp(el) {
|
|
4334
|
-
var target = parseFloat(el.getAttribute("data-target") || 0);
|
|
4335
|
-
var prefix = el.getAttribute("data-prefix") || "";
|
|
4336
|
-
var suffix = el.getAttribute("data-suffix") || "";
|
|
4337
|
-
function fmt(v) { return prefix + Math.round(v).toLocaleString("es-MX") + suffix; }
|
|
4338
|
-
if (reduceMotion) { el.textContent = fmt(target); return; }
|
|
4339
|
-
/* Dura --duration-page, el techo de motion del sistema */
|
|
4340
|
-
var start = null, DUR = parseFloat(getComputedStyle(d.documentElement).getPropertyValue("--duration-page")) || 300;
|
|
4341
|
-
function tick(ts) {
|
|
4342
|
-
if (start === null) start = ts;
|
|
4343
|
-
var t = Math.min(1, (ts - start) / DUR);
|
|
4344
|
-
var eased = 1 - Math.pow(1 - t, 3);
|
|
4345
|
-
el.textContent = fmt(target * eased);
|
|
4346
|
-
if (t < 1) requestAnimationFrame(tick);
|
|
4347
|
-
}
|
|
4348
|
-
requestAnimationFrame(tick);
|
|
4349
|
-
}
|
|
4350
|
-
var countEls = d.querySelectorAll(".js-countup");
|
|
4351
|
-
if ("IntersectionObserver" in window) {
|
|
4352
|
-
var seen = new WeakSet();
|
|
4353
|
-
var counter = new IntersectionObserver(function (entries) {
|
|
4354
|
-
entries.forEach(function (entry) {
|
|
4355
|
-
if (entry.isIntersecting && !seen.has(entry.target)) {
|
|
4356
|
-
seen.add(entry.target);
|
|
4357
|
-
countUp(entry.target);
|
|
4358
|
-
counter.unobserve(entry.target);
|
|
4359
|
-
}
|
|
4360
|
-
});
|
|
4361
|
-
}, { threshold: 0.4 });
|
|
4362
|
-
Array.prototype.forEach.call(countEls, function (el) { counter.observe(el); });
|
|
4363
|
-
} else {
|
|
4364
|
-
Array.prototype.forEach.call(countEls, countUp);
|
|
4365
|
-
}
|
|
4366
|
-
|
|
4367
4806
|
/* ---------- Drawer (§10.29): focus-trap + retorno de foco + Esc ---------- */
|
|
4368
4807
|
var drawerTrigger = null;
|
|
4369
4808
|
function openDrawer(dr, trigger) {
|
|
@@ -4682,6 +5121,75 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
4682
5121
|
});
|
|
4683
5122
|
}
|
|
4684
5123
|
})();
|
|
5124
|
+
</script>
|
|
5125
|
+
<!-- INTERACCIONES COMPARTIDAS GENERADAS -->
|
|
5126
|
+
<script>
|
|
5127
|
+
(function () {
|
|
5128
|
+
"use strict";
|
|
5129
|
+
var trigger = document.getElementById("dsHamburger");
|
|
5130
|
+
var panel = document.getElementById("dsSidenav") || document.getElementById("dsSidebar");
|
|
5131
|
+
var mobile = window.matchMedia("(max-width: 1023px)");
|
|
5132
|
+
|
|
5133
|
+
/**
|
|
5134
|
+
* Actualiza la navegación como disclosure, sin crear una trampa de foco.
|
|
5135
|
+
* @param {boolean} open - Si la navegación móvil debe estar disponible.
|
|
5136
|
+
* @param {boolean} restore - Si el cierre debe devolver foco al disparador.
|
|
5137
|
+
* @returns {void}
|
|
5138
|
+
*/
|
|
5139
|
+
function setNavigation(open, restore) {
|
|
5140
|
+
if (!trigger || !panel) return;
|
|
5141
|
+
panel.classList.toggle("is-open", open);
|
|
5142
|
+
panel.inert = mobile.matches && !open;
|
|
5143
|
+
trigger.setAttribute("aria-expanded", String(open));
|
|
5144
|
+
trigger.setAttribute("aria-label", open ? "Cerrar navegación" : "Abrir navegación");
|
|
5145
|
+
if (restore) trigger.focus();
|
|
5146
|
+
}
|
|
5147
|
+
|
|
5148
|
+
if (trigger && panel) {
|
|
5149
|
+
trigger.setAttribute("aria-controls", panel.id);
|
|
5150
|
+
setNavigation(false, false);
|
|
5151
|
+
trigger.addEventListener("click", function () { setNavigation(!panel.classList.contains("is-open"), false); });
|
|
5152
|
+
panel.addEventListener("click", function (event) {
|
|
5153
|
+
var link = event.target.closest("a[href^='#']");
|
|
5154
|
+
if (!link || !mobile.matches) return;
|
|
5155
|
+
var target = document.getElementById(link.hash.slice(1));
|
|
5156
|
+
setNavigation(false, false);
|
|
5157
|
+
if (target) {
|
|
5158
|
+
target.setAttribute("tabindex", "-1");
|
|
5159
|
+
target.focus({ preventScroll: true });
|
|
5160
|
+
}
|
|
5161
|
+
});
|
|
5162
|
+
document.addEventListener("keydown", function (event) {
|
|
5163
|
+
if (event.key === "Escape" && mobile.matches && panel.classList.contains("is-open")) setNavigation(false, true);
|
|
5164
|
+
});
|
|
5165
|
+
document.addEventListener("click", function (event) {
|
|
5166
|
+
if (mobile.matches && !panel.contains(event.target) && !trigger.contains(event.target)) setNavigation(false, false);
|
|
5167
|
+
});
|
|
5168
|
+
mobile.addEventListener("change", function () { setNavigation(false, false); });
|
|
5169
|
+
}
|
|
5170
|
+
|
|
5171
|
+
var themeButton = document.getElementById("dsThemeToggle") || document.getElementById("dsTheme");
|
|
5172
|
+
/**
|
|
5173
|
+
* Nombra la acción de tema y mantiene semántica de ubicación en el índice.
|
|
5174
|
+
* @returns {void}
|
|
5175
|
+
*/
|
|
5176
|
+
function updateLabels() {
|
|
5177
|
+
if (themeButton) themeButton.setAttribute("aria-label", document.documentElement.dataset.theme === "dark" ? "Usar tema claro" : "Usar tema oscuro");
|
|
5178
|
+
document.querySelectorAll(".ds-nav a").forEach(function (link) {
|
|
5179
|
+
if (link.classList.contains("is-active")) link.setAttribute("aria-current", "location");
|
|
5180
|
+
else link.removeAttribute("aria-current");
|
|
5181
|
+
});
|
|
5182
|
+
var style = getComputedStyle(document.documentElement);
|
|
5183
|
+
document.querySelectorAll("[data-chart-color]").forEach(function (label) {
|
|
5184
|
+
label.textContent = style.getPropertyValue(label.getAttribute("data-chart-color")).trim();
|
|
5185
|
+
});
|
|
5186
|
+
}
|
|
5187
|
+
updateLabels();
|
|
5188
|
+
new MutationObserver(updateLabels).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
|
|
5189
|
+
var nav = document.querySelector(".ds-nav");
|
|
5190
|
+
if (nav) new MutationObserver(updateLabels).observe(nav, { subtree: true, attributes: true, attributeFilter: ["class"] });
|
|
5191
|
+
})();
|
|
5192
|
+
|
|
4685
5193
|
</script>
|
|
4686
5194
|
</body>
|
|
4687
5195
|
</html>
|