Theming

Design Tokens

Components never inline colour literals. They use a Tailwind token class or a var(--elah-*) reference. Whoever defines --elah-* decides the editor's look, and the variables are scoped to an element with the elah-root class, so wrap the editor in one.

Import all three stylesheets once at your app root. Each package compiles only the classes its own components use, so they do not contain each other's rules. The compiled files are plain CSS with preflight off: you do not need Tailwind, and no utility class names such as .flex or .p-2 are exposed.

import '@elah/timeline/styles.css'        // compiled timeline rules
import '@elah/editor/styles.css'          // compiled editor rules
import '@elah/editor/styles/tokens.css'   // --elah-* values (dark defaults)

<EditorProvider fps={30}>
  {/* elah-root scopes the --elah-* tokens */}
  <div className="elah-root" style={{ height: '100vh' }}>
    {/* AssetPanel, Preview, Timeline ... */}
  </div>
</EditorProvider>

Skipping the tokens file is valid when your app already defines .elah-root itself. Override any variable in your own .elah-root scope:

.elah-root {
  --elah-accent:   #6366f1;   /* indigo brand */
  --elah-bg-panel: #1e1e2e;
  --elah-playhead: #f43f5e;
}

You can also map the variables onto your own tokens, for example --elah-bg-panel: var(--color-surface-low), so the editor follows your app's light and dark theme automatically. The components are identical in every case. Only the values differ. The full variable list is the public theming surface, in packages/editor/src/styles/tokens.css, and the repository's docs/design-tokens.md documents the groups. Every name below is prefixed with --elah-:

Overlay Tokens (0.6.0)

Before 0.6.0 the preview overlays and clip badges used hard-coded colours and could not be themed. They now read these variables. The values below are the standalone defaults from tokens.css.

.elah-root {
  --elah-overlay-scrim:  rgba(10, 12, 20, 0.8);
  --elah-spinner-head:   #7dd3fc;
  --elah-clip-badge-bg:  rgba(0, 0, 0, 0.7);
}

The classNames Prop

Tokens recolour every editor instance. For a single component, pass classNames: a per-slot map of Tailwind class strings that wins over the built-in classes for the same CSS property. <Timeline> takes a TimelineClassNames and <SourcePanel> takes a SourcePanelClassNames. The bare className prop is shorthand for classNames.root, merged after it.

import { Timeline } from '@elah/editor'

<Timeline
  classNames={{
    root:            'rounded-xl',
    ruler:           'bg-zinc-900',                // ruler strip
    rulerTick:       'bg-zinc-600',                // tick marks
    rulerLabel:      'text-zinc-400',              // timecode labels
    lane:            'bg-zinc-950',
    clip:            'rounded-2xl shadow-lg',      // clip shape, all types
    clipVideo:       'from-sky-400 to-sky-600',    // video clip body
    clipVideoAccent: 'text-sky-300',               // its stripe and track bar
    playhead:        'text-cyan-400',              // a TEXT colour, see below
  }}
/>

The slots are root, ruler, rulerTick, rulerLabel, track, trackLabel, lane, clip, clipVideo, clipAudio, clipText, clipImage, clipVideoAccent, clipAudioAccent, clipTextAccent, clipImageAccent and playhead. Use bg-* classes or gradients to recolour surfaces and clip bodies. Use text-* to recolour accents: the playhead, clip stripe and border, and track-label bar all paint from currentColor.

Overrides win because of cn, exported from @elah/timeline (and from @elah/editor). It is clsx plus tailwind-merge, so a later class reliably beats an earlier one for the same property. Plain concatenation would leave both in the list and let CSS source order decide. Use it for your own components too:

import { cn } from '@elah/timeline'

<div className={cn('rounded border p-2', props.className)} />

timelineTheme (Deprecated)

timelineTheme is a backward-compatibility facade, marked @deprecated, and scheduled for removal in a future major release. Its values now point at the --elah-* variable contract rather than raw hex literals, for example timelineTheme.surface.background is 'var(--elah-bg-secondary)'. Components no longer consume it internally.

For global theming, override the --elah-* properties on .elah-root. For per-instance changes, use the classNames prop. Migrate off timelineTheme to either.