@apliteni/apliteni-ui 0.2.4 → 0.4.0

package/README.md

@@ -9,7 +9,7 @@ and light with **accent sub-themes**. Showcased and reviewed in **Storybook**, a
 published on **ui.apli.tech**.
 
 - 🎨 **Live site + Storybook** → [ui.apli.tech](https://ui.apli.tech)
-- 📦 **Package** → `@apliteni/apliteni-ui` (GitHub Packages)
+- 📦 **Package** → [`@apliteni/apliteni-ui`](https://www.npmjs.com/package/@apliteni/apliteni-ui) (public npm)
 
 ## Why HTML + CSS (not React)
 
@@ -21,25 +21,12 @@ of truth — the portal imports it with no rewrite and no framework drift. Story
 
 ## Install
 
-The package lives in **GitHub Packages** (private to the `apliteni` org). Point the
-`@apliteni` scope at it and authenticate with a GitHub token that has `read:packages`.
-
-`.npmrc` in the consuming repo:
-
-```
-@apliteni:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
-```
-
-Then:
+Published on the **public npm registry** — no scope config, no token:
 
 ```bash
-NODE_AUTH_TOKEN=$(gh auth token) npm install @apliteni/apliteni-ui
+npm install @apliteni/apliteni-ui
 ```
 
-In CI, `NODE_AUTH_TOKEN` is the workflow's `GITHUB_TOKEN`. In Docker, pass it as a
-build secret (see the strategy portal's Dockerfile for the pattern).
-
 ## Use it
 
 ```js
@@ -117,15 +104,15 @@ site/                    # ui.apli.tech landing page + static server
 ## Develop
 
 ```bash
-NODE_AUTH_TOKEN=$(gh auth token) npm install
+npm install
 npm run storybook          # http://localhost:6006
 npm run build-storybook    # -> storybook-static/
 node site/build.mjs        # -> site/public/ (landing + kit.css)
 ```
 
-## Publish (GitHub Packages)
+## Publish (public npm)
 
-Versioned publish runs from CI on a GitHub Release:
+Versioned publish runs from CI on a GitHub Release (needs the `NPM_TOKEN` secret):
 
 ```bash
 npm version patch          # or minor / major — bumps package.json + tags

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "description": "Apliteni shared design system & UI kit — tokens, components and the deck theme, framework-agnostic (HTML + CSS).",
   "type": "module",
   "license": "UNLICENSED",
@@ -43,6 +43,8 @@
     "@storybook/blocks": "^8.6.14",
     "@storybook/html": "^8.6.14",
     "@storybook/html-vite": "^8.6.14",
+    "axe-core": "^4.12.1",
+    "jsdom": "^29.1.1",
     "storybook": "^8.6.14",
     "vite": "^5.4.11"
   }

package/src/assets/icons.js

@@ -25,6 +25,9 @@ const P = {
   search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
   globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>',
   sparkle: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2"/>',
+  card: '<rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/>',
+  doc: '<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h5"/>',
+  chart: '<path d="M3 3v18h18"/><path d="M8 17v-5M13 17V8M18 17v-8"/>',
 };
 
 export const icon = (name, cls = '') =>

package/src/components/index.js

@@ -48,6 +48,28 @@ export function card({ title, sub, body = '', variant, pad, icon: ic } = {}) {
   return `<div class="${cls}">${head}${body}</div>`;
 }
 
+// ---- Aurora — ambient warm backdrop --------------------------------------
+// Layered blurred glow "blobs" + optional paper grain. Colours default to the
+// accent glow tokens, so the field re-themes with the sub-theme. Drop it as the
+// first child of a positioned wrapper (or use fixed: true for full-bleed) and
+// give the real content a normal stacking context — it sits on top.
+const AURORA_PRESET = [
+  { tone: 'accent', x: '22%', y: '12%', size: '64%', delay: '0s' },
+  { tone: 'teal',   x: '84%', y: '24%', size: '56%', delay: '-9s' },
+  { tone: 'warm',   x: '54%', y: '92%', size: '70%', delay: '-17s' },
+];
+export function aurora({ blobs = AURORA_PRESET, grain = false, fixed = false, animated = true, className = '' } = {}) {
+  const items = blobs.map((b) => {
+    const tone = b.tone || 'accent';
+    const style = `--au-x:${b.x ?? '50%'};--au-y:${b.y ?? '50%'};--au-size:${b.size ?? '60%'}`
+      + (b.delay != null ? `;--au-delay:${b.delay}` : '');
+    return `<span class="ui-aurora__blob ui-aurora__blob--${tone}" style="${style}"></span>`;
+  }).join('');
+  const grainEl = grain ? '<span class="ui-aurora__grain"></span>' : '';
+  const cls = cx('ui-aurora', animated && 'ui-aurora--animated', fixed && 'ui-aurora--fixed', className);
+  return `<div class="${cls}" aria-hidden="true">${items}${grainEl}</div>`;
+}
+
 // ---- Segmented control ---------------------------------------------------
 export function segmented({ options = [], active = 0, size, block, name = 'seg' } = {}) {
   const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
@@ -73,16 +95,57 @@ export function accentPicker({ active = 'default', options = ['default', 'phoeni
 }
 
 // ---- Field / input -------------------------------------------------------
-export function field({ label, hint, error, control } = {}) {
-  return `<div class="ui-field">${label ? `<label class="ui-field__label">${esc(label)}</label>` : ''}${control || ''}${error ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>` : hint ? `<div class="ui-field__hint">${esc(hint)}</div>` : ''}</div>`;
+// Auto-generated ids let field() tie its <label for> to the control it wraps.
+// A module counter (never Date/random) keeps ids unique within a rendered page.
+let _uid = 0;
+const nextId = (p = 'ui') => `${p}-${++_uid}`;
+// Give the first form control in `html` an id (or reuse one it already carries)
+// so a <label> can point at it. Returns { html, id }; id is null if there's no
+// form element to name.
+function withControlId(html) {
+  const existing = html.match(/<(?:input|textarea|select)\b[^>]*\bid="([^"]+)"/);
+  if (existing) return { html, id: existing[1] };
+  let id = null;
+  const out = html.replace(/<(input|textarea|select)\b/, (m) => { id = nextId('field'); return `${m} id="${id}"`; });
+  return { html: out, id };
 }
-export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, name } = {}) {
-  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${name ? ` name="${name}"` : ''}${disabled ? ' disabled' : ''}>`;
+
+export function field({ label, hint, error, control = '', id } = {}) {
+  let ctl = control;
+  let forId = id;
+  if (label && control) {
+    const r = withControlId(control);
+    ctl = r.html;
+    forId = id || r.id;
+  }
+  const lab = label
+    ? `<label class="ui-field__label"${forId ? ` for="${forId}"` : ''}>${esc(label)}</label>`
+    : '';
+  const foot = error
+    ? `<div class="ui-field__error">${icon('alert')}${esc(error)}</div>`
+    : hint ? `<div class="ui-field__hint">${esc(hint)}</div>` : '';
+  return `<div class="ui-field">${lab}${ctl}${foot}</div>`;
+}
+// `ariaLabel` gives a standalone control (no wrapping field) an accessible name.
+export function input({ type = 'text', placeholder = '', value = '', icon: ic, invalid, disabled, name, id, ariaLabel } = {}) {
+  const attrs = `${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}`;
+  const el = `<input class="${cx('ui-input', invalid && 'is-invalid')}" type="${type}" placeholder="${esc(placeholder)}" value="${esc(value)}"${attrs}>`;
   if (!ic) return el;
   return `<div class="ui-input-group"><span class="ui-input-group__icon">${icon(ic)}</span>${el}</div>`;
 }
-export function textarea({ placeholder = '', value = '', rows = 4 } = {}) {
-  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}">${esc(value)}</textarea>`;
+export function textarea({ placeholder = '', value = '', rows = 4, name, id, ariaLabel } = {}) {
+  return `<textarea class="ui-textarea" rows="${rows}" placeholder="${esc(placeholder)}"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}>${esc(value)}</textarea>`;
+}
+// Native <select>. Pass a `label` via field() or an `ariaLabel` for a bare one —
+// a select with neither has no accessible name.
+export function select({ options = [], value, name, id, ariaLabel, disabled } = {}) {
+  const opts = options.map((o) => {
+    const label = typeof o === 'string' ? o : o.label;
+    const val = typeof o === 'string' ? o : (o.value ?? o.label);
+    const sel = value != null && String(val) === String(value);
+    return `<option value="${esc(val)}"${sel ? ' selected' : ''}>${esc(label)}</option>`;
+  }).join('');
+  return `<select class="ui-select"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${name}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}>${opts}</select>`;
 }
 export function checkbox({ label, checked, type = 'checkbox', name } = {}) {
   return `<label class="ui-check"><input type="${type}"${name ? ` name="${name}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;

package/src/components/shell.js

@@ -13,8 +13,8 @@ export const ACCOUNT_NAV = [
   ['access', 'key', 'Access & agents'],
 ];
 
-const sidebar = (nav, active) =>
-  `<nav class="ui-side"><div class="cap">Account</div>` +
+const sidebar = (nav, active, cap = 'Account') =>
+  `<nav class="ui-side"><div class="cap">${cap}</div>` +
   nav.map(([id, ic, label, href, target]) =>
     `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''}${id === active ? ' class="on"' : ''}>${icon(ic)}${label}</a>`).join('') +
   `<div class="ssep"></div><a class="out" href="#logout">${icon('logout')}Sign out</a></nav>`;
@@ -25,6 +25,8 @@ export function accountShell({
   account = {},
   nav = ACCOUNT_NAV,
   active = 'prefs',
+  cap = 'Account',
+  showSwitch = false,
   crumb,
   title = '',
   sub = '',
@@ -32,11 +34,11 @@ export function accountShell({
 } = {}) {
   return `<div style="position:relative;overflow:hidden;min-height:100vh">
     <span class="ui-glow ui-glow--purple" style="top:-120px;right:6%;opacity:.35"></span>
-    ${topbar({ word, view: 'text', versions, account: { ...account, active, nav } })}
+    ${topbar({ word, view: 'text', showSwitch, versions, account: { ...account, active, nav } })}
     <div class="ui-shell">
-      ${sidebar(nav, active)}
+      ${sidebar(nav, active, cap)}
       <div class="ui-shell__page">
-        <div class="ui-shell__crumbs">Account / <b>${crumb || title}</b></div>
+        <div class="ui-shell__crumbs">${cap} / <b>${crumb || title}</b></div>
         <h1>${title}</h1>
         <div class="sub">${sub}</div>
         <div class="ui-card-stack">${body}</div>

package/src/components/topbar.js

@@ -2,6 +2,7 @@
 // (brand, Deck/Text, theme toggle, version switcher, account menu).
 import { brand } from '../assets/brand.js';
 import { icon, sun, moon } from '../assets/icons.js';
+import { esc } from './index.js';
 
 const THEME_KEY = 'apliteni-strategy-theme';
 
@@ -18,12 +19,12 @@ export function deckTextSwitch(active = 'deck') {
 export function versionSwitcher(versions = [], activeIdx = 0) {
   const cur = versions[activeIdx]?.label || '';
   const opts = versions.map((v, i) =>
-    `<div class="vopt" role="option" data-active="${i === activeIdx ? '1' : '0'}">` +
+    `<div class="vopt" role="option" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
     `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
     `<span class="vbadge ${v.badge === 'live' ? 'live' : 'arch'}">${v.badge || 'archive'}</span></div>`).join('');
-  return `<div class="vsw" data-vsw><button class="vsw__btn" aria-haspopup="listbox" aria-expanded="false">` +
+  return `<div class="vsw" data-vsw><button class="vsw__btn" aria-haspopup="listbox" aria-expanded="false" aria-label="Version — ${esc(cur)}">` +
     `<span class="lbl">version:</span><span class="cur">${cur}</span><span class="car"></span></button>` +
-    `<div class="vsw__menu" role="listbox">${opts}</div></div>`;
+    `<div class="vsw__menu" role="listbox" aria-label="Version">${opts}</div></div>`;
 }
 
 // `nav` ([id, icon, label, href?, target?][]) mirrors the account sidebar so the

package/src/index.css

@@ -6,6 +6,7 @@
 @import "./tokens/tokens.css";
 @import "./tokens/accents.css";
 @import "./styles/base.css";
+@import "./styles/aurora.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
 @import "./styles/badge.css";

package/src/inline.js

@@ -24,6 +24,7 @@ export const topbarCss = read('styles/topbar.css');
 // Individual component stylesheets, addressable by name.
 export const styles = {
   base: baseCss,
+  aurora: read('styles/aurora.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
   badge: read('styles/badge.css'),
@@ -41,6 +42,7 @@ export const styles = {
 export const cssText = [
   tokensCss,
   styles.base,
+  styles.aurora,
   styles.button,
   styles.card,
   styles.badge,

package/src/styles/aurora.css

@@ -0,0 +1,93 @@
+/* ============================================================================
+ * aurora — ambient warm backdrop: layered blurred glow "blobs" + optional
+ * paper grain. The kit's one signature page background, so every app gets one
+ * warm identity for free.
+ *
+ * Markup comes from aurora() in components/index.js, but you can hand-roll it:
+ *   <div class="ui-aurora ui-aurora--animated" aria-hidden="true">
+ *     <span class="ui-aurora__blob ui-aurora__blob--accent" style="--au-x:12%;--au-y:-4%"></span>
+ *     ...
+ *     <span class="ui-aurora__grain"></span>
+ *   </div>
+ *
+ * Colours default to the accent glow tokens, so the whole field re-themes with
+ * the sub-theme (phoenix / ocean / emerald) and holds up in dark AND light with
+ * no per-accent rules. Override --au-1/2/3 on .ui-aurora to retune.
+ * ========================================================================== */
+
+.ui-aurora {
+  /* Tone slots — mixed to a visible alpha off the accent families so the field
+     actually reads as an aurora (the --glow-* tokens are tuned faint for the
+     small .ui-bg-* utilities). --purple-light + --grad-to re-point per accent,
+     so the whole field re-themes; --cyan stays a fixed teal. Override to retune. */
+  --au-1: color-mix(in srgb, var(--purple-light) 52%, transparent);
+  --au-2: color-mix(in srgb, var(--cyan) 40%, transparent);
+  --au-3: color-mix(in srgb, var(--grad-to) 44%, transparent);
+
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+/* Light theme: the accent families are darker solids, so dial the mix right
+   down — a whisper of tint, not a wash. */
+:root[data-theme="light"] .ui-aurora {
+  --au-1: color-mix(in srgb, var(--purple-light) 18%, transparent);
+  --au-2: color-mix(in srgb, var(--cyan) 15%, transparent);
+  --au-3: color-mix(in srgb, var(--grad-to) 17%, transparent);
+}
+
+/* Full-bleed: pin to the viewport behind the whole page. Give real content a
+   normal (non-negative) stacking context and it sits on top automatically. */
+.ui-aurora--fixed {
+  position: fixed;
+  z-index: -1;
+}
+
+/* A blurred radial blob. Position via --au-x / --au-y (its centre), scale via
+   --au-size. Centring uses `translate` so the drift animation owns `transform`. */
+.ui-aurora__blob {
+  position: absolute;
+  top: var(--au-y, 50%);
+  left: var(--au-x, 50%);
+  width: var(--au-size, 60%);
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, var(--au-tone), transparent 68%);
+  filter: blur(70px);
+  will-change: transform;
+}
+.ui-aurora__blob--accent { --au-tone: var(--au-1); }
+.ui-aurora__blob--teal   { --au-tone: var(--au-2); }
+.ui-aurora__blob--warm   { --au-tone: var(--au-3); }
+
+/* Slow ambient drift. Staggered per blob via --au-delay so they never line up. */
+.ui-aurora--animated .ui-aurora__blob {
+  animation: ui-aurora-drift 26s ease-in-out infinite alternate;
+  animation-delay: var(--au-delay, 0s);
+}
+@keyframes ui-aurora-drift {
+  from { transform: translate(-2%, -1%) scale(1); }
+  to   { transform: translate(3%, 2%) scale(1.12); }
+}
+
+/* Paper grain — a low-opacity fractal-noise veil. `overlay` in dark keeps it
+   from muddying the blacks; `multiply` in light reads as fine tooth on paper. */
+.ui-aurora__grain {
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 160px 160px;
+  opacity: 0.5;
+  mix-blend-mode: overlay;
+}
+:root[data-theme="light"] .ui-aurora__grain {
+  opacity: 0.4;
+  mix-blend-mode: multiply;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-aurora__blob { animation: none; }
+}

package/src/styles/badge.css

@@ -26,6 +26,22 @@
 .ui-badge--danger { color: var(--pink); background: var(--glow-pink); }
 .ui-badge--archive { color: var(--muted); background: var(--surface); }
 
+/* Semantic status variants — for record/row status in data tables
+   (paid / verified / pending / failed …). Same chip, mapped to meaning. */
+.ui-badge--success { color: var(--green); background: var(--glow-green); }
+.ui-badge--pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
+.ui-badge--neutral { color: var(--muted); background: var(--surface-2); }
+
+/* On the white light app the glow-tints wash out — give status chips a solid
+   tinted fill so they read at a glance. */
+:root[data-theme="light"] .ui-badge--success,
+:root[data-theme="light"] .ui-badge--live    { color: #1f7a38; background: #dff3e4; }
+:root[data-theme="light"] .ui-badge--pending,
+:root[data-theme="light"] .ui-badge--warn    { color: #8a5e00; background: #fbedd2; }
+:root[data-theme="light"] .ui-badge--danger  { color: #b7295f; background: #fbe0ea; }
+:root[data-theme="light"] .ui-badge--neutral,
+:root[data-theme="light"] .ui-badge--archive { color: #5c6270; background: #eceff4; }
+
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {
   display: inline-flex;

package/src/styles/card.css

@@ -11,6 +11,19 @@
   position: relative;
 }
 
+/* Light theme is an all-white app, so a filled card can't rely on a darker-
+   than-page surface the way the dark deck does — give it a hairline border +
+   soft shadow to read as a panel. Dark keeps the borderless deck look. */
+:root[data-theme="light"] .ui-card {
+  border: 1px solid var(--border);
+  box-shadow: 0 1px 2px rgba(20, 25, 45, .04), 0 4px 14px rgba(20, 25, 45, .05);
+}
+
+/* A table wider than its card scrolls INSIDE the card instead of bleeding past
+   the rounded corners / clipping its last column. Clipping to the card's
+   border-box also keeps zebra stripes from escaping the radius. */
+.ui-card:has(> .ui-table) { overflow-x: auto; }
+
 /* Vertical stacks space cards with the container's gap — see .ui-card-stack.
    (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */
 .ui-card-stack { display: flex; flex-direction: column; gap: var(--space-5); }

package/src/styles/table.css

@@ -34,6 +34,31 @@
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 .ui-table--hover tbody tr:hover { background: var(--surface-2); }
 
+/* ── Data-table modifiers (composable) ──────────────────────────────────────
+ * Compose for a dense financial ledger: .ui-table--dense --zebra --hover.
+ *   --dense  compact row rhythm for many-row / many-column data
+ *   --zebra  row striping instead of per-row rules; 2px header rule; the
+ *            (accent) hover tint out-ranks the stripe (defined after it)
+ * Cell helpers: .ui-table__num (right, tabular), .ui-table__code (plain
+ * monospace id — never a boxed code chip inside a table). */
+.ui-table--dense th { padding: 0 14px 10px 0; }
+.ui-table--dense td { padding: 10px 14px; font-size: var(--text-sm); white-space: nowrap; }
+.ui-table--dense th:first-child,
+.ui-table--dense td:first-child { padding-left: 12px; }
+.ui-table--dense th:last-child,
+.ui-table--dense td:last-child { padding-right: 12px; }
+
+.ui-table--zebra th { border-bottom-width: 2px; }
+.ui-table--zebra td { border-bottom: 0; }
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
+.ui-table--zebra.ui-table--hover tbody tr:hover td,
+.ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+
+.ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
+.ui-table th.ui-table__num { text-align: right; }
+.ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
+.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
+
 /* Empty state inside a table area */
 .ui-empty {
   text-align: center;

package/src/styles/topbar.css

@@ -21,16 +21,22 @@
   align-items: center;
   gap: 14px;
 }
-.topbar .brand {
+/* Brand lockup (mark + wordmark) — self-contained so the mark stays optically
+   centered with the word, with an even gap, in ANY context (topbar, auth cards,
+   consent). These rules used to be scoped to `.topbar`, so a lockup dropped into
+   the consent/auth card fell back to inline layout: the mark rode the text
+   baseline with no gap between it and the word. */
+.brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
-  font-size: 13px;
   font-weight: 600;
   color: var(--strong);
   text-decoration: none;
 }
-.topbar .brand svg { display: block; flex: none; }
+.brand svg { display: block; flex: none; }
+/* Topbar wordmark runs a touch smaller than the auth-card lockup. */
+.topbar .brand { font-size: 13px; }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */

package/src/tokens/tokens.css

@@ -149,19 +149,21 @@
   --pink: #d63c72;
   --amber: #b5730a;
 
-  --bg: #f6f6f8;
+  /* A WHITE app: the page and cards are both white; cards are delineated by a
+     hairline border + soft shadow (see card.css), not a grey canvas. */
+  --bg: #ffffff;
   --bg-elevated: #ffffff;
   --surface: #ffffff;
-  --surface-2: #f0f1f5;
-  --surface-3: #e7e9f0;
+  --surface-2: #f5f6f9;
+  --surface-3: #eceef3;
   --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */
-  --border: #d7dae2;
-  --border-strong: #c3c7d4;
+  --border: #e4e7ee;
+  --border-strong: #cdd2dc;
 
-  --text: #1e232b;
-  --strong: #0f0f13;
-  --dim: #3d434e;
-  --muted: #565c68;
+  --text: #1a1e27;
+  --strong: #0c0e13;
+  --dim: #3a404b;
+  --muted: #5c6270;
 
   --accent: #6a2dcc;
   --accent-strong: #6a2dcc; /* already dark enough for white text */