FluentUI: oblikovalski žetoni

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Stanje: stopnja 1 – opisuje dejansko izvedeno kodo (lib/plugins/wkfluentui/style.css).

wkfluentui/style.css določa enak razdelek »cross-template contract« kot premium-navy-ivory/css/tokens.css:33-176 (ink/paper/accent/gold/surface/text/link/border/ highlight/sidebar/success/warning/error/admin-accent – enaka imena kot lib/tpl/flat/css/color-palette.css). Vrednosti: lastna paleta predloge flat (DokuWikijeve referenčne predloge – najbolj nevtralna in neodvisna izbira za splošno privzeto vrednost, nobena od palet znamk WvdS nima prednosti). Celoten seznam žetonov: Styles Contract (--wk-*).

Vir: src/vs/workbench/browser/media/{style,part}.css (skupno za VS Code in ADS, https://github.com/microsoft/vscode) ter CSS obrazcev in pogovornih oken, značilen za ADS, pod src/sql/** (https://github.com/microsoft/azuredatastudio). Vse vrednosti so povzete v pikslih iz vira, ne ocenjene.

Kje je zapisana velikost. Mera skupnega kontrolnika spada v pogodbo, ne v eno od več možnih predlog. Pravilo predloge, kot je .dokuwiki input[type="checkbox"] (teža 0-2-1), bi premagalo vsako pravilo za razred v kompletu (0-2-0); predloga zato bere žeton, namesto da bi nastavila lastno vrednost.

Stikalo ne sledi. Meri 34×18px in je izvzeto s selektorjem, ne z vrstnim redom v datoteki. Brez lastnega žetona za površino za dotik: to že opravlja --wk-touch-min.

Zakaj ostaneta le dva žetona za gibanje. V obeh referencah vrstica seznama, gumb in potrditveno polje nimajo prehoda; skupaj je tam 27 prehodov v 154 slogovnih datotekah in nobene animacije s ključnimi sličicami. Giblje se tisto, kar se premika – pojavitev, stikalo, razpiranje. Stanje (kazalec, izbira, fokus, pritisk) barvo zamenja takoj. To ni vrzel, ampak pravilo: če kazalec povlečete čez trideset vrstic, želite trideset takojšnjih odzivov in ne trideset zakasnjenih prelivov.

Neprevzete vrednosti: preglasitev besedila v vsebinskem delu (ADS: 12px, part.css:91), majhna ikona (13px, ADS designer.css:119), polmer stikala, lebdečega okna in opisa orodja (3px, toggle.css:13, hover.css:104), širine pogovornih oken (500/800/1200px, ADS modal.css:60-72) – dokumentirane kot referenčne vrednosti v FluentUI: osnovna postavitev podrobno in FluentUI: osnovni katalog gradnikov, vendar niso dobavljene kot lastni žetoni wkfluentui, ker jih noben porabnik ne potrebuje.

Za razliko od zgornje lestvice velikosti, polmerov in razmikov to niso na novo v pikslih izmerjene vrednosti iz ADS, temveč žetoni vzdevki: vsaka rezervna vrednost se sklicuje na že obstoječi žeton –wk-*, nobena nova vrednost v hex ali pikslih ni izmišljena (izjema: –wk-shell-statusbar-h, povzet v pikslih iz istega vira ADS kot preglednica osnovne postavitve v FluentUI (knjižnica oblikovalskega sistema), območje (7)). Prvi porabnik: mreža .wkq-shell v wksqliteds (glejte FluentUI: osnovna postavitev podrobno).

Namenoma ni dobavljeno: –wk-shell-titlebar-*/–wk-shell-rail-* – brez trenutnega porabnika (naslovno vrstico in vrstico dejavnosti podeduje lupina wikija predloge premium-navy-ivory, wksqliteds ju ne gradi na novo; glejte konvencijo »neprevzete vrednosti« zgoraj).

Pet žetonov za vprašanje »kako veliko je to pod prstom«. Navedeni so tukaj in ne pri območjih lupine, ker so odvisni od kazalne naprave: pod @media (pointer: coarse) dva od njih dobita drugo vrednost. Porabnik zapiše eno ime in na obeh vrstah naprav dobi pravo število – ponavljanje medijske poizvedbe v vsakem klicatelju je pot, po kateri nastaneta dva sistema prelomnih točk.

Lestvica –wk-admin-fs-*/–wk-admin-radius predloge premium-navy-ivory (tokens.css) je preverjena glede na izvorno kodo ADS; bloki komentarjev neposredno ob definicijah žetonov za vsako vrednost navajajo vir. –wk-admin-radius 2px ustreza ADS (button.css:11; današnji VS Code od prenove z zaobljenimi oblikami uporablja 4px – namenoma je ohranjeno starejše stanje ADS). Zaobljenost kartice 4px in lestvica pisav sta namerni odstopanji: kartica ADS (card.css:89, 8px) je tržna ploščica in ne sodi v ploski skrbniški videz; velikosti pisav v skrbniškem območju so zaradi berljivosti eno stopnjo nad osnovo ADS 11/13/15.

css_out() v lib/exe/css.php sestavi: sloge jedra → sloge vtičnikov (css_pluginstyles(), samodejno vključi wkfluentui/style.css) → sloge predloge (npr. wkbizway/css/tokens.css, prek seznama stylesheets v style.ini) → uporabniške sloge. Pravila predloge se naložijo za pravili vtičnikov – pri enaki specifičnosti selektorja (:root) zmaga tisto, ki je določeno zadnje, zato aktivna predloga z lastnimi vrednostmi –wk-* samodejno preglasi privzete vrednosti wkfluentui; če ni aktivna nobena predloga z lastnimi žetoni, vrednosti wkfluentui ostanejo rezervne vrednosti za celotno spletno mesto.

Del žetonov ni vrednosti, temveč izpeljave: njihova vrednost prek var() bere drug žeton, da sprememba osnove potegne s seboj vse, kar iz nje sledi. Pri tem velja lastnost, ki je iz zapisa ni videti:

Zgled: prijavna kartica nastavi --wk-radius-md: 0 (želi oglate robove); --wk-radius, izpeljan v :root, znotraj te površine kljub temu odgovori 5px.

Za vsako izpeljavo v :root, katere osnovo površina nižje določi na novo, je zato dopusten natanko eden od dveh odgovorov; preverjanje v repozitoriju to spremlja:

Nedopustna je tretja možnost: neodločenost.

Stanje je tu zapisano kot delež, ne kot barva – in to neposredno sledi iz zgornjega pravila.

Ton stanja kot barvni žeton v :root bi računal s paleto korena in ne bi sledil nobeni površini, ki barve polj določi na novo – prijavna kartica naredi prav to. Delež pa se upošteva v pravilu komponente:

background: color-mix(in srgb, var(--wk-field-fg) var(--wk-state-readonly-tint),
                               var(--wk-field-bg));

Tam se var() razreši na elementu. Stanje tako sledi vsaki površini, shemi, koži in poudarku – iz ene deklaracije, namesto da bi jo ponavljali v vsakem bloku osi.

Odloča to, čigava barva je površina.

Kontrolnik, ki podeduje površino sheme (vnosno polje, nevtralen gumb), dobi zgornjo mešanico. Ta se sama usmeri: v svetli shemi je pisava temna in površina se pomakne proti temnemu, v temni shemi obratno. Ena deklaracija tako pokrije vse tri sheme.

Kontrolnik z lastno barvo – glavno dejanje, nevarnost, uspeh – namesto tega dobi stopnjo svetlosti. Če bi mu primešali njegovo pisavo, bi ga v svetli shemi posvetlili, medtem ko ga vrednost za hover zatemni: ena kretnja, dve smeri. Tudi stopnja svetlosti ne pozna barve, ne potrebuje barvne funkcije in obe stanji drži na eni osi.

Poleg žetonov za okvir mreže (barve trakov, barve glave, višina traku, višina vrstice) skupina Grid ima štiri stanja – lastne žetone, da je mogoče hover vrstice v mreži spremeniti, ne da bi se spremenil hover vsake skrbniške površine.

Vsak od štirih se razreši v žeton iz stolpca »Vrednost«; izbrana barvna shema ostane nedotaknjena.

Zakaj štiri in ne sedem. Zgled pozna sedem stanj mreže. Treh – izbrano in pod kazalcem, hover nad dejanjem in hover nad povezavo v celici – ta komplet ne riše. Nastanejo skupaj s pravili, ki jih potrebujejo; žeton, ki ga nihče ne bere, je dražji od nobenega.

Zakaj --wk-admin-row-selected-bg ostane. Starejši žeton se v vsaki shemi razreši v isto vrednost kot --wk-highlight, je torej vmesna stopnja brez lastne vrednosti. Berejo pa ga štiri mesta v wkbizway in wkblog. Novi žeton je zato izpeljan iz njega, namesto da bi ponavljal njegovo vrednost: če predloga nastavi starejšega, mreža sledi.

Paleta se izračuna kot celota: vsak par barve pisave in površine, ki ga komplet dejansko izriše, se preveri glede na zahtevo po kontrastu iz WCAG 2.2 (merilo uspeha 1.4.3, raven AA: 4,5:1 za tekoče besedilo; merilo uspeha 1.4.11: 3:1 za rob, po katerem je kontrolnik prepoznaven). Slogovna datoteka ne more odpovedati: skoraj berljiva vrednost je videti kot oblikovalska odločitev.

--wk-border riše okrasno črto med dvema vrsticama preglednice; rob vnosnega polja ima lasten žeton. Za okrasno črto je 1,71:1 pravilno – ločilna črta, ki doseže 3:1, je že pas. Za rob polja bi bila ista vrednost kršitev merila 1.4.11, saj je rob edino, po čemer je polje prepoznavno kot polje.

Enako velja za stanja: družina --wk-warning ima tri žetone – signal (simbol, rob, polnilo), pisavo in barvo na signalu. Kot signal je zlata pravilna; kot pisava ista zlata doseže le 2,39:1, bela na zlati števčni znački pa 2,10:1.

Temna shema poleg površin, pisave, lupine in stranske vrstice na novo določi tudi družino poudarka in družino stanj; sicer bi temen zaslon kazal svetel okvir z obvestilom o uspehu.

Heritage ni tretja svetlost med svetlo in temno. Za brskalnik je svetel svet in color-scheme: light to tudi pove – sicer bi brskalnik nativne kontrolnike risal na podlagi napačne predpostavke. Shema si to ime zasluži s tem, da na novo določi material: površine in pisavo, nič drugega.

Rdeča je stalnica jezika poudarkov v hiši in izrecno ni eden od treh: je alarm, alarm, ki je hkrati znamka, pa preneha biti alarm. Družine se ločijo po drugi barvi – grafitna je v naboru zato, ker edina ni barvna soseda drugih dveh, tako da jih je na gostem podatkovnem zaslonu še vedno mogoče razločiti.

Tri družine krat tri sheme bi bile devet ročno usklajevanih blokov. Namesto tega vsaka družina navede en osnovni ton, shema pa pove, koliko ga ostane:

--wk-accent: color-mix(in srgb, var(--wk-accent-base) var(--wk-accent-keep, 100%),
                                var(--wk-accent-lift, #FFFFFF));

Drugi regulator je zanimivejši: »pritisnjeno« je smer, ne svetlost. Na svetli površini je stanje pritiska temnejše, na temni svetlejše – in nobeni družini poudarka za to ni treba vedeti, da obstaja temna shema.

Pravilo iz razdelka »Kje sme biti izpeljava« velja še eno raven višje. Žeton, ki je v :root deklariran kot var(X), dobi odgovor na korenu. Če je tudi shema na korenu (običajni primer, ki ga nastavi strežnik), to drži. Če je na vsebniku, kot pri označevanju modula, je koren že odgovoril.

Brez ponovitve na primer --wk-btn-primary-text ostane bel, --wk-text-on-accent poleg njega pa je skoraj črn – glavni gumb izgubi napis pri 3,20:1.

Zato velja: blok osi, ki na novo določi osnovo, ponovi izpeljave iz nje, ki so pomembne za kontrast. Preverjanje to spremlja – omejeno na pare, ker bi isto pravilo, uporabljeno za vse izpeljave, zahtevalo okrog 200 ponovljenih deklaracij in s tem vrnilo prav tisto podvajanje, proti kateremu je paleta zgrajena. Preostalih 71 se prešteje in sporoči, ne zahteva.

Preverjanje kontrasta izračuna 34 parov v 12 kombinacijah (tri sheme krat štirje poudarki, vključno s privzetim), dodatno prek osi kože v kombinaciji s shemo, poleg tega pa preveri seznam osi, oznake v petih jezikih in pravilo o nič odstotkih.

Je zaskočka v obe smeri. Vrednost, ki se poslabša, ne prestane preverjanja – in prav tako par, ki ga ni več mogoče razrešiti: vrata, ki merijo le v eno smer, neopazno prenehajo meriti.

Koža na novo določi po 26 vrednosti in podeduje vse ostale; ali se podedovane ujemajo z na novo določenimi, preverjanje zato izračuna prek kombinacije koža × shema × poudarek.

Vse štiri osi so zapisane kot :root[data-wk-<os>="<vrednost>"] in imajo zato enako težo. Pri enaki teži odloča le vrstni red v svežnju. Če bi bloka kože in sheme določala iste nevtralne barve, bi zadnji blok preglasil prejšnjega – skin="wxi" skupaj s scheme="dark" bi tedaj pokazal bel papir.

Koža svoje nevtralne barve navede za vsak svet svetlosti (--wk-n-<svet>-<vloga>), shema prebere en svet in iz njega določi pomenske žetone. Nabora se ne prekrivata, zato vrstni red med njima ne odloča – edina oblika pravokotnosti, ki preživi, da nekdo premakne blok.

Poudarek ostaja namerna izjema: koža in shema naj ga ne preglasita, zato je zadnji, ena od vrat pa zagotavljajo, da tam tudi ostane.

Zakaj ne izpeljano iz osnovnega tona kot pri poudarku: barvni ton je pod različno svetlobo res ena stvar, nevtralne barve niso. Devet svetlih stopenj te hiše ni enakomerna mešanica med njihovima koncema – mešanica dveh točk zgreši --wk-border za devet vrednosti na kanal, več stopenj pa nosi popravek kontrasta, ki bi se pri tem izgubil.

Koža navede le svetove, ki jih ima. wxi ima svetlo in temno različico in nobene različice Heritage, zato pod scheme="heritage" pade nazaj na hišno lestvico. To je predviden odgovor, ne vrzel.

Znana omejitev: sedem parov osi kože ostane pod mejo – lastne pridušene sive stopnje WXI (2,85:1 svetlo, 2,99:1 temno), nespremenjeno prevzete iz WXI.

Prejšnjih imen kož wxi-darkness in wxi-clearness ni več. wxi-darkness je bila svet svetlosti z imenom kože – kar je bilo videti po tem, da je morala sama nositi svoj color-scheme, kar pove svet in ne značaj; ustreza skin="wxi" scheme="dark". wxi-clearness je bila svetla različica WXI z drugačno modro; odkar ima poudarek lastno os, je od wxi nič več ne loči.

Fiksira se nabor, ne število. Zgornja meja za število bi spregledala premik: ena kršitev odpravljena, nova nastala, vsota nespremenjena, sporočilo »nespremenjeno« za slogovno datoteko, ki se je spremenila. Zato se primerja seznam prizadetih parov, preverjanje pa navede, kaj je prišlo zraven in kaj je izginilo.

Česar izrecno ne meri, je izrisana stran: izračunana barva lahko prihaja iz pravila, ki ga preverjanje nikoli ne vidi. Preverjanje dokazuje, da je paleta pravilna; preverjanje v brskalniku dokazuje, da jo pravila tudi izpišejo.