Design Tokens собирает каждую переменную CSS, цвет, стек шрифтов, радиус и тень, которые использует страница, сортирует их по базовым tokens, режимам темы и областям компонентов и загружает их в виде JSON design-token W3C для Figma или в виде файла CSS.
Дизайн-система редко записывается так же полно, как и реализуется. Реальная палитра, масштаб интервалов и линейка типов живут в таблицах стилей — они распределены по пользовательским свойствам, переопределениям темы и жестко закодированным значениям — и пересоздание их вручную из DevTools означает просмотр сотен правил и копирование значений по одному.
Этот инструмент читает их все одновременно. Он просматривает каждую таблицу стилей на странице, в том числе таблицы с перекрестным происхождением, которые сама страница не имеет права проверять, и собирает все пользовательские свойства, а также переменные, установленные во время выполнения во встроенных стилях. Переменные в:root становятся базовыми tokens; одни и те же имена, переопределенные в селекторе темы, например.dark, [data-theme="dark"] или prefers-color-scheme становятся отдельными режимами; переменные, определенные в отдельных компонентах, указаны как ограниченные. Каждое значение разрешается через цепочку var(), поэтому вы видите цвет, который на самом деле отображается, а не просто ссылку на другую переменную.
Каждый token классифицируется по его значению и имени — цвету, семейству шрифтов, размеру шрифта, толщине, высоте строки, интервалу, радиусу, тени, градиенту, продолжительности, плавности или z-индексу — а цвета нормализуются в шестнадцатеричном формате, включая форматы, используемые только в канале 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 присваивается цвет, шрифт, размер, интервал, радиус, тень, продолжительность, плавность или z-индекс.
Hex, rgb, hsl, oklch, именованные цвета и значения только для канала, используемые Tailwind, shadcn и Bootstrap, нормализованные к шестнадцатеричному формату.
Цвета, наборы шрифтов, размеры, вес, радиусы и тени выбраны из отображаемых элементов, а также частота появления каждого из них.
JSON design-token W3C для 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 для таблицы стилей. Установите флажок, чтобы включить также переменные области компонента.
Установите DevSuite Pro бесплатно и разблокируйте более 74 инструментов разработчика для вашего браузера.
