El objetivo es dar a todas las aplicaciones de VADAVO un estilo uniforme y una identidad visual reconocible.
Se implementa en una hoja de estilo CSS y en un módulo de custom elements; esta documentación es su referencia.
El sistema está en pre-lanzamiento. La versión 2 se está escribiendo y ya se puede integrar, pero todavía cambia: mientras dure esta etapa una clase CSS puede dejar de existir y un custom element puede cambiar sus atributos de una publicación a la siguiente.
Cada versión se numera MAJOR.MINOR.PATCH siguiendo Semantic Versioning.
| MAJOR | Cambio incompatible con las versiones anteriores: una clase CSS que deja de existir, o un custom element que cambia sus atributos. |
| MINOR | Añadido compatible con las versiones anteriores. |
| PATCH | Corrección menor, sin nada nuevo y compatible con las versiones anteriores. |
Las publicaciones del pre-lanzamiento se numeran 2.0.0-preN, donde N empieza en 1 y crece con cada una. Una pre puede traer cambios incompatibles con la anterior sin que eso suba la MAJOR: el esquema de arriba empieza a aplicarse en la 2.0.0.
Cada publicación está en las releases del repositorio, con un fichero por artefacto y un .zip que los reúne todos.
ds.vadavo.<versión>.min.css | La hoja de estilo del sistema: los tokens semánticos, los elementos base y las clases del catálogo. |
ds.vadavo.dark.<versión>.min.css | El tema oscuro, que redefine los tokens semánticos con sus valores oscuros. |
ds.vadavo.<versión>.min.js | Los custom elements, como módulo ES. |
ds.vadavo.<versión>.zip | Los tres ficheros anteriores, el logotipo y los iconos. |
Cada fichero tiene una URL fija por versión, formada por el nombre del tag y el del fichero:
https://github.com/vadavo/Design-System/releases/download/v2.0.0-pre1/ds.vadavo.2.0.0-pre1.min.css| Fundamentos | La base del sistema: la arquitectura de una pieza, los tokens, el color, la tipografía, los temas, las superficies de marca y los elementos base. |
| Marca | La identidad de VADAVO: el logotipo y los iconos. |
| Catálogo | Las piezas que componen una página, agrupadas por su función: estructura, acciones, formularios, navegación, contenedores, contenido y feedback. |
| Patrones | Composiciones de varias piezas del catálogo que resuelven una situación concreta de una página. |
| Internos | Las clases base de las que se construyen las piezas del catálogo, y los elementos y hojas de estilo que comparten varias de ellas. |
Cada pieza del catálogo es un custom element con su propia etiqueta (<vadavo-card>) o una clase que se aplica sobre marcado corriente (<span class="badge">). El criterio que decide cuál es cada una está en Arquitectura.