Default Tokens

gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more.
Colors
Typography
Space
Opacity
Shadows
Borders
Theming in @gluestack-ui with gluestack-style is based on the Styled System Theme Specification.

Colors

We recommend adding a palette that ranges from 50 to 900. Tools like JSON Color Palette Generator, Smart Swatch or Palx are available to generate these palettes.
primary
secondary
tertiary
others

Typography

To manage Typography options, the tokens object supports the following keys:
  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
import { createConfig } from '../../core-components/themed/gluestack-ui-provider/config';
import {config as defaultConfig } from '../../core-components/themed/gluestack-ui-provider/config';
const config = createConfig({
...defaultConfig,
tokens: {
...defaultConfig.tokens,
fontSizes: {
...defaultConfig.tokens.fontSizes,
newFontSize: 90,
},
...// other tokens
},
});

Space

The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, props.
Tokens
Value (Pixels)
Representation
0
0
px
1px
0.5
2
1
4
1.5
6
2
8
2.5
10
3
12
3.5
14
4
16
4.5
18
5
20
6
24
7
28
8
32
9
36
10
40
11
44
12
48
16
64
20
80
24
96
32
128
40
160
48
192
56
224
64
256
72
288
80
320
96
384
1/2
50%
1/3
33.333%
2/3
66.666%
1/4
25%
2/4
50%
3/4
75%
1/5
20%
2/5
40%
3/5
60%
4/5
80%
1/6
16.666%
2/6
33.333%
3/6
50%
4/6
66.666%
5/6
83.333%
full
100%

Opacity

You can define your opacity tokens or override existing ones using the createConfig function under the tokens section.
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)
100
(1)

Shadows

In @gluestack-ui with gluestack-style there are two types of shadows provided by default.
Note: In the context of dark mode design, it's important to recognize that elevation serves as the primary tool for expressing hierarchy. Unlike in light mode, where shadows are used for this purpose, dark themes prioritize surface illumination. The higher the elevation, the lighter the surfaces become, ultimately improving visibility and clarity.
Hard Shadows
1
2
3
4
5
Soft Shadows
1
2
3
4

Borders

border widths

borderWidths tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the createConfig function under the tokens section.
0
(0)
1
(1)
2
(2)
4
(4)
8
(8)

border radius

radii tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the createConfig function under the tokens section.
none
(0)
xs
(2)
sm
(4)
md
(6)
lg
(8)
xl
(12)
2xl
(16)
3xl
(24)
full
(9999)
Edit this page on GitHub