Skip to contentWolf-Rayet

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)

GroupTokenValue
Surface--wr-surface#ffffff
--wr-surface-sunken#f8f8f8
--wr-surface-overlay#ffffff
--wr-surface-raised#ffffff
Neutral--wr-neutral-subtletransparent
--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-focused2px
Type--wr-font-reading16px
--wr-line-reading26px
--wr-font15px
--wr-line22px
--wr-font-small13px
--wr-line-small18px
--wr-font-weight-medium500
--wr-font-weight-semibold600
--wr-font-weight-bold700
Radius--wr-radius-small4px
--wr-radius6px
--wr-radius-large8px
--wr-radius-full9999px
Space--wr-space-0504px
--wr-space-0756px
--wr-space-1008px
--wr-space-15012px
--wr-space-20016px
--wr-space-30024px
Height--wr-height-compact24px
--wr-height32px
--wr-height-field40px
Elevation--wr-shadow-raised0 1px 1px #1e1f2140, 0 0 1px #1e1f214f
--wr-shadow-overlay0 8px 12px #1e1f2126, 0 0 1px #1e1f214f