- https://gitea.autobyte.dev
-
Full stack developer
- Joined on
2026-06-19
@omaresquivel/design-system (0.2.0)
Installation
@omaresquivel:registry=https://gitea.autobyte.dev/api/packages/omararch48/npm/npm install @omaresquivel/design-system@0.2.0"@omaresquivel/design-system": "0.2.0"About this package
@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 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
- Investigación y decisiones
- Fundamentos y tokens
- Catálogo de componentes
- Accesibilidad
- Instalación y theming
- Herramientas interactivas
- Roadmap
El paquete se publica en el registro npm de Gitea y no contiene lógica de negocio, router, almacenamiento ni acceso a APIs.
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| @tailwindcss/vite | ^4.3.3 |
| @testing-library/vue | ^8.1.0 |
| @vitejs/plugin-vue | ^6.0.8 |
| @vitest/coverage-v8 | ^4.1.10 |
| @vue/test-utils | ^2.4.11 |
| jsdom | ^30.0.1 |
| prettier | ^3.9.6 |
| tailwindcss | ^4.3.3 |
| type-fest | ^2.19.0 |
| typescript | ^6.0.0 |
| vite | ^8.2.1 |
| vite-plugin-dts | ^5.0.3 |
| vitest | ^4.1.10 |
| vue | ^3.5.41 |
| vue-tsc | ^3.3.9 |
Peer Dependencies
| ID | Version |
|---|---|
| vue | ^3.5.0 |