Stran, ki je predstavila naš gradnik za oblikovni sistem, zdaj temelji na njem

Reputo in Leadgener imata od 13. oktobra pripet en sam gradnik za oblikovni sistem, ta stran pa je o tem poročala še isti dan. Gradnika sama ni uporabljala: imela je lastne vrednosti barv za obe temi, pisavo IBM Plex Sans namesto pisave Inter, ki jo določa gradnik, lastne gumbe in lasten okvir fokusa.

En paket, dve zapisani izjemi

Stran smo 21. oktobra 2026 prenesli na gradnikov paket npm, pripet na različico 1.1.0. V svetli temi zdaj površine, besedilo in obrobe strani sledijo vlogam gradnika. Gumbi, debelina pisave v naslovih, pisava besedila in okvir fokusa na kontrolnikih so gradnikovi. Modra barva toolkita je v brand.css: dvanajst barvnih vlog iz pogodbe znamke gradnika, ki jih v testih strani preveri gradnikov assertBrand, tako kot v Reputu in Leadgenerju. Svetlo modra barva za dejanja na tem testu pade: njen kontrast je 1,80 : 1, zahtevano pa je vsaj 4,5 : 1.

Deli, za katere gradnik nima ustreznika, na primer tloris tovarne, ostanejo del strani; za dva od njih odločitev o prevzemu gradnika zapiše, zakaj ostajata zunaj njega. Gradnik nima temne teme in noben produkt je ne potrebuje, zato po našem pravilu žetve ne spada v gradnik; 13 testov zagotavlja, da barve besedila in gumbov v temni temi strani ohranijo kontrast vsaj 4,5 : 1. Prav tako gradnik nima čipa za filtriranje, zato stikala, s katerimi filtrirate tloris tovarne in novice, ostajajo kontrolniki strani, zgrajeni iz oblikovnih žetonov gradnika, dokler čipa ne bo potreboval kateri od produktov.

Tailwind v plasteh gradnika

Gradnik določa sedem kaskadnih plasti (cascade layers); zadnja, product, je namenjena lastnemu CSS strani. Tailwind, s katerim gradimo stran, CSS izpiše zunaj vseh plasti, tak CSS pa premaga vsako plast ne glede na specifičnost: Tailwindova ponastavitev slogov bi povozila sloge gumbov gradnika. Zato gradnja Tailwind požene dvakrat: njegovo ponastavitev postavi v plast gradnika za ponastavitev, vse drugo pa v plast product. Nato lahko gradnjo ustavijo tri preverbe: plasti morajo slediti v vrstnem redu gradnika, zunaj plasti ne sme biti nobenega pravila razen @font-face, vsak lokalni url() pa mora kazati na datoteko, ki jo je zapisala gradnja. Vsakega od teh pogojev smo namenoma prekršili in vsakič je preverba gradnjo ustavila s svojim sporočilom.

Ista gradnja teče med izdelavo slike Docker na veji main, namestitev pa čaka na to sliko: prvi cevovod je pridobil gradnik, zgradil sliko in namestitev končal 83 sekund po združitvi spremembe.

CSS gradnika tu torej deluje brez njegovih komponent React: dva zagona postavita Tailwindov CSS v plasti gradnika, gradnja pa se ustavi, če kako pravilo ostane zunaj njih ali se njihov vrstni red spremeni.