Tokens

WoozDesign manages all tokens as CSS Properties. You can access them the same way as other variables.

Reference

• Color
• Radius
• Scaling
• Shadow
• Space
• Typography
• Translucent

Token values can be customized by simply overriding the global theme styles.

.woozdesign {
  --font-size-4: 18px;
}

Props

Theme Props

Type	Values
ThemeAccentColor	'gray'| 'gold'| 'bronze'| 'brown'| 'yellow'| 'amber'| 'orange'| 'tomato'| 'red'| 'ruby'| 'crimson'| 'pink'| 'mauve'| 'slate'| 'olive'| 'sage'| 'sand'| 'plum'| 'purple'| 'violet'| 'iris'| 'indigo'| 'blue'| 'cyan'| 'teal' | 'jade' | 'green' | 'grass' | 'lime' | 'mint' | 'sky'
ThemeRadius	'none' | 'small' | 'medium' | 'large' | 'full'
ThemeScaling	'90%' | '95%' | '100%' | '105%' | '110%'
ThemeShadow	'0' | '1' | '2' | '3' | '4' | '5' | '6' | '7'
ThemeTranslucent	'10%' | '20%' | '40%' | '60%' | '80%'
ThemeBorderRadius	'1px' | '2px' | '3px' | '4px'

Layout Props

Prop	Type	Default	Required
position	Responsive<Position>	-	-
width	Responsive<ScreenSize>	-	-
maxWidth	Responsive<ScreenSize>	-	-
minWidth	Responsive<ScreenSize>	-	-
height	Responsive<ScreenSize>	-	-
maxHeight	Responsive<ScreenSize>	-	-
minHeight	Responsive<ScreenSize>	-	-
inset	Responsive<Inset>	-	-
top	Responsive<Inset>	-	-
bottom	Responsive<Inset>	-	-
left	Responsive<Inset>	-	-
right	Responsive<Inset>	-	-
shrink	Responsive<Flex>	-	-
grow	Responsive<Flex>	-	-

Margin Props

Prop	Type	Default	Required
m	Responsive<MarginValue>	-	-
mx	Responsive<MarginValue>	-	-
my	Responsive<MarginValue>	-	-
ml	Responsive<MarginValue>	-	-
mr	Responsive<MarginValue>	-	-
mt	Responsive<MarginValue>	-	-
mb	Responsive<MarginValue>	-	-

Padding Props

Prop	Type	Default	Required
p	Responsive<PaddingValue>	-	-
px	Responsive<PaddingValue>	-	-
py	Responsive<PaddingValue>	-	-
pl	Responsive<PaddingValue>	-	-
pr	Responsive<PaddingValue>	-	-
pt	Responsive<PaddingValue>	-	-
pb	Responsive<PaddingValue>	-	-