Поверхность и тень

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

Что такое ступень высоты

Высота (elevation) — одна семантика из двух частей. Ступень N (от 1 до 5) — это пара:

• --sf-elevation-N--surface — поверхность, на которой стоит элемент;
• --sf-elevation-N--shadow — тень под ним.

Всё, что находится над страницей, обязательно берёт обе части.

Почему пара

В светлой теме высоту несёт тень, а поверхность остаётся обычной (surface-0). В тёмной теме тень не работает: она чёрная, фон почти чёрный, и разница уходит ниже порога восприятия. Там высоту показывает поверхность, которая светлеет со ступенью (surface-2 … surface-5).

Элемент только с тенью в тёмной теме сливается со страницей. Пара гарантирует, что обе части применены.

Пятая ступень делит верх лестницы с четвёртой. В светлой теме поверхность и приглушённый текст (--sf-neutral-40) на всех ступенях одинаковы: там высоту несёт тень.

Как применять

Утилита elevation-N ставит пару одним классом и подставляет приглушённый текст для этой ступени. Пример показывает, что делает утилита:

.elevation-2 {
  background-color: var(--sf-elevation-2--surface);
  box-shadow: var(--sf-elevation-2--shadow);
  --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
}

Компонент внутри панели продолжает писать var(--sf-on-surface-variant) и получает значение, подобранное под поверхность, на которой оказался.

В своих стилях пара пишется так же:

.project-dialog {
  background: var(--sf-elevation-4--surface);
  box-shadow: var(--sf-elevation-4--shadow);
  --sf-on-surface-variant: var(--sf-on-elevation-4--variant);
}

Правила:

• утилита shadow-N даёт только тень — для элемента со своим смысловым фоном (залитая кнопка, ручка переключателя, цветная плашка), который поднятая поверхность перекрасила бы;
• карточка в потоке страницы с рамкой и без тени — не ступень высоты: ей достаточно поверхности зоны и --sf-outline-variant;
• компоненты не используют голые тени --sf-ui-shadow-N, кроме перечисленных исключений с причинами; это проверяют contracts/elevation-shadow.json и контракт elevation-shadow.

Последний слой тени каждой ступени — --sf-shadow--rim. По умолчанию он выключен; тема может включить его, чтобы обвести поднятые панели светлым краем в тёмной теме. Тема перенастраивает высоту только переменными ступени.

Смотрите также

• Поверхности и содержимое на них — ступени поверхности;
• Контраст нейтральных ролей — контраст приглушённого текста на ступенях высоты;
• Высота над страницей — какая ступень для какого элемента;
• Высота — утилиты elevation-N в каталоге;
• Своя тема проекта — перенастройка высоты в теме проекта.