devup.json Configuration

The devup.json file is the central configuration file for Devup UI that allows you to define custom themes, colors, typography, and other design tokens.

Basic Structure

1{
2  "theme": {
3    "colors": {
4      "primary": "#5A44FF"
5    },
6    "typography": {
7      "h1": {
8        "fontSize": "32px"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "colors": {
4      "primary": "#5A44FF"
5    },
6    "typography": {
7      "h1": {
8        "fontSize": "32px"
9      }
10    }
11  }
12}

Colors Configuration

Basic Color Setup

Define colors for different themes.

1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "secondary": "#85A5F2",
7        "text": "#2F2F2F",
8        "background": "#FFF"
9      },
10      "dark": {
11        "primary": "#9086FF",
12        "secondary": "#2A4586",
13        "text": "#EDEDED",
14        "background": "#131313"
15      }
16    }
17  }
18}
1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "secondary": "#85A5F2",
7        "text": "#2F2F2F",
8        "background": "#FFF"
9      },
10      "dark": {
11        "primary": "#9086FF",
12        "secondary": "#2A4586",
13        "text": "#EDEDED",
14        "background": "#131313"
15      }
16    }
17  }
18}

Semantic Color Naming

Use semantic names that describe purpose.

1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "primaryHover": "#4D38AE",
7        "text": "#2F2F2F",
8        "textSecondary": "#787878",
9        "background": "#FFF",
10        "surface": "#F8F8F8",
11        "success": "#4CAF50",
12        "warning": "#FF9800",
13        "error": "#F44336"
14      }
15    }
16  }
17}
1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "primaryHover": "#4D38AE",
7        "text": "#2F2F2F",
8        "textSecondary": "#787878",
9        "background": "#FFF",
10        "surface": "#F8F8F8",
11        "success": "#4CAF50",
12        "warning": "#FF9800",
13        "error": "#F44336"
14      }
15    }
16  }
17}

Color Variants

Create color variants with opacity.

1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "primary50": "#5A44FF80",
7        "primary20": "#5A44FF33",
8        "black50": "#00000080"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "colors": {
4      "light": {
5        "primary": "#5A44FF",
6        "primary50": "#5A44FF80",
7        "primary20": "#5A44FF33",
8        "black50": "#00000080"
9      }
10    }
11  }
12}

Typography Configuration

Typography Properties

Each typography definition can include.

• fontFamily: Font family name
• fontWeight: Numeric weight (100-900) or string
• fontSize: Size with unit (16px, 1rem)
• lineHeight: Numeric ratio or string with unit
• letterSpacing: Spacing with unit (-0.03em)

Typography Configuration

Define typography styles using objects for static values or arrays for responsive breakpoints.

Static typography

1{
2  "theme": {
3    "typography": {
4      "caption": {
5        "fontFamily": "Pretendard",
6        "fontWeight": 500,
7        "fontSize": "14px",
8        "lineHeight": 1.4
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "typography": {
4      "caption": {
5        "fontFamily": "Pretendard",
6        "fontWeight": 500,
7        "fontSize": "14px",
8        "lineHeight": 1.4
9      }
10    }
11  }
12}

Responsive typography

Use arrays to define styles for each breakpoint.

1{
2  "theme": {
3    "typography": {
4      "heading": [
5        {
6          "fontFamily": "Pretendard",
7          "fontWeight": 700,
8          "fontSize": "20px",
9          "lineHeight": 1.3
10        },
11        {
12          "fontFamily": "Pretendard",
13          "fontWeight": 700,
14          "fontSize": "28px",
15          "lineHeight": 1.3
16        },
17        {
18          "fontFamily": "Pretendard",
19          "fontWeight": 700,
20          "fontSize": "32px",
21          "lineHeight": 1.2
22        }
23      ]
24    }
25  }
26}
1{
2  "theme": {
3    "typography": {
4      "heading": [
5        {
6          "fontFamily": "Pretendard",
7          "fontWeight": 700,
8          "fontSize": "20px",
9          "lineHeight": 1.3
10        },
11        {
12          "fontFamily": "Pretendard",
13          "fontWeight": 700,
14          "fontSize": "28px",
15          "lineHeight": 1.3
16        },
17        {
18          "fontFamily": "Pretendard",
19          "fontWeight": 700,
20          "fontSize": "32px",
21          "lineHeight": 1.2
22        }
23      ]
24    }
25  }
26}

Usage in Components

Color Usage

Access colors using the $ prefix.

1<Box bg="$primary" borderColor="$border" color="$text">
2  Content
3</Box>
1<Box bg="$primary" borderColor="$border" color="$text">
2  Content
3</Box>

• To enable type autocompletion for theme values, add "df/*.ts" to the include array in your tsconfig.json file.

Typography Usage

Apply typography styles using the typography prop.

1<>
2  <Text typography="h1">Heading 1</Text>
3  <Text typography="body">Body text</Text>
4</>
1<>
2  <Text typography="h1">Heading 1</Text>
3  <Text typography="body">Body text</Text>
4</>