@omaresquivel/design-system
Sistema de diseño para estandarizar estilos y componentes en aplicaciones Vue 3. Su núcleo son tokens semánticos sobrescribibles y una hoja CSS compilada; los componentes Ds* ofrecen implementaciones accesibles y consistentes sobre esos fundamentos.
Requisitos
- Node.js 22 o posterior.
- Vue 3.5 o posterior en la aplicación consumidora.
- Navegadores modernos compatibles con Tailwind CSS v4 y
<dialog>.
Desarrollo
npm install
npm run dev
El playground queda disponible en la dirección indicada por Vite. Incluye catálogo, perfil, configuración, formulario largo y estados de panel.
Validación
npm run typecheck
npm test
npm run build
npm run build genera la librería en dist/ y el catálogo en dist-playground/.
Consumo
Mientras el paquete sea privado puede instalarse desde una ruta local:
npm install ../design_system
Importa componentes y la hoja compilada una sola vez:
import { DsButton, DsTextInput } from "@omaresquivel/design-system";
import "@omaresquivel/design-system/style.css";
También puede registrarse el catálogo completo:
import { createApp } from "vue";
import { DesignSystem } from "@omaresquivel/design-system";
import "@omaresquivel/design-system/style.css";
createApp(App).use(DesignSystem).mount("#app");
Se recomienda usar importaciones nombradas para conservar tree-shaking. La personalización se realiza sobrescribiendo variables --ds-*; no es necesario instalar Tailwind en la aplicación consumidora.
Documentación
- Investigación y decisiones
- Fundamentos y tokens
- Catálogo de componentes
- Accesibilidad
- Instalación y theming
- Roadmap
El paquete se publica en el registro npm de Gitea y no contiene lógica de negocio, router, almacenamiento ni acceso a APIs.