Styling
webforJ se envía con un sistema de diseño completo llamado DWC. Es más que un tema, es un sistema estructurado y extensible que rige el lenguaje visual de tu aplicación. DWC está construido para ayudar a desarrolladores y diseñadores a crear interfaces coherentes y alineadas con la marca de manera rápida y confiable.
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 los componentes y permiten una personalización global con un esfuerzo mínimo.
Para soportar un estilo más avanzado, webforJ aprovecha las Partes Sombra de CSS, lo que permite estilizar selectivamente los internos de los componentes sin romper la encapsulación. Esto otorga a los equipos un control detallado sobre cómo aparecen los componentes, incluso a través de aplicaciones más grandes.
DWC también incluye una paleta de colores personalizable y por defecto muestra un tema visual limpio y ligero, pero cada aspecto puede adaptarse 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 DWC de Figma es el recurso de diseño oficial para crear aplicaciones web modernas de grado 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. Diseñadores y desarrolladores pueden usar esta biblioteca para construir interfaces visualmente coherentes, amigables para el usuario, con un comportamiento de componente predecible, espaciado preciso y contraste de color accesible.
Temas
CSS Variables
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.
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.
Styling languages
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.