@jotis-me/tokens 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -2
- package/dist/fonts/BricolageGrotesque-Variable-latin-ext.woff2 +0 -0
- package/dist/fonts/BricolageGrotesque-Variable-latin.woff2 +0 -0
- package/dist/fonts/Geist-Variable-Italic.woff2 +0 -0
- package/dist/fonts/Geist-Variable.woff2 +0 -0
- package/dist/fonts/GeistMono-Variable.woff2 +0 -0
- package/dist/fonts/LICENSE-BricolageGrotesque.txt +93 -0
- package/dist/fonts/LICENSE-Geist.txt +92 -0
- package/dist/fonts.css +43 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.js +1775 -0
- package/dist/theme.css +345 -0
- package/dist/tokens.css +517 -0
- package/dist/tokens.json +2610 -0
- package/package.json +53 -5
package/dist/index.js
ADDED
|
@@ -0,0 +1,1775 @@
|
|
|
1
|
+
/* Generado por @jotis-me/tokens a partir de tokens.json. No editar a mano. */
|
|
2
|
+
|
|
3
|
+
export const colors = {
|
|
4
|
+
"text-primary": {
|
|
5
|
+
"light": "#171717",
|
|
6
|
+
"dark": "#fafafa",
|
|
7
|
+
"usage": "Texto y titulares sobre bg-primary, bg-secondary y bg-tertiary."
|
|
8
|
+
},
|
|
9
|
+
"text-primary_on-brand": {
|
|
10
|
+
"light": "#ffffff",
|
|
11
|
+
"dark": "#fafafa",
|
|
12
|
+
"usage": "Titulares sobre bg-brand-solid y bg-brand-section."
|
|
13
|
+
},
|
|
14
|
+
"text-secondary": {
|
|
15
|
+
"light": "#404040",
|
|
16
|
+
"dark": "#d4d4d4",
|
|
17
|
+
"usage": "Etiquetas, texto de botones secundarios, cabeceras de tabla. Sobre bg-primary y bg-secondary."
|
|
18
|
+
},
|
|
19
|
+
"text-secondary_hover": {
|
|
20
|
+
"light": "#262626",
|
|
21
|
+
"dark": "#e5e5e5",
|
|
22
|
+
"usage": "text-secondary con hover."
|
|
23
|
+
},
|
|
24
|
+
"text-secondary_on-brand": {
|
|
25
|
+
"light": "#c6d2ff",
|
|
26
|
+
"dark": "#d4d4d4",
|
|
27
|
+
"usage": "Texto secundario sobre bg-brand-section."
|
|
28
|
+
},
|
|
29
|
+
"text-tertiary": {
|
|
30
|
+
"light": "#525252",
|
|
31
|
+
"dark": "#a1a1a1",
|
|
32
|
+
"usage": "Texto de apoyo, pistas, botones terciarios. Sobre bg-primary y bg-secondary."
|
|
33
|
+
},
|
|
34
|
+
"text-tertiary_hover": {
|
|
35
|
+
"light": "#404040",
|
|
36
|
+
"dark": "#d4d4d4",
|
|
37
|
+
"usage": "text-tertiary con hover."
|
|
38
|
+
},
|
|
39
|
+
"text-tertiary_on-brand": {
|
|
40
|
+
"light": "#c6d2ff",
|
|
41
|
+
"dark": "#a1a1a1",
|
|
42
|
+
"usage": "Texto de apoyo sobre bg-brand-section."
|
|
43
|
+
},
|
|
44
|
+
"text-quaternary": {
|
|
45
|
+
"light": "#737373",
|
|
46
|
+
"dark": "#a1a1a1",
|
|
47
|
+
"usage": "Metadatos de poco peso (horas, pies de foto). 4,7:1 sobre bg-primary en claro; no lo uses sobre bg-tertiary."
|
|
48
|
+
},
|
|
49
|
+
"text-quaternary_on-brand": {
|
|
50
|
+
"light": "#a3b3ff",
|
|
51
|
+
"dark": "#a1a1a1",
|
|
52
|
+
"usage": "Metadatos sobre bg-brand-section."
|
|
53
|
+
},
|
|
54
|
+
"text-white": {
|
|
55
|
+
"light": "#ffffff",
|
|
56
|
+
"dark": "#ffffff",
|
|
57
|
+
"usage": "Texto sobre bg-brand-solid, bg-error-solid y bg-primary-solid (tooltips)."
|
|
58
|
+
},
|
|
59
|
+
"text-placeholder": {
|
|
60
|
+
"light": "#737373",
|
|
61
|
+
"dark": "#737373",
|
|
62
|
+
"usage": "Placeholders de inputs sobre bg-primary (4,7:1 en claro, 4,2:1 en oscuro: por debajo de 4,5 en oscuro, se mantiene como en el archivo). Nunca para contenido real."
|
|
63
|
+
},
|
|
64
|
+
"text-brand-primary": {
|
|
65
|
+
"light": "#312c85",
|
|
66
|
+
"dark": "#fafafa",
|
|
67
|
+
"usage": "Titulares en tono de marca sobre bg-brand-primary (10,3:1 en claro, 4,4:1 en oscuro: en oscuro, a 18px o más)."
|
|
68
|
+
},
|
|
69
|
+
"text-brand-secondary": {
|
|
70
|
+
"light": "#432dd7",
|
|
71
|
+
"dark": "#d4d4d4",
|
|
72
|
+
"usage": "Botones link-color y enlaces en el texto sobre bg-primary."
|
|
73
|
+
},
|
|
74
|
+
"text-brand-secondary_hover": {
|
|
75
|
+
"light": "#372aac",
|
|
76
|
+
"dark": "#e5e5e5",
|
|
77
|
+
"usage": "text-brand-secondary con hover."
|
|
78
|
+
},
|
|
79
|
+
"text-brand-tertiary": {
|
|
80
|
+
"light": "#4f39f6",
|
|
81
|
+
"dark": "#a1a1a1",
|
|
82
|
+
"usage": "Acentos de marca en texto pequeño: asteriscos de campo obligatorio, etiquetas de navegación activas."
|
|
83
|
+
},
|
|
84
|
+
"text-brand-tertiary_alt": {
|
|
85
|
+
"light": "#4f39f6",
|
|
86
|
+
"dark": "#fafafa",
|
|
87
|
+
"usage": "Acento de marca que tiene que leerse sobre superficies oscuras."
|
|
88
|
+
},
|
|
89
|
+
"text-error-primary": {
|
|
90
|
+
"light": "#e7000b",
|
|
91
|
+
"dark": "#ff6467",
|
|
92
|
+
"usage": "Mensajes de error bajo los inputs, botones link destructivos."
|
|
93
|
+
},
|
|
94
|
+
"text-error-primary_hover": {
|
|
95
|
+
"light": "#c10007",
|
|
96
|
+
"dark": "#ffa2a2",
|
|
97
|
+
"usage": "text-error-primary con hover."
|
|
98
|
+
},
|
|
99
|
+
"text-warning-primary": {
|
|
100
|
+
"light": "#d08700",
|
|
101
|
+
"dark": "#fdc700",
|
|
102
|
+
"usage": "Texto de aviso. 2,9:1 sobre bg-primary en claro: úsalo a 24px o más, o junto a un icono y una palabra."
|
|
103
|
+
},
|
|
104
|
+
"text-success-primary": {
|
|
105
|
+
"light": "#00a63e",
|
|
106
|
+
"dark": "#05df72",
|
|
107
|
+
"usage": "Texto de éxito y tendencias positivas. 3,2:1 sobre bg-primary en claro: para texto en negrita o grande, o junto a un icono."
|
|
108
|
+
},
|
|
109
|
+
"border-primary": {
|
|
110
|
+
"light": "#d4d4d4",
|
|
111
|
+
"dark": "#404040",
|
|
112
|
+
"usage": "Bordes de inputs, botones secundarios y checkboxes. 1,5:1 sobre bg-primary (1,9:1 en oscuro), por debajo del 3:1 para bordes de control: el archivo confía en la sombra y la etiqueta para marcar los campos; pon etiqueta en todos los inputs."
|
|
113
|
+
},
|
|
114
|
+
"border-secondary": {
|
|
115
|
+
"light": "#e5e5e5",
|
|
116
|
+
"dark": "#262626",
|
|
117
|
+
"usage": "Separadores y bordes de tarjetas y tablas."
|
|
118
|
+
},
|
|
119
|
+
"border-secondary_alt": {
|
|
120
|
+
"light": "#0000001a",
|
|
121
|
+
"dark": "#262626",
|
|
122
|
+
"usage": "Bordes de superficies flotantes (notificaciones, menús)."
|
|
123
|
+
},
|
|
124
|
+
"border-tertiary": {
|
|
125
|
+
"light": "#f5f5f5",
|
|
126
|
+
"dark": "#262626",
|
|
127
|
+
"usage": "Separadores tenues dentro de listas densas."
|
|
128
|
+
},
|
|
129
|
+
"border-brand": {
|
|
130
|
+
"light": "#615fff",
|
|
131
|
+
"dark": "#7c86ff",
|
|
132
|
+
"usage": "Borde del input con foco (2px), tarjetas de radio seleccionadas."
|
|
133
|
+
},
|
|
134
|
+
"border-brand_alt": {
|
|
135
|
+
"light": "#4f39f6",
|
|
136
|
+
"dark": "#404040",
|
|
137
|
+
"usage": "Contorno de marca que pasa a neutro en modo oscuro."
|
|
138
|
+
},
|
|
139
|
+
"border-error": {
|
|
140
|
+
"light": "#fb2c36",
|
|
141
|
+
"dark": "#ff6467",
|
|
142
|
+
"usage": "Input con error y con foco."
|
|
143
|
+
},
|
|
144
|
+
"border-error_subtle": {
|
|
145
|
+
"light": "#ffa2a2",
|
|
146
|
+
"dark": "#fb2c36",
|
|
147
|
+
"usage": "Input con error en reposo, botones secundarios destructivos."
|
|
148
|
+
},
|
|
149
|
+
"fg-primary": {
|
|
150
|
+
"light": "#171717",
|
|
151
|
+
"dark": "#ffffff",
|
|
152
|
+
"usage": "El color de icono más fuerte."
|
|
153
|
+
},
|
|
154
|
+
"fg-secondary": {
|
|
155
|
+
"light": "#404040",
|
|
156
|
+
"dark": "#d4d4d4",
|
|
157
|
+
"usage": "Iconos junto a text-secondary."
|
|
158
|
+
},
|
|
159
|
+
"fg-secondary_hover": {
|
|
160
|
+
"light": "#262626",
|
|
161
|
+
"dark": "#e5e5e5",
|
|
162
|
+
"usage": "fg-secondary con hover."
|
|
163
|
+
},
|
|
164
|
+
"fg-tertiary": {
|
|
165
|
+
"light": "#525252",
|
|
166
|
+
"dark": "#a1a1a1",
|
|
167
|
+
"usage": "Iconos de ítems de navegación y barras de herramientas."
|
|
168
|
+
},
|
|
169
|
+
"fg-tertiary_hover": {
|
|
170
|
+
"light": "#404040",
|
|
171
|
+
"dark": "#d4d4d4",
|
|
172
|
+
"usage": "fg-tertiary con hover."
|
|
173
|
+
},
|
|
174
|
+
"fg-quaternary": {
|
|
175
|
+
"light": "#a1a1a1",
|
|
176
|
+
"dark": "#525252",
|
|
177
|
+
"usage": "Iconos decorativos dentro de inputs, iconos de ayuda, chevrons. 2,6:1 sobre bg-primary en claro y 2,5:1 en oscuro: solo decoración, nunca lo único que transmite el significado."
|
|
178
|
+
},
|
|
179
|
+
"fg-quaternary_hover": {
|
|
180
|
+
"light": "#737373",
|
|
181
|
+
"dark": "#737373",
|
|
182
|
+
"usage": "fg-quaternary con hover."
|
|
183
|
+
},
|
|
184
|
+
"fg-white": {
|
|
185
|
+
"light": "#ffffff",
|
|
186
|
+
"dark": "#ffffff",
|
|
187
|
+
"usage": "Iconos sobre rellenos sólidos de marca o de error; mando del toggle."
|
|
188
|
+
},
|
|
189
|
+
"fg-brand-primary": {
|
|
190
|
+
"light": "#4f39f6",
|
|
191
|
+
"dark": "#615fff",
|
|
192
|
+
"usage": "Relleno de progreso, indicadores activos, iconos de marca."
|
|
193
|
+
},
|
|
194
|
+
"fg-brand-primary_alt": {
|
|
195
|
+
"light": "#4f39f6",
|
|
196
|
+
"dark": "#d4d4d4",
|
|
197
|
+
"usage": "Subrayado de la pestaña actual."
|
|
198
|
+
},
|
|
199
|
+
"fg-brand-secondary": {
|
|
200
|
+
"light": "#615fff",
|
|
201
|
+
"dark": "#615fff",
|
|
202
|
+
"usage": "Marcas de marca secundarias (puntos de badge)."
|
|
203
|
+
},
|
|
204
|
+
"fg-brand-secondary_alt": {
|
|
205
|
+
"light": "#615fff",
|
|
206
|
+
"dark": "#525252",
|
|
207
|
+
"usage": "Marca de marca que pasa a neutro en modo oscuro."
|
|
208
|
+
},
|
|
209
|
+
"fg-brand-secondary_hover": {
|
|
210
|
+
"light": "#4f39f6",
|
|
211
|
+
"dark": "#737373",
|
|
212
|
+
"usage": "fg-brand-secondary con hover."
|
|
213
|
+
},
|
|
214
|
+
"fg-error-primary": {
|
|
215
|
+
"light": "#e7000b",
|
|
216
|
+
"dark": "#fb2c36",
|
|
217
|
+
"usage": "Iconos de error."
|
|
218
|
+
},
|
|
219
|
+
"fg-error-secondary": {
|
|
220
|
+
"light": "#fb2c36",
|
|
221
|
+
"dark": "#ff6467",
|
|
222
|
+
"usage": "Marcas de error más suaves."
|
|
223
|
+
},
|
|
224
|
+
"fg-warning-primary": {
|
|
225
|
+
"light": "#d08700",
|
|
226
|
+
"dark": "#f0b100",
|
|
227
|
+
"usage": "Iconos de aviso."
|
|
228
|
+
},
|
|
229
|
+
"fg-warning-secondary": {
|
|
230
|
+
"light": "#f0b100",
|
|
231
|
+
"dark": "#fdc700",
|
|
232
|
+
"usage": "Marcas de aviso más suaves."
|
|
233
|
+
},
|
|
234
|
+
"fg-success-primary": {
|
|
235
|
+
"light": "#00a63e",
|
|
236
|
+
"dark": "#00c950",
|
|
237
|
+
"usage": "Iconos de éxito, flechas de tendencia positiva."
|
|
238
|
+
},
|
|
239
|
+
"fg-success-secondary": {
|
|
240
|
+
"light": "#00c950",
|
|
241
|
+
"dark": "#05df72",
|
|
242
|
+
"usage": "Puntos de estado en línea."
|
|
243
|
+
},
|
|
244
|
+
"bg-primary": {
|
|
245
|
+
"light": "#ffffff",
|
|
246
|
+
"dark": "#0a0a0a",
|
|
247
|
+
"usage": "Fondo de página y de tarjetas. El fondo por defecto."
|
|
248
|
+
},
|
|
249
|
+
"bg-primary_alt": {
|
|
250
|
+
"light": "#ffffff",
|
|
251
|
+
"dark": "#171717",
|
|
252
|
+
"usage": "Superficies elevadas que tienen que separarse de la página en modo oscuro (modales, alertas, menús)."
|
|
253
|
+
},
|
|
254
|
+
"bg-primary_hover": {
|
|
255
|
+
"light": "#fafafa",
|
|
256
|
+
"dark": "#171717",
|
|
257
|
+
"usage": "Hover de filas e ítems sobre bg-primary."
|
|
258
|
+
},
|
|
259
|
+
"bg-primary-solid": {
|
|
260
|
+
"light": "#0a0a0a",
|
|
261
|
+
"dark": "#171717",
|
|
262
|
+
"usage": "Tooltips y chips invertidos. Con text-white."
|
|
263
|
+
},
|
|
264
|
+
"bg-secondary": {
|
|
265
|
+
"light": "#fafafa",
|
|
266
|
+
"dark": "#171717",
|
|
267
|
+
"usage": "Fondos de sección, cabecera de tablas, shell de la app."
|
|
268
|
+
},
|
|
269
|
+
"bg-secondary_alt": {
|
|
270
|
+
"light": "#fafafa",
|
|
271
|
+
"dark": "#0a0a0a",
|
|
272
|
+
"usage": "Fondo secundario que coincide con la página en modo oscuro."
|
|
273
|
+
},
|
|
274
|
+
"bg-secondary_hover": {
|
|
275
|
+
"light": "#f5f5f5",
|
|
276
|
+
"dark": "#262626",
|
|
277
|
+
"usage": "Hover sobre bg-secondary."
|
|
278
|
+
},
|
|
279
|
+
"bg-secondary-solid": {
|
|
280
|
+
"light": "#525252",
|
|
281
|
+
"dark": "#525252",
|
|
282
|
+
"usage": "Rellenos sólidos neutros (avatares sin foto, iconos destacados grises)."
|
|
283
|
+
},
|
|
284
|
+
"bg-tertiary": {
|
|
285
|
+
"light": "#f5f5f5",
|
|
286
|
+
"dark": "#262626",
|
|
287
|
+
"usage": "Pista del toggle (apagado), skeletons, chips discretos."
|
|
288
|
+
},
|
|
289
|
+
"bg-quaternary": {
|
|
290
|
+
"light": "#e5e5e5",
|
|
291
|
+
"dark": "#404040",
|
|
292
|
+
"usage": "Pista de la barra de progreso y del slider."
|
|
293
|
+
},
|
|
294
|
+
"bg-overlay": {
|
|
295
|
+
"light": "#0a0a0a",
|
|
296
|
+
"dark": "#262626",
|
|
297
|
+
"usage": "Fondo de los modales, al 70 % de opacidad con backdrop-blur-lg."
|
|
298
|
+
},
|
|
299
|
+
"bg-brand-primary": {
|
|
300
|
+
"light": "#eef2ff",
|
|
301
|
+
"dark": "#615fff",
|
|
302
|
+
"usage": "Tinte claro de marca detrás de texto de marca."
|
|
303
|
+
},
|
|
304
|
+
"bg-brand-primary_alt": {
|
|
305
|
+
"light": "#eef2ff",
|
|
306
|
+
"dark": "#171717",
|
|
307
|
+
"usage": "Pestaña actual (button-brand), ítem de navegación seleccionado."
|
|
308
|
+
},
|
|
309
|
+
"bg-brand-secondary": {
|
|
310
|
+
"light": "#e0e7ff",
|
|
311
|
+
"dark": "#4f39f6",
|
|
312
|
+
"usage": "Icono destacado (light) detrás de iconos de marca."
|
|
313
|
+
},
|
|
314
|
+
"bg-brand-solid": {
|
|
315
|
+
"light": "#4f39f6",
|
|
316
|
+
"dark": "#4f39f6",
|
|
317
|
+
"usage": "Botones primarios, checkbox, radio y toggle marcados. Con text-white (6,5:1)."
|
|
318
|
+
},
|
|
319
|
+
"bg-brand-solid_hover": {
|
|
320
|
+
"light": "#432dd7",
|
|
321
|
+
"dark": "#615fff",
|
|
322
|
+
"usage": "bg-brand-solid con hover."
|
|
323
|
+
},
|
|
324
|
+
"bg-brand-section": {
|
|
325
|
+
"light": "#372aac",
|
|
326
|
+
"dark": "#171717",
|
|
327
|
+
"usage": "Bandas de marca a todo el ancho (secciones de llamada a la acción)."
|
|
328
|
+
},
|
|
329
|
+
"bg-brand-section_subtle": {
|
|
330
|
+
"light": "#432dd7",
|
|
331
|
+
"dark": "#0a0a0a",
|
|
332
|
+
"usage": "Paneles interiores dentro de una sección de marca."
|
|
333
|
+
},
|
|
334
|
+
"bg-error-primary": {
|
|
335
|
+
"light": "#fef2f2",
|
|
336
|
+
"dark": "#460809",
|
|
337
|
+
"usage": "Banners de error y filas con tinte de error."
|
|
338
|
+
},
|
|
339
|
+
"bg-error-secondary": {
|
|
340
|
+
"light": "#ffe2e2",
|
|
341
|
+
"dark": "#e7000b",
|
|
342
|
+
"usage": "Icono destacado (light) detrás de iconos de error."
|
|
343
|
+
},
|
|
344
|
+
"bg-error-solid": {
|
|
345
|
+
"light": "#e7000b",
|
|
346
|
+
"dark": "#e7000b",
|
|
347
|
+
"usage": "Botones primarios destructivos. Con text-white (4,8:1)."
|
|
348
|
+
},
|
|
349
|
+
"bg-error-solid_hover": {
|
|
350
|
+
"light": "#c10007",
|
|
351
|
+
"dark": "#fb2c36",
|
|
352
|
+
"usage": "bg-error-solid con hover."
|
|
353
|
+
},
|
|
354
|
+
"bg-warning-primary": {
|
|
355
|
+
"light": "#fefce8",
|
|
356
|
+
"dark": "#432004",
|
|
357
|
+
"usage": "Banners de aviso."
|
|
358
|
+
},
|
|
359
|
+
"bg-warning-secondary": {
|
|
360
|
+
"light": "#fef9c2",
|
|
361
|
+
"dark": "#d08700",
|
|
362
|
+
"usage": "Icono destacado (light) detrás de iconos de aviso."
|
|
363
|
+
},
|
|
364
|
+
"bg-warning-solid": {
|
|
365
|
+
"light": "#d08700",
|
|
366
|
+
"dark": "#d08700",
|
|
367
|
+
"usage": "Relleno sólido de aviso. Texto encima: text-primary, no blanco (2,9:1 con blanco)."
|
|
368
|
+
},
|
|
369
|
+
"bg-success-primary": {
|
|
370
|
+
"light": "#f0fdf4",
|
|
371
|
+
"dark": "#032e15",
|
|
372
|
+
"usage": "Banners de éxito."
|
|
373
|
+
},
|
|
374
|
+
"bg-success-secondary": {
|
|
375
|
+
"light": "#dcfce7",
|
|
376
|
+
"dark": "#00a63e",
|
|
377
|
+
"usage": "Icono destacado (light) detrás de iconos de éxito."
|
|
378
|
+
},
|
|
379
|
+
"bg-success-solid": {
|
|
380
|
+
"light": "#00a63e",
|
|
381
|
+
"dark": "#00a63e",
|
|
382
|
+
"usage": "Relleno sólido de éxito. El blanco encima da 3,2:1: solo para negrita de 14px o más, o iconos."
|
|
383
|
+
},
|
|
384
|
+
"focus-ring": {
|
|
385
|
+
"light": "#615fff",
|
|
386
|
+
"dark": "#615fff",
|
|
387
|
+
"usage": "Color del anillo de foco (anillo exterior de 4px, hueco de 2px en bg-primary)."
|
|
388
|
+
},
|
|
389
|
+
"focus-ring-error": {
|
|
390
|
+
"light": "#fb2c36",
|
|
391
|
+
"dark": "#fb2c36",
|
|
392
|
+
"usage": "Anillo de foco en un campo con error."
|
|
393
|
+
},
|
|
394
|
+
"utility-neutral-50": {
|
|
395
|
+
"light": "#fafafa",
|
|
396
|
+
"dark": "#171717",
|
|
397
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 50: relleno del badge."
|
|
398
|
+
},
|
|
399
|
+
"utility-neutral-100": {
|
|
400
|
+
"light": "#f5f5f5",
|
|
401
|
+
"dark": "#262626",
|
|
402
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 100: relleno en hover."
|
|
403
|
+
},
|
|
404
|
+
"utility-neutral-200": {
|
|
405
|
+
"light": "#e5e5e5",
|
|
406
|
+
"dark": "#404040",
|
|
407
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 200: borde del badge."
|
|
408
|
+
},
|
|
409
|
+
"utility-neutral-300": {
|
|
410
|
+
"light": "#d4d4d4",
|
|
411
|
+
"dark": "#404040",
|
|
412
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 300: borde."
|
|
413
|
+
},
|
|
414
|
+
"utility-neutral-400": {
|
|
415
|
+
"light": "#a1a1a1",
|
|
416
|
+
"dark": "#525252",
|
|
417
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 400: gráfica o punto."
|
|
418
|
+
},
|
|
419
|
+
"utility-neutral-500": {
|
|
420
|
+
"light": "#737373",
|
|
421
|
+
"dark": "#737373",
|
|
422
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 500: punto."
|
|
423
|
+
},
|
|
424
|
+
"utility-neutral-600": {
|
|
425
|
+
"light": "#525252",
|
|
426
|
+
"dark": "#a1a1a1",
|
|
427
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 600: icono."
|
|
428
|
+
},
|
|
429
|
+
"utility-neutral-700": {
|
|
430
|
+
"light": "#404040",
|
|
431
|
+
"dark": "#d4d4d4",
|
|
432
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 700: texto del badge."
|
|
433
|
+
},
|
|
434
|
+
"utility-neutral-800": {
|
|
435
|
+
"light": "#262626",
|
|
436
|
+
"dark": "#e5e5e5",
|
|
437
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 800: texto fuerte."
|
|
438
|
+
},
|
|
439
|
+
"utility-neutral-900": {
|
|
440
|
+
"light": "#171717",
|
|
441
|
+
"dark": "#f5f5f5",
|
|
442
|
+
"usage": "Badges, tags y avatares sin foto en gris. Paso 900: texto más fuerte."
|
|
443
|
+
},
|
|
444
|
+
"utility-brand-50": {
|
|
445
|
+
"light": "#eef2ff",
|
|
446
|
+
"dark": "#1e1a4d",
|
|
447
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 50: relleno del badge."
|
|
448
|
+
},
|
|
449
|
+
"utility-brand-100": {
|
|
450
|
+
"light": "#e0e7ff",
|
|
451
|
+
"dark": "#312c85",
|
|
452
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 100: relleno en hover."
|
|
453
|
+
},
|
|
454
|
+
"utility-brand-200": {
|
|
455
|
+
"light": "#c6d2ff",
|
|
456
|
+
"dark": "#372aac",
|
|
457
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 200: borde del badge."
|
|
458
|
+
},
|
|
459
|
+
"utility-brand-300": {
|
|
460
|
+
"light": "#a3b3ff",
|
|
461
|
+
"dark": "#432dd7",
|
|
462
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 300: borde."
|
|
463
|
+
},
|
|
464
|
+
"utility-brand-400": {
|
|
465
|
+
"light": "#7c86ff",
|
|
466
|
+
"dark": "#4f39f6",
|
|
467
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 400: gráfica o punto."
|
|
468
|
+
},
|
|
469
|
+
"utility-brand-500": {
|
|
470
|
+
"light": "#615fff",
|
|
471
|
+
"dark": "#615fff",
|
|
472
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 500: punto."
|
|
473
|
+
},
|
|
474
|
+
"utility-brand-600": {
|
|
475
|
+
"light": "#4f39f6",
|
|
476
|
+
"dark": "#7c86ff",
|
|
477
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 600: icono."
|
|
478
|
+
},
|
|
479
|
+
"utility-brand-700": {
|
|
480
|
+
"light": "#432dd7",
|
|
481
|
+
"dark": "#a3b3ff",
|
|
482
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 700: texto del badge."
|
|
483
|
+
},
|
|
484
|
+
"utility-brand-800": {
|
|
485
|
+
"light": "#372aac",
|
|
486
|
+
"dark": "#c6d2ff",
|
|
487
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 800: texto fuerte."
|
|
488
|
+
},
|
|
489
|
+
"utility-brand-900": {
|
|
490
|
+
"light": "#312c85",
|
|
491
|
+
"dark": "#e0e7ff",
|
|
492
|
+
"usage": "Badges, puntos y gráficas de marca (mismos tonos que indigo). Paso 900: texto más fuerte."
|
|
493
|
+
},
|
|
494
|
+
"utility-slate-50": {
|
|
495
|
+
"light": "#f8fafc",
|
|
496
|
+
"dark": "#020618",
|
|
497
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 50: relleno del badge."
|
|
498
|
+
},
|
|
499
|
+
"utility-slate-100": {
|
|
500
|
+
"light": "#f1f5f9",
|
|
501
|
+
"dark": "#0f172b",
|
|
502
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 100: relleno en hover."
|
|
503
|
+
},
|
|
504
|
+
"utility-slate-200": {
|
|
505
|
+
"light": "#e2e8f0",
|
|
506
|
+
"dark": "#1d293d",
|
|
507
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 200: borde del badge."
|
|
508
|
+
},
|
|
509
|
+
"utility-slate-300": {
|
|
510
|
+
"light": "#cad5e2",
|
|
511
|
+
"dark": "#314158",
|
|
512
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 300: borde."
|
|
513
|
+
},
|
|
514
|
+
"utility-slate-400": {
|
|
515
|
+
"light": "#90a1b9",
|
|
516
|
+
"dark": "#45556c",
|
|
517
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 400: gráfica o punto."
|
|
518
|
+
},
|
|
519
|
+
"utility-slate-500": {
|
|
520
|
+
"light": "#62748e",
|
|
521
|
+
"dark": "#62748e",
|
|
522
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 500: punto."
|
|
523
|
+
},
|
|
524
|
+
"utility-slate-600": {
|
|
525
|
+
"light": "#45556c",
|
|
526
|
+
"dark": "#90a1b9",
|
|
527
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 600: icono."
|
|
528
|
+
},
|
|
529
|
+
"utility-slate-700": {
|
|
530
|
+
"light": "#314158",
|
|
531
|
+
"dark": "#cad5e2",
|
|
532
|
+
"usage": "Color secundario de badge para categorías neutras. Paso 700: texto del badge."
|
|
533
|
+
},
|
|
534
|
+
"utility-red-50": {
|
|
535
|
+
"light": "#fef2f2",
|
|
536
|
+
"dark": "#460809",
|
|
537
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 50: relleno del badge."
|
|
538
|
+
},
|
|
539
|
+
"utility-red-100": {
|
|
540
|
+
"light": "#ffe2e2",
|
|
541
|
+
"dark": "#82181a",
|
|
542
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 100: relleno en hover."
|
|
543
|
+
},
|
|
544
|
+
"utility-red-200": {
|
|
545
|
+
"light": "#ffc9c9",
|
|
546
|
+
"dark": "#9f0712",
|
|
547
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 200: borde del badge."
|
|
548
|
+
},
|
|
549
|
+
"utility-red-300": {
|
|
550
|
+
"light": "#ffa2a2",
|
|
551
|
+
"dark": "#c10007",
|
|
552
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 300: borde."
|
|
553
|
+
},
|
|
554
|
+
"utility-red-400": {
|
|
555
|
+
"light": "#ff6467",
|
|
556
|
+
"dark": "#e7000b",
|
|
557
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 400: gráfica o punto."
|
|
558
|
+
},
|
|
559
|
+
"utility-red-500": {
|
|
560
|
+
"light": "#fb2c36",
|
|
561
|
+
"dark": "#fb2c36",
|
|
562
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 500: punto."
|
|
563
|
+
},
|
|
564
|
+
"utility-red-600": {
|
|
565
|
+
"light": "#e7000b",
|
|
566
|
+
"dark": "#ff6467",
|
|
567
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 600: icono."
|
|
568
|
+
},
|
|
569
|
+
"utility-red-700": {
|
|
570
|
+
"light": "#c10007",
|
|
571
|
+
"dark": "#ffa2a2",
|
|
572
|
+
"usage": "Badges de error y series negativas en gráficas. Paso 700: texto del badge."
|
|
573
|
+
},
|
|
574
|
+
"utility-orange-50": {
|
|
575
|
+
"light": "#fff7ed",
|
|
576
|
+
"dark": "#441306",
|
|
577
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
578
|
+
},
|
|
579
|
+
"utility-orange-100": {
|
|
580
|
+
"light": "#ffedd4",
|
|
581
|
+
"dark": "#7e2a0c",
|
|
582
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
583
|
+
},
|
|
584
|
+
"utility-orange-200": {
|
|
585
|
+
"light": "#ffd6a7",
|
|
586
|
+
"dark": "#9f2d00",
|
|
587
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
588
|
+
},
|
|
589
|
+
"utility-orange-300": {
|
|
590
|
+
"light": "#ffb86a",
|
|
591
|
+
"dark": "#ca3500",
|
|
592
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
593
|
+
},
|
|
594
|
+
"utility-orange-400": {
|
|
595
|
+
"light": "#ff8904",
|
|
596
|
+
"dark": "#f54900",
|
|
597
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
598
|
+
},
|
|
599
|
+
"utility-orange-500": {
|
|
600
|
+
"light": "#ff6900",
|
|
601
|
+
"dark": "#ff6900",
|
|
602
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
603
|
+
},
|
|
604
|
+
"utility-orange-600": {
|
|
605
|
+
"light": "#f54900",
|
|
606
|
+
"dark": "#ff8904",
|
|
607
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
608
|
+
},
|
|
609
|
+
"utility-orange-700": {
|
|
610
|
+
"light": "#ca3500",
|
|
611
|
+
"dark": "#ffb86a",
|
|
612
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
613
|
+
},
|
|
614
|
+
"utility-amber-50": {
|
|
615
|
+
"light": "#fffbeb",
|
|
616
|
+
"dark": "#461901",
|
|
617
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
618
|
+
},
|
|
619
|
+
"utility-amber-100": {
|
|
620
|
+
"light": "#fef3c6",
|
|
621
|
+
"dark": "#7b3306",
|
|
622
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
623
|
+
},
|
|
624
|
+
"utility-amber-200": {
|
|
625
|
+
"light": "#fee685",
|
|
626
|
+
"dark": "#973c00",
|
|
627
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
628
|
+
},
|
|
629
|
+
"utility-amber-300": {
|
|
630
|
+
"light": "#ffd230",
|
|
631
|
+
"dark": "#bb4d00",
|
|
632
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
633
|
+
},
|
|
634
|
+
"utility-amber-400": {
|
|
635
|
+
"light": "#ffb900",
|
|
636
|
+
"dark": "#e17100",
|
|
637
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
638
|
+
},
|
|
639
|
+
"utility-amber-500": {
|
|
640
|
+
"light": "#fe9a00",
|
|
641
|
+
"dark": "#fe9a00",
|
|
642
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
643
|
+
},
|
|
644
|
+
"utility-amber-600": {
|
|
645
|
+
"light": "#e17100",
|
|
646
|
+
"dark": "#ffb900",
|
|
647
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
648
|
+
},
|
|
649
|
+
"utility-amber-700": {
|
|
650
|
+
"light": "#bb4d00",
|
|
651
|
+
"dark": "#ffd230",
|
|
652
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
653
|
+
},
|
|
654
|
+
"utility-yellow-50": {
|
|
655
|
+
"light": "#fefce8",
|
|
656
|
+
"dark": "#432004",
|
|
657
|
+
"usage": "Badges de aviso. Paso 50: relleno del badge."
|
|
658
|
+
},
|
|
659
|
+
"utility-yellow-100": {
|
|
660
|
+
"light": "#fef9c2",
|
|
661
|
+
"dark": "#733e0a",
|
|
662
|
+
"usage": "Badges de aviso. Paso 100: relleno en hover."
|
|
663
|
+
},
|
|
664
|
+
"utility-yellow-200": {
|
|
665
|
+
"light": "#fff085",
|
|
666
|
+
"dark": "#894b00",
|
|
667
|
+
"usage": "Badges de aviso. Paso 200: borde del badge."
|
|
668
|
+
},
|
|
669
|
+
"utility-yellow-300": {
|
|
670
|
+
"light": "#ffdf20",
|
|
671
|
+
"dark": "#a65f00",
|
|
672
|
+
"usage": "Badges de aviso. Paso 300: borde."
|
|
673
|
+
},
|
|
674
|
+
"utility-yellow-400": {
|
|
675
|
+
"light": "#fdc700",
|
|
676
|
+
"dark": "#d08700",
|
|
677
|
+
"usage": "Badges de aviso. Paso 400: gráfica o punto."
|
|
678
|
+
},
|
|
679
|
+
"utility-yellow-500": {
|
|
680
|
+
"light": "#f0b100",
|
|
681
|
+
"dark": "#f0b100",
|
|
682
|
+
"usage": "Badges de aviso. Paso 500: punto."
|
|
683
|
+
},
|
|
684
|
+
"utility-yellow-600": {
|
|
685
|
+
"light": "#d08700",
|
|
686
|
+
"dark": "#fdc700",
|
|
687
|
+
"usage": "Badges de aviso. Paso 600: icono."
|
|
688
|
+
},
|
|
689
|
+
"utility-yellow-700": {
|
|
690
|
+
"light": "#a65f00",
|
|
691
|
+
"dark": "#ffdf20",
|
|
692
|
+
"usage": "Badges de aviso. Paso 700: texto del badge."
|
|
693
|
+
},
|
|
694
|
+
"utility-green-50": {
|
|
695
|
+
"light": "#f0fdf4",
|
|
696
|
+
"dark": "#032e15",
|
|
697
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 50: relleno del badge."
|
|
698
|
+
},
|
|
699
|
+
"utility-green-100": {
|
|
700
|
+
"light": "#dcfce7",
|
|
701
|
+
"dark": "#0d542b",
|
|
702
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 100: relleno en hover."
|
|
703
|
+
},
|
|
704
|
+
"utility-green-200": {
|
|
705
|
+
"light": "#b9f8cf",
|
|
706
|
+
"dark": "#016630",
|
|
707
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 200: borde del badge."
|
|
708
|
+
},
|
|
709
|
+
"utility-green-300": {
|
|
710
|
+
"light": "#7bf1a8",
|
|
711
|
+
"dark": "#008236",
|
|
712
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 300: borde."
|
|
713
|
+
},
|
|
714
|
+
"utility-green-400": {
|
|
715
|
+
"light": "#05df72",
|
|
716
|
+
"dark": "#00a63e",
|
|
717
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 400: gráfica o punto."
|
|
718
|
+
},
|
|
719
|
+
"utility-green-500": {
|
|
720
|
+
"light": "#00c950",
|
|
721
|
+
"dark": "#00c950",
|
|
722
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 500: punto."
|
|
723
|
+
},
|
|
724
|
+
"utility-green-600": {
|
|
725
|
+
"light": "#00a63e",
|
|
726
|
+
"dark": "#05df72",
|
|
727
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 600: icono."
|
|
728
|
+
},
|
|
729
|
+
"utility-green-700": {
|
|
730
|
+
"light": "#008236",
|
|
731
|
+
"dark": "#7bf1a8",
|
|
732
|
+
"usage": "Badges de éxito y series positivas en gráficas. Paso 700: texto del badge."
|
|
733
|
+
},
|
|
734
|
+
"utility-emerald-50": {
|
|
735
|
+
"light": "#ecfdf5",
|
|
736
|
+
"dark": "#002c22",
|
|
737
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
738
|
+
},
|
|
739
|
+
"utility-emerald-100": {
|
|
740
|
+
"light": "#d0fae5",
|
|
741
|
+
"dark": "#004f3b",
|
|
742
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
743
|
+
},
|
|
744
|
+
"utility-emerald-200": {
|
|
745
|
+
"light": "#a4f4cf",
|
|
746
|
+
"dark": "#006045",
|
|
747
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
748
|
+
},
|
|
749
|
+
"utility-emerald-300": {
|
|
750
|
+
"light": "#5ee9b5",
|
|
751
|
+
"dark": "#007a55",
|
|
752
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
753
|
+
},
|
|
754
|
+
"utility-emerald-400": {
|
|
755
|
+
"light": "#00d492",
|
|
756
|
+
"dark": "#009966",
|
|
757
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
758
|
+
},
|
|
759
|
+
"utility-emerald-500": {
|
|
760
|
+
"light": "#00bc7d",
|
|
761
|
+
"dark": "#00bc7d",
|
|
762
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
763
|
+
},
|
|
764
|
+
"utility-emerald-600": {
|
|
765
|
+
"light": "#009966",
|
|
766
|
+
"dark": "#00d492",
|
|
767
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
768
|
+
},
|
|
769
|
+
"utility-emerald-700": {
|
|
770
|
+
"light": "#007a55",
|
|
771
|
+
"dark": "#5ee9b5",
|
|
772
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
773
|
+
},
|
|
774
|
+
"utility-sky-50": {
|
|
775
|
+
"light": "#f0f9ff",
|
|
776
|
+
"dark": "#052f4a",
|
|
777
|
+
"usage": "Badges informativos y series de gráficas. Paso 50: relleno del badge."
|
|
778
|
+
},
|
|
779
|
+
"utility-sky-100": {
|
|
780
|
+
"light": "#dff2fe",
|
|
781
|
+
"dark": "#024a70",
|
|
782
|
+
"usage": "Badges informativos y series de gráficas. Paso 100: relleno en hover."
|
|
783
|
+
},
|
|
784
|
+
"utility-sky-200": {
|
|
785
|
+
"light": "#b8e6fe",
|
|
786
|
+
"dark": "#00598a",
|
|
787
|
+
"usage": "Badges informativos y series de gráficas. Paso 200: borde del badge."
|
|
788
|
+
},
|
|
789
|
+
"utility-sky-300": {
|
|
790
|
+
"light": "#74d4ff",
|
|
791
|
+
"dark": "#0069a8",
|
|
792
|
+
"usage": "Badges informativos y series de gráficas. Paso 300: borde."
|
|
793
|
+
},
|
|
794
|
+
"utility-sky-400": {
|
|
795
|
+
"light": "#00bcff",
|
|
796
|
+
"dark": "#0084d1",
|
|
797
|
+
"usage": "Badges informativos y series de gráficas. Paso 400: gráfica o punto."
|
|
798
|
+
},
|
|
799
|
+
"utility-sky-500": {
|
|
800
|
+
"light": "#00a6f4",
|
|
801
|
+
"dark": "#00a6f4",
|
|
802
|
+
"usage": "Badges informativos y series de gráficas. Paso 500: punto."
|
|
803
|
+
},
|
|
804
|
+
"utility-sky-600": {
|
|
805
|
+
"light": "#0084d1",
|
|
806
|
+
"dark": "#00bcff",
|
|
807
|
+
"usage": "Badges informativos y series de gráficas. Paso 600: icono."
|
|
808
|
+
},
|
|
809
|
+
"utility-sky-700": {
|
|
810
|
+
"light": "#0069a8",
|
|
811
|
+
"dark": "#74d4ff",
|
|
812
|
+
"usage": "Badges informativos y series de gráficas. Paso 700: texto del badge."
|
|
813
|
+
},
|
|
814
|
+
"utility-blue-50": {
|
|
815
|
+
"light": "#eff6ff",
|
|
816
|
+
"dark": "#162456",
|
|
817
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
818
|
+
},
|
|
819
|
+
"utility-blue-100": {
|
|
820
|
+
"light": "#dbeafe",
|
|
821
|
+
"dark": "#1c398e",
|
|
822
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
823
|
+
},
|
|
824
|
+
"utility-blue-200": {
|
|
825
|
+
"light": "#bedbff",
|
|
826
|
+
"dark": "#193cb8",
|
|
827
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
828
|
+
},
|
|
829
|
+
"utility-blue-300": {
|
|
830
|
+
"light": "#8ec5ff",
|
|
831
|
+
"dark": "#1447e6",
|
|
832
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
833
|
+
},
|
|
834
|
+
"utility-blue-400": {
|
|
835
|
+
"light": "#51a2ff",
|
|
836
|
+
"dark": "#155dfc",
|
|
837
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
838
|
+
},
|
|
839
|
+
"utility-blue-500": {
|
|
840
|
+
"light": "#2b7fff",
|
|
841
|
+
"dark": "#2b7fff",
|
|
842
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
843
|
+
},
|
|
844
|
+
"utility-blue-600": {
|
|
845
|
+
"light": "#155dfc",
|
|
846
|
+
"dark": "#51a2ff",
|
|
847
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
848
|
+
},
|
|
849
|
+
"utility-blue-700": {
|
|
850
|
+
"light": "#1447e6",
|
|
851
|
+
"dark": "#8ec5ff",
|
|
852
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
853
|
+
},
|
|
854
|
+
"utility-indigo-50": {
|
|
855
|
+
"light": "#eef2ff",
|
|
856
|
+
"dark": "#1e1a4d",
|
|
857
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
858
|
+
},
|
|
859
|
+
"utility-indigo-100": {
|
|
860
|
+
"light": "#e0e7ff",
|
|
861
|
+
"dark": "#312c85",
|
|
862
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
863
|
+
},
|
|
864
|
+
"utility-indigo-200": {
|
|
865
|
+
"light": "#c6d2ff",
|
|
866
|
+
"dark": "#372aac",
|
|
867
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
868
|
+
},
|
|
869
|
+
"utility-indigo-300": {
|
|
870
|
+
"light": "#a3b3ff",
|
|
871
|
+
"dark": "#432dd7",
|
|
872
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
873
|
+
},
|
|
874
|
+
"utility-indigo-400": {
|
|
875
|
+
"light": "#7c86ff",
|
|
876
|
+
"dark": "#4f39f6",
|
|
877
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
878
|
+
},
|
|
879
|
+
"utility-indigo-500": {
|
|
880
|
+
"light": "#615fff",
|
|
881
|
+
"dark": "#615fff",
|
|
882
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
883
|
+
},
|
|
884
|
+
"utility-indigo-600": {
|
|
885
|
+
"light": "#4f39f6",
|
|
886
|
+
"dark": "#7c86ff",
|
|
887
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
888
|
+
},
|
|
889
|
+
"utility-indigo-700": {
|
|
890
|
+
"light": "#432dd7",
|
|
891
|
+
"dark": "#a3b3ff",
|
|
892
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
893
|
+
},
|
|
894
|
+
"utility-purple-50": {
|
|
895
|
+
"light": "#faf5ff",
|
|
896
|
+
"dark": "#3c0366",
|
|
897
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
898
|
+
},
|
|
899
|
+
"utility-purple-100": {
|
|
900
|
+
"light": "#f3e8ff",
|
|
901
|
+
"dark": "#59168b",
|
|
902
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
903
|
+
},
|
|
904
|
+
"utility-purple-200": {
|
|
905
|
+
"light": "#e9d4ff",
|
|
906
|
+
"dark": "#6e11b0",
|
|
907
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
908
|
+
},
|
|
909
|
+
"utility-purple-300": {
|
|
910
|
+
"light": "#dab2ff",
|
|
911
|
+
"dark": "#8200db",
|
|
912
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
913
|
+
},
|
|
914
|
+
"utility-purple-400": {
|
|
915
|
+
"light": "#c27aff",
|
|
916
|
+
"dark": "#9810fa",
|
|
917
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
918
|
+
},
|
|
919
|
+
"utility-purple-500": {
|
|
920
|
+
"light": "#ad46ff",
|
|
921
|
+
"dark": "#ad46ff",
|
|
922
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
923
|
+
},
|
|
924
|
+
"utility-purple-600": {
|
|
925
|
+
"light": "#9810fa",
|
|
926
|
+
"dark": "#c27aff",
|
|
927
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
928
|
+
},
|
|
929
|
+
"utility-purple-700": {
|
|
930
|
+
"light": "#8200db",
|
|
931
|
+
"dark": "#dab2ff",
|
|
932
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
933
|
+
},
|
|
934
|
+
"utility-fuchsia-50": {
|
|
935
|
+
"light": "#fdf4ff",
|
|
936
|
+
"dark": "#4b004f",
|
|
937
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
938
|
+
},
|
|
939
|
+
"utility-fuchsia-100": {
|
|
940
|
+
"light": "#fae8ff",
|
|
941
|
+
"dark": "#721378",
|
|
942
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
943
|
+
},
|
|
944
|
+
"utility-fuchsia-200": {
|
|
945
|
+
"light": "#f6cfff",
|
|
946
|
+
"dark": "#8a0194",
|
|
947
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
948
|
+
},
|
|
949
|
+
"utility-fuchsia-300": {
|
|
950
|
+
"light": "#f4a8ff",
|
|
951
|
+
"dark": "#a800b7",
|
|
952
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
953
|
+
},
|
|
954
|
+
"utility-fuchsia-400": {
|
|
955
|
+
"light": "#ed6aff",
|
|
956
|
+
"dark": "#c800de",
|
|
957
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
958
|
+
},
|
|
959
|
+
"utility-fuchsia-500": {
|
|
960
|
+
"light": "#e12afb",
|
|
961
|
+
"dark": "#e12afb",
|
|
962
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
963
|
+
},
|
|
964
|
+
"utility-fuchsia-600": {
|
|
965
|
+
"light": "#c800de",
|
|
966
|
+
"dark": "#ed6aff",
|
|
967
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
968
|
+
},
|
|
969
|
+
"utility-fuchsia-700": {
|
|
970
|
+
"light": "#a800b7",
|
|
971
|
+
"dark": "#f4a8ff",
|
|
972
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
973
|
+
},
|
|
974
|
+
"utility-pink-50": {
|
|
975
|
+
"light": "#fdf2f8",
|
|
976
|
+
"dark": "#510424",
|
|
977
|
+
"usage": "Badges y series de gráficas. Paso 50: relleno del badge."
|
|
978
|
+
},
|
|
979
|
+
"utility-pink-100": {
|
|
980
|
+
"light": "#fce7f3",
|
|
981
|
+
"dark": "#861043",
|
|
982
|
+
"usage": "Badges y series de gráficas. Paso 100: relleno en hover."
|
|
983
|
+
},
|
|
984
|
+
"utility-pink-200": {
|
|
985
|
+
"light": "#fccee8",
|
|
986
|
+
"dark": "#a3004c",
|
|
987
|
+
"usage": "Badges y series de gráficas. Paso 200: borde del badge."
|
|
988
|
+
},
|
|
989
|
+
"utility-pink-300": {
|
|
990
|
+
"light": "#fda5d5",
|
|
991
|
+
"dark": "#c6005c",
|
|
992
|
+
"usage": "Badges y series de gráficas. Paso 300: borde."
|
|
993
|
+
},
|
|
994
|
+
"utility-pink-400": {
|
|
995
|
+
"light": "#fb64b6",
|
|
996
|
+
"dark": "#e60076",
|
|
997
|
+
"usage": "Badges y series de gráficas. Paso 400: gráfica o punto."
|
|
998
|
+
},
|
|
999
|
+
"utility-pink-500": {
|
|
1000
|
+
"light": "#f6339a",
|
|
1001
|
+
"dark": "#f6339a",
|
|
1002
|
+
"usage": "Badges y series de gráficas. Paso 500: punto."
|
|
1003
|
+
},
|
|
1004
|
+
"utility-pink-600": {
|
|
1005
|
+
"light": "#e60076",
|
|
1006
|
+
"dark": "#fb64b6",
|
|
1007
|
+
"usage": "Badges y series de gráficas. Paso 600: icono."
|
|
1008
|
+
},
|
|
1009
|
+
"utility-pink-700": {
|
|
1010
|
+
"light": "#c6005c",
|
|
1011
|
+
"dark": "#fda5d5",
|
|
1012
|
+
"usage": "Badges y series de gráficas. Paso 700: texto del badge."
|
|
1013
|
+
},
|
|
1014
|
+
"alpha-white-10": {
|
|
1015
|
+
"light": "#ffffff1a",
|
|
1016
|
+
"dark": "#0c0e121a",
|
|
1017
|
+
"usage": "Blanco al 10 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1018
|
+
},
|
|
1019
|
+
"alpha-white-20": {
|
|
1020
|
+
"light": "#ffffff33",
|
|
1021
|
+
"dark": "#0c0e1233",
|
|
1022
|
+
"usage": "Blanco al 20 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1023
|
+
},
|
|
1024
|
+
"alpha-white-30": {
|
|
1025
|
+
"light": "#ffffff4c",
|
|
1026
|
+
"dark": "#0c0e124c",
|
|
1027
|
+
"usage": "Blanco al 30 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1028
|
+
},
|
|
1029
|
+
"alpha-white-40": {
|
|
1030
|
+
"light": "#ffffff66",
|
|
1031
|
+
"dark": "#0c0e1266",
|
|
1032
|
+
"usage": "Blanco al 40 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1033
|
+
},
|
|
1034
|
+
"alpha-white-50": {
|
|
1035
|
+
"light": "#ffffff80",
|
|
1036
|
+
"dark": "#0c0e1280",
|
|
1037
|
+
"usage": "Blanco al 50 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1038
|
+
},
|
|
1039
|
+
"alpha-white-60": {
|
|
1040
|
+
"light": "#ffffff99",
|
|
1041
|
+
"dark": "#0c0e1299",
|
|
1042
|
+
"usage": "Blanco al 60 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1043
|
+
},
|
|
1044
|
+
"alpha-white-70": {
|
|
1045
|
+
"light": "#ffffffb2",
|
|
1046
|
+
"dark": "#0c0e12b2",
|
|
1047
|
+
"usage": "Blanco al 70 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1048
|
+
},
|
|
1049
|
+
"alpha-white-80": {
|
|
1050
|
+
"light": "#ffffffcc",
|
|
1051
|
+
"dark": "#0c0e12cc",
|
|
1052
|
+
"usage": "Blanco al 80 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1053
|
+
},
|
|
1054
|
+
"alpha-white-90": {
|
|
1055
|
+
"light": "#ffffffe6",
|
|
1056
|
+
"dark": "#0c0e12e6",
|
|
1057
|
+
"usage": "Blanco al 90 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1058
|
+
},
|
|
1059
|
+
"alpha-white-100": {
|
|
1060
|
+
"light": "#ffffff",
|
|
1061
|
+
"dark": "#0c0e12",
|
|
1062
|
+
"usage": "Blanco al 100 % (en oscuro pasa al fondo oscuro). Capas sobre imágenes y secciones de marca."
|
|
1063
|
+
},
|
|
1064
|
+
"alpha-black-10": {
|
|
1065
|
+
"light": "#0000001a",
|
|
1066
|
+
"dark": "#ffffff1a",
|
|
1067
|
+
"usage": "Negro al 10 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1068
|
+
},
|
|
1069
|
+
"alpha-black-20": {
|
|
1070
|
+
"light": "#00000033",
|
|
1071
|
+
"dark": "#ffffff33",
|
|
1072
|
+
"usage": "Negro al 20 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1073
|
+
},
|
|
1074
|
+
"alpha-black-30": {
|
|
1075
|
+
"light": "#0000004c",
|
|
1076
|
+
"dark": "#ffffff4c",
|
|
1077
|
+
"usage": "Negro al 30 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1078
|
+
},
|
|
1079
|
+
"alpha-black-40": {
|
|
1080
|
+
"light": "#00000066",
|
|
1081
|
+
"dark": "#ffffff66",
|
|
1082
|
+
"usage": "Negro al 40 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1083
|
+
},
|
|
1084
|
+
"alpha-black-50": {
|
|
1085
|
+
"light": "#00000080",
|
|
1086
|
+
"dark": "#ffffff80",
|
|
1087
|
+
"usage": "Negro al 50 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1088
|
+
},
|
|
1089
|
+
"alpha-black-60": {
|
|
1090
|
+
"light": "#00000099",
|
|
1091
|
+
"dark": "#ffffff99",
|
|
1092
|
+
"usage": "Negro al 60 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1093
|
+
},
|
|
1094
|
+
"alpha-black-70": {
|
|
1095
|
+
"light": "#000000b2",
|
|
1096
|
+
"dark": "#ffffffb2",
|
|
1097
|
+
"usage": "Negro al 70 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1098
|
+
},
|
|
1099
|
+
"alpha-black-80": {
|
|
1100
|
+
"light": "#000000cc",
|
|
1101
|
+
"dark": "#ffffffcc",
|
|
1102
|
+
"usage": "Negro al 80 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1103
|
+
},
|
|
1104
|
+
"alpha-black-90": {
|
|
1105
|
+
"light": "#000000e6",
|
|
1106
|
+
"dark": "#ffffffe6",
|
|
1107
|
+
"usage": "Negro al 90 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1108
|
+
},
|
|
1109
|
+
"alpha-black-100": {
|
|
1110
|
+
"light": "#000000",
|
|
1111
|
+
"dark": "#ffffff",
|
|
1112
|
+
"usage": "Negro al 100 % (en oscuro pasa a blanco). Velos y bordes sutiles."
|
|
1113
|
+
},
|
|
1114
|
+
"avatar-styles-bg-neutral": {
|
|
1115
|
+
"light": "#e0e0e0",
|
|
1116
|
+
"dark": "#e0e0e0",
|
|
1117
|
+
"usage": "Relleno del avatar sin foto, detrás de las iniciales."
|
|
1118
|
+
},
|
|
1119
|
+
"featured-icon-light-fg-brand": {
|
|
1120
|
+
"light": "#4f39f6",
|
|
1121
|
+
"dark": "#c6d2ff",
|
|
1122
|
+
"usage": "Icono dentro de un icono destacado light de marca."
|
|
1123
|
+
},
|
|
1124
|
+
"featured-icon-light-fg-gray": {
|
|
1125
|
+
"light": "#737373",
|
|
1126
|
+
"dark": "#e5e5e5",
|
|
1127
|
+
"usage": "Icono dentro de un icono destacado light gris."
|
|
1128
|
+
},
|
|
1129
|
+
"featured-icon-light-fg-error": {
|
|
1130
|
+
"light": "#e7000b",
|
|
1131
|
+
"dark": "#ffc9c9",
|
|
1132
|
+
"usage": "Icono dentro de un icono destacado light de error."
|
|
1133
|
+
},
|
|
1134
|
+
"featured-icon-light-fg-warning": {
|
|
1135
|
+
"light": "#d08700",
|
|
1136
|
+
"dark": "#fff085",
|
|
1137
|
+
"usage": "Icono dentro de un icono destacado light de aviso (2,7:1 en claro, 2,5:1 en oscuro sobre bg-warning-secondary: acompáñalo de un título)."
|
|
1138
|
+
},
|
|
1139
|
+
"featured-icon-light-fg-success": {
|
|
1140
|
+
"light": "#00a63e",
|
|
1141
|
+
"dark": "#b9f8cf",
|
|
1142
|
+
"usage": "Icono dentro de un icono destacado light de éxito (2,9:1 en claro, 2,7:1 en oscuro sobre bg-success-secondary: acompáñalo de un título)."
|
|
1143
|
+
},
|
|
1144
|
+
"icon-fg-brand": {
|
|
1145
|
+
"light": "#4f39f6",
|
|
1146
|
+
"dark": "#a1a1a1",
|
|
1147
|
+
"usage": "Iconos sueltos en color de marca."
|
|
1148
|
+
},
|
|
1149
|
+
"icon-fg-brand_on-brand": {
|
|
1150
|
+
"light": "#c6d2ff",
|
|
1151
|
+
"dark": "#a1a1a1",
|
|
1152
|
+
"usage": "Iconos sobre bg-brand-section."
|
|
1153
|
+
},
|
|
1154
|
+
"slider-handle-bg": {
|
|
1155
|
+
"light": "#ffffff",
|
|
1156
|
+
"dark": "#615fff",
|
|
1157
|
+
"usage": "Relleno del mando del slider."
|
|
1158
|
+
},
|
|
1159
|
+
"slider-handle-border": {
|
|
1160
|
+
"light": "#4f39f6",
|
|
1161
|
+
"dark": "#0a0a0a",
|
|
1162
|
+
"usage": "Borde del mando del slider (2px)."
|
|
1163
|
+
},
|
|
1164
|
+
"toggle-border": {
|
|
1165
|
+
"light": "#d4d4d4",
|
|
1166
|
+
"dark": "#00000000",
|
|
1167
|
+
"usage": "Borde del mando del toggle fino cuando está apagado."
|
|
1168
|
+
},
|
|
1169
|
+
"toggle-slim-border_pressed": {
|
|
1170
|
+
"light": "#4f39f6",
|
|
1171
|
+
"dark": "#00000000",
|
|
1172
|
+
"usage": "Borde del mando del toggle fino cuando está encendido."
|
|
1173
|
+
},
|
|
1174
|
+
"toggle-slim-border_pressed-hover": {
|
|
1175
|
+
"light": "#432dd7",
|
|
1176
|
+
"dark": "#00000000",
|
|
1177
|
+
"usage": "Borde del mando del toggle fino encendido y con hover."
|
|
1178
|
+
},
|
|
1179
|
+
"tooltip-supporting-text": {
|
|
1180
|
+
"light": "#d4d4d4",
|
|
1181
|
+
"dark": "#d4d4d4",
|
|
1182
|
+
"usage": "Segunda línea de un tooltip, sobre bg-primary-solid."
|
|
1183
|
+
},
|
|
1184
|
+
"text-editor-icon-fg": {
|
|
1185
|
+
"light": "#a1a1a1",
|
|
1186
|
+
"dark": "#a1a1a1",
|
|
1187
|
+
"usage": "Iconos inactivos de la barra de un editor de texto."
|
|
1188
|
+
},
|
|
1189
|
+
"text-editor-icon-fg_active": {
|
|
1190
|
+
"light": "#737373",
|
|
1191
|
+
"dark": "#ffffff",
|
|
1192
|
+
"usage": "Icono activo de la barra de un editor de texto."
|
|
1193
|
+
},
|
|
1194
|
+
"footer-button-fg": {
|
|
1195
|
+
"light": "#c6d2ff",
|
|
1196
|
+
"dark": "#d4d4d4",
|
|
1197
|
+
"usage": "Enlaces del pie sobre bg-brand-section."
|
|
1198
|
+
},
|
|
1199
|
+
"footer-button-fg_hover": {
|
|
1200
|
+
"light": "#ffffff",
|
|
1201
|
+
"dark": "#f5f5f5",
|
|
1202
|
+
"usage": "Enlaces del pie con hover."
|
|
1203
|
+
},
|
|
1204
|
+
"bg-active": {
|
|
1205
|
+
"light": "#fafafa",
|
|
1206
|
+
"dark": "#262626",
|
|
1207
|
+
"usage": "Estado pulsado o activo de filas e ítems sobre bg-primary."
|
|
1208
|
+
}
|
|
1209
|
+
};
|
|
1210
|
+
export const shadows = {
|
|
1211
|
+
"shadow-xs": {
|
|
1212
|
+
"light": "0 1px 2px 0 #0000000d",
|
|
1213
|
+
"dark": "0 1px 2px 0 #0000000d",
|
|
1214
|
+
"usage": "Inputs, badge modern, botones secundarios (planos)."
|
|
1215
|
+
},
|
|
1216
|
+
"shadow-xs-skeuomorphic": {
|
|
1217
|
+
"light": "0 1px 2px 0 #0000000d, inset 0 0 0 1px #0000002e, inset 0 -2px 0 0 #0000000d",
|
|
1218
|
+
"dark": "0 1px 2px 0 #0000000d, inset 0 0 0 1px #0000002e, inset 0 -2px 0 0 #0000000d",
|
|
1219
|
+
"usage": "Botones e iconos destacados (modern). El borde interior da el leve relieve; en oscuro solo queda el borde interior."
|
|
1220
|
+
},
|
|
1221
|
+
"shadow-sm": {
|
|
1222
|
+
"light": "0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a",
|
|
1223
|
+
"dark": "0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a",
|
|
1224
|
+
"usage": "Mando del toggle, pestaña seleccionada de un control segmentado."
|
|
1225
|
+
},
|
|
1226
|
+
"shadow-md": {
|
|
1227
|
+
"light": "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f",
|
|
1228
|
+
"dark": "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f",
|
|
1229
|
+
"usage": "Tarjetas que se elevan con hover."
|
|
1230
|
+
},
|
|
1231
|
+
"shadow-lg": {
|
|
1232
|
+
"light": "0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008, 0 2px 2px -1px #0000000a",
|
|
1233
|
+
"dark": "0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008, 0 2px 2px -1px #0000000a",
|
|
1234
|
+
"usage": "Menús desplegables, tooltips, notificaciones."
|
|
1235
|
+
},
|
|
1236
|
+
"shadow-xl": {
|
|
1237
|
+
"light": "0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008, 0 3px 3px -1.5px #0000000a",
|
|
1238
|
+
"dark": "0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008, 0 3px 3px -1.5px #0000000a",
|
|
1239
|
+
"usage": "Modales."
|
|
1240
|
+
},
|
|
1241
|
+
"shadow-2xl": {
|
|
1242
|
+
"light": "0 24px 48px -12px #0000002e, 0 4px 4px -2px #0000000a",
|
|
1243
|
+
"dark": "0 24px 48px -12px #0000002e, 0 4px 4px -2px #0000000a",
|
|
1244
|
+
"usage": "Slideouts, menús de comandos."
|
|
1245
|
+
},
|
|
1246
|
+
"shadow-3xl": {
|
|
1247
|
+
"light": "0 32px 64px -12px #00000024, 0 5px 5px -2.5px #0000000a",
|
|
1248
|
+
"dark": "0 32px 64px -12px #00000024, 0 5px 5px -2.5px #0000000a",
|
|
1249
|
+
"usage": "Maquetas de cabecera."
|
|
1250
|
+
},
|
|
1251
|
+
"focus-ring-shadow": {
|
|
1252
|
+
"light": "0 0 0 2px #ffffff, 0 0 0 4px #615fff",
|
|
1253
|
+
"dark": "0 0 0 2px #0a0a0a, 0 0 0 4px #615fff",
|
|
1254
|
+
"usage": "Foco de teclado en cualquier control: hueco de 2px en bg-primary y después 4px de focus-ring."
|
|
1255
|
+
},
|
|
1256
|
+
"focus-ring-error-shadow": {
|
|
1257
|
+
"light": "0 0 0 2px #ffffff, 0 0 0 4px #fb2c36",
|
|
1258
|
+
"dark": "0 0 0 2px #0a0a0a, 0 0 0 4px #fb2c36",
|
|
1259
|
+
"usage": "Foco de teclado en un control destructivo o un campo con error."
|
|
1260
|
+
}
|
|
1261
|
+
};
|
|
1262
|
+
export const spacing = {
|
|
1263
|
+
"spacing-none": {
|
|
1264
|
+
"value": "0px",
|
|
1265
|
+
"usage": "Sin separación."
|
|
1266
|
+
},
|
|
1267
|
+
"spacing-xxs": {
|
|
1268
|
+
"value": "2px",
|
|
1269
|
+
"usage": "De etiqueta a asterisco, de título a subtítulo en bloques apretados."
|
|
1270
|
+
},
|
|
1271
|
+
"spacing-xs": {
|
|
1272
|
+
"value": "4px",
|
|
1273
|
+
"usage": "De icono a texto en botones (xs–md), texto apilado y texto de apoyo."
|
|
1274
|
+
},
|
|
1275
|
+
"spacing-sm": {
|
|
1276
|
+
"value": "6px",
|
|
1277
|
+
"usage": "De etiqueta a input, de icono a texto en botones lg/xl, de punto a texto del badge."
|
|
1278
|
+
},
|
|
1279
|
+
"spacing-md": {
|
|
1280
|
+
"value": "8px",
|
|
1281
|
+
"usage": "Hueco interior de inputs, de avatar a etiqueta, grupos de tags."
|
|
1282
|
+
},
|
|
1283
|
+
"spacing-lg": {
|
|
1284
|
+
"value": "12px",
|
|
1285
|
+
"usage": "Filas de botones, de checkbox a etiqueta (md), hueco entre acciones de un modal."
|
|
1286
|
+
},
|
|
1287
|
+
"spacing-xl": {
|
|
1288
|
+
"value": "16px",
|
|
1289
|
+
"usage": "Padding de tarjeta (compacta), padding de alertas, hueco entre campos."
|
|
1290
|
+
},
|
|
1291
|
+
"spacing-2xl": {
|
|
1292
|
+
"value": "20px",
|
|
1293
|
+
"usage": "Secciones de formulario, padding de tarjetas."
|
|
1294
|
+
},
|
|
1295
|
+
"spacing-3xl": {
|
|
1296
|
+
"value": "24px",
|
|
1297
|
+
"usage": "Padding de modales, padding de tarjeta (holgada)."
|
|
1298
|
+
},
|
|
1299
|
+
"spacing-4xl": {
|
|
1300
|
+
"value": "32px",
|
|
1301
|
+
"usage": "Márgenes de página en escritorio, bloques de sección dentro de una página."
|
|
1302
|
+
},
|
|
1303
|
+
"spacing-5xl": {
|
|
1304
|
+
"value": "40px",
|
|
1305
|
+
"usage": "Entre secciones de una página."
|
|
1306
|
+
},
|
|
1307
|
+
"spacing-6xl": {
|
|
1308
|
+
"value": "48px",
|
|
1309
|
+
"usage": "Separaciones grandes entre secciones."
|
|
1310
|
+
},
|
|
1311
|
+
"spacing-7xl": {
|
|
1312
|
+
"value": "64px",
|
|
1313
|
+
"usage": "Padding de secciones de marketing (móvil)."
|
|
1314
|
+
},
|
|
1315
|
+
"spacing-8xl": {
|
|
1316
|
+
"value": "80px",
|
|
1317
|
+
"usage": "Padding de secciones de marketing."
|
|
1318
|
+
},
|
|
1319
|
+
"spacing-9xl": {
|
|
1320
|
+
"value": "96px",
|
|
1321
|
+
"usage": "Padding de secciones de marketing (escritorio)."
|
|
1322
|
+
},
|
|
1323
|
+
"spacing-10xl": {
|
|
1324
|
+
"value": "128px",
|
|
1325
|
+
"usage": "Padding de cabeceras grandes."
|
|
1326
|
+
},
|
|
1327
|
+
"spacing-11xl": {
|
|
1328
|
+
"value": "160px",
|
|
1329
|
+
"usage": "Padding de cabeceras grandes (amplio)."
|
|
1330
|
+
},
|
|
1331
|
+
"container-padding-mobile": {
|
|
1332
|
+
"value": "16px",
|
|
1333
|
+
"usage": "Padding horizontal de página por debajo de 768px."
|
|
1334
|
+
},
|
|
1335
|
+
"container-padding-desktop": {
|
|
1336
|
+
"value": "32px",
|
|
1337
|
+
"usage": "Padding horizontal de página desde 768px."
|
|
1338
|
+
}
|
|
1339
|
+
};
|
|
1340
|
+
export const radius = {
|
|
1341
|
+
"radius-none": {
|
|
1342
|
+
"value": "0px",
|
|
1343
|
+
"usage": "Tablas e imágenes a sangre."
|
|
1344
|
+
},
|
|
1345
|
+
"radius-xs": {
|
|
1346
|
+
"value": "2px",
|
|
1347
|
+
"usage": "Marcas diminutas (flecha del tooltip)."
|
|
1348
|
+
},
|
|
1349
|
+
"radius-sm": {
|
|
1350
|
+
"value": "4px",
|
|
1351
|
+
"usage": "Checkbox sm, barras de progreso."
|
|
1352
|
+
},
|
|
1353
|
+
"radius-md": {
|
|
1354
|
+
"value": "6px",
|
|
1355
|
+
"usage": "Badges (tipo badge), tags, checkbox md, pestañas de botón, ítems de navegación."
|
|
1356
|
+
},
|
|
1357
|
+
"radius-lg": {
|
|
1358
|
+
"value": "8px",
|
|
1359
|
+
"usage": "Botones, inputs, tooltips, ítems de menú, iconos destacados, grupos de botones."
|
|
1360
|
+
},
|
|
1361
|
+
"radius-xl": {
|
|
1362
|
+
"value": "12px",
|
|
1363
|
+
"usage": "Tarjetas, alertas, notificaciones, tarjetas de radio, menús."
|
|
1364
|
+
},
|
|
1365
|
+
"radius-2xl": {
|
|
1366
|
+
"value": "16px",
|
|
1367
|
+
"usage": "Modales, tarjetas grandes."
|
|
1368
|
+
},
|
|
1369
|
+
"radius-3xl": {
|
|
1370
|
+
"value": "24px",
|
|
1371
|
+
"usage": "Marcos de imágenes de marketing."
|
|
1372
|
+
},
|
|
1373
|
+
"radius-full": {
|
|
1374
|
+
"value": "9999px",
|
|
1375
|
+
"usage": "Pills, avatares, toggles, puntos."
|
|
1376
|
+
}
|
|
1377
|
+
};
|
|
1378
|
+
export const width = {
|
|
1379
|
+
"width-xxs": {
|
|
1380
|
+
"value": "320px",
|
|
1381
|
+
"usage": "Paneles estrechos, tooltips con texto de apoyo, columna de notificaciones."
|
|
1382
|
+
},
|
|
1383
|
+
"width-xs": {
|
|
1384
|
+
"value": "384px",
|
|
1385
|
+
"usage": "Modales pequeños y popovers."
|
|
1386
|
+
},
|
|
1387
|
+
"width-sm": {
|
|
1388
|
+
"value": "480px",
|
|
1389
|
+
"usage": "Modales (por defecto), slideouts."
|
|
1390
|
+
},
|
|
1391
|
+
"width-md": {
|
|
1392
|
+
"value": "560px",
|
|
1393
|
+
"usage": "Modales medianos, formularios de acceso."
|
|
1394
|
+
},
|
|
1395
|
+
"width-lg": {
|
|
1396
|
+
"value": "640px",
|
|
1397
|
+
"usage": "Modales grandes, formularios de ajustes."
|
|
1398
|
+
},
|
|
1399
|
+
"width-xl": {
|
|
1400
|
+
"value": "768px",
|
|
1401
|
+
"usage": "Contenido a una columna."
|
|
1402
|
+
},
|
|
1403
|
+
"width-2xl": {
|
|
1404
|
+
"value": "1024px",
|
|
1405
|
+
"usage": "Contenido de app a dos columnas."
|
|
1406
|
+
},
|
|
1407
|
+
"width-3xl": {
|
|
1408
|
+
"value": "1280px",
|
|
1409
|
+
"usage": "Ancho máximo de la app."
|
|
1410
|
+
},
|
|
1411
|
+
"width-4xl": {
|
|
1412
|
+
"value": "1440px",
|
|
1413
|
+
"usage": "Paneles anchos."
|
|
1414
|
+
},
|
|
1415
|
+
"width-5xl": {
|
|
1416
|
+
"value": "1600px",
|
|
1417
|
+
"usage": "Maquetaciones muy anchas."
|
|
1418
|
+
},
|
|
1419
|
+
"width-6xl": {
|
|
1420
|
+
"value": "1920px",
|
|
1421
|
+
"usage": "Lienzo Full HD."
|
|
1422
|
+
},
|
|
1423
|
+
"paragraph-max-width": {
|
|
1424
|
+
"value": "720px",
|
|
1425
|
+
"usage": "Ancho máximo de línea para texto de lectura."
|
|
1426
|
+
},
|
|
1427
|
+
"container-max-width-desktop": {
|
|
1428
|
+
"value": "1280px",
|
|
1429
|
+
"usage": "Ancho máximo del contenedor de página."
|
|
1430
|
+
}
|
|
1431
|
+
};
|
|
1432
|
+
export const blur = {
|
|
1433
|
+
"backdrop-blur-sm": {
|
|
1434
|
+
"value": "blur(8px)",
|
|
1435
|
+
"usage": "Cabeceras fijas."
|
|
1436
|
+
},
|
|
1437
|
+
"backdrop-blur-lg": {
|
|
1438
|
+
"value": "blur(16px)",
|
|
1439
|
+
"usage": "Fondo de los modales."
|
|
1440
|
+
},
|
|
1441
|
+
"backdrop-blur-xl": {
|
|
1442
|
+
"value": "blur(24px)",
|
|
1443
|
+
"usage": "Paneles de cristal."
|
|
1444
|
+
},
|
|
1445
|
+
"backdrop-blur-2xl": {
|
|
1446
|
+
"value": "blur(40px)",
|
|
1447
|
+
"usage": "Capas sobre cabeceras grandes."
|
|
1448
|
+
}
|
|
1449
|
+
};
|
|
1450
|
+
export const type = {
|
|
1451
|
+
"fonts": [
|
|
1452
|
+
{
|
|
1453
|
+
"family": "Geist",
|
|
1454
|
+
"file": "fonts/Geist-Variable.woff2",
|
|
1455
|
+
"weight": "100 900",
|
|
1456
|
+
"style": "normal"
|
|
1457
|
+
},
|
|
1458
|
+
{
|
|
1459
|
+
"family": "Geist",
|
|
1460
|
+
"file": "fonts/Geist-Variable-Italic.woff2",
|
|
1461
|
+
"weight": "100 900",
|
|
1462
|
+
"style": "italic"
|
|
1463
|
+
},
|
|
1464
|
+
{
|
|
1465
|
+
"family": "Bricolage Grotesque",
|
|
1466
|
+
"file": "fonts/BricolageGrotesque-Variable.woff2",
|
|
1467
|
+
"weight": "200 800",
|
|
1468
|
+
"style": "normal"
|
|
1469
|
+
},
|
|
1470
|
+
{
|
|
1471
|
+
"family": "Geist Mono",
|
|
1472
|
+
"file": "fonts/GeistMono-Variable.woff2",
|
|
1473
|
+
"weight": "100 900",
|
|
1474
|
+
"style": "normal"
|
|
1475
|
+
}
|
|
1476
|
+
],
|
|
1477
|
+
"families": {
|
|
1478
|
+
"display": "\"Bricolage Grotesque\", \"Geist\", ui-sans-serif, system-ui, sans-serif",
|
|
1479
|
+
"body": "\"Geist\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
|
|
1480
|
+
"mono": "\"Geist Mono\", ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace"
|
|
1481
|
+
},
|
|
1482
|
+
"groups": [
|
|
1483
|
+
{
|
|
1484
|
+
"name": "Display",
|
|
1485
|
+
"family": "display",
|
|
1486
|
+
"styles": [
|
|
1487
|
+
{
|
|
1488
|
+
"name": "display-2xl-semibold",
|
|
1489
|
+
"fontSize": "72px",
|
|
1490
|
+
"lineHeight": "90px",
|
|
1491
|
+
"fontWeight": 600,
|
|
1492
|
+
"letterSpacing": "-0.02em",
|
|
1493
|
+
"usage": "Titular principal, uno por página."
|
|
1494
|
+
},
|
|
1495
|
+
{
|
|
1496
|
+
"name": "display-2xl-medium",
|
|
1497
|
+
"fontSize": "72px",
|
|
1498
|
+
"lineHeight": "90px",
|
|
1499
|
+
"fontWeight": 500,
|
|
1500
|
+
"letterSpacing": "-0.02em"
|
|
1501
|
+
},
|
|
1502
|
+
{
|
|
1503
|
+
"name": "display-2xl-regular",
|
|
1504
|
+
"fontSize": "72px",
|
|
1505
|
+
"lineHeight": "90px",
|
|
1506
|
+
"fontWeight": 400,
|
|
1507
|
+
"letterSpacing": "-0.02em"
|
|
1508
|
+
},
|
|
1509
|
+
{
|
|
1510
|
+
"name": "display-xl-semibold",
|
|
1511
|
+
"fontSize": "60px",
|
|
1512
|
+
"lineHeight": "72px",
|
|
1513
|
+
"fontWeight": 600,
|
|
1514
|
+
"letterSpacing": "-0.02em",
|
|
1515
|
+
"usage": "Titular de página de aterrizaje."
|
|
1516
|
+
},
|
|
1517
|
+
{
|
|
1518
|
+
"name": "display-xl-medium",
|
|
1519
|
+
"fontSize": "60px",
|
|
1520
|
+
"lineHeight": "72px",
|
|
1521
|
+
"fontWeight": 500,
|
|
1522
|
+
"letterSpacing": "-0.02em"
|
|
1523
|
+
},
|
|
1524
|
+
{
|
|
1525
|
+
"name": "display-xl-regular",
|
|
1526
|
+
"fontSize": "60px",
|
|
1527
|
+
"lineHeight": "72px",
|
|
1528
|
+
"fontWeight": 400,
|
|
1529
|
+
"letterSpacing": "-0.02em"
|
|
1530
|
+
},
|
|
1531
|
+
{
|
|
1532
|
+
"name": "display-lg-semibold",
|
|
1533
|
+
"fontSize": "48px",
|
|
1534
|
+
"lineHeight": "60px",
|
|
1535
|
+
"fontWeight": 600,
|
|
1536
|
+
"letterSpacing": "-0.02em",
|
|
1537
|
+
"usage": "Cabecera de sección."
|
|
1538
|
+
},
|
|
1539
|
+
{
|
|
1540
|
+
"name": "display-lg-medium",
|
|
1541
|
+
"fontSize": "48px",
|
|
1542
|
+
"lineHeight": "60px",
|
|
1543
|
+
"fontWeight": 500,
|
|
1544
|
+
"letterSpacing": "-0.02em"
|
|
1545
|
+
},
|
|
1546
|
+
{
|
|
1547
|
+
"name": "display-lg-regular",
|
|
1548
|
+
"fontSize": "48px",
|
|
1549
|
+
"lineHeight": "60px",
|
|
1550
|
+
"fontWeight": 400,
|
|
1551
|
+
"letterSpacing": "-0.02em"
|
|
1552
|
+
},
|
|
1553
|
+
{
|
|
1554
|
+
"name": "display-md-semibold",
|
|
1555
|
+
"fontSize": "36px",
|
|
1556
|
+
"lineHeight": "44px",
|
|
1557
|
+
"fontWeight": 600,
|
|
1558
|
+
"letterSpacing": "-0.02em",
|
|
1559
|
+
"usage": "Título de página en páginas de marketing."
|
|
1560
|
+
},
|
|
1561
|
+
{
|
|
1562
|
+
"name": "display-md-medium",
|
|
1563
|
+
"fontSize": "36px",
|
|
1564
|
+
"lineHeight": "44px",
|
|
1565
|
+
"fontWeight": 500,
|
|
1566
|
+
"letterSpacing": "-0.02em"
|
|
1567
|
+
},
|
|
1568
|
+
{
|
|
1569
|
+
"name": "display-md-regular",
|
|
1570
|
+
"fontSize": "36px",
|
|
1571
|
+
"lineHeight": "44px",
|
|
1572
|
+
"fontWeight": 400,
|
|
1573
|
+
"letterSpacing": "-0.02em"
|
|
1574
|
+
},
|
|
1575
|
+
{
|
|
1576
|
+
"name": "display-sm-semibold",
|
|
1577
|
+
"fontSize": "30px",
|
|
1578
|
+
"lineHeight": "38px",
|
|
1579
|
+
"fontWeight": 600,
|
|
1580
|
+
"letterSpacing": "0",
|
|
1581
|
+
"usage": "Título de página dentro de la app (cabecera de página)."
|
|
1582
|
+
},
|
|
1583
|
+
{
|
|
1584
|
+
"name": "display-sm-medium",
|
|
1585
|
+
"fontSize": "30px",
|
|
1586
|
+
"lineHeight": "38px",
|
|
1587
|
+
"fontWeight": 500,
|
|
1588
|
+
"letterSpacing": "0"
|
|
1589
|
+
},
|
|
1590
|
+
{
|
|
1591
|
+
"name": "display-sm-regular",
|
|
1592
|
+
"fontSize": "30px",
|
|
1593
|
+
"lineHeight": "38px",
|
|
1594
|
+
"fontWeight": 400,
|
|
1595
|
+
"letterSpacing": "0"
|
|
1596
|
+
},
|
|
1597
|
+
{
|
|
1598
|
+
"name": "display-xs-semibold",
|
|
1599
|
+
"fontSize": "24px",
|
|
1600
|
+
"lineHeight": "32px",
|
|
1601
|
+
"fontWeight": 600,
|
|
1602
|
+
"letterSpacing": "0",
|
|
1603
|
+
"usage": "Títulos de modal en escritorio, titulares de tarjeta, cifras destacadas."
|
|
1604
|
+
},
|
|
1605
|
+
{
|
|
1606
|
+
"name": "display-xs-medium",
|
|
1607
|
+
"fontSize": "24px",
|
|
1608
|
+
"lineHeight": "32px",
|
|
1609
|
+
"fontWeight": 500,
|
|
1610
|
+
"letterSpacing": "0"
|
|
1611
|
+
},
|
|
1612
|
+
{
|
|
1613
|
+
"name": "display-xs-regular",
|
|
1614
|
+
"fontSize": "24px",
|
|
1615
|
+
"lineHeight": "32px",
|
|
1616
|
+
"fontWeight": 400,
|
|
1617
|
+
"letterSpacing": "0"
|
|
1618
|
+
}
|
|
1619
|
+
]
|
|
1620
|
+
},
|
|
1621
|
+
{
|
|
1622
|
+
"name": "Text",
|
|
1623
|
+
"family": "body",
|
|
1624
|
+
"styles": [
|
|
1625
|
+
{
|
|
1626
|
+
"name": "text-xl-regular",
|
|
1627
|
+
"fontSize": "20px",
|
|
1628
|
+
"lineHeight": "30px",
|
|
1629
|
+
"fontWeight": 400,
|
|
1630
|
+
"usage": "Párrafos de entrada, subtítulos de sección."
|
|
1631
|
+
},
|
|
1632
|
+
{
|
|
1633
|
+
"name": "text-xl-medium",
|
|
1634
|
+
"fontSize": "20px",
|
|
1635
|
+
"lineHeight": "30px",
|
|
1636
|
+
"fontWeight": 500
|
|
1637
|
+
},
|
|
1638
|
+
{
|
|
1639
|
+
"name": "text-xl-semibold",
|
|
1640
|
+
"fontSize": "20px",
|
|
1641
|
+
"lineHeight": "30px",
|
|
1642
|
+
"fontWeight": 600
|
|
1643
|
+
},
|
|
1644
|
+
{
|
|
1645
|
+
"name": "text-xl-bold",
|
|
1646
|
+
"fontSize": "20px",
|
|
1647
|
+
"lineHeight": "30px",
|
|
1648
|
+
"fontWeight": 700
|
|
1649
|
+
},
|
|
1650
|
+
{
|
|
1651
|
+
"name": "text-lg-regular",
|
|
1652
|
+
"fontSize": "18px",
|
|
1653
|
+
"lineHeight": "28px",
|
|
1654
|
+
"fontWeight": 400,
|
|
1655
|
+
"usage": "Cabeceras de sección, títulos de modal en móvil."
|
|
1656
|
+
},
|
|
1657
|
+
{
|
|
1658
|
+
"name": "text-lg-medium",
|
|
1659
|
+
"fontSize": "18px",
|
|
1660
|
+
"lineHeight": "28px",
|
|
1661
|
+
"fontWeight": 500
|
|
1662
|
+
},
|
|
1663
|
+
{
|
|
1664
|
+
"name": "text-lg-semibold",
|
|
1665
|
+
"fontSize": "18px",
|
|
1666
|
+
"lineHeight": "28px",
|
|
1667
|
+
"fontWeight": 600
|
|
1668
|
+
},
|
|
1669
|
+
{
|
|
1670
|
+
"name": "text-lg-bold",
|
|
1671
|
+
"fontSize": "18px",
|
|
1672
|
+
"lineHeight": "28px",
|
|
1673
|
+
"fontWeight": 700
|
|
1674
|
+
},
|
|
1675
|
+
{
|
|
1676
|
+
"name": "text-md-regular",
|
|
1677
|
+
"fontSize": "16px",
|
|
1678
|
+
"lineHeight": "24px",
|
|
1679
|
+
"fontWeight": 400,
|
|
1680
|
+
"usage": "Texto de lectura por defecto, valores de inputs, etiquetas de checkbox md."
|
|
1681
|
+
},
|
|
1682
|
+
{
|
|
1683
|
+
"name": "text-md-medium",
|
|
1684
|
+
"fontSize": "16px",
|
|
1685
|
+
"lineHeight": "24px",
|
|
1686
|
+
"fontWeight": 500
|
|
1687
|
+
},
|
|
1688
|
+
{
|
|
1689
|
+
"name": "text-md-semibold",
|
|
1690
|
+
"fontSize": "16px",
|
|
1691
|
+
"lineHeight": "24px",
|
|
1692
|
+
"fontWeight": 600
|
|
1693
|
+
},
|
|
1694
|
+
{
|
|
1695
|
+
"name": "text-md-bold",
|
|
1696
|
+
"fontSize": "16px",
|
|
1697
|
+
"lineHeight": "24px",
|
|
1698
|
+
"fontWeight": 700
|
|
1699
|
+
},
|
|
1700
|
+
{
|
|
1701
|
+
"name": "text-sm-regular",
|
|
1702
|
+
"fontSize": "14px",
|
|
1703
|
+
"lineHeight": "20px",
|
|
1704
|
+
"fontWeight": 400,
|
|
1705
|
+
"usage": "Por defecto en la interfaz: botones, etiquetas, celdas de tabla, pistas."
|
|
1706
|
+
},
|
|
1707
|
+
{
|
|
1708
|
+
"name": "text-sm-medium",
|
|
1709
|
+
"fontSize": "14px",
|
|
1710
|
+
"lineHeight": "20px",
|
|
1711
|
+
"fontWeight": 500
|
|
1712
|
+
},
|
|
1713
|
+
{
|
|
1714
|
+
"name": "text-sm-semibold",
|
|
1715
|
+
"fontSize": "14px",
|
|
1716
|
+
"lineHeight": "20px",
|
|
1717
|
+
"fontWeight": 600
|
|
1718
|
+
},
|
|
1719
|
+
{
|
|
1720
|
+
"name": "text-sm-bold",
|
|
1721
|
+
"fontSize": "14px",
|
|
1722
|
+
"lineHeight": "20px",
|
|
1723
|
+
"fontWeight": 700
|
|
1724
|
+
},
|
|
1725
|
+
{
|
|
1726
|
+
"name": "text-xs-regular",
|
|
1727
|
+
"fontSize": "12px",
|
|
1728
|
+
"lineHeight": "18px",
|
|
1729
|
+
"fontWeight": 400,
|
|
1730
|
+
"usage": "Badges sm, tags, tooltips, pies de foto."
|
|
1731
|
+
},
|
|
1732
|
+
{
|
|
1733
|
+
"name": "text-xs-medium",
|
|
1734
|
+
"fontSize": "12px",
|
|
1735
|
+
"lineHeight": "18px",
|
|
1736
|
+
"fontWeight": 500
|
|
1737
|
+
},
|
|
1738
|
+
{
|
|
1739
|
+
"name": "text-xs-semibold",
|
|
1740
|
+
"fontSize": "12px",
|
|
1741
|
+
"lineHeight": "18px",
|
|
1742
|
+
"fontWeight": 600
|
|
1743
|
+
},
|
|
1744
|
+
{
|
|
1745
|
+
"name": "text-xs-bold",
|
|
1746
|
+
"fontSize": "12px",
|
|
1747
|
+
"lineHeight": "18px",
|
|
1748
|
+
"fontWeight": 700
|
|
1749
|
+
}
|
|
1750
|
+
]
|
|
1751
|
+
},
|
|
1752
|
+
{
|
|
1753
|
+
"name": "Code",
|
|
1754
|
+
"family": "mono",
|
|
1755
|
+
"styles": [
|
|
1756
|
+
{
|
|
1757
|
+
"name": "code-sm",
|
|
1758
|
+
"fontSize": "14px",
|
|
1759
|
+
"lineHeight": "20px",
|
|
1760
|
+
"fontWeight": 400,
|
|
1761
|
+
"usage": "Bloques de código y código en línea. Geist Mono, de la misma familia que el texto."
|
|
1762
|
+
},
|
|
1763
|
+
{
|
|
1764
|
+
"name": "code-xs",
|
|
1765
|
+
"fontSize": "12px",
|
|
1766
|
+
"lineHeight": "18px",
|
|
1767
|
+
"fontWeight": 400,
|
|
1768
|
+
"usage": "Código en línea dentro de texto pequeño."
|
|
1769
|
+
}
|
|
1770
|
+
]
|
|
1771
|
+
}
|
|
1772
|
+
]
|
|
1773
|
+
};
|
|
1774
|
+
export const tokens = colors;
|
|
1775
|
+
export const seriesColors = ["utility-brand-600", "utility-brand-400", "utility-brand-200", "utility-sky-500", "utility-pink-500", "utility-neutral-400"];
|