Skip to main content

Module colors

Module colors 

Expand description

The colour half of the design language (docs/design-language.md).

The interface is a quiet, near-colourless neutral material: every surface and every ink tier is an OKLCH lightness at one shared hue with chroma at or below NEUTRAL_MAX_CHROMA. Changing that hue (a theme’s or a workspace’s temperature, Colors::with_neutral_hue) never moves contrast, because lightness is what contrast is made of.

Colour means that someone is there or that something is happening:

  • PresencePalette: twelve hues at equal lightness and chroma, one per participant, so nobody looks more important than anybody else;
  • Intents::you: the local person’s own presence colour, which is their focus ring, caret and text-selection tint;
  • SemanticColors: muted status (danger, warning, success, info).

There is no brand accent. A primary action is an inverted control (Intents::inverted under Intents::on_inverted); a selection is a lift (Intents::selection). A theme whose Emphasis is tinted gives those two one hue; nothing else gains colour.

Every colour here is derived from a Palette (what a theme document says) in Colors::as_authored; Colors::of_palette then repairs any pairing that misses a contrast floor (super::contrast).

Structs§

ColorRamp
Colors
Intents
What controls paint with, by intent rather than by hue.
MediaColors
What is drawn straight onto media (video, a camera viewfinder, a photo): the letterbox around a frame, the fade under text that sits on the picture, and that text. Media is dark or light regardless of the theme, so these are the same in every theme; only the hue of the neutral material follows it. Controls over media are a floating Panel on the material instead, inked from the theme.
OnSurface
Ink tiers for content painted onto a surface, resolved against that surface’s actual luminance (Colors::on_surface).
Palette
The neutral material and its inks.
PresencePalette
One colour per participant: PRESENCE_HUES at one OKLCH lightness and chroma, so they differ in hue only and no participant looks more important than another. Where sRGB cannot carry the full chroma at a hue (a light cyan) only that hue’s chroma drops; lightness never does.
SemanticColors
Status colours. Muted (chroma at most STATUS_MAX_CHROMA) and used only for status: never as decoration, never as a brand.
Surfaces
The neutral material’s surfaces. Every one is opaque except Self::material, and every one shares [Colors::neutral_hue].
TintedChip
A tinted pill (a status badge, a presence chip), resolved against the ground it paints on. Every field is opaque rather than a token plus alpha — measuring the token instead of the composite is how a chip ends up as tinted ink on a tinted wash.
Tone
An OKLCH lightness and chroma at a hue the role fixes.
Wash
A status wash resolved on its ground: an opaque body and the inks that read on it.

Enums§

Emphasis
How primary actions, selection and “on” states show.
PresenceHue
One of the twelve presence hues: a person’s colour, as they choose it.
WashStrength
How strongly a Colors::wash_on status wash shows.

Constants§

HAIRLINE_MIN_DELTA
Minimum ground movement (WCAG relative-luminance units) for a hairline to count as visible — deliberately far below any text threshold, since it only has to catch a wash landing within rounding distance of its surface.
MATERIAL_ALPHA
Stock opacity of the floating-chrome material over its blurred backdrop: the compositor blurs what is behind a panel and tints it with Surfaces::overlay at 72 %. A theme sets its own (Surfaces::material_opacity).
MATERIAL_BLUR_PX
Stock backdrop blur of the floating material, in logical pixels.
MAX_CHIP_DEEPEN
How far Colors::legible_fill may deepen a filled chip toward black before it gives up and re-picks the label instead.
NEUTRAL_MAX_CHROMA
Ceiling on the neutral material’s chroma. The neutrals carry a temperature, never a colour.
NON_TEXT_MIN_CONTRAST
WCAG 2.1 non-text contrast (a pill’s edge, a toggle’s knob).
ON_FILL_MIN_CONTRAST
Minimum contrast a control’s label must clear against the control’s own fill (not the surface behind it).
PERMISSION_DENIED_SCRIM
PRESENCE_HUES
The presence palette’s hues, in OKLCH degrees: twelve evenly spaced, so neighbours sit 30° apart.
PRESENCE_LEN
How many hues the presence palette has.
REGION_MIN_STEP
Smallest OKLCH lightness step that separates a window region (sidebar, inspector) from the content ground by tone alone. A region tier closer to content than this draws a hairline on the edge they share instead (surface::region).
SMALL_TEXT_MIN_CONTRAST
Floor for text at the bottom of the type scale. A real anti-aliased glyph at 12px and below doesn’t reach WCAG’s ideal-glyph 4.5:1 — a label measured at 4.56:1 landed at 3.44:1 on screen. AAA leaves headroom to still clear AA once rendered.
STATUS_HUES
Status hues, in OKLCH degrees: danger, warning, success, info. A theme moves their lightness and chroma, never their meaning.
STATUS_MAX_CHROMA
Ceiling on status chroma: danger, warning and success are muted.
TINTED_LIFT_CHROMA
Chroma of the selection lift under Emphasis::Tinted.

Functions§

dark_overlays
The veneer tiers for a dark ground: white at 5 % / 10 % / 20 %.
light_overlays
The veneer tiers for a light ground: black at ≈ 6 % / 12 % / 24 %.
mix8
Straight (non-premultiplied) 8-bit sRGB mix — the space most widget draw paths blend in.
over
The opaque colour an opaque wash painted at alpha over ground leaves behind — contrast is a property of what reaches the screen, so a caller checking legibility on a washed row has to composite first.

Type Aliases§

OverlayTiers
The five state-veneer values for one theme, in tier order: (subtle, medium, strong, border_subtle, border_strong).