Estilos
webforJ se envía con un sistema de diseño integral llamado DWC. Es más que solo un tema, es un sistema estructurado y extensible que gobierna el lenguaje visual de tu aplicación. DWC está construido para ayudar a desarrolladores y diseñadores a crear interfaces consistentes y alineadas con la marca de manera rápida y confiada.
En su núcleo, DWC proporciona un conjunto de variables CSS cuidadosamente diseñadas (tokens de diseño) que cubren elementos visuales clave como colores, tipografía, bordes y espaciado. Estos tokens sirven como los bloques de construcción fundamentales para todos los estilos de componentes y permiten una personalización global con un esfuerzo mínimo.
Para soportar un estilo más avanzado, webforJ utiliza CSS Shadow Parts, permitiendo que los internals de los componentes sean estilizados selectivamente sin romper la encapsulación. Esto proporciona a los equipos un control detallado sobre cómo aparecen los componentes, incluso en aplicaciones más grandes.
DWC también incluye una paleta de colores personalizable y por defecto tiene un tema visual limpio y claro, pero cada aspecto puede ser adaptado al estilo de tu marca o producto.
The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:
- "Theme this app with a blue palette."
- "Style the dwc-button to match the brand guidelines."
- "Make this layout tighter - adjust spacing and typography."
Kit de diseño de Figma
El Kit de Diseño DWC es el recurso oficial de Figma para diseñar aplicaciones webforJ. Cubre cada componente de DWC con sus temas, expansiones y estados, junto con las paletas de colores, tipografía, espaciado y tokens de sombra del sistema de diseño como variables y estilos de Figma en modo claro y oscuro. Los diseñadores y desarrolladores pueden usar el kit para construir interfaces visualmente consistentes, amigables para el usuario, con un comportamiento de componente predecible, espaciado preciso y contraste de color accesible.
Temas
Variables CSS
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Partes de Sombra le dan a los desarrolladores una forma de estilizar elementos dentro del shadow DOM de un componente desde el exterior, mientras se preserva la encapsulación.
Temas
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colores
webforJ proporciona un sistema de color basado en propiedades personalizadas de CSS. Estas variables de color mantienen un estilo visual coherente a lo largo de tu aplicación mientras te dan control total para personalizar paletas según las necesidades de tu diseño.
Tipografía
Los tokens de tipografía se utilizan para mantener un conjunto consistente de estilos de fuente en toda tu aplicación.
Tamaños y espaciado
Los tokens de espaciado y tamaño se utilizan para proporcionar un espaciado y un tamaño consistentes en su aplicación. Todas las propiedades de tamaño y espaciado se definen en rem.
Borde
Las propiedades de borde se utilizan para controlar el estilo y el ancho del borde del componente. Consulta los estilos de borde disponibles.
Sombras
Las propiedades de sombra añaden efectos de sombra alrededor del marco de un elemento. Las sombras indican elementos que están apilados uno encima del otro en la interfaz de usuario.
Superficies
DWC define tres niveles de superficies que se utilizan para organizar la jerarquía de la interfaz de usuario combinada con shadows. Todos los palette colors se prueban para tener suficiente contraste con estas superficies.
Estado
Los tokens de estado definen cómo los componentes responden visualmente a la interacción del usuario, como cuando están deshabilitados o enfocados. Estas variables ayudan a garantizar un comportamiento y un estilo consistentes en todos los elementos de la interfaz de usuario, y se pueden personalizar fácilmente para que coincidan con su sistema de diseño.
Transiciones y easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Lenguajes de estilos
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.