Skip to content

feat: cockpit examples theme sync — stage 1 (library + pilot) #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blove merged 8 commits into from
May 13, 2026
Merged

feat: cockpit examples theme sync — stage 1 (library + pilot) #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7c5023
docs: cockpit examples theme sync + Tailwind v4 migration design
blove May 13, 2026
a53f7a9
docs: cockpit examples theme sync stage 1 plan (library + pilot)
blove May 13, 2026
8fd1b70
refactor: move cssVars from @ngaf/ui-react to @ngaf/design-tokens
blove May 13, 2026
99949e2
feat(example-layouts): add installEmbeddedTheme for iframed apps
blove May 13, 2026
f9ba6a7
feat(example-layouts): add theme.css (Tailwind v4 + dark variant + na…
blove May 13, 2026
bce02e3
chore: add Tailwind v4 + @tailwindcss/postcss to workspace devDeps
blove May 13, 2026
cf49c37
feat(examples): migrate chat-timeline to Tailwind v4 + theme sync
blove May 13, 2026
5bea511
chore: bump design-tokens, ui-react, example-layouts patch versions
blove May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions cockpit/chat/timeline/angular/src/app/timeline.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ import { environment } from '../environments/environment';
template: `
<example-chat-layout sidebarWidth="w-80">
<chat main [agent]="agent" class="flex-1 min-w-0" />
<div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
<div sidebar class="p-4 space-y-4" style="background: var(--ds-canvas); color: var(--ds-text-primary);">
<h3 class="text-xs font-semibold uppercase tracking-wide"
style="color: var(--chat-text-muted, #777);">Timeline</h3>
style="color: var(--ds-text-muted);">Timeline</h3>
<chat-timeline-slider [agent]="agent" />
<div class="mt-4">
<h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
style="color: var(--chat-text-muted, #777);">How It Works</h4>
<p class="text-xs" style="color: var(--chat-text-muted, #777);">
style="color: var(--ds-text-muted);">How It Works</h4>
<p class="text-xs" style="color: var(--ds-text-muted);">
Each message creates a checkpoint. Use the slider to navigate
through conversation history and branch from any point.
</p>
Expand Down
3 changes: 1 addition & 2 deletions cockpit/chat/timeline/angular/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<title>Chat Timeline — 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-timeline></app-timeline>
</body>
</html>
3 changes: 3 additions & 0 deletions cockpit/chat/timeline/angular/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
// SPDX-License-Identifier: MIT
import { bootstrapApplication } from '@angular/platform-browser';
import { installEmbeddedTheme } from '@ngaf/example-layouts';
import { appConfig } from './app/app.config';
import { TimelineComponent } from './app/timeline.component';

installEmbeddedTheme();

bootstrapApplication(TimelineComponent, appConfig).catch(console.error);
11 changes: 10 additions & 1 deletion cockpit/chat/timeline/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
/* Global styles for the timeline capability demo */
@import "../../../../../libs/example-layouts/src/theme.css";

/* App-specific globals (none for now; add below this line if needed). */
html, body {
height: 100%;
margin: 0;
background: var(--ds-canvas);
color: var(--ds-text-primary);
font-family: var(--ds-font-sans);
}
Loading
Loading