feat: cockpit examples theme sync — stage 1 (library + pilot)#301
Merged
Conversation
Spec for syncing 32 Angular example apps with cockpit theme via postMessage + migrating Tailwind v3 CDN → v4 centralized in @ngaf/example-layouts. TS-source-of-truth palette via cssVars(theme) relocated to @ngaf/design-tokens. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
8 tasks: cssVars relocation to @ngaf/design-tokens, installEmbeddedTheme in @ngaf/example-layouts, theme.css with Tailwind v4 + dark variant + namespace bridge, workspace PostCSS config, chat-timeline pilot migration, version bumps, chrome MCP smoke, PR ship. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Pilot migration for cockpit examples theme sync (Stage 1, Task 5): - index.html: drop v3 Tailwind CDN script and hardcoded body classes - styles.css: import @ngaf/example-layouts theme.css and set --ds-* globals - main.ts: call installEmbeddedTheme() before bootstrap - timeline.component.ts: replace --chat-* inline-style fallbacks with --ds-* Theme.css imported via relative path since @ngaf/example-layouts is not symlinked in node_modules; revisit if workspace layout changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stage 1 of cockpit example theme sync (spec:
docs/superpowers/specs/2026-05-13-cockpit-examples-theme-sync-design.md, plan:docs/superpowers/plans/2026-05-13-cockpit-examples-theme-sync-stage-1.md).cssVars(theme)relocated from@ngaf/ui-react→@ngaf/design-tokens(pure TS, framework-agnostic).@ngaf/ui-reactre-exports for React consumers — cockpit's import path is unchanged.installEmbeddedTheme()added to@ngaf/example-layouts— vanilla TS helper that applies thecssVars(theme)palette to<html>and listens forngaf:themepostMessage from cockpit's<ThemedFrame>host. Defaults to dark, postsngaf:theme-requeston init for handshake.@ngaf/example-layouts/theme.cssadded — Tailwind v4 entry +@custom-variant dark (&:where([data-theme="dark"] *))+ namespace bridge (legacy--ngaf-chat-*→--ds-*).@tailwindcss/postcss+tailwindcssat workspace devDeps;postcss.config.mjsat repo root mirroring the website's config.cockpit/chat/timeline/angulardrops the v3 CDN, swaps hardcodedbg-gray-950 text-gray-100for CSS-variable utilities, callsinstallEmbeddedTheme()frommain.ts.Stage 2 (remaining 31 Angular example apps in waves grouped by library) ships in a separate PR after this pilot is approved.
Known follow-up
The pilot's
styles.cssimportstheme.cssvia a 5-level relative path (@import "../../../../../libs/example-layouts/src/theme.css") rather than the package import@import "@ngaf/example-layouts/theme.css". esbuild's CSS resolver in@angular/build:applicationuses Node module resolution and doesn't consult tsconfig paths or pnpm workspace symlinks (rootpackage.jsonhas noworkspacesfield). Every Stage 2 app needs the same 5-level relative path, which is a constant pattern — workable for now, but cleaner to resolve before fanning out to 31 apps. Options: real npm/pnpm workspace setup, manual symlink, or per-app re-export of the CSS.Test plan
pnpm nx run-many -t lint,test -p design-tokens,ui-react,example-layouts,cockpit— greenpnpm nx e2e cockpit— 6/6 greenpnpm nx build website— green (85 prerendered pages)pnpm nx build cockpit-chat-timeline-angular— green🤖 Generated with Claude Code