Styling
webforJ est livré avec un système de conception complet nommé DWC. Ce n'est pas seulement un thème, c'est un système structuré et extensible qui gouverne le langage visuel de votre application. DWC est conçu pour aider les développeurs et les designers à créer rapidement et en toute confiance des interfaces cohérentes et alignées sur la marque.
Au cœur de DWC, se trouve un ensemble de variables CSS soigneusement conçues (tokens de conception) 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 soutenir un style plus avancé, webforJ utilise les CSS Shadow Parts, permettant de styliser sélectivement les 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 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.
Figma Design Kit
La bibliothèque Figma DWC est la ressource de conception officielle pour créer des applications web modernes de niveau entreprise. Elle comprend un ensemble complet de composants, de styles typographiques et de tokens de couleurs qui s'alignent sur le système de conception DWC. Avec cette bibliothèque, les designers et développeurs peuvent créer des interfaces visuellement cohérentes et conviviales qui équilibrent fonctionnalité et expérience utilisateur raffinée.
Topics
📄️ 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
webforJ inclut trois thèmes d'application intégrés et prend en charge la définition de vos propres thèmes personnalisés. Les thèmes par défaut sont :
📄️ Colors
webforJ fournit un système de couleurs basé sur des 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 de 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 tokens de taille et d'espacement 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 sont utilisées pour ajouter des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Dans la plupart des cas, les ombres sont utilisées pour signifier des éléments qui sont superposés dans l'interface utilisateur.
📄️ Surfaces
Il existe trois niveaux de surfaces utilisés pour organiser la hiérarchie de l'interface utilisateur, souvent combinés avec ombres. Toutes les couleurs de palette sont testées pour fournir un contraste suffisant par rapport à ces surfaces.
📄️ State
Les jetons d'état définissent comment les composants réagissent visuellement à l'interaction de l'utilisateur—par exemple lorsqu'ils sont désactivés ou mis au point. Ces variables aident à garantir un comportement et un style cohérents à travers tous les éléments de l'UI, et peuvent être facilement personnalisées pour correspondre à votre système de design.
📄️ Transitions & Easing
Les variables de transition sont utilisées pour fournir des durées d'animation cohérentes dans votre application. Elles contrôlent combien de temps une animation met à se terminer.