Styling
webforJ se envía con un sistema de diseño completo llamado DWC. No es 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 manera 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 los componentes y permiten la 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 se estilicen 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, presenta un tema visual limpio y claro, pero cada aspecto se puede adaptar al estilo de tu marca o producto.
Figma Design Kit
La biblioteca DWC Figma es el recurso de diseño oficial para crear aplicaciones web modernas y de nivel empresarial. Incluye un conjunto completo de componentes, estilos tipográficos y tokens de color que se alinean con el sistema de diseño DWC. Con esta biblioteca, diseñadores y desarrolladores pueden construir interfaces visualmente consistentes y amigables para el usuario que equilibran la funcionalidad con una experiencia de usuario refinada.
Topics
📄️ 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
webforJ incluye tres temas de aplicación integrados y admite la definición de sus propios temas personalizados. Los temas predeterminados son:
📄️ Colors
webforJ proporciona un sistema de color basado en propiedades personalizadas de CSS. Estas variables de color mantienen un estilo visual consistente en toda tu aplicación mientras te brindan control total para personalizar paletas según tus necesidades de diseño.
📄️ Typography
Los tokens de tipografía se utilizan para mantener un conjunto consistente de estilos de fuente a lo largo de tu aplicación.
📄️ Sizing and Spacing
Tokens de espaciado y tamaño se utilizan para proporcionar un espaciado y tamaño consistentes en tu 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 bordes disponibles.
📄️ Shadows
Las propiedades de sombra se utilizan para agregar efectos de sombra alrededor del marco de un elemento. Puedes establecer múltiples efectos separados por comas. En la mayoría de los casos, las sombras se utilizan para significar elementos que están superpuestos en la interfaz de usuario.
📄️ Surfaces
Hay tres niveles de superficies utilizados para organizar la jerarquía de la interfaz de usuario, a menudo combinados con sombras. Todos los colores de la paleta se prueban para proporcionar un contraste suficiente contra 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
Las variables de transición se utilizan para proporcionar duraciones de animación consistentes en toda su aplicación. Controlan cuánto tiempo tarda en completarse una animación.