@cueplusplus/theme-tender

The tender palette for @cueplusplus/ui — measured from stripe.com on 2026-09-26: a soft violet accent on a near-white ground, whisper-thin borders, and a deep navy dark mode. Every value was read off the site's served stylesheet and recorded under this system's token names, not the site's. 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-tender @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="tender"], 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-tender/theme.css";

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

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

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

Both modes, both measured. The manifest is complete with supportsLight: true, so theme.css writes the whole colour contract four times over: [data-theme="tender"] for dark, [data-theme="tender"][data-mode="light"] for light, and both again for [data-mode="system"] inside a prefers-color-scheme query. Both blocks are the site's own tokens, resolved through its hds design-system chain and recorded under this contract's names. Four of the site's own status hues fail 3:1 on their own grounds as served — light ok, warn, busy and stream, and dark danger-fg and accent as text — so those roles move to the nearest step in the site's own ramp that clears the floor; the light sunken ground moves one step further from white than the site's own value, so it can be told apart from surface-1 (see Departures in MEASUREMENT.md).

The site's own geometry, at every rung. The site is roomier than the console ladder — 44→48px controls, 16px control and body text, a 6px card and a 4px popover — so the theme retunes those seven density tokens (control-sm/md/lg, text-ui, text-body, radius-surface, radius-overlay) at all five rungs, under [data-theme="tender"] in theme.css. normal is the measurement; the other four rungs are generated from it in proportion, and the build refuses any token that stops growing from ultra-compact to ultra-large. MEASUREMENT.md has the values.

Sources are src/tender.{dark,light}.tokens.json for colour and src/tender.{ultra-compact,compact,normal,large,ultra-large}.tokens.json for those density overrides — geometry only, and only the eight tokens a theme may retune; no type face appears 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. Each source's $extensions says which of the site's roles every value was read from.

No waived contrast pairs. Every required pair clears its floor in both modes, and theme.config.ts names no knownContrastFailures, so a retune that fails one refuses the build rather than shipping. MEASUREMENT.md in this package carries the full 26-name table for both modes, its sources, and every departure from the measurement with its reason.

What it refuses

A palette is colour, so most of what makes the site recognisable is not here, and some of it would not be even if it could be:

• The rest of the look. Type, rhythm and finish are the data-font, data-style and data-paint axes, set beside the theme rather than inside it. Söhne, the site's licensed display face, is refused outright: a licensee-only face from Klim Type Foundry cannot ship here at all.
• The site's identity. Its logos, its product illustrations and dashboards, its copy and its photography.
• Its imagery. The time-of-day aurora gradients, the hero wave canvas, and the two-layer blended headline.
• Its names. The site's own custom-property names (--hds-*) and the class that scopes them. 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 in the site's own stylesheet, 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.