Cheatography
https://cheatography.com
https://chakra-ui.com/docs/theming/theme
Font
body |
system-ui, sans-serif |
heading |
Georgia, serif |
mono |
Menlo, monospace |
Size
max |
max-content |
min |
min-content |
full |
100% |
3xs |
14rem |
2xs |
16rem |
xs |
20rem |
sm |
24rem |
md |
28rem |
lg |
32rem |
xl |
36rem |
2xl |
42rem |
3xl |
48rem |
4xl |
56rem |
5xl |
64rem |
6xl |
72rem |
7xl |
80rem |
8xl |
90rem |
The sizes key allows you to customize the global sizing of components you build for your project. By default these sizes value can be referenced by the width, height, and maxWidth, minWidth, maxHeight, minHeight styles.
|
|
Font Size
xs |
0.75rem |
sm |
0.875rem |
md |
1rem |
lg |
1.125rem |
xl |
1.25rem |
2xl |
1.5rem |
3xl |
1.875rem |
4xl |
2.25rem |
5xl |
3rem |
6xl |
3.75rem |
7xl |
4.5rem |
8xl |
6rem |
9xl |
8rem |
Line Height
normal |
normal |
none |
1 |
shorter |
1.25 |
short |
1.375 |
base |
1.5 |
tall |
1.625 |
taller |
2 |
3 |
0.75rem |
4 |
1rem |
5 |
1.25rem |
6 |
1.5rem |
7 |
1.75rem |
8 |
2rem |
9 |
2.25rem |
10 |
2.5rem |
|
|
Border radius
none |
0 |
sm |
0.125rem |
base |
0.25rem |
md |
0.375rem |
lg |
0.5rem |
xl |
0.75rem |
2xl |
1rem |
3xl |
1.5rem |
full |
9999px |
Chakra provides a set of smooth corner radius values.
Font Weight
hairline |
100 |
thin |
200 |
light |
300 |
normal |
400 |
medium |
500 |
semibold |
600 |
bold |
700 |
extrabold |
800 |
black |
900 |
Letter Spacing
tighter |
-0.05em |
tight |
-0.025em |
normal |
0 |
wide |
0.025em |
wider |
0.05em |
widest |
0.1em |
|
|
Spacing
px |
1px |
1px |
0.5 |
0.125rem |
2px |
1 |
0.25rem |
4px |
1.5 |
0.375rem |
6px |
2 |
0.5rem |
8px |
2.5 |
0.625rem |
10px |
3 |
0.75rem |
12px |
3.5 |
0.875rem |
14px |
4 |
1rem |
16px |
5 |
1.25rem |
20px |
6 |
1.5rem |
24px |
z-index values
hide |
-1 |
auto |
auto |
base |
0 |
docked |
10 |
dropdown |
1000 |
sticky |
1100 |
banner |
1200 |
overlay |
1300 |
modal |
1400 |
popover |
1500 |
skipLink |
1600 |
toast |
1700 |
tooltip |
1800 |
Chakra provides a minimal set of z-indeces out of the box to help control the stacking order of components.
|
Created By
Metadata
Comments
No comments yet. Add yours below!
Add a Comment