Stilizovanje elemenata korisničkog interfejsa je ključan zadatak za frontend programere. Korisnici savremenih aplikacija očekuju da dizajn interfejsa bude skladan i jednostavan. Takođe je poželjno da aplikacija bude prilagodljiva, kako bi se boje, fontovi, vrijednosti zaobljenja ivica (border-radius) i drugi vizuelni aspekti mogli lako podesiti prema korisničkim preferencijama. Ostvarivanje ovih ciljeva zahtijeva pisanje velikog broja CSS klasa. Programeri ponekad završe sa nepotrebnim ili ponavljajućim CSS pravilima, što povećava složenost i smanjuje održivost koda.
PrimeNG odvaja stilizovanje od komponenti korišćenjem tema. PrimeNG nam omogućava da koristimo unaprijed pripremljene teme ili da razvijemo sopstvene teme.
Tema se sastoji iz dva dijela:
- Base (osnova) – sadrži stilska pravila sa CSS varijablama koje služe kao zamjene (placeholders)
- Preset (unaprijed definisani skup) – predstavlja skup dizajnerskih tokena koji popunjavaju osnovu mapiranjem tokena na CSS varijable
Ugrađeni preseti koje PrimeNG nudi su: Aura, Material, Lara i Nora. Osnova arhitekture styled-mode pristupa su dizajnerski tokeni.
Dizajnerski tokeni su podijeljeni na tri nivoa:
- primitivni
- semantički
- komponentni
Primitivni tokeni nemaju kontekst. Dobar primjer primitivnih tokena su palete boja (npr. blue-50 do blue-900). Primitivni tokeni se koriste kao osnova za semantičke tokene. Na osnovu naziva semantičkih tokena možemo pretpostaviti gdje se koriste. Primjer semantičkog tokena je primary.color. Semantički token može biti mapiran na primitivni ili na drugi semantički token. Posebna grupa tokena je colorScheme, koja omogućava definisanje vrijednosti tokena u zavisnosti od aktivne šeme boja (npr. različite vrijednosti za tamni režim).
Komponentni tokeni su izolovani po komponentama. Koriste se za prilagođavanje konkretne komponente, a primjer komponentnog tokena je button.background, koji se mapira na semantički token.
button.background → primary.color → green.500
Više informacija možete pročitati na:
https://primeng.org/theming/styled
