pub enum Radius {
Square,
Fine,
Control,
Panel,
Round,
}Expand description
How rounded a corner is, named for what the corner belongs to.
The third axis to make the same move as Gap and Text: name the
thing and let the value follow. Whether a corner should be 3px or 4px is
unanswerable in isolation, and answering it once per component is how a
stylesheet ends up with 2, 3, 4, 6, 8 and 12 all meaning “slightly
rounded”.
§Rounding is an affordance
The scale is deliberately short, because a corner radius carries one bit
of meaning: whether the thing is meant to be pressed. Self::Square
exists as a named rung rather than as the absence of a radius so that a
container states that it is square, and a reader can tell a deliberate
zero from a rule nobody wrote.
Variants§
Square
No rounding. Containers: cards, panels, dropdowns, page shells.
Fine
An eighth of the base. The tightest corner still visible: inline code, small badges, status chips.
Control
A quarter of the base. Controls: buttons, inputs, selects.
Panel
Half the base. Surfaces that round rather than sit square: media covers, callout boxes, feature cards.
Round
A circle, whatever the element’s size.
Implementations§
Source§impl Radius
impl Radius
Sourcepub const fn ratio(self) -> Option<Ratio>
pub const fn ratio(self) -> Option<Ratio>
This corner as a fraction of the base unit.
Self::Round has none, and that is not an oversight: 50% is a
proportion of the element’s own box rather than of the base, so it
does not scale with --geometry-base and cannot be written as a
Ratio. Use Self::css, which spells every rung.
Sourcepub const fn px(self) -> Option<u16>
pub const fn px(self) -> Option<u16>
Size in CSS pixels at the default base, or None for Self::Round.