Theme tokens - widgentic

Themes are plain maps of bare token names (no --wg- prefix) to CSS values. The base stylesheet defines every token at :root, so widget styles may reference var(--wg-<token>) without a fallback.

Tokens

Token	Type	Light default	Falls back to	Use
`bg`	color	`#ffffff`	—	Page background behind widgets.
`surface`	color	`#ffffff`	`bg`	Widget panel background (cards, tables); falls back to bg when unset.
`fg`	color	`#1f2430`	—	Primary text.
`muted`	color	`#6b7280`	—	Secondary text: labels, captions, keys.
`accent`	color	`#2563eb`	—	Emphasis: titles, links, filled badges.
`accent-fg`	color	`#ffffff`	—	Text drawn on an accent fill (filled badges and buttons).
`border`	color	`#e2e8f0`	—	Hairlines: panel edges, row rules.
`border-width`	dimension	`1px`	—	Width of those hairlines.
`radius`	dimension	`6px`	—	Default corner rounding.
`radius-sm`	dimension	`3px`	—	Tight rounding: pills, chips, inline marks.
`radius-lg`	dimension	`12px`	—	Generous rounding: hero media, large panels.
`spacing`	dimension	`8px`	—	Base spacing step.
`spacing-sm`	dimension	`4px`	—	Half step: inline gaps inside a row.
`spacing-lg`	dimension	`16px`	—	Double step: section separation.
`font-family`	font-family	`system-ui, -apple-system, 'Segoe UI', sans-serif`	—	Body text family.
`font-mono`	font-family	`ui-monospace, SFMono-Regular, Menlo, monospace`	—	Monospace family for code and raw JSON (the custom kind).
`font-size`	dimension	`14px`	—	Body text size.
`font-size-sm`	dimension	`12px`	—	Small text: captions, stats, pills.
`font-size-lg`	dimension	`18px`	—	Large text: widget titles.
`font-weight-bold`	font-weight	`600`	—	Weight for titles and emphasized labels.
`line-height`	number	`1.45`	—	Text density.
`shadow`	shadow	`0 1px 3px rgba(0, 0, 0, 0.12)`	—	Panel elevation.
`danger`	color	`#b91c1c`	—	Error status: fills and text (see .wg-status-danger).
`danger-fg`	color	`#ffffff`	—	Text on a danger fill.
`success`	color	`#15803d`	—	Success status (see .wg-status-success).
`success-fg`	color	`#ffffff`	—	Text on a success fill.
`warning`	color	`#b45309`	—	Warning status (see .wg-status-warning).
`warning-fg`	color	`#ffffff`	—	Text on a warning fill.
`info`	color	`#0369a1`	—	Informational status (see .wg-status-info).
`info-fg`	color	`#ffffff`	—	Text on an info fill.
`avatar-size`	dimension	`32px`	—	Box of .wg-img-avatar images.
`thumb-size`	dimension	`48px`	—	Box of .wg-img-thumb images.

Dark preset

The dark preset is ordinary theme data — a starting point for custom themes. The names light (the defaults) and dark are reserved for it.

Token	Value
`bg`	`#0f131c`
`surface`	`#161b26`
`fg`	`#e5e9f0`
`muted`	`#8b93a7`
`accent`	`#7aa2f7`
`accent-fg`	`#0f131c`
`border`	`#2a3140`
`shadow`	`0 1px 3px rgba(0, 0, 0, 0.6)`
`danger`	`#f0a3a3`
`success`	`#8fd19e`
`warning`	`#e8b878`
`info`	`#7cc4e8`

Custom variables

Names match ^x-[a-z0-9][a-z0-9-]*$. A custom variable x-foo becomes —wg-x-foo on the themed scope; reference it from widget styles as var(—wg-x-foo).

Value safety

Token values are plain CSS values. Rejected: ’;’, ’{’, ’}’, ’<’, ’>’, ‘url(’ and ‘expression(’ (case-insensitive, whitespace-tolerant). Keep values to colors, lengths, and font stacks.