Rebrand: sync MUI theme with data-brand in frontend/ entry points#73721
Rebrand: sync MUI theme with data-brand in frontend/ entry points#73721levadadenys wants to merge 1 commit into
Conversation
frontend/apps/studio/src/routes/__root.tsx and frontend/packages/markdown/demo/main.tsx both load brandOverrides.css (codeai-color-bridge) but hardcoded CdoTheme, so MUI palette-driven components didn't rebrand under codeai-next/codeai-audit even though CSS tokens did. apps/src/util/brand.ts already solves this for the legacy apps/ workspace via getCurrentBrand()/getMuiThemeForBrand(), but frontend/ packages can't import from it, so this adds a getMuiThemeForBrand(brand) counterpart to component-library/themes (already a shared dependency of both) and wires both entry points to it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cdadee2d1c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // data-brand is set server-side via Cdo::Brand before this bundle loads, and | ||
| // doesn't change without a full page reload, so it's safe to read once here | ||
| // rather than re-resolving per render. | ||
| const theme = getMuiThemeForBrand(document.documentElement.dataset.brand); |
There was a problem hiding this comment.
In Rails-served Studio this always passes undefined: FrontendStudioController#index renders dashboard/app/views/frontend_studio/index.html.haml with layout: false, and that shell's %html tag does not emit data-brand like application.html.haml does. When the brand router resolves codeai-next or codeai-audit, Studio still receives CdoTheme, so the CSS/MUI brand sync added here never takes effect; set data-brand in the Studio shell or read the brand from a value it actually emits.
Useful? React with 👍 / 👎.
1 participant
What
Follow-up to #73701, closing two findings from its Copilot re-review:
frontend/apps/studio/src/routes/__root.tsxandfrontend/packages/markdown/demo/main.tsxboth loadbrandOverrides.css, so their CSS tokens correctly flip under?brand=codeai-next/codeai-audit, but both hardcoded<ThemeProvider theme={CdoTheme}>— so MUI palette-driven components (buttons, etc.) stayed Code.org-purple regardless of the active brand, giving an inconsistent preview for exactly the two surfaces meant to QA the rebrand.Stacked on #73701 — this branch is based on
denys/re/codeai-color-bridge, notstaging, since it depends onbrandOverrides.css,CodeaiTheme, andCodeaiAuditThemeintroduced there. Merge #73701 first.How
apps/src/util/brand.tsalready solves this for the legacyapps/webpack workspace (getCurrentBrand()/getMuiThemeForBrand()), already used correctly bycreateReactRoot.tsxandcode-studio.js. Butfrontend/packages can't import fromapps/src/(separate Turborepo workspace, separate build tooling), and there was no brand-detection code anywhere underfrontend/.Added a
getMuiThemeForBrand(brand: string | undefined)export tofrontend/packages/component-library/src/themes— already a shared dependency of bothapps/andfrontend/for the theme objects themselves. It takes the rawdata-brandattribute value directly (not theBrandCodeunion type, which frontend/ has no equivalent of) and maps it toCdoTheme/CodeaiTheme/CodeaiAuditTheme.Wired both entry points to call it with
document.documentElement.dataset.brand, computed once (brand doesn't change without a full page reload — matches the existing pattern increateReactRoot.tsx).Testing
getMuiThemeForBrand(6 cases: both real brands,code/codeai/unknown/undefined all fall back toCdoTheme).component-librarytypecheck + full test suite (348 tests) pass.studioandmarkdownpackages typecheck and build clean with the new import wired in.git stashthat the one remaining typecheck error instudio(@code-dot-org/music-lab/mocks) is pre-existing and unrelated to this change.🤖 Generated with Claude Code