Серый
Нейтральные ступени — фоны, обводки, текст и приглушённые состояния. Ступени идут от светлого к тёмному; в дизайне напрямую
не используются — нужная ступень прокладывается через роль темы
TullsLight или
TullsDark. У цвета две шкалы: светлая (…N) и тёмная (…-darkN).
Ступени
| Variable | Value | Preview | Description |
|---|---|---|---|
--pallete-gray1 | #fcfcfd | Шаг 1: Фон страницы и приложения | |
--pallete-gray2 | #f9f9fb | Шаг 2: Фон страницы и приложения | |
--pallete-gray3 | #eff0f3 | Шаг 3: Фон компонентов | |
--pallete-gray4 | #e7e8ec | Шаг 4: Фон компонентов | |
--pallete-gray5 | #e0e1e6 | Шаг 5: Фон компонентов | |
--pallete-gray6 | #d8d9e0 | Шаг 6: Границы и разделители | |
--pallete-gray7 | #cdced7 | Шаг 7: Границы и разделители | |
--pallete-gray8 | #b9bbc6 | Шаг 8: Границы и разделители | |
--pallete-gray9 | #8b8d98 | Шаг 9: Заливка акцентных элементов | |
--pallete-gray10 | #80828d | Шаг 10: Заливка акцентных элементов | |
--pallete-gray11 | #62636c | Шаг 11: Текст | |
--pallete-gray12 | #1e1f24 | Шаг 12: Текст | |
--pallete-gray-dark1 | #111113 | Шаг 1: Фон страницы и приложения | |
--pallete-gray-dark2 | #18191b | Шаг 2: Фон страницы и приложения | |
--pallete-gray-dark3 | #212225 | Шаг 3: Фон компонентов | |
--pallete-gray-dark4 | #272a2d | Шаг 4: Фон компонентов | |
--pallete-gray-dark5 | #2e3135 | Шаг 5: Фон компонентов | |
--pallete-gray-dark6 | #363a3f | Шаг 6: Границы и разделители | |
--pallete-gray-dark7 | #43484e | Шаг 7: Границы и разделители | |
--pallete-gray-dark8 | #5a6169 | Шаг 8: Границы и разделители | |
--pallete-gray-dark9 | #696e77 | Шаг 9: Заливка акцентных элементов | |
--pallete-gray-dark10 | #777b84 | Шаг 10: Заливка акцентных элементов | |
--pallete-gray-dark11 | #b0b4ba | Шаг 11: Текст | |
--pallete-gray-dark12 | #edeef0 | Шаг 12: Текст |
Альфа-ступени
Полупрозрачные варианты — тени, подложки, наложения
| Variable | Value | Preview | Description |
|---|---|---|---|
--alpha-pallete-gray1 | #00005503 | Шаг 1: Фон страницы и приложения | |
--alpha-pallete-gray2 | #00005506 | Шаг 2: Фон страницы и приложения | |
--alpha-pallete-gray3 | #00104010 | Шаг 3: Фон компонентов | |
--alpha-pallete-gray4 | #000b3618 | Шаг 4: Фон компонентов | |
--alpha-pallete-gray5 | #0009321f | Шаг 5: Фон компонентов | |
--alpha-pallete-gray6 | #00073527 | Шаг 6: Границы и разделители | |
--alpha-pallete-gray7 | #00063332 | Шаг 7: Границы и разделители | |
--alpha-pallete-gray8 | #00083046 | Шаг 8: Границы и разделители | |
--alpha-pallete-gray9 | #00051d74 | Шаг 9: Заливка акцентных элементов | |
--alpha-pallete-gray10 | #00051b7f | Шаг 10: Заливка акцентных элементов | |
--alpha-pallete-gray11 | #0002119d | Шаг 11: Текст | |
--alpha-pallete-gray12 | #000107e1 | Шаг 12: Текст | |
--alpha-pallete-gray-dark1 | #00000000 | Шаг 1: Фон страницы и приложения | |
--alpha-pallete-gray-dark2 | #d8f4f609 | Шаг 2: Фон страницы и приложения | |
--alpha-pallete-gray-dark3 | #ddeaf814 | Шаг 3: Фон компонентов | |
--alpha-pallete-gray-dark4 | #d3edf81d | Шаг 4: Фон компонентов | |
--alpha-pallete-gray-dark5 | #d9edfe25 | Шаг 5: Фон компонентов | |
--alpha-pallete-gray-dark6 | #d6ebfd30 | Шаг 6: Границы и разделители | |
--alpha-pallete-gray-dark7 | #d9edff40 | Шаг 7: Границы и разделители | |
--alpha-pallete-gray-dark8 | #d9edff5d | Шаг 8: Границы и разделители | |
--alpha-pallete-gray-dark9 | #dfeffe6d | Шаг 9: Заливка акцентных элементов | |
--alpha-pallete-gray-dark10 | #e5f0fd7b | Шаг 10: Заливка акцентных элементов | |
--alpha-pallete-gray-dark11 | #f1f7feb5 | Шаг 11: Текст | |
--alpha-pallete-gray-dark12 | #fcfdffef | Шаг 12: Текст |