theme/derive

Chip background.

Chip text colour.

Background of an added line.

Stronger background behind the changed text inside an added line.

Text colour of an added line.

Background of a removed line.

Stronger background behind the changed text inside a removed line.

Text colour of a removed line.

Dot colour for accent.

Dot colour for accentAlt.

Dot colour for danger.

Dot colour for info.

Dot colour for success.

Dot colour for warn.

Brand and interactive colour, checked for contrast against bg.

Secondary hue, often a green.

Text on top of accent-filled controls.

Solid fill for buttons and markers: the accent, stepped darker along its own hue until white clears CONTRAST.accentFg on it, so glyphs on filled controls are white on every theme. Text-on-canvas keeps accent (contrast is checked against the background there).

Text and glyph colour on accentFill.

Hover state of accentFill, one step deeper.

Hover state of accent: brighter in dark, deeper in light.

Translucent accent for quiet backgrounds.

Stronger translucent accent, for hover on soft backgrounds.

The sent prompt's bubble: the accent's wash, lighter in light where an alpha tint reads far stronger.

Whether the palette is light or dark.

Window background (the canvas).

Default border and divider colour.

Stronger border, for inputs and emphasis.

Reference chip colours, by kind.

Code block background.

Code block text, checked for contrast against codeBg.

Danger and error status colour.

Solid fill for destructive commits: danger stepped darker like accentFill, so white clears CONTRAST.accentFg on it.

Text and glyph colour on dangerFill.

Hover state of dangerFill, one step deeper.

Translucent danger for backgrounds.

Diff colours.

Decorative fills for dots, the orb and window lights. They are shapes, not text.

Alpha wash for hover on arbitrary surfaces.

Info status colour.

Translucent info for backgrounds.

Tint that identifies the model.

Colour of cost figures.

Focus ring and active rim colour.

Backdrop colour behind modal layers.

Selected row (neutral, no accent tint).

Text selection background.

Base shadow colour.

Success status colour.

Translucent success for backgrounds.

Elevated surface: sidebar, composer card, code block chrome.

Hover / pressed surface.

Overlay surface: popovers, menus, modals.

The surface ladder (canvas → tray → raised) and its edges. Separation comes from tone and light, not outlines; each appearance derives it its own way (see SURFACE). .zg-tray / .zg-raised / .zg-segment in styles/primitives.css are the only consumers components should need.

Body text.

Secondary text.

Primary text where it reads strongest (the sidebar and the inbox in dark).

Tertiary text, such as hints.

The two colours of the busy indicator.

Warning status colour.

Translucent warn for backgrounds.

Scale of the halo, as a number in a string.

How much of tone the bottom rim takes, as a CSS percentage.

How much of tone the body's far side takes, as a CSS percentage.

Base colour the sphere shades from.

Background-image over a solid accent fill: light falling from above.

Low-contrast edge, only where tone alone can't separate two layers.

Floating surfaces (menus, popovers, palette, modals): above whatever they open from.

A surface set into a tray, or a control lifted off it: the lightest step.

The border of a raised surface: the hairline in dark, softer in light where the shadow draws the edge.

Row hover inside any surface: a wash, never a slab.

Box-shadow for solid accent fills: top light, bottom edge, a drop tinted by the fill.

Box-shadow for floating surfaces: top light + a deep, soft, layered drop.

Box-shadow for trays and tracks: pressed in from the top.

The same, one step up, while a surface is live (a run streaming).

Box-shadow for raised things: top light + a tight soft drop.

Box-shadow for wells: shade under the top edge, a lip of light on the bottom one.

How a small lit sphere (the daemon orb) shades: see SphereShading.

A recessed track for grouped controls, set into a raised surface.

The bed a surface sits in: a soft step toward depth (darker in both modes).

The ring a raised card sits in (the composer): the tray in dark, a half step in light, so it frames without banding.

Input wells: a translucent shade, so the field is carved into whatever it sits on (canvas, tray or raised card) instead of carrying an absolute tone that only reads on one of them.

Brand / interactive hue: buttons, links, focus, selected states.

Secondary hue (the TUI's accent; success green in most themes).

Forced appearance; inferred from canvas luminance when omitted.

Default border and divider colour.

Stronger border, for inputs and emphasis.

Window background. The only required color besides accent.

Colours of the reference chips, by kind. Any left out come from accent and model.

Code block background. Defaults to a step off canvas.

Danger and error status colour. Pushed until it clears its contrast floor on canvas and the active row.

Diff colours. Any left out are mixed from canvas and the status colours.

Info status colour. Pushed until it clears its contrast floor on canvas and the active row.

Model-identity tint.

Colour of cost figures. Defaults to the muted text colour.

Focus ring / active rim. Defaults to accent.

Text selection background. Defaults to a translucent accent.

Success status colour. Pushed until it clears its contrast floor on canvas and the active row.

Elevated surface: sidebar, composer card. Derived from canvas when omitted.

Hover and pressed surface. Derived from canvas when omitted.

Overlay surface: popovers, menus, modals. Derived from canvas when omitted.

Body text. Derived from canvas with a faint tint when omitted.

Secondary text. Pushed until it clears its contrast floor.

Primary text where it reads strongest (the sidebar and the inbox in dark). Defaults to white in dark, text in light.

Tertiary text, such as hints. Pushed until it clears its contrast floor.

The two colours of the busy indicator. Defaults to accent and a muted accentAlt.

Warning status colour. Pushed until it clears its contrast floor on canvas and the active row.