Styling
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á diseñado para ayudar a desarrolladores y diseñadores a crear interfaces consistentes y alineadas con la marca de forma rápida y segura.
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 bloques de construcción fundamentales para todos los estilos de componentes y permiten personalización global con un esfuerzo mínimo.
Para soportar estilos más avanzados, webforJ aprovecha las CSS Shadow Parts, permitiendo que los internos de los componentes sean estilizados selectivamente sin romper la encapsulación. Esto otorga 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 un tema visual limpio y claro, pero cada aspecto se puede adaptar 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
La biblioteca de Figma DWC es el recurso de diseño oficial para crear aplicaciones web modernas de calidad empresarial. Incluye un conjunto completo de componentes, estilos de tipografía y tokens de color que se alinean con el sistema de diseño DWC. Los diseñadores y desarrolladores pueden utilizar esta biblioteca para construir interfaces visualmente consistentes, amigables para el usuario, con un comportamiento de componente predecible, espaciado preciso y contraste de color accesible.
Temas
📄️ CSS Variables
Las variables CSS juegan un papel central en la personalización de la apariencia de los componentes de webforJ. Estas variables almacenan valores reutilizables como colores, tamaños de fuente y espaciado, que se pueden aplicar de manera consistente en tu aplicación.
📄️ 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.
📄️ Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
📄️ Colors
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.
📄️ Typography
Los tokens de tipografía se utilizan para mantener un conjunto consistente de estilos de fuente en toda tu aplicación.
📄️ Sizing and Spacing
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.
📄️ Border
Las propiedades de borde se utilizan para controlar el estilo y el ancho del borde del componente. Consulta los estilos de borde disponibles.
📄️ Shadows
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.
📄️ Surfaces
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.
📄️ State
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.
📄️ Transitions & Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.