FluentUI: oblikovalski tokeni
Nazaj: FluentUI (knjižnica oblikovalskega sistema)
Stanje: Tier 1 — opisuje dejansko uveljavljeno kodo (lib/plugins/wkfluentui/style.css).
Jedrna barvna pogodba
wkfluentui/style.css opredeli enak odsek „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 flat
(privzeta referenčna predloga DokuWiki — najbolj nevtralna, neodvisna izbira za splošno
privzeto vrednost, nobena od blagovnih palet WvdS ni prednostna). Popoln seznam tokenov:
Styles Contract (--wk-*).
Lestvica velikosti/radija/razmika/tipografije (nova, forenzično podprta)
Vir: src/vs/workbench/browser/media/{style,part}.css (skupno za VS Code/ADS,
https://github.com/microsoft/vscode) + za ADS specifičen CSS obrazcev/pogovornih oken pod
src/sql/** (https://github.com/microsoft/azuredatastudio). Vse vrednosti so
navedene v pikslih, ne ocenjene.
| Token | Vrednost | Vir |
|---|---|---|
–wk-fs-chrome | 11px | style.css:43, part.css:53 (besedilo chrome/meta: naslovne vrstice, oznake) |
–wk-fs-body | 13px | style.css:53-54 (standardno telesno besedilo, line-height:1.4em) |
–wk-fs-title | 15px | ADS modal.css:82-83 (naslov pogovornega okna, font-weight:600) |
–wk-icon-size | 16px | style.css:152 (standardna velikost ikone, fiksna) |
–wk-radius-sm | 2px | button.css:11, inputBox.css:11, selectBox.css:9 (radij Button/Input/Select, zaprto) |
–wk-radius-md | 5px | dropdown.css:26, menubar.css:56 (radij menija/pojavnega okna dropdown) |
–wk-radius-lg | 8px | ADS card.css:89 (radij Card/Tile, specifičen za ADS) |
–wk-space-1 … –wk-space-6 | 5/10/15/20/25/30px | ADS formLayout.css:8, designer.css:98, card.css:11 (koraki po 5px, ne mreža Fluent 4px) |
Neprevzete vrednosti: prepis besedila vsebine dela (ADS: 12px, part.css:91), majhna
velikost ikone (13px, ADS designer.css:119), radij Toggle/Hover/Tooltip (3px, toggle.css:13,
hover.css:104), širine pogovornih oken (500/800/1200px, ADS modal.css:60-72) — dokumentirano kot
referenčne vrednosti v FluentUI: osnovna postavitev podrobno in FluentUI: osnovni katalog gradnikov,
vendar (še) niso dobavljene kot lastni tokeni wkfluentui, ker ni trenutnega porabnika.
Območja lupine (osnovna postavitev)
Za razliko od zgornje lestvice velikosti/radija/razmika to niso na novo v pikslih
izmerjene vrednosti ADS, temveč alias tokeni: vsako nadomestilo se sklicuje na že
obstoječ token –wk-*, nobena nova šestnajstiška/pikselska vrednost ni izmišljena
(izjema: –wk-shell-statusbar-h, navedena v pikslih iz istega vira ADS kot
tabela osnovne postavitve v FluentUI (knjižnica oblikovalskega sistema), območje (7)). Prvi
porabnik: mreža .wkq-shell wksqliteds (glej
FluentUI: osnovna postavitev podrobno).
| Token | Nadomestilo | Uporaba |
|---|---|---|
–wk-shell-sidebar-bg | var(–wk-surface-alt) | ozadje območja stranske vrstice |
–wk-shell-sidebar-border | var(–wk-border) | rob desno od območja stranske vrstice |
–wk-shell-content-bg | var(–wk-surface) | ozadje območja vsebine |
–wk-shell-auxbar-bg | var(–wk-surface-alt) | ozadje območja Auxiliary Bar |
–wk-shell-auxbar-border | var(–wk-border) | rob levo od območja Auxiliary Bar |
–wk-shell-statusbar-bg | var(–wk-surface-alt) | ozadje območja vrstice stanja |
–wk-shell-statusbar-border | var(–wk-border) | rob nad območjem vrstice stanja |
–wk-shell-statusbar-text | var(–wk-text-alt) | barva besedila v območju vrstice stanja |
–wk-shell-statusbar-h | 22px | fiksna višina vrstice stanja, ADS part.css (glej FluentUI: osnovna postavitev podrobno, območje (7)) |
–wk-shell-commandbar-bg | var(–wk-surface-alt) | ozadje območja ukazne vrstice (dodatek WvdS) |
–wk-shell-commandbar-border | var(–wk-border) | rob pod območjem ukazne vrstice |
Namenoma nedobavljeno: –wk-shell-titlebar-*/–wk-shell-rail-* — brez
trenutnega porabnika (titlebar/Activity Bar sta podedovana iz lupine wikija
premium-navy-ivory, wksqliteds ju ne gradi znova; glej konvencijo
„neprevzete vrednosti“ zgoraj).
Dotik, vrstice drevesa, predal (Live od 25. 08. 2026)
Pet tokenov za vprašanje „kako veliko je to pod prstom„. Stojijo tu in ne pri
območjih lupine, ker so odvisni od kazalne naprave: pod
@media (pointer: coarse) dva od njiju prevzameta drugo vrednost. Porabnik
zapiše eno ime in dobi na obeh vrstah naprav pravo številko — ponavljati
medijsko poizvedbo v vsakem klicatelju je pot, po kateri nastaneta dva sistema
prelomnih točk.
| Token | Vrednost | pod pointer: coarse | Uporaba |
|---|---|---|---|
–wk-touch-min | 40px | 44px | spodnja meja vsake zadetne površine |
–wk-tree-row-height | 26px | 36px | višina vrstice drevesa |
–wk-drawer-width | 100% | — | predal na telefonu: celozaslonsko |
–wk-drawer-width-tablet | 380px | — | predal na tablici: omejen prekrivni sloj |
–wk-mobile-header-height | 48px | — | kontekstna vrstica nad vsebino na majhnih zaslonih |
–wk-touch-min je nosil dve vrednosti, in nadomestna vrednost klicateljev
je bila pravilnejša od definicije.
Token je bil definiran natanko enkrat, s 32px, in sicer v bloku, ki
tujim paketom naknadno podaja imena — ne v pravem bloku tokenov. Pet paketov ga
je bralo kot var(--wk-touch-min, 40px): wkdocore,
wkdodashboard, wkdogit, wkdoqueries, wkdoworkitems.
Zadetna površina je bila torej odvisna od tega, ali je bila ta slogovna
datoteka naložena na strani — z njo 32px, brez nje 40px. In 32px je pod vsako
spodnjo mejo, ki jo je ta projekt zapisal: ADR-009 navaja 40, telefonska stopnja
44. Edini lastni klic je stal prav v @media (pointer: coarse), torej na
edinem mestu, kjer ime sploh kaj pomeni.
Nove vrednosti so izbrane tako, da nobenega tujega paketa ni treba spreminjati:
40px na kazalni napravi je natanko to, kar je vseh pet že tako predpostavljalo;
njihova nadomestna vrednost s tem postane resnica namesto protislovja.
Našel dw-portable-b7.
Ponovno preverjanje skrbniške lestvice (opravljeno)
Lestvica –wk-admin-fs-*/–wk-admin-radius predloge premium-navy-ivory
(tokens.css) je bila 2026-07-14 forenzično ponovno preverjena glede na izvorno kodo ADS;
bloki komentarjev neposredno ob definicijah tokenov dokumentirajo vir in ugotovitev za vsako
vrednost. Rezultat: sprememba vrednosti ni potrebna. –wk-admin-radius 2px je
potrjen glede na ADS (button.css:11; današnji VS Code od Rounded Refresh uporablja 4px —
namenoma je ohranjeno starejše stanje ADS). Zaokroženost kartice 4px in lestvica pisav sta
dokumentirani, namerni odstopanji: kartica ADS (card.css:89, 8px) je tržna ploščica in
ne ustreza ravni skrbniški podobi; velikosti pisav v skrbniškem območju so eno stopnjo nad
osnovo ADS 11/13/15 — odločitev o berljivosti uporabnika z dne 2026-07-11, izrecno je ni
treba preklicati.
Vrstni red nalaganja / obnašanje pri prepisovanju
css_out() funkcije lib/exe/css.php sestavi: jedrni slogi → slogi vtičnikov
(css_pluginstyles(), samodejno vključi wkfluentui/style.css) → slogi predloge
(npr. premium-navy-ivory/css/tokens.css, prek seznama stylesheets v style.ini) →
uporabniški slogi. Pravila predloge se naložijo za pravili vtičnika — pri enaki
specifičnosti selektorja (:root–wk-* samodejno prepiše privzete vrednosti wkfluentui;
če nobena predloga z lastnimi tokeni ni aktivna, vrednosti wkfluentui ostanejo kot
nadomestilo za celotno spletno mesto.
Preverjeno glede na: wkfluentui@a477094, wk-dw-msqlite-plugin@240c064