Interactive examples

Seven examples you can operate, each running the API it shows. The source beside each one is the code that runs, split by layer: styles, component, and system or configuration.

Adaptive layout

Change the available width or the text scale; the component picks the layout variant that fits.

Available width · 100%Text scale · 1.0×

Selected layout: stack

Adaptive cardThe layout follows this container and the text scale you choose.Explore →

Real ResizeObserver measurements select the typed variant. Wide needs 480px and text scale at most 1.5×; hysteresis prevents boundary flicker. On a narrow device, increase text scale to explore the stacked fallback.

Source, by layer

adaptive.styles.ts

import type { Variants } from '@toned/core'
import {
  type AdaptiveLayoutName,
  defineAdaptiveLayout,
} from '@toned/core/adaptive'

import { stylesheet } from '../../styles/system.ts'

export const adaptiveLayout = defineAdaptiveLayout({
  axis: 'layout',
  root: 'Root',
  areas: ['Title', 'Body', 'Actions'],
  fallback: 'stack',
  hysteresis: { size: 16, textScale: 0.1 },
  layouts: {
    stack: { flow: 'stack', gap: 16 },
    wide: {
      flow: 'row',
      gap: 20,
      when: { minWidth: 480, maxTextScale: 1.5 },
      areas: { Body: { grow: 1 } },
    },
  },
})

export const adaptiveStyles = stylesheet({
  Root: { fill: 'accent-soft', text: 'default', padding: 5, radius: '3xl' },
  Title: { $kind: 'text', weight: 'heavy' },
  Body: { $kind: 'text', minWidth: 0 },
  Actions: { $kind: 'text', weight: 'heavy', text: 'accent' },
}).variants(
  ($: Variants<{ layout: AdaptiveLayoutName<typeof adaptiveLayout> }>) =>
    adaptiveLayout.rules($),
  { defaults: { layout: adaptiveLayout.fallback } },
)

Reference →

Motion

Springs, interruption and retained exits, driven by the host that owns the styles.

Reduce motion

Reverse the spring while it moves. Position and velocity survive interruption. Exit retains the host until completion. Your operating system’s reduced-motion preference is always respected.

Source, by layer

motion.styles.ts

import type { Variants } from '@toned/core'

import { stylesheet } from '../../styles/system.ts'

export const motionStyles = stylesheet({
  Root: {
    // The studio palette: `accent` names it, `surface` paints with it.
    accent: 'violet',
    surface: 'accent',
    width: 18,
    height: 18,
    radius: '3xl',
    opacity: 1,
  },
}).variants(($: Variants<{ expanded: boolean }>) => ({
  [$.expanded(true)]: { Root: { width: 60, radius: '5xl' } },
}))

Reference →

Typed grid

Rearrange typed grid areas without changing the component’s structure.

Stack named areas

TNamed parts. Named places.The same avatar, title and body move between two typed grid layouts. No markup rewrite.

This is the actual defineGrid API with shared area ownership. Grid is web-only; adaptive stack, row and wrap layouts provide the portable alternative.

Source, by layer

grid.styles.ts

import { defineGrid, dp, fr, type Variants } from '@toned/core'

import { stylesheet } from '../../styles/system.ts'

const grid = defineGrid('lab-message', {
  columns: [dp(56), fr(1)],
  areas: [
    ['avatar', 'title'],
    ['.', 'body'],
  ],
  gap: 16,
})
const stacked = grid.variant({
  columns: [fr(1)],
  areas: [['avatar'], ['title'], ['body']],
  gap: 16,
})

export const gridStyles = stylesheet({
  Root: {
    '@platform web': { $grid: grid },
    fill: 'accent-soft',
    text: 'default',
    padding: 6,
    radius: '3xl',
  },
  Avatar: {
    $kind: 'text',
    '@platform web': { $area: grid.area('avatar') },
    fill: 'accent',
    text: 'on-accent',
    width: 12,
    height: 12,
    radius: '3xl',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  Title: {
    $kind: 'text',
    '@platform web': { $area: grid.area('title') },
    weight: 'heavy',
  },
  Body: { $kind: 'text', '@platform web': { $area: grid.area('body') } },
}).variants(($: Variants<{ stacked: boolean }>) => ({
  [$.stacked(true)]: { Root: { '@platform web': { $grid: stacked } } },
}))

Reference →

Email and PDF output

One stylesheet resolved to inline HTML email styles and to a PDF style profile.

Styles

document.styles.ts

import type { Variants } from '@toned/core'

import { stylesheet } from './document.system.ts'

export const documentSheet = stylesheet({
  Root: {
    $kind: 'text',
    padding: 24,
    surface: 'tint',
    radius: 12,
    text: 'body',
  },
}).variants(($: Variants<{ compact: boolean }>) => ({
  [$.compact(true)]: { Root: { padding: 16 } },
}))

Output

Compact document variant

HTML preview

You’re on the list.

This preview is styled by the inline output below.

Inline HTML / email

inline.resolve(…).Root

{
  "style": {
    "paddingTop": 24,
    "paddingRight": 24,
    "paddingBottom": 24,
    "paddingLeft": 24,
    "backgroundColor": "#eef2ff",
    "borderRadius": 12,
    "color": "#182554",
    "fontSize": 16
  }
}

PDF style output

pdf.resolve(…).Root

{
  "style": {
    "paddingTop": 24,
    "paddingRight": 24,
    "paddingBottom": 24,
    "paddingLeft": 24,
    "backgroundColor": "#eef2ff",
    "borderRadius": 12,
    "color": "#182554",
    "fontSize": 16
  }
}

Both outputs come from the same sheet and variant. PDF values are document points. This shows resolved styles, not a generated PDF or email-client compatibility test.

Configuration

document.system.ts

import { defineSystem, defineToken } from '@toned/core'

export const documentSystem = defineSystem({
  id: 'lab-document',
  tokens: {
    padding: defineToken({
      values: [16, 24] as const,
      resolve: (value) => ({ padding: value }),
    }),
    surface: defineToken({
      values: ['tint'] as const,
      resolve: () => ({ backgroundColor: '#eef2ff' }),
    }),
    radius: defineToken({
      values: [12] as const,
      resolve: (value) => ({ borderRadius: value }),
    }),
    text: defineToken({
      values: ['body'] as const,
      resolve: () => ({ color: '#182554', fontSize: 16 }),
    }),
  },
})

export const { stylesheet } = documentSystem

Reference →

Token exchange

Resolve an alias, read the diagnostics and round-trip a DTCG token document.

DTCG document · edit the value or alias

2 tokens resolved. Aliases retain their authored form on export.

Resolved tokens and diagnostics

{
  "tokens": [
    {
      "path": "space.small",
      "value": {
        "value": 8,
        "unit": "px"
      }
    },
    {
      "path": "space.card",
      "value": {
        "value": 8,
        "unit": "px"
      }
    }
  ],
  "diagnostics": []
}

Round-trip export

exportDtcg(library)

{
  "space": {
    "small": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "card": {
      "$type": "dimension",
      "$value": "{space.small}"
    }
  }
}

Runs the real importer in your browser. This bounded editor accepts 8,000 characters. It demonstrates the documented DTCG subset; mapping imported values into a system’s theme remains explicit.

Source, by layer

token-exchange.ts

import { exportDtcg, importDtcg } from '@toned/compiler/tokens'

export const initialDocument = JSON.stringify(
  {
    space: {
      small: { $type: 'dimension', $value: { value: 8, unit: 'px' } },
      card: { $type: 'dimension', $value: '{space.small}' },
    },
  },
  null,
  2,
)

/** Import a DTCG document, then export it again from the resolved library. */
export function exchangeTokens(source: string) {
  try {
    const document: unknown = JSON.parse(source)
    const library = importDtcg(document)
    return { library, exported: exportDtcg(library), error: '' }
  } catch (error) {
    return { error: error instanceof Error ? error.message : String(error) }
  }
}

Reference →

Measured contracts

A contract measures the rendered element and checks it against the declaration.

Contract

touch-target.contract.ts

import { createScenarios, verifyContracts } from '@toned/compiler/contracts'

import { inline } from './document.renderers.ts'
import { documentSheet } from './document.styles.ts'

const suite = createScenarios({ variants: { compact: [false] } })

type Size = { width: number; height: number }

/** Check one measured `Root` against a 44 × 44 interaction-size contract. */
export function verifyTouchTarget(measure: () => Size | undefined) {
  return verifyContracts({
    suite,
    contracts: [
      {
        id: 'touch-target',
        kind: 'interaction-size',
        part: 'Root',
        minWidth: 44,
        minHeight: 44,
      },
    ],
    resolve: (scenario) =>
      inline.explain(documentSheet, { variants: scenario.variants }),
    measure: () => {
      const size = measure()
      return size ? { Root: { width: size.width, height: size.height } } : {}
    },
  })
}

Measurement

Measured target height · 48px

Choose a size, then measure the rendered button.

One real DOM measurement, one explicit 44 × 44 policy. Below 44px, this check fails. This demonstrates measurement-backed verification; it does not claim a complete accessibility audit or unvisited scenario coverage.

Styles and configuration

document.styles.ts

import type { Variants } from '@toned/core'

import { stylesheet } from './document.system.ts'

export const documentSheet = stylesheet({
  Root: {
    $kind: 'text',
    padding: 24,
    surface: 'tint',
    radius: 12,
    text: 'body',
  },
}).variants(($: Variants<{ compact: boolean }>) => ({
  [$.compact(true)]: { Root: { padding: 16 } },
}))

Reference →

Source inspector

Inspect a declaration, preview an edit and apply it against the current source revision.

The source compiler loads only when you open the inspector.

This is Toned’s actual source inspector and checked edit pipeline, connected to one in-memory example. Changes never touch a repository or execute source. Reloading restores the example. The development bridge guide explains how to connect an authenticated, allowlisted local workspace.

Source, by layer

inspector-session.ts

import {
  applyDesignEdit,
  DesignProject,
  proposeValueEdit,
} from '@toned/compiler'
import {
  type InspectorTransport,
  mountDesignInspector,
} from '@toned/compiler/inspector'

const uri = 'file:///toned-lab/button.ts'
const initial = `import { defineSystem, defineToken } from '@toned/core'
const ui = defineSystem({ id: 'inspector-demo', tokens: {
  padding: defineToken({ values: [8, 16, 24], resolve: value => ({ padding: value }) }),
} })
// Edits preserve surrounding source and validate the current revision.
export const buttonStyles = ui.stylesheet({ Root: { padding: 16 } })
`
export function mountInspectorSession(
  container: HTMLElement,
  onSource: (source: string) => void,
) {
  const project = new DesignProject({
    maxFiles: 1,
    maxCharacters: 8000,
    maxDocumentCharacters: 8000,
    maxNodesPerDocument: 100,
  })
  project.update(uri, initial, 1)
  onSource(initial)
  function current(target: string) {
    if (target !== uri)
      throw new Error('Only the example document is available')
    const document = project.get(target)
    if (!document) throw new Error('Example document is unavailable')
    return document
  }
  const transport: InspectorTransport = {
    query: async (input, signal) => {
      signal.throwIfAborted()
      return project.query({ ...input, uri, limit: Math.min(input.limit, 50) })
    },
    document: async (target, signal) => {
      signal.throwIfAborted()
      return current(target)
    },
    propose: async (input, signal) => {
      signal.throwIfAborted()
      return proposeValueEdit(project, input)
    },
    apply: async (change, signal) => {
      signal.throwIfAborted()
      const document = current(change.edit.uri)
      const next = applyDesignEdit(document.text, document.version, change.edit)
      if (next.length > 8000)
        throw new Error('Example source exceeds its limit')
      const updated = project.update(uri, next, document.version + 1)
      onSource(next)
      return updated
    },
  }
  const inspector = mountDesignInspector(container, {
    transport,
    selection: { uri, owner: 'buttonStyles', part: 'Root' },
    pageSize: 25,
  })
  return () => inspector.dispose()
}

Reference →