# Radius Tokens

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.

```css
/* Wrong */
.button {
  border-radius: 6px;
}

.card {
  border-radius: 8px;
}

/* Correct */
.button {
  border-radius: var(--radius-xs);
}

.card {
  border-radius: var(--radius-s);
}
```