Ритм и форма

Использование

Отступ берётся по назначению: --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 }.

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

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

Радиусы

Пять ступеней, и выбирает их вложенность.

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

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

<!-- панель 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

Связанное

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