Radius

Corner radius primitives (L1) and semantic aliases (L2) for interactive, field, surface, overlay, badge, and full/pill shapes. The theme editor's radius control is a four-option segmented picker (Square, Soft, Rounded, Pill) that remaps the L2 aliases to different L1 primitives, so every component changes shape together.

Radius Demo

L1 primitives (primitives.radius.*)

--lb-radius-0

0px

--lb-radius-2

2px

--lb-radius-4

4px

--lb-radius-8

8px

--lb-radius-12

12px

--lb-radius-16

16px

--lb-radius-9999

pill / 9999px

L2 semantic aliases (semantic.radius.*)

--lb-radius-none

→ radius-0

--lb-radius-interactive

→ radius-4

--lb-radius-field

→ radius-4

--lb-radius-surface

→ radius-8

--lb-radius-overlay

→ radius-12

--lb-radius-badge

→ radius-9999

--lb-radius-media

→ radius-8

--lb-radius-full

→ radius-9999