Конвертер дизайн-токенов
Конвертируйте дизайн-токены между JSON, CSS-переменными и SCSS.
Об этом инструменте
Дизайн-токены — это основные строительные блоки современных дизайн-систем: стандартизированные значения для цветов, отступов, типографики, теней и других визуальных свойств, которые команды повторно используют во всех продуктах. Централизуя эти решения в едином формате, команды обеспечивают визуальную консистентность, снижают количество ошибок и ускоряют рабочие процессы как дизайна, так и разработки. Работаете ли вы над одним продуктом или управляете несколькими платформами, дизайн-токены исключают необходимость вручную отслеживать цвета и размеры в различных частях кодовой базы.
Этот конвертер облегчает переключение между наиболее распространёнными форматами дизайн-токенов: JSON (который хранит токены как простую структуру ключ-значение), CSS-переменные (которые отображаются нативно в браузерах через селекторы :root) и SCSS-переменные (которые требуют этапа сборки, но беспрепятственно интегрируются с препроцессорами Sass). Просто вставьте свои токены в любом формате и выберите целевой формат—инструмент автоматически определит ваш ввод и сгенерирует чистый результат, готовый к копированию и вставке в ваш проект.
Команды, использующие дизайн-токены, обычно начинают с JSON в качестве исходного формата, затем генерируют выходные данные для конкретных платформ: CSS для веб-приложений, требующих нативной поддержки браузера, SCSS для проектов, созданных с помощью Sass, и JSON для инструментов, потребляющих токены программно. Этот инструмент поддерживает двустороннее преобразование, поэтому вы можете извлекать токены из существующего CSS или SCSS и преобразовывать их обратно в JSON всякий раз, когда вам нужно провести аудит или рефакторинг вашей дизайн-системы.
Часто задаваемые вопросы
Реализация кода
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.