# UX4G Tokens — Radius This page lists every primitive and semantic token for the **Radius** family. - Primitive token source: `src/tokens/radius.tokens.css` - Semantic token source: `src/semantic/radius.semantic.css` ## Primitive tokens ```css :root { --ux4g-radius-0: 0px; --ux4g-radius-1: 2px; --ux4g-radius-2: 4px; --ux4g-radius-3: 8px; --ux4g-radius-4: 12px; --ux4g-radius-5: 16px; --ux4g-radius-6: 24px; --ux4g-radius-circular: 999px; } ``` ## Semantic tokens ```css :root { --ux4g-radius-none: var(--ux4g-radius-0); --ux4g-radius-xs: var(--ux4g-radius-1); /* 2px */ --ux4g-radius-sm: var(--ux4g-radius-2); /* 4px */ --ux4g-radius-md: var(--ux4g-radius-3); /* 8px */ --ux4g-radius-lg: var(--ux4g-radius-4); /* 12px */ --ux4g-radius-xl: var(--ux4g-radius-5); /* 16px */ --ux4g-radius-2xl: var(--ux4g-radius-6); /* 24px */ --ux4g-radius-full: var(--ux4g-radius-circular); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.