Surfaces (dark & light)

Ordermatic is intentionally dual-surface: a dark “cockpit” frame (the rail, nav, dark panels) around a bright, scannable work surface. The design system models this with adaptive tokens that flip per surface — not a global light/dark toggle.

Live — same components, two surfaces

PrimaryOutlineGhost

Branch

HQWest DC

Mark as test order

Unread12West DCsubmitted

PrimaryOutlineGhost

Branch

HQWest DC

Mark as test order

Unread12West DCsubmitted

Nothing about the components changes between the columns. Only the wrapper differs.

How it works

Wrap a region in Surface (or set data-surface). That flips a small set of adaptive tokens and color-scheme for everything inside:

import { Surface } from '@repo/ui';

<Surface variant="dark">
  <Button variant="outline">Works on dark</Button>
</Surface>

Adaptive token	Light	Dark
--om-bg	workspace paper	ink-black
--om-panel	white	raised navy
--om-panel-2	subtle paper	ink
--om-text	ink	white
--om-text-2	grey	warm white
--om-text-muted	light grey	fog
--om-line	bone border	hairline
--om-hover	paper wash	white 6%

color-scheme rides along, so native controls (radio, checkbox, select) match their surface automatically — no dark widgets stranded on a light card.

Rules

• Build primitives on adaptive tokens (--om-text, --om-panel, --om-line…), not the fixed --om-surface-* / --om-fg-on-light-* primitives. That’s what makes them work anywhere.
• This is surface-scoped, not a user theme toggle — you opt a region into dark; content stays on the bright workspace by brand intent.
• Status colors stay fixed (system signals read on both surfaces). Card is the one component where you pick the surface explicitly (variant="dark").