Skip to content

Thin-Sky theme

Preview Available in release assets

Provide Thin-Sky's complete light semantic-token mapping while retaining the same public token contract as every theme.

Thin-Sky theme primary example

Show code
<section data-theme="thin-sky">
  <h2>Thin-Sky theme</h2>
  <p>The complete contract uses a cool sky surface and blue semantic accent.</p>
  <button class="thin-button">Continue</button>
</section>

Anatomy

  • Complete 43-token mapping
  • Light native color scheme
  • Cool surfaces and text
  • Blue semantic accent
  • Shared type, space, shape, motion, and density roles

Variants and sizes

  • Thin-Sky scoped theme

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
  • Nested theme scope

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Theme selection is presentational and adds no runtime behavior.

Accessibility

Use the semantic roles rather than copying mapping values. Verify application-specific combinations, zoom, forced colors, and non-color status cues.

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

API

Load /themes.css or /themes/thin-sky.css and set data-theme=thin-sky on the desired 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

Semantic content remains available if the Thin-Sky mapping is absent.

Assets and dependencies

  • /themes.css
  • /themes/thin-sky.css

Dependencies: None

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

Composition

Derived from the examples and style specs, not authored.

Composes