Styling
webforJ wird mit einem umfassenden Designsysten namens DWC ausgeliefert. Es ist mehr als nur ein Thema; es ist ein strukturiertes, erweiterbares System, das die visuelle Sprache Ihrer App steuert. DWC wurde entwickelt, um Entwicklern und Designern zu helfen, konsistente, markenorientierte Benutzeroberflächen schnell und selbstbewusst zu erstellen.
Im Kern bietet DWC eine Reihe sorgfältig gestalteter CSS-Variablen (Design-Tokens), die wichtige visuelle Elemente wie Farben, Typografie, Rahmen und Abstände abdecken. Diese Tokens dienen als grundlegende Bausteine für alle Komponentenstile und ermöglichen eine globale Anpassung mit minimalem Aufwand.
Um fortschrittlichere Stile zu unterstützen, nutzt webforJ CSS Shadow Parts, wodurch die internen Komponenten selektiv stilisiert werden können, ohne die Kapselung zu brechen. Dies gibt den Teams eine feinkörnige Kontrolle darüber, wie Komponenten erscheinen, selbst in größeren Anwendungen.
DWC umfasst außerdem eine anpassbare Farbpalette und standardmäßig ein sauberes, helles visuelles Thema, aber jeder Aspekt kann an den Stil Ihrer Marke oder Ihres Produkts angepasst werden.
Figma Design Kit
Die DWC Figma-Bibliothek ist die offizielle Designressource zur Erstellung moderner, unternehmensgerechter Webanwendungen. Sie enthält eine umfassende Reihe von Komponenten, Typografiestilen und Farb-Tokens, die mit dem DWC-Designsystem übereinstimmen. Mit dieser Bibliothek können Designer und Entwickler visuell konsistente, benutzerfreundliche Oberflächen erstellen, die Funktionalität mit einer raffinierten Benutzererfahrung in Einklang bringen.
Themen
📄️ CSS Variables
CSS-Variablen spielen eine zentrale Rolle bei der Anpassung des Erscheinungsbildes von webforJ-Komponenten. Diese Variablen speichern wiederverwendbare Werte wie Farben, Schriftgrößen und Abstände, die konsistent in Ihrer App angewendet werden können.
📄️ Shadow Parts
CSS Shadow Parts bieten Entwicklern eine Möglichkeit, Elemente innerhalb des Shadow DOM eines Komponents von außen zu stylen, während die Kapselung erhalten bleibt.
📄️ Themes
webforJ umfasst drei integrierte App-Themen und unterstützt die Definition eigener benutzerdefinierter Themen. Die Standardthemen sind:
📄️ Colors
webforJ bietet ein Farbsystem, das auf CSS-Custom-Properties basiert. Diese Farbvariablen sorgen für einen konsistenten visuellen Stil in Ihrer App und geben Ihnen die volle Kontrolle, um Farbpaletten entsprechend Ihren Designanforderungen anzupassen.
📄️ Typography
Typografie-Tokens werden verwendet, um ein konsistentes Set an Schriftstilen in Ihrer App aufrechtzuerhalten.
📄️ Sizing and Spacing
Spacing- und Größen-Token werden verwendet, um konsistente Abstände und Größen in Ihrer App bereitzustellen. Alle Größen- und Abständeigenschaften sind in rem definiert.
📄️ Border
Die Rahmen-Eigenschaften werden verwendet, um den Rahmenstil und die Breite des Komponents zu steuern. Siehe verfügbare Rahmenstile.
📄️ Shadows
Die Schatteneigenschaften werden verwendet, um Schatteneffekte um den Rahmen eines Elements hinzuzufügen. Sie können mehrere Effekte durch Kommas getrennt festlegen. In den meisten Fällen werden Schatten verwendet, um Elemente darzustellen, die in der Benutzeroberfläche übereinander liegen.
📄️ Surfaces
Es gibt drei Ebenen von Oberflächen, die verwendet werden, um die UI-Hierarchie zu organisieren, oft kombiniert mit Schatten. Alle Farben der Palette werden getestet, um einen ausreichenden Kontrast gegen diese Oberflächen zu bieten.
📄️ State
Zustands-Tokens definieren, wie Komponenten visuell auf die Benutzerinteraktion reagieren – zum Beispiel, wenn sie deaktiviert oder fokussiert sind. Diese Variablen stellen sicher, dass das Verhalten und das Styling aller UI-Elemente konsistent sind und können leicht angepasst werden, um das Designsystem zu ergänzen.
📄️ Transitions & Easing
Übergangsvariablen werden verwendet, um konsistente Animationsdauern in Ihrer App bereitzustellen. Sie steuern, wie lange eine Animation benötigt, um abgeschlossen zu werden.