Mise en forme
webforJ est livré avec un système de conception complet nommé DWC. Bien plus qu’un simple thème, il s’agit d’un système structuré et extensible qui définit le langage visuel de votre application. DWC aide les développeurs et les concepteurs à créer rapidement et en toute confiance des interfaces cohérentes, fidèles à leur marque.
Au cœur de DWC se trouve un ensemble de variables CSS (jetons de conception) soigneusement conçues, qui couvrent des éléments visuels clés comme les couleurs, la typographie, les bordures et l’espacement. Ces jetons constituent les éléments de base de tous les styles des composants et permettent une personnalisation globale avec un minimum d’effort.
Pour permettre un style plus avancé, webforJ utilise les CSS Shadow Parts, qui permettent de styliser certains éléments internes des composants sans compromettre l’encapsulation. Les équipes disposent ainsi d’un contrôle précis sur l’apparence des composants, même dans les applications de grande envergure.
DWC comprend également une palette de couleurs personnalisable et adopte par défaut un thème visuel clair et épuré, mais chaque aspect peut être adapté à l’identité de votre marque ou au style de votre 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 conception Figma
Le kit de conception DWC est la ressource Figma officielle pour concevoir des applications webforJ. Il couvre chaque composant DWC, avec ses thèmes, ses tailles et ses états, ainsi que les palettes de couleurs, la typographie, l’espacement et les jetons d’ombre du système de conception, sous forme de variables et de styles Figma en modes clair et sombre. Les concepteurs et les développeurs peuvent utiliser ce kit pour créer des interfaces cohérentes et conviviales, avec un comportement prévisible des composants, un espacement précis et un contraste des couleurs accessible.
Sujets
Variables CSS
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Parties de l’ombre
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.
Continuez à apprendre.
ArticleA Java design system built in: webforJ DWC tokens and themes
ArticleDark mode in a Java web app: themes, toggle, saved choice
ArticlewebforJ Components: What Ships With the Framework
ArticleTransform Your webforJ App with Professional Theming
ArticleBuilding Better CSS with webforJ's Styling System