@arcforgelabs/flow 2026.10.19 → 2026.10.21

package/server/theme/themes.js

@@ -0,0 +1,194 @@
+/**
+ * Flow's design systems: the theme families people choose in Appearance, each
+ * with a light and a dark palette, plus accent colour overrides.
+ *
+ * This module is the one source of the --t-* tokens, on the server and in the
+ * browser (server/ui/routes.js serves this folder as browser modules). Harbour,
+ * Flow's own family, is hand-authored here; the other families are ported from
+ * OpenClaw's Control UI by scripts/port-openclaw-themes.mjs into
+ * ./openclaw-palettes.js (docs/DESIGN.md). The engine is Arc Forge Labs'
+ * Field's, so a family looks the same in both apps.
+ */
+import { boundaryOn, HEX, inkOn, readableOn } from './color-contrast.js';
+import { OPENCLAW_FAMILIES } from './openclaw-palettes.js';
+
+export { boundaryOn, contrast, inkOn, readableOn } from './color-contrast.js';
+
+// Harbour: one deep teal for ink, filled buttons and labels, a mint highlight,
+// warm cream pages and cool white cards. Nunito Sans for reading, Playfair
+// Display for page titles, tracked uppercase labels and soft corners. Dark
+// mode turns the teal into the page and the mint into the accent.
+const HARBOUR_SHAPE = {
+  '--t-body': "'Nunito Sans Variable', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif",
+  '--t-display': "'Playfair Display Variable', 'Playfair Display', Georgia, 'Times New Roman', serif",
+  '--t-data': "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
+  '--t-radius': '6px',
+  '--t-radius-lg': '10px',
+  '--t-stroke': '1px',
+  '--t-label-size': '12px',
+  '--t-label-weight': '600',
+  '--t-label-spacing': '.09em',
+  '--t-label-case': 'uppercase',
+  '--t-display-weight': '700',
+};
+
+const HARBOUR = {
+  label: 'Harbour',
+  description: 'Teal, mint & cream',
+  source: 'flow',
+  light: {
+    '--t-bg': '#fdfaf8', '--t-s1': '#f1f6f6', '--t-s2': '#e4eeee', '--t-paper': '#fefffe',
+    '--t-brd': '#dee5e6', '--t-brd-hi': '#8fb7be', '--t-stroke-color': '#ced9d8',
+    '--t-text': '#0d4e5f', '--t-strong': '#0a3c49', '--t-dim': '#4e6365', '--t-mute': '#5d7374',
+    '--t-accent': '#0d4e5f', '--t-accent-bg': '#e4ffff', '--t-accent-brd': '#4a7c88',
+    '--t-brand': '#0d4e5f', '--t-brand-ink': '#fefffe',
+    '--t-primary': '#0d4e5f', '--t-on-primary': '#fefffe', '--t-ring': '#4a7c88',
+    '--t-warn': '#8a5a00', '--t-warn-bg': 'rgba(138, 90, 0, 0.08)', '--t-warn-brd': 'rgba(138, 90, 0, 0.32)',
+    '--t-danger': '#b42318', '--t-danger-bg': 'rgba(180, 35, 24, 0.07)', '--t-danger-brd': 'rgba(180, 35, 24, 0.40)',
+    '--t-success': '#22663f', '--t-success-bg': 'rgba(34, 102, 63, 0.08)',
+    ...HARBOUR_SHAPE,
+    '--t-shadow': '0 1px 2px rgba(13, 78, 95, 0.05), 0 2px 6px rgba(13, 78, 95, 0.06)',
+    'color-scheme': 'light',
+  },
+  dark: {
+    '--t-bg': '#071f26', '--t-s1': '#0b2a33', '--t-s2': '#11363f', '--t-paper': '#0c2830',
+    '--t-brd': '#1b414b', '--t-brd-hi': '#4a7c88', '--t-stroke-color': '#2a5560',
+    '--t-text': '#d9e8ea', '--t-strong': '#fefffe', '--t-dim': '#a5bfc3', '--t-mute': '#8fb0b5',
+    '--t-accent': '#c5feff', '--t-accent-bg': 'rgba(197, 254, 255, 0.10)', '--t-accent-brd': 'rgba(197, 254, 255, 0.45)',
+    '--t-brand': '#c5feff', '--t-brand-ink': '#0d4e5f',
+    '--t-primary': '#c5feff', '--t-on-primary': '#0d4e5f', '--t-ring': '#8fb7be',
+    '--t-warn': '#e7b75c', '--t-warn-bg': 'rgba(231, 183, 92, 0.12)', '--t-warn-brd': 'rgba(231, 183, 92, 0.32)',
+    '--t-danger': '#f2877b', '--t-danger-bg': 'rgba(242, 135, 123, 0.12)', '--t-danger-brd': 'rgba(242, 135, 123, 0.45)',
+    '--t-success': '#86d3a1', '--t-success-bg': 'rgba(134, 211, 161, 0.12)',
+    ...HARBOUR_SHAPE,
+    '--t-shadow': '0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.20)',
+    'color-scheme': 'dark',
+  },
+};
+
+// Picker order: Harbour (Flow's own), then the design directions Field leads
+// with (Beacon, Tide, Claw, Knot, Dash), then the other OpenClaw families.
+const { beacon, tide, claw, knot, dash, ...otherOpenclaw } = OPENCLAW_FAMILIES;
+const FAMILIES = { harbour: HARBOUR, beacon, tide, claw, knot, dash, ...otherOpenclaw };
+
+// --t-control: the edge of an input or an outlined button on --t-paper, the
+// text colour faded toward the paper only as far as it still reads at 3:1.
+for (const family of Object.values(FAMILIES)) {
+  for (const mode of ['light', 'dark']) {
+    const tokens = family[mode];
+    tokens['--t-control'] = boundaryOn(tokens['--t-paper'], tokens['--t-text']);
+  }
+}
+
+/**
+ * The design system a browser starts on until someone picks another in
+ * Appearance. An installation can choose another with FLOW_THEME
+ * (resolveDefaultFamily).
+ */
+export const DEFAULT_FAMILY = 'harbour';
+
+/** The families in picker order: id, label, description and a preview swatch per mode. */
+export const THEME_FAMILIES = Object.entries(FAMILIES).map(([id, family]) => ({
+  id,
+  label: family.label,
+  description: family.description,
+  source: family.source,
+  swatches: {
+    light: swatchesOf(family.light),
+    dark: swatchesOf(family.dark),
+  },
+}));
+
+function swatchesOf(tokens) {
+  return { bg: tokens['--t-bg'], surface: tokens['--t-s1'], text: tokens['--t-text'], accent: tokens['--t-brand'], primary: tokens['--t-primary'] };
+}
+
+export function isThemeFamily(id) {
+  return typeof id === 'string' && Object.hasOwn(FAMILIES, id);
+}
+
+export function normalizeFamily(id, fallback = DEFAULT_FAMILY) {
+  return isThemeFamily(id) ? id : fallback;
+}
+
+/**
+ * FLOW_THEME: the family this installation starts every browser on. Unset
+ * means Harbour; an unknown name stops the server, so a typo is not silently
+ * ignored.
+ */
+export function resolveDefaultFamily(env = process.env) {
+  const raw = String(env.FLOW_THEME ?? '').trim().toLowerCase();
+  if (!raw) return DEFAULT_FAMILY;
+  if (!isThemeFamily(raw)) {
+    throw new Error(`FLOW_THEME must be one of ${Object.keys(FAMILIES).join(', ')} (got "${raw}")`);
+  }
+  return raw;
+}
+
+/** The --t-* tokens (and color-scheme) for a family in a resolved mode. */
+export function tokensFor(familyId, mode) {
+  const family = FAMILIES[normalizeFamily(familyId)];
+  return family[mode === 'dark' ? 'dark' : 'light'];
+}
+
+function declarations(tokens, indent) {
+  return Object.entries(tokens).map(([k, v]) => `${indent}${k}: ${v};`).join('\n');
+}
+
+/** Every family and mode as `[data-theme][data-mode]` rules, served as /assets/themes.css. */
+export function themeStylesheet() {
+  return Object.keys(FAMILIES).flatMap((id) => ['light', 'dark'].map((mode) =>
+    `[data-theme="${id}"][data-mode="${mode}"] {\n${declarations(FAMILIES[id][mode], '  ')}\n}`,
+  )).join('\n');
+}
+
+// ── Accent colours ──────────────────────────────────────────────────────────
+// Upstream's accent presets, with Harbour's teal first. "theme" keeps the
+// family's accent. A custom colour is any #rrggbb.
+export const ACCENT_PRESETS = [
+  { id: 'theme', label: 'Theme default', hex: null },
+  { id: 'harbour', label: 'Harbour teal', hex: '#0d4e5f' },
+  { id: 'claw', label: 'Claw red', hex: '#ff5c5c' },
+  { id: 'coral', label: 'Coral', hex: '#ff8066' },
+  { id: 'amber', label: 'Amber', hex: '#f5b942' },
+  { id: 'mint', label: 'Mint', hex: '#52c99a' },
+  { id: 'teal', label: 'Teal', hex: '#35b9b0' },
+  { id: 'blue', label: 'Blue', hex: '#5b9cf6' },
+  { id: 'violet', label: 'Violet', hex: '#a78bfa' },
+  { id: 'pink', label: 'Pink', hex: '#f472b6' },
+  { id: 'slate', label: 'Slate', hex: '#8795a8' },
+];
+
+export function normalizeAccent(value) {
+  if (typeof value !== 'string') return null;
+  const preset = ACCENT_PRESETS.find((p) => p.id === value);
+  if (preset) return preset.hex;
+  return HEX.test(value) ? value.toLowerCase() : null;
+}
+
+/**
+ * Token overrides that put an accent colour on a family's palette. The colour
+ * fills brand surfaces and focus rings as chosen; --t-accent, which is text,
+ * is shifted until it reads at 4.5:1 on the background.
+ */
+export function accentOverrides(familyId, mode, accent) {
+  const hex = normalizeAccent(accent);
+  if (!hex) return {};
+  const base = tokensFor(familyId, mode);
+  const tint = (pct) => `color-mix(in srgb, ${hex} ${pct}%, transparent)`;
+  const out = {
+    '--t-brand': hex,
+    '--t-brand-ink': inkOn(hex),
+    '--t-ring': hex,
+    '--t-accent': readableOn(hex, base['--t-bg']),
+    '--t-accent-bg': tint(mode === 'dark' ? 16 : 14),
+    '--t-accent-brd': hex,
+  };
+  if (base['--t-primary'] === base['--t-brand']) {
+    out['--t-primary'] = hex;
+    out['--t-on-primary'] = inkOn(hex);
+  } else if (base['--t-on-primary'] === base['--t-brand']) {
+    out['--t-on-primary'] = readableOn(hex, base['--t-primary']);
+  }
+  return out;
+}

package/server/ui/app-page.js

@@ -0,0 +1,66 @@
+import { FLOW_MARK, renderPage } from './page.js';
+
+// The page at /sign-in and at each view (APP_PATHS): the sign-in screen and,
+// once signed in, Flow's app
+// (server/ui/app.js). <body data-state> says which part shows (flow.css):
+// loading, off (sign-in not configured), error, signed-out, no-access or
+// signed-in.
+const BODY = `<div class="fx-app">
+  <p class="fx-state-loading fx-loading" role="status"><span class="fx-spinner" aria-hidden="true"></span>Opening Flow…</p>
+
+  <section class="fx-state-signed-out fx-auth" aria-labelledby="auth-title">
+    <div class="fx-auth__brand">
+      <span class="fx-brand fx-brand--large">${FLOW_MARK}<span>Flow</span></span>
+      <h1 class="fx-auth__title" id="auth-title">Every job billed, every invoice paid.</h1>
+      <ul class="fx-auth__points">
+        <li>Jobs come in from the lab system.</li>
+        <li>Invoices go out to Xero.</li>
+        <li>Payments come back and close the job.</li>
+      </ul>
+    </div>
+    <div class="fx-auth__form">
+      <p class="fx-auth__note" id="sign-in-note"></p>
+      <div id="sign-in" class="fx-auth__widget"></div>
+      <button type="button" class="fx-btn fx-btn--ghost fx-btn--sm fx-mode-toggle" data-mode-toggle>Light or dark</button>
+    </div>
+  </section>
+
+  <section class="fx-state-message fx-message">
+    <span class="fx-brand">${FLOW_MARK}<span>Flow</span></span>
+    <div class="fx-card fx-message__card fx-state-off">
+      <h1 class="fx-title">Sign-in is not set up</h1>
+      <p>The operator turns it on with FLOW_AUTH=clerk and the Clerk keys (docs/SELF_HOSTING.md).</p>
+    </div>
+    <div class="fx-card fx-message__card fx-state-error" role="alert">
+      <h1 class="fx-title">Sign-in could not load</h1>
+      <p>Check the connection, then try again.</p>
+      <button type="button" class="fx-btn" onclick="location.reload()">Try again</button>
+    </div>
+    <div class="fx-card fx-message__card fx-state-no-access" id="no-access"></div>
+  </section>
+
+  <div class="fx-state-signed-in fx-shell">
+    <header class="fx-top">
+      <a class="fx-brand" href="/">${FLOW_MARK}<span>Flow</span></a>
+      <nav class="fx-nav" id="nav" aria-label="Flow"></nav>
+      <div class="fx-top__end">
+        <button type="button" class="fx-btn fx-btn--ghost fx-btn--icon fx-mode-toggle" data-mode-toggle>Light or dark</button>
+        <div id="user-button" class="fx-top__user"></div>
+      </div>
+    </header>
+    <main id="main" class="fx-main" tabindex="-1"></main>
+  </div>
+  <div id="toasts" class="fx-toasts" aria-live="polite"></div>
+</div>`;
+
+export const APP_PATHS = ['/sign-in', '/people', '/account', '/appearance'];
+
+export function appPage({ defaultFamily }) {
+  return renderPage({
+    title: 'Flow',
+    defaultFamily,
+    state: 'loading',
+    scripts: ['/assets/ui/app.js'],
+    body: BODY,
+  });
+}