U01: Token additions: status borders, fs-display, nav-bg, dock-width

apps/agent-forge/src/__tests__/contrast.test.ts

@@ -72,6 +72,20 @@ const PAIRS: [text: string, background: string][] = [
   ['violet', 'surface-3'],
   ['accent', 'surface-3'],
   ['text-faint', 'surface-3'],
+  // The nav rail and the shell frame sit on --nav-bg (U02): nav labels, section overlines, the active icon.
+  ['text', 'nav-bg'],
+  ['text-muted', 'nav-bg'],
+  ['text-faint', 'nav-bg'],
+  ['accent', 'nav-bg'],
+  // Tinted toasts (U12) draw the message in --text and the close button in --text-muted on each -soft tint.
+  ['text', 'success-soft'],
+  ['text', 'danger-soft'],
+  ['text', 'warning-soft'],
+  ['text', 'info-soft'],
+  ['text-muted', 'success-soft'],
+  ['text-muted', 'danger-soft'],
+  ['text-muted', 'warning-soft'],
+  ['text-muted', 'info-soft'],
 ];
 
 describe('theme contrast', () => {

apps/agent-forge/src/__tests__/polishCss.test.ts

@@ -55,3 +55,17 @@ describe('sticky side panels', () => {
     expect(rulesFor(sheet('screens/hub/hub.css'), '.hub-split > .hub-entry')).toMatch(/overflow:\s*auto/);
   });
 });
+
+describe('U01 tokens', () => {
+  const theme = sheet('theme.css');
+  it.each(['success', 'warning', 'danger', 'info'])('--%s-border is the status colour at 40%%', (s) => {
+    expect(theme).toMatch(new RegExp(`--${s}-border:\\s*color-mix\\(in srgb, var\\(--${s}\\) 40%, transparent\\);`));
+  });
+  it('adds --fs-display 22px and --dock-width 490px', () => {
+    expect(theme).toMatch(/--fs-display:\s*22px;/);
+    expect(theme).toMatch(/--dock-width:\s*490px;/);
+  });
+  it('--nav-bg is a light-dark pair', () => {
+    expect(theme).toMatch(/--nav-bg:\s*light-dark\(#efeff2,\s*#060608\);/);
+  });
+});

apps/agent-forge/src/theme.css

@@ -31,6 +31,8 @@
   --text: light-dark(#18181b, #f4f4f5);
   --text-muted: light-dark(#52525b, #a1a1aa);
   --text-faint: light-dark(#5f5f68, #8a8a94);
+  /* the nav rail and the frame behind the floating content card (U02): one step darker than --bg */
+  --nav-bg: light-dark(#efeff2, #060608);
 
   /* ---------- Accent (indigo) ---------- */
   --accent: light-dark(#4f46e5, #8b8cf8);
@@ -54,6 +56,11 @@
   /* LLM / agent accent */
   --violet: light-dark(#6d28d9, #a78bfa);
   --violet-soft: light-dark(#f1eafe, #241a3d);
+  /* Tinted-surface borders: the status colour at 40% over transparent (notices, toasts, change chips, tool rows). */
+  --success-border: color-mix(in srgb, var(--success) 40%, transparent);
+  --warning-border: color-mix(in srgb, var(--warning) 40%, transparent);
+  --danger-border: color-mix(in srgb, var(--danger) 40%, transparent);
+  --info-border: color-mix(in srgb, var(--info) 40%, transparent);
 
   /* ---------- Chart series ---------- */
   --chart-1: light-dark(#4f46e5, #8b8cf8);
@@ -85,6 +92,10 @@
   /* page gutter: 24px, 16px at narrow widths (below) */
   --gutter: var(--space-6);
 
+  /* ---------- Layout ---------- */
+  /* the docked right panel's default width (U03 overrides it inline with the stored width) */
+  --dock-width: 490px;
+
   /* ---------- Elevation ----------
      A shadow is not a colour, so it cannot be one light-dark() pair; instead every layer's colour is,
      and a layer that only one scheme draws is transparent in the other. */
@@ -130,6 +141,8 @@
   --lh-body: 1.5;
   /* page title (600, tracking -0.01em) */
   --fs-title: 18px;
+  /* agent detail H1 (600, tracking -0.015em) */
+  --fs-display: 22px;
   /* metric value (600, tabular) */
   --fs-metric: 24px;
 }