Стили и токены

CSS layers

Runtime-стили — только plain CSS с фиксированным порядком слоёв:

1. tokens
2. primitives
3. components
4. app (приложение-потребитель)

Неслойные сбросы в приложении могут перебить стили библиотеки — размещайте product reset в @layer app.

Токены

Цвета, отступы, скругления, типографика и тени — из packages/tokens как CSS custom properties (--ui-color-*, --ui-space-*, …).

Шрифты в опубликованный пакет tokens не входят. Задайте --s-ui-font-family-sans или подключите свой @font-face (в Storybook и на этом сайте локально используется Inter).

Контуры компонентов

Визуальные обводки — через outline, не border, чтобы группы (например SButtonGroup) могли перекрывать контуры без сдвига вёрстки.

Темизация

Переопределяйте переменные темы на .s-ui-root (или в scoped-обёртке). В продуктовом коде не используйте локальные hex/rgba — только CSS-переменные из tokens.