| sidebar_position |
|---|
6 |
Zephyr provides a set of default theme constraints, so you can start styling with zero configuration. You can easily customize/extend the theme (see Extending the Theme), but don't have to to get started with Zephyr.
This document outlines the default theme provided out of the box. It is heavily inspired by TailwindCSS's default theme, with some modifications appropriate for React Native. The code that defines this default theme can be found here.
The spacing constraints apply to anything space/size related, such as the margin classes, the padding classes, the sizing classes, and the positioning classes. Here's the scale for the default sizing constraints.
| Name | Size |
|---|---|
0 (ex: w:0) |
0 |
pt (ex: w:pt) |
1 |
0.5 (ex: w:0.5) |
2 |
1 (ex: w:1) |
4 |
1.5 (ex: w:1.5) |
6 |
2 (ex: w:2) |
8 |
2.5 (ex: w:2.5) |
10 |
3 (ex: w:3) |
12 |
3.5 (ex: w:3.5) |
14 |
4 (ex: w:4) |
16 |
5 (ex: w:5) |
20 |
6 (ex: w:6) |
24 |
7 (ex: w:7) |
28 |
8 (ex: w:8) |
32 |
9 (ex: w:9) |
36 |
10 (ex: w:10) |
40 |
11 (ex: w:11) |
44 |
12 (ex: w:12) |
48 |
14 (ex: w:14) |
56 |
16 (ex: w:16) |
64 |
20 (ex: w:20) |
80 |
24 (ex: w:24) |
96 |
28 (ex: w:28) |
112 |
32 (ex: w:32) |
128 |
36 (ex: w:36) |
144 |
40 (ex: w:40) |
160 |
48 (ex: w:48) |
192 |
56 (ex: w:56) |
224 |
64 (ex: w:64) |
256 |
72 (ex: w:72) |
288 |
80 (ex: w:80) |
320 |
96 (ex: w:96) |
384 |
1/4 (ex: w:1/4) |
25% |
1/2 (ex: w:1/2) |
50% |
3/4 (ex: w:3/4) |
75% |
1/3 (ex: w:1/3) |
33.33333% |
2/3 (ex: w:2/3) |
66.66666% |
1/5 (ex: w:1/5) |
20% |
2/5 (ex: w:2/5) |
40% |
3/5 (ex: w:3/5) |
60% |
4/5 (ex: w:4/5) |
80% |
full (ex: w:full) |
100% |
The default colors consist of white: #fff, black: #000, and the following colors.
Check out the Extending the Color Palette for information on how to extend this color palette with other pre-defined colors borrowed from TailwindCSS's palette.
The opacities constraint applies to opacity and background opacity (which is opacity applied only to the background, not all elements). Here's the default opacities constraint scale.
| Name | Value |
|---|---|
0 |
0 |
5 |
0.05 |
10 |
0.1 |
20 |
0.2 |
25 |
0.25 |
30 |
0.3 |
40 |
0.4 |
50 |
0.5 |
60 |
0.6 |
70 |
0.7 |
75 |
0.75 |
80 |
0.8 |
90 |
0.9 |
95 |
0.95 |
Here's a visual representation of that scale.
The borderSizes theme constraint applies to the border width classes. The scale for this is:
| Name | Size |
|---|---|
0 |
0 |
hairline |
StyleSheet.hairlineWidth |
1 |
1 |
2 |
2 |
4 |
4 |
8 |
8 |
Here's a visual representation of that scale.
The borderRadii constraint applies to the border radius classes. The scale is based off of the base font size for the default constraints, which is baseFontSize = 14. The scale is as follows:
| Name | Size |
|---|---|
none |
0 |
sm |
0.125 * baseFontSize |
base |
0.25 * baseFontSize |
md |
0.375 * baseFontSize |
lg |
0.5 * baseFontSize |
xl |
0.75 * baseFontSize |
2xl |
baseFontSize |
3xl |
1.5 * baseFontSize |
full |
999 |
Here's a visual representation of that scale.
The fontSizes constraint applies to the font size classes. The scale is based off of the base font size for the default constraints, which is baseFontSize = 14. The scale is as follows:
| Name | Size |
|---|---|
xs |
[0.75 * baseFontSize, baseFontSize] |
sm |
[0.875 * baseFontSize, 1.25 * baseFontSize] |
base |
[baseFontSize, 1.5 * baseFontSize] |
lg |
[1.125 * baseFontSize, 1.75 * baseFontSize] |
xl |
[1.25 * baseFontSize, 1.75 * baseFontSize] |
2xl |
[1.5 * baseFontSize, 2 * baseFontSize] |
3xl |
[1.875 * baseFontSize, 2.25 * baseFontSize] |
4xl |
[2.25 * baseFontSize, 2.5 * baseFontSize] |
5xl |
[3 * baseFontSize, 3 * baseFontSize] |
6xl |
[3.75 * baseFontSize, 3.75 * baseFontSize] |
7xl |
[4.5 * baseFontSize, 4.5 * baseFontSize] |
8xl |
[6 * baseFontSize, 6 * baseFontSize] |
9xl |
[8 * baseFontSize, 8 * baseFontSize] |
Here's a visual representation of that scale.
The fontWeights constraint applies to the font weight classes. The scale for this is:
| Name | Value |
|---|---|
thin |
100 |
extralight |
200 |
light |
300 |
normal |
400 |
medium |
500 |
semibold |
600 |
bold |
700 |
extrabold |
800 |
black |
900 |
Here's a visual representation of that scale.
The letterSpacing constraint applies to the tracking: classes. The scale for this is:
| Name | Value |
|---|---|
tighter |
-0.05 * baseFontSize |
tight |
-0.025 * baseFontSize |
normal |
0 |
wide |
0.025 * baseFontSize |
wider |
0.05 * baseFontSize |
widest |
0.1 * baseFontSize |
Here's a visual representation of that scale.
The lineHeights constraint applies to the leading: classes. The scale for this is as follows, where currentFontSize represents the font size of the text element that the class is being applied to.
| Name | Value |
|---|---|
none |
1 * currentFontSize |
tight |
1.25 * currentFontSize |
snug |
1.375 * currentFontSize |
normal |
1.5 * currentFontSize |
relaxed |
1.625 * currentFontSize |
loose |
2 * currentFontSize |
Here's a visual representation of that scale.
The shadows constraint applies to the shadow classes. The scale for this is:
| Name | Value |
|---|---|
sm |
{ android: 1, ios: [0, 1, 1, 0.18] } |
base |
{ android: 2, ios: [0, 1, 1.41, 0.2] } |
md |
{ android: 5, ios: [0, 2, 3.84, 0.25] } |
lg |
{ android: 8, ios: [0, 4, 4.65, 0.3] } |
xl |
{ android: 12, ios: [0, 6, 7.49, 0.37] } |
2xl |
{ android: 16, ios: [0, 8, 10.32, 0.44] } |
Here's a visual representation of that scale.
The aspectRatios constraint applies to the aspect ratio classes. The scale for this is as follows, where [16, 9] represents a 16-9 aspect ratio.
| Name | Value |
|---|---|
1 |
[1, 1] |
16-9 |
[16, 9] |
9-16 |
[9, 16] |
3-4 |
[3, 4] |
4-3 |
[4, 3] |
1-2 |
[1, 2] |
2-1 |
[2, 1] |
Here's a visual representation of that scale.
