Границы, скругления и высота

Граница, скругление и высота над страницей задают форму элемента и его место среди слоёв. Здесь — их шкалы, роли и правила выбора.

Границы

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

Две работы границы

Граница в интерфейсе делает одну из двух работ. Либо по ней находят элемент управления, либо она очерчивает область и делит её внутри. Работы разные, и роли для них разные:

Граница контрола держит контраст 3:1 к поверхности (WCAG 1.4.11), край области тише, граница выключенного контрола намеренно слабее обычной. При наведении, нажатии и фокусе граница меняет цвет, а не становится «серой посильнее». Почему ролей две, их значения, контраст и поведение в темах — см. Границы и Контраст.

Утилиты повторяют роли, а не заводят свои цвета:

<div class="border border-outline-variant radius-surface">…</div>
<input class="border border-outline radius-ui">
<ul class="divide-y-1 divide-outline-variant">…</ul>

Класс border из ядра без класса цвета даёт рамку в один пиксель цвета края области (--sf-outline-variant): областей на экране больше, чем контролов со своей рамкой. Цвет статуса задают border-error и другие. Толщину разделителя задают divide-y-1 для горизонтальных линий и divide-x-1 для вертикальных, цвет — отдельным классом. Полный набор — в каталоге: Толщина границы, Цвет границы, Разделители.

Толщина

Волосяная линия — --sf-px, ровно один пиксель (Особые значения).

• Нельзя задавать толщину рамки в rem: при крупном кегле такая рамка потолстеет, а соседняя, заданная в пикселях, нет.

Утилиты border-0, border-1 и дальше задают толщину явно, когда нужна не волосяная линия.

Рамка контрола входит в его высоту (Как получается высота) и забирает место у вертикального отступа (Отступ внутри контрола и общие оси).

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

• Границы и Контраст — цвет, контраст и темы границ.
• Особые значения — значение --sf-px.
• Отступ внутри контрола и общие оси — вертикальный отступ и рамка.

Скругления

Скругления задаются адаптивной шкалой радиусов и двумя ролями: для контрола и для блока. Вместе с отступом радиус образует правило вложенности, по которому вложенные блоки читаются как вложенные.

Шкала радиусов

Радиусы стоят на адаптивной шкале --sf-radius-*:

Для круга и «пилюли» есть два токена с одним значением, 1000 px:

• --sf-radius-circle — ступень шкалы; её читает большинство компонентов;
• --sf-radius-rounded (с псевдонимом --sf-radius-round) — значение утилит radius-rounded и radius-round.

Значение у них одно; чтобы поменять форму «пилюли» во всём интерфейсе, переопределяют оба.

Две роли

В прикладном коде берут роль, а не ступень:

• --sf-radius--ui — мелкий контрол: поле, кнопка, флажок, подсказка. Стоит на ступени 1/2, 4 px.
• --sf-radius--surface — крупный блок: карточка, панель, диалог, меню, выпадающий список, календарь, оповещение. Стоит на ступени 1, 8 px.

Ступень с дробью пишется в CSS с экранированной косой чертой: var(--sf-radius-1\/2). Без обратной косой черты объявление не работает.

Блок скруглён вдвое сильнее контрола. Вложенный угол должен быть меньше внешнего, иначе вложенность не читается. Меню и выпадающий список считаются поверхностями, хотя и всплывают; подсказка — подписью, а не поверхностью.

Утилиты повторяют роли: radius-ui, radius-surface, radius-N (синтаксис — Как устроено имя утилиты).

Роль, которая ссылается на ступень, остаётся адаптивной. Ступени шкалы переопределены на :root медиазапросом настольной ширины, и роль на :root каждый раз получает значение текущей ступени. Если проект назначит --sf-radius--surface: var(--sf-radius-2), блоки получат 12 px на узком экране и 16 px на широком. Число вместо ступени (8px) адаптивность снимает.

--sf-radius-default — совместимое имя; его значение — 4 px, и радиусу блока оно не равно. Для блока берите --sf-radius--surface.

Роли не меняют круглые части. Компоненты, у которых форма круглая по смыслу, берут --sf-radius-circle, а не --sf-radius--ui: бейдж, плавающая кнопка, дорожка и ползунок переключателя, коробка радиокнопки и другие. Переопределение --sf-radius--ui их не затрагивает: круглая часть остаётся круглой при любом скруглении контролов.

Части на постоянной ступени. Несколько частей берут ступень шкалы, а не роль, и за переопределением ролей не следуют:

• квадратная форма sf-featured-icon — ступень по размеру иконки (1/2, 1 или 2);
• кнопки sf-quantity — ступень 1/2;
• рамка точек слайдера sf-slider-dots--framed — ступень 3;
• образцы цвета Smart-компонента sf-color (sf-color-chip, sf-color-preset) — ступень 1;
• рамка, подпись и панель sf-composition-overlay и панель sf-inline-editor — ступень 1.

Переопределённая на :root ступень меняется у всех, кто её читает, в том числе у утилит radius-N.

Вложенность: отступ и угол с одной ступени

Блок берёт внутренний отступ и угол с одной ступени: p-3 — значит radius-3. Вложенный блок спускается на ступень ниже.

Шкала радиусов подобрана так, что угол ступени не превышает отступ той же ступени. Тогда содержимое внутри встаёт в угол без зазора, и p-N radius-N читается как одно решение, а не как две подогнанные друг к другу величины.

Лестница заканчивается на radius-1, то есть на радиусе блока по умолчанию. Всё, что мельче, — уже не блок, а контрол.

Пример показывает четыре уровня вложенности и кнопку в самом глубоком блоке:

<div class="p-4 radius-4 bg-surface-inverse flex flex-col gap-1">
  <span class="sf-body-small color-on-surface-inverse">p-4 radius-4</span>
  <div class="p-3 radius-3 bg-surface-3 flex flex-col gap-1">
    <span class="sf-body-small color-on-surface">p-3 radius-3</span>
    <div class="p-2 radius-2 bg-surface-2 flex flex-col gap-1">
      <span class="sf-body-small color-on-surface">p-2 radius-2</span>
      <div class="p-1 radius-1 bg-surface-0 flex flex-col gap-1">
        <span class="sf-body-small color-on-surface">p-1 radius-1 — дальше блок не идёт</span>
        <span class="flex">
          <button type="button" class="sf-button sf-button--size-1 sf-button--default sf-button--primary"><span class="sf-button-text-container">Кнопка: radius-ui</span></button>
        </span>
      </div>
    </div>
  </div>
</div>

С какой ступени начинать, решает глубина макета. Плоской карточке хватает p-2 radius-2. Если внутри неё есть ещё одна карточка, начинайте выше, чтобы внутренней было куда спуститься.

• Контрол во вложенность не входит. Поле, кнопка и флажок берут угол из --sf-radius--ui на любом уровне: их размер задаёт лестница высот (Одна лестница размеров), а не глубина макета. На примере выше кнопка лежит внутри самого глубокого блока и своего угла не меняет.

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

• Отступ внутри блока — отступ внутри блока.
• Одна лестница размеров — лестница размеров контролов.
• Как устроено имя утилиты — синтаксис утилит radius-*.

Высота над страницей

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

Поднятый над страницей элемент показывает высоту парой: поверхностью --sf-elevation-N--surface и тенью --sf-elevation-N--shadow одной ступени. Всё, что парит над страницей, берёт обе. Почему нужна пара, как она ведёт себя в тёмной теме, как её ставят утилиты elevation-N и shadow-N и какой приглушённый текст получается на поднятой панели — см. Высота: поверхность и тень.

<div class="elevation-2">Контекстное меню</div>

Карточке с рамкой в потоке страницы высота не нужна: ей достаточно поверхности зоны и края области.

Чего не делать

• Не рисовать границу контрола ролью края области: она не проходит порог 3 : 1.
• Не брать роль границы контрола для линий внутри таблицы: экран превращается в сетку коробок, где всё одинаково важно.
• Не брать сырой цвет палитры: роль знает про обе темы, цвет — нет.
• Не поднимать элемент одной тенью и не писать цвет тени руками: в тёмной теме такого подъёма не видно, а цвет тени ничего не знает о теме.
• Не задавать приглушённый текст на поднятой панели вручную: класс высоты уже поставил значение под её поверхность.

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

• Высота: поверхность и тень — пара поверхности и тени, утилиты elevation-N и shadow-N.
• Две работы границы — край области.