Border width
Each step follows --eun-borderWidth-<step>. Three steps: s is
the default hairline used for dividers and card outlines, while m
and l are for elements that need to read as more prominent (a
focused stroke button, an active tab's border).
| Token | Value | Typical use |
|---|---|---|
--eun-borderWidth-s |
1px |
Dividers, default card/table borders |
--eun-borderWidth-m |
1.5px |
eun-button's internal border thickness |
--eun-borderWidth-l |
2px |
Emphasized outlines (focus rings, active states) |
Usage
.custom-card {
border: var(--eun-borderWidth-s) solid var(--eun-border-color);
}Pair the width token with the
--eun-border-color /
--eun-divider-color