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>
5 tasks
blove
added a commit
that referenced
this pull request
May 15, 2026
…s) (#333) * docs: dark palette alignment design Sibling of #321 (light palette refresh). Aligns design-tokens dark palette to chat lib's neutral-dark aesthetic (rgb(17,17,17) canvas, rgb(28,28,28) surface, etc.) instead of the original brand-blue undertone shipped in #298. Embedded chat in cockpit dark mode now visually unifies with cockpit chrome. Reverses decision D from the original cockpit dark mode brainstorming in favor of design-system cohesion. Accent family stays unchanged (brand identity preserved). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat(design-tokens): align dark palette to neutral grays Reverses #298's brand-blue undertone in dark mode in favor of cohesion with the @ngaf/chat lib's neutral-dark aesthetic. Embedded chat surfaces in cockpit dark mode now unify visually with cockpit chrome — no iframe color seam. Accent family unchanged (brand identity preserved). * test(design-tokens): update dark-theme css-vars assertions Aligns --ds-canvas and --ds-text-primary expectations with the new neutral-dark palette. * test(cockpit): update dark-mode e2e canvas assertion Aligns the default-dark --ds-canvas expectation with the new neutral-dark palette. * chore(design-tokens): bump to 0.0.35 Patch bump for dark palette alignment. * test(example-layouts): update dark-theme install-embedded-theme assertion Aligns the default-dark --ds-canvas expectation with the new neutral-dark palette. * test(example-layouts): fix stale #fafbfc light-canvas assertions Pre-existing test drift missed by #321 (light palette refresh — canvas changed to rgb(255, 255, 255)). Caught while updating the dark assertion in this PR. --------- 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