Themes tokens

Система тематизации на семантических токенах.

Документация описывает архитектуру токенов системы SDDS и может использоваться как справочник для дизайнеров и разработчиков при построении, использовании и расширении брендовых тем.

См. также: glossary.md — термины «токен», «тема», «контекст»; introducing.md — архитектура системы.

Быстрый старт (Figma)

Если вы дизайнер и только начинаете работать с SDDS в Figma:

1. Откройте файл SDDS | Styles (fileKey 0FxQGHmGUOCjtHM3N9j4Oq)
2. В правой панели → Local Variables — здесь хранятся все токены
3. Чтобы применить тему к макету — выделите фрейм и переключите коллекцию 01. Theme в нужный вариант
4. Компоненты обновятся автоматически — цвета подтянутся из новой коллекции

Если компонент не меняет цвет при смене темы — он использует захардкоженное значение вместо токена. Это баг, а не норма.

1. Общая архитектура токенов

• Color Tokens — токены цвета
• Typography Tokens — токены шрифта
• Shadow Tokens — токены теней
• Shape Tokens — токены скруглений
• Blur Tokens — токены размытия

Theme / Тема

В дизайн-системе SDDS стиль бренда и переопределение под него компонентов задаётся через Тему — набор семантических токенов, определяющий визуальную идентичность продукта, а не конкретные значения напрямую. Это позволяет переключать темы без изменения компонентов.

2. Color Tokens — токены цвета

Токен цвета — это семантически именованная единица, которая хранит не конкретный цвет, а смысл применения этого цвета в интерфейсе. Компоненты никогда не обращаются к Raw Values напрямую — только через семантические токены.

Raw Value        →  Base Token  →  Semantic Token         →  Component
#118CDF             Blue[500]      DefaultSurfaceAccent      ButtonBG
                                   DefaultTextAccent         LinkButton

Важно: один Raw Value → один Base Token → много Semantic Tokens. Это обеспечивает единую точку изменения цвета для всей темы.

2.1 Структура токена цвета

Токены структурированы по схеме: Режим / Контекст / Область применения / Семантическая роль (+ Состояние).

2.2 Mode — режим отображения интерфейса

В SDDS каждый токен цвета существует в двух режимах: светлом и тёмном.

Значения:

• В дизайне: выбирается через Variables 01. Theme = <span aria-hidden="true">🌕</span> Light / <span aria-hidden="true">🌑</span> Dark
• В коде: заданы отдельными файлами Theme

2.3 Context — контекст применения

Определяет поверхность, на которой отрисовывается элемент.

Пример поведения токена TextPrimary в зависимости от контекста:

2.4 Область применения / Категория

Определяет, к какому слою UI-элемента или интерфейса применяется токен.

• Text — цвет текста и иконок
• Surface — цвет поверхностей (фона) компонентов
• Outline — цвет обводок и фокуса компонентов
• BG — фон страниц, группа не применима к компонентам
• Overlay — наложение под модальными окнами
• Syntax — подсветка синтаксиса кода
• Data — токены для визуализации данных и графиков

Один и тот же смысловой цвет (например, «акцентный») существует отдельно для каждой группы, потому что значения могут быть одинаковыми, а могут отличаться:

• TextAccent — Green[600] (#108E26) — насыщенный для текста
• SurfaceAccent — Green[400] (#24B23E) — более светлый оттенок цвета
• OutlineAccent — Green[600] (#108E26) — цвет обводки в цвет текста

2.5 Семантическая роль

Роль описывает смысл и иерархию токена внутри группы. Ниже приведены примеры ролей; полный список семантических токенов — в базовом наборе токенов цвета.

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

Accent — акцентные роли. Фирменный/акцентный цвет бренда.

Status — статусные роли. Несут смысловую нагрузку.

Специальные роли

Для уточнения роли в имя токена может добавляться модификатор:

• Solid — непрозрачный вариант
• Transparent — вариант с прозрачностью
• Gradient — градиент
• Minor — приглушённый, менее интенсивный

2.6 State — состояние

Описывает интерактивное изменение токена при взаимодействии пользователя с интерфейсом.

• Default — отсутствует в имени, базовое состояние
• Hover — курсор наведён
• Active — элемент нажат / активен прямо сейчас

Значения цвета токенов для интерактивных состояний рассчитываются в SDDS по формулам для заданной цветовой схемы.

Стандартные значения токенов цвета SDDS — в документации Color.

3. Typography Tokens — токены шрифта

Система иерархической организации текстовой информации.

3.1 Структура

Токены типографики описывают полную систему текстовых стилей. Каждый токен — композитный объект: Группа / Подгруппа / Название группы + Размер + Начертание.

Пример: Display/Large Screens/DisplayL B.

3.2 Основные группы

3.3 Подгруппы

Подгруппы разделены относительно размерных групп компонента Grid (подробнее — документация Grid). Определяют размер шрифта в токене в зависимости от размера устройства или области просмотра.

3.4 Размер

Размер в названии токена типографики — это не конкретное значение в пикселях, а смысловое значение. Это позволяет менять реальные пиксели, не меняя имени токена.

Шкала размеров — относительные буквенные метки:

xxs < xs < s < m < l

Исключение: группа Header — размер описывается числовыми значениями по возрастанию от 6 до 1.

3.5 Начертание

В SDDS два смысловых значения начертания типографики:

• Bold (b)
• Normal (n)

Реальное значение fontStyle задаётся пользователем.

Стандартные значения токенов типографики SDDS — в документации Typography.

4. Shadow Tokens — токены теней

Набор значений, определяющих эффекты теней у компонентов.

Структура имени: Namespace / Direction / Character / Size — например, Shadows/Down/Soft/S.

1. Namespace — группа токенов теней
2. Direction — направление
3. Character — характер/интенсивность
4. Size — размер

В SDDS есть базовый набор токенов тени, значения которых определяются переменными направления, интенсивности и размера.

Direction — переменная направления:

• Down — направлена вниз
• Up — направлена вверх
• Center — вокруг элемента

Character — переменная интенсивности:

• Soft — мягкая тень с большим размытием, рассеянная
• Hard — чёткая, контрастная, резкая тень

Size — размер тени:

• S — малая тень
• M — средняя тень
• L — большая тень

Стандартные значения токенов тени SDDS — в документации Shadow.

5. CornerRadius Tokens — токены скруглений

Набор значений, определяющих радиус скругления углов у компонентов.

Структура имени: Namespace + Size — например, CR S.

1. Namespace — группа токенов скруглений
2. Size — размер

В токенах скругления есть стандартные буквенные значения и вычисляемые.

5.1 Шкала стандартных размеров

Размер описывается через относительные буквенные метки. Значение размера — это позиция в шкале, а не конкретное значение в пикселях:

Null (0) < XXS < XS < S < M < L < XL < XXL < Rounded (100%)

5.2 Вычисляемые значения

В компонентах применяются промежуточные значения — расчётные токены с правилом шага ±2px от базового токена. Например:

calc:[CRXXL-2], calc:[CRM-2], calc:[CRL-2], calc:[CRXL-2]

Стандартные значения токенов скруглений SDDS и правила вычисления — в документации Corner Radius (corner-radius.md).

6. Blur Tokens — токены размытия

Набор значений, определяющих эффекты размытия у компонентов.

Токены Blur используются для:

• Стеклянных / frosted-glass поверхностей
• Фоновых панелей с backdrop-filter
• Модальных окон с размытым задним планом
• Системы уровней глубины (depth layers)

Структура имени: Namespace / Role + Effect marker + Size — например, Layer/BlurS.

1. Namespace — группа токенов размытия
2. Role — роль применения
3. Effect marker — неизменный уточняющий маркер внутри имени, явно указывает на blur-эффект
4. Size — размер

В SDDS есть базовый набор токенов размытия, значения которых определяются переменными роли применения и размера.

Role — роль применения, определяет, к чему применяется эффект размытия:

• Layer — размывает сам элемент
• Background — размывает фон за элементом (glass-эффект)

Size — размер размытия:

• S — лёгкое размытие
• M — среднее размытие
• L — сильное размытие

Стандартные значения токенов размытия SDDS — в документации Blur.