Styling
webforJ est livré avec un système de design complet nommé DWC. Ce n'est pas qu'un simple thème, c'est un système structuré et extensible qui régit le langage visuel de votre application. DWC est conçu pour aider les développeurs et les designers à créer rapidement et avec confiance des interfaces cohérentes, alignées à la marque.
Au cœur de DWC se trouve un ensemble de variables CSS soigneusement conçues (jetons de design) qui couvrent des éléments visuels clés tels que les couleurs, la typographie, les bordures et les espacements. Ces jetons servent de blocs de construction fondamentaux pour tous les styles de composants et permettent une personnalisation mondiale avec un effort minimal.
Pour soutenir un style plus avancé, webforJ utilise les CSS Shadow Parts, permettant de styliser sélectivement les éléments internes des composants sans rompre l'encapsulation. Cela donne aux équipes un contrôle précis sur l'apparence des composants, même dans des applications plus grandes.
DWC comprend également une palette de couleurs personnalisable et par défaut un thème visuel épuré et léger, mais chaque aspect peut être adapté au style de votre marque ou produit.
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 design Figma
La bibliothèque Figma DWC est la ressource de design officielle pour créer des applications web modernes de niveau entreprise. Elle comprend un ensemble complet de composants, de styles typographiques et de jetons de couleur qui s'alignent avec le système de design DWC. Les designers et les développeurs peuvent utiliser cette bibliothèque pour construire des interfaces utilisateur cohérentes sur le plan visuel, avec un comportement de composant prévisible, un espacement précis et un contraste de couleur accessible.
Thèmes
CSS Variables
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Shadow Parts offre aux développeurs un moyen de styliser les éléments à l'intérieur du DOM d'ombre d'un composant depuis l'extérieur, tout en préservant l'encapsulation.
Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colors
webforJ fournit un système de couleurs basé sur les propriétés CSS personnalisées. Ces variables de couleur maintiennent un style visuel cohérent à travers votre application tout en vous donnant un contrôle total pour personnaliser les palettes selon vos besoins en design.
Typography
Les tokens typographiques sont utilisés pour maintenir un ensemble cohérent de styles de police dans toute votre application.
Sizing and Spacing
Les jetons d'espacement et de taille sont utilisés pour fournir un espacement et une taille cohérents dans votre application. Toutes les propriétés de taille et d'espacement sont définies en rem.
Border
Les propriétés de bordure sont utilisées pour contrôler le style et la largeur de la bordure du composant. Voir les styles de bordure disponibles.
Shadows
Les propriétés d'ombre ajoutent des effets d'ombre autour du cadre d'un élément. Les ombres signifient des éléments qui sont superposés les uns aux autres dans l'interface utilisateur.
Surfaces
DWC définit trois niveaux de surfaces qui sont utilisés pour organiser la hiérarchie de l'interface utilisateur combinée avec shadows. Toutes les palette colors sont testées pour avoir un contraste suffisant avec ces surfaces.
State
Les jetons d'état définissent comment les composants réagissent visuellement à l'interaction de l'utilisateur, par exemple lorsque ceux-ci sont désactivés ou en focus. Ces variables aident à assurer un comportement et un style cohérents à travers tous les éléments de l'interface utilisateur, et peuvent être facilement personnalisées pour correspondre à votre système de design.
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.