Style
webforJ est livré avec un système de design complet nommé DWC. Ce n'est pas seulement un 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 des interfaces cohérentes et alignées sur la marque rapidement et en toute confiance.
Au cœur de DWC se trouve un ensemble de variables CSS soigneusement conçues (tokens de design) qui couvrent les éléments visuels clés tels que les couleurs, la typographie, les bordures et l'espacement. Ces tokens servent de blocs de construction fondamentaux pour tous les styles de composants et permettent une personnalisation globale avec un minimum d'effort.
Pour supporter 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 à travers des applications plus larges.
DWC comprend également une palette de couleurs personnalisable et passe par défaut à un thème visuel clair 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
Le Kit de Design DWC est la ressource officielle Figma pour la conception d'applications webforJ. Il couvre chaque composant DWC avec ses thèmes, ses étendues et ses états, ainsi que les palettes de couleurs, la typographie, l'espacement et les tokens d'ombre du système de design en tant que variables et styles Figma en mode clair et sombre. Les designers et développeurs peuvent utiliser le kit pour créer des interfaces visuellement cohérentes, conviviales avec un comportement des composants prévisible, un espacement précis et un contraste de couleur accessible.
Sujets
Variables CSS
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.
Thèmes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Couleurs
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.
Typographie
Les tokens typographiques sont utilisés pour maintenir un ensemble cohérent de styles de police dans toute votre application.
Dimensions et espacement
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.
Bordure
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.
Ombres
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.
État
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 et easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Langages de style
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.