b ? 'yellow' : variable]} />
const after = (
b ? 'd2' : 'd3'}`}
style={{
'--d2': variable,
}}
/>
)
```
Support Theme with Typing
`devup.json`
```json
{
"theme": {
"colors": {
"default": {
"text": "#000"
},
"dark": {
"text": "white"
}
}
}
}
```
```tsx
// Type Safe
```
Support Responsive And Pseudo Selector
You can use responsive and pseudo selector.
```tsx
// Responsive with Selector
const box =
// Same
const box =
```
## Custom Shorthands
Custom shorthands belong to the plugin options rather than `devup.json` because
they extend build-time extraction, not design tokens.
```ts
// next.config.ts
const nextConfig = {}
export default DevupUI(nextConfig, {
shorthands: {
insetX: ['left', 'right'],
scrollMarginX: ['scrollMarginLeft', 'scrollMarginRight'],
},
})
```
Every target receives the same value, and target names accept camelCase or
kebab-case. The generated `df/theme.d.ts` adds type completion for direct,
responsive, pseudo-selector, and custom-selector usage. Restart Next.js after
changing the option.
If your `tsconfig.json` does not already match `df/*.d.ts`, add it (or your
custom `distDir`) to `include`.
```tsx
```
