Themes

FormForge ships with three built-in themes, each built on a token system.

Usage

<FormForge schema={schema} theme="modern" />
<FormForge schema={schema} theme="minimal" />
<FormForge schema={schema} theme="enterprise" />

Built-in themes

Theme	Style
`modern`	Indigo accents, rounded corners, subtle shadows
`minimal`	Black accents, sharp focus rings, no shadows
`enterprise`	Teal accents, professional, dense layout

Token structure

interface ThemeTokens {
  colors: {
    primary, primaryHover,
    background, surface,
    border, borderFocus,
    text, textMuted, textPlaceholder,
    error, errorBackground, success,
  }
  radii:   { sm, md, lg }
  spacing: { xs, sm, md, lg, xl }
  font:    { family, sizeBase, sizeSm, weightNormal, weightMedium }
  shadow:  { sm, focus }
}

Custom theme

import type { ThemeTokens } from '@formforges/themes'
import { modernTokens } from '@formforges/themes'

const myTheme: ThemeTokens = {
  ...modernTokens,
  colors: {
    ...modernTokens.colors,
    primary: '#f59e0b',       // amber
    primaryHover: '#d97706',
    borderFocus: '#f59e0b',
  },
}