Colors

Devup UI provides flexible color management through direct values and theme tokens.

Direct Color Values

You can pass color values directly to any component:

1// Hex colors
2const example1 = <Box bg="#FF0000" />
3const example2 = <Box bg="#F00" />
4
5// RGB/RGBA
6const example3 = <Box bg="rgb(255, 0, 0)" />
7const example4 = <Box bg="rgba(255, 0, 0, 0.5)" />
8
9// HSL
10const example5 = <Box bg="hsl(0, 100%, 50%)" />
11
12// Named colors
13const example6 = <Box bg="red" />
14const example7 = <Box bg="tomato" />
1// Hex colors
2const example1 = <Box bg="#FF0000" />
3const example2 = <Box bg="#F00" />
4
5// RGB/RGBA
6const example3 = <Box bg="rgb(255, 0, 0)" />
7const example4 = <Box bg="rgba(255, 0, 0, 0.5)" />
8
9// HSL
10const example5 = <Box bg="hsl(0, 100%, 50%)" />
11
12// Named colors
13const example6 = <Box bg="red" />
14const example7 = <Box bg="tomato" />

Devup UI automatically optimizes color values at build time. For example, rgb(255, 0, 0) becomes red and #FF0000 becomes #f00.

Theme Colors

For larger projects, define colors in devup.json for consistency and theme support:

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "secondary": "#7928ca",
7        "success": "#0070f3",
8        "warning": "#f5a623",
9        "error": "#e00",
10        "text": "#000",
11        "textSecondary": "#666",
12        "background": "#fff",
13        "border": "#eaeaea"
14      },
15      "dark": {
16        "primary": "#3291ff",
17        "secondary": "#8a63d2",
18        "success": "#3291ff",
19        "warning": "#f7b955",
20        "error": "#f33",
21        "text": "#fff",
22        "textSecondary": "#888",
23        "background": "#000",
24        "border": "#333"
25      }
26    }
27  }
28}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "secondary": "#7928ca",
7        "success": "#0070f3",
8        "warning": "#f5a623",
9        "error": "#e00",
10        "text": "#000",
11        "textSecondary": "#666",
12        "background": "#fff",
13        "border": "#eaeaea"
14      },
15      "dark": {
16        "primary": "#3291ff",
17        "secondary": "#8a63d2",
18        "success": "#3291ff",
19        "warning": "#f7b955",
20        "error": "#f33",
21        "text": "#fff",
22        "textSecondary": "#888",
23        "background": "#000",
24        "border": "#333"
25      }
26    }
27  }
28}

Use theme colors with the $ prefix:

1const boxExample1 = <Box bg="$primary" />
2const textExample = <Text color="$text" />
3const boxExample2 = <Box borderColor="$border" />
1const boxExample1 = <Box bg="$primary" />
2const textExample = <Text color="$text" />
3const boxExample2 = <Box borderColor="$border" />

Multiple Theme Variants

You can define multiple theme variants beyond default and dark:

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3"
6      },
7      "dark": {
8        "primary": "#3291ff"
9      },
10      "blue": {
11        "primary": "#0052cc"
12      },
13      "green": {
14        "primary": "#00875a"
15      }
16    }
17  }
18}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3"
6      },
7      "dark": {
8        "primary": "#3291ff"
9      },
10      "blue": {
11        "primary": "#0052cc"
12      },
13      "green": {
14        "primary": "#00875a"
15      }
16    }
17  }
18}

The first key (e.g., default) is the default theme. Other themes can be activated using the theme API.

Semantic Color Naming

Organize colors by their purpose rather than their appearance:

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "primaryHover": "#0060df",
7        "primaryActive": "#0050c0",
8
9        "text": "#000",
10        "textMuted": "#666",
11        "textInverse": "#fff",
12
13        "background": "#fff",
14        "backgroundSubtle": "#fafafa",
15        "backgroundMuted": "#f5f5f5",
16
17        "border": "#eaeaea",
18        "borderFocus": "#0070f3",
19
20        "success": "#0070f3",
21        "warning": "#f5a623",
22        "error": "#e00",
23        "info": "#0070f3"
24      }
25    }
26  }
27}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "primaryHover": "#0060df",
7        "primaryActive": "#0050c0",
8
9        "text": "#000",
10        "textMuted": "#666",
11        "textInverse": "#fff",
12
13        "background": "#fff",
14        "backgroundSubtle": "#fafafa",
15        "backgroundMuted": "#f5f5f5",
16
17        "border": "#eaeaea",
18        "borderFocus": "#0070f3",
19
20        "success": "#0070f3",
21        "warning": "#f5a623",
22        "error": "#e00",
23        "info": "#0070f3"
24      }
25    }
26  }
27}

Using Colors with Opacity

For transparent variants, use RGBA or define separate tokens:

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "primaryAlpha10": "rgba(0, 112, 243, 0.1)",
7        "primaryAlpha20": "rgba(0, 112, 243, 0.2)",
8        "overlay": "rgba(0, 0, 0, 0.5)"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "primaryAlpha10": "rgba(0, 112, 243, 0.1)",
7        "primaryAlpha20": "rgba(0, 112, 243, 0.2)",
8        "overlay": "rgba(0, 0, 0, 0.5)"
9      }
10    }
11  }
12}

Type Safety

Theme colors are fully type-safe. TypeScript will autocomplete available color tokens:

1// Autocomplete shows: $primary, $secondary, $text, etc.
2<Box bg="$" />
1// Autocomplete shows: $primary, $secondary, $text, etc.
2<Box bg="$" />

Invalid color tokens will show TypeScript errors, ensuring consistency across your codebase.