Styling
webforJ wird mit einem umfassenden Designsystem namens DWC geliefert. 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, konsistente, markenorientierte Schnittstellen schnell und mit Zuversicht zu erstellen.
Im Kern bietet DWC eine Reihe sorgfältig gestalteter CSS-Variablen (Design-Tokens), die wichtige visuelle Elemente wie Farben, Typografie, Grenzen 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, nutzt webforJ CSS Shadow Parts, die es ermöglichen, interne Komponenten selektiv zu stylen, ohne die Kapselung zu brechen. Dies gibt Teams eine feinkörnige Kontrolle darüber, wie Komponenten aussehen, selbst in größeren Anwendungen.
DWC umfasst auch eine anpassbare Farbpalette und wird standardmäßig mit einem klaren, hellen visuellen Thema geliefert, 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 Design-Kit
Die DWC Figma-Bibliothek ist die offizielle Designressource für die Erstellung moderner, unternehmensgerechter Webanwendungen. Sie umfasst eine umfassende Sammlung von Komponenten, typografischen Stilen und Farb-Tokens, die mit dem DWC-Designsystem übereinstimmen. Designer und Entwickler können diese Bibliothek nutzen, um visuell konsistente, benutzerfreundliche Schnittstellen mit vorhersehbarem Komponentenverhalten, präzisen Abständen und barrierefreiem Farbkontrast zu erstellen.
Themen
CSS Variables
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.
Themes
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Colors
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.
Typography
Typografietokens werden verwendet, um einen konsistenten Satz von Schriftstilen in Ihrer Anwendung beizubehalten.
Sizing and Spacing
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.
Border
Die Rand-Eigenschaften werden verwendet, um den Randstil und die Breite der Komponente zu steuern. Siehe verfügbare Randstile.
Shadows
Die Schatteneigenschaften fügen Schatteneffekte um den Rahmen eines Elements hinzu. Schatten signalisieren Elemente, die in der Benutzeroberfläche übereinander gestapelt sind.
Surfaces
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.
State
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.
Transitions & Easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling languages
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.