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 check

npm run build genera la librería en dist/ y el catálogo en dist-playground/. Usa npm run test:coverage para revisar la cobertura antes de ampliar el catálogo.

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

El paquete se publica en el registro npm de Gitea y no contiene lógica de negocio, router, almacenamiento ni acceso a APIs.