Design Tokens прикупљају сваку CSS променљиву, боју, скуп фонтова, радијус и сенку које страница користи, сортира их у основне tokens, режиме тема и опсеге компоненти и преузима их као W3C design-token JSON Figma или као CSS датотеку.
Систем дизајна се ретко записује тако потпуно као што је имплементиран. Права палета, скала размака и рампа типова живе у таблицама стилова — распоређеним по прилагођеним својствима, заменама тема и чврсто кодираним вредностима — а њихово поновно састављање ручно из DevTools значи кликање на стотине правила и копирање вредности једно по једно.
Овај алат их чита све одједном. Прошета сваки лист стилова на страници, укључујући оне са унакрсним пореклом које самој страници није дозвољено да прегледа, и прикупља свако прилагођено својство, плус променљиве постављене у време извршавања у уграђеним стиловима. Променљиве на:root постају основни tokens; иста имена редефинисана у оквиру селектора теме као што су.dark, [data-theme="dark"] или prefers-color-scheme постају одвојени режими; променљиве дефинисане на појединачним компонентама су наведене као опсег. Свака вредност се решава кроз свој var() ланац, тако да видите боју која се заправо приказује, а не само референцу на другу променљиву.
Сваки token је класификован на основу своје вредности и имена — боје, породице фонтова, величине фонта, тежине, висине линије, размака, радијуса, сенке, градијента, трајања, ублажавања или з-индекса — а боје су нормализоване на хексадецимални, укључујући формате само за канале који користе Tailwind и shadcn ( 222 47% 11%) и Bootstrap -rgb. Поред декларисаних променљивих, алатка узоркује елементе да би пријавила боје, групе фонтова, величине, полупречнике и сенке које се стварно користе, са бројем коришћења — управо оно што вам треба на сајту који никада није усвојио променљиве.
Извоз траје једним кликом. Download tokens JSON чува формат W3C Design Tokens ( $value и $type), који додатак Tokens Studio увози у Figma и Style Dictionary претвара у код за било коју платформу; тематски режими и посматране вредности се чувају у својим групама, тако да се ништа не меша. Download CSS враћа променљиве као листу стилова, са сваким режимом под оригиналним селектором.
Прилагођена својства из сваког листа стилова, укључујући табеле са различитим пореклом које страница не може да прочита, плус променљиве постављене током извршавања у уграђеним стиловима.
Заобилажења под.dark, [data-theme] или prefers-color-scheme постају засебни режими, приказани упоредо са основном вредношћу.
Сваки var() ланац је разрешен, а сваки token се откуцава као боја, фонт, величина, размак, радијус, сенка, трајање, ублажавање или з-индекс.
Хек, ргб, хсл, оклцх, именоване боје и вредности само за канале Tailwind, shadcn и Bootstrap користе, све нормализовано на хексадецимални.
Боје, групе фонтова, величине, тежине, радијуси и сенке узорковане из рендерованих елемената, са колико често се сваки од њих појављује.
W3C design-token JSON за Tokens Studio и Style Dictionary, или CSS датотека са сваким режимом под оригиналним бирачем.
Увезите праву палету, тип и размак у Tokens Studio уместо да бирате боје са снимака екрана.
Погледајте колико боја и величина фонта сајт заправо користи и које вредности заобилазе tokens које дефинише.
Упоредите сваку променљиву коју тамни режим замењује са њеном светлосном вредношћу, једну поред друге, и уочите оне које никада нису заобишле.
Извезите tokens једном и унесите их у Style Dictionary или конфигурацију Tailwind а уместо да ручно копирате вредности.
Превуците систем боја, размеру типа и радијусе сајта коме се дивите у датотеку са којом можете да радите.
Кликните на икону Design Tokens у DevSuite Pro доку. Екстракција се покреће одмах и резиме броји варијабле, модове, боје и фонтове.
Картица Боје приказује сваки token боје као узорак, подељен да би се приказао сваки режим теме, а затим боје које страница приказује, са бројем коришћења.
Типографија прегледа сваку групу фонтова и наводи величине, тежине, висине линија и правила @font-face; последња картица покрива размак, полупречнике, сенке и кретање.
Картица Променљиве наводи свако прилагођено својство са његовом ауторском и решеном вредношћу. Пребацивање између основног, сваког режима теме и променљивих у опсегу компоненте.
Download tokens JSON за Figma преко Tokens Studio или Download CSS за листу стилова. Означите поље за потврду да бисте укључили и променљиве са опсегом компоненте.
Instalirajte DevSuite Pro besplatno i otključajte 74+ alata za programere za svoj pretraživač.
