Styling
webforJ wordt geleverd met een uitgebreid ontwerp systeem genaamd DWC. Het is meer dan alleen een thema, het is een gestructureerd, uitbreidbaar systeem dat de visuele taal van je app beheert. DWC is gebouwd om ontwikkelaars en ontwerpers te helpen bij het snel en met vertrouwen creëren van consistente, merk-gebaseerde interfaces.
In de kern biedt DWC een set zorgvuldig ontworpen CSS-variabelen (ontwerp tokens) die de belangrijkste visuele elementen dekken zoals kleuren, typografie, randafwerkingen en ruimte. Deze tokens dienen als de fundamentele bouwstenen voor alle component stijlen en maken wereldwijde aanpassing met minimale inspanning mogelijk.
Om meer geavanceerde styling te ondersteunen, gebruikt webforJ CSS Shadow Parts, waardoor interne componenten selectief gestyled kunnen worden zonder de encapsulatie te doorbreken. Dit geeft teams fijne controle over hoe componenten verschijnen, zelfs in grotere applicaties.
DWC bevat ook een aanpasbare kleurpalet en standaard een schoon, licht visueel thema, maar elk aspect kan worden aangepast aan de stijl van jouw merk of product.
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 ontwerpkit
De DWC Ontwerpkit is de officiële Figma-bron voor het ontwerpen van webforJ-apps. Het dekt elke DWC-component met zijn thema's, extensies en staten, samen met de kleurpaletten, typografie, spatiëring en schaduwtokens van het ontwerpsysteem als Figma-variabelen en stijlen in zowel de lichte als donkere modus. Ontwerpers en ontwikkelaars kunnen de kit gebruiken om visueel consistente, gebruiksvriendelijke interfaces te bouwen met voorspelbaar componentgedrag, precieze spatiëring en toegankelijke kleurcontrasten.
Onderwerpen
CSS-variabelen
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Schaduw Onderdelen geven ontwikkelaars een manier om elementen binnen de schaduw DOM van een component van buitenaf te stylen, terwijl de encapsulatie behouden blijft.
Thema's
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Kleuren
webforJ biedt een kleurensysteem dat is opgebouwd uit CSS aangepaste eigenschappen. Deze kleurvariabelen behouden een consistente visuele stijl in je app terwijl je volledige controle hebt om paletten aan te passen aan je ontwerpeisen.
Typografie
Typografie tokens worden gebruikt om een consistente set van letterstijlletjes door je app heen te handhaven.
Formaten en witruimte
Spacing en sizing tokens worden gebruikt om consistente spacing en sizing in je app te bieden. Alle sizing en spacing eigenschappen zijn gedefinieerd in rem.
Rand
De rand-eigenschappen worden gebruikt om de randstijl en -breedte van de component te beheersen. Zie beschikbare randstijlen.
Schaduwen
De schaduweigenschappen voegen schaduweffecten toe rond het frame van een element. Schaduwen duiden op items die in de gebruikersinterface bovenop elkaar zijn gestapeld.
Oppervlakken
DWC definieert drie niveaus van oppervlakken die worden gebruikt om de UI-hiërarchie te organiseren, gecombineerd met schaduwen. Alle paletkleuren zijn getest om voldoende contraste te hebben met deze oppervlakken.
Status
State tokens definiëren hoe componenten visueel reageren op gebruikersinteractie, zoals wanneer ze zijn uitgeschakeld of gefocust. Deze variabelen helpen ervoor te zorgen dat er consistent gedrag en styling is over alle UI-elementen, en kunnen gemakkelijk worden aangepast om overeen te komen met uw ontwerpsysteem.
Overgangen en easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Styling-talen
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.