Border Radius

Концепция

padding контейнера = --gr-p
child_radius     = max(0, --gr-r − --gr-p)

Зазор один на все стороны, и обе переменные ненаследуемые: значение уровня объявляется на нём самом, а вниз уходит отдельная публикация — --gr-r-down и --gr-r-gap.

Готовые классы

Вместо ручного style="--gr-r: 16px" используйте классы — чище, короче, читаемее. Шаг 0.25rem, от .gr-radius-0 до .gr-radius-16 (0–4rem).

Каждый класс устанавливает и --gr-r, и border-radius — каскад на детей работает автоматически.

<!-- Было (ручные переменные) -->
<div class="gr-radius" style="--gr-r: 32px; --gr-p: 16px;">

<!-- Стало (готовый класс) -->
<div class="gr-radius gr-radius-8" style="--gr-p: 16px;">

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

.gr-radius-8 = 32px (2rem). --gr-p: 16px даёт и зазор, и padding: 16px. Ребёнок: 32 − 16 = 16px.

<div class="gr-radius gr-radius-8" style="--gr-p: 16px;">
  <div>Мой радиус = 32 − 16 = 16px</div>
</div>

Многоуровневый каскад

Каждый уровень — новый .gr-radius. Внутренние дети без .gr-radius получают радиус по формуле.

<div class="gr-radius gr-radius-12" style="--gr-p: 16px;">
  <div class="gr-radius gr-radius-8" style="--gr-p: 8px;">
    <div class="gr-radius gr-radius-6" style="--gr-p: 6px;">
      <div>радиус = 24 − 6 = 18px</div>
    </div>
  </div>
</div>

Произвольная глубина: рантайм

Ручные значения на каждом уровне — обязанность, пока работает один статический CSS: рекуррента r(n) = max(0, r(n−1) − p(n−1)) в нём невыразима. Подключите griffincss-utils.js — и явный радиус нужен только верхнему контейнеру, остальные рантайм выведет сам.

Зазор он читает и из класса, и из style — источники равноправны. Классы .gr-p-* берутся из той же таблицы значений, из которой собран CSS, поэтому .gr-p-3 и --gr-p: 12px для каскада — одно и то же. Шкала отступов идёт ступенями по 0.25rem, то есть кратно 4px; всё, что между ступенями, задаётся переменной. В примере ниже нечётные уровни — классы, чётные — произвольные значения.

<script src="griffincss.js"></script>
<script src="griffincss-utils.js"></script>

<div class="gr-radius gr-radius-16 gr-p-3">             <!-- 64px, зазор классом: 0.75rem -->
  <div class="gr-radius" style="--gr-p: 10px;">         <!-- 64−12 = 52px, зазор свой: 10px -->
    <div class="gr-radius gr-p-2">                      <!-- 52−10 = 42px, классом: 0.5rem -->
      <div class="gr-radius" style="--gr-p: 6px;">      <!-- 42−8  = 34px, своё: 6px -->
        <div class="gr-radius gr-p-1">                  <!-- 34−6  = 28px, классом: 0.25rem -->
          <div>радиус = 28 − 4 = 24px</div>
        </div>
      </div>
    </div>
  </div>
</div>

Pill / полностью скруглённый

.gr-radius-full задаёт border-radius: 9999px — бесконечное скругление. Используется для кнопок, бейджей, аватаров и любых pill-элементов.

<span class="gr-radius gr-radius-full" style="padding: 8px 20px;">Бейдж</span>
<button class="gr-radius gr-radius-full" style="padding: 12px 32px;">Кнопка</button>

Адаптивный радиус

Радиус берётся из --gr-r, поэтому меняется он обычным медиа-запросом — каскад по вложенности при этом продолжает работать: дочерние блоки пересчитают свой радиус сами.

/* острые углы на мобильном, 16px от 768px */
.card { --gr-r: 0; }

@media (width >= 768px) {
  .card { --gr-r: 1rem; }
}

<div class="gr-radius card" style="--gr-p: 16px;">
  Адаптивный радиус
</div>

Несколько детей в контейнере

Каскад действует на всех прямых потомков .gr-radius (кроме тех, что сами .gr-radius).

<div class="gr-radius gr-radius-8" style="--gr-p: 16px;">
  <header>Шапка</header>
  <div>Контент</div>
  <footer>Подвал</footer>
</div>

Обнуление радиуса

Когда --gr-p ≥ --gr-r, дочерний радиус обнуляется: max(0, r − p).

<div class="gr-radius gr-radius-4" style="--gr-p: 8px;">
  <div>16−8 = 8px (скруглён)</div>
</div>

<div class="gr-radius gr-radius-4" style="--gr-p: 16px;">
  <div>max(0, 16−16) = 0px (острые углы)</div>
</div>

<div class="gr-radius gr-radius-4" style="--gr-p: 24px;">
  <div>max(0, 16−24) = 0px (острые углы)</div>
</div>

Собственный радиус у ребёнка

border-radius напрямую на дочернем элементе перекрывает автоматический каскад.

<div class="gr-radius gr-radius-8" style="--gr-p: 12px;">
  <div>Авто-радиус 20px</div>
  <div style="border-radius: 6px;">Свой радиус 6px</div>
</div>

Как работает

SCSS-модуль генерирует каскадную базу и полный набор утилитарных классов:

// Регистрация: обе переменные ненаследуемые
@property --gr-r { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --gr-p { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }

// Каскад
.gr-radius {
  padding: var(--gr-p);
  border-radius: var(--gr-r);

  // публикация вниз: дети читают её, а не --gr-r/--gr-p
  --gr-r-down: var(--gr-r);
  --gr-r-gap: var(--gr-p);
}
.gr-radius > :not(.gr-radius) {
  border-radius: max(0px, calc(var(--gr-r-down, 0px) - var(--gr-r-gap, 0px)));
}

// Готовые классы (0.25rem шаг, 0–4rem)
.gr-radius-0  { --gr-r: 0;      border-radius: 0; }
.gr-radius-1  { --gr-r: 0.25rem; border-radius: 0.25rem; }
...
.gr-radius-16 { --gr-r: 4rem;    border-radius: 4rem; }

// Pill
.gr-radius-full { --gr-r: 9999px; border-radius: 9999px; }

// Адаптивные: .gr-radius-N-{sm,md,lg,xl}

Советы

Примеры использования

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

Карточка с каскадом

Классика: карточка с изображением, текстом и кнопкой. Один раз задаётся радиус и внутреннее поле (.gr-radius-5 + --gr-p: 16px) — картинка и кнопка получают согласованный внутренний радиус сами, без вычислений «20 минус 16».

<div class="gr-radius gr-radius-5" style="--gr-p: 16px;">
  <img src="photo.jpg" alt="">
  <h3>Заголовок</h3>
  <p>Описание карточки.</p>
  <button>Подробнее</button>
</div>

Сегмент-контрол: капсула в капсуле

Переключатель периодов или вкладок-фильтров — две вложенные капсулы: серая подложка .gr-radius-full .gr-bg-sunken .gr-p-1 и активный сегмент — тоже .gr-radius-full, но на поверхности и с тенью .gr-shadow-sm. Ряд сегментов держит флекс с .gr-gap-sm; капсуле-подложке не нужен каскад — у полного скругления внутренний радиус всё равно «до упора».

<div class="gr-flex gr-w-fit gr-gap-sm gr-radius-full gr-bg-sunken gr-p-1">
  <button class="gr-btn gr-btn-sm gr-radius-full gr-bg-surface gr-shadow-sm">Месяц</button>
  <button class="gr-btn gr-btn-sm gr-btn-ghost gr-radius-full">Год</button>
</div>

Склеенные группы: радиус только снаружи

Поле с кнопкой «Найти» или ряд слитых кнопок — задача «скругление на внешних углах, между элементами — общий бордер». Руками это возня с :first-child/:last-child; в ui она уже проделана — .gr-input-group и .gr-btn-group склеивают содержимое сами. Радиус группы при этом остаётся на токене, так что капсульный вариант — просто .gr-radius-full сверху.

<div class="gr-input-group">
  <input class="gr-input" type="search" placeholder="Поиск" aria-label="Поиск">
  <button class="gr-btn gr-btn-primary">Найти</button>
</div>