En oblikovni sistem, plast znamke za vsak produkt

Naš oblikovni sistem je nastal v Reputu: oblikovni žetoni v CSS, komponente React, pravila linterja, ki zaslonom ne dovolijo lastnega oblikovanja, in katalog. Leadgener je 8. oktobra prekopiral njegovih 209 datotek in zamenjal barvno paleto. Štiri dni pozneje se je 26 datotek, skupnih obema kopijama, razlikovalo po vsebini, 14 pa jih je imela le ena. Nekatere razlike so bile Leadgenerjeve lastne komponente, ena pa popravek, ki je ostal tam, kjer je nastal: ožji notranji odmik zavihkov, s katerim trije zavihki na 375 px širokem zaslonu telefona ostanejo v eni vrstici. V Reputu so se zavihki še vedno prelamljali.

Jedro je skupno, znamka ni

Po našem pravilu žetve smo videz in uporabniško izkušnjo namenoma kopirali. Oblikovni sistem smo 12. oktobra iz tega pravila izvzeli. Jedro sistema določa kakovost vmesnika, zato se med produkti ne sme razlikovati: okvir fokusa, površine za dotik velikosti 44 px, kontrast, toni stanj, ki jih poleg barve loči tudi oblika simbola, ter lestvici velikosti pisave in razmikov. Iz njega je nastal gradnik za oblikovni sistem: paket npm, ki ga izdajamo kot druge gradnike, z datiranim razdelkom v dnevniku sprememb in zaščiteno oznako.

Produktu ostane plast znamke: brand.css z natanko dvanajstimi barvnimi vlogami, znak in lastne komponente s predpono produkta. Testi produkta kličejo assertBrand, ki javi napako, če kakšna vloga manjka, če datoteka nastavi katero koli drugo lastnost gradnika, če vloga ne doseže najmanjšega kontrasta po WCAG 2.1 ali če bi barvo za dejanja lahko zamenjali z barvo uspeha, opozorila ali napake. Ogrodje aplikacije, tema za prijavo in predstavitvena stran ostanejo kopije, vendar v Reputu in Leadgenerju najprej uvozijo slogovno datoteko gradnika, nato brand.css.

Najprej primerjano, nato izdano

Gradnik 1.0.0 je zvest prenos Leadgenerjeve kopije. Vsak vnos kataloga smo zajeli pri širinah 375, 768 in 1366 px ter gradnik z obema produktoma primerjali piksel za pikslom. Razen vnosov, ki so navedeni kot drugačni že po zasnovi, je edina sprememba izrisa popravek zavihkov, ki zdaj doseže tudi Reputo. Njegovih 384 posnetkov je postalo referenca za vsako zahtevo za združitev, ki gradnik spremeni.

Pred objavo opravilo za izdajo zahteva, da se v registru preveri preizkusno objavljen kandidat iz iste kode, nato pa teste ponovno požene nad potrditvijo združitve (merge commit): za 1.0.0 jih je bilo 615. Reputo in Leadgener sta prevzela kandidata, svoj katalog in vseh devet strani teme za prijavo primerjala s tem, kar sta izrisala prej, in isti dan pripela 1.0.0.

Če gradite na toolkitu, so barve vašega produkta ena datoteka, ki jo gradnik preveri: paleta s prešibkim kontrastom pade na testu znamke, še preden pride na zaslon. Popravek, kot je odmik v zavihkih, nastane enkrat, v gradniku, ne v vsaki kopiji.