feat: cockpit dark mode token system#298
Merged
Merged
Conversation
Spec for cockpit-only dark mode: dark by default with light toggle, typed `cssVars(theme)` resolution, cookie source of truth, per-frame postMessage sync for embedded iframes, paired OG image flip. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
15 bite-sized tasks covering token split, cssVars(theme), ThemeProvider, ThemedFrame, useEmbeddedTheme, ThemeToggle, cookie route, layout wiring, sidebar footer, RunMode iframe wrap, OG flip, e2e, version bumps, PR. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…emove surfaces.ts
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- @ngaf/design-tokens: 0.0.31 → 0.0.32 - @ngaf/ui-react: 0.0.29 → 0.0.30 Also includes follow-ups required to keep the check stack green after Task 10 added <ThemeToggle> (which calls useRouter from next/navigation) to the cockpit sidebar: - apps/cockpit/test-setup.ts: mock next/navigation so renderToStaticMarkup tests of CockpitSidebar / CockpitShell don't trip the "expected app router to be mounted" invariant. - apps/cockpit/vite.config.mts: wire setupFiles to the new test-setup.ts. - libs/ui-react/src/lib/themed-frame.spec.tsx: replace non-null assertion with explicit guard to clear the @typescript-eslint/no-non-null-assertion lint warning. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
54 website consumers use `tokens.colors.X`, `colors.textPrimary`, etc. directly. Restore the original shapes as light-theme aliases so the website (light-only) keeps working without per-file migration. New theme-aware API (baseTokens, lightOverrides, darkOverrides, cssVars(theme)) is unchanged. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
@ngaf/design-tokensinto invariantbaseTokens+ smalllightOverrides/darkOverrides;cssVars(theme)resolves at runtime in@ngaf/ui-react.themecookie is the source of truth;useTransition+ synchronous DOM updates make the toggle feel instant before the server confirms.<ThemedFrame>+useEmbeddedTheme()to@ngaf/ui-reactfor per-frame postMessage theme sync — replaces the run-mode iframe wrapper. Embedded examples opt in by callinguseEmbeddedTheme()(cacheplane adoption is a separate follow-up).@ngaf/design-tokens0.0.31 → 0.0.32 and@ngaf/ui-react0.0.29 → 0.0.30 (patch-only per the release rule).Out of scope: marketing site, docs, email renderings (all explicitly excluded in the spec).
Spec:
docs/superpowers/specs/2026-05-13-cockpit-dark-mode-design.mdPlan:
docs/superpowers/plans/2026-05-13-cockpit-dark-mode.mdTest plan
pnpm nx run-many -t lint,test -p design-tokens,ui-react,cockpit— greenpnpm nx e2e cockpit— 6/6 (3 new dark-mode tests + existing cockpit nav)curl --ipv4 -o /tmp/og-cockpit.png http://localhost:4201/opengraph-imageand eyeball dark canvas🤖 Generated with Claude Code