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      "default": {
5        "primary": "#5A44FF"
6      }
7    },
8    "typography": {
9      "h1": {
10        "fontSize": "32px"
11      }
12    }
13  }
14}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#5A44FF"
6      }
7    },
8    "typography": {
9      "h1": {
10        "fontSize": "32px"
11      }
12    }
13  }
14}

Colors Configuration

theme.colors maps variant names (default, light, dark, or your own names) to token maps. A flat colors.primary value is not the theme schema; place it under a variant such as colors.default.primary instead.

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" color="$text">
2  Content
3</Box>
1<Box bg="$primary" color="$text">
2  Content
3</Box>

Use only tokens defined in your selected variant. The basic example defines $primary; add text to that variant before using $text.

Generated Theme Types

The build plugin generates theme.d.ts inside its distDir. The default distDir is df, so the default declaration path is df/theme.d.ts. To enable type autocompletion, include the generated declarations in tsconfig.json:

1{
2  "include": ["src", "df/*.d.ts"]
3}
1{
2  "include": ["src", "df/*.d.ts"]
3}

distDir is a build-plugin option, not a field in devup.json. For example, a Vite configuration can change the generated directory:

1import DevupUI from '@devup-ui/vite-plugin'
2import { defineConfig } from 'vite'
3
4export default defineConfig({
5  plugins: [DevupUI({ distDir: 'generated/devup' })],
6})
1import DevupUI from '@devup-ui/vite-plugin'
2import { defineConfig } from 'vite'
3
4export default defineConfig({
5  plugins: [DevupUI({ distDir: 'generated/devup' })],
6})

That configuration writes generated/devup/theme.d.ts; include generated/devup/*.d.ts instead of df/*.d.ts. Run the build plugin after changing the theme to regenerate the declarations.

Typography Usage

Apply typography styles using the typography prop.

1<>
2  <Text typography="h1">Heading 1</Text>
3</>
1<>
2  <Text typography="h1">Heading 1</Text>
3</>