holygrail5 1.0.19 → 1.0.21
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/README.md +88 -18
- package/config.json +205 -77
- package/dist/assets/fonts/suisse-intl-light.woff +0 -0
- package/dist/assets/fonts/suisse-intl-light.woff2 +0 -0
- package/dist/assets/fonts/suisse-intl-medium.woff +0 -0
- package/dist/assets/fonts/suisse-intl-medium.woff2 +0 -0
- package/dist/assets/fonts/suisse-intl-regular.woff +0 -0
- package/dist/assets/fonts/suisse-intl-regular.woff2 +0 -0
- package/dist/assets/fonts/suisse-intl-semibold.woff +0 -0
- package/dist/assets/fonts/suisse-intl-semibold.woff2 +0 -0
- package/dist/assets/fonts/suisse-works-bold.woff +0 -0
- package/dist/assets/fonts/suisse-works-bold.woff2 +0 -0
- package/dist/assets/fonts/suisse-works-medium.woff +0 -0
- package/dist/assets/fonts/suisse-works-medium.woff2 +0 -0
- package/dist/assets/fonts/suisse-works-regular.woff +0 -0
- package/dist/assets/fonts/suisse-works-regular.woff2 +0 -0
- package/dist/componentes.html +429 -0
- package/dist/developer-guide.md +7 -7
- package/dist/guide-styles.css +197 -25
- package/dist/index.html +807 -689
- package/dist/output.css +217 -114
- package/dist/skills.html +14 -8
- package/dist/themes/dutti-demo.html +713 -19
- package/dist/themes/dutti.css +67 -16
- package/dist/themes/limited-demo.html +1121 -0
- package/dist/themes/limited.css +2493 -0
- package/package.json +1 -1
- package/src/.data/.previous-values.json +151 -84
- package/src/assets/fonts/suisse-intl-light.woff +0 -0
- package/src/assets/fonts/suisse-intl-light.woff2 +0 -0
- package/src/assets/fonts/suisse-intl-medium.woff +0 -0
- package/src/assets/fonts/suisse-intl-medium.woff2 +0 -0
- package/src/assets/fonts/suisse-intl-regular.woff +0 -0
- package/src/assets/fonts/suisse-intl-regular.woff2 +0 -0
- package/src/assets/fonts/suisse-intl-semibold.woff +0 -0
- package/src/assets/fonts/suisse-intl-semibold.woff2 +0 -0
- package/src/assets/fonts/suisse-works-bold.woff +0 -0
- package/src/assets/fonts/suisse-works-bold.woff2 +0 -0
- package/src/assets/fonts/suisse-works-medium.woff +0 -0
- package/src/assets/fonts/suisse-works-medium.woff2 +0 -0
- package/src/assets/fonts/suisse-works-regular.woff +0 -0
- package/src/assets/fonts/suisse-works-regular.woff2 +0 -0
- package/src/build/asset-manager.js +94 -3
- package/src/build/build-orchestrator.js +74 -12
- package/src/build/components-generator.js +584 -0
- package/src/build/skills-generator.js +43 -5
- package/src/build/theme-config-loader.js +58 -0
- package/src/build/theme-transformer.js +109 -16
- package/src/build/theme-vars-table-generator.js +349 -0
- package/src/build/typo-table-generator.js +154 -0
- package/src/docs-generator/guide-styles.css +197 -24
- package/src/docs-generator/html-generator.js +92 -246
- package/src/docs-generator/sections/colors-section.js +109 -0
- package/src/docs-generator/value-tracker.js +154 -0
- package/src/generators/typo-generator.js +2 -1
- package/src/generators/utils.js +90 -1
- package/src/skills.html +1 -0
- package/src/watch-config.js +99 -32
- package/themes/{dutti → _base}/_buttons.css +2 -2
- package/themes/{dutti → _base}/_checkboxes.css +1 -1
- package/themes/{dutti → _base}/_forms.css +1 -1
- package/themes/{dutti → _base}/_inputs.css +55 -10
- package/themes/{dutti → _base}/_labels.css +1 -1
- package/themes/dutti/README.md +67 -21
- package/themes/dutti/_variables.css +7 -1
- package/themes/dutti/demo.html +18 -14
- package/themes/dutti/theme.css +22 -44
- package/themes/dutti/theme.json +86 -0
- package/themes/limited/_variables.css +123 -0
- package/themes/limited/demo.html +296 -0
- package/themes/limited/theme.css +32 -0
- package/themes/limited/theme.json +105 -0
- /package/themes/{dutti → _base}/_containers.css +0 -0
- /package/themes/{dutti → _base}/_radios.css +0 -0
- /package/themes/{dutti → _base}/_switches.css +0 -0
- /package/themes/{dutti → _base}/components/_icons.css +0 -0
- /package/themes/{dutti → _base}/objects/_grid.css +0 -0
|
@@ -0,0 +1,1121 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="es">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Sistema de Theming Limited - Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="../output.css">
|
|
8
|
+
<link rel="stylesheet" href="limited.css">
|
|
9
|
+
<link rel="stylesheet" href="../guide-styles.css">
|
|
10
|
+
<style>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
/* Lenis Smooth Scroll - Solo para demo Dutti */
|
|
14
|
+
html.lenis {
|
|
15
|
+
height: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.lenis.lenis-smooth {
|
|
19
|
+
scroll-behavior: auto;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.lenis.lenis-smooth[data-lenis-prevent] {
|
|
23
|
+
overscroll-behavior: contain;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.lenis.lenis-stopped {
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
</style>
|
|
31
|
+
|
|
32
|
+
<!-- Lenis Smooth Scroll - Solo para demo Tema Dutti -->
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
|
|
37
|
+
<div class="guide-header">
|
|
38
|
+
<a href="../index.html" class="guide-logo" style="text-decoration:none;">HolyGrail5</a>
|
|
39
|
+
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
40
|
+
<nav class="guide-nav">
|
|
41
|
+
<a href="../index.html">Guía</a>
|
|
42
|
+
<a href="../componentes.html">Componentes</a>
|
|
43
|
+
<a href="../themes/dutti-demo.html">Tema Dutti</a>
|
|
44
|
+
<a href="../themes/limited-demo.html" class="active">Tema Limited</a>
|
|
45
|
+
<a href="../skills.html">Skills</a>
|
|
46
|
+
</nav>
|
|
47
|
+
<button class="guide-header-button" onclick="toggleSidebar()">☰</button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="guide-sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
52
|
+
|
|
53
|
+
<aside class="guide-sidebar">
|
|
54
|
+
<div class="guide-sidebar-header">
|
|
55
|
+
<div>HolyGrail5</div>
|
|
56
|
+
<p class="guide-sidebar-subtitle">Demo Tema Limited</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<nav class="guide-sidebar-nav">
|
|
60
|
+
<p class="guide-sidebar-title">Tema</p>
|
|
61
|
+
|
|
62
|
+
<a href="#theme-vars" class="guide-menu-item">Variables del tema</a>
|
|
63
|
+
|
|
64
|
+
<p class="guide-sidebar-title">Componentes</p>
|
|
65
|
+
|
|
66
|
+
<a href="#typography" class="guide-menu-item">Tipografía</a>
|
|
67
|
+
<a href="#buttons" class="guide-menu-item">Botones</a>
|
|
68
|
+
<a href="#inputs" class="guide-menu-item">Inputs</a>
|
|
69
|
+
<a href="#checkboxes" class="guide-menu-item">Checkboxes</a>
|
|
70
|
+
<a href="#radios" class="guide-menu-item">Radios</a>
|
|
71
|
+
<a href="#switches" class="guide-menu-item">Switches</a>
|
|
72
|
+
<a href="#forms" class="guide-menu-item">Formularios</a>
|
|
73
|
+
</nav>
|
|
74
|
+
</aside>
|
|
75
|
+
|
|
76
|
+
<script>
|
|
77
|
+
function toggleSidebar() {
|
|
78
|
+
const sidebar = document.querySelector('.guide-sidebar');
|
|
79
|
+
const overlay = document.querySelector('.guide-sidebar-overlay');
|
|
80
|
+
sidebar.classList.toggle('open');
|
|
81
|
+
overlay.classList.toggle('active');
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function closeSidebar() {
|
|
85
|
+
const sidebar = document.querySelector('.guide-sidebar');
|
|
86
|
+
const overlay = document.querySelector('.guide-sidebar-overlay');
|
|
87
|
+
sidebar.classList.remove('open');
|
|
88
|
+
overlay.classList.remove('active');
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Hacer funciones globales
|
|
92
|
+
window.toggleSidebar = toggleSidebar;
|
|
93
|
+
window.closeSidebar = closeSidebar;
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<div class="demo-container guide-main-content">
|
|
98
|
+
<h2 class="demo-title">Limited Theme</h2>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
<div class="demo-section-2">
|
|
102
|
+
<h3>¿Dónde se customiza el tema?</h3>
|
|
103
|
+
<p class="mb-16">
|
|
104
|
+
Limited se construye en <strong>dos capas</strong> sobre HolyGrail5:
|
|
105
|
+
</p>
|
|
106
|
+
|
|
107
|
+
<div class="mb-16">
|
|
108
|
+
<strong>1. Tokens base</strong> — <code>config.json</code> define la paleta, espaciados y tipografía compartidos. <code>npm run build</code> regenera <code>dist/output.css</code>.
|
|
109
|
+
</div>
|
|
110
|
+
<div class="mb-16">
|
|
111
|
+
<strong>2. Overrides del tema</strong> — <code>themes/limited/theme.json</code> declara los metadatos y overrides (paleta dorada, Suisse Works serif). <code>themes/limited/_variables.css</code> los materializa como CSS custom properties y mapea las variables de componente (ej. <code>--btn-primary-bg: var(--hg-color-primary)</code>).
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<p class="mb-24">
|
|
115
|
+
<code>themes/limited/theme.css</code> es el punto de entrada: importa todos los módulos del tema. Las variables tipográficas (<code>--hg-typo-font-family-*</code>) se redefinen para aplicar Suisse Works a titulares y texto corrido.
|
|
116
|
+
</p>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- BLOQUE DEL TEMA (meta + variables) generado en build a partir de themes/<tema>/theme.json -->
|
|
120
|
+
|
|
121
|
+
<style>
|
|
122
|
+
.hg-theme-meta {
|
|
123
|
+
margin-bottom: 32px;
|
|
124
|
+
padding: 20px 24px;
|
|
125
|
+
border-left: 4px solid var(--hg-color-primary, #000);
|
|
126
|
+
background: var(--hg-color-bg-light, #f0f0f0);
|
|
127
|
+
}
|
|
128
|
+
.hg-theme-meta h3 { margin: 0 0 4px; font-size: 22px; font-family: arial, sans-serif; }
|
|
129
|
+
.hg-theme-meta .hg-theme-meta-line {
|
|
130
|
+
font-size: 12px; color: var(--hg-color-dark-grey, #737373);
|
|
131
|
+
text-transform: uppercase; letter-spacing: 0.06em;
|
|
132
|
+
}
|
|
133
|
+
.hg-theme-meta p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
|
|
134
|
+
.hg-vars-group { margin: 0; }
|
|
135
|
+
.hg-vars-group h4 {
|
|
136
|
+
margin: 0 0 8px; font-family: arial, sans-serif; font-size: 14px;
|
|
137
|
+
text-transform: uppercase; letter-spacing: 0.06em;
|
|
138
|
+
color: var(--hg-color-dark-grey, #737373);
|
|
139
|
+
}
|
|
140
|
+
/* 3 columnas verticales manuales (grid), balanceadas por item count */
|
|
141
|
+
.hg-vars-columns {
|
|
142
|
+
display: grid;
|
|
143
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
144
|
+
gap: 32px;
|
|
145
|
+
font-family: arial, sans-serif;
|
|
146
|
+
font-size: 11px;
|
|
147
|
+
align-items: start;
|
|
148
|
+
}
|
|
149
|
+
@media (max-width: 960px) {
|
|
150
|
+
.hg-vars-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
151
|
+
}
|
|
152
|
+
@media (max-width: 600px) {
|
|
153
|
+
.hg-vars-columns { grid-template-columns: 1fr; }
|
|
154
|
+
}
|
|
155
|
+
.hg-vars-col {
|
|
156
|
+
display: flex;
|
|
157
|
+
flex-direction: column;
|
|
158
|
+
gap: 24px;
|
|
159
|
+
min-width: 0;
|
|
160
|
+
}
|
|
161
|
+
/* Lista de variables dentro del grupo: nombre izquierda, valor derecha */
|
|
162
|
+
.hg-vars-list {
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
}
|
|
166
|
+
.hg-vars-item {
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: space-between;
|
|
170
|
+
gap: 8px;
|
|
171
|
+
padding: 5px 0;
|
|
172
|
+
border-bottom: 1px solid var(--hg-color-middle-grey, #a9a9a9);
|
|
173
|
+
min-width: 0;
|
|
174
|
+
}
|
|
175
|
+
.hg-vars-item .hg-vars-name,
|
|
176
|
+
.hg-vars-item .hg-vars-value {
|
|
177
|
+
display: flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
min-width: 0;
|
|
180
|
+
}
|
|
181
|
+
.hg-vars-item .hg-vars-name { flex: 1 1 auto; }
|
|
182
|
+
.hg-vars-item .hg-vars-value { flex: 0 0 auto; justify-content: flex-end; text-align: right; }
|
|
183
|
+
.hg-vars-item code {
|
|
184
|
+
background: var(--hg-color-bg-light, #f0f0f0);
|
|
185
|
+
padding: 2px 5px;
|
|
186
|
+
border-radius: 3px;
|
|
187
|
+
font-size: 10.5px;
|
|
188
|
+
line-height: 1.35;
|
|
189
|
+
word-break: break-all;
|
|
190
|
+
white-space: normal;
|
|
191
|
+
}
|
|
192
|
+
.hg-vars-item .hg-vars-name code { color: #000; font-weight: 600; }
|
|
193
|
+
.hg-vars-item .hg-vars-value code { color: #333; }
|
|
194
|
+
.hg-vars-item.is-overridden .hg-vars-name code { color: var(--hg-color-feel-dark, #c94c07); }
|
|
195
|
+
.hg-vars-item .hg-vars-badge {
|
|
196
|
+
display: inline-block;
|
|
197
|
+
margin-left: 6px;
|
|
198
|
+
padding: 1px 5px;
|
|
199
|
+
font-size: 9px;
|
|
200
|
+
font-weight: 600;
|
|
201
|
+
letter-spacing: 0.04em;
|
|
202
|
+
text-transform: uppercase;
|
|
203
|
+
background: var(--hg-color-feel, #fb9962);
|
|
204
|
+
color: #fff;
|
|
205
|
+
border-radius: 2px;
|
|
206
|
+
}
|
|
207
|
+
.hg-vars-swatch {
|
|
208
|
+
display: inline-block; width: 12px; height: 12px;
|
|
209
|
+
border-radius: 3px; vertical-align: middle;
|
|
210
|
+
margin-left: 6px;
|
|
211
|
+
border: 1px solid var(--hg-color-middle-grey, #a9a9a9);
|
|
212
|
+
flex-shrink: 0;
|
|
213
|
+
order: 2;
|
|
214
|
+
}
|
|
215
|
+
/* Sección de colores semánticos: swatch al final de la fila, 18x18 */
|
|
216
|
+
.hg-vars-group-semantic .hg-vars-swatch {
|
|
217
|
+
width: 18px; height: 18px;
|
|
218
|
+
margin-right: 0;
|
|
219
|
+
margin-left: 8px;
|
|
220
|
+
order: 2;
|
|
221
|
+
}
|
|
222
|
+
.hg-vars-group-semantic .hg-vars-item { padding: 7px 0; }
|
|
223
|
+
.hg-vars-group-semantic .hg-vars-value { gap: 0; }
|
|
224
|
+
.hg-vars-empty { color: var(--hg-color-middle-grey, #a9a9a9); font-style: italic; padding: 12px; }
|
|
225
|
+
</style>
|
|
226
|
+
<div class="hg-theme-meta">
|
|
227
|
+
<div class="hg-theme-meta-line">limited · v1.0.0 · HolyGrail CSS</div>
|
|
228
|
+
<h3>Limited</h3>
|
|
229
|
+
<p>Tema de lujo cálido con paleta dorada, bronces y crema, y tipografía 100% serif: Suisse Works tanto en titulares como en texto corrido. Redefine los colores semánticos sobre la base HolyGrail5, manteniendo los componentVars mapeados a los tokens --hg-color-* para heredar automáticamente la paleta del tema.</p>
|
|
230
|
+
</div>
|
|
231
|
+
<section class="demo-section" id="theme-vars">
|
|
232
|
+
<h2 class="demo-title">Variables del tema</h2>
|
|
233
|
+
<p class="mb-24">
|
|
234
|
+
Definidas en <code>themes/limited/theme.json</code>. La fuente del CSS sigue siendo
|
|
235
|
+
<code>themes/limited/_variables.css</code>; este JSON sirve como manifiesto del tema y para que
|
|
236
|
+
la demo muestre tablas siempre coherentes con sus tokens.
|
|
237
|
+
</p>
|
|
238
|
+
<div class="hg-vars-columns">
|
|
239
|
+
<div class="hg-vars-col">
|
|
240
|
+
<div class="hg-vars-group hg-vars-group-semantic">
|
|
241
|
+
<h4>Colores semánticos <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(13)</span></h4>
|
|
242
|
+
<div class="hg-vars-list">
|
|
243
|
+
<div class="hg-vars-item">
|
|
244
|
+
<div class="hg-vars-name"><code>--hg-color-orange</code></div>
|
|
245
|
+
<div class="hg-vars-value"><code>#B75D0B</code><span class="hg-vars-swatch" style="background:#B75D0B" title="#B75D0B"></span></div>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="hg-vars-item">
|
|
248
|
+
<div class="hg-vars-name"><code>--hg-color-mustard</code></div>
|
|
249
|
+
<div class="hg-vars-value"><code>#FFE693</code><span class="hg-vars-swatch" style="background:#FFE693" title="#FFE693"></span></div>
|
|
250
|
+
</div>
|
|
251
|
+
<div class="hg-vars-item is-overridden">
|
|
252
|
+
<div class="hg-vars-name"><code>--hg-color-primary</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
253
|
+
<div class="hg-vars-value"><code>#1D1D1D</code><span class="hg-vars-swatch" style="background:#1D1D1D" title="#1D1D1D"></span></div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="hg-vars-item is-overridden">
|
|
256
|
+
<div class="hg-vars-name"><code>--hg-color-error</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
257
|
+
<div class="hg-vars-value"><code>#9B2A1E</code><span class="hg-vars-swatch" style="background:#9B2A1E" title="#9B2A1E"></span></div>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="hg-vars-item is-overridden">
|
|
260
|
+
<div class="hg-vars-name"><code>--hg-color-info</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
261
|
+
<div class="hg-vars-value"><code>#5B7FA1</code><span class="hg-vars-swatch" style="background:#5B7FA1" title="#5B7FA1"></span></div>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="hg-vars-item is-overridden">
|
|
264
|
+
<div class="hg-vars-name"><code>--hg-color-success</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
265
|
+
<div class="hg-vars-value"><code>#7A8D5F</code><span class="hg-vars-swatch" style="background:#7A8D5F" title="#7A8D5F"></span></div>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="hg-vars-item is-overridden">
|
|
268
|
+
<div class="hg-vars-name"><code>--hg-color-warning</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
269
|
+
<div class="hg-vars-value"><code>#D4A84B</code><span class="hg-vars-swatch" style="background:#D4A84B" title="#D4A84B"></span></div>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="hg-vars-item is-overridden">
|
|
272
|
+
<div class="hg-vars-name"><code>--hg-color-feel</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
273
|
+
<div class="hg-vars-value"><code>#A38A6B</code><span class="hg-vars-swatch" style="background:#A38A6B" title="#A38A6B"></span></div>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="hg-vars-item is-overridden">
|
|
276
|
+
<div class="hg-vars-name"><code>--hg-color-feel-dark</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
277
|
+
<div class="hg-vars-value"><code>#7A6346</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="hg-vars-item">
|
|
280
|
+
<div class="hg-vars-name"><code>--hg-color-silver</code></div>
|
|
281
|
+
<div class="hg-vars-value"><code>#87888D</code><span class="hg-vars-swatch" style="background:#87888D" title="#87888D"></span></div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="hg-vars-item">
|
|
284
|
+
<div class="hg-vars-name"><code>--hg-color-gold</code></div>
|
|
285
|
+
<div class="hg-vars-value"><code>#A38A6B</code><span class="hg-vars-swatch" style="background:#A38A6B" title="#A38A6B"></span></div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="hg-vars-item">
|
|
288
|
+
<div class="hg-vars-name"><code>--hg-color-platinum</code></div>
|
|
289
|
+
<div class="hg-vars-value"><code>#5B7FA1</code><span class="hg-vars-swatch" style="background:#5B7FA1" title="#5B7FA1"></span></div>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="hg-vars-item is-overridden">
|
|
292
|
+
<div class="hg-vars-name"><code>--hg-color-special</code><span class="hg-vars-badge" title="Sobrescrito por el tema">tema</span></div>
|
|
293
|
+
<div class="hg-vars-value"><code>#B99D6B</code><span class="hg-vars-swatch" style="background:#B99D6B" title="#B99D6B"></span></div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="hg-vars-group">
|
|
298
|
+
<h4>Componente: checkbox <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
|
|
299
|
+
<div class="hg-vars-list">
|
|
300
|
+
<div class="hg-vars-item">
|
|
301
|
+
<div class="hg-vars-name"><code>--checkbox-bg</code></div>
|
|
302
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="hg-vars-item">
|
|
305
|
+
<div class="hg-vars-name"><code>--checkbox-border</code></div>
|
|
306
|
+
<div class="hg-vars-value"><code>var(--hg-color-middle-grey)</code><span class="hg-vars-swatch" style="background:#a9a9a9" title="#a9a9a9"></span></div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="hg-vars-item">
|
|
309
|
+
<div class="hg-vars-name"><code>--checkbox-checked-bg</code></div>
|
|
310
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="hg-vars-item">
|
|
313
|
+
<div class="hg-vars-name"><code>--checkbox-checked-border</code></div>
|
|
314
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="hg-vars-group">
|
|
319
|
+
<h4>Componente: switch <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(3)</span></h4>
|
|
320
|
+
<div class="hg-vars-list">
|
|
321
|
+
<div class="hg-vars-item">
|
|
322
|
+
<div class="hg-vars-name"><code>--switch-bg</code></div>
|
|
323
|
+
<div class="hg-vars-value"><code>var(--hg-color-middle-grey)</code><span class="hg-vars-swatch" style="background:#a9a9a9" title="#a9a9a9"></span></div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="hg-vars-item">
|
|
326
|
+
<div class="hg-vars-name"><code>--switch-active-bg</code></div>
|
|
327
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel)</code><span class="hg-vars-swatch" style="background:#A38A6B" title="#A38A6B"></span></div>
|
|
328
|
+
</div>
|
|
329
|
+
<div class="hg-vars-item">
|
|
330
|
+
<div class="hg-vars-name"><code>--switch-thumb</code></div>
|
|
331
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="hg-vars-col">
|
|
337
|
+
<div class="hg-vars-group">
|
|
338
|
+
<h4>Componente: btn <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(21)</span></h4>
|
|
339
|
+
<div class="hg-vars-list">
|
|
340
|
+
<div class="hg-vars-item">
|
|
341
|
+
<div class="hg-vars-name"><code>--btn-primary-bg</code></div>
|
|
342
|
+
<div class="hg-vars-value"><code>var(--hg-color-primary)</code><span class="hg-vars-swatch" style="background:#1D1D1D" title="#1D1D1D"></span></div>
|
|
343
|
+
</div>
|
|
344
|
+
<div class="hg-vars-item">
|
|
345
|
+
<div class="hg-vars-name"><code>--btn-primary-color</code></div>
|
|
346
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
347
|
+
</div>
|
|
348
|
+
<div class="hg-vars-item">
|
|
349
|
+
<div class="hg-vars-name"><code>--btn-primary-hover-bg</code></div>
|
|
350
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="hg-vars-item">
|
|
353
|
+
<div class="hg-vars-name"><code>--btn-secondary-bg</code></div>
|
|
354
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel)</code><span class="hg-vars-swatch" style="background:#A38A6B" title="#A38A6B"></span></div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="hg-vars-item">
|
|
357
|
+
<div class="hg-vars-name"><code>--btn-secondary-color</code></div>
|
|
358
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="hg-vars-item">
|
|
361
|
+
<div class="hg-vars-name"><code>--btn-secondary-hover-bg</code></div>
|
|
362
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="hg-vars-item">
|
|
365
|
+
<div class="hg-vars-name"><code>--btn-outline-border</code></div>
|
|
366
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="hg-vars-item">
|
|
369
|
+
<div class="hg-vars-name"><code>--btn-outline-color</code></div>
|
|
370
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
371
|
+
</div>
|
|
372
|
+
<div class="hg-vars-item">
|
|
373
|
+
<div class="hg-vars-name"><code>--btn-outline-hover-bg</code></div>
|
|
374
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="hg-vars-item">
|
|
377
|
+
<div class="hg-vars-name"><code>--btn-outline-hover-color</code></div>
|
|
378
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="hg-vars-item">
|
|
381
|
+
<div class="hg-vars-name"><code>--btn-ghost-color</code></div>
|
|
382
|
+
<div class="hg-vars-value"><code>var(--hg-color-primary)</code><span class="hg-vars-swatch" style="background:#1D1D1D" title="#1D1D1D"></span></div>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="hg-vars-item">
|
|
385
|
+
<div class="hg-vars-name"><code>--btn-ghost-hover-bg</code></div>
|
|
386
|
+
<div class="hg-vars-value"><code>var(--hg-color-bg-cream)</code><span class="hg-vars-swatch" style="background:#F4F2ED" title="#F4F2ED"></span></div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="hg-vars-item">
|
|
389
|
+
<div class="hg-vars-name"><code>--btn-feel-bg</code></div>
|
|
390
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel)</code><span class="hg-vars-swatch" style="background:#A38A6B" title="#A38A6B"></span></div>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="hg-vars-item">
|
|
393
|
+
<div class="hg-vars-name"><code>--btn-feel-color</code></div>
|
|
394
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
395
|
+
</div>
|
|
396
|
+
<div class="hg-vars-item">
|
|
397
|
+
<div class="hg-vars-name"><code>--btn-feel-hover-bg</code></div>
|
|
398
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="hg-vars-item">
|
|
401
|
+
<div class="hg-vars-name"><code>--btn-padding-x-sm</code></div>
|
|
402
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-12)</code></div>
|
|
403
|
+
</div>
|
|
404
|
+
<div class="hg-vars-item">
|
|
405
|
+
<div class="hg-vars-name"><code>--btn-padding-y-sm</code></div>
|
|
406
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-8)</code></div>
|
|
407
|
+
</div>
|
|
408
|
+
<div class="hg-vars-item">
|
|
409
|
+
<div class="hg-vars-name"><code>--btn-padding-x-md</code></div>
|
|
410
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-16)</code></div>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="hg-vars-item">
|
|
413
|
+
<div class="hg-vars-name"><code>--btn-padding-y-md</code></div>
|
|
414
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-12)</code></div>
|
|
415
|
+
</div>
|
|
416
|
+
<div class="hg-vars-item">
|
|
417
|
+
<div class="hg-vars-name"><code>--btn-padding-x-lg</code></div>
|
|
418
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-24)</code></div>
|
|
419
|
+
</div>
|
|
420
|
+
<div class="hg-vars-item">
|
|
421
|
+
<div class="hg-vars-name"><code>--btn-padding-y-lg</code></div>
|
|
422
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-16)</code></div>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="hg-vars-group">
|
|
427
|
+
<h4>Design tokens <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
|
|
428
|
+
<div class="hg-vars-list">
|
|
429
|
+
<div class="hg-vars-item">
|
|
430
|
+
<div class="hg-vars-name"><code>--border-radius</code></div>
|
|
431
|
+
<div class="hg-vars-value"><code>0</code></div>
|
|
432
|
+
</div>
|
|
433
|
+
<div class="hg-vars-item">
|
|
434
|
+
<div class="hg-vars-name"><code>--border-width</code></div>
|
|
435
|
+
<div class="hg-vars-value"><code>1px</code></div>
|
|
436
|
+
</div>
|
|
437
|
+
<div class="hg-vars-item">
|
|
438
|
+
<div class="hg-vars-name"><code>--border-style</code></div>
|
|
439
|
+
<div class="hg-vars-value"><code>solid</code></div>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="hg-vars-item">
|
|
442
|
+
<div class="hg-vars-name"><code>--transition</code></div>
|
|
443
|
+
<div class="hg-vars-value"><code>all 0.3s ease</code></div>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="hg-vars-col">
|
|
449
|
+
<div class="hg-vars-group">
|
|
450
|
+
<h4>Componente: input <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(11)</span></h4>
|
|
451
|
+
<div class="hg-vars-list">
|
|
452
|
+
<div class="hg-vars-item">
|
|
453
|
+
<div class="hg-vars-name"><code>--input-border</code></div>
|
|
454
|
+
<div class="hg-vars-value"><code>var(--hg-color-middle-grey)</code><span class="hg-vars-swatch" style="background:#a9a9a9" title="#a9a9a9"></span></div>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="hg-vars-item">
|
|
457
|
+
<div class="hg-vars-name"><code>--input-border-focus</code></div>
|
|
458
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="hg-vars-item">
|
|
461
|
+
<div class="hg-vars-name"><code>--input-bg</code></div>
|
|
462
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
463
|
+
</div>
|
|
464
|
+
<div class="hg-vars-item">
|
|
465
|
+
<div class="hg-vars-name"><code>--input-color</code></div>
|
|
466
|
+
<div class="hg-vars-value"><code>var(--hg-color-primary)</code><span class="hg-vars-swatch" style="background:#1D1D1D" title="#1D1D1D"></span></div>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="hg-vars-item">
|
|
469
|
+
<div class="hg-vars-name"><code>--input-placeholder</code></div>
|
|
470
|
+
<div class="hg-vars-value"><code>var(--hg-color-middle-grey)</code><span class="hg-vars-swatch" style="background:#a9a9a9" title="#a9a9a9"></span></div>
|
|
471
|
+
</div>
|
|
472
|
+
<div class="hg-vars-item">
|
|
473
|
+
<div class="hg-vars-name"><code>--input-error-border</code></div>
|
|
474
|
+
<div class="hg-vars-value"><code>var(--hg-color-error)</code><span class="hg-vars-swatch" style="background:#9B2A1E" title="#9B2A1E"></span></div>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="hg-vars-item">
|
|
477
|
+
<div class="hg-vars-name"><code>--input-success-border</code></div>
|
|
478
|
+
<div class="hg-vars-value"><code>var(--hg-color-success)</code><span class="hg-vars-swatch" style="background:#7A8D5F" title="#7A8D5F"></span></div>
|
|
479
|
+
</div>
|
|
480
|
+
<div class="hg-vars-item">
|
|
481
|
+
<div class="hg-vars-name"><code>--input-warning-border</code></div>
|
|
482
|
+
<div class="hg-vars-value"><code>var(--hg-color-warning)</code><span class="hg-vars-swatch" style="background:#D4A84B" title="#D4A84B"></span></div>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="hg-vars-item">
|
|
485
|
+
<div class="hg-vars-name"><code>--input-padding-x</code></div>
|
|
486
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-16)</code></div>
|
|
487
|
+
</div>
|
|
488
|
+
<div class="hg-vars-item">
|
|
489
|
+
<div class="hg-vars-name"><code>--input-padding-y</code></div>
|
|
490
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-12)</code></div>
|
|
491
|
+
</div>
|
|
492
|
+
<div class="hg-vars-item">
|
|
493
|
+
<div class="hg-vars-name"><code>--input-gap</code></div>
|
|
494
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-8)</code></div>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
<div class="hg-vars-group">
|
|
499
|
+
<h4>Componente: label <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(2)</span></h4>
|
|
500
|
+
<div class="hg-vars-list">
|
|
501
|
+
<div class="hg-vars-item">
|
|
502
|
+
<div class="hg-vars-name"><code>--label-color</code></div>
|
|
503
|
+
<div class="hg-vars-value"><code>var(--hg-color-primary)</code><span class="hg-vars-swatch" style="background:#1D1D1D" title="#1D1D1D"></span></div>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="hg-vars-item">
|
|
506
|
+
<div class="hg-vars-name"><code>--label-required</code></div>
|
|
507
|
+
<div class="hg-vars-value"><code>var(--hg-color-error)</code><span class="hg-vars-swatch" style="background:#9B2A1E" title="#9B2A1E"></span></div>
|
|
508
|
+
</div>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
<div class="hg-vars-group">
|
|
512
|
+
<h4>Componente: radio <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
|
|
513
|
+
<div class="hg-vars-list">
|
|
514
|
+
<div class="hg-vars-item">
|
|
515
|
+
<div class="hg-vars-name"><code>--radio-bg</code></div>
|
|
516
|
+
<div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="hg-vars-item">
|
|
519
|
+
<div class="hg-vars-name"><code>--radio-border</code></div>
|
|
520
|
+
<div class="hg-vars-value"><code>var(--hg-color-middle-grey)</code><span class="hg-vars-swatch" style="background:#a9a9a9" title="#a9a9a9"></span></div>
|
|
521
|
+
</div>
|
|
522
|
+
<div class="hg-vars-item">
|
|
523
|
+
<div class="hg-vars-name"><code>--radio-checked-bg</code></div>
|
|
524
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="hg-vars-item">
|
|
527
|
+
<div class="hg-vars-name"><code>--radio-checked-border</code></div>
|
|
528
|
+
<div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
<div class="hg-vars-group">
|
|
533
|
+
<h4>Componente: form-group <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(1)</span></h4>
|
|
534
|
+
<div class="hg-vars-list">
|
|
535
|
+
<div class="hg-vars-item">
|
|
536
|
+
<div class="hg-vars-name"><code>--form-group-gap</code></div>
|
|
537
|
+
<div class="hg-vars-value"><code>var(--hg-spacing-16)</code></div>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
</section>
|
|
544
|
+
|
|
545
|
+
<!-- TIPOGRAFÍA (tabla generada en build a partir de config.json → typo) -->
|
|
546
|
+
<section class="demo-section" id="typography">
|
|
547
|
+
<h2 class="demo-title">Tipografía</h2>
|
|
548
|
+
<p class="mb-24">
|
|
549
|
+
Cada fila usa la clase real generada en <code>dist/output.css</code> a partir de <code>config.json → typo</code>.
|
|
550
|
+
La columna <em>Preview</em> aplica la clase tal cual, así puedes comparar el valor numérico con el render en vivo.
|
|
551
|
+
</p>
|
|
552
|
+
|
|
553
|
+
<style>
|
|
554
|
+
.hg-typo-table-wrap { overflow-x: auto; }
|
|
555
|
+
.hg-typo-table {
|
|
556
|
+
width: 100%;
|
|
557
|
+
border-collapse: collapse;
|
|
558
|
+
font-family: arial, sans-serif;
|
|
559
|
+
font-size: 13px;
|
|
560
|
+
}
|
|
561
|
+
.hg-typo-table th,
|
|
562
|
+
.hg-typo-table td {
|
|
563
|
+
text-align: left;
|
|
564
|
+
padding: 10px 12px;
|
|
565
|
+
border-bottom: 1px solid var(--hg-color-middle-grey, #a9a9a9);
|
|
566
|
+
vertical-align: middle;
|
|
567
|
+
}
|
|
568
|
+
.hg-typo-table thead th {
|
|
569
|
+
font-weight: 700;
|
|
570
|
+
font-size: 11px;
|
|
571
|
+
text-transform: uppercase;
|
|
572
|
+
letter-spacing: 0.04em;
|
|
573
|
+
color: var(--hg-color-dark-grey, #737373);
|
|
574
|
+
border-bottom: 2px solid var(--hg-color-middle-grey, #a9a9a9);
|
|
575
|
+
background: var(--hg-color-bg-light, #f0f0f0);
|
|
576
|
+
}
|
|
577
|
+
.hg-typo-table tbody tr:hover { background: var(--hg-color-bg-light, #f0f0f0); }
|
|
578
|
+
.hg-typo-table code {
|
|
579
|
+
background: var(--hg-color-bg-light, #f0f0f0);
|
|
580
|
+
padding: 2px 6px;
|
|
581
|
+
border-radius: 3px;
|
|
582
|
+
font-size: 12px;
|
|
583
|
+
}
|
|
584
|
+
.hg-typo-preview {
|
|
585
|
+
min-width: 180px;
|
|
586
|
+
color: var(--hg-color-primary, #1d1d1d);
|
|
587
|
+
}
|
|
588
|
+
.hg-typo-num { font-weight: 700; }
|
|
589
|
+
.hg-typo-meta { color: var(--hg-color-dark-grey, #737373); font-size: 12px; }
|
|
590
|
+
.hg-typo-empty { color: var(--hg-color-middle-grey, #a9a9a9); }
|
|
591
|
+
</style>
|
|
592
|
+
|
|
593
|
+
<div class="hg-typo-table-wrap">
|
|
594
|
+
<table class="hg-typo-table">
|
|
595
|
+
<thead>
|
|
596
|
+
<tr>
|
|
597
|
+
<th>Preview</th>
|
|
598
|
+
<th>Clase</th>
|
|
599
|
+
<th>Font family</th>
|
|
600
|
+
<th>Weight</th>
|
|
601
|
+
<th>Mobile</th>
|
|
602
|
+
<th>Desktop</th>
|
|
603
|
+
<th>Line height</th>
|
|
604
|
+
<th>Letter spacing</th>
|
|
605
|
+
<th>Text transform</th>
|
|
606
|
+
</tr>
|
|
607
|
+
</thead>
|
|
608
|
+
<tbody>
|
|
609
|
+
<tr>
|
|
610
|
+
<td class="hg-typo-preview"><span class="title-xxl">Aa Bb Cc 123</span></td>
|
|
611
|
+
<td><code>.title-xxl</code></td>
|
|
612
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
613
|
+
<td>300</td>
|
|
614
|
+
<td><span class="hg-typo-num">24px</span></td>
|
|
615
|
+
<td><span class="hg-typo-num">24px</span></td>
|
|
616
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
617
|
+
<td>—</td>
|
|
618
|
+
<td>—</td>
|
|
619
|
+
</tr>
|
|
620
|
+
<tr>
|
|
621
|
+
<td class="hg-typo-preview"><span class="h2">Aa Bb Cc 123</span></td>
|
|
622
|
+
<td><code>.h2</code></td>
|
|
623
|
+
<td><code>primary-bold</code> <span class="hg-typo-meta">"suisse-works-bold", Georgia, "Times New Roman", serif</span></td>
|
|
624
|
+
<td>600</td>
|
|
625
|
+
<td><span class="hg-typo-num">18px</span></td>
|
|
626
|
+
<td><span class="hg-typo-num">24px</span></td>
|
|
627
|
+
<td><span class="hg-typo-num">1.2</span></td>
|
|
628
|
+
<td>0rem</td>
|
|
629
|
+
<td>none</td>
|
|
630
|
+
</tr>
|
|
631
|
+
<tr>
|
|
632
|
+
<td class="hg-typo-preview"><span class="title-l-b">Aa Bb Cc 123</span></td>
|
|
633
|
+
<td><code>.title-l-b</code></td>
|
|
634
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
635
|
+
<td>300</td>
|
|
636
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
637
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
638
|
+
<td><span class="hg-typo-num">1.4</span></td>
|
|
639
|
+
<td>—</td>
|
|
640
|
+
<td>—</td>
|
|
641
|
+
</tr>
|
|
642
|
+
<tr>
|
|
643
|
+
<td class="hg-typo-preview"><span class="title-l">Aa Bb Cc 123</span></td>
|
|
644
|
+
<td><code>.title-l</code></td>
|
|
645
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
646
|
+
<td>100</td>
|
|
647
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
648
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
649
|
+
<td><span class="hg-typo-num">1.4</span></td>
|
|
650
|
+
<td>0.16em</td>
|
|
651
|
+
<td>uppercase</td>
|
|
652
|
+
</tr>
|
|
653
|
+
<tr>
|
|
654
|
+
<td class="hg-typo-preview"><span class="title-m">Aa Bb Cc 123</span></td>
|
|
655
|
+
<td><code>.title-m</code></td>
|
|
656
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
657
|
+
<td>100</td>
|
|
658
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
659
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
660
|
+
<td><span class="hg-typo-num">1.4</span></td>
|
|
661
|
+
<td>0.16em</td>
|
|
662
|
+
<td>—</td>
|
|
663
|
+
</tr>
|
|
664
|
+
<tr>
|
|
665
|
+
<td class="hg-typo-preview"><span class="title-s-b">Aa Bb Cc 123</span></td>
|
|
666
|
+
<td><code>.title-s-b</code></td>
|
|
667
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
668
|
+
<td>300</td>
|
|
669
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
670
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
671
|
+
<td><span class="hg-typo-num">1.4</span></td>
|
|
672
|
+
<td>0.16em</td>
|
|
673
|
+
<td>—</td>
|
|
674
|
+
</tr>
|
|
675
|
+
<tr>
|
|
676
|
+
<td class="hg-typo-preview"><span class="title-s">Aa Bb Cc 123</span></td>
|
|
677
|
+
<td><code>.title-s</code></td>
|
|
678
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
679
|
+
<td>100</td>
|
|
680
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
681
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
682
|
+
<td><span class="hg-typo-num">1.4</span></td>
|
|
683
|
+
<td>0.16em</td>
|
|
684
|
+
<td>uppercase</td>
|
|
685
|
+
</tr>
|
|
686
|
+
<tr>
|
|
687
|
+
<td class="hg-typo-preview"><span class="text-l">Aa Bb Cc 123</span></td>
|
|
688
|
+
<td><code>.text-l</code></td>
|
|
689
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
690
|
+
<td>100</td>
|
|
691
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
692
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
693
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
694
|
+
<td>0.04em</td>
|
|
695
|
+
<td>—</td>
|
|
696
|
+
</tr>
|
|
697
|
+
<tr>
|
|
698
|
+
<td class="hg-typo-preview"><span class="text-m">Aa Bb Cc 123</span></td>
|
|
699
|
+
<td><code>.text-m</code></td>
|
|
700
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
701
|
+
<td>100</td>
|
|
702
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
703
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
704
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
705
|
+
<td>0.04em</td>
|
|
706
|
+
<td>—</td>
|
|
707
|
+
</tr>
|
|
708
|
+
<tr>
|
|
709
|
+
<td class="hg-typo-preview"><span class="p-tag">Aa Bb Cc 123</span></td>
|
|
710
|
+
<td><code>.p-tag</code></td>
|
|
711
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
712
|
+
<td>100</td>
|
|
713
|
+
<td><span class="hg-typo-num">9px</span></td>
|
|
714
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
715
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
716
|
+
<td>0.16em</td>
|
|
717
|
+
<td>—</td>
|
|
718
|
+
</tr>
|
|
719
|
+
<tr>
|
|
720
|
+
<td class="hg-typo-preview"><span class="hg-body-l">Aa Bb Cc 123</span></td>
|
|
721
|
+
<td><code>.hg-body-l</code></td>
|
|
722
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
723
|
+
<td>100</td>
|
|
724
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
725
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
726
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
727
|
+
<td>0.04em</td>
|
|
728
|
+
<td>—</td>
|
|
729
|
+
</tr>
|
|
730
|
+
<tr>
|
|
731
|
+
<td class="hg-typo-preview"><span class="hg-body-l-b">Aa Bb Cc 123</span></td>
|
|
732
|
+
<td><code>.hg-body-l-b</code></td>
|
|
733
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
734
|
+
<td>300</td>
|
|
735
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
736
|
+
<td><span class="hg-typo-num">13px</span></td>
|
|
737
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
738
|
+
<td>0.04em</td>
|
|
739
|
+
<td>—</td>
|
|
740
|
+
</tr>
|
|
741
|
+
<tr>
|
|
742
|
+
<td class="hg-typo-preview"><span class="hg-body-m">Aa Bb Cc 123</span></td>
|
|
743
|
+
<td><code>.hg-body-m</code></td>
|
|
744
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
745
|
+
<td>100</td>
|
|
746
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
747
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
748
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
749
|
+
<td>0.04em</td>
|
|
750
|
+
<td>—</td>
|
|
751
|
+
</tr>
|
|
752
|
+
<tr>
|
|
753
|
+
<td class="hg-typo-preview"><span class="hg-body-m-b">Aa Bb Cc 123</span></td>
|
|
754
|
+
<td><code>.hg-body-m-b</code></td>
|
|
755
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
756
|
+
<td>300</td>
|
|
757
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
758
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
759
|
+
<td><span class="hg-typo-num">1.5</span></td>
|
|
760
|
+
<td>0.04em</td>
|
|
761
|
+
<td>—</td>
|
|
762
|
+
</tr>
|
|
763
|
+
<tr>
|
|
764
|
+
<td class="hg-typo-preview"><span class="label-m">Aa Bb Cc 123</span></td>
|
|
765
|
+
<td><code>.label-m</code></td>
|
|
766
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
767
|
+
<td>100</td>
|
|
768
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
769
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
770
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
771
|
+
<td>0.16em</td>
|
|
772
|
+
<td>uppercase</td>
|
|
773
|
+
</tr>
|
|
774
|
+
<tr>
|
|
775
|
+
<td class="hg-typo-preview"><span class="label-m-b">Aa Bb Cc 123</span></td>
|
|
776
|
+
<td><code>.label-m-b</code></td>
|
|
777
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
778
|
+
<td>300</td>
|
|
779
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
780
|
+
<td><span class="hg-typo-num">12px</span></td>
|
|
781
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
782
|
+
<td>0.16em</td>
|
|
783
|
+
<td>uppercase</td>
|
|
784
|
+
</tr>
|
|
785
|
+
<tr>
|
|
786
|
+
<td class="hg-typo-preview"><span class="label-s">Aa Bb Cc 123</span></td>
|
|
787
|
+
<td><code>.label-s</code></td>
|
|
788
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
789
|
+
<td>100</td>
|
|
790
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
791
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
792
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
793
|
+
<td>0.06em</td>
|
|
794
|
+
<td>uppercase</td>
|
|
795
|
+
</tr>
|
|
796
|
+
<tr>
|
|
797
|
+
<td class="hg-typo-preview"><span class="label-s-b">Aa Bb Cc 123</span></td>
|
|
798
|
+
<td><code>.label-s-b</code></td>
|
|
799
|
+
<td><code>primary-light</code> <span class="hg-typo-meta">"suisse-works-regular", Georgia, "Times New Roman", serif</span></td>
|
|
800
|
+
<td>300</td>
|
|
801
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
802
|
+
<td><span class="hg-typo-num">10px</span></td>
|
|
803
|
+
<td><span class="hg-typo-num">1</span></td>
|
|
804
|
+
<td>0.06em</td>
|
|
805
|
+
<td>uppercase</td>
|
|
806
|
+
</tr>
|
|
807
|
+
</tbody>
|
|
808
|
+
</table>
|
|
809
|
+
</div>
|
|
810
|
+
</section>
|
|
811
|
+
|
|
812
|
+
<!-- BOTONES -->
|
|
813
|
+
<section class="demo-section" id="buttons">
|
|
814
|
+
<h2 class="demo-title">Botones</h2>
|
|
815
|
+
|
|
816
|
+
<h3 class="demo-subtitle">Variantes</h3>
|
|
817
|
+
<div class="demo-grid">
|
|
818
|
+
<div class="demo-item">
|
|
819
|
+
<button class="btn btn-primary">Primary</button>
|
|
820
|
+
<div class="demo-code">.btn .btn-primary</div>
|
|
821
|
+
</div>
|
|
822
|
+
<div class="demo-item">
|
|
823
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
824
|
+
<div class="demo-code">.btn .btn-secondary</div>
|
|
825
|
+
</div>
|
|
826
|
+
<div class="demo-item">
|
|
827
|
+
<button class="btn btn-tertiary">Tertiary</button>
|
|
828
|
+
<div class="demo-code">.btn .btn-tertiary</div>
|
|
829
|
+
</div>
|
|
830
|
+
<div class="demo-item">
|
|
831
|
+
<button class="btn btn-label-m">Label M</button>
|
|
832
|
+
<div class="demo-code">.btn .btn-label-m</div>
|
|
833
|
+
</div>
|
|
834
|
+
<div class="demo-item">
|
|
835
|
+
<button class="btn btn-link">Link</button>
|
|
836
|
+
<div class="demo-code">.btn .btn-link</div>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="demo-item">
|
|
839
|
+
<button class="btn btn-badge">Badge</button>
|
|
840
|
+
<div class="demo-code">.btn .btn-badge</div>
|
|
841
|
+
</div>
|
|
842
|
+
|
|
843
|
+
<div class="demo-item">
|
|
844
|
+
<button class="btn btn-primary" disabled>Disabled</button>
|
|
845
|
+
<div class="demo-code">.btn[disabled]</div>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
|
|
849
|
+
<h3 class="demo-subtitle">Tamaños</h3>
|
|
850
|
+
<div class="demo-grid">
|
|
851
|
+
<div class="demo-item">
|
|
852
|
+
<button class="btn btn-primary btn-sm">Small</button>
|
|
853
|
+
<div class="demo-code">.btn-sm</div>
|
|
854
|
+
</div>
|
|
855
|
+
<div class="demo-item">
|
|
856
|
+
<button class="btn btn-primary btn-md">Medium</button>
|
|
857
|
+
<div class="demo-code">.btn-md</div>
|
|
858
|
+
</div>
|
|
859
|
+
<div class="demo-item">
|
|
860
|
+
<button class="btn btn-primary btn-lg">Large</button>
|
|
861
|
+
<div class="demo-code">.btn-lg</div>
|
|
862
|
+
</div>
|
|
863
|
+
</div>
|
|
864
|
+
|
|
865
|
+
<h3 class="demo-subtitle">Ancho completo</h3>
|
|
866
|
+
<div class="demo-item">
|
|
867
|
+
<button class="btn btn-primary btn-md btn-full">Botón ancho completo</button>
|
|
868
|
+
<div class="demo-code">.btn-full</div>
|
|
869
|
+
</div>
|
|
870
|
+
</section>
|
|
871
|
+
|
|
872
|
+
<!-- INPUTS -->
|
|
873
|
+
<section class="demo-section" id="inputs">
|
|
874
|
+
<h2 class="demo-title">Inputs</h2>
|
|
875
|
+
|
|
876
|
+
<h3 class="demo-subtitle">Tipos básicos</h3>
|
|
877
|
+
<div class="demo-grid">
|
|
878
|
+
<div class="demo-item">
|
|
879
|
+
<div class="form-input-label-2">
|
|
880
|
+
<input type="text" id="input-text" class="input" placeholder="Escribe algo...">
|
|
881
|
+
<label for="input-text">Texto</label>
|
|
882
|
+
</div>
|
|
883
|
+
<div class="demo-code">.input</div>
|
|
884
|
+
</div>
|
|
885
|
+
<div class="demo-item">
|
|
886
|
+
<div class="form-input-label-2">
|
|
887
|
+
<input type="email" id="input-email" class="input" placeholder="email@ejemplo.com">
|
|
888
|
+
<label for="input-email">Email</label>
|
|
889
|
+
</div>
|
|
890
|
+
<div class="demo-code">type="email"</div>
|
|
891
|
+
</div>
|
|
892
|
+
<div class="demo-item">
|
|
893
|
+
<div class="form-input-label-2">
|
|
894
|
+
<input type="password" id="input-password" class="input" placeholder="••••••••">
|
|
895
|
+
<label for="input-password">Contraseña</label>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="demo-code">type="password"</div>
|
|
898
|
+
</div>
|
|
899
|
+
<div class="demo-item">
|
|
900
|
+
<div class="form-input-label-2">
|
|
901
|
+
<input type="number" id="input-number" class="input" placeholder="123">
|
|
902
|
+
<label for="input-number">Número</label>
|
|
903
|
+
</div>
|
|
904
|
+
<div class="demo-code">type="number"</div>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
907
|
+
|
|
908
|
+
<h3 class="demo-subtitle">Estados</h3>
|
|
909
|
+
<div class="demo-grid">
|
|
910
|
+
<div class="demo-item">
|
|
911
|
+
<div class="form-input-label-2">
|
|
912
|
+
<input type="text" id="input-error" class="input input-error" value="Valor inválido" placeholder=" ">
|
|
913
|
+
<label for="input-error">Error</label>
|
|
914
|
+
</div>
|
|
915
|
+
<span class="helper-text helper-text-error">Este campo tiene un error</span>
|
|
916
|
+
<div class="demo-code">.input-error</div>
|
|
917
|
+
</div>
|
|
918
|
+
<div class="demo-item">
|
|
919
|
+
<div class="form-input-label-2">
|
|
920
|
+
<input type="text" id="input-success" class="input input-success" value="Valor válido" placeholder=" ">
|
|
921
|
+
<label for="input-success">Success</label>
|
|
922
|
+
</div>
|
|
923
|
+
<span class="helper-text helper-text-success">Campo válido</span>
|
|
924
|
+
<div class="demo-code">.input-success</div>
|
|
925
|
+
</div>
|
|
926
|
+
<div class="demo-item">
|
|
927
|
+
<div class="form-input-label-2">
|
|
928
|
+
<input type="text" id="input-warning" class="input input-warning" value="Atención" placeholder=" ">
|
|
929
|
+
<label for="input-warning">Warning</label>
|
|
930
|
+
</div>
|
|
931
|
+
<span class="helper-text helper-text-warning">Revisa este campo</span>
|
|
932
|
+
<div class="demo-code">.input-warning</div>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="demo-item">
|
|
935
|
+
<div class="form-input-label-2">
|
|
936
|
+
<input type="text" id="input-disabled" class="input" value="No editable" placeholder=" " disabled>
|
|
937
|
+
<label for="input-disabled">Disabled</label>
|
|
938
|
+
</div>
|
|
939
|
+
<div class="demo-code">input[disabled]</div>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
</section>
|
|
943
|
+
|
|
944
|
+
|
|
945
|
+
<!-- CHECKBOXES -->
|
|
946
|
+
<section class="demo-section" id="checkboxes">
|
|
947
|
+
<h2 class="demo-title">Checkboxes</h2>
|
|
948
|
+
|
|
949
|
+
<div class="demo-grid">
|
|
950
|
+
<div class="demo-item">
|
|
951
|
+
<label class="checkbox">
|
|
952
|
+
<input type="checkbox">
|
|
953
|
+
<span class="checkbox-indicator">
|
|
954
|
+
<svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
|
|
955
|
+
<path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
|
|
956
|
+
</svg>
|
|
957
|
+
</span>
|
|
958
|
+
<span class="checkbox-label">Checkbox sin marcar</span>
|
|
959
|
+
</label>
|
|
960
|
+
<div class="demo-code">.checkbox</div>
|
|
961
|
+
</div>
|
|
962
|
+
<div class="demo-item">
|
|
963
|
+
<label class="checkbox">
|
|
964
|
+
<input type="checkbox" checked>
|
|
965
|
+
<span class="checkbox-indicator">
|
|
966
|
+
<svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
|
|
967
|
+
<path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
|
|
968
|
+
</svg>
|
|
969
|
+
</span>
|
|
970
|
+
<span class="checkbox-label">Checkbox marcado</span>
|
|
971
|
+
</label>
|
|
972
|
+
<div class="demo-code">input[checked]</div>
|
|
973
|
+
</div>
|
|
974
|
+
<div class="demo-item">
|
|
975
|
+
<label class="checkbox">
|
|
976
|
+
<input type="checkbox" disabled>
|
|
977
|
+
<span class="checkbox-indicator">
|
|
978
|
+
<svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
|
|
979
|
+
<path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
|
|
980
|
+
</svg>
|
|
981
|
+
</span>
|
|
982
|
+
<span class="checkbox-label">Checkbox disabled</span>
|
|
983
|
+
</label>
|
|
984
|
+
<div class="demo-code">input[disabled]</div>
|
|
985
|
+
</div>
|
|
986
|
+
</div>
|
|
987
|
+
</section>
|
|
988
|
+
|
|
989
|
+
<!-- RADIOS -->
|
|
990
|
+
<section class="demo-section" id="radios">
|
|
991
|
+
<h2 class="demo-title">Radios</h2>
|
|
992
|
+
|
|
993
|
+
<div class="demo-grid">
|
|
994
|
+
<div class="demo-item">
|
|
995
|
+
<div class="checkbox-radio">
|
|
996
|
+
<input id="radio_1_lim" name="gender_lim" type="radio" value="F" />
|
|
997
|
+
<label for="radio_1_lim">
|
|
998
|
+
<i class="ico-radio"></i>
|
|
999
|
+
<span class="title-m">checkbox-radio</span>
|
|
1000
|
+
</label>
|
|
1001
|
+
</div>
|
|
1002
|
+
<div class="checkbox-radio">
|
|
1003
|
+
<input id="radio_2_lim" name="gender_lim" type="radio" value="M" />
|
|
1004
|
+
<label for="radio_2_lim">
|
|
1005
|
+
<i class="ico-radio"></i>
|
|
1006
|
+
<span class="title-m">checkbox-radio</span>
|
|
1007
|
+
</label>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="demo-code">.checkbox-radio</div>
|
|
1010
|
+
</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
</section>
|
|
1013
|
+
|
|
1014
|
+
<!-- SWITCHES -->
|
|
1015
|
+
<section class="demo-section" id="switches">
|
|
1016
|
+
<h2 class="demo-title">Switches / Toggles</h2>
|
|
1017
|
+
|
|
1018
|
+
<h3 class="demo-subtitle">Checkbox-item-2</h3>
|
|
1019
|
+
<div class="demo-grid">
|
|
1020
|
+
<div class="demo-item">
|
|
1021
|
+
<div class="checkbox-item-2">
|
|
1022
|
+
<input id="checkbox18_lim" name="checkbox18_lim" type="checkbox" />
|
|
1023
|
+
<label for="checkbox18_lim">
|
|
1024
|
+
<div class="checkbox-circle"></div>
|
|
1025
|
+
<span class="theta">checkbox-item-2</span>
|
|
1026
|
+
</label>
|
|
1027
|
+
</div>
|
|
1028
|
+
<div class="demo-code">.checkbox-item-2</div>
|
|
1029
|
+
</div>
|
|
1030
|
+
<div class="demo-item">
|
|
1031
|
+
<div class="checkbox-item-2">
|
|
1032
|
+
<input id="checkbox19_lim" name="checkbox19_lim" type="checkbox" checked />
|
|
1033
|
+
<label for="checkbox19_lim">
|
|
1034
|
+
<div class="checkbox-circle"></div>
|
|
1035
|
+
<span class="theta">checkbox-item-2 activado</span>
|
|
1036
|
+
</label>
|
|
1037
|
+
</div>
|
|
1038
|
+
<div class="demo-code">input[checked]</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
<div class="demo-item">
|
|
1041
|
+
<div class="checkbox-item-2">
|
|
1042
|
+
<input id="checkbox20_lim" name="checkbox20_lim" type="checkbox" disabled />
|
|
1043
|
+
<label for="checkbox20_lim">
|
|
1044
|
+
<div class="checkbox-circle"></div>
|
|
1045
|
+
<span class="theta">checkbox-item-2 disabled</span>
|
|
1046
|
+
</label>
|
|
1047
|
+
</div>
|
|
1048
|
+
<div class="demo-code">input[disabled]</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
<div class="demo-item">
|
|
1051
|
+
<div class="checkbox-item-2 is-error">
|
|
1052
|
+
<input id="checkbox21_lim" name="checkbox21_lim" type="checkbox" />
|
|
1053
|
+
<label for="checkbox21_lim">
|
|
1054
|
+
<div class="checkbox-circle"></div>
|
|
1055
|
+
<span class="theta">checkbox-item-2 error</span>
|
|
1056
|
+
</label>
|
|
1057
|
+
</div>
|
|
1058
|
+
<div class="demo-code">.is-error</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
</div>
|
|
1061
|
+
</section>
|
|
1062
|
+
|
|
1063
|
+
</div>
|
|
1064
|
+
|
|
1065
|
+
<script>
|
|
1066
|
+
// Inicializar Lenis Smooth Scroll - Solo para demo Tema Dutti
|
|
1067
|
+
const lenis = new Lenis({
|
|
1068
|
+
duration: 1.2,
|
|
1069
|
+
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
|
1070
|
+
direction: 'vertical',
|
|
1071
|
+
gestureDirection: 'vertical',
|
|
1072
|
+
smooth: true,
|
|
1073
|
+
mouseMultiplier: 1,
|
|
1074
|
+
smoothTouch: false,
|
|
1075
|
+
touchMultiplier: 2,
|
|
1076
|
+
infinite: false,
|
|
1077
|
+
});
|
|
1078
|
+
|
|
1079
|
+
// Hacer Lenis global para que esté disponible en otros scripts
|
|
1080
|
+
window.lenis = lenis;
|
|
1081
|
+
|
|
1082
|
+
function raf(time) {
|
|
1083
|
+
lenis.raf(time);
|
|
1084
|
+
requestAnimationFrame(raf);
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
requestAnimationFrame(raf);
|
|
1088
|
+
|
|
1089
|
+
// Manejar clic en menú para scroll suave (después de que Lenis esté inicializado)
|
|
1090
|
+
// Usar setTimeout para asegurar que el DOM esté completamente cargado
|
|
1091
|
+
setTimeout(function() {
|
|
1092
|
+
const menuItems = document.querySelectorAll('.guide-menu-item[href^="#"]');
|
|
1093
|
+
|
|
1094
|
+
menuItems.forEach(item => {
|
|
1095
|
+
item.addEventListener('click', (e) => {
|
|
1096
|
+
const href = item.getAttribute('href');
|
|
1097
|
+
|
|
1098
|
+
// Solo procesar enlaces internos (que empiezan con #)
|
|
1099
|
+
if (href && href.startsWith('#')) {
|
|
1100
|
+
e.preventDefault();
|
|
1101
|
+
const targetId = href.substring(1); // Remover el #
|
|
1102
|
+
const targetSection = document.getElementById(targetId);
|
|
1103
|
+
|
|
1104
|
+
if (targetSection) {
|
|
1105
|
+
const offset = 80; // Offset para compensar header
|
|
1106
|
+
|
|
1107
|
+
// Usar Lenis para scroll suave
|
|
1108
|
+
lenis.scrollTo(targetSection, { offset: -offset });
|
|
1109
|
+
|
|
1110
|
+
// Cerrar sidebar después de hacer clic
|
|
1111
|
+
if (typeof closeSidebar === 'function') {
|
|
1112
|
+
closeSidebar();
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
});
|
|
1117
|
+
});
|
|
1118
|
+
}, 100);
|
|
1119
|
+
</script>
|
|
1120
|
+
</body>
|
|
1121
|
+
</html>
|