From f543179099080b24ffcdb38c744f45c5547ab483 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 30 Aug 2026 07:25:28 -0700
Subject: [PATCH] feat(cockpit): wire the dark design tokens into the 14
 dark-designed apps

The wiring half of the tokens follow-up. Each app's styles.css imports the
generated tokens-dark.css, so var(--ds-*) finally resolves:

- 216 uses whose fallbacks were byte-copies of darkOverrides: unchanged.
- 32 uses had NO fallback and were silently invalid - client-tools' weather
  and confirm cards rendered transparent with unset text on the dark canvas.
  They now get their intended dark surfaces and text.
- The drifted fallbacks (accentBorder .25 vs .2, three white-alpha
  surfaceTinted values, one 18px radius-xl) adopt the tokens: micro-shifts.

Two deliberate divergences, verified before choosing them:

- The six 0.3-alpha shadows stay as literals with a comment: the --ds-shadow
  tokens are light-tuned (0.06-0.10 alpha) and vanish on dark surfaces.
- fontMono gains ui-monospace before the generic keyword in typography.ts
  itself - consumers without JetBrains Mono (all 14 of these apps) get the
  platform mono instead of Courier. The website is unaffected: it loads
  JetBrains Mono via next/font, so the first entry always wins; its 40
  verbatim CSS literals keep the old two-entry stack with zero rendering
  difference.

Verified: all 14 apps build; the built element-rendering app renders its dark
design pixel-for-pixel with tokens live (--ds-canvas rgb(17,17,17), body dark,
SF Mono); client-tools' bundle carries the tokens; 6 affected projects' unit
tests green.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 cockpit/chat/timeline/angular/src/styles.css                | 6 ++++++
 cockpit/langgraph/client-tools/angular/src/styles.css       | 6 ++++++
 cockpit/langgraph/durable-execution/angular/src/styles.css  | 6 ++++++
 cockpit/langgraph/interrupts/angular/src/styles.css         | 6 ++++++
 cockpit/langgraph/memory/angular/src/styles.css             | 6 ++++++
 cockpit/langgraph/persistence/angular/src/styles.css        | 6 ++++++
 cockpit/langgraph/subgraphs/angular/src/styles.css          | 6 ++++++
 cockpit/langgraph/time-travel/angular/src/styles.css        | 6 ++++++
 .../angular/src/app/computed-functions.component.ts         | 2 +-
 cockpit/render/computed-functions/angular/src/styles.css    | 6 ++++++
 .../angular/src/app/element-rendering.component.ts          | 2 +-
 cockpit/render/element-rendering/angular/src/styles.css     | 6 ++++++
 .../render/registry/angular/src/app/registry.component.ts   | 2 +-
 cockpit/render/registry/angular/src/styles.css              | 6 ++++++
 .../repeat-loops/angular/src/app/repeat-loops.component.ts  | 2 +-
 cockpit/render/repeat-loops/angular/src/styles.css          | 6 ++++++
 .../angular/src/app/spec-rendering.component.ts             | 2 +-
 cockpit/render/spec-rendering/angular/src/styles.css        | 6 ++++++
 .../angular/src/app/state-management.component.ts           | 2 +-
 cockpit/render/state-management/angular/src/styles.css      | 6 ++++++
 libs/design-tokens/src/lib/theme.css                        | 2 +-
 libs/design-tokens/src/lib/tokens-dark.css                  | 2 +-
 libs/design-tokens/src/lib/tokens.css                       | 2 +-
 libs/design-tokens/src/lib/typography.ts                    | 6 ++++--
 24 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/cockpit/chat/timeline/angular/src/styles.css b/cockpit/chat/timeline/angular/src/styles.css
index b757211f6..9ea259e8a 100644
--- a/cockpit/chat/timeline/angular/src/styles.css
+++ b/cockpit/chat/timeline/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 /* App-specific globals (none for now; add below this line if needed). */
diff --git a/cockpit/langgraph/client-tools/angular/src/styles.css b/cockpit/langgraph/client-tools/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/client-tools/angular/src/styles.css
+++ b/cockpit/langgraph/client-tools/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/durable-execution/angular/src/styles.css b/cockpit/langgraph/durable-execution/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/durable-execution/angular/src/styles.css
+++ b/cockpit/langgraph/durable-execution/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/interrupts/angular/src/styles.css b/cockpit/langgraph/interrupts/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/interrupts/angular/src/styles.css
+++ b/cockpit/langgraph/interrupts/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/memory/angular/src/styles.css b/cockpit/langgraph/memory/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/memory/angular/src/styles.css
+++ b/cockpit/langgraph/memory/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/persistence/angular/src/styles.css b/cockpit/langgraph/persistence/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/persistence/angular/src/styles.css
+++ b/cockpit/langgraph/persistence/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/subgraphs/angular/src/styles.css b/cockpit/langgraph/subgraphs/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/subgraphs/angular/src/styles.css
+++ b/cockpit/langgraph/subgraphs/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/langgraph/time-travel/angular/src/styles.css b/cockpit/langgraph/time-travel/angular/src/styles.css
index e536b44a9..01dfb2f4b 100644
--- a/cockpit/langgraph/time-travel/angular/src/styles.css
+++ b/cockpit/langgraph/time-travel/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html, body {
diff --git a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
index aae78ae58..971b93b58 100644
--- a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
+++ b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts
@@ -96,7 +96,7 @@ class DemoHeadingComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/computed-functions/angular/src/styles.css b/cockpit/render/computed-functions/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/computed-functions/angular/src/styles.css
+++ b/cockpit/render/computed-functions/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
index 687d8c25d..322dbe363 100644
--- a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
+++ b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts
@@ -76,7 +76,7 @@ class DemoHeadingComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/element-rendering/angular/src/styles.css b/cockpit/render/element-rendering/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/element-rendering/angular/src/styles.css
+++ b/cockpit/render/element-rendering/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/cockpit/render/registry/angular/src/app/registry.component.ts b/cockpit/render/registry/angular/src/app/registry.component.ts
index 9b589fabf..926825cac 100644
--- a/cockpit/render/registry/angular/src/app/registry.component.ts
+++ b/cockpit/render/registry/angular/src/app/registry.component.ts
@@ -103,7 +103,7 @@ class DemoBadgeComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/registry/angular/src/styles.css b/cockpit/render/registry/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/registry/angular/src/styles.css
+++ b/cockpit/render/registry/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
index 836b1f150..d1779881a 100644
--- a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
+++ b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts
@@ -76,7 +76,7 @@ class DemoHeadingComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/repeat-loops/angular/src/styles.css b/cockpit/render/repeat-loops/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/repeat-loops/angular/src/styles.css
+++ b/cockpit/render/repeat-loops/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
index 18c4845b4..7152040a0 100644
--- a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
+++ b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts
@@ -103,7 +103,7 @@ class DemoBadgeComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/spec-rendering/angular/src/styles.css b/cockpit/render/spec-rendering/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/spec-rendering/angular/src/styles.css
+++ b/cockpit/render/spec-rendering/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/cockpit/render/state-management/angular/src/app/state-management.component.ts b/cockpit/render/state-management/angular/src/app/state-management.component.ts
index 5f3cde4b5..91a7a616d 100644
--- a/cockpit/render/state-management/angular/src/app/state-management.component.ts
+++ b/cockpit/render/state-management/angular/src/app/state-management.component.ts
@@ -116,7 +116,7 @@ class DemoLabelComponent {
       background: var(--ds-surface, #1c1c1c);
       border: 1px solid var(--ds-border, #2d2d2d);
       border-radius: var(--ds-radius-lg, 14px);
-      box-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.3));
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) /* dark-tuned; the --ds-shadow tokens are light-tuned and vanish on dark surfaces */;
     }
     .card__title {
       margin: 0 0 0.625rem;
diff --git a/cockpit/render/state-management/angular/src/styles.css b/cockpit/render/state-management/angular/src/styles.css
index 46d364b7f..47ff35a84 100644
--- a/cockpit/render/state-management/angular/src/styles.css
+++ b/cockpit/render/state-management/angular/src/styles.css
@@ -1,3 +1,9 @@
+/* Dark design tokens — the real values behind every var(--ds-*, fallback)
+ * in this app. The fallbacks were hand-copies of darkOverrides and 32 uses
+ * across the cockpit had NO fallback at all (silently invalid until this
+ * import). Path resolves from src/ up to the workspace root. */
+@import '../../../../../libs/design-tokens/src/lib/tokens-dark.css';
+
 @import "@threadplane/example-layouts/theme.css";
 
 html,
diff --git a/libs/design-tokens/src/lib/theme.css b/libs/design-tokens/src/lib/theme.css
index a3fc033c6..43f9f2680 100644
--- a/libs/design-tokens/src/lib/theme.css
+++ b/libs/design-tokens/src/lib/theme.css
@@ -49,7 +49,7 @@
   /* Fonts */
   --font-garamond: "EB Garamond", Georgia, serif;
   --font-inter: Inter, system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
 
   /* Type scale */
   --text-h1: clamp(48px, 6vw, 72px);
diff --git a/libs/design-tokens/src/lib/tokens-dark.css b/libs/design-tokens/src/lib/tokens-dark.css
index 51990e2ca..1d0323f47 100644
--- a/libs/design-tokens/src/lib/tokens-dark.css
+++ b/libs/design-tokens/src/lib/tokens-dark.css
@@ -47,7 +47,7 @@
   /* Typography */
   --ds-font-serif: "EB Garamond", Georgia, serif;
   --ds-font-sans: Inter, system-ui, sans-serif;
-  --ds-font-mono: "JetBrains Mono", monospace;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
 
   /* Typography — type scale */
   --ds-h1-size: clamp(48px, 6vw, 72px);
diff --git a/libs/design-tokens/src/lib/tokens.css b/libs/design-tokens/src/lib/tokens.css
index 5c1f2978a..f2bf372a7 100644
--- a/libs/design-tokens/src/lib/tokens.css
+++ b/libs/design-tokens/src/lib/tokens.css
@@ -47,7 +47,7 @@
   /* Typography */
   --ds-font-serif: "EB Garamond", Georgia, serif;
   --ds-font-sans: Inter, system-ui, sans-serif;
-  --ds-font-mono: "JetBrains Mono", monospace;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
 
   /* Typography — type scale */
   --ds-h1-size: clamp(48px, 6vw, 72px);
diff --git a/libs/design-tokens/src/lib/typography.ts b/libs/design-tokens/src/lib/typography.ts
index b550db8f7..a015b4a2c 100644
--- a/libs/design-tokens/src/lib/typography.ts
+++ b/libs/design-tokens/src/lib/typography.ts
@@ -15,8 +15,10 @@ export const typography = {
   fontSerif: '"EB Garamond", Georgia, serif',
   /** Sans-serif font for body text */
   fontSans: 'Inter, system-ui, sans-serif',
-  /** Monospace font for code and labels */
-  fontMono: '"JetBrains Mono", monospace',
+  /** Monospace font for code and labels. ui-monospace before the generic
+   * keyword: consumers that don't load JetBrains Mono (the cockpit example
+   * apps) get the platform mono (SF Mono) instead of Courier. */
+  fontMono: '"JetBrains Mono", ui-monospace, monospace',
 
   h1: {
     size: 'clamp(48px, 6vw, 72px)',