Concentric radius

Esquinas concéntricas: el radio interior es el exterior menos el espacio, siempre en sincronía.

44 − 12 = 32px

The corners share one center.

Change the parent radius or gap and the child follows.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/radius-concentric

Uso

css

/* app/globals.css */
@import "../styles/ssntl/radius-concentric.css";

/* En tu JSX: el hijo toma 32 − 8 = 24px */
<div class="rounded-outer-lg p-concentric-2">
  <div class="rounded-inner">…</div>
</div>

El radio interior es el exterior menos el espacio entre ambos: las esquinas quedan paralelas.
Cambia rounded-outer o p-concentric y el hijo se ajusta solo.
Un nivel por padre. Si el hijo también contiene superficies, declara su propio rounded-outer-[…].

Código

styles/ssntl/radius-concentric.css

/* Concentric corners: a surface nested inside another takes the outer radius
   minus the gap between them, so both corners share one center.

     Parent:  rounded-outer-{radius} p-concentric-{n}
     Child:   rounded-inner

   rounded-outer-lg p-concentric-2 → the child gets 32 − 8 = 24px, and stays in
   sync when either value changes. One level per parent: a child that also holds
   nested surfaces declares its own rounded-outer-[…]. */

@utility rounded-outer-* {
  --outer-radius: --value(--radius-*, [length]);
  border-radius: var(--outer-radius);
}

@utility p-concentric-* {
  --concentric-gap: calc(var(--spacing) * --value(number));
  --concentric-gap: --value([length]);
  padding: var(--concentric-gap);
}

@utility rounded-inner {
  border-radius: max(
    0px,
    calc(var(--outer-radius, 0px) - var(--concentric-gap, 0px))
  );
}