Высота и поверхности

Использование

Глубину передаёт поверхность. Тень означает «плавает сверху и сейчас исчезнет» и принадлежит трём компонентам.

.my-panel {
  background: var(--surface-raised);
  border: var(--hairline) solid var(--border);
}

Когда использовать

Устройство

Объявлен в одном месте, чтобы не разъезжался по компонентам.

Поповер и модалка на Popover API и <dialog> живут в верхнем слое браузера, где z-index уже не решает. Токены остаются для того, что верхнего слоя не получает, — и для приложения, которому нужно встроиться в тот же порядок.

Шкала

Читаются как стопка снизу вверх. Ступень выбирается по роли области, а не по желаемой яркости.

Пятая роль стоит вне стопки, потому что она не про глубину, а про ввод:

В тёмной теме между соседними ступенями расстояние шире, чем в светлой: тёмный конец рампы различается хуже, и зеркальная светлая раскладка дала бы четыре одинаковых чёрных прямоугольника. В теме dark-soft вся стопка поднимается на шаг рампы — переопределяются ровно пять токенов, а остальная семантика не знает, что тема сменилась. В dark-light она поднимается на две ступени и упирается в потолок: overlay там совпадает с raised, потому что следующий шаг рампы уже не держит текст. Ровно так же ведёт себя светлый конец, где обе роли сидят на --n-0.

Состояния поверх поверхности

Наведение и выделение — альфа. Непрозрачная заливка не давала бы им складываться: наведение по выделенной строке пропадало бы.

Варианты

Обе функциональны. Обе объявлены целиком в токенах — компонент подставляет готовое значение и не собирает тень сам.

Каждая тень двухслойная: дальняя даёт расстояние до фона, ближняя — контакт края. Одним слоем это выглядит либо приклеенным, либо парящим без опоры.

Цвет тени вынесен отдельно, потому что light-dark() принимает только <color> и целое значение тени через неё не проходит:

В тёмной теме тень гуще. Слабая тень на тёмном фоне невидима, а светлая тень — это уже свечение, которого кит не знает.

Правило

Тень получает только то, что появилось по действию и исчезнет по Escape. Всё, что стоит на экране постоянно, отделяется поверхностью и рамкой. Карточка не получает тень — она получает поверхность.

Подложка

В тёмной теме подложка гуще: на светлой странице затемнение само по себе создаёт контраст, на тёмной его приходится добавлять. Это затемнение, а не размытие — градиенты, свечения и размытия кит запрещает целиком.

Подложка ставится на ::backdrop нативного <dialog>, поэтому верхний слой, захват фокуса и закрытие по Escape приходят от платформы, а не от кита.

Доступность

API

Связанное

Цвет Движение Панель Карточка Поповер Модалка