Ритм и форма

Контракт

Отступ берётся по назначению: --pad-panel, не --space-5. Роль перенастраивается плотностью, ступень шкалы — нет.

.my-panel {
  padding: var(--pad-panel);
  gap: var(--gap-row);
  border-radius: var(--radius-lg);
}

Доступность

Шкала

Компонент обращается к ней только через ярус ролей. Прямое использование --space-* допустимо в приложении и в примитивах потока.

Разрежение сверху — не экономия, а ограничение: между 32 и 48 нет ступени, и это правильно. Шаг, которого нет, нельзя выбрать по ошибке.

Отступы по назначению

Ярус ролей. Значения ниже — для плотности по умолчанию; в compact и comfortable они другие, см. плотность.

Зазор ставится между соседями. margin-block на каждом элементе складывается с внутренним отступом контейнера сверху и снизу, но не по бокам — и подсветка отступает от рамки по вертикали вдвое дальше, чем по горизонтали. Правильная форма — X + X { margin-block-start }.

Размеры глифов и жёлобов

Тот же ярус ролей: у каждого размера есть имя, поэтому в компонентах нет констант.

Радиусы

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

Скругление КОНТРОЛА берётся не отсюда напрямую, а из --radius-control-sm/md/lg: оно едет за плотностью вместе с высотой, иначе мелкая кнопка читается пилюлей. См. плотность.

Скругление ПОМЕТКИ берётся из --radius-mark по причине обратного свойства. Мельче 8px лестница перестаёт предлагать выбор: когда два радиуса на одной стороне в сумме больше самой стороны, браузер молча ужимает все радиусы бокса, пока они не влезут. --radius-xs на точке 6px приезжает тройкой — это половина бокса, то есть круг; на метре 6px — той же тройкой, то есть пилюлей. А там, где вторая сторона бокса — это ДАННЫЕ (ширина отрезка дорожки, ширина штриха), форма начинает меняться вместе с данными. Ярус пометок — единственная ступень, которая переживает любую пометку в любом кегле.

Правило вложенных радиусов

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

<!-- панель lg → контрол внутри sm; отдельно стоящий контрол — md -->
<div class="inst-panel">
  <div class="inst-panel-body">
    <div class="inst-card"></div>
  </div>
</div>

Скругление на односторонней рамке — всегда баг. border-left вместе с border-radius даёт обрубок дуги: сноска и край текущего пункта навигации несут прямой угол намеренно.

Хайрлайн

Браузер никогда не рисует рамку тоньше одного физического пикселя. На 1x-дисплее 0.5px и 1px дают одно и то же, а отрицательное поле в -0.5px при нарисованной рамке в 1px оставляет полпикселя двойной линии. Поэтому хайрлайн включается только там, где ему есть куда поместиться.

Шов группы кнопок сделан снятой рамкой у соседа — по той же причине.

Правила

Что брать, а что нет

API

Связанное

Плотность Токены Поток Оболочка Панель Карточка