@neus-al/via-pro-design-system

Paquete de estilos base de VIA-Pro para unificar visualmente desktop, browser y web.

Al instalar, el paquete inicializa una estructura base en la raíz del proyecto consumidor:

• assets
• constants
• hooks

Instalación

npm i @neus-al/via-pro-design-system

Si quieres regenerar estructura (sobrescribiendo), ejecuta:

npm run init-project --prefix node_modules/@neus-al/via-pro-design-system

Uso CSS

En tu entrypoint:

import "@neus-al/via-pro-design-system/styles.css";

Tokens y utilidades

import { viaBrand, viaAssets } from "@neus-al/via-pro-design-system/constants";
import { Colors } from "@neus-al/via-pro-design-system/constants/colors";
import icons from "@neus-al/via-pro-design-system/constants/icons";
import images from "@neus-al/via-pro-design-system/constants/images";

Hook de tema (React DOM)

import { useViaTheme } from "@neus-al/via-pro-design-system/hooks/useViaTheme";
import { useThemeColor } from "@neus-al/via-pro-design-system/hooks/useThemeColor";

Publicacion

Antes de publicar se ejecuta automaticamente prepack, que sincroniza dist/index.css desde:

• ../../via-pro-design-system.css

Activos visuales

La especificacion de imagenes requeridas esta en:

• assets/manifest.json

Activos minimos del paquete:

• logo-horizontal (3 tamanos)
• logo-symbol (3 tamanos)
• favicon-pack (derivado de logo-symbol)

La estructura assets se crea con subcarpetas:

• fonts/
• icons/
• images/

Para fondos de UI no necesitas imagenes obligatorias:

• usa .bg-via-tech para hero/sections tecnicas
• usa .bg-via-auth para pantallas de autenticacion

Fuentes reales (segun via-pro-design-system.css)

El paquete incluye fuentes TTF reales para las familias usadas por el design system:

• assets/fonts/SpaceGrotesk-Variable.ttf
• assets/fonts/JetBrainsMono-Variable.ttf
• assets/fonts/Syne-Variable.ttf

Al instalar el paquete, estas fuentes se copian a la raiz del frontend en assets/fonts.

Nota: este paquete distribuye las fuentes; cada frontend debe registrarlas/cargarlas segun su stack (web, vite, astro, expo, etc.).

Iconos base

El paquete tambien incluye iconos PNG base en assets/icons (home, profile, search, plus, menu, arrows, upload, logout, eye, eye-hide, play, bookmark).

Nota: Para mobile (React Native) esta misma paleta debe mapearse en tokens JS/NativeWind; CSS no aplica directamente en React Native.

Licencia

MIT - Copyright (c) 2026 NEUS-AL.