@cueplusplus/theme-venu

The venu palette for @cueplusplus/ui — stagetool's neutral #181818-family ramp under a saturated orange accent, with border-overlay set equal to a surface so overlay rims vanish. 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-venu @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="venu"], 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-venu/theme.css";

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

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider themes={[venu]} theme="venu">
      {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-venu | the manifest, as both the default export and manifest | | @cueplusplus/theme-venu/theme.css | the palette — the only file a browser needs | | @cueplusplus/theme-venu/variants.css | the density rungs and font pairings this theme adds. Empty: it adds none | | @cueplusplus/theme-venu/manifest.json | the same manifest as JSON, for a tool that reads rather than imports | | @cueplusplus/theme-venu/package.json | |

Both modes. The manifest is complete with supportsLight: true, so theme.css writes the whole colour contract four times over: [data-theme="venu"] for dark, [data-theme="venu"][data-mode="light"] for light, and both again for [data-mode="system"] inside a prefers-color-scheme query.

Fonts: one, the monospace. The theme block sets its own stack and then hands it to the pairing axis:

--cue-font-theme-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));

The second line is the handshake, and it is why the first is safe: a data-font pairing stamped on an ancestor wins over the theme's stack, which in turn wins over the base's.

Sources are src/venu.{dark,light}.tokens.json, colour and type only — no geometry token may appear in a theme. 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.

The light block is synthesized and provisional — stagetool ships dark only — and it carries the venu rule across: border-overlay equals surface-3 there too.

Two waived contrast failures, one per mode, and they are the same decision twice: accent-fg/accent at 2.67:1 in dark and 3.48:1 in light, against a floor of 4.5. Both are white on the orange. theme.config.ts names each with its reason, and cue-theme build refuses any failure that is not named there — as it refuses a waiver naming a pair the report does not fail, because a list that can only rot in one direction always does.

@cueplusplus/tokens no longer emits any palette: this package is where the venu colours live. packages/release/test/theme-packages.test.mjs holds this directory's theme.css against packages/release/test/fixtures/pre-migration/venu.css — the stylesheet @cueplusplus/[email protected] actually shipped — byte for byte after the banner, so "the migration moved no colour" stays a thing a gate proves rather than a thing a changelog claims.

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.
• 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.