@higinio/design-mcp 0.1.1 → 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/LICENSE +4 -4
- package/README.md +5 -5
- package/assets/bruma/design-doc.md +1275 -0
- package/assets/bruma/framework.css +1591 -0
- package/assets/bruma/styleguide.html +5195 -0
- package/assets/bruma/tailwind.css +163 -0
- package/assets/bruma/tokens.css +203 -0
- package/assets/bruma/tokens.json +1739 -0
- package/assets/celeste/design-doc.md +297 -44
- package/assets/celeste/framework.css +382 -65
- package/assets/celeste/styleguide.html +1011 -196
- 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 +406 -61
- package/assets/nocturna/framework.css +418 -114
- package/assets/nocturna/styleguide.html +1147 -330
- package/assets/nocturna/tailwind.css +46 -3
- package/assets/nocturna/tokens.css +123 -9
- package/assets/nocturna/tokens.json +754 -21
- package/assets/salvia/design-doc.md +1260 -0
- package/assets/salvia/framework.css +1588 -0
- package/assets/salvia/styleguide.html +5176 -0
- package/assets/salvia/tailwind.css +163 -0
- package/assets/salvia/tokens.css +199 -0
- package/assets/salvia/tokens.json +1767 -0
- package/dist/cli.js +7 -5
- package/dist/doc.js +18 -4
- package/dist/preflight.js +2 -1
- package/dist/server.js +7 -7
- package/dist/snippet.js +26 -17
- package/dist/systems.js +27 -1
- package/dist/tokens.js +42 -5
- package/dist/validate.js +13 -5
- package/package.json +5 -3
|
@@ -8,96 +8,67 @@
|
|
|
8
8
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23010203'/%3E%3Ctext x='16' y='22' font-family='system-ui,sans-serif' font-size='18' font-weight='700' fill='%2352baed' text-anchor='middle'%3Eh%3C/text%3E%3C/svg%3E">
|
|
9
9
|
<script>(function(){var t=null;try{t=localStorage.getItem('ne-theme');}catch(e){}if(t==='light'||t==='dark')document.documentElement.dataset.theme=t;})();</script>
|
|
10
10
|
<style>
|
|
11
|
-
/*
|
|
12
|
-
|
|
13
|
-
Sistema de diseño
|
|
11
|
+
/* ============================================================
|
|
12
|
+
Nocturna Eléctrica — Design Tokens v2.0
|
|
13
|
+
Sistema de diseño de Higinio Sosa · dark-first
|
|
14
14
|
Fuente de verdad: DESIGN-nocturna-electrica.md
|
|
15
|
-
Uso:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
========================================================================== */
|
|
15
|
+
Uso: importar ANTES de cualquier estilo propio.
|
|
16
|
+
Los componentes consumen SOLO aliases semánticos, nunca hex.
|
|
17
|
+
============================================================ */
|
|
19
18
|
|
|
20
19
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
21
20
|
|
|
22
|
-
/* ============================================================
|
|
23
|
-
1. TOKENS — primitivos + aliases (dark por defecto)
|
|
24
|
-
============================================================ */
|
|
25
21
|
:root {
|
|
26
|
-
/*
|
|
22
|
+
/* == Primitivos: acento (Celeste Eléctrico) ==
|
|
23
|
+
accent-600 sobre blanco da 4.01:1 — vale como UI (≥3) pero NO como texto (<4.5).
|
|
24
|
+
Para texto sobre claro se usa accent-700 (5.95:1) y accent-800 (8.74:1). */
|
|
27
25
|
--accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
|
|
28
26
|
--accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
|
|
29
27
|
--accent-800: #12506f;
|
|
30
28
|
|
|
31
|
-
/*
|
|
29
|
+
/* == Primitivos: índigo (Índigo Profundo) — nunca texto sobre negro == */
|
|
32
30
|
--indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
|
|
33
31
|
--indigo-600: #2b3264; --indigo-700: #22284f; --indigo-800: #1a1e3b;
|
|
34
32
|
|
|
35
|
-
/*
|
|
33
|
+
/* == Primitivos: escala nocturna == */
|
|
36
34
|
--night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
|
|
37
35
|
--night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
|
|
38
|
-
--night-450: #5f6575; /* texto atenuado en light */
|
|
36
|
+
--night-450: #5f6575; /* texto atenuado en light: night-400 caía a 4.27:1 sobre --surface-3 */
|
|
39
37
|
--night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
|
|
40
38
|
--night-100: #e8eaef; --night-50: #f6f7f9;
|
|
41
39
|
|
|
42
|
-
/*
|
|
40
|
+
/* == Primitivos: semánticos (calibrados para dark) == */
|
|
43
41
|
--success-400: #4ade80; --success-bg: #0a2617;
|
|
44
42
|
--warning-400: #fbbf24; --warning-bg: #2a2005;
|
|
45
43
|
--danger-400: #f87171; --danger-bg: #2c0f0f;
|
|
46
44
|
--info-400: #52baed; --info-bg: #0d1f2c;
|
|
47
45
|
|
|
48
|
-
/*
|
|
46
|
+
/* == Aliases semánticos (los componentes consumen SOLO esto) == */
|
|
49
47
|
--bg: var(--night-950);
|
|
50
48
|
--surface-1: var(--night-900);
|
|
51
49
|
--surface-2: var(--night-800);
|
|
52
50
|
--surface-3: var(--night-700);
|
|
53
51
|
--border: var(--night-500);
|
|
54
|
-
|
|
52
|
+
/* night-400, no night-600: en dark, oscurecer un borde lo DEBILITA (principio 2:
|
|
53
|
+
la elevación se comunica aclarando). n600 daba 1.46:1 vs los 1.97:1 del borde
|
|
54
|
+
normal — el énfasis se veía más flojo. n400 = 3.99:1 sobre surface-1. */
|
|
55
|
+
--border-strong: var(--night-400);
|
|
55
56
|
--text-primary: var(--night-100);
|
|
56
57
|
--text-secondary: var(--night-200);
|
|
57
58
|
--text-muted: var(--night-300);
|
|
58
59
|
--text-disabled: var(--night-400);
|
|
59
60
|
--text-heading: var(--night-50);
|
|
60
|
-
--text-on-accent: var(--night-950);
|
|
61
|
-
--success: var(--success-400);
|
|
62
|
-
--
|
|
63
|
-
--
|
|
64
|
-
--
|
|
61
|
+
--text-on-accent: var(--night-950); /* texto de CTA oscuro, nunca blanco */
|
|
62
|
+
--success: var(--success-400); --warning: var(--warning-400);
|
|
63
|
+
--danger: var(--danger-400); --info: var(--info-400);
|
|
64
|
+
--link: var(--accent-400);
|
|
65
|
+
--link-hover: var(--accent-200);
|
|
65
66
|
--accent-ghost-hover: rgba(82,186,237,.08);
|
|
66
67
|
--accent-ghost-active: rgba(82,186,237,.14);
|
|
67
68
|
--accent-selected: rgba(82,186,237,.12);
|
|
68
69
|
--overlay: rgba(1,2,3,.7);
|
|
69
70
|
|
|
70
|
-
/*
|
|
71
|
-
--link: var(--accent-400);
|
|
72
|
-
--link-hover: var(--accent-200);
|
|
73
|
-
--focus-color: var(--accent-400);
|
|
74
|
-
--border-hover: var(--night-400);
|
|
75
|
-
--outline-hover-bg: var(--surface-2);
|
|
76
|
-
--outline-active-bg: var(--surface-3);
|
|
77
|
-
--text-on-danger: var(--night-950);
|
|
78
|
-
--data-color: var(--accent-400); /* cifras/datos clave */
|
|
79
|
-
--elevated-border: var(--night-600); /* borde de toasts, modales, menús */
|
|
80
|
-
--card-border: var(--night-600);
|
|
81
|
-
--code-color: var(--accent-300);
|
|
82
|
-
--code-border: var(--night-700);
|
|
83
|
-
--table-header-bg: var(--night-900);
|
|
84
|
-
--row-border: var(--night-800);
|
|
85
|
-
--row-hover: var(--night-700);
|
|
86
|
-
--navbar-bg: rgba(1,2,3,.8);
|
|
87
|
-
--nav-active: var(--accent-400);
|
|
88
|
-
--sidebar-bg: var(--night-900);
|
|
89
|
-
--sidebar-active-bg: var(--indigo-800);
|
|
90
|
-
--sidebar-active-text: var(--night-50);
|
|
91
|
-
--sidebar-active-icon: var(--accent-400);
|
|
92
|
-
--switch-off: var(--night-600);
|
|
93
|
-
--tooltip-bg: var(--night-700);
|
|
94
|
-
--tooltip-border: var(--night-600);
|
|
95
|
-
--tooltip-text: var(--night-100);
|
|
96
|
-
--skeleton-base: var(--night-800);
|
|
97
|
-
--skeleton-sheen: var(--night-700);
|
|
98
|
-
--empty-icon: var(--indigo-400);
|
|
99
|
-
|
|
100
|
-
/* -- Tipografía -- */
|
|
71
|
+
/* == Tipografía == */
|
|
101
72
|
--font-display: "Space Grotesk", system-ui, sans-serif;
|
|
102
73
|
--font-body: "Manrope", system-ui, sans-serif;
|
|
103
74
|
--font-mono: "JetBrains Mono", monospace;
|
|
@@ -109,7 +80,7 @@
|
|
|
109
80
|
--tracking-display: -0.02em; --tracking-overline: 0.08em;
|
|
110
81
|
--measure: 65ch;
|
|
111
82
|
|
|
112
|
-
/*
|
|
83
|
+
/* == Espaciado (escala base 4px) == */
|
|
113
84
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
114
85
|
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
|
|
115
86
|
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
|
|
@@ -118,67 +89,148 @@
|
|
|
118
89
|
--button-padding: 12px 20px; --touch-target: 44px;
|
|
119
90
|
--grid-gutter: 24px; --grid-gutter-mobile: 16px;
|
|
120
91
|
|
|
121
|
-
/*
|
|
92
|
+
/* == Radios y bordes == */
|
|
122
93
|
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
|
|
123
94
|
--radius-xl: 24px; --radius-full: 9999px;
|
|
124
95
|
--border-default: 1px solid var(--night-500);
|
|
125
|
-
--border-emphasis: 1px solid var(--night-
|
|
126
|
-
--focus-ring: 2px solid var(--
|
|
96
|
+
--border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
|
|
97
|
+
--focus-ring: 2px solid var(--focus-color);
|
|
127
98
|
--focus-ring-offset: 2px;
|
|
128
99
|
|
|
129
|
-
/*
|
|
100
|
+
/* == Elevación (superficie + sombra + borde) == */
|
|
130
101
|
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
|
|
131
102
|
--shadow-2: 0 4px 12px rgba(0,0,0,.5);
|
|
132
103
|
--shadow-3: 0 12px 32px rgba(0,0,0,.6);
|
|
133
|
-
--glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18);
|
|
104
|
+
--glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18); /* máx. uno por pantalla */
|
|
134
105
|
--ring: 0 0 0 3px rgba(82,186,237,.2);
|
|
135
106
|
--ring-danger: 0 0 0 3px rgba(248,113,113,.2);
|
|
136
107
|
|
|
137
|
-
/*
|
|
108
|
+
/* == Motion == */
|
|
138
109
|
--duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
|
|
139
110
|
--duration-slow: 250ms; --duration-page: 350ms;
|
|
140
111
|
--ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
141
112
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
142
113
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
|
|
143
114
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
115
|
+
--stagger-step: 30ms;
|
|
144
116
|
|
|
145
117
|
color-scheme: dark;
|
|
146
|
-
}
|
|
147
118
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
119
|
+
--focus-color: var(--accent-400);
|
|
120
|
+
--border-hover: var(--night-400);
|
|
121
|
+
--outline-hover-bg: var(--surface-2);
|
|
122
|
+
--outline-active-bg: var(--surface-3);
|
|
123
|
+
--text-on-danger: var(--night-950);
|
|
124
|
+
--data-color: var(--accent-400);
|
|
125
|
+
--elevated-border: var(--night-600);
|
|
126
|
+
--card-border: var(--night-600);
|
|
127
|
+
--code-color: var(--accent-300);
|
|
128
|
+
--code-border: var(--night-700);
|
|
129
|
+
--table-header-bg: var(--night-900);
|
|
130
|
+
--row-border: var(--night-800);
|
|
131
|
+
--row-hover: var(--night-700);
|
|
132
|
+
--navbar-bg: rgba(1,2,3,.8);
|
|
133
|
+
--nav-active: var(--accent-400);
|
|
134
|
+
--sidebar-bg: var(--night-900);
|
|
135
|
+
--sidebar-active-bg: var(--indigo-800);
|
|
136
|
+
--sidebar-active-text: var(--night-50);
|
|
137
|
+
--sidebar-active-icon: var(--accent-400);
|
|
138
|
+
--switch-off: var(--night-600);
|
|
139
|
+
--tooltip-bg: var(--night-700);
|
|
140
|
+
--tooltip-border: var(--night-600);
|
|
141
|
+
--tooltip-text: var(--night-100);
|
|
142
|
+
--skeleton-base: var(--night-800);
|
|
143
|
+
--skeleton-sheen: var(--night-700);
|
|
144
|
+
--empty-icon: var(--indigo-400);
|
|
145
|
+
|
|
146
|
+
--action-bg: var(--accent);
|
|
147
|
+
--action-hover: var(--accent-hover);
|
|
148
|
+
--action-active: var(--accent-active);
|
|
149
|
+
--text-on-action: var(--text-on-accent);
|
|
150
|
+
--control-border: var(--border-strong);
|
|
151
|
+
--placeholder: var(--text-muted);
|
|
152
|
+
--selection-bg: var(--action-bg);
|
|
153
|
+
--selection-text: var(--text-on-action);
|
|
154
|
+
--font-ui-heading: var(--font-body);
|
|
155
|
+
--text-ui-title: 2rem;
|
|
156
|
+
--control-height-md: 44px;
|
|
157
|
+
--button-padding-md: 12px 20px;
|
|
158
|
+
--surface: var(--surface-1);
|
|
159
|
+
--surface-alt: var(--surface-2);
|
|
160
|
+
--accent: var(--accent-400);
|
|
161
|
+
--accent-hover: var(--accent-300);
|
|
162
|
+
--accent-active: var(--accent-500);
|
|
163
|
+
--text-display-fluid: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
|
|
164
|
+
--text-on-primary-solid: var(--link);
|
|
165
|
+
--weight-regular: 400;
|
|
166
|
+
--weight-medium: 500;
|
|
167
|
+
--weight-semibold: 600;
|
|
168
|
+
--weight-bold: 700;
|
|
169
|
+
--leading-base: 1.6;
|
|
170
|
+
--leading-lg: 1.55;
|
|
171
|
+
--gutter: 24px;
|
|
172
|
+
--gutter-mobile: 16px;
|
|
173
|
+
|
|
174
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
175
|
+
--chart-1: #52baed;
|
|
176
|
+
--chart-2: #a0587c;
|
|
177
|
+
--chart-3: #2aa79e;
|
|
178
|
+
--chart-4: #aa5849;
|
|
179
|
+
--chart-5: #67a369;
|
|
180
|
+
--chart-6: #946a1c;
|
|
181
|
+
--chart-7: #877cc3;
|
|
182
|
+
/* Ritmo de contenido y formularios. */
|
|
183
|
+
--field-gap: 6px;
|
|
184
|
+
--heading-gap: var(--space-2);
|
|
185
|
+
--content-gap: var(--space-4);
|
|
186
|
+
--card-content-gap: var(--space-4);
|
|
187
|
+
--card-group-gap: var(--space-6);
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* == Modo claro (variante) — alternar data-theme en <html> == */
|
|
152
192
|
[data-theme="light"] {
|
|
153
193
|
--bg: #f5f8fb;
|
|
154
194
|
--surface-1: #ffffff;
|
|
155
195
|
--surface-2: #ffffff;
|
|
156
196
|
--surface-3: #eaf1f7;
|
|
157
197
|
--border: #d8dfe8;
|
|
158
|
-
|
|
198
|
+
/* border-strong NO se redefine en claro: night-400 (:root) cumple 1.4.11 en
|
|
199
|
+
AMBOS temas (3.26-3.99:1 en dark, 4.27-4.87:1 en light). #b9c3d1 daba
|
|
200
|
+
1.53-1.78:1, bajo el mínimo de 3:1 para UI. */
|
|
159
201
|
--text-primary: #14171f;
|
|
160
202
|
--text-secondary: #3d4354;
|
|
161
|
-
--text-muted:
|
|
203
|
+
--text-muted: var(--night-450); /* no night-400: ese caía a 4.27:1 sobre --surface-3 */
|
|
162
204
|
--text-disabled: #9aa0b0;
|
|
163
|
-
--text-heading: #
|
|
164
|
-
--
|
|
165
|
-
--
|
|
166
|
-
--
|
|
167
|
-
|
|
168
|
-
|
|
205
|
+
--text-heading: #14171f;
|
|
206
|
+
--link: #186a94; /* accent-700 · 5.95:1 sobre blanco — accent-600 solo daba 4.01:1 */
|
|
207
|
+
--link-hover: #12506f; /* accent-800 · en light el hover OSCURECE (en dark aclara) */
|
|
208
|
+
--text-on-accent: #010203; /* CTA no cambia entre modos */
|
|
209
|
+
/* Semánticos de light: son a la vez relleno y TEXTO sobre su propio --*-bg tintado,
|
|
210
|
+
así que se calibran contra ese fondo, no contra blanco. */
|
|
211
|
+
--success: #166534;
|
|
212
|
+
--warning: #854d0e;
|
|
213
|
+
--danger: #b02c2c;
|
|
214
|
+
--info: #186a94;
|
|
215
|
+
--success-bg: #e3f5ea; --warning-bg: #fbf3dd;
|
|
216
|
+
--danger-bg: #fbe7e7; --info-bg: #e3f2fb;
|
|
169
217
|
--accent-ghost-hover: rgba(31,135,187,.08);
|
|
170
218
|
--accent-ghost-active: rgba(31,135,187,.14);
|
|
171
219
|
--accent-selected: rgba(82,186,237,.12);
|
|
172
220
|
--overlay: rgba(20,23,31,.45);
|
|
221
|
+
--ring: 0 0 0 3px rgba(31,135,187,.25);
|
|
222
|
+
--shadow-1: 0 1px 3px rgba(53,61,124,.08);
|
|
223
|
+
--shadow-2: 0 4px 10px rgba(53,61,124,.10);
|
|
224
|
+
--shadow-3: 0 12px 28px rgba(53,61,124,.14);
|
|
225
|
+
--glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
|
|
226
|
+
color-scheme: light;
|
|
173
227
|
|
|
174
|
-
--
|
|
175
|
-
--
|
|
176
|
-
--focus-color: #1f87bb; /* UI (4.01:1 ≥ 3), no texto */
|
|
177
|
-
--border-hover: #b9c3d1;
|
|
228
|
+
--focus-color: #186a94;
|
|
229
|
+
--border-hover: #5f6575;
|
|
178
230
|
--outline-hover-bg: #eaf1f7;
|
|
179
231
|
--outline-active-bg: #d8dfe8;
|
|
180
232
|
--text-on-danger: #ffffff;
|
|
181
|
-
--data-color: #186a94;
|
|
233
|
+
--data-color: #186a94;
|
|
182
234
|
--elevated-border: #d8dfe8;
|
|
183
235
|
--card-border: #d8dfe8;
|
|
184
236
|
--code-color: #186a94;
|
|
@@ -192,40 +244,37 @@
|
|
|
192
244
|
--sidebar-active-bg: #e3f2fb;
|
|
193
245
|
--sidebar-active-text: #14171f;
|
|
194
246
|
--sidebar-active-icon: #1f87bb;
|
|
195
|
-
--switch-off:
|
|
247
|
+
--switch-off: var(--control-border);
|
|
196
248
|
--tooltip-bg: #14171f;
|
|
197
249
|
--tooltip-border: #14171f;
|
|
198
250
|
--tooltip-text: #f6f7f9;
|
|
199
251
|
--skeleton-base: #eaf1f7;
|
|
200
252
|
--skeleton-sheen: #f5f8fb;
|
|
201
|
-
|
|
202
|
-
--ring: 0 0 0 3px rgba(31,135,187,.25);
|
|
203
253
|
--ring-danger: 0 0 0 3px rgba(192,53,53,.2);
|
|
204
|
-
--shadow-1: 0 1px 3px rgba(53,61,124,.08);
|
|
205
|
-
--shadow-2: 0 4px 10px rgba(53,61,124,.10);
|
|
206
|
-
--shadow-3: 0 12px 28px rgba(53,61,124,.14);
|
|
207
|
-
--glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
|
|
208
254
|
|
|
209
|
-
|
|
255
|
+
--selection-bg: var(--action-bg);
|
|
256
|
+
--selection-text: var(--text-on-action);
|
|
257
|
+
|
|
258
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
259
|
+
--chart-1: #186a94;
|
|
260
|
+
--chart-2: #853f63;
|
|
261
|
+
--chart-3: #129a92;
|
|
262
|
+
--chart-4: #8e4031;
|
|
263
|
+
--chart-5: #5b975e;
|
|
264
|
+
--chart-6: #8a600a;
|
|
265
|
+
--chart-7: #857bc1;
|
|
210
266
|
}
|
|
211
267
|
|
|
212
|
-
/*
|
|
213
|
-
|
|
214
|
-
============================================================ */
|
|
268
|
+
/* == Accesibilidad del movimiento == */
|
|
269
|
+
|
|
215
270
|
@media (prefers-reduced-motion: reduce) {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
transition-duration: 0.01ms !important;
|
|
220
|
-
scroll-behavior: auto !important;
|
|
271
|
+
:root {
|
|
272
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
273
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
221
274
|
}
|
|
222
275
|
}
|
|
223
276
|
|
|
224
|
-
/* ============================================================
|
|
225
|
-
4. BASE
|
|
226
|
-
============================================================ */
|
|
227
277
|
*, *::before, *::after { box-sizing: border-box; }
|
|
228
|
-
html, body { overflow-x: clip; }
|
|
229
278
|
|
|
230
279
|
body {
|
|
231
280
|
margin: 0;
|
|
@@ -255,7 +304,7 @@ p { max-width: var(--measure); margin: 0 0 var(--space-4); }
|
|
|
255
304
|
a { color: var(--link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
|
|
256
305
|
a:hover { color: var(--link-hover); }
|
|
257
306
|
|
|
258
|
-
::placeholder { color: var(--
|
|
307
|
+
::placeholder { color: var(--placeholder); }
|
|
259
308
|
::selection { background: rgba(82,186,237,.3); }
|
|
260
309
|
|
|
261
310
|
:focus-visible {
|
|
@@ -306,15 +355,15 @@ a:hover { color: var(--link-hover); }
|
|
|
306
355
|
.btn--lg { height: 52px; padding: 14px 24px; font-size: var(--text-lg); }
|
|
307
356
|
|
|
308
357
|
/* Primario — texto oscuro sobre acento, nunca blanco */
|
|
309
|
-
/* Gating de hover (§11.5): los hover que mueven/elevan
|
|
310
|
-
@media (hover: hover) and (pointer: fine) — en touch el tap
|
|
311
|
-
Los hover de solo color/fondo quedan fuera. */
|
|
312
|
-
.btn--primary { background: var(--
|
|
313
|
-
.btn--primary:hover:not(:disabled) { background: var(--
|
|
358
|
+
/* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow, glow)
|
|
359
|
+
van dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
|
|
360
|
+
hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
|
|
361
|
+
.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
|
|
362
|
+
.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
|
|
314
363
|
@media (hover: hover) and (pointer: fine) {
|
|
315
364
|
.btn--primary:hover:not(:disabled) { box-shadow: var(--glow-accent); }
|
|
316
365
|
}
|
|
317
|
-
.btn--primary:active:not(:disabled) { background: var(--
|
|
366
|
+
.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
|
|
318
367
|
.btn--primary:disabled { background: var(--surface-3); color: var(--text-disabled); }
|
|
319
368
|
|
|
320
369
|
/* Secundario — índigo (idéntico en ambos temas) */
|
|
@@ -400,7 +449,7 @@ a:hover { color: var(--link-hover); }
|
|
|
400
449
|
|
|
401
450
|
.input, .textarea, .select {
|
|
402
451
|
width: 100%; background: var(--surface-2);
|
|
403
|
-
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
|
452
|
+
border: 1px solid var(--control-border); border-radius: var(--radius-sm);
|
|
404
453
|
color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base);
|
|
405
454
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
406
455
|
box-shadow var(--duration-fast) var(--ease-out);
|
|
@@ -426,7 +475,7 @@ a:hover { color: var(--link-hover); }
|
|
|
426
475
|
.input-wrap .input { padding-left: 40px; }
|
|
427
476
|
|
|
428
477
|
.textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--leading-body); }
|
|
429
|
-
.field__count { font-size: var(--text-xs); color: var(--text-
|
|
478
|
+
.field__count { font-size: var(--text-xs); color: var(--text-muted); text-align: right; margin-top: 4px; }
|
|
430
479
|
|
|
431
480
|
/* Select nativo estilizado (el menú custom usa .menu) */
|
|
432
481
|
.select-wrap { position: relative; }
|
|
@@ -476,7 +525,7 @@ a:hover { color: var(--link-hover); }
|
|
|
476
525
|
}
|
|
477
526
|
.segmented--sm label { padding: 0 12px; font-size: var(--text-xs); }
|
|
478
527
|
.segmented input:checked + label {
|
|
479
|
-
background: var(--surface-3); color: var(--
|
|
528
|
+
background: var(--surface-3); color: var(--link);
|
|
480
529
|
font-weight: 600; box-shadow: var(--shadow-1);
|
|
481
530
|
}
|
|
482
531
|
.segmented input:focus-visible + label { outline: var(--focus-ring); outline-offset: 2px; }
|
|
@@ -506,8 +555,8 @@ a:hover { color: var(--link-hover); }
|
|
|
506
555
|
}
|
|
507
556
|
.slider:active::-moz-range-thumb { transform: scale(1.15); }
|
|
508
557
|
@media (prefers-reduced-motion: reduce) {
|
|
509
|
-
.slider::-webkit-slider-thumb { transition
|
|
510
|
-
.slider::-moz-range-thumb { transition
|
|
558
|
+
.slider::-webkit-slider-thumb { transition: none; }
|
|
559
|
+
.slider::-moz-range-thumb { transition: none; }
|
|
511
560
|
}
|
|
512
561
|
|
|
513
562
|
/* ============================================================
|
|
@@ -570,9 +619,7 @@ a:hover { color: var(--link-hover); }
|
|
|
570
619
|
display: inline-flex; align-items: center; gap: 4px;
|
|
571
620
|
padding: 2px 8px; border-radius: var(--radius-full);
|
|
572
621
|
font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-snug);
|
|
573
|
-
background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border);
|
|
574
622
|
}
|
|
575
|
-
.badge svg { width: 14px; height: 14px; flex: none; }
|
|
576
623
|
.badge--success { background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
|
|
577
624
|
.badge--warning { background: var(--warning-bg); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
|
|
578
625
|
.badge--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
|
|
@@ -669,6 +716,32 @@ a:hover { color: var(--link-hover); }
|
|
|
669
716
|
.stat__delta--down { color: var(--danger); }
|
|
670
717
|
.stat__delta--neutral { color: var(--text-muted); }
|
|
671
718
|
|
|
719
|
+
/* Chip de métrica: rótulo y valor en una pastilla de una línea */
|
|
720
|
+
.metric-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
721
|
+
.metric-chip {
|
|
722
|
+
display: inline-flex; align-items: center; gap: var(--space-2);
|
|
723
|
+
padding: var(--space-1) var(--space-3);
|
|
724
|
+
border: 1px solid var(--border); border-radius: var(--radius-full);
|
|
725
|
+
background: var(--surface-1);
|
|
726
|
+
font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-snug);
|
|
727
|
+
color: var(--text-secondary); white-space: nowrap;
|
|
728
|
+
}
|
|
729
|
+
.metric-chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
|
|
730
|
+
.metric-chip__value {
|
|
731
|
+
font-family: var(--font-mono); font-weight: 500; color: var(--link);
|
|
732
|
+
font-variant-numeric: tabular-nums;
|
|
733
|
+
}
|
|
734
|
+
button.metric-chip {
|
|
735
|
+
min-height: var(--control-height-md); padding-inline: var(--space-4);
|
|
736
|
+
cursor: pointer; text-align: left;
|
|
737
|
+
transition: background-color var(--duration-fast) var(--ease-out),
|
|
738
|
+
border-color var(--duration-fast) var(--ease-out),
|
|
739
|
+
transform var(--duration-instant) var(--ease-out);
|
|
740
|
+
}
|
|
741
|
+
button.metric-chip:hover { background: var(--outline-hover-bg); border-color: var(--border-hover); }
|
|
742
|
+
button.metric-chip:active { background: var(--outline-active-bg); transform: scale(.98); }
|
|
743
|
+
button.metric-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
|
|
744
|
+
|
|
672
745
|
/* ============================================================
|
|
673
746
|
13B. PAGINATION — .pagination (activa: fondo acento + peso, no solo color)
|
|
674
747
|
============================================================ */
|
|
@@ -751,7 +824,7 @@ a:hover { color: var(--link-hover); }
|
|
|
751
824
|
}
|
|
752
825
|
.alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
|
|
753
826
|
.alert__title { font-weight: 600; margin: 0 0 2px; color: inherit; }
|
|
754
|
-
.alert__body { margin: 0; color: inherit;
|
|
827
|
+
.alert__body { margin: 0; color: inherit; }
|
|
755
828
|
.alert__close {
|
|
756
829
|
margin-left: auto; flex: none; display: grid; place-items: center;
|
|
757
830
|
width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
|
|
@@ -913,6 +986,70 @@ a:hover { color: var(--link-hover); }
|
|
|
913
986
|
.sidebar__item svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
|
|
914
987
|
.sidebar__item.is-active svg { color: var(--sidebar-active-icon); }
|
|
915
988
|
|
|
989
|
+
/* Grupos con rótulo dentro del sidebar */
|
|
990
|
+
.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
|
|
991
|
+
.sidebar__group + .sidebar__group { margin-top: var(--space-4); }
|
|
992
|
+
.sidebar__group-label {
|
|
993
|
+
padding: 0 12px var(--space-1);
|
|
994
|
+
font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
|
|
995
|
+
letter-spacing: var(--tracking-overline); color: var(--text-muted); white-space: nowrap;
|
|
996
|
+
}
|
|
997
|
+
.sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
998
|
+
|
|
999
|
+
/* Sidebar contraíble: expandido 260 px, riel de iconos de 64 px.
|
|
1000
|
+
El ancho cambia sin transición; solo los rótulos se funden con opacity y transform. */
|
|
1001
|
+
.sidebar--collapsible .sidebar__label {
|
|
1002
|
+
transition: opacity var(--duration-fast) var(--ease-out),
|
|
1003
|
+
transform var(--duration-fast) var(--ease-out);
|
|
1004
|
+
}
|
|
1005
|
+
.sidebar__toggle {
|
|
1006
|
+
margin-top: auto; width: 100%; border: 0; background: transparent;
|
|
1007
|
+
font-family: var(--font-body); text-align: left; cursor: pointer;
|
|
1008
|
+
}
|
|
1009
|
+
.sidebar.is-collapsed { width: 64px; }
|
|
1010
|
+
.sidebar.is-collapsed .sidebar__item { position: relative; justify-content: center; padding-inline: 0; }
|
|
1011
|
+
.sidebar.is-collapsed .sidebar__toggle svg { transform: rotate(180deg); }
|
|
1012
|
+
.sidebar.is-collapsed .sidebar__group + .sidebar__group { margin-top: var(--space-2); }
|
|
1013
|
+
/* En el riel, el rótulo de grupo es un separador de 1 px; su texto sigue en el árbol de accesibilidad */
|
|
1014
|
+
.sidebar.is-collapsed .sidebar__group-label {
|
|
1015
|
+
height: 1px; padding: 0; margin: 0 var(--space-2) var(--space-2);
|
|
1016
|
+
overflow: hidden; color: transparent; background: var(--border);
|
|
1017
|
+
}
|
|
1018
|
+
/* Oculto a la vista pero accesible (patrón de .visually-hidden) */
|
|
1019
|
+
.sidebar.is-collapsed .sidebar__label,
|
|
1020
|
+
.sidebar.is-collapsed .sidebar__group:first-child > .sidebar__group-label {
|
|
1021
|
+
position: absolute; width: 1px; height: 1px; margin: -1px;
|
|
1022
|
+
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
|
|
1023
|
+
}
|
|
1024
|
+
.sidebar.is-collapsed .sidebar__label {
|
|
1025
|
+
background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); border-radius: var(--radius-sm);
|
|
1026
|
+
color: var(--tooltip-text); font-size: var(--text-xs); line-height: 16px;
|
|
1027
|
+
pointer-events: none; z-index: 70;
|
|
1028
|
+
opacity: 0; transform: translateX(-4px);
|
|
1029
|
+
}
|
|
1030
|
+
/* Tooltip del riel: el propio rótulo aparece a la derecha del ítem, también con teclado */
|
|
1031
|
+
.sidebar.is-collapsed .sidebar__item:focus-visible .sidebar__label {
|
|
1032
|
+
left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
|
|
1033
|
+
margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
|
|
1034
|
+
opacity: 1; transform: none; transition-delay: 400ms;
|
|
1035
|
+
}
|
|
1036
|
+
/* Por hover solo con puntero real — en touch quedaría pegado tras el tap */
|
|
1037
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1038
|
+
.sidebar.is-collapsed .sidebar__item:hover .sidebar__label {
|
|
1039
|
+
left: calc(100% + 8px); top: calc(50% - 15px); width: auto; height: auto;
|
|
1040
|
+
margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
|
|
1041
|
+
opacity: 1; transform: none; transition-delay: 400ms;
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1044
|
+
/* Por debajo de 768 px la navegación vive en un Drawer --left, que abre el botón ☰
|
|
1045
|
+
.sidebar-trigger (combinado con .icon-btn); desde 768 px el sidebar es fijo y el botón sobra */
|
|
1046
|
+
@media (max-width: 767px) {
|
|
1047
|
+
.sidebar--collapsible { display: none; }
|
|
1048
|
+
}
|
|
1049
|
+
@media (min-width: 768px) {
|
|
1050
|
+
.sidebar-trigger { display: none; }
|
|
1051
|
+
}
|
|
1052
|
+
|
|
916
1053
|
.tabs { position: relative; display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border-strong); }
|
|
917
1054
|
.tabs__btn {
|
|
918
1055
|
padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
|
|
@@ -994,10 +1131,7 @@ a:hover { color: var(--link-hover); }
|
|
|
994
1131
|
font-weight: 600; color: var(--data-color); font-variant-numeric: tabular-nums;
|
|
995
1132
|
}
|
|
996
1133
|
@media (prefers-reduced-motion: reduce) {
|
|
997
|
-
|
|
998
|
-
como en .slider::-webkit-slider-thumb: el anillo es la única animación
|
|
999
|
-
nueva de esta sección y no debe depender solo de la regla universal. */
|
|
1000
|
-
.progress-ring__bar { transition-duration: 0.01ms !important; }
|
|
1134
|
+
.progress-ring__bar { transition: none; }
|
|
1001
1135
|
}
|
|
1002
1136
|
|
|
1003
1137
|
/* ============================================================
|
|
@@ -1164,13 +1298,13 @@ a:hover { color: var(--link-hover); }
|
|
|
1164
1298
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1165
1299
|
transform var(--duration-base) var(--ease-out),
|
|
1166
1300
|
visibility 0s linear var(--duration-base);
|
|
1167
|
-
}
|
|
1301
|
+
display: none; }
|
|
1168
1302
|
.popover.is-open .popover__panel {
|
|
1169
1303
|
opacity: 1; transform: none; visibility: visible;
|
|
1170
1304
|
transition: opacity var(--duration-base) var(--ease-out),
|
|
1171
1305
|
transform var(--duration-base) var(--ease-out),
|
|
1172
1306
|
visibility 0s;
|
|
1173
|
-
}
|
|
1307
|
+
display: block; }
|
|
1174
1308
|
/* Alineado a la derecha del disparador */
|
|
1175
1309
|
.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
|
|
1176
1310
|
|
|
@@ -1223,7 +1357,7 @@ a:hover { color: var(--link-hover); }
|
|
|
1223
1357
|
.calendar__day--today { border-color: var(--accent-400); color: var(--accent-300); }
|
|
1224
1358
|
/* Seleccionado: fondo de acento + texto oscuro + peso — no depende solo del color */
|
|
1225
1359
|
.calendar__day--selected { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); font-weight: 600; }
|
|
1226
|
-
.calendar__day--outside { color: var(--text-
|
|
1360
|
+
.calendar__day--outside { color: var(--text-muted); }
|
|
1227
1361
|
.calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
|
|
1228
1362
|
|
|
1229
1363
|
/* ============================================================
|
|
@@ -1242,7 +1376,7 @@ a:hover { color: var(--link-hover); }
|
|
|
1242
1376
|
}
|
|
1243
1377
|
.file-upload__label > svg { width: 28px; height: 28px; color: var(--text-muted); }
|
|
1244
1378
|
.file-upload__button { color: var(--link); font-weight: 600; }
|
|
1245
|
-
.file-upload__hint { font-size: var(--text-xs); color: var(--text-
|
|
1379
|
+
.file-upload__hint { font-size: var(--text-xs); color: var(--text-muted); }
|
|
1246
1380
|
@media (hover: hover) and (pointer: fine) {
|
|
1247
1381
|
.file-upload__label:hover { border-color: var(--border-hover); background: var(--surface-2); color: var(--text-secondary); }
|
|
1248
1382
|
}
|
|
@@ -1325,6 +1459,171 @@ a:hover { color: var(--link-hover); }
|
|
|
1325
1459
|
border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-1);
|
|
1326
1460
|
}
|
|
1327
1461
|
|
|
1462
|
+
/* CONTRATOS COMPARTIDOS GENERADOS */
|
|
1463
|
+
/* Contratos comunes de interacción; la identidad y los valores viven en tokens.css. */
|
|
1464
|
+
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
|
|
1465
|
+
.grid > *, .field, .card { min-inline-size: 0; }
|
|
1466
|
+
.stack, .card__content, .form-stack, .text-group { display: flex; flex-direction: column; align-items: stretch; }
|
|
1467
|
+
.stack, .card__content { gap: var(--content-gap); }
|
|
1468
|
+
.stack--tight, .text-group { gap: var(--heading-gap); }
|
|
1469
|
+
.stack--cards { gap: var(--card-group-gap); }
|
|
1470
|
+
.form-stack { gap: var(--form-gap); }
|
|
1471
|
+
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
|
|
1472
|
+
.card { display: flex; flex-direction: column; gap: var(--card-content-gap); }
|
|
1473
|
+
.field { gap: var(--field-gap); }
|
|
1474
|
+
.field__label, .field__help, .field__error, .field > :is(label, p, span, div) { margin-block: 0; }
|
|
1475
|
+
:where(.field + .field, .field + .btn, .field + .cluster) { margin-block-start: var(--form-gap); }
|
|
1476
|
+
:where(.card + .card) { margin-block-start: var(--card-group-gap); }
|
|
1477
|
+
.stack > *, .card__content > *, .form-stack > *, .text-group > *, .grid > .card,
|
|
1478
|
+
.card > :is(h1, h2, h3, h4, h5, h6, p), .text-group > :is(h1, h2, h3, h4, h5, h6, p),
|
|
1479
|
+
.stack > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
|
|
1480
|
+
.form-stack > .field { margin-block: 0; }
|
|
1481
|
+
.btn {
|
|
1482
|
+
block-size: auto;
|
|
1483
|
+
min-block-size: var(--control-height-md);
|
|
1484
|
+
max-inline-size: 100%;
|
|
1485
|
+
white-space: normal;
|
|
1486
|
+
line-height: 1.35;
|
|
1487
|
+
text-align: center;
|
|
1488
|
+
}
|
|
1489
|
+
.btn--sm { min-block-size: var(--control-height-sm, 36px); }
|
|
1490
|
+
.btn--lg { min-block-size: var(--control-height-lg, 52px); }
|
|
1491
|
+
.btn--primary, .icon-btn--primary, .calendar__day--selected, .pagination__btn.is-active {
|
|
1492
|
+
background: var(--action-bg);
|
|
1493
|
+
color: var(--text-on-action);
|
|
1494
|
+
}
|
|
1495
|
+
.btn--primary:hover:not(:disabled), .icon-btn--primary:hover:not(:disabled) { background: var(--action-hover); color: var(--text-on-action); }
|
|
1496
|
+
.btn--primary:active:not(:disabled), .icon-btn--primary:active:not(:disabled) { background: var(--action-active); color: var(--text-on-action); }
|
|
1497
|
+
.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1498
|
+
max-inline-size: 100%;
|
|
1499
|
+
caret-color: var(--focus-color);
|
|
1500
|
+
}
|
|
1501
|
+
.input, .select, .combobox__input, .search__input, .datepicker__input {
|
|
1502
|
+
block-size: auto; min-block-size: var(--control-height-md);
|
|
1503
|
+
padding-block: var(--space-2); line-height: 1.5;
|
|
1504
|
+
}
|
|
1505
|
+
: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); }
|
|
1506
|
+
.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"]),
|
|
1507
|
+
.select:hover:not(:disabled):not(:focus), .combobox__input:hover:not(:disabled):not(:focus),
|
|
1508
|
+
.search__input:hover:not(:focus), .datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
|
|
1509
|
+
.input:focus-visible, .textarea:focus-visible, .select:focus-visible,
|
|
1510
|
+
.combobox__input:focus-visible, .search__input:focus-visible, .datepicker__input:focus-visible {
|
|
1511
|
+
outline: 2px solid var(--focus-color);
|
|
1512
|
+
outline-offset: 2px;
|
|
1513
|
+
}
|
|
1514
|
+
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text, var(--danger)); }
|
|
1515
|
+
.input.input--error, .textarea.textarea--error,
|
|
1516
|
+
.input.input--error:hover:not(:disabled):not(:focus), .textarea.textarea--error:hover:not(:disabled):not(:focus),
|
|
1517
|
+
:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input)[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
|
|
1518
|
+
border-color: var(--danger-text, var(--danger));
|
|
1519
|
+
}
|
|
1520
|
+
.input.input--success, .input.input--success:hover:not(:disabled):not(:focus) { border-color: var(--success-text, var(--success)); }
|
|
1521
|
+
.pagination { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1522
|
+
.pagination__ellipsis { color: var(--text-muted); }
|
|
1523
|
+
.step--current .step__marker { color: var(--link); border-color: var(--focus-color); }
|
|
1524
|
+
.checkbox input:focus-visible ~ .checkbox__box,
|
|
1525
|
+
.radio input:focus-visible ~ .radio__dot,
|
|
1526
|
+
.switch input:focus-visible ~ .switch__track {
|
|
1527
|
+
outline: 2px solid var(--focus-color);
|
|
1528
|
+
outline-offset: 2px;
|
|
1529
|
+
}
|
|
1530
|
+
input.checkbox, input.radio { border-color: var(--control-border); }
|
|
1531
|
+
input.checkbox:hover, input.radio:hover { border-color: var(--focus-color); }
|
|
1532
|
+
input.checkbox:checked, input.checkbox:indeterminate, input.radio:checked { border-color: var(--focus-color); }
|
|
1533
|
+
.switch__track { background: var(--control-border); }
|
|
1534
|
+
.tabs { max-inline-size: 100%; overflow-x: auto; }
|
|
1535
|
+
.tabs__tab { flex-shrink: 0; }
|
|
1536
|
+
.segmented { max-inline-size: 100%; block-size: auto; min-block-size: var(--control-height-md); overflow-x: auto; }
|
|
1537
|
+
.segmented label { padding-block: var(--space-2); }
|
|
1538
|
+
.stat__row, .breadcrumbs, .check-row { flex-wrap: wrap; row-gap: var(--space-2); }
|
|
1539
|
+
.progress-row, .slider-row { flex-wrap: wrap; gap: var(--space-2); }
|
|
1540
|
+
.stat__value { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
|
|
1541
|
+
.file-upload, .file-upload__label { min-inline-size: 0; max-inline-size: 100%; }
|
|
1542
|
+
.file-upload__button { max-inline-size: 100%; white-space: normal; text-align: center; }
|
|
1543
|
+
.file-upload__hint { overflow-wrap: anywhere; }
|
|
1544
|
+
.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
|
|
1545
|
+
.popover__panel, .datepicker__calendar, .combobox__list {
|
|
1546
|
+
max-inline-size: calc(100vw - 2rem);
|
|
1547
|
+
max-block-size: min(32rem, 70dvh);
|
|
1548
|
+
overflow: auto;
|
|
1549
|
+
}
|
|
1550
|
+
.file-upload__input:focus-visible + .file-upload__label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1551
|
+
.calendar { max-inline-size: calc(100vw - 2rem); }
|
|
1552
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] :is(h1, h2, h3) {
|
|
1553
|
+
font-family: var(--font-ui-heading);
|
|
1554
|
+
letter-spacing: 0;
|
|
1555
|
+
line-height: 1.3;
|
|
1556
|
+
font-weight: var(--weight-semibold);
|
|
1557
|
+
}
|
|
1558
|
+
.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] h1 { font-size: var(--text-ui-title); }
|
|
1559
|
+
[data-mode="operate"] h2 { font-size: var(--text-xl); }
|
|
1560
|
+
[data-mode="operate"] h3 { font-size: var(--text-lg); }
|
|
1561
|
+
.display, .reading-title, :is(h1, h2, h3, h4, h5, h6):is(.display, .reading-title) {
|
|
1562
|
+
font-family: var(--font-display);
|
|
1563
|
+
font-size: var(--text-display-fluid);
|
|
1564
|
+
line-height: 1.08;
|
|
1565
|
+
letter-spacing: var(--tracking-display);
|
|
1566
|
+
text-wrap: balance;
|
|
1567
|
+
}
|
|
1568
|
+
:where(.celeste-reset, .salvia-reset, .bruma-reset, .nocturna-reset, body[data-system]) {
|
|
1569
|
+
scrollbar-color: var(--control-border) var(--bg);
|
|
1570
|
+
}
|
|
1571
|
+
::selection,
|
|
1572
|
+
.celeste-reset ::selection, .salvia-reset ::selection, .bruma-reset ::selection {
|
|
1573
|
+
background: var(--selection-bg); color: var(--selection-text);
|
|
1574
|
+
}
|
|
1575
|
+
::placeholder { color: var(--placeholder); opacity: 1; }
|
|
1576
|
+
:where(a) { text-underline-offset: .2em; text-decoration-thickness: .08em; }
|
|
1577
|
+
.skip-link {
|
|
1578
|
+
position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
|
|
1579
|
+
z-index: 1000; padding: var(--space-3) var(--space-4);
|
|
1580
|
+
background: var(--action-bg); color: var(--text-on-action);
|
|
1581
|
+
border-radius: var(--radius-sm); transform: translateY(-180%);
|
|
1582
|
+
}
|
|
1583
|
+
.skip-link:focus { transform: none; outline: 2px solid var(--focus-color); outline-offset: 2px; }
|
|
1584
|
+
[data-tooltip]::before, [data-tooltip]::after { display: none; }
|
|
1585
|
+
[data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { display: block; }
|
|
1586
|
+
.has-tooltip .tooltip { display: none; }
|
|
1587
|
+
.has-tooltip:has(:focus-visible) .tooltip { display: block; opacity: 1; transform: translate(-50%, 0); }
|
|
1588
|
+
@media (hover: hover) and (pointer: fine) {
|
|
1589
|
+
[data-tooltip]:hover::before, [data-tooltip]:hover::after { display: block; }
|
|
1590
|
+
.has-tooltip:hover .tooltip { display: block; }
|
|
1591
|
+
}
|
|
1592
|
+
@media (pointer: coarse) {
|
|
1593
|
+
.btn, .icon-btn, .segmented label, .pagination button,
|
|
1594
|
+
.tag__close, .search__clear, .toast__close, .check-row,
|
|
1595
|
+
.checkbox:not(input), .radio:not(input), .switch:not(input) {
|
|
1596
|
+
min-block-size: var(--touch-target);
|
|
1597
|
+
min-inline-size: var(--touch-target);
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
@media (max-width: 479px) {
|
|
1601
|
+
.btn-group { flex-wrap: wrap; }
|
|
1602
|
+
.modal { max-inline-size: calc(100vw - 2rem); }
|
|
1603
|
+
.stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
|
|
1604
|
+
.step { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; min-inline-size: 0; }
|
|
1605
|
+
.step__label { overflow-wrap: anywhere; }
|
|
1606
|
+
.step__connector { display: none; }
|
|
1607
|
+
}
|
|
1608
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1609
|
+
html, html:focus-within { scroll-behavior: auto; }
|
|
1610
|
+
.spinner, .skeleton, .skeleton::after,
|
|
1611
|
+
.progress--indeterminate .progress__bar, .alert.is-leaving, .toast.is-leaving { animation: none; }
|
|
1612
|
+
.progress--indeterminate .progress__bar { transform: none; }
|
|
1613
|
+
.btn, .icon-btn, .card--interactive, .slider::-webkit-slider-thumb { transform: none; }
|
|
1614
|
+
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .card--interactive:hover { transform: none; }
|
|
1615
|
+
.btn, .icon-btn { transition: background-color 80ms linear, color 80ms linear; }
|
|
1616
|
+
.menu, .popover__panel, .datepicker__calendar, .link::after { transition: none; }
|
|
1617
|
+
.progress__bar, .progress-ring__value, .accordion__content, .accordion__body { transition: none; }
|
|
1618
|
+
}
|
|
1619
|
+
@media (forced-colors: active) {
|
|
1620
|
+
input.switch, .switch__track { border: 1px solid CanvasText; background: Canvas; }
|
|
1621
|
+
input.switch::after, .switch__track::after { background: CanvasText; }
|
|
1622
|
+
input.switch:checked, .switch input:checked ~ .switch__track { border-color: Highlight; }
|
|
1623
|
+
input.switch:checked::after, .switch input:checked ~ .switch__track::after { background: Highlight; }
|
|
1624
|
+
.checkbox__box, .radio__dot { border-color: CanvasText; }
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1328
1627
|
|
|
1329
1628
|
/* ============================================================
|
|
1330
1629
|
ESTILOS DE LA PÁGINA DE DOCS (.ds-*)
|
|
@@ -1389,10 +1688,23 @@ html { scroll-behavior: smooth; }
|
|
|
1389
1688
|
.ds-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
|
|
1390
1689
|
.ds-demo:has(table) { overflow-x: auto; }
|
|
1391
1690
|
|
|
1691
|
+
/* Demo del sidebar contraíble: rejilla auto 1fr, el contenido sigue al riel sin animar el ancho */
|
|
1692
|
+
.ds-app-demo { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 0; min-height: 400px; padding: 0; }
|
|
1693
|
+
.ds-app-demo > .sidebar { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
|
|
1694
|
+
.ds-app-demo__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-6); }
|
|
1695
|
+
@media (max-width: 767px) {
|
|
1696
|
+
.ds-app-demo { grid-template-columns: 1fr; min-height: 0; }
|
|
1697
|
+
}
|
|
1698
|
+
|
|
1392
1699
|
.ds-code { margin-top: var(--space-3); border: 1px solid var(--row-border); border-radius: var(--radius-md); overflow: hidden; }
|
|
1700
|
+
/* «Copiar» es hermano del details, no hijo del summary (un control no puede
|
|
1701
|
+
anidarse en otro), y se superpone al extremo derecho de la cabecera. */
|
|
1702
|
+
.ds-code-wrap { position: relative; margin-top: var(--space-3); }
|
|
1703
|
+
.ds-code-wrap > .ds-code { margin-top: 0; }
|
|
1704
|
+
.ds-code-wrap > .ds-copy { position: absolute; top: 11px; right: 17px; }
|
|
1393
1705
|
.ds-code summary {
|
|
1394
1706
|
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
|
|
1395
|
-
padding: 10px 16px; cursor: pointer; user-select: none;
|
|
1707
|
+
min-height: 45px; padding: 10px 96px 10px 16px; cursor: pointer; user-select: none;
|
|
1396
1708
|
font-size: var(--text-sm); color: var(--text-muted); list-style: none;
|
|
1397
1709
|
}
|
|
1398
1710
|
.ds-code summary::-webkit-details-marker { display: none; }
|
|
@@ -1480,9 +1792,118 @@ html { scroll-behavior: smooth; }
|
|
|
1480
1792
|
.ds-main { margin-left: 0; padding-inline: var(--space-5); }
|
|
1481
1793
|
.ds-hamburger { display: inline-flex; }
|
|
1482
1794
|
}
|
|
1795
|
+
/* ESTILOS COMPARTIDOS GENERADOS */
|
|
1796
|
+
/* La documentación comparte navegación y deja que cada marca determine el ritmo. */
|
|
1797
|
+
.ds-topbar { gap: var(--space-3); }
|
|
1798
|
+
.ds-brand { min-inline-size: 0; }
|
|
1799
|
+
.ds-brand, .ds-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1800
|
+
.ds-theme-toggle, .ds-hamburger { flex-shrink: 0; }
|
|
1801
|
+
.ds-main { padding-block-start: var(--space-12); }
|
|
1802
|
+
.ds-main > section { scroll-margin-block-start: 88px; }
|
|
1803
|
+
.ds-main > section > h2 { text-wrap: balance; }
|
|
1804
|
+
.ds-main :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
|
|
1805
|
+
.ds-hero {
|
|
1806
|
+
display: grid;
|
|
1807
|
+
grid-template-columns: minmax(0, 1.45fr) minmax(12rem, .65fr);
|
|
1808
|
+
column-gap: var(--space-12);
|
|
1809
|
+
row-gap: var(--space-6);
|
|
1810
|
+
padding-block-start: var(--space-6);
|
|
1811
|
+
}
|
|
1812
|
+
.ds-hero > h1 {
|
|
1813
|
+
grid-column: 1 / -1;
|
|
1814
|
+
font-size: var(--text-display-fluid);
|
|
1815
|
+
line-height: 1.08;
|
|
1816
|
+
letter-spacing: var(--tracking-display);
|
|
1817
|
+
text-wrap: balance;
|
|
1818
|
+
margin: 0;
|
|
1819
|
+
}
|
|
1820
|
+
.ds-hero > .ds-lead { grid-column: 1; margin: 0; max-inline-size: 55ch; }
|
|
1821
|
+
.ds-hero > .ds-actions { grid-column: 1; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
|
|
1822
|
+
.ds-hero__palette {
|
|
1823
|
+
grid-column: 2; grid-row: 2 / 4;
|
|
1824
|
+
display: grid; grid-template-columns: 2fr 1.25fr .75fr;
|
|
1825
|
+
gap: var(--space-1); margin: 0; min-block-size: 150px;
|
|
1826
|
+
align-self: stretch; overflow: hidden; border-radius: var(--radius-lg);
|
|
1827
|
+
}
|
|
1828
|
+
.ds-hero__chip { inline-size: auto; block-size: auto; border: 0; border-radius: 0; }
|
|
1829
|
+
.ds-principles {
|
|
1830
|
+
grid-column: 1 / -1; display: grid;
|
|
1831
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1832
|
+
gap: var(--space-6) var(--space-10); margin-block: var(--space-4) 0;
|
|
1833
|
+
}
|
|
1834
|
+
.ds-principle { padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
|
|
1835
|
+
.ds-principle h2 { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; margin: 0 0 var(--space-2); }
|
|
1836
|
+
.ds-principle p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; max-inline-size: 48ch; }
|
|
1837
|
+
.ds-hero > .alert, .ds-hero > .ds-callout { grid-column: 1 / -1; margin: var(--space-3) 0 0; }
|
|
1838
|
+
.ds-callout { border: 1px solid var(--border); border-radius: var(--radius-md); }
|
|
1839
|
+
.ds-recipes { margin: 0; }
|
|
1840
|
+
.ds-recipes > div {
|
|
1841
|
+
display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr);
|
|
1842
|
+
gap: var(--space-4); padding-block: var(--space-5); border-block-start: 1px solid var(--border);
|
|
1843
|
+
}
|
|
1844
|
+
.ds-recipes dt { font-weight: var(--weight-semibold); }
|
|
1845
|
+
.ds-recipes dd { margin: 0; color: var(--text-secondary); max-inline-size: 65ch; }
|
|
1846
|
+
.ds-chart-palette { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
|
1847
|
+
.ds-chart-palette li { display: grid; gap: var(--space-2); }
|
|
1848
|
+
.ds-chart-palette__color { display: block; block-size: 56px; border-radius: var(--radius-sm); }
|
|
1849
|
+
.ds-chart-palette code { font-family: var(--font-mono); font-size: var(--text-sm); }
|
|
1850
|
+
.ds-chart-palette [data-chart-color] { color: var(--text-muted); font-size: var(--text-sm); }
|
|
1851
|
+
.ds-nav a { min-block-size: 36px; display: flex; align-items: center; }
|
|
1852
|
+
.ds-nav__sub a { font-size: var(--text-sm); }
|
|
1853
|
+
.ds-demo { min-inline-size: 0; max-inline-size: 100%; }
|
|
1854
|
+
.ds-demo > * { min-inline-size: 0; max-inline-size: 100%; }
|
|
1855
|
+
.ds-demo :has(> .divider--vertical) { flex-wrap: wrap; row-gap: var(--space-3); }
|
|
1856
|
+
.ds-wordmark-demo { display: inline-block; max-inline-size: 100%; overflow-x: auto; vertical-align: bottom; }
|
|
1857
|
+
.ds-main code:not(.ds-pre code), .ds-main .code, .ds-main .u-mono { overflow-wrap: anywhere; white-space: normal; }
|
|
1858
|
+
.ds-demo .popover__panel { max-inline-size: calc(100vw - var(--space-20)); }
|
|
1859
|
+
.ds-demo--grid, .ds-semantic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
|
|
1860
|
+
.ds-copy { min-block-size: 36px; }
|
|
1861
|
+
.ds-code summary { padding-block: var(--space-3); }
|
|
1862
|
+
.ds-pre { max-inline-size: 100%; }
|
|
1863
|
+
.ds-type-row__sample { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
|
|
1864
|
+
.ds-main table { min-inline-size: 0; }
|
|
1865
|
+
.ds-theme-toggle[data-tooltip]::after { left: auto; right: 0; transform: translateY(4px); }
|
|
1866
|
+
.ds-theme-toggle[data-tooltip]:hover::after, .ds-theme-toggle[data-tooltip]:focus-visible::after { transform: translateY(0); }
|
|
1867
|
+
[data-system="nocturna"] .ds-wordmark-badge { color: var(--night-50); }
|
|
1868
|
+
.ds-main p { overflow-wrap: anywhere; }
|
|
1869
|
+
.ds-type-row { min-inline-size: 0; }
|
|
1870
|
+
[data-system="celeste"] .ds-hero { padding-block-start: var(--space-10); }
|
|
1871
|
+
[data-system="salvia"] .ds-principles { row-gap: var(--space-8); }
|
|
1872
|
+
[data-system="bruma"] .ds-principles { gap: var(--space-4) var(--space-8); }
|
|
1873
|
+
[data-system="nocturna"] .ds-main { padding-block-start: calc(64px + var(--space-10)); }
|
|
1874
|
+
@media (max-width: 1023px) {
|
|
1875
|
+
.ds-main { padding-inline: var(--space-5); }
|
|
1876
|
+
.ds-hero { column-gap: var(--space-6); }
|
|
1877
|
+
.ds-nav a { min-block-size: var(--touch-target); }
|
|
1878
|
+
.ds-sidenav:not(.is-open), .ds-sidebar:not(.is-open) { visibility: hidden; }
|
|
1879
|
+
}
|
|
1880
|
+
@media (max-width: 639px) {
|
|
1881
|
+
.ds-topbar { padding-inline: var(--space-4); }
|
|
1882
|
+
.ds-version { max-inline-size: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1883
|
+
.ds-main { padding-inline: var(--space-4); padding-block-start: var(--space-8); }
|
|
1884
|
+
.ds-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); padding-block-start: var(--space-2); }
|
|
1885
|
+
.ds-hero > h1, .ds-hero > .ds-lead, .ds-hero > .ds-actions { grid-column: 1; }
|
|
1886
|
+
.ds-hero__palette { grid-column: 1; grid-row: auto; min-block-size: 64px; }
|
|
1887
|
+
.ds-principles { grid-template-columns: minmax(0, 1fr); }
|
|
1888
|
+
.ds-demo { padding: var(--space-4); }
|
|
1889
|
+
.ds-type-row { display: grid; gap: var(--space-2); }
|
|
1890
|
+
.ds-type-row__meta { inline-size: auto; }
|
|
1891
|
+
.ds-space-item { min-inline-size: 0; }
|
|
1892
|
+
.ds-space-item .u-mono { inline-size: 96px; flex: none; }
|
|
1893
|
+
.ds-space-bar { max-inline-size: calc(100vw - 164px); }
|
|
1894
|
+
.ds-recipes > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
|
|
1895
|
+
.ds-actions > .btn { flex: 1 1 12rem; }
|
|
1896
|
+
.ds-copy { min-block-size: var(--touch-target); }
|
|
1897
|
+
}
|
|
1898
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1899
|
+
.ds-sidenav, .ds-sidebar, .ds-swatch, .ds-ease-chip { transition: none; }
|
|
1900
|
+
.ds-swatch:hover, .ds-ease-chip:hover { transform: none; }
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1483
1903
|
</style>
|
|
1484
1904
|
</head>
|
|
1485
|
-
<body>
|
|
1905
|
+
<body data-system="nocturna" data-mode="read">
|
|
1906
|
+
<a class="skip-link" href="#contenido">Saltar al contenido</a>
|
|
1486
1907
|
|
|
1487
1908
|
<header class="ds-topbar">
|
|
1488
1909
|
<button class="icon-btn icon-btn--ghost ds-hamburger" id="dsHamburger" aria-label="Abrir navegación">
|
|
@@ -1501,10 +1922,13 @@ html { scroll-behavior: smooth; }
|
|
|
1501
1922
|
<div class="ds-nav">
|
|
1502
1923
|
<div class="overline ds-group">Fundamentos</div>
|
|
1503
1924
|
<a href="#introduccion">Introducción</a>
|
|
1925
|
+
<a href="#datos">Color para datos</a>
|
|
1926
|
+
<a href="#criterio">Criterio de uso</a>
|
|
1504
1927
|
<a href="#voz">Voz y contenido</a>
|
|
1505
1928
|
<a href="#colores">Colores</a>
|
|
1506
1929
|
<a href="#tipografia">Tipografía</a>
|
|
1507
1930
|
<a href="#espaciado">Espaciado</a>
|
|
1931
|
+
<a href="#ritmo">Ritmo de contenido</a>
|
|
1508
1932
|
<a href="#bordes">Bordes, radios y focus</a>
|
|
1509
1933
|
<a href="#elevacion">Elevación</a>
|
|
1510
1934
|
<a href="#iconografia">Iconografía</a>
|
|
@@ -1556,29 +1980,18 @@ html { scroll-behavior: smooth; }
|
|
|
1556
1980
|
</div>
|
|
1557
1981
|
</nav>
|
|
1558
1982
|
|
|
1559
|
-
<main class="ds-main">
|
|
1983
|
+
<main class="ds-main" id="contenido" tabindex="-1">
|
|
1560
1984
|
|
|
1561
1985
|
<!-- ================= INTRODUCCIÓN ================= -->
|
|
1562
1986
|
<section id="introduccion" class="ds-hero">
|
|
1563
1987
|
<h1>Nocturna Eléctrica</h1>
|
|
1564
1988
|
<p class="ds-lead">Sistema de diseño <strong>dark-first</strong>, enérgico y de alto contraste. El fondo casi negro es el escenario; el celeste eléctrico es el reflector.</p>
|
|
1565
|
-
<div class="ds-
|
|
1566
|
-
|
|
1567
|
-
<
|
|
1568
|
-
<span class="code">#010203 · negro nocturno</span>
|
|
1569
|
-
</div>
|
|
1570
|
-
<div style="display:flex;gap:16px;flex-wrap:wrap;margin:24px 0;">
|
|
1571
|
-
<button class="btn btn--primary ds-hero-cta" id="heroCtaBuild">Empezar a construir</button>
|
|
1989
|
+
<div class="ds-hero__palette" aria-hidden="true"><div class="ds-hero__chip" style="background:var(--accent-400)"></div><div class="ds-hero__chip" style="background:var(--indigo-500)"></div><div class="ds-hero__chip" style="background:var(--night-950)"></div></div>
|
|
1990
|
+
<div class="ds-actions">
|
|
1991
|
+
<button class="btn btn--primary" id="heroCtaBuild">Empezar a construir</button>
|
|
1572
1992
|
<button class="btn btn--outline" id="heroCtaTokens">Ver tokens</button>
|
|
1573
1993
|
</div>
|
|
1574
|
-
<
|
|
1575
|
-
<ol style="color:var(--text-secondary);line-height:1.8;max-width:65ch;padding-left:20px;">
|
|
1576
|
-
<li><strong style="color:var(--text-primary)">Contraste con propósito</strong> — el acento solo aparece donde hay acción o dato clave.</li>
|
|
1577
|
-
<li><strong style="color:var(--text-primary)">Profundidad por luz</strong> — la elevación aclara superficies, no oscurece bordes.</li>
|
|
1578
|
-
<li><strong style="color:var(--text-primary)">Energía contenida</strong> — paleta vibrante, espaciado disciplinado: nunca ruidosa.</li>
|
|
1579
|
-
<li><strong style="color:var(--text-primary)">Datos protagonistas</strong> — cifras y gráficas brillan; el chrome se mantiene discreto.</li>
|
|
1580
|
-
<li><strong style="color:var(--text-primary)">Movimiento con propósito</strong> — la animación explica cambios de estado, nunca decora sola.</li>
|
|
1581
|
-
</ol>
|
|
1994
|
+
<div class="ds-principles"><div class="ds-principle"><h2>Contraste con propósito</h2><p>el acento solo aparece donde hay acción o dato clave.</p></div><div class="ds-principle"><h2>Profundidad por luz</h2><p>la elevación aclara superficies, no oscurece bordes.</p></div><div class="ds-principle"><h2>Energía contenida</h2><p>paleta vibrante, espaciado disciplinado: nunca ruidosa.</p></div><div class="ds-principle"><h2>Datos protagonistas</h2><p>cifras y gráficas brillan; el chrome se mantiene discreto.</p></div><div class="ds-principle"><h2>Movimiento con propósito</h2><p>la animación explica cambios de estado, nunca decora sola.</p></div></div>
|
|
1582
1995
|
<div class="ds-callout ds-callout--info">
|
|
1583
1996
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
|
|
1584
1997
|
<div><strong>Regla de oro:</strong> los componentes consumen solo tokens semánticos (<span class="code">--surface-1</span>, <span class="code">--text-primary</span>…), nunca hex directos. El cambio de tema es un cambio de atributo, no un refactor. Pruébalo con el botón de tema de la esquina superior.</div>
|
|
@@ -1586,6 +1999,42 @@ html { scroll-behavior: smooth; }
|
|
|
1586
1999
|
</section>
|
|
1587
2000
|
|
|
1588
2001
|
<!-- ================= VOZ ================= -->
|
|
2002
|
+
<section id="datos">
|
|
2003
|
+
<h2>Color para datos</h2>
|
|
2004
|
+
<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>
|
|
2005
|
+
<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>
|
|
2006
|
+
<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>
|
|
2007
|
+
</section>
|
|
2008
|
+
|
|
2009
|
+
<section id="ritmo">
|
|
2010
|
+
<h2>Ritmo de contenido</h2>
|
|
2011
|
+
<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 24px entre tarjetas. Las secciones se separan 64px.</p>
|
|
2012
|
+
<div class="stack stack--cards" data-spacing-example data-mode="operate">
|
|
2013
|
+
<section class="card">
|
|
2014
|
+
<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>
|
|
2015
|
+
<form class="form-stack" onsubmit="return false">
|
|
2016
|
+
<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>
|
|
2017
|
+
<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>
|
|
2018
|
+
<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>
|
|
2019
|
+
</form>
|
|
2020
|
+
</section>
|
|
2021
|
+
<section class="card">
|
|
2022
|
+
<header class="text-group"><h3>Contenido relacionado</h3><p>Una tarjeta distinta conserva su propia distancia.</p></header>
|
|
2023
|
+
<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>
|
|
2024
|
+
</section>
|
|
2025
|
+
</div>
|
|
2026
|
+
</section>
|
|
2027
|
+
|
|
2028
|
+
<section id="criterio">
|
|
2029
|
+
<h2>Diseñar con Nocturna Eléctrica</h2>
|
|
2030
|
+
<dl class="ds-recipes">
|
|
2031
|
+
<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>
|
|
2032
|
+
<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>
|
|
2033
|
+
<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>
|
|
2034
|
+
<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>
|
|
2035
|
+
</dl>
|
|
2036
|
+
</section>
|
|
2037
|
+
|
|
1589
2038
|
<section id="voz">
|
|
1590
2039
|
<h2>Voz y contenido</h2>
|
|
1591
2040
|
<div class="ds-demo ds-demo--col" style="gap:12px;">
|
|
@@ -1593,7 +2042,7 @@ html { scroll-behavior: smooth; }
|
|
|
1593
2042
|
<div><span class="overline">Casing</span><p style="margin:6px 0 0;">Sentence case en headings y botones: «Crear proyecto», no «Crear Proyecto». Overlines en uppercase con tracking <span class="code">+0.08em</span>.</p></div>
|
|
1594
2043
|
<div><span class="overline">Botones</span><p style="margin:6px 0 0;">Verbo + objeto, corto: «Guardar cambios», «Ver informe».</p></div>
|
|
1595
2044
|
<div><span class="overline">Errores</span><p style="margin:6px 0 0;">Concretos y accionables: dicen qué pasó <em>y qué hacer</em>.</p></div>
|
|
1596
|
-
<div><span class="overline">Datos</span><p style="margin:6px 0 0;">Siempre en JetBrains Mono o <span class="code">tabular-nums</span>; grandes en dashboards, con
|
|
2045
|
+
<div><span class="overline">Datos</span><p style="margin:6px 0 0;">Siempre en JetBrains Mono o <span class="code">tabular-nums</span>; grandes en dashboards, con valores finales listos para leer.</p></div>
|
|
1597
2046
|
<div><span class="overline">Emoji</span><p style="margin:6px 0 0;">No se usan. El estado se comunica con color + icono + texto.</p></div>
|
|
1598
2047
|
</div>
|
|
1599
2048
|
</section>
|
|
@@ -1661,7 +2110,7 @@ html { scroll-behavior: smooth; }
|
|
|
1661
2110
|
<div class="ds-radius-demo" style="border-radius:var(--radius-md);">md · 12</div>
|
|
1662
2111
|
<div class="ds-radius-demo" style="border-radius:var(--radius-lg);">lg · 16</div>
|
|
1663
2112
|
<div class="ds-radius-demo" style="border-radius:var(--radius-xl);">xl · 24</div>
|
|
1664
|
-
<div class="ds-radius-demo" style="border-radius:var(--radius-full);width:72px;">full</div>
|
|
2113
|
+
<div class="ds-radius-demo" style="border-radius:var(--radius-full);width:min(100%, 72px);">full</div>
|
|
1665
2114
|
</div>
|
|
1666
2115
|
<p style="margin-top:16px;">Borde por defecto <span class="code">1px night-500</span>; énfasis <span class="code">night-600</span>. Focus ring global de teclado: <span class="code">2px accent-400</span> con offset 2px — pruébalo navegando con <kbd class="code">Tab</kbd>.</p>
|
|
1667
2116
|
</section>
|
|
@@ -1674,11 +2123,11 @@ html { scroll-behavior: smooth; }
|
|
|
1674
2123
|
<div class="ds-elev-demo" style="background:var(--bg);border:1px dashed var(--border);">Nivel 0<br>night-950</div>
|
|
1675
2124
|
<div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--shadow-1);border:1px solid var(--row-border);">Nivel 1<br>night-900 + shadow-1</div>
|
|
1676
2125
|
<div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-2);border:1px solid var(--row-border);">Nivel 2<br>night-800 + shadow-2</div>
|
|
1677
|
-
<div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-
|
|
2126
|
+
<div class="ds-elev-demo" style="background:var(--surface-2);box-shadow:var(--shadow-3);border:1px solid var(--border-strong);">Nivel 3<br>night-800 + borde night-400 + shadow-3</div>
|
|
1678
2127
|
</div>
|
|
1679
2128
|
<h3 style="margin-top:32px;">Glow de acento</h3>
|
|
1680
2129
|
<div class="ds-demo">
|
|
1681
|
-
<div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-
|
|
2130
|
+
<div class="ds-elev-demo" style="background:var(--surface-1);box-shadow:var(--glow-accent);max-width:280px;">glow-accent<br><span style="color:var(--text-muted)">máximo uno por pantalla</span></div>
|
|
1682
2131
|
</div>
|
|
1683
2132
|
</section>
|
|
1684
2133
|
|
|
@@ -1710,7 +2159,7 @@ html { scroll-behavior: smooth; }
|
|
|
1710
2159
|
|
|
1711
2160
|
<!-- ================= COMPONENTES (overview) ================= -->
|
|
1712
2161
|
<section id="componentes">
|
|
1713
|
-
|
|
2162
|
+
|
|
1714
2163
|
<h2>Componentes</h2>
|
|
1715
2164
|
<p class="ds-lead">Los 35 componentes del sistema, renderizados en vivo con las clases del framework <span class="code">nocturna-electrica.css</span>. Cada bloque incluye su código de uso.</p>
|
|
1716
2165
|
</section>
|
|
@@ -1718,7 +2167,7 @@ html { scroll-behavior: smooth; }
|
|
|
1718
2167
|
<!-- ================= BOTONES ================= -->
|
|
1719
2168
|
<section id="comp-botones">
|
|
1720
2169
|
<h2>Botones</h2>
|
|
1721
|
-
<p>Alturas 36 / 44 / 52px. El primario lleva <strong>texto oscuro</strong> (contraste 9.50:1) — nunca blanco.
|
|
2170
|
+
<p>Alturas 36 / 44 / 52px. El primario lleva <strong>texto oscuro</strong> (contraste 9.50:1) — nunca blanco. Una acción dominante por contexto de decisión.</p>
|
|
1722
2171
|
<div class="ds-demo">
|
|
1723
2172
|
<button class="btn btn--primary">Guardar cambios</button>
|
|
1724
2173
|
<button class="btn btn--secondary">Ver informe</button>
|
|
@@ -1732,16 +2181,16 @@ html { scroll-behavior: smooth; }
|
|
|
1732
2181
|
<button class="btn btn--primary">Mediano</button>
|
|
1733
2182
|
<button class="btn btn--primary btn--lg">Grande</button>
|
|
1734
2183
|
<button class="btn btn--outline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-7-7v14"/></svg>Con icono</button>
|
|
1735
|
-
<button class="btn btn--primary" style="min-width:160px;"><span class="spinner" style="color:currentColor;"></span></button>
|
|
2184
|
+
<button class="btn btn--primary" style="min-width:160px;" aria-label="Cargando"><span class="spinner" style="color:currentColor;"></span></button>
|
|
1736
2185
|
</div>
|
|
1737
|
-
<
|
|
2186
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><button class="btn btn--primary">Guardar cambios</button>
|
|
1738
2187
|
<button class="btn btn--secondary">Ver informe</button>
|
|
1739
2188
|
<button class="btn btn--outline">Exportar</button>
|
|
1740
2189
|
<button class="btn btn--ghost">Cancelar</button>
|
|
1741
2190
|
<button class="btn btn--danger">Eliminar cuenta</button>
|
|
1742
2191
|
|
|
1743
2192
|
<!-- Tamaños: .btn--sm (36px) · default (44px) · .btn--lg (52px) -->
|
|
1744
|
-
<!-- Loading: fijar min-width y sustituir el texto por .spinner --></code></pre></details>
|
|
2193
|
+
<!-- Loading: fijar min-width y sustituir el texto por .spinner --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1745
2194
|
</section>
|
|
1746
2195
|
|
|
1747
2196
|
<!-- ================= ICON BUTTON ================= -->
|
|
@@ -1755,10 +2204,10 @@ html { scroll-behavior: smooth; }
|
|
|
1755
2204
|
<button class="icon-btn icon-btn--outline icon-btn--sm" aria-label="Copiar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
|
|
1756
2205
|
<button class="icon-btn icon-btn--outline" disabled aria-label="Deshabilitado"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
|
1757
2206
|
</div>
|
|
1758
|
-
<
|
|
2207
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><button class="icon-btn icon-btn--outline" aria-label="Buscar">
|
|
1759
2208
|
<svg>…</svg>
|
|
1760
2209
|
</button>
|
|
1761
|
-
<!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --></code></pre></details>
|
|
2210
|
+
<!-- Variantes: --outline · --ghost · --accent | Tamaños: --sm (36) · default (44) · --lg (52) --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1762
2211
|
</section>
|
|
1763
2212
|
|
|
1764
2213
|
<!-- ================= SPINNER ================= -->
|
|
@@ -1767,11 +2216,11 @@ html { scroll-behavior: smooth; }
|
|
|
1767
2216
|
<p>Trazo 2px, rotación 0.8s. Si la carga dura menos de 300ms, no mostrar spinner.</p>
|
|
1768
2217
|
<div class="ds-demo">
|
|
1769
2218
|
<span class="spinner"></span>
|
|
1770
|
-
<span class="spinner" style="width:24px;height:24px;"></span>
|
|
1771
|
-
<span class="spinner" style="width:32px;height:32px;color:var(--text-muted);"></span>
|
|
2219
|
+
<span class="spinner" style="width:min(100%, 24px);height:24px;"></span>
|
|
2220
|
+
<span class="spinner" style="width:min(100%, 32px);height:32px;color:var(--text-muted);"></span>
|
|
1772
2221
|
</div>
|
|
1773
|
-
<
|
|
1774
|
-
<!-- Hereda currentColor; default accent-400 --></code></pre></details>
|
|
2222
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><span class="spinner"></span>
|
|
2223
|
+
<!-- Hereda currentColor; default accent-400 --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1775
2224
|
</section>
|
|
1776
2225
|
|
|
1777
2226
|
<!-- ================= INPUT ================= -->
|
|
@@ -1806,7 +2255,7 @@ html { scroll-behavior: smooth; }
|
|
|
1806
2255
|
<span class="field__help">El asterisco es decorativo; lo obligatorio lo marca <span class="code">required</span>.</span>
|
|
1807
2256
|
</div>
|
|
1808
2257
|
</div>
|
|
1809
|
-
<
|
|
2258
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="field">
|
|
1810
2259
|
<label class="field__label" for="email">Correo</label>
|
|
1811
2260
|
<input class="input" id="email" type="email" placeholder="tu@correo.com">
|
|
1812
2261
|
<span class="field__help">Texto de ayuda.</span>
|
|
@@ -1818,7 +2267,7 @@ html { scroll-behavior: smooth; }
|
|
|
1818
2267
|
<input class="input" id="name" type="text" required aria-required="true">
|
|
1819
2268
|
</div>
|
|
1820
2269
|
<!-- Estados: .input--error (+ .field__error) · .input--success · disabled -->
|
|
1821
|
-
<!-- Icono leading: envolver en .input-wrap con un svg antes del input --></code></pre></details>
|
|
2270
|
+
<!-- Icono leading: envolver en .input-wrap con un svg antes del input --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1822
2271
|
</section>
|
|
1823
2272
|
|
|
1824
2273
|
<!-- ================= TEXTAREA ================= -->
|
|
@@ -1832,11 +2281,11 @@ html { scroll-behavior: smooth; }
|
|
|
1832
2281
|
<span class="field__count">0 / 280</span>
|
|
1833
2282
|
</div>
|
|
1834
2283
|
</div>
|
|
1835
|
-
<
|
|
2284
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="field">
|
|
1836
2285
|
<label class="field__label" for="desc">Descripción</label>
|
|
1837
2286
|
<textarea class="textarea" id="desc" placeholder="Describe el proyecto…"></textarea>
|
|
1838
2287
|
<span class="field__count">0 / 280</span>
|
|
1839
|
-
</div></code></pre></details>
|
|
2288
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1840
2289
|
</section>
|
|
1841
2290
|
|
|
1842
2291
|
<!-- ================= SELECT ================= -->
|
|
@@ -1854,9 +2303,9 @@ html { scroll-behavior: smooth; }
|
|
|
1854
2303
|
</div>
|
|
1855
2304
|
</div>
|
|
1856
2305
|
</div>
|
|
1857
|
-
<
|
|
2306
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="select-wrap">
|
|
1858
2307
|
<select class="select"><option>Opción</option></select>
|
|
1859
|
-
</div></code></pre></details>
|
|
2308
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1860
2309
|
</section>
|
|
1861
2310
|
|
|
1862
2311
|
<!-- ================= SEGMENTEDCONTROL ================= -->
|
|
@@ -1875,11 +2324,11 @@ html { scroll-behavior: smooth; }
|
|
|
1875
2324
|
<input type="radio" name="seg-per" id="seg-12m"><label for="seg-12m">12 m</label>
|
|
1876
2325
|
</div>
|
|
1877
2326
|
</div>
|
|
1878
|
-
<
|
|
2327
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="segmented" role="radiogroup" aria-label="Vista">
|
|
1879
2328
|
<input type="radio" name="vista" id="lista" checked><label for="lista">Lista</label>
|
|
1880
2329
|
<input type="radio" name="vista" id="tablero"><label for="tablero">Tablero</label>
|
|
1881
2330
|
</div>
|
|
1882
|
-
<!-- Compacto: añadir segmented--sm --></code></pre></details>
|
|
2331
|
+
<!-- Compacto: añadir segmented--sm --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1883
2332
|
</section>
|
|
1884
2333
|
|
|
1885
2334
|
<!-- ================= SLIDER ================= -->
|
|
@@ -1896,12 +2345,12 @@ html { scroll-behavior: smooth; }
|
|
|
1896
2345
|
</div>
|
|
1897
2346
|
<input class="slider js-slider" type="range" min="0" max="100" value="70" disabled aria-label="Slider deshabilitado">
|
|
1898
2347
|
</div>
|
|
1899
|
-
<
|
|
2348
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="slider-row">
|
|
1900
2349
|
<span class="slider-label">Límite de gasto</span>
|
|
1901
2350
|
<span class="slider-value">$ 350</span>
|
|
1902
2351
|
</div>
|
|
1903
2352
|
<input class="slider" type="range" min="0" max="1000" value="350">
|
|
1904
|
-
<!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --></code></pre></details>
|
|
2353
|
+
<!-- JS: --slider-fill = ((v-min)/(max-min))*100 + '%' --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1905
2354
|
</section>
|
|
1906
2355
|
|
|
1907
2356
|
<!-- ================= CHECKBOX Y RADIO ================= -->
|
|
@@ -1914,10 +2363,10 @@ html { scroll-behavior: smooth; }
|
|
|
1914
2363
|
<label class="check-row"><input type="radio" name="r1" class="radio" checked> Mensual</label>
|
|
1915
2364
|
<label class="check-row"><input type="radio" name="r1" class="radio"> Anual</label>
|
|
1916
2365
|
</div>
|
|
1917
|
-
<
|
|
2366
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><label class="check-row"><input type="checkbox" class="checkbox"> Etiqueta</label>
|
|
1918
2367
|
<label class="check-row"><input type="radio" name="g" class="radio"> Opción</label>
|
|
1919
2368
|
<!-- Indeterminate = tercer estado (guion horizontal). Solo por JS: -->
|
|
1920
|
-
<!-- document.querySelector('.checkbox').indeterminate = true; --></code></pre></details>
|
|
2369
|
+
<!-- document.querySelector('.checkbox').indeterminate = true; --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1921
2370
|
</section>
|
|
1922
2371
|
|
|
1923
2372
|
<!-- ================= SWITCH ================= -->
|
|
@@ -1926,7 +2375,7 @@ html { scroll-behavior: smooth; }
|
|
|
1926
2375
|
<div class="ds-demo" style="gap:32px;">
|
|
1927
2376
|
<label class="check-row"><input type="checkbox" class="switch" checked> Modo compacto</label>
|
|
1928
2377
|
</div>
|
|
1929
|
-
<
|
|
2378
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><label class="check-row"><input type="checkbox" class="switch"> Activar</label></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1930
2379
|
</section>
|
|
1931
2380
|
|
|
1932
2381
|
<!-- ================= BADGES ================= -->
|
|
@@ -1940,8 +2389,8 @@ html { scroll-behavior: smooth; }
|
|
|
1940
2389
|
<span class="tag">diseño <button class="tag__x" aria-label="Quitar etiqueta diseño">×</button></span>
|
|
1941
2390
|
<span class="tag">frontend <button class="tag__x" aria-label="Quitar etiqueta frontend">×</button></span>
|
|
1942
2391
|
</div>
|
|
1943
|
-
<
|
|
1944
|
-
<span class="tag">diseño <button class="tag__x" aria-label="Quitar">×</button></span></code></pre></details>
|
|
2392
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><span class="badge badge--success">Activo</span>
|
|
2393
|
+
<span class="tag">diseño <button class="tag__x" aria-label="Quitar">×</button></span></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1945
2394
|
</section>
|
|
1946
2395
|
|
|
1947
2396
|
<!-- ================= AVATAR ================= -->
|
|
@@ -1955,9 +2404,9 @@ html { scroll-behavior: smooth; }
|
|
|
1955
2404
|
<span class="avatar avatar--lg">hs<span class="avatar__dot avatar__dot--busy"></span></span>
|
|
1956
2405
|
<span class="avatar avatar--xl">hs<span class="avatar__dot avatar__dot--away"></span></span>
|
|
1957
2406
|
</div>
|
|
1958
|
-
<
|
|
2407
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><span class="avatar">HS<span class="avatar__dot avatar__dot--online"></span></span>
|
|
1959
2408
|
<!-- Tamaños: --xs 24 · --sm 32 · default 40 · --lg 48 · --xl 64 -->
|
|
1960
|
-
<!-- Con imagen: <span class="avatar"><img src="…" alt="Nombre"></span> --></code></pre></details>
|
|
2409
|
+
<!-- Con imagen: <span class="avatar"><img src="…" alt="Nombre"></span> --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1961
2410
|
|
|
1962
2411
|
<h3 style="margin-top:var(--space-8);">AvatarGroup</h3>
|
|
1963
2412
|
<p>Avatares solapados 8px con borde <span class="code">2px</span> del color del fondo; el chip <span class="code">.avatar-group__more</span> resume los ocultos.</p>
|
|
@@ -1970,13 +2419,13 @@ html { scroll-behavior: smooth; }
|
|
|
1970
2419
|
<span class="avatar avatar-group__more">+3</span>
|
|
1971
2420
|
</div>
|
|
1972
2421
|
</div>
|
|
1973
|
-
<
|
|
2422
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="avatar-group" role="group" aria-label="Equipo del proyecto">
|
|
1974
2423
|
<span class="avatar">HS</span>
|
|
1975
2424
|
<span class="avatar">ML</span>
|
|
1976
2425
|
<span class="avatar">AR</span>
|
|
1977
2426
|
<span class="avatar avatar-group__more">+3</span>
|
|
1978
2427
|
</div>
|
|
1979
|
-
<!-- Solapamiento -8px + borde del color del fondo (--surface-1 / --bg). --></code></pre></details>
|
|
2428
|
+
<!-- Solapamiento -8px + borde del color del fondo (--surface-1 / --bg). --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1980
2429
|
</section>
|
|
1981
2430
|
|
|
1982
2431
|
<!-- ================= DIVIDER ================= -->
|
|
@@ -1990,9 +2439,9 @@ html { scroll-behavior: smooth; }
|
|
|
1990
2439
|
<span>Filtros</span><span class="divider--vertical" role="separator"></span><span>Ordenar</span><span class="divider--vertical" role="separator"></span><span>Exportar</span>
|
|
1991
2440
|
</div>
|
|
1992
2441
|
</div>
|
|
1993
|
-
<
|
|
2442
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><hr class="divider">
|
|
1994
2443
|
<div class="divider--label" role="separator">o continúa con</div>
|
|
1995
|
-
<span class="divider--vertical" role="separator"></span></code></pre></details>
|
|
2444
|
+
<span class="divider--vertical" role="separator"></span></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
1996
2445
|
</section>
|
|
1997
2446
|
|
|
1998
2447
|
<!-- ================= ACCORDION ================= -->
|
|
@@ -2014,7 +2463,7 @@ html { scroll-behavior: smooth; }
|
|
|
2014
2463
|
</div>
|
|
2015
2464
|
</div>
|
|
2016
2465
|
</div>
|
|
2017
|
-
<
|
|
2466
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="accordion">
|
|
2018
2467
|
<div class="accordion__item">
|
|
2019
2468
|
<button class="accordion__header" aria-expanded="false">
|
|
2020
2469
|
Pregunta <svg>chevron</svg>
|
|
@@ -2024,7 +2473,7 @@ html { scroll-behavior: smooth; }
|
|
|
2024
2473
|
</div></div>
|
|
2025
2474
|
</div>
|
|
2026
2475
|
</div>
|
|
2027
|
-
<!-- JS: alternar aria-expanded en el header --></code></pre></details>
|
|
2476
|
+
<!-- JS: alternar aria-expanded en el header --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2028
2477
|
</section>
|
|
2029
2478
|
|
|
2030
2479
|
<!-- ================= TOOLTIP ================= -->
|
|
@@ -2041,10 +2490,10 @@ html { scroll-behavior: smooth; }
|
|
|
2041
2490
|
<span class="tooltip" role="tooltip">Ajustes</span>
|
|
2042
2491
|
</span>
|
|
2043
2492
|
</div>
|
|
2044
|
-
<
|
|
2493
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><span class="has-tooltip">
|
|
2045
2494
|
<button class="btn btn--outline">Pasa el cursor</button>
|
|
2046
2495
|
<span class="tooltip" role="tooltip">Exportar como CSV</span>
|
|
2047
|
-
</span></code></pre></details>
|
|
2496
|
+
</span></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2048
2497
|
</section>
|
|
2049
2498
|
|
|
2050
2499
|
<!-- ================= ALERT ================= -->
|
|
@@ -2085,7 +2534,7 @@ html { scroll-behavior: smooth; }
|
|
|
2085
2534
|
<button class="alert__close js-alert-close" aria-label="Cerrar aviso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
|
2086
2535
|
</div>
|
|
2087
2536
|
</div>
|
|
2088
|
-
<
|
|
2537
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="alert alert--warning" role="status">
|
|
2089
2538
|
<svg>…icono…</svg>
|
|
2090
2539
|
<div>
|
|
2091
2540
|
<p class="alert__title">Tu plan expira en 5 días</p>
|
|
@@ -2093,7 +2542,7 @@ html { scroll-behavior: smooth; }
|
|
|
2093
2542
|
</div>
|
|
2094
2543
|
<button class="alert__close" aria-label="Cerrar aviso">…x…</button>
|
|
2095
2544
|
</div>
|
|
2096
|
-
<!-- Variantes: --info · --success · --warning · --danger --></code></pre></details>
|
|
2545
|
+
<!-- Variantes: --info · --success · --warning · --danger --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2097
2546
|
</section>
|
|
2098
2547
|
|
|
2099
2548
|
<!-- ================= TOAST ================= -->
|
|
@@ -2106,7 +2555,7 @@ html { scroll-behavior: smooth; }
|
|
|
2106
2555
|
<button class="btn btn--outline" data-toast="warning">Toast de aviso</button>
|
|
2107
2556
|
<button class="btn btn--outline" data-toast="danger">Toast de error</button>
|
|
2108
2557
|
</div>
|
|
2109
|
-
<
|
|
2558
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="toast-stack" role="status" aria-live="polite">
|
|
2110
2559
|
<div class="toast toast--success">
|
|
2111
2560
|
<svg>…</svg>
|
|
2112
2561
|
<div>
|
|
@@ -2114,7 +2563,7 @@ html { scroll-behavior: smooth; }
|
|
|
2114
2563
|
<div class="toast__body">El proyecto se actualizó correctamente.</div>
|
|
2115
2564
|
</div>
|
|
2116
2565
|
</div>
|
|
2117
|
-
</div></code></pre></details>
|
|
2566
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2118
2567
|
</section>
|
|
2119
2568
|
|
|
2120
2569
|
<!-- ================= PROGRESS ================= -->
|
|
@@ -2124,14 +2573,14 @@ html { scroll-behavior: smooth; }
|
|
|
2124
2573
|
<div class="ds-demo ds-demo--col" style="gap:24px;">
|
|
2125
2574
|
<div>
|
|
2126
2575
|
<div class="progress__head"><span class="progress__label">Subiendo archivos…</span><span class="progress__value" id="pgVal">64 %</span></div>
|
|
2127
|
-
<div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
|
|
2576
|
+
<div class="progress" role="progressbar" aria-label="Subiendo archivos" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="progress__bar" id="pgBar" style="width:64%;"></div></div>
|
|
2128
2577
|
</div>
|
|
2129
2578
|
<div>
|
|
2130
2579
|
<div class="progress__head"><span class="progress__label">Indeterminado</span></div>
|
|
2131
|
-
<div class="progress progress--indeterminate" role="progressbar"><div class="progress__bar"></div></div>
|
|
2580
|
+
<div class="progress progress--indeterminate" role="progressbar" aria-label="Indeterminado"><div class="progress__bar"></div></div>
|
|
2132
2581
|
</div>
|
|
2133
2582
|
<div style="display:flex;align-items:center;gap:24px;">
|
|
2134
|
-
<div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
|
|
2583
|
+
<div class="progress-ring" id="pgRing" data-value="64" role="progressbar" aria-label="Progreso circular" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
|
|
2135
2584
|
<svg width="56" height="56" viewBox="0 0 56 56" aria-hidden="true"><circle class="progress-ring__track" cx="28" cy="28" r="24" stroke-width="5"/><circle class="progress-ring__bar" id="pgRingBar" cx="28" cy="28" r="24" stroke-width="5"/></svg>
|
|
2136
2585
|
<span class="progress-ring__value" id="pgRingVal">64%</span>
|
|
2137
2586
|
</div>
|
|
@@ -2139,7 +2588,7 @@ html { scroll-behavior: smooth; }
|
|
|
2139
2588
|
</div>
|
|
2140
2589
|
<button class="btn btn--outline btn--sm" id="pgRandom" style="align-self:flex-start;">Cambiar progreso</button>
|
|
2141
2590
|
</div>
|
|
2142
|
-
<
|
|
2591
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="progress__head">
|
|
2143
2592
|
<span class="progress__label">Subiendo…</span>
|
|
2144
2593
|
<span class="progress__value">64 %</span>
|
|
2145
2594
|
</div>
|
|
@@ -2155,7 +2604,7 @@ html { scroll-behavior: smooth; }
|
|
|
2155
2604
|
</svg>
|
|
2156
2605
|
<span class="progress-ring__value">64%</span>
|
|
2157
2606
|
</div>
|
|
2158
|
-
<!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --></code></pre></details>
|
|
2607
|
+
<!-- JS: stroke-dasharray = 2πr; stroke-dashoffset = c * (1 - value/100) --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2159
2608
|
</section>
|
|
2160
2609
|
|
|
2161
2610
|
<!-- ================= MODAL ================= -->
|
|
@@ -2166,7 +2615,7 @@ html { scroll-behavior: smooth; }
|
|
|
2166
2615
|
<button class="btn btn--primary" id="openModal">Abrir modal</button>
|
|
2167
2616
|
<button class="btn btn--outline" id="openModalLg">Abrir formulario</button>
|
|
2168
2617
|
</div>
|
|
2169
|
-
<
|
|
2618
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="modal-overlay">
|
|
2170
2619
|
<!-- aria-modal, aria-labelledby (título) y aria-describedby (descripción, si la hay);
|
|
2171
2620
|
tabindex="-1" permite mover el foco al panel al abrir -->
|
|
2172
2621
|
<div class="modal" role="dialog" aria-modal="true"
|
|
@@ -2184,7 +2633,7 @@ html { scroll-behavior: smooth; }
|
|
|
2184
2633
|
</div>
|
|
2185
2634
|
<!-- JS: al abrir guarda document.activeElement y enfoca el panel; Tab cicla dentro
|
|
2186
2635
|
(focus-trap); Esc / clic en overlay / data-close-modal cierran y devuelven el foco.
|
|
2187
|
-
Destructivo: añade data-modal-persistent al .modal-overlay. --></code></pre></details>
|
|
2636
|
+
Destructivo: añade data-modal-persistent al .modal-overlay. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2188
2637
|
</section>
|
|
2189
2638
|
|
|
2190
2639
|
<!-- ================= MENU ================= -->
|
|
@@ -2201,10 +2650,10 @@ html { scroll-behavior: smooth; }
|
|
|
2201
2650
|
</div>
|
|
2202
2651
|
</div>
|
|
2203
2652
|
</div>
|
|
2204
|
-
<
|
|
2653
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="menu">
|
|
2205
2654
|
<button class="menu__item">Duplicar</button>
|
|
2206
2655
|
<button class="menu__item is-selected">Seleccionado</button>
|
|
2207
|
-
</div></code></pre></details>
|
|
2656
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2208
2657
|
</section>
|
|
2209
2658
|
|
|
2210
2659
|
<!-- ================= TABLA ================= -->
|
|
@@ -2261,7 +2710,7 @@ html { scroll-behavior: smooth; }
|
|
|
2261
2710
|
</tbody>
|
|
2262
2711
|
</table>
|
|
2263
2712
|
</div>
|
|
2264
|
-
<
|
|
2713
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><table class="table table--zebra table--sticky">
|
|
2265
2714
|
<thead><tr>
|
|
2266
2715
|
<th scope="col" class="col-select">
|
|
2267
2716
|
<input type="checkbox" class="checkbox" aria-label="Seleccionar todas"></th>
|
|
@@ -2276,35 +2725,54 @@ html { scroll-behavior: smooth; }
|
|
|
2276
2725
|
<tr class="row--selected">…</tr>
|
|
2277
2726
|
</tbody>
|
|
2278
2727
|
</table>
|
|
2279
|
-
<!-- El icono se atenúa si aria-sort no está fijado; JS reordena y alterna aria-sort. --></code></pre></details>
|
|
2728
|
+
<!-- El icono se atenúa si aria-sort no está fijado; JS reordena y alterna aria-sort. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2280
2729
|
</section>
|
|
2281
2730
|
|
|
2282
2731
|
<!-- ================= STAT ================= -->
|
|
2283
2732
|
<section id="comp-stat">
|
|
2284
2733
|
<h2>Stat</h2>
|
|
2285
|
-
<p>Cifra de dashboard
|
|
2734
|
+
<p>Cifra de dashboard estable desde la carga. El movimiento no retrasa la lectura del dato.</p>
|
|
2286
2735
|
<div class="ds-demo ds-demo--grid">
|
|
2287
2736
|
<div class="stat">
|
|
2288
2737
|
<span class="stat__label">Ingresos del mes</span>
|
|
2289
|
-
<span class="stat__value"
|
|
2738
|
+
<span class="stat__value">$128,450</span>
|
|
2290
2739
|
<span class="stat__delta stat__delta--up">▲ +12,4 %</span>
|
|
2291
2740
|
</div>
|
|
2292
2741
|
<div class="stat">
|
|
2293
2742
|
<span class="stat__label">Usuarios activos</span>
|
|
2294
|
-
<span class="stat__value"
|
|
2743
|
+
<span class="stat__value">8,342</span>
|
|
2295
2744
|
<span class="stat__delta stat__delta--down">▼ −3,1 %</span>
|
|
2296
2745
|
</div>
|
|
2297
2746
|
<div class="stat">
|
|
2298
2747
|
<span class="stat__label">Uptime</span>
|
|
2299
|
-
<span class="stat__value"
|
|
2748
|
+
<span class="stat__value">99.98 %</span>
|
|
2300
2749
|
<span class="stat__delta stat__delta--neutral">— sin cambios</span>
|
|
2301
2750
|
</div>
|
|
2302
2751
|
</div>
|
|
2303
|
-
<
|
|
2752
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="stat">
|
|
2304
2753
|
<span class="stat__label">Ingresos del mes</span>
|
|
2305
2754
|
<span class="stat__value">$128 450</span>
|
|
2306
2755
|
<span class="stat__delta stat__delta--up">▲ +12,4 %</span>
|
|
2307
|
-
</div></code></pre></details>
|
|
2756
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2757
|
+
<h3 style="margin-top:32px;">Chip de métrica</h3>
|
|
2758
|
+
<p>Pastilla de una línea con rótulo y valor en <span class="code">--link</span> · fila con <span class="code">gap</span> que salta de línea en móvil · el chip interactivo es un <span class="code"><button></span> de 44 px con nombre accesible completo.</p>
|
|
2759
|
+
<div class="ds-demo">
|
|
2760
|
+
<div class="metric-chips">
|
|
2761
|
+
<span class="metric-chip"><span class="metric-chip__label">Latencia</span> <span class="metric-chip__value">42 ms</span></span>
|
|
2762
|
+
<span class="metric-chip"><span class="metric-chip__label">Errores</span> <span class="metric-chip__value">0,3 %</span></span>
|
|
2763
|
+
<button class="metric-chip" type="button" id="dsWaterChip" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span></button>
|
|
2764
|
+
</div>
|
|
2765
|
+
</div>
|
|
2766
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="metric-chips">
|
|
2767
|
+
<span class="metric-chip">
|
|
2768
|
+
<span class="metric-chip__label">Latencia</span> <span class="metric-chip__value">42 ms</span>
|
|
2769
|
+
</span>
|
|
2770
|
+
<button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso">
|
|
2771
|
+
<svg aria-hidden="true">…plus…</svg>
|
|
2772
|
+
<span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span>
|
|
2773
|
+
</button>
|
|
2774
|
+
</div>
|
|
2775
|
+
<!-- El aria-label se actualiza con el valor; empieza por el texto visible --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2308
2776
|
</section>
|
|
2309
2777
|
|
|
2310
2778
|
<!-- ================= PAGINATION ================= -->
|
|
@@ -2314,14 +2782,14 @@ html { scroll-behavior: smooth; }
|
|
|
2314
2782
|
<div class="ds-demo">
|
|
2315
2783
|
<ul class="pagination" id="paginationDemo" aria-label="Paginación"></ul>
|
|
2316
2784
|
</div>
|
|
2317
|
-
<
|
|
2785
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><ul class="pagination" aria-label="Paginación">
|
|
2318
2786
|
<li><button class="pagination__btn" data-page="prev" aria-label="Página anterior">‹</button></li>
|
|
2319
2787
|
<li><button class="pagination__btn" data-page="1">1</button></li>
|
|
2320
2788
|
<li><span class="pagination__ellipsis">…</span></li>
|
|
2321
2789
|
<li><button class="pagination__btn is-active" data-page="5" aria-current="page">5</button></li>
|
|
2322
2790
|
<li><button class="pagination__btn" data-page="6">6</button></li>
|
|
2323
2791
|
<li><button class="pagination__btn" data-page="next" aria-label="Página siguiente">›</button></li>
|
|
2324
|
-
</ul></code></pre></details>
|
|
2792
|
+
</ul></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2325
2793
|
</section>
|
|
2326
2794
|
|
|
2327
2795
|
<!-- ================= NAVEGACIÓN ================= -->
|
|
@@ -2346,6 +2814,69 @@ html { scroll-behavior: smooth; }
|
|
|
2346
2814
|
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Proyectos</a>
|
|
2347
2815
|
</div>
|
|
2348
2816
|
</div>
|
|
2817
|
+
<h3 style="margin-top:32px;">Sidebar contraíble</h3>
|
|
2818
|
+
<p>Expandido 260 px · riel de iconos de 64 px con grupos separados por una línea · en el riel, el nombre aparece como tooltip al pasar el cursor o al enfocar con teclado · el ancho cambia sin transición y solo los rótulos se funden · por debajo de 768 px lo sustituye un Drawer <span class="code">--left</span>.</p>
|
|
2819
|
+
<div class="ds-demo ds-app-demo">
|
|
2820
|
+
<nav class="sidebar sidebar--collapsible" id="demoAppNav" aria-label="Navegación de ejemplo">
|
|
2821
|
+
<div class="sidebar__group" role="group" aria-labelledby="demoAppNavG1">
|
|
2822
|
+
<span class="sidebar__group-label" id="demoAppNavG1">Monitoreo</span>
|
|
2823
|
+
<a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
|
|
2824
|
+
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
|
|
2825
|
+
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
|
|
2826
|
+
</div>
|
|
2827
|
+
<div class="sidebar__group" role="group" aria-labelledby="demoAppNavG2">
|
|
2828
|
+
<span class="sidebar__group-label" id="demoAppNavG2">Gestión</span>
|
|
2829
|
+
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
|
|
2830
|
+
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
|
|
2831
|
+
<a class="sidebar__item" href="#comp-navegacion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
|
|
2832
|
+
</div>
|
|
2833
|
+
<button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="demoAppNav"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span class="sidebar__label">Contraer</span></button>
|
|
2834
|
+
</nav>
|
|
2835
|
+
<div class="ds-app-demo__main">
|
|
2836
|
+
<button class="icon-btn icon-btn--outline sidebar-trigger" type="button" id="openNavDrawer" aria-label="Abrir navegación" aria-expanded="false" aria-controls="demoNavDrawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
|
|
2837
|
+
<h4 style="margin:0;">Inicio</h4>
|
|
2838
|
+
<p class="text-muted" style="margin:0;font-size:var(--text-sm);">El contenido ocupa el ancho que deja el sidebar: la rejilla <span class="code">auto 1fr</span> sigue al riel al instante, sin animar el ancho.</p>
|
|
2839
|
+
</div>
|
|
2840
|
+
</div>
|
|
2841
|
+
<div class="drawer drawer--left" id="demoNavDrawer" hidden>
|
|
2842
|
+
<div class="drawer__overlay" data-close-drawer></div>
|
|
2843
|
+
<aside class="drawer__panel" role="dialog" aria-modal="true" aria-labelledby="navDrawerTitle" tabindex="-1">
|
|
2844
|
+
<div class="drawer__header">
|
|
2845
|
+
<h3 class="drawer__title" id="navDrawerTitle">Navegación</h3>
|
|
2846
|
+
<button class="icon-btn icon-btn--ghost" data-close-drawer aria-label="Cerrar navegación"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
|
2847
|
+
</div>
|
|
2848
|
+
<nav class="drawer__body" aria-label="Navegación de ejemplo">
|
|
2849
|
+
<div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG1">
|
|
2850
|
+
<span class="sidebar__group-label" id="demoNavDrawerG1">Monitoreo</span>
|
|
2851
|
+
<a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg><span class="sidebar__label">Inicio</span></a>
|
|
2852
|
+
<a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 15v3m5-8v8m5-13v13"/></svg><span class="sidebar__label">Analítica</span></a>
|
|
2853
|
+
<a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg><span class="sidebar__label">Actividad</span></a>
|
|
2854
|
+
</div>
|
|
2855
|
+
<div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG2">
|
|
2856
|
+
<span class="sidebar__group-label" id="demoNavDrawerG2">Gestión</span>
|
|
2857
|
+
<a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span class="sidebar__label">Proyectos</span></a>
|
|
2858
|
+
<a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="sidebar__label">Equipo</span></a>
|
|
2859
|
+
<a class="sidebar__item" href="#comp-navegacion" data-close-drawer><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="sidebar__label">Alertas</span></a>
|
|
2860
|
+
</div>
|
|
2861
|
+
</nav>
|
|
2862
|
+
</aside>
|
|
2863
|
+
</div>
|
|
2864
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal">
|
|
2865
|
+
<div class="sidebar__group" role="group" aria-labelledby="navMonitor">
|
|
2866
|
+
<span class="sidebar__group-label" id="navMonitor">Monitoreo</span>
|
|
2867
|
+
<a class="sidebar__item is-active" href="/" aria-current="page">
|
|
2868
|
+
<svg aria-hidden="true">…</svg><span class="sidebar__label">Inicio</span>
|
|
2869
|
+
</a>
|
|
2870
|
+
</div>
|
|
2871
|
+
<button class="sidebar__item sidebar__toggle" type="button"
|
|
2872
|
+
aria-expanded="true" aria-controls="appNav">
|
|
2873
|
+
<svg aria-hidden="true">…chevron-left…</svg><span class="sidebar__label">Contraer</span>
|
|
2874
|
+
</button>
|
|
2875
|
+
</nav>
|
|
2876
|
+
<!-- Contraído: .is-collapsed en el nav, aria-expanded="false" y texto «Expandir».
|
|
2877
|
+
Por debajo de 768 px: botón ☰ .sidebar-trigger que abre un .drawer.drawer--left con los mismos ítems. -->
|
|
2878
|
+
<button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
|
|
2879
|
+
aria-expanded="false" aria-controls="navDrawer">…menu…</button></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2349
2880
|
<h3 style="margin-top:32px;">Tabs y Breadcrumbs</h3>
|
|
2350
2881
|
<div class="ds-demo ds-demo--col">
|
|
2351
2882
|
<div class="tabs" id="demoTabs">
|
|
@@ -2360,10 +2891,10 @@ html { scroll-behavior: smooth; }
|
|
|
2360
2891
|
<li aria-current="page">Panel analítico</li>
|
|
2361
2892
|
</ul>
|
|
2362
2893
|
</div>
|
|
2363
|
-
<
|
|
2894
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="navbar">…<a class="navbar__link is-active">Resumen</a>…</div>
|
|
2364
2895
|
<div class="sidebar"><a class="sidebar__item is-active"><svg>…</svg>Inicio</a></div>
|
|
2365
2896
|
<div class="tabs"><button class="tabs__btn is-active">Resumen</button>…<span class="tabs__indicator"></span></div>
|
|
2366
|
-
<ul class="breadcrumbs"><li><a>Inicio</a></li><li aria-current="page">Actual</li></ul></code></pre></details>
|
|
2897
|
+
<ul class="breadcrumbs"><li><a>Inicio</a></li><li aria-current="page">Actual</li></ul></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2367
2898
|
</section>
|
|
2368
2899
|
|
|
2369
2900
|
<!-- ================= SKELETON ================= -->
|
|
@@ -2371,7 +2902,7 @@ html { scroll-behavior: smooth; }
|
|
|
2371
2902
|
<h2>Skeleton y EmptyState</h2>
|
|
2372
2903
|
<div class="ds-demo ds-demo--grid">
|
|
2373
2904
|
<div style="display:flex;gap:12px;align-items:center;">
|
|
2374
|
-
<span class="skeleton skeleton--circle" style="width:40px;height:40px;"></span>
|
|
2905
|
+
<span class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px;"></span>
|
|
2375
2906
|
<div style="flex:1;display:flex;flex-direction:column;gap:8px;">
|
|
2376
2907
|
<span class="skeleton" style="height:12px;width:70%;"></span>
|
|
2377
2908
|
<span class="skeleton" style="height:12px;width:45%;"></span>
|
|
@@ -2384,15 +2915,15 @@ html { scroll-behavior: smooth; }
|
|
|
2384
2915
|
<button class="btn btn--primary btn--sm">Crear proyecto</button>
|
|
2385
2916
|
</div>
|
|
2386
2917
|
</div>
|
|
2387
|
-
<
|
|
2388
|
-
<span class="skeleton skeleton--circle" style="width:40px;height:40px"></span>
|
|
2918
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><span class="skeleton" style="height:12px;width:70%"></span>
|
|
2919
|
+
<span class="skeleton skeleton--circle" style="width:min(100%, 40px);height:40px"></span>
|
|
2389
2920
|
|
|
2390
2921
|
<div class="empty-state">
|
|
2391
2922
|
<svg>…</svg>
|
|
2392
2923
|
<span class="empty-state__title">Aún no hay proyectos</span>
|
|
2393
2924
|
<span class="empty-state__desc">Crea tu primer proyecto…</span>
|
|
2394
2925
|
<button class="btn btn--primary btn--sm">Crear proyecto</button>
|
|
2395
|
-
</div></code></pre></details>
|
|
2926
|
+
</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2396
2927
|
</section>
|
|
2397
2928
|
|
|
2398
2929
|
<!-- ================= CARD, LINK Y CODE ================= -->
|
|
@@ -2409,17 +2940,17 @@ html { scroll-behavior: smooth; }
|
|
|
2409
2940
|
<p style="margin:0;font-size:var(--text-sm);color:var(--text-muted);">Al pasar el cursor sube de nivel: −2px + superficie más clara.</p>
|
|
2410
2941
|
</div>
|
|
2411
2942
|
</div>
|
|
2412
|
-
<
|
|
2943
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="card">…</div>
|
|
2413
2944
|
<div class="card card--interactive">…</div>
|
|
2414
|
-
<!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --></code></pre></details>
|
|
2945
|
+
<!-- .card--glow: firma de marca — MÁXIMO UNO POR PANTALLA --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2415
2946
|
<h3 style="margin-top:32px;">Link y Code</h3>
|
|
2416
2947
|
<div class="ds-demo" style="gap:32px;">
|
|
2417
2948
|
<a class="link" href="#comp-card">Link con subrayado animado</a>
|
|
2418
2949
|
<a class="link" href="https://lucide.dev" target="_blank" rel="noopener noreferrer">Link externo<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg></a>
|
|
2419
2950
|
<span>Acento con <span class="code">var(--accent-400)</span></span>
|
|
2420
2951
|
</div>
|
|
2421
|
-
<
|
|
2422
|
-
<span class="code">var(--accent-400)</span></code></pre></details>
|
|
2952
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><a class="link" href="…">Link con subrayado animado</a>
|
|
2953
|
+
<span class="code">var(--accent-400)</span></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2423
2954
|
</section>
|
|
2424
2955
|
|
|
2425
2956
|
<!-- ================= COMBOBOX / SEARCH ================= -->
|
|
@@ -2453,7 +2984,7 @@ html { scroll-behavior: smooth; }
|
|
|
2453
2984
|
</div>
|
|
2454
2985
|
</div>
|
|
2455
2986
|
</div>
|
|
2456
|
-
<
|
|
2987
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="combobox">
|
|
2457
2988
|
<input class="input combobox__input" role="combobox" aria-expanded="false"
|
|
2458
2989
|
aria-controls="lista" aria-autocomplete="list" aria-activedescendant="">
|
|
2459
2990
|
<ul class="combobox__list" id="lista" role="listbox" aria-label="Frameworks" hidden>
|
|
@@ -2467,7 +2998,7 @@ html { scroll-behavior: smooth; }
|
|
|
2467
2998
|
<input class="input search__input" type="search" aria-label="Buscar">
|
|
2468
2999
|
<button class="search__clear" aria-label="Limpiar" hidden>×</button>
|
|
2469
3000
|
</div>
|
|
2470
|
-
<!-- JS: filtra en vivo, ↑/↓/Enter/Esc; el clear vacía y devuelve el foco. --></code></pre></details>
|
|
3001
|
+
<!-- JS: filtra en vivo, ↑/↓/Enter/Esc; el clear vacía y devuelve el foco. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2471
3002
|
</section>
|
|
2472
3003
|
|
|
2473
3004
|
<!-- ================= DRAWER ================= -->
|
|
@@ -2506,7 +3037,7 @@ html { scroll-behavior: smooth; }
|
|
|
2506
3037
|
</div>
|
|
2507
3038
|
</aside>
|
|
2508
3039
|
</div>
|
|
2509
|
-
<
|
|
3040
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="drawer drawer--right" hidden>
|
|
2510
3041
|
<div class="drawer__overlay" data-close-drawer></div>
|
|
2511
3042
|
<aside class="drawer__panel" role="dialog" aria-modal="true"
|
|
2512
3043
|
aria-labelledby="dTitle" tabindex="-1">
|
|
@@ -2519,7 +3050,7 @@ html { scroll-behavior: smooth; }
|
|
|
2519
3050
|
</aside>
|
|
2520
3051
|
</div>
|
|
2521
3052
|
<!-- Variantes: --right (default) · --left · --bottom (sheet).
|
|
2522
|
-
JS: .is-open dispara el slide; Esc / overlay cierran y devuelven el foco. --></code></pre></details>
|
|
3053
|
+
JS: .is-open dispara el slide; Esc / overlay cierran y devuelven el foco. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2523
3054
|
</section>
|
|
2524
3055
|
|
|
2525
3056
|
<!-- ================= POPOVER ================= -->
|
|
@@ -2543,7 +3074,7 @@ html { scroll-behavior: smooth; }
|
|
|
2543
3074
|
</div>
|
|
2544
3075
|
</div>
|
|
2545
3076
|
</div>
|
|
2546
|
-
<
|
|
3077
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="popover">
|
|
2547
3078
|
<button class="btn btn--outline popover__trigger" type="button"
|
|
2548
3079
|
aria-haspopup="dialog" aria-expanded="false" aria-controls="panel">Compartir</button>
|
|
2549
3080
|
<div class="popover__panel" role="dialog" aria-label="Compartir proyecto" id="panel">
|
|
@@ -2552,7 +3083,7 @@ html { scroll-behavior: smooth; }
|
|
|
2552
3083
|
<a class="link" href="…">Ver permisos avanzados</a>
|
|
2553
3084
|
</div>
|
|
2554
3085
|
</div>
|
|
2555
|
-
<!-- Abre por CLICK (no hover); el foco entra al panel; Esc / clic fuera cierran. --></code></pre></details>
|
|
3086
|
+
<!-- Abre por CLICK (no hover); el foco entra al panel; Esc / clic fuera cierran. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2556
3087
|
</section>
|
|
2557
3088
|
|
|
2558
3089
|
<!-- ================= BUTTON GROUP ================= -->
|
|
@@ -2566,12 +3097,12 @@ html { scroll-behavior: smooth; }
|
|
|
2566
3097
|
<button class="btn btn--outline" type="button">Derecha</button>
|
|
2567
3098
|
</div>
|
|
2568
3099
|
</div>
|
|
2569
|
-
<
|
|
3100
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="btn-group" role="group" aria-label="Alineación del texto">
|
|
2570
3101
|
<button class="btn btn--outline">Izquierda</button>
|
|
2571
3102
|
<button class="btn btn--outline">Centro</button>
|
|
2572
3103
|
<button class="btn btn--outline">Derecha</button>
|
|
2573
3104
|
</div>
|
|
2574
|
-
<!-- Radios solo en los extremos; bordes internos colapsados (margin-left:-1px). --></code></pre></details>
|
|
3105
|
+
<!-- Radios solo en los extremos; bordes internos colapsados (margin-left:-1px). --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2575
3106
|
</section>
|
|
2576
3107
|
|
|
2577
3108
|
<!-- ================= DATEPICKER ================= -->
|
|
@@ -2584,7 +3115,7 @@ html { scroll-behavior: smooth; }
|
|
|
2584
3115
|
<div class="input-wrap" style="max-width:220px;">
|
|
2585
3116
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
|
2586
3117
|
<input class="input datepicker__input" type="text" id="dpInput" readonly
|
|
2587
|
-
aria-haspopup="dialog" aria-
|
|
3118
|
+
aria-haspopup="dialog" aria-controls="dpCalendar"
|
|
2588
3119
|
aria-labelledby="dpLabel" value="15 de julio de 2026">
|
|
2589
3120
|
</div>
|
|
2590
3121
|
<div class="datepicker__calendar" id="dpCalendar" role="dialog" aria-label="Elegir fecha" hidden>
|
|
@@ -2594,6 +3125,7 @@ html { scroll-behavior: smooth; }
|
|
|
2594
3125
|
<span class="calendar__title" id="dpTitle" aria-live="polite">julio 2026</span>
|
|
2595
3126
|
<button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" id="dpNext" aria-label="Mes siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
|
|
2596
3127
|
</div>
|
|
3128
|
+
<div class="calendar__table" role="grid" aria-labelledby="dpTitle">
|
|
2597
3129
|
<div class="calendar__weekdays" role="row">
|
|
2598
3130
|
<span role="columnheader" aria-label="lunes">L</span>
|
|
2599
3131
|
<span role="columnheader" aria-label="martes">M</span>
|
|
@@ -2603,16 +3135,17 @@ html { scroll-behavior: smooth; }
|
|
|
2603
3135
|
<span role="columnheader" aria-label="sábado">S</span>
|
|
2604
3136
|
<span role="columnheader" aria-label="domingo">D</span>
|
|
2605
3137
|
</div>
|
|
2606
|
-
<div class="calendar__grid" id="dpGrid" role="
|
|
3138
|
+
<div class="calendar__grid" id="dpGrid" role="rowgroup"></div>
|
|
3139
|
+
</div>
|
|
2607
3140
|
</div>
|
|
2608
3141
|
</div>
|
|
2609
3142
|
</div>
|
|
2610
3143
|
</div>
|
|
2611
|
-
<
|
|
3144
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="datepicker">
|
|
2612
3145
|
<div class="input-wrap">
|
|
2613
3146
|
<svg aria-hidden="true">…calendario…</svg>
|
|
2614
3147
|
<input class="input datepicker__input" readonly aria-haspopup="dialog"
|
|
2615
|
-
aria-
|
|
3148
|
+
aria-controls="cal" value="15 de julio de 2026">
|
|
2616
3149
|
</div>
|
|
2617
3150
|
<div class="datepicker__calendar" id="cal" role="dialog" aria-label="Elegir fecha" hidden>
|
|
2618
3151
|
<div class="calendar">
|
|
@@ -2621,19 +3154,21 @@ html { scroll-behavior: smooth; }
|
|
|
2621
3154
|
<span class="calendar__title" aria-live="polite">julio 2026</span>
|
|
2622
3155
|
<button class="icon-btn icon-btn--ghost icon-btn--sm" aria-label="Mes siguiente">›</button>
|
|
2623
3156
|
</div>
|
|
3157
|
+
<div class="calendar__table" role="grid" aria-label="julio 2026">
|
|
2624
3158
|
<div class="calendar__weekdays" role="row">
|
|
2625
3159
|
<span role="columnheader" aria-label="lunes">L</span> …
|
|
2626
3160
|
</div>
|
|
2627
|
-
<div class="calendar__grid" role="
|
|
3161
|
+
<div class="calendar__grid" role="rowgroup">
|
|
2628
3162
|
<div class="calendar__week" role="row">
|
|
2629
3163
|
<button class="calendar__day" role="gridcell"
|
|
2630
3164
|
aria-label="15 de julio de 2026" aria-selected="true">15</button> …
|
|
2631
3165
|
</div>
|
|
2632
3166
|
</div>
|
|
3167
|
+
</div>
|
|
2633
3168
|
</div>
|
|
2634
3169
|
</div>
|
|
2635
3170
|
</div>
|
|
2636
|
-
<!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --></code></pre></details>
|
|
3171
|
+
<!-- JS: clic abre; flechas mueven el día (±1, ±7) cruzando meses; Enter elige; Esc cierra. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2637
3172
|
</section>
|
|
2638
3173
|
|
|
2639
3174
|
<!-- ================= FILE UPLOAD ================= -->
|
|
@@ -2677,7 +3212,7 @@ html { scroll-behavior: smooth; }
|
|
|
2677
3212
|
</ul>
|
|
2678
3213
|
</div>
|
|
2679
3214
|
</div>
|
|
2680
|
-
<
|
|
3215
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><div class="file-upload">
|
|
2681
3216
|
<input class="file-upload__input visually-hidden" type="file" id="f" multiple
|
|
2682
3217
|
aria-describedby="hint">
|
|
2683
3218
|
<label class="file-upload__label" for="f">
|
|
@@ -2699,7 +3234,7 @@ html { scroll-behavior: smooth; }
|
|
|
2699
3234
|
<li class="file-upload__item file-upload__item--error">…icono + texto de error…</li>
|
|
2700
3235
|
</ul>
|
|
2701
3236
|
</div>
|
|
2702
|
-
<!-- JS: dragover añade .is-dragover; el botón × quita el ítem. --></code></pre></details>
|
|
3237
|
+
<!-- JS: dragover añade .is-dragover; el botón × quita el ítem. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2703
3238
|
</section>
|
|
2704
3239
|
|
|
2705
3240
|
<!-- ================= STEPPER ================= -->
|
|
@@ -2745,7 +3280,7 @@ html { scroll-behavior: smooth; }
|
|
|
2745
3280
|
</li>
|
|
2746
3281
|
</ol>
|
|
2747
3282
|
</div>
|
|
2748
|
-
<
|
|
3283
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code><ol class="stepper" aria-label="Progreso de la configuración">
|
|
2749
3284
|
<li class="step step--complete">
|
|
2750
3285
|
<span class="step__marker"><svg aria-hidden="true">…check…</svg></span>
|
|
2751
3286
|
<span class="step__label">Cuenta</span>
|
|
@@ -2760,7 +3295,7 @@ html { scroll-behavior: smooth; }
|
|
|
2760
3295
|
<span class="step__marker">4</span><span class="step__label">Confirmación</span>
|
|
2761
3296
|
</li>
|
|
2762
3297
|
</ol>
|
|
2763
|
-
<!-- El último paso no lleva conector. Variante: .stepper--vertical. --></code></pre></details>
|
|
3298
|
+
<!-- El último paso no lleva conector. Variante: .stepper--vertical. --></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2764
3299
|
</section>
|
|
2765
3300
|
|
|
2766
3301
|
<!-- ================= KBD ================= -->
|
|
@@ -2775,10 +3310,10 @@ html { scroll-behavior: smooth; }
|
|
|
2775
3310
|
<span style="display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S</kbd></span>
|
|
2776
3311
|
<span style="display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);"><kbd class="kbd">Shift</kbd> + <kbd class="kbd">⇥</kbd></span>
|
|
2777
3312
|
</div>
|
|
2778
|
-
<
|
|
3313
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>Ver código</summary><pre><code>Pulsa <kbd class="kbd">Esc</kbd> para cerrar.
|
|
2779
3314
|
|
|
2780
3315
|
Abre el buscador con <kbd class="kbd">⌘</kbd> + <kbd class="kbd">K</kbd>.
|
|
2781
|
-
Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S</kbd>.</code></pre></details>
|
|
3316
|
+
Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S</kbd>.</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2782
3317
|
</section>
|
|
2783
3318
|
|
|
2784
3319
|
<!-- ================= MOTION ================= -->
|
|
@@ -2806,7 +3341,7 @@ Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S<
|
|
|
2806
3341
|
<div class="ds-motion-box" id="mBox2">fade + glow</div>
|
|
2807
3342
|
<button class="btn btn--outline btn--sm" id="mReplay">Reproducir</button>
|
|
2808
3343
|
</div>
|
|
2809
|
-
<p style="font-size:var(--text-sm);color:var(--text-muted);">Firma de marca: los elementos con acento entran con fade + glow — solo en el elemento hero/CTA. <span class="code">prefers-reduced-motion</span>
|
|
3344
|
+
<p style="font-size:var(--text-sm);color:var(--text-muted);">Firma de marca: los elementos con acento entran con fade + glow — solo en el elemento hero/CTA. <span class="code">prefers-reduced-motion</span> conserva estados finales sin desplazamientos.</p>
|
|
2810
3345
|
</section>
|
|
2811
3346
|
|
|
2812
3347
|
<!-- ================= ACCESIBILIDAD ================= -->
|
|
@@ -2844,48 +3379,274 @@ Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S<
|
|
|
2844
3379
|
<p>El sistema se distribuye en <span class="code">dist/nocturna-electrica/</span>: <strong>nocturna-electrica.css</strong> (framework completo), <strong>tokens.css</strong> (solo variables), <strong>tailwind.css</strong> (bloque <span class="code">@theme</span> para Tailwind v4) y <strong>tokens.json</strong> (formato estándar W3C DTCG 2025.10, interoperable con Figma / Tokens Studio / Style Dictionary).</p>
|
|
2845
3380
|
|
|
2846
3381
|
<h3>Variables CSS (núcleo)</h3>
|
|
2847
|
-
<details class="ds-code" open><summary>tokens :root (aliases semánticos)
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
/*
|
|
2859
|
-
|
|
2860
|
-
|
|
3382
|
+
<div class="ds-code-wrap"><details class="ds-code" open><summary>tokens :root (aliases semánticos)</summary><pre><code>/* ============================================================
|
|
3383
|
+
Nocturna Eléctrica — Design Tokens v2.0
|
|
3384
|
+
Sistema de diseño de Higinio Sosa · dark-first
|
|
3385
|
+
Fuente de verdad: DESIGN-nocturna-electrica.md
|
|
3386
|
+
Uso: importar ANTES de cualquier estilo propio.
|
|
3387
|
+
Los componentes consumen SOLO aliases semánticos, nunca hex.
|
|
3388
|
+
============================================================ */
|
|
3389
|
+
|
|
3390
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
3391
|
+
|
|
3392
|
+
:root {
|
|
3393
|
+
/* == Primitivos: acento (Celeste Eléctrico) ==
|
|
3394
|
+
accent-600 sobre blanco da 4.01:1 — vale como UI (≥3) pero NO como texto (<4.5).
|
|
3395
|
+
Para texto sobre claro se usa accent-700 (5.95:1) y accent-800 (8.74:1). */
|
|
3396
|
+
--accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
|
|
3397
|
+
--accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
|
|
3398
|
+
--accent-800: #12506f;
|
|
3399
|
+
|
|
3400
|
+
/* == Primitivos: índigo (Índigo Profundo) — nunca texto sobre negro == */
|
|
3401
|
+
--indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
|
|
3402
|
+
--indigo-600: #2b3264; --indigo-700: #22284f; --indigo-800: #1a1e3b;
|
|
3403
|
+
|
|
3404
|
+
/* == Primitivos: escala nocturna == */
|
|
3405
|
+
--night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
|
|
3406
|
+
--night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
|
|
3407
|
+
--night-450: #5f6575; /* texto atenuado en light: night-400 caía a 4.27:1 sobre --surface-3 */
|
|
3408
|
+
--night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
|
|
3409
|
+
--night-100: #e8eaef; --night-50: #f6f7f9;
|
|
3410
|
+
|
|
3411
|
+
/* == Primitivos: semánticos (calibrados para dark) == */
|
|
3412
|
+
--success-400: #4ade80; --success-bg: #0a2617;
|
|
3413
|
+
--warning-400: #fbbf24; --warning-bg: #2a2005;
|
|
3414
|
+
--danger-400: #f87171; --danger-bg: #2c0f0f;
|
|
3415
|
+
--info-400: #52baed; --info-bg: #0d1f2c;
|
|
3416
|
+
|
|
3417
|
+
/* == Aliases semánticos (los componentes consumen SOLO esto) == */
|
|
3418
|
+
--bg: var(--night-950);
|
|
3419
|
+
--surface-1: var(--night-900);
|
|
3420
|
+
--surface-2: var(--night-800);
|
|
3421
|
+
--surface-3: var(--night-700);
|
|
3422
|
+
--border: var(--night-500);
|
|
3423
|
+
/* night-400, no night-600: en dark, oscurecer un borde lo DEBILITA (principio 2:
|
|
3424
|
+
la elevación se comunica aclarando). n600 daba 1.46:1 vs los 1.97:1 del borde
|
|
3425
|
+
normal — el énfasis se veía más flojo. n400 = 3.99:1 sobre surface-1. */
|
|
3426
|
+
--border-strong: var(--night-400);
|
|
3427
|
+
--text-primary: var(--night-100);
|
|
3428
|
+
--text-secondary: var(--night-200);
|
|
3429
|
+
--text-muted: var(--night-300);
|
|
3430
|
+
--text-disabled: var(--night-400);
|
|
3431
|
+
--text-heading: var(--night-50);
|
|
3432
|
+
--text-on-accent: var(--night-950); /* texto de CTA oscuro, nunca blanco */
|
|
3433
|
+
--success: var(--success-400); --warning: var(--warning-400);
|
|
3434
|
+
--danger: var(--danger-400); --info: var(--info-400);
|
|
3435
|
+
--link: var(--accent-400);
|
|
3436
|
+
--link-hover: var(--accent-200);
|
|
2861
3437
|
--accent-ghost-hover: rgba(82,186,237,.08);
|
|
3438
|
+
--accent-ghost-active: rgba(82,186,237,.14);
|
|
2862
3439
|
--accent-selected: rgba(82,186,237,.12);
|
|
3440
|
+
--overlay: rgba(1,2,3,.7);
|
|
2863
3441
|
|
|
2864
|
-
/*
|
|
2865
|
-
--success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #52baed;
|
|
2866
|
-
|
|
2867
|
-
/* Tipografía */
|
|
3442
|
+
/* == Tipografía == */
|
|
2868
3443
|
--font-display: "Space Grotesk", system-ui, sans-serif;
|
|
2869
3444
|
--font-body: "Manrope", system-ui, sans-serif;
|
|
2870
3445
|
--font-mono: "JetBrains Mono", monospace;
|
|
3446
|
+
--text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
|
|
3447
|
+
--text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
|
|
3448
|
+
--text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
|
|
3449
|
+
--leading-tight: 1.05; --leading-heading: 1.15; --leading-h2: 1.2;
|
|
3450
|
+
--leading-h3: 1.3; --leading-h4: 1.4; --leading-snug: 1.5; --leading-body: 1.6;
|
|
3451
|
+
--tracking-display: -0.02em; --tracking-overline: 0.08em;
|
|
3452
|
+
--measure: 65ch;
|
|
3453
|
+
|
|
3454
|
+
/* == Espaciado (escala base 4px) == */
|
|
3455
|
+
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
3456
|
+
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
|
|
3457
|
+
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
|
|
3458
|
+
--card-padding: 24px; --card-padding-mobile: 16px;
|
|
3459
|
+
--section-gap: 64px; --form-gap: 20px;
|
|
3460
|
+
--button-padding: 12px 20px; --touch-target: 44px;
|
|
3461
|
+
--grid-gutter: 24px; --grid-gutter-mobile: 16px;
|
|
2871
3462
|
|
|
2872
|
-
/* Radios y
|
|
2873
|
-
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
|
|
3463
|
+
/* == Radios y bordes == */
|
|
3464
|
+
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
|
|
3465
|
+
--radius-xl: 24px; --radius-full: 9999px;
|
|
3466
|
+
--border-default: 1px solid var(--night-500);
|
|
3467
|
+
--border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
|
|
3468
|
+
--focus-ring: 2px solid var(--focus-color);
|
|
3469
|
+
--focus-ring-offset: 2px;
|
|
3470
|
+
|
|
3471
|
+
/* == Elevación (superficie + sombra + borde) == */
|
|
2874
3472
|
--shadow-1: 0 1px 2px rgba(0,0,0,.4);
|
|
2875
3473
|
--shadow-2: 0 4px 12px rgba(0,0,0,.5);
|
|
2876
3474
|
--shadow-3: 0 12px 32px rgba(0,0,0,.6);
|
|
2877
|
-
--glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18);
|
|
3475
|
+
--glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18); /* máx. uno por pantalla */
|
|
2878
3476
|
--ring: 0 0 0 3px rgba(82,186,237,.2);
|
|
3477
|
+
--ring-danger: 0 0 0 3px rgba(248,113,113,.2);
|
|
2879
3478
|
|
|
2880
|
-
/* Motion */
|
|
2881
|
-
--duration-
|
|
3479
|
+
/* == Motion == */
|
|
3480
|
+
--duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
|
|
3481
|
+
--duration-slow: 250ms; --duration-page: 350ms;
|
|
2882
3482
|
--ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
2883
|
-
--ease-in
|
|
3483
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
3484
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
|
|
2884
3485
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
2885
|
-
|
|
3486
|
+
--stagger-step: 30ms;
|
|
3487
|
+
|
|
3488
|
+
color-scheme: dark;
|
|
3489
|
+
|
|
3490
|
+
--focus-color: var(--accent-400);
|
|
3491
|
+
--border-hover: var(--night-400);
|
|
3492
|
+
--outline-hover-bg: var(--surface-2);
|
|
3493
|
+
--outline-active-bg: var(--surface-3);
|
|
3494
|
+
--text-on-danger: var(--night-950);
|
|
3495
|
+
--data-color: var(--accent-400);
|
|
3496
|
+
--elevated-border: var(--night-600);
|
|
3497
|
+
--card-border: var(--night-600);
|
|
3498
|
+
--code-color: var(--accent-300);
|
|
3499
|
+
--code-border: var(--night-700);
|
|
3500
|
+
--table-header-bg: var(--night-900);
|
|
3501
|
+
--row-border: var(--night-800);
|
|
3502
|
+
--row-hover: var(--night-700);
|
|
3503
|
+
--navbar-bg: rgba(1,2,3,.8);
|
|
3504
|
+
--nav-active: var(--accent-400);
|
|
3505
|
+
--sidebar-bg: var(--night-900);
|
|
3506
|
+
--sidebar-active-bg: var(--indigo-800);
|
|
3507
|
+
--sidebar-active-text: var(--night-50);
|
|
3508
|
+
--sidebar-active-icon: var(--accent-400);
|
|
3509
|
+
--switch-off: var(--night-600);
|
|
3510
|
+
--tooltip-bg: var(--night-700);
|
|
3511
|
+
--tooltip-border: var(--night-600);
|
|
3512
|
+
--tooltip-text: var(--night-100);
|
|
3513
|
+
--skeleton-base: var(--night-800);
|
|
3514
|
+
--skeleton-sheen: var(--night-700);
|
|
3515
|
+
--empty-icon: var(--indigo-400);
|
|
3516
|
+
|
|
3517
|
+
--action-bg: var(--accent);
|
|
3518
|
+
--action-hover: var(--accent-hover);
|
|
3519
|
+
--action-active: var(--accent-active);
|
|
3520
|
+
--text-on-action: var(--text-on-accent);
|
|
3521
|
+
--control-border: var(--border-strong);
|
|
3522
|
+
--placeholder: var(--text-muted);
|
|
3523
|
+
--selection-bg: var(--action-bg);
|
|
3524
|
+
--selection-text: var(--text-on-action);
|
|
3525
|
+
--font-ui-heading: var(--font-body);
|
|
3526
|
+
--text-ui-title: 2rem;
|
|
3527
|
+
--control-height-md: 44px;
|
|
3528
|
+
--button-padding-md: 12px 20px;
|
|
3529
|
+
--surface: var(--surface-1);
|
|
3530
|
+
--surface-alt: var(--surface-2);
|
|
3531
|
+
--accent: var(--accent-400);
|
|
3532
|
+
--accent-hover: var(--accent-300);
|
|
3533
|
+
--accent-active: var(--accent-500);
|
|
3534
|
+
--text-display-fluid: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
|
|
3535
|
+
--text-on-primary-solid: var(--link);
|
|
3536
|
+
--weight-regular: 400;
|
|
3537
|
+
--weight-medium: 500;
|
|
3538
|
+
--weight-semibold: 600;
|
|
3539
|
+
--weight-bold: 700;
|
|
3540
|
+
--leading-base: 1.6;
|
|
3541
|
+
--leading-lg: 1.55;
|
|
3542
|
+
--gutter: 24px;
|
|
3543
|
+
--gutter-mobile: 16px;
|
|
3544
|
+
|
|
3545
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3546
|
+
--chart-1: #52baed;
|
|
3547
|
+
--chart-2: #a0587c;
|
|
3548
|
+
--chart-3: #2aa79e;
|
|
3549
|
+
--chart-4: #aa5849;
|
|
3550
|
+
--chart-5: #67a369;
|
|
3551
|
+
--chart-6: #946a1c;
|
|
3552
|
+
--chart-7: #877cc3;
|
|
3553
|
+
/* Ritmo de contenido y formularios. */
|
|
3554
|
+
--field-gap: 6px;
|
|
3555
|
+
--heading-gap: var(--space-2);
|
|
3556
|
+
--content-gap: var(--space-4);
|
|
3557
|
+
--card-content-gap: var(--space-4);
|
|
3558
|
+
--card-group-gap: var(--space-6);
|
|
3559
|
+
|
|
3560
|
+
}
|
|
3561
|
+
|
|
3562
|
+
/* == Modo claro (variante) — alternar data-theme en <html> == */
|
|
3563
|
+
[data-theme="light"] {
|
|
3564
|
+
--bg: #f5f8fb;
|
|
3565
|
+
--surface-1: #ffffff;
|
|
3566
|
+
--surface-2: #ffffff;
|
|
3567
|
+
--surface-3: #eaf1f7;
|
|
3568
|
+
--border: #d8dfe8;
|
|
3569
|
+
/* border-strong NO se redefine en claro: night-400 (:root) cumple 1.4.11 en
|
|
3570
|
+
AMBOS temas (3.26-3.99:1 en dark, 4.27-4.87:1 en light). #b9c3d1 daba
|
|
3571
|
+
1.53-1.78:1, bajo el mínimo de 3:1 para UI. */
|
|
3572
|
+
--text-primary: #14171f;
|
|
3573
|
+
--text-secondary: #3d4354;
|
|
3574
|
+
--text-muted: var(--night-450); /* no night-400: ese caía a 4.27:1 sobre --surface-3 */
|
|
3575
|
+
--text-disabled: #9aa0b0;
|
|
3576
|
+
--text-heading: #14171f;
|
|
3577
|
+
--link: #186a94; /* accent-700 · 5.95:1 sobre blanco — accent-600 solo daba 4.01:1 */
|
|
3578
|
+
--link-hover: #12506f; /* accent-800 · en light el hover OSCURECE (en dark aclara) */
|
|
3579
|
+
--text-on-accent: #010203; /* CTA no cambia entre modos */
|
|
3580
|
+
/* Semánticos de light: son a la vez relleno y TEXTO sobre su propio --*-bg tintado,
|
|
3581
|
+
así que se calibran contra ese fondo, no contra blanco. */
|
|
3582
|
+
--success: #166534;
|
|
3583
|
+
--warning: #854d0e;
|
|
3584
|
+
--danger: #b02c2c;
|
|
3585
|
+
--info: #186a94;
|
|
3586
|
+
--success-bg: #e3f5ea; --warning-bg: #fbf3dd;
|
|
3587
|
+
--danger-bg: #fbe7e7; --info-bg: #e3f2fb;
|
|
3588
|
+
--accent-ghost-hover: rgba(31,135,187,.08);
|
|
3589
|
+
--accent-ghost-active: rgba(31,135,187,.14);
|
|
3590
|
+
--accent-selected: rgba(82,186,237,.12);
|
|
3591
|
+
--overlay: rgba(20,23,31,.45);
|
|
3592
|
+
--ring: 0 0 0 3px rgba(31,135,187,.25);
|
|
3593
|
+
--shadow-1: 0 1px 3px rgba(53,61,124,.08);
|
|
3594
|
+
--shadow-2: 0 4px 10px rgba(53,61,124,.10);
|
|
3595
|
+
--shadow-3: 0 12px 28px rgba(53,61,124,.14);
|
|
3596
|
+
--glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
|
|
3597
|
+
color-scheme: light;
|
|
3598
|
+
|
|
3599
|
+
--focus-color: #186a94;
|
|
3600
|
+
--border-hover: #5f6575;
|
|
3601
|
+
--outline-hover-bg: #eaf1f7;
|
|
3602
|
+
--outline-active-bg: #d8dfe8;
|
|
3603
|
+
--text-on-danger: #ffffff;
|
|
3604
|
+
--data-color: #186a94;
|
|
3605
|
+
--elevated-border: #d8dfe8;
|
|
3606
|
+
--card-border: #d8dfe8;
|
|
3607
|
+
--code-color: #186a94;
|
|
3608
|
+
--code-border: #d8dfe8;
|
|
3609
|
+
--table-header-bg: #eaf1f7;
|
|
3610
|
+
--row-border: #eaf1f7;
|
|
3611
|
+
--row-hover: #f5f8fb;
|
|
3612
|
+
--navbar-bg: rgba(255,255,255,.8);
|
|
3613
|
+
--nav-active: #186a94;
|
|
3614
|
+
--sidebar-bg: #ffffff;
|
|
3615
|
+
--sidebar-active-bg: #e3f2fb;
|
|
3616
|
+
--sidebar-active-text: #14171f;
|
|
3617
|
+
--sidebar-active-icon: #1f87bb;
|
|
3618
|
+
--switch-off: var(--control-border);
|
|
3619
|
+
--tooltip-bg: #14171f;
|
|
3620
|
+
--tooltip-border: #14171f;
|
|
3621
|
+
--tooltip-text: #f6f7f9;
|
|
3622
|
+
--skeleton-base: #eaf1f7;
|
|
3623
|
+
--skeleton-sheen: #f5f8fb;
|
|
3624
|
+
--ring-danger: 0 0 0 3px rgba(192,53,53,.2);
|
|
3625
|
+
|
|
3626
|
+
--selection-bg: var(--action-bg);
|
|
3627
|
+
--selection-text: var(--text-on-action);
|
|
3628
|
+
|
|
3629
|
+
/* Series categóricas: orden estable; acompañar con etiqueta o forma. */
|
|
3630
|
+
--chart-1: #186a94;
|
|
3631
|
+
--chart-2: #853f63;
|
|
3632
|
+
--chart-3: #129a92;
|
|
3633
|
+
--chart-4: #8e4031;
|
|
3634
|
+
--chart-5: #5b975e;
|
|
3635
|
+
--chart-6: #8a600a;
|
|
3636
|
+
--chart-7: #857bc1;
|
|
3637
|
+
}
|
|
3638
|
+
|
|
3639
|
+
/* == Accesibilidad del movimiento == */
|
|
3640
|
+
|
|
3641
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3642
|
+
:root {
|
|
3643
|
+
--duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
|
|
3644
|
+
--duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
|
|
3645
|
+
}
|
|
3646
|
+
}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2886
3647
|
|
|
2887
3648
|
<h3 style="margin-top:32px;">Tailwind CSS v4 — <span class="code">@theme</span></h3>
|
|
2888
|
-
<
|
|
3649
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>tailwind.css</summary><pre><code>@import "tailwindcss";
|
|
2889
3650
|
|
|
2890
3651
|
@theme {
|
|
2891
3652
|
--color-night-950: #010203; --color-night-900: #0b0d12;
|
|
@@ -2919,7 +3680,7 @@ Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S<
|
|
|
2919
3680
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
2920
3681
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
2921
3682
|
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
|
2922
|
-
}</code></pre></details>
|
|
3683
|
+
}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2923
3684
|
|
|
2924
3685
|
<div class="ds-callout ds-callout--info" style="margin-top:32px;">
|
|
2925
3686
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
|
|
@@ -2933,41 +3694,41 @@ Guarda con <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S<
|
|
|
2933
3694
|
<p>El sistema se distribuye como paquete npm (<span class="code">@higinio/design-css</span>) y también como archivos sueltos en <span class="code">dist/nocturna-electrica/</span>. Instálalo o cópialos, y elige qué importar según tu stack (A/B/C/D). En todas: <strong>dark por defecto</strong>; <span class="code"><html data-theme="light"></span> activa el modo claro, y los componentes consumen <strong>solo aliases semánticos</strong>, nunca hex.</p>
|
|
2934
3695
|
|
|
2935
3696
|
<h3 style="margin-top:32px;">Instalar desde npm (recomendado)</h3>
|
|
2936
|
-
<p>Un solo paquete con los
|
|
2937
|
-
<details class="ds-code" open><summary>terminal + CSS de entrada
|
|
3697
|
+
<p>Un solo paquete con todos los sistemas, cada uno en su subruta; Nocturna Eléctrica vive en <span class="code">/nocturna/</span>. Instálalo y usa las vías de abajo apuntando a la subruta, en vez de a un archivo copiado.</p>
|
|
3698
|
+
<div class="ds-code-wrap"><details class="ds-code" open><summary>terminal + CSS de entrada</summary><pre><code>npm i @higinio/design-css
|
|
2938
3699
|
|
|
2939
3700
|
/* framework completo (vía A) */
|
|
2940
3701
|
@import "@higinio/design-css/nocturna/framework.css";
|
|
2941
3702
|
/* o solo tokens (vía B) */
|
|
2942
3703
|
@import "@higinio/design-css/nocturna/tokens.css";
|
|
2943
3704
|
/* o Tailwind v4 (vía C) */
|
|
2944
|
-
@import "@higinio/design-css/nocturna/tailwind.css";</code></pre></details>
|
|
3705
|
+
@import "@higinio/design-css/nocturna/tailwind.css";</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2945
3706
|
|
|
2946
3707
|
<h3 style="margin-top:32px;">A · CSS drop-in (framework completo)</h3>
|
|
2947
3708
|
<p>Para cualquier proyecto — HTML plano o cualquier framework. Trae variables + clases de componentes listas (tipo Bootstrap) y ya importa las fuentes.</p>
|
|
2948
|
-
<
|
|
3709
|
+
<div class="ds-code-wrap"><details class="ds-code" open><summary>index.html</summary><pre><code><link rel="stylesheet" href="/estilos/nocturna-electrica.css">
|
|
2949
3710
|
<!-- luego usas las clases directo: -->
|
|
2950
3711
|
<button class="btn btn--primary">Guardar</button>
|
|
2951
|
-
<div class="card">…</div></code></pre></details>
|
|
3712
|
+
<div class="card">…</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2952
3713
|
|
|
2953
3714
|
<h3 style="margin-top:32px;">B · Solo tokens</h3>
|
|
2954
3715
|
<p>Si diseñas tus propios componentes: solo las variables, sin clases.</p>
|
|
2955
|
-
<
|
|
3716
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>styles.css</summary><pre><code>@import "./tokens.css";
|
|
2956
3717
|
|
|
2957
3718
|
.mi-panel {
|
|
2958
3719
|
background: var(--surface-1);
|
|
2959
3720
|
color: var(--text-primary);
|
|
2960
3721
|
border: 1px solid var(--border);
|
|
2961
|
-
}</code></pre></details>
|
|
3722
|
+
}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2962
3723
|
|
|
2963
3724
|
<h3 style="margin-top:32px;">C · Tailwind v4</h3>
|
|
2964
3725
|
<p>Tailwind v4 se configura por CSS. El <span class="code">tailwind.css</span> ya incluye <span class="code">@import "tailwindcss"</span>, los tokens y el bloque <span class="code">@theme</span> — úsalo como tu hoja de entrada (mantén <span class="code">tokens.css</span> a su lado, que es lo que importa).</p>
|
|
2965
|
-
<details class="ds-code"><summary>terminal + CSS de entrada
|
|
3726
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>terminal + CSS de entrada</summary><pre><code># 1) instala Tailwind v4
|
|
2966
3727
|
npm i tailwindcss @tailwindcss/postcss
|
|
2967
3728
|
|
|
2968
3729
|
# 2) copia tailwind.css + tokens.css a tu carpeta de CSS
|
|
2969
3730
|
# y usa tailwind.css como entrada. Ya tienes utilidades:
|
|
2970
|
-
<div class="bg-night-900 text-accent-400">…</div></code></pre></details>
|
|
3731
|
+
<div class="bg-night-900 text-accent-400">…</div></code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
2971
3732
|
|
|
2972
3733
|
<h3 style="margin-top:32px;">D · Pipelines de tokens</h3>
|
|
2973
3734
|
<p>Para Figma, Tokens Studio o Style Dictionary: importa <span class="code">tokens.json</span> (formato estándar W3C DTCG 2025.10).</p>
|
|
@@ -2981,20 +3742,23 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
2981
3742
|
<!-- ================= MCP ================= -->
|
|
2982
3743
|
<section id="mcp">
|
|
2983
3744
|
<h2>MCP</h2>
|
|
2984
|
-
<p>El paquete <span class="code">@higinio/design-mcp</span> expone
|
|
3745
|
+
<p>El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Nocturna Eléctrica (<span class="code">system="nocturna"</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>
|
|
2985
3746
|
|
|
2986
|
-
<h3>Las
|
|
3747
|
+
<h3>Las 11 tools</h3>
|
|
2987
3748
|
<div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto;">
|
|
2988
3749
|
<table class="table">
|
|
2989
3750
|
<thead><tr><th>Tool</th><th>Qué hace</th></tr></thead>
|
|
2990
3751
|
<tbody>
|
|
2991
3752
|
<tr><td class="mono">list_design_systems</td><td>Lista los sistemas de diseño disponibles.</td></tr>
|
|
2992
|
-
<tr><td class="mono">get_token</td><td>
|
|
3753
|
+
<tr><td class="mono">get_token</td><td>Resuelve un alias semántico o un token DTCG por path a su valor.</td></tr>
|
|
2993
3754
|
<tr><td class="mono">search_tokens</td><td>Busca tokens por nombre, categoría o valor.</td></tr>
|
|
2994
3755
|
<tr><td class="mono">list_components</td><td>Lista los componentes documentados de un sistema.</td></tr>
|
|
2995
3756
|
<tr><td class="mono">get_component_spec</td><td>Devuelve la especificación completa de un componente: estados, medidas, variantes.</td></tr>
|
|
2996
3757
|
<tr><td class="mono">get_rules</td><td>Devuelve las reglas duras (no negociables) del sistema.</td></tr>
|
|
2997
3758
|
<tr><td class="mono">validate_code</td><td>Audita CSS/HTML contra las reglas del sistema — hex directos, contraste, aliases.</td></tr>
|
|
3759
|
+
<tr><td class="mono">validate_motion</td><td>Audita el motion contra las reglas del sistema: <span class="code">transition</span> sobre todas las propiedades, ease-in en entradas, propiedades de layout, duraciones por encima de <span class="code">--duration-page</span>.</td></tr>
|
|
3760
|
+
<tr><td class="mono">check_slop</td><td>Detecta clichés de diseño generado por IA: gradientes, glassmorphism, sombras de negro puro, fuentes genéricas y copy de marketing.</td></tr>
|
|
3761
|
+
<tr><td class="mono">checklist_preflight</td><td>Checklist estático de pre-producción sobre HTML/CSS: metadatos, headings, imágenes y accesibilidad de controles.</td></tr>
|
|
2998
3762
|
<tr><td class="mono">generate_snippet</td><td>Genera un snippet de componente listo para usar, con los aliases correctos.</td></tr>
|
|
2999
3763
|
</tbody>
|
|
3000
3764
|
</table>
|
|
@@ -3002,7 +3766,7 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3002
3766
|
|
|
3003
3767
|
<h3 style="margin-top:32px;">Conectar (remoto)</h3>
|
|
3004
3768
|
<p>Añade el servidor a tu <span class="code">.mcp.json</span>:</p>
|
|
3005
|
-
<details class="ds-code" open><summary>.mcp.json
|
|
3769
|
+
<div class="ds-code-wrap"><details class="ds-code" open><summary>.mcp.json</summary><pre><code>{
|
|
3006
3770
|
"mcpServers": {
|
|
3007
3771
|
"design": {
|
|
3008
3772
|
"type": "http",
|
|
@@ -3010,15 +3774,15 @@ npm i tailwindcss @tailwindcss/postcss
|
|
|
3010
3774
|
"headers": { "Authorization": "Bearer <tu-token>" }
|
|
3011
3775
|
}
|
|
3012
3776
|
}
|
|
3013
|
-
}</code></pre></details>
|
|
3777
|
+
}</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
3014
3778
|
|
|
3015
3779
|
<h3 style="margin-top:32px;">Ejemplo</h3>
|
|
3016
3780
|
<p>Consultar un token de este sistema:</p>
|
|
3017
|
-
<
|
|
3018
|
-
→ "#52baed"</code></pre></details>
|
|
3781
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>get_token</summary><pre><code>get_token(system="nocturna", name="--accent")
|
|
3782
|
+
→ "#52baed"</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
3019
3783
|
<p>Auditar código antes de integrarlo:</p>
|
|
3020
|
-
<
|
|
3021
|
-
→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details>
|
|
3784
|
+
<div class="ds-code-wrap"><details class="ds-code"><summary>validate_code</summary><pre><code>validate_code(system="nocturna", code="…")
|
|
3785
|
+
→ { ok: false, issues: ["hex directo #52baed en línea 12 — usa var(--accent-400)"] }</code></pre></details><button class="ds-copy" type="button">Copiar</button></div>
|
|
3022
3786
|
|
|
3023
3787
|
<div class="ds-callout ds-callout--info" style="margin-top:32px;">
|
|
3024
3788
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
|
|
@@ -3095,36 +3859,19 @@ if (themeBtn) {
|
|
|
3095
3859
|
});
|
|
3096
3860
|
}
|
|
3097
3861
|
|
|
3098
|
-
/* ---------- Sidebar móvil ---------- */
|
|
3099
|
-
var sidebar = document.getElementById('dsSidebar');
|
|
3100
|
-
var hamburger = document.getElementById('dsHamburger');
|
|
3101
|
-
if (hamburger && sidebar) {
|
|
3102
|
-
hamburger.addEventListener('click', function(){
|
|
3103
|
-
sidebar.classList.toggle('is-open');
|
|
3104
|
-
});
|
|
3105
|
-
sidebar.addEventListener('click', function(e){
|
|
3106
|
-
if (e.target.tagName === 'A') sidebar.classList.remove('is-open');
|
|
3107
|
-
});
|
|
3108
|
-
document.addEventListener('click', function(e){
|
|
3109
|
-
if (sidebar.classList.contains('is-open') && !sidebar.contains(e.target) && e.target !== hamburger) {
|
|
3110
|
-
sidebar.classList.remove('is-open');
|
|
3111
|
-
}
|
|
3112
|
-
});
|
|
3113
|
-
}
|
|
3114
|
-
|
|
3115
3862
|
/* ---------- Hero CTAs ---------- */
|
|
3116
3863
|
var heroCtaBuild = document.getElementById('heroCtaBuild');
|
|
3117
3864
|
if (heroCtaBuild) {
|
|
3118
3865
|
heroCtaBuild.addEventListener('click', function(){
|
|
3119
3866
|
var target = document.getElementById('componentes');
|
|
3120
|
-
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
3867
|
+
if (target) target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth' });
|
|
3121
3868
|
});
|
|
3122
3869
|
}
|
|
3123
3870
|
var heroCtaTokens = document.getElementById('heroCtaTokens');
|
|
3124
3871
|
if (heroCtaTokens) {
|
|
3125
3872
|
heroCtaTokens.addEventListener('click', function(){
|
|
3126
3873
|
var target = document.getElementById('tokens');
|
|
3127
|
-
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
3874
|
+
if (target) target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth' });
|
|
3128
3875
|
});
|
|
3129
3876
|
}
|
|
3130
3877
|
|
|
@@ -3156,7 +3903,7 @@ function swatches(el, items, darkText){
|
|
|
3156
3903
|
d.addEventListener('click', function(){
|
|
3157
3904
|
copyText('var(--' + it[0] + ')', function(){
|
|
3158
3905
|
var n = d.querySelector('.ds-swatch__name'), old = n.textContent;
|
|
3159
|
-
n.textContent = '
|
|
3906
|
+
n.textContent = 'Copiado'; n.style.color = 'var(--success)';
|
|
3160
3907
|
setTimeout(function(){ n.textContent = old; n.style.color = ''; }, 1200);
|
|
3161
3908
|
});
|
|
3162
3909
|
});
|
|
@@ -3209,13 +3956,12 @@ spaces.forEach(function(s){
|
|
|
3209
3956
|
|
|
3210
3957
|
/* ---------- Copiar código ---------- */
|
|
3211
3958
|
document.querySelectorAll('.ds-copy').forEach(function(btn){
|
|
3212
|
-
btn.addEventListener('click', function(
|
|
3213
|
-
|
|
3214
|
-
var
|
|
3215
|
-
var code = details ? details.querySelector('code') : null;
|
|
3959
|
+
btn.addEventListener('click', function(){
|
|
3960
|
+
var box = btn.closest('.ds-code-wrap');
|
|
3961
|
+
var code = box ? box.querySelector('code') : null;
|
|
3216
3962
|
if (code) {
|
|
3217
3963
|
copyText(code.textContent, function(){
|
|
3218
|
-
btn.textContent = '
|
|
3964
|
+
btn.textContent = 'Copiado'; btn.classList.add('is-done');
|
|
3219
3965
|
setTimeout(function(){ btn.textContent = 'Copiar'; btn.classList.remove('is-done'); }, 1500);
|
|
3220
3966
|
});
|
|
3221
3967
|
}
|
|
@@ -3303,6 +4049,31 @@ tabs.querySelectorAll('.tabs__btn').forEach(function(b){
|
|
|
3303
4049
|
});
|
|
3304
4050
|
setTimeout(function(){ moveIndicator(tabs.querySelector('.is-active')); }, 100);
|
|
3305
4051
|
|
|
4052
|
+
/* ---------- Sidebar contraíble: riel de iconos ---------- */
|
|
4053
|
+
document.querySelectorAll('.sidebar__toggle').forEach(function(btn){
|
|
4054
|
+
var nav = document.getElementById(btn.getAttribute('aria-controls'));
|
|
4055
|
+
var label = btn.querySelector('.sidebar__label');
|
|
4056
|
+
if (!nav) return;
|
|
4057
|
+
btn.addEventListener('click', function(){
|
|
4058
|
+
var collapsed = nav.classList.toggle('is-collapsed');
|
|
4059
|
+
btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
|
|
4060
|
+
if (label) label.textContent = collapsed ? 'Expandir' : 'Contraer';
|
|
4061
|
+
});
|
|
4062
|
+
});
|
|
4063
|
+
|
|
4064
|
+
/* ---------- Chip de métrica: sumar un vaso ---------- */
|
|
4065
|
+
(function(){
|
|
4066
|
+
var chip = document.getElementById('dsWaterChip');
|
|
4067
|
+
if (!chip) return;
|
|
4068
|
+
var value = chip.querySelector('.metric-chip__value');
|
|
4069
|
+
var max = 8, n = 3;
|
|
4070
|
+
chip.addEventListener('click', function(){
|
|
4071
|
+
n = n >= max ? 0 : n + 1;
|
|
4072
|
+
value.textContent = n + ' de ' + max;
|
|
4073
|
+
chip.setAttribute('aria-label', 'Agua: ' + n + ' de ' + max + ' vasos. ' + (n < max ? 'Sumar un vaso' : 'Empezar de nuevo'));
|
|
4074
|
+
});
|
|
4075
|
+
})();
|
|
4076
|
+
|
|
3306
4077
|
/* ---------- Alert ---------- */
|
|
3307
4078
|
document.querySelectorAll('.js-alert-close').forEach(function(btn){
|
|
3308
4079
|
btn.addEventListener('click', function(){
|
|
@@ -3414,6 +4185,7 @@ function wireDrawer(triggerId, drawerId){
|
|
|
3414
4185
|
function open(){
|
|
3415
4186
|
lastFocused = document.activeElement;
|
|
3416
4187
|
drawer.hidden = false;
|
|
4188
|
+
if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'true');
|
|
3417
4189
|
/* dos pasos: pinta oculto y en el siguiente frame añade .is-open para que el transform anime */
|
|
3418
4190
|
requestAnimationFrame(function(){ drawer.classList.add('is-open'); });
|
|
3419
4191
|
if (panel) panel.focus(); /* tabindex="-1"; el lector anuncia el título */
|
|
@@ -3421,6 +4193,7 @@ function wireDrawer(triggerId, drawerId){
|
|
|
3421
4193
|
function close(){
|
|
3422
4194
|
if (drawer.hidden) return;
|
|
3423
4195
|
drawer.classList.remove('is-open');
|
|
4196
|
+
if (trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
|
|
3424
4197
|
var finish = function(){ drawer.hidden = true; if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus(); };
|
|
3425
4198
|
if (reduced) finish(); else setTimeout(finish, 250); /* espera el slide de salida (--duration-slow) */
|
|
3426
4199
|
}
|
|
@@ -3440,6 +4213,7 @@ function wireDrawer(triggerId, drawerId){
|
|
|
3440
4213
|
});
|
|
3441
4214
|
}
|
|
3442
4215
|
wireDrawer('openDrawer', 'demoDrawer');
|
|
4216
|
+
wireDrawer('openNavDrawer', 'demoNavDrawer');
|
|
3443
4217
|
|
|
3444
4218
|
/* ---------- Popover (abre por CLICK; foco entra; Esc / clic fuera cierran) ---------- */
|
|
3445
4219
|
(function(){
|
|
@@ -3665,31 +4439,6 @@ if (demoSlider && demoSliderValue) {
|
|
|
3665
4439
|
});
|
|
3666
4440
|
}
|
|
3667
4441
|
|
|
3668
|
-
/* ---------- Count-up ---------- */
|
|
3669
|
-
var fmt = {};
|
|
3670
|
-
function fmtFor(dec){ return fmt[dec] || (fmt[dec] = new Intl.NumberFormat('es-MX', { minimumFractionDigits: dec, maximumFractionDigits: dec })); }
|
|
3671
|
-
function countUp(el){
|
|
3672
|
-
var target = parseFloat(el.dataset.countup);
|
|
3673
|
-
var dec = parseInt(el.dataset.decimals || '0', 10);
|
|
3674
|
-
var prefix = el.dataset.prefix || '', suffix = el.dataset.suffix || '';
|
|
3675
|
-
if (reduced) { el.textContent = prefix + fmtFor(dec).format(target) + suffix; return; }
|
|
3676
|
-
var t0 = performance.now();
|
|
3677
|
-
function frame(t){
|
|
3678
|
-
var p = Math.min((t - t0) / 350, 1);
|
|
3679
|
-
var e = 1 - Math.pow(1 - p, 3);
|
|
3680
|
-
el.textContent = prefix + fmtFor(dec).format(target * e) + suffix;
|
|
3681
|
-
if (p < 1) requestAnimationFrame(frame);
|
|
3682
|
-
}
|
|
3683
|
-
requestAnimationFrame(frame);
|
|
3684
|
-
}
|
|
3685
|
-
var seen = new WeakSet();
|
|
3686
|
-
var cuObs = new IntersectionObserver(function(entries){
|
|
3687
|
-
entries.forEach(function(en){
|
|
3688
|
-
if (en.isIntersecting && !seen.has(en.target)) { seen.add(en.target); countUp(en.target); }
|
|
3689
|
-
});
|
|
3690
|
-
}, { threshold: .4 });
|
|
3691
|
-
document.querySelectorAll('[data-countup]').forEach(function(el){ cuObs.observe(el); });
|
|
3692
|
-
|
|
3693
4442
|
/* ---------- Pagination (demo funcional) ---------- */
|
|
3694
4443
|
var paginationEl = document.getElementById('paginationDemo');
|
|
3695
4444
|
if (paginationEl) {
|
|
@@ -3798,11 +4547,10 @@ if (mReplayBtn) {
|
|
|
3798
4547
|
}
|
|
3799
4548
|
}
|
|
3800
4549
|
function focusRoving(){ var f = grid.querySelector('.calendar__day[tabindex="0"]'); if (f) f.focus(); }
|
|
3801
|
-
function open(){ render(); cal.hidden = false;
|
|
4550
|
+
function open(){ render(); cal.hidden = false; focusRoving(); }
|
|
3802
4551
|
function close(returnFocus){
|
|
3803
4552
|
if (cal.hidden) return;
|
|
3804
4553
|
cal.hidden = true;
|
|
3805
|
-
input.setAttribute('aria-expanded', 'false');
|
|
3806
4554
|
if (returnFocus) input.focus();
|
|
3807
4555
|
}
|
|
3808
4556
|
function setView(y, m){ view = new Date(y, m, 1); render(); }
|
|
@@ -3870,6 +4618,75 @@ if (mReplayBtn) {
|
|
|
3870
4618
|
}
|
|
3871
4619
|
})();
|
|
3872
4620
|
})();
|
|
4621
|
+
</script>
|
|
4622
|
+
<!-- INTERACCIONES COMPARTIDAS GENERADAS -->
|
|
4623
|
+
<script>
|
|
4624
|
+
(function () {
|
|
4625
|
+
"use strict";
|
|
4626
|
+
var trigger = document.getElementById("dsHamburger");
|
|
4627
|
+
var panel = document.getElementById("dsSidenav") || document.getElementById("dsSidebar");
|
|
4628
|
+
var mobile = window.matchMedia("(max-width: 1023px)");
|
|
4629
|
+
|
|
4630
|
+
/**
|
|
4631
|
+
* Actualiza la navegación como disclosure, sin crear una trampa de foco.
|
|
4632
|
+
* @param {boolean} open - Si la navegación móvil debe estar disponible.
|
|
4633
|
+
* @param {boolean} restore - Si el cierre debe devolver foco al disparador.
|
|
4634
|
+
* @returns {void}
|
|
4635
|
+
*/
|
|
4636
|
+
function setNavigation(open, restore) {
|
|
4637
|
+
if (!trigger || !panel) return;
|
|
4638
|
+
panel.classList.toggle("is-open", open);
|
|
4639
|
+
panel.inert = mobile.matches && !open;
|
|
4640
|
+
trigger.setAttribute("aria-expanded", String(open));
|
|
4641
|
+
trigger.setAttribute("aria-label", open ? "Cerrar navegación" : "Abrir navegación");
|
|
4642
|
+
if (restore) trigger.focus();
|
|
4643
|
+
}
|
|
4644
|
+
|
|
4645
|
+
if (trigger && panel) {
|
|
4646
|
+
trigger.setAttribute("aria-controls", panel.id);
|
|
4647
|
+
setNavigation(false, false);
|
|
4648
|
+
trigger.addEventListener("click", function () { setNavigation(!panel.classList.contains("is-open"), false); });
|
|
4649
|
+
panel.addEventListener("click", function (event) {
|
|
4650
|
+
var link = event.target.closest("a[href^='#']");
|
|
4651
|
+
if (!link || !mobile.matches) return;
|
|
4652
|
+
var target = document.getElementById(link.hash.slice(1));
|
|
4653
|
+
setNavigation(false, false);
|
|
4654
|
+
if (target) {
|
|
4655
|
+
target.setAttribute("tabindex", "-1");
|
|
4656
|
+
target.focus({ preventScroll: true });
|
|
4657
|
+
}
|
|
4658
|
+
});
|
|
4659
|
+
document.addEventListener("keydown", function (event) {
|
|
4660
|
+
if (event.key === "Escape" && mobile.matches && panel.classList.contains("is-open")) setNavigation(false, true);
|
|
4661
|
+
});
|
|
4662
|
+
document.addEventListener("click", function (event) {
|
|
4663
|
+
if (mobile.matches && !panel.contains(event.target) && !trigger.contains(event.target)) setNavigation(false, false);
|
|
4664
|
+
});
|
|
4665
|
+
mobile.addEventListener("change", function () { setNavigation(false, false); });
|
|
4666
|
+
}
|
|
4667
|
+
|
|
4668
|
+
var themeButton = document.getElementById("dsThemeToggle") || document.getElementById("dsTheme");
|
|
4669
|
+
/**
|
|
4670
|
+
* Nombra la acción de tema y mantiene semántica de ubicación en el índice.
|
|
4671
|
+
* @returns {void}
|
|
4672
|
+
*/
|
|
4673
|
+
function updateLabels() {
|
|
4674
|
+
if (themeButton) themeButton.setAttribute("aria-label", document.documentElement.dataset.theme === "dark" ? "Usar tema claro" : "Usar tema oscuro");
|
|
4675
|
+
document.querySelectorAll(".ds-nav a").forEach(function (link) {
|
|
4676
|
+
if (link.classList.contains("is-active")) link.setAttribute("aria-current", "location");
|
|
4677
|
+
else link.removeAttribute("aria-current");
|
|
4678
|
+
});
|
|
4679
|
+
var style = getComputedStyle(document.documentElement);
|
|
4680
|
+
document.querySelectorAll("[data-chart-color]").forEach(function (label) {
|
|
4681
|
+
label.textContent = style.getPropertyValue(label.getAttribute("data-chart-color")).trim();
|
|
4682
|
+
});
|
|
4683
|
+
}
|
|
4684
|
+
updateLabels();
|
|
4685
|
+
new MutationObserver(updateLabels).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
|
|
4686
|
+
var nav = document.querySelector(".ds-nav");
|
|
4687
|
+
if (nav) new MutationObserver(updateLabels).observe(nav, { subtree: true, attributes: true, attributeFilter: ["class"] });
|
|
4688
|
+
})();
|
|
4689
|
+
|
|
3873
4690
|
</script>
|
|
3874
4691
|
</body>
|
|
3875
4692
|
</html>
|