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;- the accent (
Intents::accent,Intents::accent_ink): one hue, by default the person’s own colour (Emphasis::You), for primary actions, links, the focus ring, the caret, the text selection and the selected row’s tint; - the on state (
Intents::on_state): green, for what is switched on; SemanticColors: muted status (danger, warning, success, info).
Nothing else gains colour: hover, grips, window edges, icons at rest, sliders and progress are neutral.
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§
- Color
Ramp - Colors
- Intents
- What controls paint with, by intent rather than by hue
(
docs/design-language.md, “Colour roles”). Nothing outside these roles gets colour: the accent is for primary actions, links, the focus ring, the caret, the text selection and the selected row’s tint; the on state is for a switch, a checked box or radio, an active tile, a “connected” dot. Hover, resize grips, window edges, icons at rest, sliders and progress stay neutral. - Media
Colors - 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.
- Presence
Palette - One colour per participant:
PRESENCE_HUESat 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. - Semantic
Colors - 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 the hueColors::with_neutral_huesets. - Tinted
Chip - 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
- Which hue the accent takes: primary actions, the selected row’s lift
tint, links, the focus ring, the caret and the text selection
(
docs/design-language.md, “Colour roles”). An “on” state is never the accent; it is the on-state green (crate::tokens::Intents::on_state). - Presence
Hue - One of the twelve presence hues: a person’s colour, as they choose it.
- Wash
Strength - How strongly a
Colors::wash_onstatus wash shows.
Constants§
- FLOATING_
EDGE_ MIN_ DELTA - How far a floating surface’s inner hairline (white at 7 % on a dark
material, black at 8 % on a light one,
docs/design-language.md, “Surfaces”) moves its fill. Quieter thanHAIRLINE_MIN_DELTAby design: a floating surface separates by its level, its two-layer shadow and this hairline together, and a brighter line read as a frame drawn around the panel. - 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.
- IDLE_
CHROMA - How much of a person’s chroma their face keeps while they are idle or
away (
PresencePalette::idle_on): enough to tell whose face it is, little enough to read as quieter than everyone present. - IDLE_
FADE - How far toward the ground an idle face’s colour moves at most
(
PresencePalette::idle_on), as a share of the way. - 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::overlayat 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_fillmay 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).
- ON_
STATE_ HUE - The OKLCH hue of the on state: green.
- 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). - SEE_
THROUGH_ ALPHA - Stock opacity of the see-through material (
Surfaces::see_through_opacity): half. Chrome over pixels the person is choosing (the capture bar and its selection controls) must leave those pixels visible, unblurred. - SELECTED_
LIFT_ T - How far a selection lifts its ground, in surface steps
(
Colors::lift_on). Past the hover and press lift so a selected row moves the dark window’s ground by at leastHAIRLINE_MIN_DELTAand stands clear of a table’s zebra stripe on every ground. - 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.
- SURFACE_
LIGHT - The light a surface catches: the specular sheen across a glass body and
the rim lit along its edge (
crate::tokens::Colors::light, read by the Glass painter set). - TINTED_
LIFT_ CHROMA - Chroma of the selection lift under an accent (
Emphasis::YouandEmphasis::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.
- nearest_
presence_ hue - The presence hue nearest to
colour’s, for a colour that arrives from outside (a host’s accent, a roster’s packed colour). A grey has no hue and givesNone. - over
- The opaque colour an opaque
washpainted atalphaovergroundleaves 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§
- Overlay
Tiers - The five state-veneer values for one theme, in tier order:
(subtle, medium, strong, border_subtle, border_strong).