Colors

You can directly pass color values to the primitive components.

1const box = <Box bg="#FF0000" w={25} h={25} />
1const box = <Box bg="#FF0000" w={25} h={25} />

But, when your project gets larger and more complicated, it could be better to use variables to style your project. Pass in the variables that you created in devup.json.

1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#FF0000"
6      },
7      "dark": {
8        "primary": "#FF0000"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#FF0000"
6      },
7      "dark": {
8        "primary": "#FF0000"
9      }
10    }
11  }
12}

1const color = <Box bg="$primary" w={25} h={25} />
1const color = <Box bg="$primary" w={25} h={25} />