Fundamenty Zaokrąglenia
Fundamenty
Zaokrąglenia
Cięta, prostokątna identyfikacja: karty, przyciski i pola mają promień 0. Zaokrąglone – i to maksymalnie, w pełną kapsułkę – zostają wyłącznie tagi i chipsy. To celowy kontrast, nie niedopatrzenie.
Tokeny
Cztery zmienne w @theme. Trzy są zerowe (ostre), jedna pełna (pill).
rounded-card 0 Karty, boksy, obrazy rounded-button 0 Przyciski rounded-input 0 Pola formularzy rounded-pill 999px Tagi, chipsy, kropki W komponentach
Ten sam zestaw na realnych elementach.
Karta
Chip html
<div class="rounded-card border border-line p-4">Karta · 0</div>
<button class="rounded-button bg-ink px-5 py-2.5 text-mint">Przycisk · 0</button>
<input class="rounded-input border border-line px-4 py-2" />
<span class="rounded-pill border border-line px-3 py-1">Chip · pełna</span> css
@theme {
--radius-card: 0;
--radius-button: 0;
--radius-input: 0;
--radius-pill: 999px;
}