feat(cockpit): wire the dark design tokens into the example apps

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). */

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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;

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,

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;

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,

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;

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,

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;

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,

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;

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,

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;

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,

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);

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);

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);

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)',