Tyylittely
webforJ toimittaa kattavan suunnittelujärjestelmän nimeltä DWC. Se on enemmän kuin pelkkä teema, se on rakenteellinen, laajennettavissa oleva järjestelmä, joka säätelee sovelluksesi visuaalista kieltä. DWC on rakennettu auttamaan kehittäjiä ja suunnittelijoita luomaan johdonmukaisia, brändille linjassa olevia käyttöliittymiä nopeasti ja itseluottamuksella.
DWC:n ytimessä on joukko huolellisesti suunniteltuja CSS-muuttujia (suunnittelutunnuksia), jotka kattavat keskeiset visuaaliset elementit, kuten värit, typografian, reunat ja välistykset. Nämä tunnukset toimivat kaikkiin komponenttityyleihin perustuvina rakennuspalikoina ja mahdollistavat globaalin mukautuksen minimaalisen vaivannäön avulla.
Tukeakseen edistyneempää tyylittelyä webforJ käyttää CSS Shadow Parts -ominaisuutta, joka mahdollistaa komponenttien sisäosien valikoivan tyylittelyn ilman kapseloinnin rikkoutumista. Tämä antaa tiimeille tarkkaa hallintaa siitä, miltä komponentit näyttävät, jopa suuremmissa sovelluksissa.
DWC:hen kuuluu myös mukautettava väriasteikko, ja se oletusarvoisesti käyttää puhdasta, vaaleaa visuaalista teemaa, mutta jokainen osa-alue voidaan mukauttaa brändisi tai tuotetyylisi mukaan.
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-suunnittelupaketti
DWC-suunnittelupaketti on virallinen Figma-resurssi webforJ-sovellusten suunnitteluun. Se kattaa jokaisen DWC-komponentin teemoineen, laajuuksineen ja tiloineen, sekä suunnittelujärjestelmän väripaletit, typografian, välistykset ja varjotunnukset Figma-muuttujina ja tyyleinä sekä vaaleassa että tummassa tilassa. Suunnittelijat ja kehittäjät voivat käyttää pakettia visuaalisesti johdonmukaisten, käyttäjäystävällisten käyttöliittymien rakentamiseen, joilla on ennakoitavaa komponenttikäyttäytymistä, tarkkoja välistyksiä ja saavutettavaa värieroa.
Aiheet
CSS-muuttujat
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
Shadow Parts
CSS Varjostin osat antavat kehittäjille keinon tyylitellä elementtejä komponentin varjostin DOM:issa ulkopuolelta, samalla säilyttäen kapseloinnin.
Teemat
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
Värit
webforJ tarjoaa värijärjestelmän, joka perustuu CSS:n mukautettaviin ominaisuuksiin. Nämä väri muuttujat säilyttävät johdonmukaisen visuaalisen tyylin sovelluksessasi, samalla kun annat täyden hallinnan mukauttaa väripaletteja suunnittelutarpeidesi mukaan.
Typografia
Typografia-tokeneita käytetään säilyttämään johdonmukainen fontti-estetiikka sovelluksessasi.
Koot ja välit
Spacing and sizing tokens are used to provide consistent spacing and sizing in your app. All sizing and spacing properties are defined in rem.
Reuna
Reunusomina käytetään komponentin reunuksen tyylin ja leveyden hallitsemiseen. Katso saatavilla olevat reunustyylit.
Varjot
Varjostusominaisuudet lisäävät varjotehosteita elementin kehän ympärille. Varjostukset merkitsevät käyttöliittymässä päällekkäin olevia kohteita.
Pinnat
DWC määrittelee kolme tasoa pintoja, joita käytetään käyttöliittymän hierarkian järjestämiseen yhdessä varjojen kanssa. Kaikki väripaletin värit on testattu siten, että niiden ja näiden pintojen välillä on tarpeeksi kontrastia.
Tila
State tokens määrittävät, kuinka komponentit visuaalisesti reagoivat käyttäjän vuorovaikutukseen, esimerkiksi kun ne ovat poistettu käytöstä tai fokusoitu. Nämä muuttujat auttavat varmistamaan johdonmukaisen käyttäytymisen ja tyylin kaikissa käyttöliittymäelementeissä, ja niitä voidaan helposti mukauttaa vastaamaan suunnittelujärjestelmääsi.
Siirtymät ja easing
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
Tyylikielet
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.