Дизайн-токены

Токены AtlantumUI поставляются пакетом @atlantum/core и построены на двух уровнях: примитивные токены задают сырые значения, семантические токены описывают роль значения в интерфейсе. Компоненты @atlantum/react используют исключительно семантический уровень.

Уровень 1 — примитивы

Неизменяемые значения без привязки к смыслу: палитры цветов, шкала размеров, типографика.


--blue-500: rgba(32, 91, 207, 1);
--grey-solid-850: rgba(29, 30, 32, 1);
--16: 16px;
--font_size-medium: 14px;

Примитивы никогда не используются напрямую в стилях компонентов — только как источник для семантических токенов.

Уровень 2 — семантические токены

Переменные, отражающие назначение в интерфейсе, по шаблону:


--{тип свойства}-{семантическая группа}-{визуальный акцент}-{состояние}

Категория	Значения
Тип свойства	`bg` (фон), `fg` (текст/заливка), `br` (граница), `link` (ссылка)
Семантическая группа	`accent`, `lead` (бренд / main), `critical`, `success`, `warning`, `info`, `grey`
Визуальный акцент	`calm`, `loud`, `bold`
Состояние	`enabled`, `hover`, `active`, `disabled`


--bg-accent-calm-enabled: var(--accent-50);
--fg-critical-loud-enabled: var(--red-400);
--br-lead-onLight-enabled: var(--main-400);

Брендовые алиасы

Смена брендовой палитры делается в одной точке:


--main-500: var(--blue-500);
--accent-500: var(--grey-solid-550);

Все токены вида --bg-lead-loud-enabled ссылаются на --main-* — замена этой шкалы обновляет всю палитру интерфейса, сохраняя логику состояний.

Радиусы и spacing


--m: var(--8);              /* base radius */
--gap-related: var(--8);    /* condensed default */
--padding-m: var(--8);

Темы: strict / classic / playful (радиусы), relaxed (более широкие gap).

Подключение


import "@atlantum/core/primitives.css";
import "@atlantum/core/foundation.css";