Chakra UI Design System Docs

76 token usage including 16 colors found in 3 files

with 1.21 kB KB corresponding CSS generated (min+gzip)

Mostly

using functions⁽¹⁴⁾

, and others

using style props.⁽⁶⁾

With 49 unknown token values (64.47%) and 0 values marked as important (0.00%)

Top 10

center⁽⁴⁾

md⁽²⁾

4⁽²⁾

Color palette⁽¹⁰⁾

red.200⁽²⁾

green.100⁽¹⁾

red.300⁽¹⁾

pink.800⁽¹⁾

Category ⁽⁹⁾
utilities

colors⁽¹⁶⁾

color.white⁽³⁾

color.yellow⁽²⁾

background.red.200⁽¹⁾

background.green.100⁽¹⁾

background.red.300⁽¹⁾

color.red⁽¹⁾

background.pink.800⁽¹⁾

color.black⁽¹⁾

color.teal⁽¹⁾

color.text⁽¹⁾

color.red.500⁽¹⁾

background.gray.200⁽¹⁾

background.gray.500⁽¹⁾

background.green.500⁽¹⁾

background.yellow.500⁽¹⁾

background.red.50⁽¹⁾

spacing⁽⁸⁾

gap.40px⁽¹⁾

paddingX.24px⁽²⁾

paddingX.3⁽¹⁾

spaceX.4⁽¹⁾

padding.20px⁽¹⁾

marginBottom.30px⁽¹⁾

padding.25px⁽¹⁾

marginX.auto⁽¹⁾

fontSizes⁽⁵⁾

fontSize.1.2em⁽¹⁾

fontSize.50px⁽¹⁾

fontSize.2xl⁽¹⁾

fontSize.56px⁽¹⁾

fontSize.20px⁽¹⁾

fontWeights⁽²⁾

fontWeight.bold⁽²⁾

fontWeight.medium⁽¹⁾

sizes⁽¹⁾

maxWidth.840px⁽¹⁾

lineHeights⁽¹⁾

lineHeight.1.1em⁽¹⁾

radii⁽³⁾

borderRadius.8px⁽³⁾

borderRadius.md⁽¹⁾

borderRadius.999px⁽¹⁾

letterSpacings⁽¹⁾

letterSpacing.wide⁽¹⁾

unknown⁽¹⁸⁾

translateX.40px⁽¹⁾

align.center⁽¹⁾

width.12⁽¹⁾

debug.true⁽²⁾

flexGrow.0⁽¹⁾

width.5⁽¹⁾

height.6⁽¹⁾

variant.danger⁽¹⁾

base.sm⁽¹⁾

transform.auto⁽¹⁾

scale.1.1⁽¹⁾

display.inline-flex⁽¹⁾

variant.primary⁽¹⁾

alignSelf.flex-start⁽¹⁾

status.default⁽¹⁾

display.flex⁽¹⁾

animationName.red⁽¹⁾

Files⁽³⁾

🐼 Made with Panda