Skip to main content

Interface: ThemeTokens

Defined in: Types.ts:105

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:106

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:125

border​

border: SemanticBorder

colors​

colors: SemanticColors

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

sizing​

sizing: SemanticSizing

spacing​

spacing: SemanticSpacing

text​

text: SemanticText

zIndex​

zIndex: SemanticZIndex