Semantic tokens

ExampleTokenValue (Default)Value (Dark)
chakra-body-bgwhitegray.800
chakra-subtle-bggray.50gray.900
chakra-body-textblackAlpha.900white
chakra-subtle-textblackAlpha.500whiteAlpha.600
chakra-placeholder-colorblackAlpha.400whiteAlpha.500
chakra-inverse-textwhiteblackAlpha.900
chakra-border-colorblackAlpha.200whiteAlpha.200
border-color-a11yblackAlpha.400whiteAlpha.400
primary-fgprimary.600primary.200
danger-fgdanger.600danger.200
warning-fgwarning.600warning.200
success-fgsuccess.600success.200
info-fginfo.600info.200
neutral-fgblackAlpha.600whiteAlpha.700
primary-bgprimary.100rgba(217, 212, 255, 0.12)
danger-bgdanger.100rgba(255, 204, 200, 0.12)
error-bgdanger.100rgba(255, 204, 200, 0.12)
warning-bgwarning.100rgba(253, 210, 145, 0.12)
success-bgsuccess.100rgba(139, 235, 208, 0.12)
info-bginfo.100rgba(217, 212, 255, 0.12)
neutral-bgblackAlpha.100whiteAlpha.100
primary-bg-activeprimary.200rgba(217, 212, 255, 0.24)
danger-bg-activedanger.200rgba(255, 204, 200, 0.24)
warning-bg-activewarning.200rgba(253, 210, 145, 0.24)
success-bg-activesuccess.200rgba(139, 235, 208, 0.24)
info-bg-activeinfo.200rgba(217, 212, 255, 0.24)
neutral-bg-activeblackAlpha.200whiteAlpha.300
primaryprimary.500primary.200
dangerdanger.500danger.200
errordanger.500danger.200
successsuccess.500success.200
warningwarning.500warning.200
infoinfo.500info.200
neutralblackAlpha.500whiteAlpha.600
graygray.500gray.200
redred.500red.200
orangeorange.500orange.200
yellowyellow.500yellow.200
greengreen.500green.200
tealteal.500teal.200
cyancyan.500cyan.200
blueblue.500blue.200
purplepurple.500purple.200
pinkpink.500pink.200
neutral.50blackAlpha.50whiteAlpha.900
neutral.100blackAlpha.100whiteAlpha.800
neutral.200blackAlpha.200whiteAlpha.700
neutral.300blackAlpha.300whiteAlpha.600
neutral.400blackAlpha.400whiteAlpha.500
neutral.500blackAlpha.500whiteAlpha.400
neutral.600blackAlpha.600whiteAlpha.300
neutral.700blackAlpha.700whiteAlpha.200
neutral.800blackAlpha.800whiteAlpha.100
neutral.900blackAlpha.900whiteAlpha.50
neutral-color.50blackAlpha.50whiteAlpha.100
neutral-color.100blackAlpha.100whiteAlpha.200
neutral-color.200blackAlpha.200whiteAlpha.300
neutral-color.300blackAlpha.300whiteAlpha.400
neutral-color.400blackAlpha.400whiteAlpha.500
neutral-color.500blackAlpha.500whiteAlpha.600
neutral-color.600blackAlpha.600whiteAlpha.700
neutral-color.700blackAlpha.700whiteAlpha.800
neutral-color.800blackAlpha.800whiteAlpha.900
neutral-color.900blackAlpha.900white