Skip to content

Neutral theme

Preview Available in release assets

Provide the complete default light semantic-token mapping used by :root and explicit data-theme=neutral scopes.

Neutral theme primary example

Show code
<section data-theme="neutral">
  <h2>Neutral theme</h2>
  <p>Complete semantic color, type, space, shape, focus, motion, and density roles use the default mapping.</p>
  <a href="#neutral-example">Example link</a>
</section>

Anatomy

  • Complete 43-token mapping
  • Light native color scheme
  • System font stacks
  • Green semantic accent
  • Theme-driven focus and status roles

Variants and sizes

  • Implicit :root mapping
  • Explicit neutral scope

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default light scheme
  • Native controls
  • Keyboard focus
  • Status colors
  • Reduced motion
  • Narrow content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Theme selection changes presentation only; controls and content keep native behavior.

Accessibility

The mapping includes text, muted text, surface, border, focus, and status roles. Consumers must still test real component combinations and must not use semantic status colors as the only cue.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Load /themes.css or /themes/neutral.css. Neutral applies at :root; data-theme=neutral creates an explicit nested scope.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Foundation fallbacks and browser defaults remain when the Neutral mapping is unavailable.

Assets and dependencies

  • /themes.css
  • /themes/neutral.css

Dependencies: None

Source: packages/ui/src/tokens/themes.ts