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.
/* Wrong */
.card {
border-width: 1px;
}
.input:focus {
outline-width: 2px;
}
/* Correct */
.card {
border-width: var(--stroke-100);
}
.input:focus {
outline-width: var(--stroke-200);
}