Estilos
webforJ incluye un completo sistema de diseño llamado DWC. Es mucho más que un tema: es un sistema estructurado y extensible que define el lenguaje visual de tu aplicación. DWC está diseñado para ayudar a desarrolladores y diseñadores a crear interfaces coherentes y alineadas con la marca de forma rápida y segura.
En esencia, DWC proporciona un conjunto de variables CSS (tokens de diseño) cuidadosamente diseñadas que abarcan elementos visuales clave, como colores, tipografía, bordes y espaciado. Estos tokens son los componentes básicos de todos los estilos de los componentes y permiten personalizar el conjunto con un mínimo esfuerzo.
Para facilitar estilos más avanzados, webforJ usa CSS Shadow Parts, que permiten aplicar estilos selectivamente a los elementos internos de los componentes sin romper el encapsulamiento. Así, los equipos pueden controlar con precisión la apariencia de los componentes, incluso en aplicaciones de gran tamaño.
DWC también incluye una paleta de colores personalizable y, de forma predeterminada, un tema visual claro y sencillo, pero todos sus aspectos se pueden adaptar a la marca o al estilo de tu 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 DWC Design Kit es el recurso oficial de Figma para diseñar aplicaciones webforJ. Incluye todos los componentes de DWC, con sus temas, variantes y estados, además de las paletas de colores, la tipografía, el espaciado y los tokens de sombra del sistema de diseño, disponibles como variables y estilos de Figma para los modos claro y oscuro. Los diseñadores y desarrolladores pueden usar el kit para crear interfaces coherentes desde el punto de vista visual y fáciles de usar, con un comportamiento predecible de los componentes, un espaciado preciso y un contraste de color accesible.
Temas
Variables CSS
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Partes de sombra
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.
Sigue aprendiendo
ArtículoA Java design system built in: webforJ DWC tokens and themes
ArtículoDark mode in a Java web app: themes, toggle, saved choice
ArtículowebforJ Components: What Ships With the Framework
ArtículoTransform Your webforJ App with Professional Theming
ArtículoBuilding Better CSS with webforJ's Styling System