Песочница

Меняйте accent и radius — значения применяются только к preview. Это безопасный способ подобрать тему перед переносом токенов в приложение.

Интерактивная темаВсе элементы ниже используют реальный код библиотеки 0.3.0.

Accent Radius: 12px

Название

Использовать локальную темуКомпоненты активны

Preview

Как перенести результат

1. Создайте класс темы рядом с продуктовым модулем.
2. Запишите выбранные значения в --cui-color-primary, --cui-color-focus и --cui-radius-md.
3. Примените класс к ближайшему общему контейнеру.
4. Проверьте light/dark, keyboard focus и контраст.

Полный список переменных и правила каскада — в разделе Темы и CSS-токены.