Тени
Шесть уровней возвышения плюс внутренняя тень и кольцо фокуса. Чем выше элемент над поверхностью, тем глубже и мягче тень; уровень подбирается по роли элемента, а не на глаз — подсказки в описаниях строк. Шкала согласована со слоями: чем выше слой, тем глубже тень.
Тени
| Variable | Value | Preview | Description |
|---|---|---|---|
--shadow-1x | 0 1px 2px var(--alpha-pallete-gray3), 0 1px 1px var(--alpha-pallete-gray2) | Уровень 1 — едва заметная тень: интерактивные элементы при наведении, мелкие карточки | |
--shadow-2x | 0 2px 4px var(--alpha-pallete-gray4), 0 1px 2px var(--alpha-pallete-gray3) | Уровень 2 — лёгкое возвышение: карточки, плитки, поля ввода в фокусе | |
--shadow-3x | 0 4px 8px var(--alpha-pallete-gray4), 0 2px 4px var(--alpha-pallete-gray3) | Уровень 3 — заметное возвышение: выпадающие списки, поповеры, подсказки | |
--shadow-4x | 0 8px 16px var(--alpha-pallete-gray5), 0 4px 8px var(--alpha-pallete-gray4) | Уровень 4 — выраженное возвышение: меню, всплывающие панели | |
--shadow-5x | 0 16px 32px var(--alpha-pallete-gray6),
0 8px 16px var(--alpha-pallete-gray4) | Уровень 5 — высокое возвышение: модальные окна, диалоги | |
--shadow-6x | 0 24px 48px var(--alpha-pallete-gray7),
0 12px 24px var(--alpha-pallete-gray5) | Уровень 6 — максимальное возвышение: крупные оверлеи, листы поверх контента | |
--shadow-inset | inset 0 1px 2px var(--alpha-pallete-gray4) | Внутренняя тень — для «вдавленных» элементов: поля ввода, треки, ячейки | |
--shadow-focus | 0 0 0 2px var(--alpha-pallete-violet8) | Кольцо фокуса — акцентная обводка для элементов в фокусе с клавиатуры |