Стили

Стили библиотеки собраны в src/assets/styles и приезжают в приложение одним импортом @tulls/ui/application.css (см. Установку). Внутри — три слоя, каждый знает только о соседнем снизу:

1. Палитры (_colors) — сырьё: ступени цвета от светлого к тёмному (--pallete-gray1…12 и альфа-варианты). В дизайне напрямую они не участвуют — ни компоненты, ни приложения к ним не обращаются.
2. Тема (_themes) — семантический слой: роли интерфейса (--theme-background-*, --theme-text-*, --theme-control-*, …) указывают на ступени палитры. Компоненты знают только роли, поэтому смена темы — это другой маппинг ролей на палитру, без единой правки в компонентах.
3. Токены (_variables, _fonts) — шкалы величин: размеры, отступы, скругления, тени, слои и типографика. Все шкалы растут от одного базового шага --base: 4px.

Отдельно живёт reset.css — нормализация браузерных стилей, на которую рассчитаны компоненты.

Токены

Размеры и отступыШкалы габаритов и промежутков с шагом 4px

Скругления и обводкиРадиусы углов и стандартная рамка

ТениУровни возвышения — от ховера до модального окна

СлоиПорядок наложения — z-index от потока документа до тостов

ТипографикаШрифт, кегли, насыщенности и роли текста

Палитры

СерыйНейтральные ступени — фоны, обводки, текст и приглушённые состояния

ФиолетовыйАкцентные ступени — primary-контролы и кольцо фокуса

ЗелёныйСтупени успеха — подтверждения и положительные состояния

ОранжевыйСтупени предупреждения — обратимые, но требующие внимания состояния

КрасныйСтупени опасности — разрушающие действия и ошибки

БелыйБазовый белый — поверхности компонентов

Темы

TullsLightСветлая тема — маппинг ролей интерфейса на ступени палитр