Styling
webforJ wird mit einem umfassenden Designsystem namens DWC ausgeliefert. Es ist mehr als nur ein Thema; es ist ein strukturiertes, erweiterbares System, das die visuelle Sprache Ihrer App regelt. DWC wurde entwickelt, um Entwicklern und Designern zu helfen, schnell und selbstbewusst konsistente, markenorientierte Benutzeroberflächen 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 fortgeschrittenere Stile zu unterstützen, verwendet webforJ CSS Shadow Parts, die es ermöglichen, interne Komponenten selektiv zu gestalten, ohne die Kapselung zu brechen. Dies gibt Teams eine feinkörnige Kontrolle darüber, wie Komponenten erscheinen, selbst in größeren Anwendungen.
DWC enthält auch eine anpassbare Farbpalette und setzt standardmäßig ein sauberes, helles visuelles Thema, aber jeder Aspekt kann an Ihren Marken- oder Produktstil angepasst werden.
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."
Figma-Designkit
Das DWC Design Kit ist die offizielle Figma-Ressource für das Design von webforJ-Apps. Es deckt jede DWC-Komponente mit ihren Themen, Ausdehnungen und Zuständen ab, zusammen mit den Farbpaletten, der Typografie, den Abständen und den Schatten-Tokens des Designsystems als Figma-Variablen und -Stile in sowohl hellen als auch dunklen Modi. Designer und Entwickler können das Kit verwenden, um visuell konsistente, benutzerfreundliche Benutzeroberflächen mit vorhersehbarem Komponentenverhalten, präzisen Abständen und zugänglichem Farbkontrast zu erstellen.
Themen
CSS-Variablen
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
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.
Designs
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Farben
webforJ bietet ein Farbsystem, das auf CSS-Custom-Properties basiert. Diese Farbvariablen sorgen für einen konsistenten visuellen Stil in Ihrer Anwendung und geben Ihnen die volle Kontrolle, um Farbpaletten gemäß Ihren Designanforderungen anzupassen.
Typografie
Typografietokens werden verwendet, um einen konsistenten Satz von Schriftstilen in Ihrer Anwendung beizubehalten.
Größen und Abstände
Abstand- und Größen-Tokens werden verwendet, um konsistenten Abstand und Größen in Ihrer App bereitzustellen. Alle Größen- und Abstands-Eigenschaften sind in rem definiert.
Rahmen
Die Rand-Eigenschaften werden verwendet, um den Randstil und die Breite der Komponente zu steuern. Siehe verfügbare Randstile.
Schatten
Die Schatteneigenschaften fügen Schatteneffekte um den Rahmen eines Elements hinzu. Schatten signalisieren Elemente, die in der Benutzeroberfläche übereinander gestapelt sind.
Oberflächen
DWC definiert drei Ebenen von Flächen, die verwendet werden, um die UI-Hierarchie zu organisieren, kombiniert mit shadows. Alle palette colors sind getestet, um sicherzustellen, dass sie ausreichend Kontrast mit diesen Flächen bieten.
Zustand
State-Tokens definieren, wie Komponenten visuell auf Benutzerinteraktionen reagieren, wie beispielsweise, wenn sie deaktiviert oder fokussiert sind. Diese Variablen helfen, ein konsistentes Verhalten und Styling über alle UI-Elemente hinweg sicherzustellen und können leicht an Ihr Designsystem angepasst werden.
Übergänge und Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling-Sprachen
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.