НачалоОсновыКомпонентыТексты
Обзор Цвет Типографика Отступы Скругления Глубина Фокус Движение Иконки Пропорции

Глубина

Тень показывает, насколько высоко парит поверхность. Слой z-index решает, что лежит сверху. Это разные инструменты.

РуководствоТокены
shadow-1
shadow-2
shadow-3
<div style="box-shadow: var(--shadow-1); background: var(--surface-raised); padding: var(--space-24); border-radius: var(--radius-12)">shadow-1</div>
<div style="box-shadow: var(--shadow-2); background: var(--surface-raised); padding: var(--space-24); border-radius: var(--radius-16)">shadow-2</div>
<div style="box-shadow: var(--shadow-3); background: var(--surface-raised); padding: var(--space-24); border-radius: var(--radius-16)">shadow-3</div>

Тень

Три ступени и shadow-none. Чем больше число, тем выше поверхность.

Токен Для чего В Thykes
shadow-none плоско; снимает унаследованную тень —
shadow-1 карточка, небольшая приподнятая деталь выбранный сегмент, бегунок переключателя
shadow-2 панель над страницей меню, поповер, подсказка, тост, выбор даты, плавающий сайдбар
shadow-3 модальная поверхность диалог, шторка

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

Share

Anyone with the link can view this file.

<tk-popover label="Share">
  <tk-button slot="trigger">Share</tk-button>
  <p>Anyone with the link can view this file.</p>
</tk-popover>
  • У каждой ступени есть кромка в 1px в светлой и тёмной теме: тонкий край, который держит поверхность чёткой на фоне того же тона. В светлой теме кромка чёрная, в тёмной белая.
  • Тёмная тема: тень сильнее, а surface/raised на одну ступень светлее страницы. Ступень небольшая, поэтому край в основном рисует белая кромка.
  • Высокий контраст: один бледный слой без кромки. Плавающие панели вместо неё рисуют рамку.

Рамки и тени

Кромка ложится сразу за краем элемента, поверх его собственной рамки. У элемента с рамкой и тенью получается два края.

  • Своя плавающая панель: в светлой и тёмной теме край рисует тень, рамку добавляйте только в высоком контрасте. Так устроены панели Thykes.
  • Рамка, которая должна быть видна в любой теме, например край контрола с контрастом 3:1: оставьте рамку и уберите тень.
.my-panel { box-shadow: var(--shadow-2); }
[data-theme="high-contrast"] .my-panel { border: 1px solid var(--border-default); }
@media (prefers-contrast: more) {
  :root:not([data-theme]) .my-panel { border: 1px solid var(--border-default); }
}

Кромка зависит от темы, а не от поверхности. На тёмной поверхности в светлой теме, например у подсказки или тоста, её не видно, поэтому край тёмной поверхности она не задаёт.

Порядок слоёв

  • Оверлеям Thykes z-index не нужен. Диалоги, шторки, меню, поповеры, подсказки и панели селектов и выбора даты открываются в верхнем слое браузера, над всем на странице.
  • Слой z-* — для ваших элементов, которые парят над страницей: липкой шапке z-sticky, своему выпадающему списку z-dropdown. Тосты стоят на z-toast.
  • Внутри компонента — локальные слои. Задайте корню isolation: isolate и внутри используйте z-index: 1, 2, 3. Локальные значения не выйдут наружу и не будут спорить со слоями страницы.
  • Никаких z-index: 9999. Слой выбирают по роли.

Слои — в карточке Z-index.

Доступность

  • Тень не бывает единственной границей. Она мягкая и зависит от фона, поэтому не набирает 3:1 для нетекстовых элементов. Если край элемента важен, как у контрола или поля, дайте ему рамку.
  • Высота не заменяет фокус. Приподнятой поверхности тоже нужен видимый индикатор фокуса; см. Focus.

Можно / Нельзя

✅ Можно ❌ Нельзя
Брать тени из shadow-* Писать box-shadow на глаз
shadow-1 для карточек, shadow-2 для плавающих панелей, shadow-3 для модальных окон Давать модальному окну тень карточки
Давать элементу рамку, когда его край должен быть виден Полагаться на одну тень как на границу
Рисовать рамку плавающей панели только в высоком контрасте Давать ей и рамку, и тень во всех темах
Показывать hover сменой поверхности или рамки Брать для hover ступень тени повыше
Брать слои z-*, а внутри компонента isolation: isolate Писать z-index: 9999