From 5dfcc838966d742d2e5db095f73405abe88ec369 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:04:13 -0700
Subject: [PATCH 1/8] refactor(examples): migrate
 cockpit-render-spec-rendering-angular to Stage 2 theme sync

---
 .../src/app/spec-rendering.component.ts       | 40 +++++++++----------
 .../spec-rendering/angular/src/index.html     |  2 +-
 .../spec-rendering/angular/src/styles.css     | 10 ++++-
 3 files changed, 30 insertions(+), 22 deletions(-)

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 158df57e6..f7ef10428 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
@@ -19,11 +19,11 @@ import { SPEC_RENDERING_SPECS } from './specs';
   standalone: true,
   template: `
     @if (displayContent()) {
-      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
+      <p class="text-[var(--ngaf-chat-text)] text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoTextComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -94,11 +94,11 @@ class DemoBadgeComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity">
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface)] p-4 mb-3 transition-opacity">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded mb-2 skeleton-shimmer"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-separator)] rounded mb-2 skeleton-shimmer"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -106,8 +106,8 @@ class DemoBadgeComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -130,11 +130,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -143,11 +143,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -155,17 +155,17 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text-muted)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
             <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/spec-rendering/angular/src/index.html b/cockpit/render/spec-rendering/angular/src/index.html
index 8ba4b2d89..e3184131b 100644
--- a/cockpit/render/spec-rendering/angular/src/index.html
+++ b/cockpit/render/spec-rendering/angular/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body>
   <app-spec-rendering></app-spec-rendering>
 </body>
 </html>
diff --git a/cockpit/render/spec-rendering/angular/src/styles.css b/cockpit/render/spec-rendering/angular/src/styles.css
index 1d1e4d5a9..bf52ea652 100644
--- a/cockpit/render/spec-rendering/angular/src/styles.css
+++ b/cockpit/render/spec-rendering/angular/src/styles.css
@@ -1,4 +1,12 @@
-/* Global styles for the spec-rendering capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
 
 @keyframes shimmer {
   0% { background-position: -200% 0; }

From 7211b9f47cd1096c66e2361d812331677b01d5a4 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:05:52 -0700
Subject: [PATCH 2/8] refactor(examples): migrate
 cockpit-ag-ui-streaming-angular to Stage 2 theme sync

---
 .../ag-ui/streaming/angular/src/index.html    |  3 +-
 .../ag-ui/streaming/angular/src/styles.css    | 33 ++++---------------
 2 files changed, 7 insertions(+), 29 deletions(-)

diff --git a/cockpit/ag-ui/streaming/angular/src/index.html b/cockpit/ag-ui/streaming/angular/src/index.html
index e73a9b36a..40ab08e74 100644
--- a/cockpit/ag-ui/streaming/angular/src/index.html
+++ b/cockpit/ag-ui/streaming/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>AG-UI Streaming — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-streaming></app-streaming>
 </body>
 </html>
diff --git a/cockpit/ag-ui/streaming/angular/src/styles.css b/cockpit/ag-ui/streaming/angular/src/styles.css
index 061c66cf8..d42cba930 100644
--- a/cockpit/ag-ui/streaming/angular/src/styles.css
+++ b/cockpit/ag-ui/streaming/angular/src/styles.css
@@ -1,30 +1,9 @@
-@import "../../../../../libs/design-tokens/src/lib/tokens.css";
-@import "tailwindcss";
-@source "../../../../../libs/chat/src/";
+@import "@ngaf/example-layouts/theme.css";
 
-@theme {
-  --color-bg: var(--ds-bg);
-  --color-surface: #ffffff;
-  --color-accent: var(--ds-accent);
-  --color-accent-light: var(--ds-accent-light);
-  --color-text-primary: var(--ds-text-primary);
-  --color-text-secondary: var(--ds-text-secondary);
-  --color-text-muted: var(--ds-text-muted);
-  --color-border: var(--ds-accent-border);
-  --color-error: #ef4444;
-  --color-success: #22c55e;
-  --font-sans: var(--ds-font-sans);
-  --font-serif: var(--ds-font-serif);
-  --font-mono: var(--ds-font-mono);
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-body {
+html, body {
+  height: 100%;
   margin: 0;
-  font-family: var(--ds-font-sans);
-  background: var(--ds-bg);
-  color: var(--ds-text-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
 }

From 4f77a2383fa9281a4342f340dd02ab1cf86b701c Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:08:47 -0700
Subject: [PATCH 3/8] refactor(examples): migrate
 cockpit-render-computed-functions-angular to Stage 2 theme sync

---
 .../src/app/computed-functions.component.ts   | 44 +++++++++----------
 .../computed-functions/angular/src/index.html |  5 +--
 .../computed-functions/angular/src/styles.css | 17 ++++++-
 3 files changed, 39 insertions(+), 27 deletions(-)

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 77f37054f..27cb698a6 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
@@ -20,13 +20,13 @@ import { COMPUTED_FUNCTIONS_SPECS } from './specs';
   template: `
     @if (label() || value()) {
       <div class="flex items-center gap-2 py-1">
-        <span class="text-gray-500 text-xs uppercase font-semibold min-w-[120px]">{{ label() }}:</span>
-        <span class="text-gray-100 text-sm font-mono">{{ value() }}</span>
+        <span class="text-[var(--ngaf-chat-text-muted)] text-xs uppercase font-semibold min-w-[120px]">{{ label() }}:</span>
+        <span class="text-[var(--ngaf-chat-text)] text-sm font-mono">{{ value() }}</span>
       </div>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoValueComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -80,12 +80,12 @@ class DemoHeadingComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity"
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface-alt)] p-4 mb-3 transition-opacity"
          [class.animate-pulse]="loading() && !childKeys().length">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer mb-2"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -93,8 +93,8 @@ class DemoHeadingComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -117,11 +117,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-[var(--ngaf-chat-primary)] text-[var(--ngaf-chat-on-primary)] font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -130,11 +130,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -142,17 +142,17 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-[var(--ngaf-chat-primary)] animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
-            <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-primary)]">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/computed-functions/angular/src/index.html b/cockpit/render/computed-functions/angular/src/index.html
index a081abe3d..a1f91e95d 100644
--- a/cockpit/render/computed-functions/angular/src/index.html
+++ b/cockpit/render/computed-functions/angular/src/index.html
@@ -1,13 +1,12 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Render Computed Functions — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body>
   <app-computed-functions></app-computed-functions>
 </body>
 </html>
diff --git a/cockpit/render/computed-functions/angular/src/styles.css b/cockpit/render/computed-functions/angular/src/styles.css
index 9d3775bff..10f81ea7c 100644
--- a/cockpit/render/computed-functions/angular/src/styles.css
+++ b/cockpit/render/computed-functions/angular/src/styles.css
@@ -1,4 +1,12 @@
-/* Global styles for the computed-functions capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
 
 @keyframes shimmer {
   0% { background-position: -200% 0; }
@@ -6,7 +14,12 @@
 }
 
 .skeleton-shimmer {
-  background: linear-gradient(90deg, rgb(31 41 55 / 0) 0%, rgb(55 65 81 / 0.3) 50%, rgb(31 41 55 / 0) 100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--ngaf-chat-surface-alt) 50%,
+    transparent 100%
+  );
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
 }

From d7010614304ace5ebd262f439173bf71385f9a8b Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:09:23 -0700
Subject: [PATCH 4/8] refactor(examples): migrate
 cockpit-render-registry-angular to Stage 2 theme sync

---
 .../angular/src/app/registry.component.ts     | 46 +++++++++----------
 .../render/registry/angular/src/index.html    |  3 +-
 .../render/registry/angular/src/styles.css    | 11 ++++-
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/cockpit/render/registry/angular/src/app/registry.component.ts b/cockpit/render/registry/angular/src/app/registry.component.ts
index ec5e20d12..cc0f87eae 100644
--- a/cockpit/render/registry/angular/src/app/registry.component.ts
+++ b/cockpit/render/registry/angular/src/app/registry.component.ts
@@ -19,11 +19,11 @@ import { REGISTRY_SPECS } from './specs';
   standalone: true,
   template: `
     @if (displayContent()) {
-      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
+      <p class="text-[var(--ngaf-chat-text)] text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoTextComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -80,9 +80,9 @@ class DemoHeadingComponent {
   standalone: true,
   template: `
     @if (label()) {
-      <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-blue-600 text-white">{{ label() }}</span>
+      <span class="inline-block px-2 py-0.5 rounded text-xs font-medium bg-[var(--ngaf-chat-primary)] text-[var(--ngaf-chat-on-primary)]">{{ label() }}</span>
     } @else if (loading()) {
-      <div class="inline-block h-5 w-16 bg-gray-700 rounded-full skeleton-shimmer"></div>
+      <div class="inline-block h-5 w-16 bg-[var(--ngaf-chat-surface-alt)] rounded-full skeleton-shimmer"></div>
     }
   `,
 })
@@ -100,12 +100,12 @@ class DemoBadgeComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity"
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface)] p-4 mb-3 transition-opacity"
          [class.animate-pulse]="loading() && !childKeys().length">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer mb-2"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -113,8 +113,8 @@ class DemoBadgeComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -137,11 +137,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-[var(--ngaf-chat-primary)] text-[var(--ngaf-chat-on-primary)] font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -150,11 +150,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -162,17 +162,17 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text-muted)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-[var(--ngaf-chat-primary)] animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
-            <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-primary)]">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/registry/angular/src/index.html b/cockpit/render/registry/angular/src/index.html
index 44fec203e..be2859511 100644
--- a/cockpit/render/registry/angular/src/index.html
+++ b/cockpit/render/registry/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Render Registry — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body class="h-full">
   <app-registry></app-registry>
 </body>
 </html>
diff --git a/cockpit/render/registry/angular/src/styles.css b/cockpit/render/registry/angular/src/styles.css
index eda2f7b03..95ef7d08d 100644
--- a/cockpit/render/registry/angular/src/styles.css
+++ b/cockpit/render/registry/angular/src/styles.css
@@ -1,5 +1,14 @@
-/* Global styles for the registry capability demo */
+@import "@ngaf/example-layouts/theme.css";
 
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
+
+/* Skeleton shimmer for streaming render skeletons */
 @keyframes shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }

From fc8893d9e3b1f251390a3a998a56bf213196afff Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:11:26 -0700
Subject: [PATCH 5/8] refactor(examples): migrate
 cockpit-render-repeat-loops-angular to Stage 2 theme sync

---
 .../angular/src/app/repeat-loops.component.ts | 50 +++++++++----------
 .../repeat-loops/angular/src/index.html       |  5 +-
 .../repeat-loops/angular/src/styles.css       | 10 +++-
 3 files changed, 36 insertions(+), 29 deletions(-)

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 06487931b..f1385d5ce 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
@@ -19,11 +19,11 @@ import { REPEAT_LOOPS_SPECS } from './specs';
   standalone: true,
   template: `
     @if (displayContent()) {
-      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
+      <p class="text-[var(--ngaf-chat-text)] text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoTextComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -80,12 +80,12 @@ class DemoHeadingComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity"
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface)] p-4 mb-3 transition-opacity"
          [class.animate-pulse]="loading() && !childKeys().length">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -93,8 +93,8 @@ class DemoHeadingComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -117,11 +117,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -130,11 +130,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -142,17 +142,17 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text-muted)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
             <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
 
         <!-- Controls (pinned at bottom) -->
-        <div class="shrink-0 border-t border-gray-800 p-4">
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-3">List Controls</div>
+        <div class="shrink-0 border-t border-[var(--ngaf-chat-separator)] p-4">
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-3">List Controls</div>
           <div class="space-y-3">
             <button
               class="w-full text-xs px-3 py-1.5 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-400 transition-colors"
@@ -163,14 +163,14 @@ class DemoCardComponent {
               <div class="space-y-1">
                 @for (item of getItems(); track $index) {
                   <div class="flex items-center justify-between text-xs">
-                    <span class="text-gray-300 truncate">{{ item }}</span>
-                    <button class="text-gray-500 hover:text-red-400 text-[10px] transition-colors"
+                    <span class="text-[var(--ngaf-chat-text)] truncate">{{ item }}</span>
+                    <button class="text-[var(--ngaf-chat-text-muted)] hover:text-red-400 text-[10px] transition-colors"
                             (click)="removeItem($index)">x</button>
                   </div>
                 }
               </div>
             }
-            <p class="text-[10px] text-gray-600 leading-relaxed">
+            <p class="text-[10px] text-[var(--ngaf-chat-text-muted)] leading-relaxed">
               Modify <code class="text-indigo-400/70 font-mono">/items</code> array in the store.
             </p>
           </div>
@@ -178,7 +178,7 @@ class DemoCardComponent {
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/repeat-loops/angular/src/index.html b/cockpit/render/repeat-loops/angular/src/index.html
index dbfa907c8..2644f8654 100644
--- a/cockpit/render/repeat-loops/angular/src/index.html
+++ b/cockpit/render/repeat-loops/angular/src/index.html
@@ -1,13 +1,12 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Render Repeat Loops — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body>
   <app-repeat-loops></app-repeat-loops>
 </body>
 </html>
diff --git a/cockpit/render/repeat-loops/angular/src/styles.css b/cockpit/render/repeat-loops/angular/src/styles.css
index 61f71f9dc..bf52ea652 100644
--- a/cockpit/render/repeat-loops/angular/src/styles.css
+++ b/cockpit/render/repeat-loops/angular/src/styles.css
@@ -1,4 +1,12 @@
-/* Global styles for the repeat-loops capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
 
 @keyframes shimmer {
   0% { background-position: -200% 0; }

From a1c04552cbf331a85bd737b31b040ce793699457 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:12:42 -0700
Subject: [PATCH 6/8] refactor(examples): migrate
 cockpit-render-state-management-angular to Stage 2 theme sync

---
 .../src/app/state-management.component.ts     | 66 +++++++++----------
 .../state-management/angular/src/index.html   |  2 +-
 .../state-management/angular/src/styles.css   | 10 ++-
 3 files changed, 43 insertions(+), 35 deletions(-)

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 2b0def61d..fd8f524cc 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
@@ -19,11 +19,11 @@ import { STATE_MANAGEMENT_SPECS } from './specs';
   standalone: true,
   template: `
     @if (displayContent()) {
-      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
+      <p class="text-[var(--ngaf-chat-text)] text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoTextComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -81,13 +81,13 @@ class DemoHeadingComponent {
   template: `
     @if (label() || value()) {
       <div class="flex items-center gap-2">
-        <span class="text-gray-500 text-xs uppercase font-semibold">{{ label() }}:</span>
-        <span class="text-gray-100 text-sm font-mono">{{ value() }}</span>
+        <span class="text-[var(--ngaf-chat-text-muted)] text-xs uppercase font-semibold">{{ label() }}:</span>
+        <span class="text-[var(--ngaf-chat-text)] text-sm font-mono">{{ value() }}</span>
       </div>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -107,12 +107,12 @@ class DemoLabelComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity"
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface)] p-4 mb-3 transition-opacity"
          [class.animate-pulse]="loading() && !childKeys().length">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -120,8 +120,8 @@ class DemoLabelComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -144,11 +144,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -157,11 +157,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -169,42 +169,42 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text-muted)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
             <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
 
         <!-- Controls (pinned at bottom) -->
-        <div class="shrink-0 border-t border-gray-800 p-4">
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-3">State Controls</div>
+        <div class="shrink-0 border-t border-[var(--ngaf-chat-separator)] p-4">
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-3">State Controls</div>
           <div class="space-y-3">
             <div>
-              <label class="text-[10px] text-gray-500 uppercase font-semibold block mb-1">Name</label>
+              <label class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase font-semibold block mb-1">Name</label>
               <input type="text"
-                     class="w-full px-2 py-1 text-xs rounded bg-gray-800 border border-gray-700 text-gray-200 focus:border-indigo-500 focus:outline-none"
+                     class="w-full px-2 py-1 text-xs rounded bg-[var(--ngaf-chat-surface-alt)] border border-[var(--ngaf-chat-separator)] text-[var(--ngaf-chat-text)] focus:border-indigo-500 focus:outline-none"
                      [value]="getState('/user/name')"
                      (input)="store.set('/user/name', $any($event.target).value)" />
             </div>
             <div>
-              <label class="text-[10px] text-gray-500 uppercase font-semibold block mb-1">Age</label>
+              <label class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase font-semibold block mb-1">Age</label>
               <input type="number"
-                     class="w-full px-2 py-1 text-xs rounded bg-gray-800 border border-gray-700 text-gray-200 focus:border-indigo-500 focus:outline-none"
+                     class="w-full px-2 py-1 text-xs rounded bg-[var(--ngaf-chat-surface-alt)] border border-[var(--ngaf-chat-separator)] text-[var(--ngaf-chat-text)] focus:border-indigo-500 focus:outline-none"
                      [value]="getState('/user/age')"
                      (input)="store.set('/user/age', +$any($event.target).value)" />
             </div>
             <div>
-              <label class="text-[10px] text-gray-500 uppercase font-semibold block mb-1">Theme</label>
-              <select class="w-full px-2 py-1 text-xs rounded bg-gray-800 border border-gray-700 text-gray-200 focus:border-indigo-500 focus:outline-none"
+              <label class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase font-semibold block mb-1">Theme</label>
+              <select class="w-full px-2 py-1 text-xs rounded bg-[var(--ngaf-chat-surface-alt)] border border-[var(--ngaf-chat-separator)] text-[var(--ngaf-chat-text)] focus:border-indigo-500 focus:outline-none"
                       [value]="getState('/settings/theme')"
                       (change)="store.set('/settings/theme', $any($event.target).value)">
                 <option value="dark">Dark</option>
                 <option value="light">Light</option>
               </select>
             </div>
-            <p class="text-[10px] text-gray-600 leading-relaxed">
+            <p class="text-[10px] text-[var(--ngaf-chat-text-muted)] leading-relaxed">
               Edit values to update the state store. Rendered elements with <code class="text-indigo-400/70 font-mono">$state</code> bindings react.
             </p>
           </div>
@@ -212,7 +212,7 @@ class DemoCardComponent {
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/state-management/angular/src/index.html b/cockpit/render/state-management/angular/src/index.html
index 7066cb4c0..82ae12915 100644
--- a/cockpit/render/state-management/angular/src/index.html
+++ b/cockpit/render/state-management/angular/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body>
   <app-state-management></app-state-management>
 </body>
 </html>
diff --git a/cockpit/render/state-management/angular/src/styles.css b/cockpit/render/state-management/angular/src/styles.css
index 893982316..bf52ea652 100644
--- a/cockpit/render/state-management/angular/src/styles.css
+++ b/cockpit/render/state-management/angular/src/styles.css
@@ -1,4 +1,12 @@
-/* Global styles for the state-management capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
 
 @keyframes shimmer {
   0% { background-position: -200% 0; }

From c2a4d72e8ba91f234e721d64dffe6bb4ad559298 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:14:59 -0700
Subject: [PATCH 7/8] refactor(examples): migrate
 cockpit-render-element-rendering-angular to Stage 2 theme sync

---
 .../src/app/element-rendering.component.ts    | 50 +++++++++----------
 .../element-rendering/angular/src/index.html  |  5 +-
 .../element-rendering/angular/src/styles.css  | 10 +++-
 3 files changed, 36 insertions(+), 29 deletions(-)

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 b76de5010..645977800 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
@@ -19,11 +19,11 @@ import { ELEMENT_RENDERING_SPECS } from './specs';
   standalone: true,
   template: `
     @if (displayContent()) {
-      <p class="text-gray-100 text-sm">{{ displayContent() }}</p>
+      <p class="text-[var(--ngaf-chat-text)] text-sm">{{ displayContent() }}</p>
     } @else if (loading()) {
       <div class="space-y-1.5 py-1">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-2/3 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-2/3 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -47,17 +47,17 @@ class DemoTextComponent {
   imports: [RenderElementComponent],
   template: `
     @if (displayContent()) {
-      <h2 class="text-lg font-bold text-gray-100 mb-2">{{ displayContent() }}</h2>
+      <h2 class="text-lg font-bold text-[var(--ngaf-chat-text)] mb-2">{{ displayContent() }}</h2>
     } @else if (loading()) {
-      <div class="h-5 w-48 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+      <div class="h-5 w-48 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
     }
     @for (key of childKeys(); track key) {
       <render-element [elementKey]="key" [spec]="spec()!" />
     }
     @if (!childKeys().length && loading()) {
       <div class="space-y-2 mt-2">
-        <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-        <div class="h-3 w-5/6 bg-gray-800 rounded skeleton-shimmer"></div>
+        <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+        <div class="h-3 w-5/6 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
       </div>
     }
   `,
@@ -80,12 +80,12 @@ class DemoHeadingComponent {
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="rounded-lg border border-gray-800 bg-gray-900 p-4 mb-3 transition-opacity"
+    <div class="rounded-lg border border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface)] p-4 mb-3 transition-opacity"
          [class.animate-pulse]="loading() && !childKeys().length">
       @if (title()) {
-        <h3 class="text-sm font-semibold text-gray-200 mb-2">{{ title() }}</h3>
+        <h3 class="text-sm font-semibold text-[var(--ngaf-chat-text)] mb-2">{{ title() }}</h3>
       } @else if (loading()) {
-        <div class="h-4 w-32 bg-gray-700 rounded skeleton-shimmer mb-2"></div>
+        <div class="h-4 w-32 bg-[var(--ngaf-chat-separator)] rounded skeleton-shimmer mb-2"></div>
       }
       @if (childKeys().length) {
         @for (key of childKeys(); track key) {
@@ -93,8 +93,8 @@ class DemoHeadingComponent {
         }
       } @else if (loading()) {
         <div class="space-y-2">
-          <div class="h-3 w-full bg-gray-800 rounded skeleton-shimmer"></div>
-          <div class="h-3 w-3/4 bg-gray-800 rounded skeleton-shimmer"></div>
+          <div class="h-3 w-full bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
+          <div class="h-3 w-3/4 bg-[var(--ngaf-chat-surface-alt)] rounded skeleton-shimmer"></div>
         </div>
       }
     </div>
@@ -117,11 +117,11 @@ class DemoCardComponent {
     <example-split-layout>
       <!-- Spec picker -->
       <div header class="flex items-center gap-2 px-4 py-3">
-        <span class="text-xs text-gray-500 uppercase tracking-wide font-semibold mr-2">Spec:</span>
+        <span class="text-xs text-[var(--ngaf-chat-text-muted)] uppercase tracking-wide font-semibold mr-2">Spec:</span>
         @for (spec of specs; track spec.label; let i = $index) {
           <button
             class="text-xs px-3 py-1.5 rounded-md transition-colors"
-            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-gray-800 text-gray-400 hover:text-gray-200'"
+            [class]="i === activeIndex ? 'bg-indigo-500 text-white font-semibold' : 'bg-[var(--ngaf-chat-surface-alt)] text-[var(--ngaf-chat-text-muted)] hover:text-[var(--ngaf-chat-text)]'"
             (click)="selectSpec(i)">
             {{ spec.label }}
           </button>
@@ -130,11 +130,11 @@ class DemoCardComponent {
 
       <!-- Left: Live Render Output -->
       <div primary>
-        <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
+        <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Live Render Output</div>
         @if (simulator.spec(); as renderedSpec) {
           <render-spec [spec]="renderedSpec" [registry]="registry" [store]="store" [loading]="simulator.playing()" />
         } @else {
-          <div class="text-gray-600 text-sm italic">Press play to start streaming...</div>
+          <div class="text-[var(--ngaf-chat-text-muted)] text-sm italic">Press play to start streaming...</div>
         }
       </div>
 
@@ -142,26 +142,26 @@ class DemoCardComponent {
       <div secondary class="flex flex-col h-full">
         <!-- Streaming JSON (scrollable) -->
         <div class="flex-1 overflow-y-auto p-4" #jsonPane>
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
-          <pre class="text-[11px] font-mono text-gray-300 leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-4">Streaming JSON</div>
+          <pre class="text-[11px] font-mono text-[var(--ngaf-chat-text-muted)] leading-relaxed whitespace-pre-wrap break-all">{{ simulator.rawJson() }}<span class="text-indigo-400 animate-pulse">|</span></pre>
           <div class="mt-3 flex justify-between text-[10px]">
             <span class="text-indigo-400">{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }}</span>
-            <span class="text-gray-500">{{ percent() }}%</span>
+            <span class="text-[var(--ngaf-chat-text-muted)]">{{ percent() }}%</span>
           </div>
         </div>
 
         <!-- Controls (pinned at bottom) -->
-        <div class="shrink-0 border-t border-gray-800 p-4">
-          <div class="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mb-3">Controls</div>
+        <div class="shrink-0 border-t border-[var(--ngaf-chat-separator)] p-4">
+          <div class="text-[10px] text-[var(--ngaf-chat-text-muted)] uppercase tracking-widest font-semibold mb-3">Controls</div>
           <div class="space-y-3">
             <label class="flex items-center gap-2 cursor-pointer group">
               <input type="checkbox"
-                     class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0 cursor-pointer"
+                     class="w-4 h-4 rounded border-[var(--ngaf-chat-separator)] bg-[var(--ngaf-chat-surface-alt)] text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0 cursor-pointer"
                      [checked]="showDetail()"
                      (change)="toggleShowDetail()" />
-              <span class="text-xs text-gray-300 group-hover:text-gray-100 transition-colors">Show Detail</span>
+              <span class="text-xs text-[var(--ngaf-chat-text-muted)] group-hover:text-[var(--ngaf-chat-text)] transition-colors">Show Detail</span>
             </label>
-            <p class="text-[10px] text-gray-600 leading-relaxed">
+            <p class="text-[10px] text-[var(--ngaf-chat-text-muted)] leading-relaxed">
               Toggles <code class="text-indigo-400/70 font-mono">/showDetail</code> in the state store. Elements with <code class="text-indigo-400/70 font-mono">visible: bind</code> react instantly.
             </p>
           </div>
@@ -169,7 +169,7 @@ class DemoCardComponent {
       </div>
 
       <!-- Timeline bar -->
-      <streaming-timeline footer [simulator]="simulator" class="border-t border-gray-800" />
+      <streaming-timeline footer [simulator]="simulator" class="border-t border-[var(--ngaf-chat-separator)]" />
     </example-split-layout>
   `,
 })
diff --git a/cockpit/render/element-rendering/angular/src/index.html b/cockpit/render/element-rendering/angular/src/index.html
index 381c92482..448898ade 100644
--- a/cockpit/render/element-rendering/angular/src/index.html
+++ b/cockpit/render/element-rendering/angular/src/index.html
@@ -1,13 +1,12 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Render Element Rendering — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-full">
+<body>
   <app-element-rendering></app-element-rendering>
 </body>
 </html>
diff --git a/cockpit/render/element-rendering/angular/src/styles.css b/cockpit/render/element-rendering/angular/src/styles.css
index 0d333e182..bf52ea652 100644
--- a/cockpit/render/element-rendering/angular/src/styles.css
+++ b/cockpit/render/element-rendering/angular/src/styles.css
@@ -1,4 +1,12 @@
-/* Global styles for the element-rendering capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
 
 @keyframes shimmer {
   0% { background-position: -200% 0; }

From 6997750d07efb06abc0880622c04fdd46079c07c Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 16:20:41 -0700
Subject: [PATCH 8/8] =?UTF-8?q?refactor(examples):=20wave=204=20cleanup=20?=
 =?UTF-8?q?=E2=80=94=20drop=20CDN=20scripts=20+=20migrate=20shared=20strea?=
 =?UTF-8?q?ming-timeline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two stragglers from parallel migration:
- spec-rendering and state-management: subagents kept the Tailwind v3
  CDN script in index.html (other 5 apps in this wave dropped it).
  Removed for consistency.
- cockpit/render/shared/streaming-timeline.component.ts: shared by
  multiple render apps but not in any single app's migration scope.
  Migrated gray utilities to --ngaf-chat-* per the EXTENDED mapping;
  simple indigo refs to --ngaf-chat-primary. Gradient + shadow-with-
  alpha indigo refs left as-is (no clean theme-aware mapping).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../render/shared/streaming-timeline.component.ts  | 14 +++++++-------
 .../render/spec-rendering/angular/src/index.html   |  1 -
 .../render/state-management/angular/src/index.html |  1 -
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/cockpit/render/shared/streaming-timeline.component.ts b/cockpit/render/shared/streaming-timeline.component.ts
index ffb819c52..4041d4f7b 100644
--- a/cockpit/render/shared/streaming-timeline.component.ts
+++ b/cockpit/render/shared/streaming-timeline.component.ts
@@ -6,9 +6,9 @@ import { StreamingSimulator } from './streaming-simulator';
   selector: 'streaming-timeline',
   standalone: true,
   template: `
-    <div class="flex items-center gap-3 bg-gray-900 rounded-lg px-4 py-3">
+    <div class="flex items-center gap-3 bg-[var(--ngaf-chat-surface)] rounded-lg px-4 py-3">
       <button
-        class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 bg-indigo-500 hover:bg-indigo-400 transition-colors"
+        class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 bg-[var(--ngaf-chat-primary)] hover:bg-[var(--ngaf-chat-primary)] transition-colors"
         (click)="simulator().toggle()">
         @if (simulator().playing()) {
           <svg width="14" height="14" viewBox="0 0 14 14" fill="white">
@@ -24,7 +24,7 @@ import { StreamingSimulator } from './streaming-simulator';
 
       <div
         #track
-        class="flex-1 relative h-1.5 bg-gray-800 rounded-full cursor-pointer"
+        class="flex-1 relative h-1.5 bg-[var(--ngaf-chat-surface-alt)] rounded-full cursor-pointer"
         (mousedown)="onTrackMouseDown($event)"
         (touchstart)="onTrackTouchStart($event)">
         <div
@@ -32,13 +32,13 @@ import { StreamingSimulator } from './streaming-simulator';
           [style.width.%]="simulator().progress() * 100">
         </div>
         <div
-          class="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full border-2 border-indigo-500 shadow-lg shadow-indigo-500/30 -translate-x-1/2 transition-[left] duration-75"
+          class="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full border-2 border-[var(--ngaf-chat-primary)] shadow-lg shadow-indigo-500/30 -translate-x-1/2 transition-[left] duration-75"
           [style.left.%]="simulator().progress() * 100">
         </div>
       </div>
 
-      <div class="text-xs text-gray-400 tabular-nums shrink-0 min-w-[100px] text-right">
-        <span class="text-gray-200 font-semibold">{{ simulator().position() }}</span>
+      <div class="text-xs text-[var(--ngaf-chat-text-muted)] tabular-nums shrink-0 min-w-[100px] text-right">
+        <span class="text-[var(--ngaf-chat-text)] font-semibold">{{ simulator().position() }}</span>
         / {{ simulator().total() }} chars
       </div>
 
@@ -46,7 +46,7 @@ import { StreamingSimulator } from './streaming-simulator';
         @for (s of speeds; track s) {
           <button
             class="text-[10px] px-2.5 py-1 rounded transition-colors"
-            [class]="simulator().speed() === s ? 'text-indigo-400 bg-indigo-950 font-semibold' : 'text-gray-400 bg-gray-800 hover:text-gray-300'"
+            [class]="simulator().speed() === s ? 'text-[var(--ngaf-chat-primary)] bg-[var(--ngaf-chat-surface-alt)] font-semibold' : 'text-[var(--ngaf-chat-text-muted)] bg-[var(--ngaf-chat-surface-alt)] hover:text-[var(--ngaf-chat-text-muted)]'"
             (click)="simulator().setSpeed(s)">
             {{ s }}x
           </button>
diff --git a/cockpit/render/spec-rendering/angular/src/index.html b/cockpit/render/spec-rendering/angular/src/index.html
index e3184131b..034ac4e14 100644
--- a/cockpit/render/spec-rendering/angular/src/index.html
+++ b/cockpit/render/spec-rendering/angular/src/index.html
@@ -5,7 +5,6 @@
   <title>Render Spec Rendering — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
   <app-spec-rendering></app-spec-rendering>
diff --git a/cockpit/render/state-management/angular/src/index.html b/cockpit/render/state-management/angular/src/index.html
index 82ae12915..4ecf03f2c 100644
--- a/cockpit/render/state-management/angular/src/index.html
+++ b/cockpit/render/state-management/angular/src/index.html
@@ -5,7 +5,6 @@
   <title>Render State Management — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
   <app-state-management></app-state-management>