Filosofía de diseño

lh-ui-plus toma como filosofía de diseño «la belleza de la tradición, el cimiento del código», integrando la estética tradicional china en la práctica moderna de la ingeniería front-end.

Estética china tradicional (国风, estilo chino)

Sistema de colores

Color	Origen de inspiración	Valor	Uso
靛蓝 (azul índigo)	Esmalte de la porcelana azul y blanco	#2B4C7C	Color principal (--lh-primary-color)
松花绿 (verde pino)	El verde fresco de las sombras del bambú	#5B8C5A	Color de éxito (--lh-success-color)
藤黄 (amarillo herbáceo)	El dorado de las hojas otoñales	#C4A35A	Color de advertencia (--lh-warning-color)
朱砂 (cinabrio)	El rojo de la pasta de los sellos	#B23A3A	Color de peligro (--lh-danger-color)
黛色 (gris tinta)	El toque tenue de la tinta china	#7A7A7A	Color de información (--lh-info-color)
水墨 (tinta china)	Los cinco tonos de la tinta	#2C2C2C	Color del texto (--lh-text-color-primary)
宣纸 (blanco papel de arroz)	El blanco del papel de arroz antiguo	#FAF6F0	Color de fondo (--lh-bg-color)

La paleta completa y su jerarquía se encuentran en Personalización de temas.

Fondos con patrón

La biblioteca incorpora 6 fondos SVG con patrones tradicionales (se aplican a través de --lh-bg-pattern, cuyo valor es la variable CSS correspondiente):

• willow — patrón de hojas de sauce (suave y elegante, --lh-pattern-willow)
• cloud — patrón de nubes propicias (de buen augurio y afortunado, --lh-pattern-cloud)
• water — patrón de ondas de agua (fluido y natural, --lh-pattern-water)
• snow — patrón de copos de nieve (hexagonal y cristalino, --lh-pattern-snow)
• plum — patrón de flores de ciruelo (noble y sobrio, --lh-pattern-plum)
• bamboo — patrón de hojas de bambú (resiliente e inquebrantable, --lh-pattern-bamboo)

Arquitectura multi-framework

La lógica principal se ha extraído a funciones puras, desacopladas del framework:

@lh-ui/share           Capa de lógica pura + fuente de estilos (sin dependencias de framework, se incorpora como dependencia npm)
packages/components/    Capa de encapsulamiento de componentes Vue 3
packages/composables/   Composables específicos de Vue

Impulsado por TypeScript

Seguridad de tipos TypeScript en toda la cadena:

• Definiciones fuertemente tipadas de Props/Emit
• Firmas de las devoluciones de llamada de eventos con sus tipos de carga
• Autocompletado inteligente en el IDE
• La cobertura de tipos se protege con pnpm typecheck (los tipos utilitarios dinámicos como LhSxProps conservan firmas de índice controladas)

Sistema de temas con variables CSS

Más de 88 tokens de diseño CSS, con el prefijo de nomenclatura --lh-*. Admite el cambio de tema en tiempo real, el modo oscuro y la configuración global con ConfigProvider.

Internacionalización

Sistema de configuración ConfigProvider integrado, que permite gestionar de forma unificada varios idiomas. Paquetes de idioma completos integrados actualmente: zh-CN y en-US; ja-JP, ko-KR, de-DE y fr-FR están registrados como marcadores de posición estructurales (las partes no traducidas recurren temporalmente al inglés) y se pueden completar siguiendo Internacionalización.

Accesibilidad

• Navegación con teclado
• Atributos ARIA
• Contraste de color WCAG 2.1 AA

La belleza de la tradición, el cimiento del código.