Skip to main content

Interface: ThemeTokens

Defined in: Types.ts:111

Full ttoss Design Tokens Theme contract.

Two layers:

  • core — raw primitives and responsive engines (immutable across modes)
  • semantic — stable aliases consumed by components (remapped per mode)

Extensions are optional properties inside core and semantic. When present they follow the same core → semantic contract.

Properties​

core​

core: object

Defined in: Types.ts:112

border​

border: CoreBorder

breakpoints​

breakpoints: CoreBreakpoints

Viewport threshold scale. Core-only — no semantic layer.

See​

CoreBreakpoints

colors​

colors: CoreColors

dataviz?​

optional dataviz?: CoreDataviz

Data Visualization extension — analytical color palettes and non-color encoding primitives. Optional: omit when the theme does not support dataviz.

elevation​

elevation: CoreElevation

font​

font: CoreFont

motion​

motion: CoreMotion

opacity​

opacity: CoreOpacity

radii​

radii: CoreRadii

sizing​

sizing: CoreSizing

spacing​

spacing: CoreSpacingSteps

zIndex​

zIndex: CoreZIndex

semantic​

semantic: object

Defined in: Types.ts:131

border​

border: SemanticBorder

colors​

colors: SemanticColors

consequence​

consequence: SemanticConsequence

Cross-cutting valence ink for parts that paint no surface (model.md §6). Sibling of focus and overlay. families/consequence.ts

dataviz?​

optional dataviz?: SemanticDataviz

Data Visualization extension — semantic roles for analytical color, non-color encodings, and geospatial overlays. Optional: omit when the theme does not support dataviz.

This is the public API of the dataviz extension. Components consume these tokens; never core.dataviz.* directly.

elevation​

elevation: SemanticElevation

focus​

focus: SemanticFocus

motion​

motion: SemanticMotion

opacity​

opacity: SemanticOpacity

overlay​

overlay: SemanticOverlay

radii​

radii: SemanticRadii

rail​

rail: SemanticRail

Cross-cutting fill for the unfilled part of a track (model.md §6). Sibling of focus/overlay/consequence. families/rail.ts

sizing​

sizing: SemanticSizing

spacing​

spacing: SemanticSpacing

text​

text: SemanticText

valence​

valence: SemanticValence

Cross-cutting valence ink for a part that reports an outcome while painting no surface (model.md §6). Sibling of focus/overlay/consequence; distinct from consequence per FSL Lexicon §10.5 (negative ≠ destructive). families/valence.ts

zIndex​

zIndex: SemanticZIndex