> ## Documentation Index
> Fetch the complete documentation index at: https://docs.widgentic.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme tokens

> Every --wg-* theme token with its type, light default and use, the dark preset, and the rules for custom variables and values — derived from the token registry.

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.