# Stroke Tokens

Stroke tokens use the `--stroke-*` naming pattern and map directly to the foundation stroke scale.

If a token changes in `specs/ux/foundations/stroke.md`, update the matching token in this file.

## Usage

Use stroke tokens for:

- borders
- dividers
- outlines
- focus rings
- table separators

## Token Mapping

| CSS Token | Foundation Token | Value |
| --- | --- | ---: |
| `--stroke-0` | `0` | `0px` |
| `--stroke-100` | `100` | `1px` |
| `--stroke-200` | `200` | `2px` |
| `--stroke-300` | `300` | `3px` |
| `--stroke-400` | `400` | `4px` |
| `--stroke-500` | `500` | `5px` |
| `--stroke-600` | `600` | `6px` |
| `--stroke-700` | `700` | `7px` |
| `--stroke-800` | `800` | `8px` |

## Raw Values

Do not use raw pixel values in component styles.

```css
/* Wrong */
.card {
  border-width: 1px;
}

.input:focus {
  outline-width: 2px;
}

/* Correct */
.card {
  border-width: var(--stroke-100);
}

.input:focus {
  outline-width: var(--stroke-200);
}
```