@cueplusplus/theme-soft

The soft palette for @cueplusplus/ui: a neutral grey ramp under a violet-blue accent, in both modes, from Agent Comms' approved redesign. Surfaces step a few points apart, the inks run in three quiet steps, and the corners are rounder than the library's default: 14px on a surface and 8px on a control at the normal rung. It is the palette half of the docs site's Soft Look. The composition half is the soft style set in @cueplusplus/tokens: sans labels, panels with no rim and no header rule, and a gliding movement curve.

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-soft @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="soft"], 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-soft/theme.css";

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

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider themes={[soft]} theme="soft">
      {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.

For the whole Look, name the style set, the pairing and the paint pack beside the theme:

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

export function SoftLook({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider themes={[soft]} theme="soft" styleSet="soft" font="inter" paint="glaze">
      {children}
    </ThemeProvider>
  );
}

On macOS, font="apple" sets it in SF Pro and SF Mono instead.

What it ships

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

Both modes. The manifest is complete with supportsLight: true.

| Role | Dark | Light | | --- | --- | --- | | bg / sunken | #0e0e10 / #09090b | #f7f7f8 / #efeff2 | | surface-1..3 | #18181b, #1f1f23, #28282d | #ffffff, #f3f3f5, #e8e8ec | | fg / fg-muted / fg-subtle | #ededf0 / #a1a1aa / #8e8e97 | #18181b / #52525b / #686871 | | accent / accent-hover | #8a90f8 / #a3a8fa | #4c52d3 / #3f45bf | | ok / warn / danger | #4ade80 / #f5b454 / #f87171 | #15803d / #a15c07 / #c2410c | | info / stream | #60a5fa / #c084fc | #2563eb / #9333ea | | focus / busy | the accent | the accent |

Three of the mockup's values moved the smallest step that clears 4.5:1, so that every ink holds 4.5:1 on every surface it is drawn on: light accent (#5157e0 → #4c52d3, for the accent label on its own 14% accent-soft over the page), and fg-subtle in both modes, for surface-3.

Corners per density rung. normal is the mockup's 14px surface and 8px control; the other four rungs are those two scaled by the base ladder's own ratios, so picking a rung moves soft's corners the way it moves every other theme's. Type stays the base ladder's.

Derived roles mix in sRGB (colorMix: "srgb"), as theme-quotamate-desktop's do, because a Tauri app's macOS WKWebView draws near-neutral oklch mixes with a cast.

Sources are src/soft.{dark,light}.tokens.json, colour only, and src/soft.<rung>.tokens.json, geometry only.

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 contrast gate is not advisory. Every required pair must clear its floor, or the build refuses, and this package builds with advisories: "fail", so the focus and destructive rings on every ground are held to 3:1 too. It ships with no waiver.

Where the rest is

• The theming guide — https://ui.cueplusplus.com/docs/theming. The token vocabulary this palette fills in, the density and mode axes, and the presets it can sit beside.
• 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 your consumers rather than to the diff, with a Migrating section on anything that needs an edit. A version number alone does not say what moved.