@cueplusplus/tokens 0.13.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CUE++ contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+# @cueplusplus/tokens
+
+The token layer under `@cueplusplus/ui`, for an app that needs the vocabulary by name rather than
+through a component: **five density rungs × eight font pairings**, authored as DTCG source and
+compiled to attribute-scoped CSS custom properties.
+
+Two of the system's three DOM axes live here, and they own strictly disjoint token sets:
+
+| axis | owns |
+| --- | --- |
+| `[data-density]` | geometry — control heights, radii, spacing, type sizes |
+| `[data-font]` | the three type stacks a pairing names |
+
+**Colour is not here.** The third axis, `[data-theme]`, left this package: a palette is a package
+of its own now (`@cueplusplus/theme-<name>`, and anybody else's), so there is no `THEMES` export,
+no `ThemeName`, and `dist/theme.css` is a deprecated alias of `axes.css` — kept through 0.10, and
+removed in the minor after. The blank palette an unstamped page paints lives in
+`@cueplusplus/theme-base`.
+
+## Install
+
+The `@cueplusplus` scope is served by **GitHub Packages**, not npmjs.com, and GitHub Packages
+authenticates *every* install. That is two settings, in two places, and the split is not
+cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
+with `401`.
+
+Commit the scope routing, and nothing else, at the root of your project:
+
+```ini
+# .npmrc
+@cueplusplus:registry=https://npm.pkg.github.com
+```
+
+Then write the credential once, at the **user** level, where pnpm reads it from. It is a
+**classic** personal access token with `read:packages` — GitHub Packages accepts neither
+fine-grained PATs nor OIDC:
+
+```sh
+pnpm config set //npm.pkg.github.com/:_authToken ghp_…
+```
+
+```sh
+pnpm add @cueplusplus/tokens
+```
+
+No peers and no dependencies: this package is generated data and eight lines of JavaScript. It
+also arrives as a dependency of `@cueplusplus/ui`, so an app that installs the components already
+has it — naming it in `package.json` just makes the constants importable in your own code.
+
+CI, Vercel and the token's expiry are in
+[`docs/CONSUMING.md` §1](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#1-registry-access).
+
+## Quick start
+
+An app importing `@cueplusplus/ui/styles.css` already has the axes as CSS; it needs this package
+by name only to stop restating what it exports.
+
+```ts
+import { DENSITIES, token } from "@cueplusplus/tokens";
+
+const ring = `1px solid ${token("focus")}`; // "1px solid var(--cue-focus)"
+const labels = DENSITIES.map((rung) => [rung, rung.replace(/-/g, " ")] as const);
+```
+
+`DENSITIES` is `["ultra-compact", "compact", "normal", "large", "ultra-large"]`, in ladder order.
+Derive a picker's labels and a stylesheet's rung list from it rather than writing either out: both
+go stale silently when the ladder changes, and nothing anywhere reports it.
+
+Without a bundler, the same thing in CSS is one import:
+
+```css
+@import "@cueplusplus/tokens/axes.css";
+```
+
+## What it ships
+
+| subpath | what it is |
+| --- | --- |
+| `@cueplusplus/tokens` | `DENSITIES`, `MODES`, `FONTS`, `FONT_PAIRINGS`, `FONT_FACES`, `COLOR_CONTRACT`, `GEOMETRY_CONTRACT`, `FONT_TOKENS`, the `DEFAULT_*` values, `faceProperty()` and `token()` |
+| `./axes.css` | the two axes as CSS, with no colour in them |
+| `./tailwind.css` | the Tailwind v4 `@theme inline` mapping layer |
+| `./theme.css` | a deprecated alias of `./axes.css`: kept through 0.10, removed in the minor after |
+| `./base.json` | the same axes as data, for a theme built outside this build |
+| `./primitives.tokens.json` | the tier-1 palette a theme source aliases |
+| `./registry/token-layer.json` | the theme-independent half of the layer as a shadcn *fragment* — folded into a registry base item, not installable on its own |
+
+The root entry is `dist/tokens.js` with `dist/tokens.d.ts` beside it — plain JavaScript, because
+Node refuses to strip types for anything under `node_modules` and a `.ts` entry is one a
+registry consumer cannot load.
+
+Everything here is generated by `build.mjs` from `src/**.tokens.json`. Edit the sources, never
+`dist/`.
+
+## Where the rest is
+
+- Installing and using it from another project: [`docs/CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md)
+- The density ladder, and what moves on each rung: <https://ui.cueplusplus.com/docs/density>
+- The eight pairings, and which five your app has to deliver: <https://ui.cueplusplus.com/docs/typefaces>
+- The `--cue-*` contract and how a theme fills it: <https://ui.cueplusplus.com/docs/theming>
+- What changed in the version you have: `node_modules/@cueplusplus/tokens/CHANGELOG.md`

package/dist/axes.css

@@ -0,0 +1,324 @@
+/*! @cueplusplus/tokens — the density, font and style axes, with no theme — pair with a theme package
+ * Generated by build.mjs from src/**.tokens.json. Do not edit by hand.
+ */
+
+:root {
+  /* base — type, motion and the geometry that is frozen across densities */
+  --cue-border-width: 1px;
+  --cue-border-width-hairline: 0.5px;
+  --cue-focus-ring: 2px;
+  --cue-focus-ring-offset: 1px;
+  --cue-radius-full: 9999px;
+  --cue-icon-stroke: 1.5;
+  --cue-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
+  --cue-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --cue-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-tracking-label: 0.12em;
+  --cue-transition-fast: 120ms;
+  --cue-transition-base: 180ms;
+  --cue-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* density: compact (default) */
+  --cue-control-sm: 1.25rem;
+  --cue-control-md: 1.5rem;
+  --cue-control-lg: 1.75rem;
+  --cue-chip-h: 1.125rem;
+  --cue-icon-sm: 0.625rem;
+  --cue-icon-md: 0.75rem;
+  --cue-text-micro: calc(0.5rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.5625rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(0.625rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(0.6875rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(0.875rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1.125rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 3px;
+  --cue-radius-surface: 6px;
+  --cue-radius-overlay: 8px;
+  --cue-pad-row-y: 0.25rem;
+  --cue-pad-row-x: 0.5rem;
+  --cue-space-1: 0.125rem;
+  --cue-space-2: 0.25rem;
+  --cue-space-3: 0.375rem;
+  --cue-space-4: 0.5rem;
+  --cue-space-5: 0.75rem;
+  --cue-space-6: 1rem;
+  --cue-space-7: 1.5rem;
+  --cue-space-8: 2rem;
+  --cue-chrome-toolbar: 2.25rem;
+  --cue-chrome-statusbar: 1.5rem;
+  --cue-chrome-titlebar: 2.375rem;
+  --cue-density: 1;
+  --cue-radius-scale: 1;
+
+  /* style — reading measure, prose line height and band composition; a style set overrides these */
+  --cue-band-y: var(--cue-space-7);
+  --cue-band-rule: var(--cue-border-width);
+  --cue-band-ground: transparent;
+  --cue-leading-prose: 1.625;
+  --cue-leading-ui: 1.625;
+  --cue-measure-narrow: 42rem;
+  --cue-measure-wide: 54rem;
+  --cue-measure-broad: 84rem;
+  --cue-measure-prose: 68ch;
+}
+
+/* ── density axis — geometry only ─────────────────────────────────── */
+
+[data-density="ultra-compact"] {
+  --cue-control-sm: 1.125rem;
+  --cue-control-md: 1.25rem;
+  --cue-control-lg: 1.5rem;
+  --cue-chip-h: 1rem;
+  --cue-icon-sm: 0.625rem;
+  --cue-icon-md: 0.625rem;
+  --cue-text-micro: calc(0.5rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.5rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(0.5625rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(0.625rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(0.8125rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 2px;
+  --cue-radius-surface: 4px;
+  --cue-radius-overlay: 6px;
+  --cue-pad-row-y: 0.125rem;
+  --cue-pad-row-x: 0.375rem;
+  --cue-space-1: 0.125rem;
+  --cue-space-2: 0.125rem;
+  --cue-space-3: 0.25rem;
+  --cue-space-4: 0.375rem;
+  --cue-space-5: 0.5rem;
+  --cue-space-6: 0.75rem;
+  --cue-space-7: 1rem;
+  --cue-space-8: 1.5rem;
+  --cue-chrome-toolbar: 2rem;
+  --cue-chrome-statusbar: 1.375rem;
+  --cue-chrome-titlebar: 2.25rem;
+  --cue-density: 0.85;
+  --cue-radius-scale: 0.75;
+}
+
+[data-density="compact"] {
+  --cue-control-sm: 1.25rem;
+  --cue-control-md: 1.5rem;
+  --cue-control-lg: 1.75rem;
+  --cue-chip-h: 1.125rem;
+  --cue-icon-sm: 0.625rem;
+  --cue-icon-md: 0.75rem;
+  --cue-text-micro: calc(0.5rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.5625rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(0.625rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(0.6875rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(0.875rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1.125rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 3px;
+  --cue-radius-surface: 6px;
+  --cue-radius-overlay: 8px;
+  --cue-pad-row-y: 0.25rem;
+  --cue-pad-row-x: 0.5rem;
+  --cue-space-1: 0.125rem;
+  --cue-space-2: 0.25rem;
+  --cue-space-3: 0.375rem;
+  --cue-space-4: 0.5rem;
+  --cue-space-5: 0.75rem;
+  --cue-space-6: 1rem;
+  --cue-space-7: 1.5rem;
+  --cue-space-8: 2rem;
+  --cue-chrome-toolbar: 2.25rem;
+  --cue-chrome-statusbar: 1.5rem;
+  --cue-chrome-titlebar: 2.375rem;
+  --cue-density: 1;
+  --cue-radius-scale: 1;
+}
+
+[data-density="normal"] {
+  --cue-control-sm: 1.75rem;
+  --cue-control-md: 2rem;
+  --cue-control-lg: 2.25rem;
+  --cue-chip-h: 1.375rem;
+  --cue-icon-sm: 0.75rem;
+  --cue-icon-md: 1rem;
+  --cue-text-micro: calc(0.5625rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.625rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(0.75rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(0.8125rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(1.0625rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1.375rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 4px;
+  --cue-radius-surface: 8px;
+  --cue-radius-overlay: 10px;
+  --cue-pad-row-y: 0.375rem;
+  --cue-pad-row-x: 0.75rem;
+  --cue-space-1: 0.25rem;
+  --cue-space-2: 0.375rem;
+  --cue-space-3: 0.5rem;
+  --cue-space-4: 0.75rem;
+  --cue-space-5: 1rem;
+  --cue-space-6: 1.5rem;
+  --cue-space-7: 2rem;
+  --cue-space-8: 3rem;
+  --cue-chrome-toolbar: 2.75rem;
+  --cue-chrome-statusbar: 1.75rem;
+  --cue-chrome-titlebar: 3rem;
+  --cue-density: 1.3;
+  --cue-radius-scale: 1;
+}
+
+[data-density="large"] {
+  --cue-control-sm: 2.25rem;
+  --cue-control-md: 2.5rem;
+  --cue-control-lg: 2.75rem;
+  --cue-chip-h: 1.625rem;
+  --cue-icon-sm: 0.875rem;
+  --cue-icon-md: 1.25rem;
+  --cue-text-micro: calc(0.625rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.6875rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(0.875rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(0.9375rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(1.25rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1.625rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 5px;
+  --cue-radius-surface: 10px;
+  --cue-radius-overlay: 12px;
+  --cue-pad-row-y: 0.5rem;
+  --cue-pad-row-x: 1rem;
+  --cue-space-1: 0.375rem;
+  --cue-space-2: 0.5rem;
+  --cue-space-3: 0.75rem;
+  --cue-space-4: 1rem;
+  --cue-space-5: 1.5rem;
+  --cue-space-6: 2rem;
+  --cue-space-7: 3rem;
+  --cue-space-8: 4rem;
+  --cue-chrome-toolbar: 3.25rem;
+  --cue-chrome-statusbar: 2rem;
+  --cue-chrome-titlebar: 3.5rem;
+  --cue-density: 1.6;
+  --cue-radius-scale: 1;
+}
+
+[data-density="ultra-large"] {
+  --cue-control-sm: 2.75rem;
+  --cue-control-md: 3rem;
+  --cue-control-lg: 3.25rem;
+  --cue-chip-h: 1.875rem;
+  --cue-icon-sm: 1rem;
+  --cue-icon-md: 1.5rem;
+  --cue-text-micro: calc(0.6875rem * var(--cue-font-scale, 1));
+  --cue-text-label: calc(0.75rem * var(--cue-font-scale, 1));
+  --cue-text-ui: calc(1rem * var(--cue-font-scale, 1));
+  --cue-text-body: calc(1.0625rem * var(--cue-font-scale, 1));
+  --cue-text-emphasis: calc(1.4375rem * var(--cue-font-scale, 1));
+  --cue-text-title: calc(1.875rem * var(--cue-font-scale, 1));
+  --cue-radius-control: 6px;
+  --cue-radius-surface: 12px;
+  --cue-radius-overlay: 14px;
+  --cue-pad-row-y: 0.625rem;
+  --cue-pad-row-x: 1.25rem;
+  --cue-space-1: 0.5rem;
+  --cue-space-2: 0.75rem;
+  --cue-space-3: 1rem;
+  --cue-space-4: 1.5rem;
+  --cue-space-5: 2rem;
+  --cue-space-6: 3rem;
+  --cue-space-7: 4rem;
+  --cue-space-8: 6rem;
+  --cue-chrome-toolbar: 3.75rem;
+  --cue-chrome-statusbar: 2.25rem;
+  --cue-chrome-titlebar: 4rem;
+  --cue-density: 1.9;
+  --cue-radius-scale: 1;
+}
+
+@media (pointer: coarse) {
+  [data-density="ultra-compact"] {
+    --cue-control-sm: 1.25rem;
+    --cue-control-md: 1.5rem;
+    --cue-control-lg: 1.75rem;
+  }
+}
+
+/* ── font axis — type only; the mono handshake is settled by var() fallback, not by order ── */
+
+[data-font="system"] {
+  --cue-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
+  --cue-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: initial;
+  --cue-font-mono: var(--cue-font-theme-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+}
+
+[data-font="geist"] {
+  --cue-font-sans: var(--cue-face-geist, Geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-display: var(--cue-face-geist, Geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: var(--cue-face-jetbrains-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="inter"] {
+  --cue-font-sans: var(--cue-face-inter, Inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-display: var(--cue-face-inter, Inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: var(--cue-face-ibm-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="plex"] {
+  --cue-font-sans: var(--cue-face-ibm-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-display: var(--cue-face-ibm-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: var(--cue-face-ibm-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="roboto"] {
+  --cue-font-sans: var(--cue-face-roboto, Roboto), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-display: var(--cue-face-roboto, Roboto), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: var(--cue-face-roboto-mono, "Roboto Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="source"] {
+  --cue-font-sans: var(--cue-face-source-sans-3, "Source Sans 3"), "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-display: var(--cue-face-source-sans-3, "Source Sans 3"), "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cue-font-pairing-mono: var(--cue-face-source-code-pro, "Source Code Pro"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="apple"] {
+  --cue-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, ui-sans-serif, sans-serif;
+  --cue-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, ui-sans-serif, sans-serif;
+  --cue-font-pairing-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+[data-font="office"] {
+  --cue-font-sans: Calibri, Carlito, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --cue-font-display: Calibri, Carlito, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --cue-font-pairing-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, SFMono-Regular, monospace;
+  --cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
+}
+
+/* ── style axis — page composition; `console` restates the :root defaults, which is what makes it a no-op ── */
+
+[data-style="console"] {
+  --cue-measure-prose: 68ch;
+  --cue-leading-prose: 1.625;
+  --cue-band-y: var(--cue-space-7);
+  --cue-band-rule: var(--cue-border-width);
+  --cue-band-ground: transparent;
+}
+
+[data-style="editorial"] {
+  --cue-measure-prose: 74ch;
+  --cue-leading-prose: 1.75;
+  --cue-band-y: calc(var(--cue-space-7) * 2);
+  --cue-band-rule: var(--cue-border-width-hairline);
+  --cue-band-ground: transparent;
+  --cue-style-display: calc(3.25rem * var(--cue-font-scale, 1));
+}
+
+[data-style="marketing"] {
+  --cue-measure-prose: 60ch;
+  --cue-leading-prose: 1.6;
+  --cue-band-y: calc(var(--cue-space-7) * 3);
+  --cue-band-rule: 0px;
+  --cue-band-ground: var(--cue-surface-1);
+  --cue-style-display: calc(4rem * var(--cue-font-scale, 1));
+}