Design Tokens събира всяка CSS променлива, цвят, набор от шрифтове, радиус и сянка, използвани от страницата, сортира ги в базови tokens, режими на тема и обхвати на компоненти и ги изтегля като W3C design-token JSON за Figma или като CSS файл.
Една система за проектиране рядко се записва толкова пълно, колкото е внедрена. Истинската палитра, мащабът на разстоянието и рамката на типа живеят в листове със стилове — разпределени в персонализирани свойства, замени на теми и твърдо кодирани стойности — и повторното им изграждане на ръка от DevTools означава щракване през стотици правила и копиране на стойности една по една.
Този инструмент ги чете всички наведнъж. Той обхожда всеки лист със стилове на страницата, включително тези с кръстосан произход, които самата страница няма право да проверява, и събира всяко персонализирано свойство, плюс променливи, зададени по време на изпълнение във вградени стилове. Променливите на:root стават базови tokens; същите имена, предефинирани под селектор на тема, като.dark, [data-theme="dark"] или prefers-color-scheme стават отделни режими; променливите, дефинирани на отделни компоненти, са посочени като обхват. Всяка стойност се разрешава чрез нейната верига var(), така че виждате цвета, който действително се изобразява, а не просто препратка към друга променлива.
Всеки token се класифицира според неговата стойност и име — цвят, семейство шрифтове, размер на шрифта, тегло, височина на реда, разстояние, радиус, сянка, градиент, продължителност, облекчаване или z-индекс — и цветовете се нормализират до шестнадесетичен, включително форматите само за канали, използвани Tailwind и shadcn ( 222 47% 11%) и триплетите -rgb на Bootstrap. Наред с декларираните променливи, инструментът изобразява рендирани елементи за отчитане на цветовете, наборите от шрифтове, размерите, радиусите и сенките, които действително се използват, с броя на употребата – точно това, от което се нуждаете на сайт, който изобщо не е приемал променливи.
Експортирането отнема едно кликване. Download tokens JSON записва формата W3C Design Tokens ( $value и $type), който приставката Tokens Studio импортира във Figma и Style Dictionary превръща в код за всяка платформа; режимите на темата и наблюдаваните стойности се съхраняват в техните собствени групи, така че нищо не се смесва. Download CSS записва променливите обратно като таблица със стилове, като всеки режим е под оригиналния си селектор.
Персонализирани свойства от всяка таблица със стилове, включително таблици с различни източници, които страницата не може да прочете, плюс променливи, зададени по време на изпълнение във вградени стилове.
Замените под.dark, [data-theme] или prefers-color-scheme стават отделни режими, показани един до друг с основната стойност.
Всяка верига var() се разрешава и всеки token се въвежда като цвят, шрифт, размер, разстояние, радиус, сянка, продължителност, облекчаване или z-индекс.
Hex, rgb, hsl, oklch, наименувани цветове и стойностите само за канала, използвани от Tailwind, shadcn и Bootstrap, всички нормализирани към hex.
Цветове, набори от шрифтове, размери, тегла, радиуси и сенки, взети от изобразени елементи, с колко често се появява всеки от тях.
W3C design-token JSON за Tokens Studio и Style Dictionary или CSS файл с всеки режим под неговия оригинален селектор.
Импортирайте истинската палитра, тип и разстояние в Tokens Studio вместо да избирате цветове от екранни снимки.
Вижте колко цвята и размери на шрифта действително използва даден сайт и кои стойности заобикалят tokens които дефинира.
Сравнете всяка променлива, която тъмният режим отменя, с нейната светла стойност, една до друга, и открийте тези, които никога не са били отменяни.
Експортирайте tokens веднъж и ги подавайте към Style Dictionary или конфигурация Tailwind, вместо да копирате стойности на ръка.
Изтеглете цветовата система, мащаба на типа и радиусите на сайт, на който се възхищавате, във файл, от който можете да работите.
Щракнете върху иконата Design Tokens в докинг станцията DevSuite Pro. Извличането започва незабавно и обобщението отчита променливи, режими, цветове и шрифтове.
Разделът Цветове показва всеки цветен token като мостра, разделен, за да покаже всеки режим на тема, последван от цветовете, които страницата изобразява, с броя на употребата.
Typography визуализира всеки набор от шрифтове и изброява размери, тегла, височини на редове и правила за @font-face; последният раздел обхваща разстояние, радиуси, сенки и движение.
Разделът Променливи изброява всяко персонализирано свойство с неговата авторска и разрешена стойност. Превключвайте между база, всеки режим на тема и променливи с обхват на компонента.
Download tokens JSON за Figma чрез Tokens Studio или Download CSS за лист със стилове. Поставете отметка в квадратчето, за да включите и променливи с обхват на компонента.
Инсталирайте DevSuite Pro безплатно и отключете 74+ инструмента за разработчици за вашия браузър.
