@cueplusplus/theme-monolith

The monolith palette for @cueplusplus/ui — measured from cueplusplus.com on 2026-10-03: pure black and white with alpha-step greys, and a violet signal. Its dark mode was read off the source and recorded under this system's token names, not the source's; its light mode is authored from those anchors. A palette is a package here precisely so that it is not the only one: install several, register several, and a theme switcher is an array with more than one entry in it.

Install

The @cueplusplus scope is public on npm and resolves there by default, so there is nothing to configure and no credential to supply — it installs like any other package.

pnpm add @cueplusplus/theme-monolith @cueplusplus/theme-base

@cueplusplus/theme-base is the one peer this package declares, and it carries the token contract the palette is written against. A palette on its own paints nothing: install it beside @cueplusplus/ui and its own peers — §2 has that line.

Quick start

The theme stylesheet is the third import, and its position is load-bearing rather than tidy. A theme declares its colours under [data-theme="monolith"], which ties with the blank base's bare :root at the same specificity, so the one declared later wins. Put it before styles.css and the blank base paints over it.

/* app/globals.css */
@import "tailwindcss";
@import "@cueplusplus/ui/styles.css";
@import "@cueplusplus/theme-monolith/theme.css";

Then register the manifest. themes is the registry the provider may switch between; theme names the one that paints.

import monolith from "@cueplusplus/theme-monolith";
import { ThemeProvider } from "@cueplusplus/ui/system";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider themes={[monolith]} theme="monolith">
      {children}
    </ThemeProvider>
  );
}

Importing the package from its root, rather than reaching for its manifest.json subpath, also closes ThemeName to the themes you actually installed — so a misspelt theme value is a type error rather than a page that silently paints the blank base. Add prepaintScript() to <head> with the same themes array, so the first frame is not the defaults flashing past: §4 has it.

What it ships

| Subpath | What it is | | --- | --- | | @cueplusplus/theme-monolith | the manifest, as both the default export and manifest | | @cueplusplus/theme-monolith/theme.css | the palette — the only file a browser needs | | @cueplusplus/theme-monolith/variants.css | the density rungs and font pairings this theme adds. Empty: it adds none | | @cueplusplus/theme-monolith/manifest.json | the same manifest as JSON, for a tool that reads rather than imports | | @cueplusplus/theme-monolith/package.json | |

Dark is measured; light is authored. cueplusplus.com serves one dark mode, so monolith's light mode is its inverse: white paper, near-black ink, the alpha-step greys turned over and the violet deepened until it clears 3:1 as a ring. MEASUREMENT.md says exactly which rows are measured, which are authored and which depart from a measured value to clear a floor.

Sources are src/monolith.{dark,light}.tokens.json, colour only, plus five density overrides, src/monolith.<rung>.tokens.json: 12px interface text and 14px body copy at normal, the other rungs derived from it. No corner is overridden: the monolith style set squares every control and surface itself. theme.css carries them, keyed on data-theme="monolith" and the rung in force.

theme.css, variants.css, manifest.json, index.js and index.d.ts are written by cue-theme build and committed; prepack runs cue-theme check, which rebuilds all five in memory and refuses to publish if anything on disk has drifted. Each source's $extensions says which of the source's roles every measured value was read from, and says plainly where a mode departs from measurement into authorship.

No waived contrast pairs, and no advisory misses. Every required pair clears its floor in both modes, theme.config.ts names no knownContrastFailures, and it sets advisories: "fail": the focus and destructive rings clear 3:1 on every ground too, and a retune that sinks any of them refuses the build rather than shipping.

What it refuses

A palette is colour, so most of what makes the source recognisable is not here:

• The rest of the look. Type, rhythm, shape and finish are the data-font, data-style and data-paint axes, set beside the theme rather than inside it.
• The site's identity. Its wordmark, its particle logo and its copy. The particle field is a motif this library draws itself.
• Its names. The source's own custom-property names are not carried. The values are measurements; the names here are this system's.

Where the rest is

• The theming guide — https://ui.cueplusplus.com/docs/theming. The token vocabulary, the density and mode axes, the other presets, and createTheme() for a palette of your own.
• MEASUREMENT.md, in this package — every one of the 26 contract names in both modes, its source (measured or authored), and the contrast of every gated pair.
• docs/CONSUMING.md — registry access in full, the peer matrix per subpath, and the table of what a failed install means.
• CHANGELOG.md, in this package — one entry per release, addressed to you rather than to the diff, with a Migrating section on anything that needs an edit. Read it before an upgrade; the version number alone does not say what moved.