Kształt
Jeden bazowy promień steruje każdym narożnikiem w systemie. Zmień jedną zmienną, a cały interfejs proporcjonalnie się dostosuje — od ostrego i technicznego po miękki i przyjazny.
Narożniki w prfct wynikają z jednej zmiennej: --radius (domyślnie 8 px). Każdy stopień skali zaokrągleń to ta wartość pomnożona przez stały współczynnik, od 0,25 dla xs do 4 dla 4xl, więc zmiana wartości bazowej zachowuje wszystkie proporcje — łącznie z 0, które daje całkowicie ostry system.
Wcięcia pierścienia fokusu, drobne wskaźniki
Klawisze, kontrolki chipów, pierścienie fokusu w tekście
Odznaki, podpowiedzi, najmniejsze przyciski, pigułki zakładek
Przyciski, pola, listy wyboru, pozycje menu
Karty, popovery, menu
Okna dialogowe, pływające panele, paleta poleceń
Kafelki marketingowe
Media w sekcjach hero
:root {
--radius: 0.5rem; /* try 0, 0.25rem or 0.75rem */
}Koncentryczne narożniki
Gdy jeden zaokrąglony kształt leży wewnątrz drugiego, promień wewnętrzny powinien być równy promieniowi zewnętrznemu pomniejszonemu o odstęp między nimi. Przy równych promieniach wewnętrzny kształt wygląda, jakby się wybrzuszał; promienie koncentryczne wyglądają jak wyfrezowane.
function Nested({
outer,
inner,
label,
good,
}: {
outer: number
inner: number
label: string
good: boolean
}) {
return (
<figure className="flex flex-col items-center gap-3">
<div
className="border-2 border-foreground/80 bg-surface p-3"
style={{ borderRadius: outer }}
>
<div
className="flex size-24 items-center justify-center bg-brand-4 font-mono text-xs text-brand-12"
style={{ borderRadius: inner }}
>
{inner}px
</div>
</div>
<figcaption className="text-center text-xs text-muted-foreground">
<span className={good ? "text-success-11" : "text-danger-11"}>
{good ? "✓" : "✕"}
</span>{" "}
{label}
</figcaption>
</figure>
)
}
export default function ConcentricRadius() {
return (
<div className="flex flex-wrap items-start justify-center gap-10">
<Nested outer={24} inner={12} label="wewnętrzne = zewnętrzne − padding" good />
<Nested
outer={24}
inner={24}
label="to samo zaokrąglenie wewnątrz i na zewnątrz"
good={false}
/>
</div>
)
}Komponenty prfct są już koncentryczne: menu z promieniem 12 px i wypełnieniem 4 px mieści pozycje z promieniem 8 px. Gdy wypełnienie jest większe niż promień zewnętrzny — jak w oknie dialogowym z promieniem 16 px i wypełnieniem 24 px — kształty wewnętrzne są zbyt daleko, by z nim konkurować, i zachowują własny promień.