Styling
webforJ propose 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 des é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 composant et permettent une personnalisation globale avec un effort minimal.
Pour soutenir un style plus avancé, webforJ utilise les CSS Shadow Parts, permettant aux internes des composants d'être stylisés de manière sélective sans briser 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 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
La bibliothèque Figma DWC est la ressource officielle de design pour créer des applications web modernes de niveau entreprise. Elle comprend un ensemble complet de composants, de styles de typographie et de tokens de couleur qui s'alignent sur le système de design DWC. Les designers et les développeurs peuvent utiliser cette bibliothèque pour construire des interfaces visuellement cohérentes, conviviales, avec un comportement de composant prévisible, un espacement précis et un contraste de couleur accessible.
Thèmes
📄️ CSS Variables
Les variables CSS jouent un rôle central dans la personnalisation de l'apparence des composants webforJ. Ces variables stockent des valeurs réutilisables telles que des couleurs, des tailles de police et des espacements, qui peuvent être appliquées de manière cohérente dans votre application.
📄️ 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.