Color

The color roles every theme fills, how they're solved in OKLCH, and the contrast targets they meet.

Every theme fills the same roles. Components only ever read roles, so they never branch on a theme.

Each is a CSS variable named --gw-color-<role>.

Surface layers

The surfaces are layers, each a step lighter than the one below in both modes. Pick a surface by what a piece is, not by how it should look:

A small piece sitting on a surface, such as a key hint, takes a layer above it so it reads as lifted: surface-raised on a well or the page, and the overlay with 8% of text-primary mixed in on an overlay, where there’s no layer left.

Solved, not hand-set

A core theme has two inputs: a dark background and an accent. Everything else is solved in OKLCH, with derived colors mixed in OKLab:

• Surfaces keep the background’s hue and chroma, stepping lightness. Light mode carries the same tint at lower chroma.
• Text is solved along the surface hue until it reaches its contrast target.
• The accent keeps its hue and chroma and moves in lightness until it reaches 5:1.
• Status colors start from GitHub’s Markdown alert colors and are solved the same way.

Contrast targets

All measured on the raised surface, the lowest-contrast surface text sits on:

mise run check fails when a core theme misses one. The contrast report lists every ratio.

Status colors

GitHub’s Markdown alert set, so each has its own color, mapped onto the feedback roles and onto ANSI colors in terminals: