TullsLight
Тема — семантический слой между палитрами
и компонентами: каждая роль (--theme-*) указывает на ступень палитры.
Компоненты и приложения обращаются только к ролям — поэтому новая
тема перекрашивает весь интерфейс одним файлом маппинга. TullsLight —
светлая тема и пока единственная в библиотеке.
Фоны
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-background-application | var(--pallete-gray4) | Фона приложения | |
--theme-background-component | var(--color-white) | Фон картоцек, ячеек. панелей | |
--theme-background-component-ineractive | var(--pallete-gray3) | Фон интерактивной карточочки при наведении | |
--theme-background-secondary-component | var(--pallete-gray5) | Фон дополнительных панелей | |
--theme-background-accent-component | var(--alpha-pallete-violet3) | Фон дополнительных панелей в акцентном состоянии |
Текст
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-text-application | var(--pallete-gray12) | Основной текст приложения | |
--theme-text-caption | var(--pallete-gray11) | Дополнительный текст приложения | |
--theme-text-white | var(--color-white) | Белый текст | |
--theme-text-danger | var(--pallete-red11) | Текст ошибок |
Контролы
Пары base/text для шести вариантов визуального словаря
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-control-primary-base | var(--pallete-violet9) | Фон или обводка | |
--theme-control-primary-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-secondary-base | var(--pallete-gray9) | Фон или обводка | |
--theme-control-secondary-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-success-base | var(--pallete-green9) | Фон или обводка | |
--theme-control-success-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-warning-base | var(--pallete-orange9) | Фон или обводка | |
--theme-control-warning-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-danger-base | var(--pallete-red9) | Фон или обводка | |
--theme-control-danger-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-default-base | var(--pallete-gray12) | Фон или обводка | |
--theme-control-default-text | var(--color-white) | Цвет текста для заливки |
Аватары
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-avatar-fallback | var(--pallete-red3) | Фон запасного содержимого по умолчанию | |
--theme-avatar-status-online | var(--pallete-green9) | Цвета индикатора статуса | |
--theme-avatar-status-away | var(--pallete-orange9) | - | |
--theme-avatar-status-dnd | var(--pallete-red9) | - | |
--theme-avatar-status-offline | var(--pallete-gray9) | - |
Стабильные цвета
Палитра хелпера getStableColor — цвет сущности из строки
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-stable-color-1 | #c0392b | Палитра стабильных цветов — индекс выбирает хелпер getStableColor | |
--theme-stable-color-2 | #d35400 | - | |
--theme-stable-color-3 | #9a7d0a | - | |
--theme-stable-color-4 | #27ae60 | - | |
--theme-stable-color-5 | #16a085 | - | |
--theme-stable-color-6 | #2980b9 | - | |
--theme-stable-color-7 | #8e44ad | - | |
--theme-stable-color-8 | #c2185b | - |
Обводка
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-border | var(--pallete-gray6) | Основной цвет обводки |