{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/b9be13b3f4c94437861abb01de4fdc47\" frameborder=\"0\" width=\"1670\" height=\"1252\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1252,"width":1670,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1252,"thumbnail_width":1670,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/b9be13b3f4c94437861abb01de4fdc47-3b7efa4a66f54af8.gif","duration":571.958,"title":"design tokens creation","description":"This Loom рассказывает о двух подходах к созданию цветовых токенов в дизайн-системе, на примере Untitled UI и реального проекта автора. Основной, более сложный подход строится по иерархии примитивов, например foreground, и уровням иерархии primary, secondary, tertiary, quaternary, а также модификаторам взаимодействия вроде hover, selected и disabled; коллекции делятся прежде всего по насыщенности, а семантика добавляется позже, что приводит к очень большому числу токенов, но дает гибкость. Более простой подход, как у Google, не привязывает токены к конкретным компонентам: например, кнопка использует color primary 500, а этот же цвет может применяться для чекбоксов, радиокнопок и других элементов без переименований токенов. Автор отмечает, что такой вариант проще, быстрее и масштабируемее, и в итоге предпочитает именно эту структуру."}