@oprt/tokens

The OPERATOR design tokens as CSS custom properties: the Bone theme colors, spacing, control sizes, type, tracking, motion, chart ink, base element styles and the OPERATOR Sans and Mono variable fonts. Everything is plain CSS, so it works with any framework or none.

import "@oprt/tokens";

Import it once at the application root. Every entry point below ships a type declaration, so the import type-checks as written, including under TypeScript 6 and later, which check imports that exist only for their side effects. Bone is the only theme and it is dark-only: the default import sets color-scheme: dark, so scrollbars, select popups and form-control chrome follow the page. The Tailwind utilities in @oprt/tailwind resolve to these properties, so install both.

Exports

| Import | Contains | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | @oprt/tokens | Everything below, in order: fonts, structural tokens, Bone colors, base styles | | @oprt/tokens/structural | Spacing, control sizes, type, tracking, weights, borders, chart ink, motion and font families, plus the prefers-reduced-motion overrides | | @oprt/tokens/bone | The Bone colors: surfaces, borders, text, accent, semantic, series and state tokens, and color-scheme: dark | | @oprt/tokens/fonts | The @font-face rules for the four variable font files | | @oprt/tokens/fonts/* | The font files and their notices, for example @oprt/tokens/fonts/operator-sans-variable.woff2 | | @oprt/tokens/base | Box sizing, the zero border radius, the document font and color, and ligature-free code |

Selective imports are for an application that needs only part of the set. Add @oprt/tokens/fonts once if you import the structural or Bone stylesheet on its own, or the font families resolve to their system fallbacks.

Tokens

Every property is named --oprt-<family>-<step>.

• Color (bone): --oprt-bg, --oprt-surface-1 to -6, --oprt-border-subtle, --oprt-border and --oprt-border-strong for layout lines, --oprt-border-control for the boundary of a control (3:1 against its surface), --oprt-text*, --oprt-accent*, the success, warning, error and info roles with -subtle and -strong, --oprt-cat-1 to -8, --oprt-data-seq-1 to -5, and the translucent state layers --oprt-surface-hover, -active and -selected.
• Layout and size (structural): --oprt-space-* (a 4px half step and an 8px grid), --oprt-height-sm|md|lg (24, 32 and 40px controls), the badge, table and track sizes.
• Type (structural): --oprt-type-*, --oprt-line-*, --oprt-tracking-* and --oprt-weight-* for the xs to 2xl steps, and --oprt-font-sans and --oprt-font-mono.
• Borders: --oprt-border-width is 1px and --oprt-border-radius is 0px, everywhere.
• Motion: --oprt-duration-*, --oprt-motion-* roles, easing and scale tokens. Under prefers-reduced-motion: reduce every time token is 0ms and the press and surface scales are 1.

The color foundations page documents each value and where it may be used as text. Contrast is measured, not claimed: see below.

Contrast and separation

pnpm verify:contrast reads the shipped CSS and checks, by token name:

• text roles on all seven surfaces, and on the hover, active and selected layers and the two accent washes (--oprt-accent-ghost, --oprt-accent-bg), against an allowed-text matrix (--oprt-text-dim is not allowed on surfaces 5 and 6);
• focus, the control outline (--oprt-border-control), affiliation swatches and chart marks against their surfaces;
• that every Bone color stays at least 13 CIEDE2000 from all fifteen affiliation colors in @oprt/tokens-operational, so UI chrome cannot be mistaken for map symbology. --oprt-error and --oprt-info sit closer and are pinned so they cannot get worse.

The same checks run in this package's tests, with the pair tables in src/contrast-gate.mjs.

Fonts and license

The package ships OPERATOR Sans and OPERATOR Mono, Geist-derived variable fonts, in dist/fonts, with their license and source notices (fonts/OFL.txt, fonts/README.txt). The CSS and code are MIT. The fonts are under the SIL Open Font License 1.1: keep those notices when you redistribute them.

Building

pnpm --filter @oprt/tokens build copies src/*.css and src/fonts into dist. The package owns the font files: src/fonts is the canonical copy and apps/docs/public mirrors it (a test keeps the two identical). The build needs nothing outside this directory.

node scripts/build-css.mjs --out-dir <directory> builds somewhere else. It refuses this package, anything that contains it, src and scripts, and any directory that is not empty unless an earlier run wrote it.