Определение токенов
Токен — именованное решение, а не случайное число. Вместо «вот этот голубой» и «вот 13 пикселей» система держит сущности, к которым можно обратиться по имени, переиспользовать и преобразовать под носитель.
Токен — не только CSS‑переменная. Он связывает макет, код, тему, документацию и производство. На экране его произносят как --c4 или --1s. На бумаге — той же ролью в миллиметрах и краске. На площадке — шагом человека и цветом ткани. Имя одно. Единица может быть разной.
Вайбкодеру достаточно одной мысли: в контенте пишут роль, не величину. Класс говорит, зачем пятно. Токен считает, сколько оно стоит сейчас. Тема, ширина и печать имеют право пересчитать величину. Имя роли они не трогают.
1. Токен — атом решения
Токен — минимальная именованная единица: цвет, шаг, радиус, край, тень, длительность, форма, материал. Главное свойство — звать решение по имени, а не ловить его значением.
В ЮАИ сырьё цвета — шкала --c0 … --c11. Сырьё ритма — точка морфинга --1s и ступени --01s … --20s. Пока решение живёт в имени, его можно сдвинуть в корне. Пока оно зашито hex или px внутри блока, корень его не знает.
2. Три слоя, не склад чисел
Устойчивая архитектура отвечает на три разных вопроса. Путать слои — частая ошибка новичка: он либо пишет в контент сырой hex, либо заводит «токен кнопки» на один макет.
Примитив
Какое значение существует? --c4, --1s, --1_5s. Нейтральное сырьё, без должности.
Семантика
Что это значит? Поверхность страницы, текст, действие, отклик, шаг поля. В ЮАИ роль чаще всего названа классом: .bg0, .c0, .bg5, .pad.
Орган
Где применяется? Кнопка, поле, карточка, рамка сертификата. Орган берёт семантику, не прыгает сразу к hex.
Цепочка ЮАИ такая: --c4 → роль действия → кнопка или плашка на листе. Примитив даёт наличие. Семантика даёт смысл. Орган даёт место. Носитель даёт единицу измерения.
3. Примитив не носит должность
Имя --c4 не должно значить «фон этой кнопки». Один и тот же примитив может окрасить действие, край, заливку знака, плашку печати. Если сырьё назвать в честь одной кнопки, тему уже не переназначить: все должности приклеены к одному месту.
Смысл появляется на семантическом слое. Поэтому в контенте почти не пишут var(--c4) руками. Пишут класс роли. Класс держит должность. Тема подменяет сырьё под этой должностью.
4. Точка морфинга и шкала шага
--1s — база ритма. На широком экране обычно 16px, на узком и в ландшафте считается от ширины, на больших мониторах чуть растёт, в печати задаётся отдельно. Имена ступеней те же:
--01s --017s --025s --05s --075s --1s --1_25s --1_5s --2s --2_5s --3s --4s --5s и дальше до --20s.
Смысл не в пикселе. Смысл в том, что «один шаг» и «полшага» называются одинаково в карточке сайта, в поле формы и в модуле листовки. Класс .pad — один шаг внутрь. .pad2 — два. .margin — шаг снаружи. Выдумать «отступ 13px, потому что так влезло» — выйти из шкалы.
5. Шкала цвета и роли классов
В светлой теме --c0 — самый тёмный текст, --c10 — поверхность страницы, --c11 — прозрачность. Акценты: --c4 голубой действия, --c5 салатовый отклик.
В тёмной теме шкала зеркалится сама. Имена ролей не меняют. Поэтому семантический слой выдерживает смену режима: компонент по‑прежнему просит «текст» и «поверхность», а не «почти чёрный» и «почти жёлтый».
Грамматика фона.
Класс .bg0 красит поверхность страницы и берёт --c10. Нумерация фона зеркальная к номеру текста. Это не ошибка. Кто пишет «bg0 значит тёмный» — путает имя роли и номер сырья.
Текст: .c0 … .c10. Фон: .bg0 … .bg11. Край: .br включает рамку, .br0 … .br10 красят её в --c0 … --c10. Обычно пишут оба: br br4. Заливка знака: .ui_fil0 … .ui_fil11.
Откуда берётся сама шкала темы. Базовый алгоритм — Соляризатор цвета Лето ЮАИ. Он собирает палитру в духе лета и отдаёт её ролям --c0…--c10. В контент значения не копируют. Копируют классы.
6. Радиус и край — тоже токены
Острота угла не «16 пикселей с макета». Класс .rounded берёт var(--1_5s): радиус дышит вместе с --1s и подстраивается под тему. .rounded-top скругляет только верх. .circle делает круг. Свой border-radius в px выдёргивает блок из темы: тема больше не знает этот угол.
Рамку включают ролью, не толщиной в стилях. Без .br цвет края не проявится как задумано. Связка br br4 — типичный край действия. Цвет края мутирует со светлой, тёмной и кастомной темой.
7. Органный слой и состояния
Компонентный токен нужен, когда у органа своя анатомия и свои состояния. В ЮАИ этот слой не плодят в контенте отдельными переменными «радиус этой карточки». Орган берёт семантические классы и наследует поведение темы.
Карточка: bg1 rounded pad boxshadow. Поле формы: поверхность, шаг, скругление. Кнопка: нативный control и роль действия. Если значение живёт только внутри одной кнопки одного макета — это не глобальный токен, это локальный долг.
Состояния тоже часть токенной карты. На экране: обычное, наведение, фокус, нажатие, отключение, ошибка. На аналоге те же оси звучат иначе: день и ночь, цвет и монохром, обычный и крупный масштаб, временная и постоянная маркировка. Токен описывает не один кадр, а разрешённую мутацию.
8. Тема — переназначение, не вторая система
Тема не рисует новый ЮАИ. Тема подменяет значения под теми же именами. Светлая, тёмная, кастомная, печатная, высококонтрастная — разные положения ручки, один словарь ролей.
Тема может сменить не только цвет. Она может сменить остроту угла, плотность, допустимый контраст, материал листа. Пока контент говорит классами, блок переезжает сам. Пока в блоке зашит hex из соляризатора «для точности», тема этот кусок уже не ведёт.
9. Токены вне экрана
- Печать. Те же роли в краске и в модуле миллиметров. Радиус не обязан совпасть в мм с экраном. Обязана совпасть ступень характера: мягкий орган ЮАИ, не чужой острый прямоугольник.
- Крупная форма. Баннер читают с десяти метров. Токен текста там — ступень «заголовок носителя», не экранный --1s. Роль акцента сохраняется.
- Лента и бот. Часто нет CSS ЮАИ. Едут текст, знак, короткая формула действия. Токены становятся ограничениями: не вводить третий акцент, не орать капсом вместо иерархии.
- Пространство. Токен расстояния — шаг человека. Токен акцента — свет, ткань, табличка. Если сцена зелёная, а действие системы голубое, это решение языка, не случайность подрядчика.
10. Имя, перенос, новый токен
Имя — часть архитектуры. Примитив зовут по месту в шкале: --c4, --2s. Семантику зовут по должности: поверхность, текст, действие. Не называют токен в честь случайной страницы, если роль шире этой страницы.
Переносимость значит: одно решение можно проверить и произнести в другом инструменте. На экране источник правды — тема и yuaidesignsystem.css. На аналоге — спецификация той же роли. Если ссылка обрывается и величину подбирают глазом, токена уже нет.
Новый токен заводят, когда роль повторилась на двух носителях и не выражается текущим словарём. Разовый «чтобы влезло» — не токен. Это долг, который потом вычищают.
Что запомнить сборщику
Токены — не склад чисел. Они отвечают: какое значение есть; какую роль играет; где применяется; какие состояния держит; как меняется в теме; как произносится на другом носителе; какие ограничения нельзя снять.
В контенте это выглядит просто. Цвет — .c / .bg / .br. Шаг — .pad и .margin. Угол — .rounded. Hex, 13px и «чуть скруглил руками» не мутируют. Поэтому их в контент не кладут: иначе носители перестают быть одной биосферой.
