video1.0<iframe src="https://www.loom.com/embed/b9be13b3f4c94437861abb01de4fdc47" frameborder="0" width="1670" height="1252" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>12521670Loomhttps://www.loom.com12521670https://cdn.loom.com/sessions/thumbnails/b9be13b3f4c94437861abb01de4fdc47-3b7efa4a66f54af8.gif571.958This Loom рассказывает о двух подходах к созданию цветовых токенов в дизайн-системе, на примере Untitled UI и реального проекта автора. Основной, более сложный подход строится по иерархии примитивов, например foreground, и уровням иерархии primary, secondary, tertiary, quaternary, а также модификаторам взаимодействия вроде hover, selected и disabled; коллекции делятся прежде всего по насыщенности, а семантика добавляется позже, что приводит к очень большому числу токенов, но дает гибкость. Более простой подход, как у Google, не привязывает токены к конкретным компонентам: например, кнопка использует color primary 500, а этот же цвет может применяться для чекбоксов, радиокнопок и других элементов без переименований токенов. Автор отмечает, что такой вариант проще, быстрее и масштабируемее, и в итоге предпочитает именно эту структуру.