Foundation is where tokens, dark mode, presets, theme axes, reset rules, and raw element styling live. If you are asking about `h1-h6`, code blocks, root theme attributes, or the spacing scale, start here.
The shipped theme system stores state on the root element. WBTheme supports mode, preset, accent, radius, density, shadow, and font. Border is a real CSS axis, but it is not part of the shipped WBTheme JS API.
<html
data-mode="auto"
data-preset="corporate"
data-accent="royal"
data-radius="soft"
data-density="compact"
data-shadow="soft"
data-font="editorial"
data-border="subtle">| Axis | Values | What it changes |
|---|---|---|
| data-mode | light, dark, auto | Light/dark token set and color-scheme. |
| data-preset | modern, minimal, editorial, playful, corporate | Bundle of accent, radius, density, shadow, and font defaults. |
| data-accent | ocean, forest, sunset, royal, mint, amber, rose, slate-fire | Accent token family. |
| data-radius | sharp, soft | Corner radius tokens. |
| data-density | compact, comfortable | Spacing scale. |
| data-shadow | flat, soft | Shadow depth. |
| data-font | system, modern, editorial | Body and heading font stacks. |
| data-border | none, subtle, medium, strong, accent, dashed | Global border appearance. |
--wb-bg, --wb-surface, --wb-surface-2, --wb-text, --wb-muted, --wb-border
--wb-accent*, --wb-success*, --wb-warning*, --wb-danger*, --wb-info*
--wb-font, --wb-font-heading, --wb-font-mono, --wb-font-size-*
--wb-s1 through --wb-s20, plus --wb-r-sm through --wb-r-full
The base token scale starts in tokens.css and can be tightened or expanded by the density axis.
| Token | Default value |
|---|---|
| --wb-s1 | 4px default |
| --wb-s4 | 16px default |
| --wb-s8 | 32px default |
| --wb-s20 | 80px default |
Use data-density="compact" for tighter admin and data-heavy UIs.
Use data-density="comfortable" for calmer editorial or marketing flows.
Raw HTML already has package styling before you add any primitives. This is where h1-h6, paragraphs, links, code, blockquotes, tables, and focus rings are defined.
Paragraph width is no longer globally constrained. Use .wb-prose or the docs alias .wb-docs-prose when a content block needs a calmer reading measure.
A paragraph uses the base body font and line-height. Apply .wb-prose when you want a readable max-width for docs, policies, and other text-first surfaces. Inline code and links are already styled at the element layer.
Foundation handles the default reading feel before any page-level primitive is introduced.
<h1>Heading Level 1</h1>
<div class="wb-prose">
<p>Paragraph copy with <code>inline code</code>.</p>
</div><button data-wb-mode-set="dark">Dark</button>
<button data-wb-preset-set="minimal">Minimal</button>
<button data-wb-accent-set="forest">Forest</button>
<button data-wb-radius-set="soft">Soft radius</button>
<button data-wb-density-set="compact">Compact</button>
<button data-wb-shadow-set="soft">Soft shadow</button>
<button data-wb-font-set="editorial">Editorial font</button>