Colors
List of tokens used for colors.
Usage
<Box color="primary" />
<Box bg="secondary" />
Tokens
gray
red
rose
pink
flashy
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
| Token | Value |
|---|---|
black.50 | "tint(#000, 5)" |
black.100 | "tint(#000, 10)" |
black.200 | "tint(#000, 20)" |
black.300 | "tint(#000, 30)" |
black.400 | "tint(#000, 40)" |
black.500 | "tint(#000, 50)" |
black.600 | "tint(#000, 60)" |
black.700 | "tint(#000, 70)" |
black.800 | "tint(#000, 80)" |
black.900 | "tint(#000, 90)" |
black.950 | "tint(#000, 95)" |
blackAlpha.50 | "rgb(0, 0, 0/ .05)" |
blackAlpha.100 | "rgb(0, 0, 0/ .1)" |
blackAlpha.200 | "rgb(0, 0, 0/ .2)" |
blackAlpha.300 | "rgb(0, 0, 0/ .3)" |
blackAlpha.400 | "rgb(0, 0, 0/ .4)" |
blackAlpha.500 | "rgb(0, 0, 0/ .5)" |
blackAlpha.600 | "rgb(0, 0, 0/ .6)" |
blackAlpha.700 | "rgb(0, 0, 0/ .7)" |
blackAlpha.800 | "rgb(0, 0, 0/ .8)" |
blackAlpha.900 | "rgb(0, 0, 0/ .9)" |
blackAlpha.950 | "rgb(0, 0, 0/ .95)" |
white.50 | "shade(#fff, 5)" |
white.100 | "shade(#fff, 10)" |
white.200 | "shade(#fff, 20)" |
white.300 | "shade(#fff, 30)" |
white.400 | "shade(#fff, 40)" |
white.500 | "shade(#fff, 50)" |
white.600 | "shade(#fff, 60)" |
white.700 | "shade(#fff, 70)" |
white.800 | "shade(#fff, 80)" |
white.900 | "shade(#fff, 90)" |
white.950 | "shade(#fff, 95)" |
whiteAlpha.50 | "rgb(255, 255, 255/ .05)" |
whiteAlpha.100 | "rgb(255, 255, 255/ .1)" |
whiteAlpha.200 | "rgb(255, 255, 255/ .2)" |
whiteAlpha.300 | "rgb(255, 255, 255/ .3)" |
whiteAlpha.400 | "rgb(255, 255, 255/ .4)" |
whiteAlpha.500 | "rgb(255, 255, 255/ .5)" |
whiteAlpha.600 | "rgb(255, 255, 255/ .6)" |
whiteAlpha.700 | "rgb(255, 255, 255/ .7)" |
whiteAlpha.800 | "rgb(255, 255, 255/ .8)" |
whiteAlpha.900 | "rgb(255, 255, 255/ .9)" |
whiteAlpha.950 | "rgb(255, 255, 255/ .95)" |
amber.50 | "#fdf0d8" |
amber.100 | "#fde8c4" |
amber.200 | "#fbd593" |
amber.300 | "#f9c367" |
amber.400 | "#f7b23b" |
amber.500 | "#f59f0a" |
amber.600 | "#ce8509" |
amber.700 | "#a26907" |
amber.800 | "#764c05" |
amber.900 | "#4e3303" |
amber.950 | "#362302" |
blue.50 | "#e2edfd" |
blue.100 | "#cfe0fc" |
blue.200 | "#adcbfa" |
blue.300 | "#8bb5f8" |
blue.400 | "#659cf6" |
blue.500 | "#4387f4" |
blue.600 | "#186bf2" |
blue.700 | "#0c59d4" |
blue.800 | "#0a47a9" |
blue.900 | "#07357d" |
blue.950 | "#062c6a" |
cyan.50 | "#cef6fd" |
cyan.100 | "#b0f1fd" |
cyan.200 | "#7ee8fb" |
cyan.300 | "#4de0f9" |
cyan.400 | "#16d6f8" |
cyan.500 | "#07b6d5" |
cyan.600 | "#0590a8" |
cyan.700 | "#046e81" |
cyan.800 | "#034854" |
cyan.900 | "#012228" |
cyan.950 | "#011114" |
emerald.50 | "#d0fbed" |
emerald.100 | "#b4f8e2" |
emerald.200 | "#80f4cd" |
emerald.300 | "#4defb9" |
emerald.400 | "#19eba5" |
emerald.500 | "#10b77f" |
emerald.600 | "#0d9165" |
emerald.700 | "#096748" |
emerald.800 | "#06422e" |
emerald.900 | "#021710" |
emerald.950 | "#000503" |
flashy.50 | "#fdedf5" |
flashy.100 | "#fbdaeb" |
flashy.200 | "#f7b5d6" |
flashy.300 | "#f390c2" |
flashy.400 | "#ef6bad" |
flashy.500 | "#ec4699" |
flashy.600 | "#e82185" |
flashy.700 | "#c6156e" |
flashy.800 | "#a21159" |
flashy.900 | "#780d42" |
flashy.950 | "#660b38" |
fuchsia.50 | "#f9e3fd" |
fuchsia.100 | "#f5d0fb" |
fuchsia.200 | "#eeaff8" |
fuchsia.300 | "#e78af5" |
fuchsia.400 | "#e069f2" |
fuchsia.500 | "#d948ef" |
fuchsia.600 | "#d01eeb" |
fuchsia.700 | "#b112ca" |
fuchsia.800 | "#900ea4" |
fuchsia.900 | "#6b0b7a" |
fuchsia.950 | "#5b0967" |
gray.50 | "#dedede" |
gray.100 | "#d4d4d4" |
gray.200 | "#bababa" |
gray.300 | "#a3a3a3" |
gray.400 | "#8a8a8a" |
gray.500 | "#737373" |
gray.600 | "#5c5c5c" |
gray.700 | "#474747" |
gray.800 | "#303030" |
gray.900 | "#1c1c1c" |
gray.950 | "#0f0f0f" |
green.50 | "#cff7de" |
green.100 | "#b5f2cb" |
green.200 | "#85eaaa" |
green.300 | "#51e186" |
green.400 | "#23d163" |
green.500 | "#1ba14c" |
green.600 | "#16833e" |
green.700 | "#126932" |
green.800 | "#0d4e25" |
green.900 | "#083017" |
green.950 | "#062311" |
indigo.50 | "#e8e8fd" |
indigo.100 | "#d9dafc" |
indigo.200 | "#bdbef9" |
indigo.300 | "#9c9ef6" |
indigo.400 | "#8082f4" |
indigo.500 | "#6467f2" |
indigo.600 | "#3a3dee" |
indigo.700 | "#1417e6" |
indigo.800 | "#1114c0" |
indigo.900 | "#0d0f96" |
indigo.950 | "#0b0d83" |
lime.50 | "#e7facc" |
lime.100 | "#ddf7b5" |
lime.200 | "#c7f287" |
lime.300 | "#b2ee59" |
lime.400 | "#9de92b" |
lime.500 | "#82cb15" |
lime.600 | "#6ba611" |
lime.700 | "#507d0d" |
lime.800 | "#385809" |
lime.900 | "#1e2e05" |
lime.950 | "#121c03" |
orange.50 | "#fef0e6" |
orange.100 | "#fee4d2" |
orange.200 | "#fdc7a1" |
orange.300 | "#fbac74" |
orange.400 | "#fa9247" |
orange.500 | "#f97415" |
orange.600 | "#e06106" |
orange.700 | "#b34d05" |
orange.800 | "#863a03" |
orange.900 | "#5e2902" |
orange.950 | "#461e02" |
pink.50 | "#fde8ed" |
pink.100 | "#fcd9e3" |
pink.200 | "#f9b9ca" |
pink.300 | "#f693ad" |
pink.400 | "#f37295" |
pink.500 | "#f0517c" |
pink.600 | "#ec275c" |
pink.700 | "#d81347" |
pink.800 | "#ae0f39" |
pink.900 | "#880c2d" |
pink.950 | "#710a25" |
purple.50 | "#f0e2fe" |
purple.100 | "#e9d3fd" |
purple.200 | "#d7b1fb" |
purple.300 | "#c994fa" |
purple.400 | "#b772f8" |
purple.500 | "#a855f7" |
purple.600 | "#9229f5" |
purple.700 | "#7e0bea" |
purple.800 | "#6609be" |
purple.900 | "#510797" |
purple.950 | "#44067f" |
red.50 | "#fdeae8" |
red.100 | "#fbd9d5" |
red.200 | "#f6b2ac" |
red.300 | "#f28c82" |
red.400 | "#ee6a5d" |
red.500 | "#ea4334" |
red.600 | "#de2817" |
red.700 | "#b42013" |
red.800 | "#8a190f" |
red.900 | "#66120b" |
red.950 | "#530f09" |
rose.50 | "#feecef" |
rose.100 | "#fdd8de" |
rose.200 | "#fbb2be" |
rose.300 | "#f88b9d" |
rose.400 | "#f6657d" |
rose.500 | "#f43e5c" |
rose.600 | "#f2183c" |
rose.700 | "#cf0c2d" |
rose.800 | "#a40a23" |
rose.900 | "#7d071b" |
rose.950 | "#650616" |
sky.50 | "#ddf3fd" |
sky.100 | "#c5eafc" |
sky.200 | "#95d9f9" |
sky.300 | "#65c8f6" |
sky.400 | "#35b7f3" |
sky.500 | "#0da2e7" |
sky.600 | "#0b87c1" |
sky.700 | "#096995" |
sky.800 | "#064e6f" |
sky.900 | "#042f43" |
sky.950 | "#032230" |
teal.50 | "#cdf9f4" |
teal.100 | "#b1f6ee" |
teal.200 | "#7ef1e3" |
teal.300 | "#51ecda" |
teal.400 | "#1ee6cf" |
teal.500 | "#14b8a5" |
teal.600 | "#108e80" |
teal.700 | "#0c6a5f" |
teal.800 | "#07403a" |
teal.900 | "#031c19" |
teal.950 | "#010504" |
violet.50 | "#eee7fe" |
violet.100 | "#e3d8fd" |
violet.200 | "#cbb6fb" |
violet.300 | "#b699fa" |
violet.400 | "#a17cf8" |
violet.500 | "#895af6" |
violet.600 | "#6d34f4" |
violet.700 | "#500ced" |
violet.800 | "#410ac2" |
violet.900 | "#34089b" |
violet.950 | "#2e0788" |
yellow.50 | "#fef4d7" |
yellow.100 | "#feefc3" |
yellow.200 | "#fde290" |
yellow.300 | "#fdd663" |
yellow.400 | "#fcc931" |
yellow.500 | "#fbbd04" |
yellow.600 | "#ce9b03" |
yellow.700 | "#a67d03" |
yellow.800 | "#795b02" |
yellow.900 | "#503d01" |
yellow.950 | "#372a01" |
Semantic Tokens
mono
primary
secondary
info
success
warning
danger
error
link
Background
bg
bg.subtle
bg.overlay
bg.ghost
bg.muted
bg.emphasized
bg.contrast
bg.panel
bg.float
bg.info
bg.success
bg.warning
bg.error
Foreground
Ag
fg
Ag
fg.subtle
Ag
fg.muted
Ag
fg.emphasized
Ag
fg.contrast
Ag
fg.info
Ag
fg.success
Ag
fg.warning
Ag
fg.error
Border
border
border.subtle
border.muted
border.emphasized
border.contrast
border.info
border.success
border.warning
border.error
Mono
mono
mono.contrast
mono.fg
mono.bg
mono.ghost
mono.subtle
mono.muted
mono.emphasized
mono.solid
mono.outline
Primary
primary
primary.contrast
primary.fg
primary.bg
primary.ghost
primary.subtle
primary.muted
primary.emphasized
primary.solid
primary.outline
Secondary
secondary
secondary.contrast
secondary.fg
secondary.bg
secondary.ghost
secondary.subtle
secondary.muted
secondary.emphasized
secondary.solid
secondary.outline
Info
info
info.contrast
info.fg
info.bg
info.ghost
info.subtle
info.muted
info.emphasized
info.solid
info.outline
Success
success
success.contrast
success.fg
success.bg
success.ghost
success.subtle
success.muted
success.emphasized
success.solid
success.outline
Warning
warning
warning.contrast
warning.fg
warning.bg
warning.ghost
warning.subtle
warning.muted
warning.emphasized
warning.solid
warning.outline
Danger
danger
danger.contrast
danger.fg
danger.bg
danger.ghost
danger.subtle
danger.muted
danger.emphasized
danger.solid
danger.outline
Error
error
error.contrast
error.fg
error.bg
error.ghost
error.subtle
error.muted
error.emphasized
error.solid
error.outline
Link
link
link.contrast
link.fg
link.bg
link.ghost
link.subtle
link.muted
link.emphasized
link.solid
link.outline
Gray
gray
gray.contrast
gray.fg
gray.bg
gray.ghost
gray.subtle
gray.muted
gray.emphasized
gray.solid
gray.outline
Red
red
red.contrast
red.fg
red.bg
red.ghost
red.subtle
red.muted
red.emphasized
red.solid
red.outline
Rose
rose
rose.contrast
rose.fg
rose.bg
rose.ghost
rose.subtle
rose.muted
rose.emphasized
rose.solid
rose.outline
Pink
pink
pink.contrast
pink.fg
pink.bg
pink.ghost
pink.subtle
pink.muted
pink.emphasized
pink.solid
pink.outline
Flashy
flashy
flashy.contrast
flashy.fg
flashy.bg
flashy.ghost
flashy.subtle
flashy.muted
flashy.emphasized
flashy.solid
flashy.outline
Orange
orange
orange.contrast
orange.fg
orange.bg
orange.ghost
orange.subtle
orange.muted
orange.emphasized
orange.solid
orange.outline
Amber
amber
amber.contrast
amber.fg
amber.bg
amber.ghost
amber.subtle
amber.muted
amber.emphasized
amber.solid
amber.outline
Yellow
yellow
yellow.contrast
yellow.fg
yellow.bg
yellow.ghost
yellow.subtle
yellow.muted
yellow.emphasized
yellow.solid
yellow.outline
Lime
lime
lime.contrast
lime.fg
lime.bg
lime.ghost
lime.subtle
lime.muted
lime.emphasized
lime.solid
lime.outline
Green
green
green.contrast
green.fg
green.bg
green.ghost
green.subtle
green.muted
green.emphasized
green.solid
green.outline
Emerald
emerald
emerald.contrast
emerald.fg
emerald.bg
emerald.ghost
emerald.subtle
emerald.muted
emerald.emphasized
emerald.solid
emerald.outline
Teal
teal
teal.contrast
teal.fg
teal.bg
teal.ghost
teal.subtle
teal.muted
teal.emphasized
teal.solid
teal.outline
Cyan
cyan
cyan.contrast
cyan.fg
cyan.bg
cyan.ghost
cyan.subtle
cyan.muted
cyan.emphasized
cyan.solid
cyan.outline
Sky
sky
sky.contrast
sky.fg
sky.bg
sky.ghost
sky.subtle
sky.muted
sky.emphasized
sky.solid
sky.outline
Blue
blue
blue.contrast
blue.fg
blue.bg
blue.ghost
blue.subtle
blue.muted
blue.emphasized
blue.solid
blue.outline
Indigo
indigo
indigo.contrast
indigo.fg
indigo.bg
indigo.ghost
indigo.subtle
indigo.muted
indigo.emphasized
indigo.solid
indigo.outline
Violet
violet
violet.contrast
violet.fg
violet.bg
violet.ghost
violet.subtle
violet.muted
violet.emphasized
violet.solid
violet.outline
Purple
purple
purple.contrast
purple.fg
purple.bg
purple.ghost
purple.subtle
purple.muted
purple.emphasized
purple.solid
purple.outline
Fuchsia
fuchsia
fuchsia.contrast
fuchsia.fg
fuchsia.bg
fuchsia.ghost
fuchsia.subtle
fuchsia.muted
fuchsia.emphasized
fuchsia.solid
fuchsia.outline
| Token | Value |
|---|---|
current | "currentColor" |
transparent | "transparent" |
bg.base | ["white","black"] |
bg.contrast | ["black","white"] |
bg.emphasized | ["black.200","white.300"] |
bg.error | ["error.50","error.950"] |
bg.float | ["white","white.bg"] |
bg.ghost | ["black.50","white.50"] |
bg.info | ["info.50","info.950"] |
bg.muted | ["black.100","white.200"] |
bg.overlay | "blackAlpha.600" |
bg.panel | ["black.bg","white.bg"] |
bg.subtle | ["black.50","white.100"] |
bg.success | ["success.50","success.950"] |
bg.warning | ["warning.50","warning.950"] |
border.base | ["black.100","white.200/70"] |
border.contrast | ["black","white"] |
border.emphasized | ["black.200","white.300/70"] |
border.error | ["error.500","error.400"] |
border.info | ["info.500","info.400"] |
border.muted | ["black.100","white.200/70"] |
border.subtle | ["black.50","white.100/70"] |
border.success | ["success.500","success.400"] |
border.warning | ["warning.500","warning.400"] |
fg.base | ["#171717","#ededed"] |
fg.contrast | ["#fafafa","#000000"] |
fg.emphasized | ["gray.600","gray.300"] |
fg.error | ["error.500","error.500"] |
fg.info | ["info.500","info.500"] |
fg.muted | ["gray.500","gray.400"] |
fg.subtle | ["gray.400","gray.500"] |
fg.success | ["success.500","success.500"] |
fg.warning | ["warning.500","warning.500"] |
black.base | "#0a0b0b" |
black.bg | "#f8f8f8" |
black.contrast | "white" |
black.emphasized | "black.200" |
black.fg | "black.800" |
black.ghost | "black.100/50" |
black.muted | "black.100" |
black.outline | "black.900" |
black.solid | "black" |
black.subtle | "black.50" |
white.base | "#ffffff" |
white.bg | "#161616" |
white.contrast | "black" |
white.emphasized | "white.400/50" |
white.fg | "white.900" |
white.ghost | "white.200/50" |
white.muted | "white.300/50" |
white.outline | "white.800" |
white.solid | "white" |
white.subtle | "white.200/50" |
gray.base | "gray.500" |
gray.bg | ["black.bg","white.bg"] |
gray.contrast | ["white","white"] |
gray.emphasized | ["black.200","white.400/50"] |
gray.fg | ["black.800","white.900"] |
gray.ghost | ["black.100/50","white.200/50"] |
gray.muted | ["black.100","white.300/50"] |
gray.outline | ["black.900","white.800"] |
gray.solid | ["gray.500","gray.800"] |
gray.subtle | ["black.50","white.200/50"] |
cyan.base | "cyan.500" |
cyan.bg | ["cyan.50/40","cyan.400/10"] |
cyan.contrast | ["black","black"] |
cyan.emphasized | ["cyan.200","cyan.700"] |
cyan.fg | ["cyan.800","cyan.100"] |
cyan.ghost | ["cyan.50","cyan.800/50"] |
cyan.muted | ["cyan.100","cyan.800"] |
cyan.outline | ["cyan.600","cyan.500"] |
cyan.solid | ["cyan.400","cyan.500"] |
cyan.subtle | ["cyan.50","cyan.800/50"] |
emerald.base | "emerald.500" |
emerald.bg | ["emerald.50/40","emerald.400/10"] |
emerald.contrast | ["white","white"] |
emerald.emphasized | ["emerald.200","emerald.700"] |
emerald.fg | ["emerald.700","emerald.100"] |
emerald.ghost | ["emerald.50","emerald.800/50"] |
emerald.muted | ["emerald.100","emerald.800"] |
emerald.outline | ["emerald.600","emerald.500"] |
emerald.solid | ["emerald.500","emerald.600"] |
emerald.subtle | ["emerald.50","emerald.800/50"] |
teal.base | "teal.500" |
teal.bg | ["teal.50/40","teal.400/10"] |
teal.contrast | ["white","white"] |
teal.emphasized | ["teal.200","teal.700"] |
teal.fg | ["teal.700","teal.100"] |
teal.ghost | ["teal.50","teal.800/50"] |
teal.muted | ["teal.100","teal.800"] |
teal.outline | ["teal.600","teal.500"] |
teal.solid | ["teal.500","teal.600"] |
teal.subtle | ["teal.50","teal.800/50"] |
green.base | "green.500" |
green.bg | ["green.50/40","green.400/10"] |
green.contrast | ["white","white"] |
green.emphasized | ["green.200","green.700"] |
green.fg | ["green.700","green.100"] |
green.ghost | ["green.50","green.900"] |
green.muted | ["green.100","green.800"] |
green.outline | ["green.600","green.500"] |
green.solid | ["green.500","green.600"] |
green.subtle | ["green.50","green.900"] |
lime.base | "lime.500" |
lime.bg | ["lime.50/40","lime.400/10"] |
lime.contrast | ["black","black"] |
lime.emphasized | ["lime.200","lime.700"] |
lime.fg | ["lime.800","lime.100"] |
lime.ghost | ["lime.50","lime.900"] |
lime.muted | ["lime.100","lime.800"] |
lime.outline | ["lime.600","lime.500"] |
lime.solid | ["lime.400","lime.500"] |
lime.subtle | ["lime.50","lime.900"] |
sky.base | "sky.500" |
sky.bg | ["sky.50/40","sky.400/10"] |
sky.contrast | ["white","white"] |
sky.emphasized | ["sky.200","sky.700"] |
sky.fg | ["sky.700","sky.100"] |
sky.ghost | ["sky.50","sky.900"] |
sky.muted | ["sky.100","sky.800"] |
sky.outline | ["sky.600","sky.500"] |
sky.solid | ["sky.500","sky.600"] |
sky.subtle | ["sky.50","sky.900"] |
amber.base | "amber.500" |
amber.bg | ["amber.50/40","amber.400/10"] |
amber.contrast | ["black","black"] |
amber.emphasized | ["amber.200","amber.700"] |
amber.fg | ["amber.800","amber.100"] |
amber.ghost | ["amber.50","amber.950/50"] |
amber.muted | ["amber.100","amber.800"] |
amber.outline | ["amber.600","amber.500"] |
amber.solid | ["amber.400","amber.500"] |
amber.subtle | ["amber.50","amber.950"] |
blue.base | "blue.500" |
blue.bg | ["blue.50/40","blue.400/10"] |
blue.contrast | ["white","white"] |
blue.emphasized | ["blue.200","blue.700"] |
blue.fg | ["blue.700","blue.100"] |
blue.ghost | ["blue.50","blue.950/50"] |
blue.muted | ["blue.100","blue.800"] |
blue.outline | ["blue.600","blue.500"] |
blue.solid | ["blue.500","blue.600"] |
blue.subtle | ["blue.50","blue.950"] |
flashy.base | "flashy.500" |
flashy.bg | ["flashy.50/40","flashy.400/10"] |
flashy.contrast | ["white","white"] |
flashy.emphasized | ["flashy.200","flashy.700"] |
flashy.fg | ["flashy.700","flashy.100"] |
flashy.ghost | ["flashy.50","flashy.950/50"] |
flashy.muted | ["flashy.100","flashy.800"] |
flashy.outline | ["flashy.600","flashy.500"] |
flashy.solid | ["flashy.500","flashy.600"] |
flashy.subtle | ["flashy.50","flashy.950"] |
fuchsia.base | "fuchsia.500" |
fuchsia.bg | ["fuchsia.50/40","fuchsia.400/10"] |
fuchsia.contrast | ["white","white"] |
fuchsia.emphasized | ["fuchsia.200","fuchsia.700"] |
fuchsia.fg | ["fuchsia.700","fuchsia.100"] |
fuchsia.ghost | ["fuchsia.50","fuchsia.950/50"] |
fuchsia.muted | ["fuchsia.100","fuchsia.800"] |
fuchsia.outline | ["fuchsia.600","fuchsia.500"] |
fuchsia.solid | ["fuchsia.500","fuchsia.600"] |
fuchsia.subtle | ["fuchsia.50","fuchsia.950"] |
indigo.base | "indigo.500" |
indigo.bg | ["indigo.50/40","indigo.400/10"] |
indigo.contrast | ["white","white"] |
indigo.emphasized | ["indigo.200","indigo.700"] |
indigo.fg | ["indigo.700","indigo.100"] |
indigo.ghost | ["indigo.50","indigo.950/50"] |
indigo.muted | ["indigo.100","indigo.800"] |
indigo.outline | ["indigo.600","indigo.500"] |
indigo.solid | ["indigo.500","indigo.600"] |
indigo.subtle | ["indigo.50","indigo.950"] |
orange.base | "orange.500" |
orange.bg | ["orange.50/40","orange.400/10"] |
orange.contrast | ["white","white"] |
orange.emphasized | ["orange.200","orange.700"] |
orange.fg | ["orange.700","orange.100"] |
orange.ghost | ["orange.50","orange.950/50"] |
orange.muted | ["orange.100","orange.800"] |
orange.outline | ["orange.600","orange.500"] |
orange.solid | ["orange.500","orange.600"] |
orange.subtle | ["orange.50","orange.950"] |
pink.base | "pink.500" |
pink.bg | ["pink.50/40","pink.400/10"] |
pink.contrast | ["white","white"] |
pink.emphasized | ["pink.200","pink.700"] |
pink.fg | ["pink.700","pink.100"] |
pink.ghost | ["pink.50","pink.950/50"] |
pink.muted | ["pink.100","pink.800"] |
pink.outline | ["pink.600","pink.500"] |
pink.solid | ["pink.500","pink.600"] |
pink.subtle | ["pink.50","pink.950"] |
purple.base | "purple.500" |
purple.bg | ["purple.50/40","purple.400/10"] |
purple.contrast | ["white","white"] |
purple.emphasized | ["purple.200","purple.700"] |
purple.fg | ["purple.700","purple.100"] |
purple.ghost | ["purple.50","purple.950/50"] |
purple.muted | ["purple.100","purple.800"] |
purple.outline | ["purple.600","purple.500"] |
purple.solid | ["purple.500","purple.600"] |
purple.subtle | ["purple.50","purple.950"] |
red.base | "red.500" |
red.bg | ["red.50/40","red.400/10"] |
red.contrast | ["white","white"] |
red.emphasized | ["red.200","red.700"] |
red.fg | ["red.700","red.100"] |
red.ghost | ["red.50","red.950/50"] |
red.muted | ["red.100","red.800"] |
red.outline | ["red.600","red.500"] |
red.solid | ["red.500","red.600"] |
red.subtle | ["red.50","red.950"] |
rose.base | "rose.500" |
rose.bg | ["rose.50/40","rose.400/10"] |
rose.contrast | ["white","white"] |
rose.emphasized | ["rose.200","rose.700"] |
rose.fg | ["rose.700","rose.100"] |
rose.ghost | ["rose.50","rose.950/50"] |
rose.muted | ["rose.100","rose.800"] |
rose.outline | ["rose.600","rose.500"] |
rose.solid | ["rose.500","rose.600"] |
rose.subtle | ["rose.50","rose.950"] |
violet.base | "violet.500" |
violet.bg | ["violet.50/40","violet.400/10"] |
violet.contrast | ["white","white"] |
violet.emphasized | ["violet.200","violet.700"] |
violet.fg | ["violet.700","violet.100"] |
violet.ghost | ["violet.50","violet.950/50"] |
violet.muted | ["violet.100","violet.800"] |
violet.outline | ["violet.600","violet.500"] |
violet.solid | ["violet.500","violet.600"] |
violet.subtle | ["violet.50","violet.950"] |
yellow.base | "yellow.500" |
yellow.bg | ["yellow.50/40","yellow.400/10"] |
yellow.contrast | ["black","black"] |
yellow.emphasized | ["yellow.200","yellow.700"] |
yellow.fg | ["yellow.800","yellow.100"] |
yellow.ghost | ["yellow.50","yellow.950/50"] |
yellow.muted | ["yellow.100","yellow.800"] |
yellow.outline | ["yellow.600","yellow.500"] |
yellow.solid | ["yellow.400","yellow.500"] |
yellow.subtle | ["yellow.50","yellow.950"] |