Skip to main content

Základy prispôsobenia

WebJET Elements je navrhnutý tak, aby sa dal prispôsobovať bez zásahu do zdrojového kódu komponentov. V praxi sa najčastejšie pracuje s tromi vrstvami:

  1. globálne dizajnové tokeny – napríklad --wje-background, --wje-color, --wje-font-family,
  2. premenné konkrétnych komponentov – napríklad --wje-button-border-color,
  3. CSS Shadow Parts – ak komponent renderuje interný obsah v Shadow DOM a vystavuje part atribúty.

Balík zároveň obsahuje pripravené súbory light.css, dark.css a styles.css, takže si môžete vybrať, či použijete predvolené témy, alebo na ne nadviažete vlastnými prepismi.

Farby​

Komponenty používajú sadu sémantických farieb, napríklad primary, complete, success, warning, danger a info. Tieto farby sú definované cez globálne CSS tokeny a ich tónové škály.

CSS Premenné​

WebJET Elements používa pre väčšinu štýlov CSS premenné. To umožňuje centrálne meniť vizuál celej aplikácie aj jednotlivých komponentov. Viac nájdete na stránke CSS Premenné.

CSS Shadow Parts​

Ak komponent používa Shadow DOM, vnútorné uzly nemožno štandardne štýlovať zvonka. Ak však komponent vystaví part, môžete využiť pseudo-element ::part() a meniť konkrétne interné časti. Podrobnosti sú na stránke CSS Shadow Parts.

Content