Preview 06 · Componentes

Acciones, pestañas y navegación

Una acción, un botón sólido. En toda la vista solo .btn--primary lleva relleno; los demás accesos a la misma tarea son botón normal, fantasma o enlace .linkish, y su texto no se repite palabra por palabra.

assets/siga.css:499–596assets/siga.js · renderSidebar()
El botón sólido invierte su fórmula en oscuro: acento brillante con tinta oscura

Jerarquía en una barra real

Tal como aparece en programa-menu.html: tres accesos a la misma pantalla y un solo relleno.

10 – 14 de agosto

Publicado 5 centros
Ver el historial de tarifas

Estados del botón sólido

Fondo y primer plano se definen en pareja y el contraste sube en hover, nunca baja. Se muestran como muestras y no como botones para no repetir un relleno de la misma acción en una vista.

Guardar cambios
--solid-bg · 5.71:1
Guardar cambios
:hover · 8.23:1
Guardar cambios
:active
Guardar cambios
:disabled · único estado que puede perder contraste
Duplicar
.btn · reposo
Duplicar
:hover · el fondo se mueve y la tinta se oscurece
Duplicar
:active
Duplicar
:focus-visible · 2px --accent-ink

Conmutadores

Control segmentado

Pista hundida, pulgar elevado. El estado vive en aria-pressed.

Pestañas

Subrayado de 2px en --fg-strong, no en el acento: la selección es estructura, no énfasis de color.

5 tipos activos · tarifas con historial fechado.

Carril de navegación

El único plano oscuro del tema claro. Sobre superficie oscura la línea es luz translúcida (--rail-line), nunca un borde oscuro sólido, y el aro de foco se invierte a --rail-fg. El seleccionado se marca con aria-current="page".

Iconografía

43 glifos monolineales de 24×24, trazo 1,6px, currentColor, extremos redondeados. Nunca un emoji. El sprite compilado vive en build/siga-icons.svg.

20 de 40 mostrados · índice completo en build/icons.json