Radius tokens use the --radius-* naming pattern and map directly to the foundation radius scale.
If a token changes in specs/ux/foundations/radius.md, update the matching token in this file.
Usage
Use radius tokens for:
- All components
Token Mapping
| CSS Token | Foundation Token | Value |
|---|---|---|
--radius-0 |
0 |
0px |
--radius-nano |
Nano |
2px |
--radius-xxs |
XXS |
4px |
--radius-xs |
XS |
6px |
--radius-s |
S |
8px |
--radius-m |
M |
12px |
--radius-l |
L |
16px |
--radius-xl |
XL |
20px |
--radius-2xl |
2XL |
24px |
--radius-4xl |
4XL |
32px |
--radius-6xl |
6XL |
40px |
--radius-xxl |
XXL |
100px |
Raw Values
Do not use raw pixel values in component styles.
/* Wrong */
.button {
border-radius: 6px;
}
.card {
border-radius: 8px;
}
/* Correct */
.button {
border-radius: var(--radius-xs);
}
.card {
border-radius: var(--radius-s);
}