Тени

Шесть уровней возвышения плюс внутренняя тень и кольцо фокуса. Чем выше элемент над поверхностью, тем глубже и мягче тень; уровень подбирается по роли элемента, а не на глаз — подсказки в описаниях строк. Шкала согласована со слоями: чем выше слой, тем глубже тень.

Тени

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

Матовое стекло

Поверхность поверх контента (меню, поповеры, липкий бар над списком) в стеклянных темах полупрозрачна, а то, что под ней, размыто. По умолчанию стекла нет — токены дают непрозрачный фон без фильтра; степень стекла задают стеклянные темы. Фон поверхности остаётся своим — токены задают только прозрачность и фильтр:

background: color-mix(
  in srgb,
  var(--theme-background-component) var(--glass-opacity),
  transparent
);
backdrop-filter: var(--glass-filter);

Матовое стекло

VariableValuePreviewDescription
--glass-opacity100%Стекло — для поверхностей поверх контента (меню, поповеры, липкий бар): фон поверхности смешивается с прозрачностью до --glass-opacity, а то, что под ней, размывается --glass-filter. По умолчанию стекла нет — поверхность непрозрачная; включают его стеклянные темы (_themes/tulls-glass.theme.css). Применение: background: color-mix(in srgb, <фон> var(--glass-opacity), transparent); backdrop-filter: var(--glass-filter);
--glass-filternone-