TullsDark
Тёмная тема: те же роли, что у TullsLight,
указывают на тёмные шкалы палитр (--pallete-<цвет>-darkN). Ступени не
зеркальны светлой: в светлой карточки белые на сером фоне, в тёмной —
фон темнее карточек. Действует по data-theme="dark" на <html>. Атрибут
ставит приложение; «как в системе» оно резолвит в light/dark само по
prefers-color-scheme до первой отрисовки, чтобы тема в CSS не дублировалась
под медиазапрос.
Светлая и тёмная — две системные темы. Тема проекта — ещё один такой файл в
_themes со своим именем в data-theme.
Фоны
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-background-application | var(--pallete-gray-dark1) | Фона приложения | |
--theme-background-component | var(--pallete-gray-dark3) | Фон картоцек, ячеек. панелей | |
--theme-background-component-ineractive | var(--pallete-gray-dark4) | Фон интерактивной карточочки при наведении | |
--theme-background-secondary-component | var(--pallete-gray-dark2) | Фон дополнительных панелей | |
--theme-background-accent-component | var(--alpha-pallete-violet3) | Фон дополнительных панелей в акцентном состоянии |
Текст
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-text-application | var(--pallete-gray-dark12) | Основной текст приложения | |
--theme-text-caption | var(--pallete-gray-dark11) | Дополнительный текст приложения | |
--theme-text-white | var(--color-white) | Белый текст | |
--theme-text-danger | var(--pallete-red-dark11) | Текст ошибок |
Контролы
Пары 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-gray-dark9) | Фон или обводка | |
--theme-control-secondary-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-success-base | var(--pallete-green-dark9) | Фон или обводка | |
--theme-control-success-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-warning-base | var(--pallete-orange-dark9) | Фон или обводка | |
--theme-control-warning-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-danger-base | var(--pallete-red-dark9) | Фон или обводка | |
--theme-control-danger-text | var(--color-white) | Цвет текста для заливки | |
--theme-control-default-base | var(--pallete-gray-dark12) | Фон или обводка | |
--theme-control-default-text | var(--pallete-gray-dark1) | Цвет текста для заливки: gray-dark12 почти белый, текст на нём тёмный |
Аватары
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-avatar-fallback | var(--pallete-red-dark3) | Фон запасного содержимого по умолчанию | |
--theme-avatar-status-online | var(--pallete-green-dark9) | Цвета индикатора статуса | |
--theme-avatar-status-away | var(--pallete-orange-dark9) | - | |
--theme-avatar-status-dnd | var(--pallete-red-dark9) | - | |
--theme-avatar-status-offline | var(--pallete-gray-dark9) | - |
Обводка
| Variable | Value | Preview | Description |
|---|---|---|---|
--theme-border | var(--pallete-gray-dark6) | Основной цвет обводки |
Тени
Своя чёрная пара к шкале теней: тёмные альфа-ступени серого белёсые
| Variable | Value | Preview | Description |
|---|---|---|---|
--shadow-1x | 0 1px 2px #00000014, 0 1px 1px #0000000a | Тени _variables/shadow.css замешаны на светлых альфа-ступенях серого; тёмные альфа-ступени белёсые (так устроен Radix), а тень должна остаться тёмной — поэтому тема задаёт свои, чёрные, с той же геометрией | |
--shadow-2x | 0 2px 4px #0000001f, 0 1px 2px #00000014 | - | |
--shadow-3x | 0 4px 8px #0000001f, 0 2px 4px #00000014 | - | |
--shadow-4x | 0 8px 16px #0000002e, 0 4px 8px #0000001f | - | |
--shadow-5x | 0 16px 32px #0000003d, 0 8px 16px #0000001f | - | |
--shadow-6x | 0 24px 48px #0000004d, 0 12px 24px #0000002e | - | |
--shadow-inset | inset 0 1px 2px #0000001f | - |