Tokens
Every colour, size and shadow the system uses, in one file. Components reference these and nothing else, so changing a token changes every component that uses it. The values shown are read from the page, so they follow the theme in the top bar.
Where they live
One stylesheet, loaded before any component.
import '@wolf-rayet/react/css/wolf-rayet.css';
All tokens (96)
| Group | Token | Value |
|---|---|---|
| Surface | --wr-surface | #ffffff |
| --wr-surface-sunken | #f8f8f8 | |
| --wr-surface-overlay | #ffffff | |
| --wr-surface-raised | #ffffff | |
| Neutral | --wr-neutral-subtle | transparent |
| --wr-neutral-subtle-hovered | #0515240f | |
| --wr-neutral | #0515240f | |
| --wr-neutral-hovered | #0b120e24 | |
| --wr-neutral-pressed | #080f214a | |
| --wr-neutral-subtle-pressed | #0b120e24 | |
| --wr-disabled | #0515240f | |
| Text | --wr-text | #292a2e |
| --wr-text-subtle | #3d4046 | |
| --wr-text-subtlest | #54575e | |
| --wr-text-inverse | #ffffff | |
| --wr-text-disabled | #080f214a | |
| --wr-text-selected | #1558bc | |
| --wr-text-link | #1868db | |
| --wr-text-danger | #ae2e24 | |
| Bold | --wr-brand-bold | #1868db |
| --wr-brand-bold-hovered | #1558bc | |
| --wr-selected | #e9f2fe | |
| --wr-warning-bold | #a85c00 | |
| --wr-danger-bold | #c9372c | |
| --wr-discovery-bold | #964ac0 | |
| --wr-brand-bold-pressed | #144794 | |
| --wr-selected-hovered | #cfe1fd | |
| --wr-warning-bold-hovered | #8f4e00 | |
| --wr-warning-text | #ffffff | |
| --wr-danger-bold-hovered | #ae2e24 | |
| --wr-discovery-bold-hovered | #803fa5 | |
| Accent | --wr-accent-blue-subtlest | #e9f2fe |
| --wr-accent-blue-subtler | #cfe1fd | |
| --wr-accent-blue-bolder | #123263 | |
| --wr-accent-green-subtler | #baf3db | |
| --wr-accent-green-bolder | #164b35 | |
| --wr-accent-lime-subtlest | #efffd6 | |
| --wr-accent-lime-subtler | #d3f1a7 | |
| --wr-accent-lime-bolder | #37471f | |
| --wr-accent-yellow-subtlest | #fff5db | |
| --wr-accent-yellow-subtler | #f5e989 | |
| --wr-accent-yellow-bolder | #533f04 | |
| --wr-accent-orange-subtler | #fce4a6 | |
| --wr-accent-orange-bolder | #693200 | |
| --wr-accent-red-subtlest | #ffeceb | |
| --wr-accent-red-subtler | #ffd5d2 | |
| --wr-accent-red-bolder | #5d1f1a | |
| --wr-accent-magenta-subtler | #fdd0ec | |
| --wr-accent-magenta-bolder | #50253f | |
| --wr-accent-purple-subtlest | #f8eefe | |
| --wr-accent-purple-subtler | #eed7fc | |
| --wr-accent-purple-bolder | #48245d | |
| --wr-accent-teal-subtler | #c6edfb | |
| --wr-accent-teal-bolder | #164555 | |
| --wr-accent-gray-subtler | #dddee1 | |
| Hue | --wr-green-bold | #1f845a |
| --wr-green-bright | #22a06b | |
| --wr-lime-bold | #5b7f24 | |
| --wr-yellow-bold | #b38600 | |
| --wr-purple-bold | #803fa5 | |
| --wr-gray-bold | #8c8f97 | |
| Ground | --wr-neutral-bold | #6b6e76 |
| --wr-neutral-boldest | #292a2e | |
| --wr-neutral-strong | #05152429 | |
| --wr-skeleton-shimmer | #0515241f | |
| --wr-track-inverse | #00000029 | |
| --wr-blanket | #050c1f75 | |
| --wr-divider-inverse | #ffffff4d | |
| Border | --wr-border | #8c8f97 |
| --wr-divider | #0b120e24 | |
| --wr-border-focused | #4688ec | |
| --wr-border-width-focused | 2px | |
| Type | --wr-font-reading | 16px |
| --wr-line-reading | 26px | |
| --wr-font | 15px | |
| --wr-line | 22px | |
| --wr-font-small | 13px | |
| --wr-line-small | 18px | |
| --wr-font-weight-medium | 500 | |
| --wr-font-weight-semibold | 600 | |
| --wr-font-weight-bold | 700 | |
| Radius | --wr-radius-small | 4px |
| --wr-radius | 6px | |
| --wr-radius-large | 8px | |
| --wr-radius-full | 9999px | |
| Space | --wr-space-050 | 4px |
| --wr-space-075 | 6px | |
| --wr-space-100 | 8px | |
| --wr-space-150 | 12px | |
| --wr-space-200 | 16px | |
| --wr-space-300 | 24px | |
| Height | --wr-height-compact | 24px |
| --wr-height | 32px | |
| --wr-height-field | 40px | |
| Elevation | --wr-shadow-raised | 0 1px 1px #1e1f2140, 0 0 1px #1e1f214f |
| --wr-shadow-overlay | 0 8px 12px #1e1f2126, 0 0 1px #1e1f214f |