ENUK

Як побудована система

Технічна сторона для тих, хто її підтримуватиме: шари, осі, пайплайн і доказ у коді.

Три шари токенів

Компонент просить значення за змістом. Значення вказує на примітив. Тільки примітиви тримають сирі значення, тому вище жоден колір не зашитий.

Component

Читає зміст. Ніколи не сире значення.

button.primary.bg
Semantic

Каже, для чого значення: текст, заливка, межа.

color.fill.primary
Primitive

Єдиний шар зі справжніми кольорами, розмірами й шрифтами.

color.product1.500

Дві осі: бренд і тема

Бренд і світла/темна тема незалежні. Чотири бренди на дві теми дають вісім комбінацій з тих самих компонентів. Оберіть клітинку, щоб побачити це лобі.

СвітлаТемна

Компоненти

Набори компонентів у Figma й властивості, які кожен із них відкриває. Той самий компонент є в усіх брендах.

Пайплайн

Від дизайн-рішення до CSS-змінної в продакшні, з перевірками по дорозі.

Figma

Variables і сети Token Studio.

GitHub

Токени як JSON у репозиторії.

Build

JSON токенів у CSS-змінні, з перевірками.

CSS

Один файл змінних на бренд і тему.

Доказ у коді

Відкрийте DevTools на демо: бренд — це атрибут на кореневому елементі, а computed-значення йдуть за ним.

data-brand
Кореневий елемент

<html data-brand="aurum">

Оберіть інший бренд, щоб побачити, що змінюється.