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

Стили CDS построены на трёхуровневой системе токенов:

1. Уровень 1 — значения. Готовые цвета и размеры, записанные литералами в темах (packages/components/src/themes/): цвета встроенных тем — в oklch(). В компонентах значения напрямую не используются.
2. Уровень 2 — семантические токены. Глобальные CSS-переменные (--cds-color-*, --cds-spacing-*, --cds-font-*), которые генерируются из тем. Именно их используют приложения и компоненты.
3. Уровень 3 — токены компонента. Локальные переменные компонента (styles/_Cds*.variables.scss), ссылаются на уровень 2.

Разделы:

• Темы — семантические цветовые токены тем и их значения (уровни 1–2)
• Отступы — шкала --cds-spacing-*
• Типографика — размеры, интерлиньяж и насыщенность шрифта

Как подключить свою тему и использовать токены в приложении — в гайде Тематизация.