feat(web): apply Dimidium colour theme - #4606
Conversation
chore: sync fork main with upstream (pingdotgg/t3code)
Extends export-brand-icons.ts and brand-assets.ts to render 192x192, 512x512, and a maskable 512x512 variant per brand (dev/nightly/prod), reusing the existing Icon Composer pipeline and web-icon-override plumbing instead of a one-off script. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TTVJtXqCAjdqNP9quVfjQJ
Adds apps/web/public/manifest.json (standalone display, theme colors matching the existing light/dark boot-shell values, icon entries for the 192/512/maskable assets from the icon-generation pipeline) and wires it into index.html alongside apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style, and apple-mobile-web-app-title next to the existing apple-touch-icon link. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TTVJtXqCAjdqNP9quVfjQJ
Adds vite-plugin-pwa with the Workbox generateSW strategy for precaching. manifest.json stays hand-authored (see #3) so the plugin only owns SW generation. Registration is done manually with a plain navigator.serviceWorker.register("/sw.js") call, guarded by the existing isElectron flag, since Electron loads this same bundle over a custom protocol rather than a real origin — the plugin's virtual:pwa-register module also fails to resolve workbox-window under vite-plus/rolldown, so manual registration sidesteps that gap entirely. Raises Workbox's default 2 MiB precache cap to 8 MiB to cover the editor bundle's larger entry chunk. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TTVJtXqCAjdqNP9quVfjQJ
feat(web): installable iOS PWA for apps/web
Replace the default blue-based light/dark palette in index.css with the Dimidium light/dark palette (backgrounds, foregrounds, accent green, semantic colours) across the root theme and both sidebar variants. Fonts are unchanged.
github-actions
Bot
added
vouch:unvouched
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| developmentWebFavicon32Png: "assets/dev/blueprint-web-favicon-32x32.png", | ||
| developmentWebAppleTouchIconPng: "assets/dev/blueprint-web-apple-touch-180.png", | ||
|
|
||
| productionWebPwaIcon192Png: "assets/prod/t3-black-web-pwa-192x192.png", |
There was a problem hiding this comment.
🟠 High lib/brand-assets.ts:33
The newly added productionWebPwaIcon192Png, productionWebPwaIcon512Png, productionWebMaskableIcon512Png (and the matching nightly/development variants) reference asset files that are not present in this commit. PUBLISH_ICON_OVERRIDES is built via resolveWebIconOverrides("production", "dist/client"), so it now includes these missing source paths. The publish CLI reads/copies every override source, so every production publish fails when it reaches the absent PWA/maskable PNGs. Consider adding the missing assets/prod, assets/nightly, and assets/dev PNGs to the commit before registering these paths, or remove the PWA/maskable entries from WEB_ICON_SOURCE_PATHS_BY_BRAND and the overrides until the files exist.
Also found in 1 other location(s)
apps/web/public/manifest.json:10
The manifest references
/pwa-192x192.png(and the 512px/maskable variants), but none of these files exists anywhere in the repository. Every declared PWA icon therefore returns 404 in the built app, leaving installations without the intended app icons and potentially preventing browsers that require a valid manifest icon from offering installation.
🤖 Copy this AI Prompt to have your agent fix this:
In file @scripts/lib/brand-assets.ts around line 33:
The newly added `productionWebPwaIcon192Png`, `productionWebPwaIcon512Png`, `productionWebMaskableIcon512Png` (and the matching `nightly`/`development` variants) reference asset files that are not present in this commit. `PUBLISH_ICON_OVERRIDES` is built via `resolveWebIconOverrides("production", "dist/client")`, so it now includes these missing source paths. The publish CLI reads/copies every override source, so every production publish fails when it reaches the absent PWA/maskable PNGs. Consider adding the missing `assets/prod`, `assets/nightly`, and `assets/dev` PNGs to the commit before registering these paths, or remove the PWA/maskable entries from `WEB_ICON_SOURCE_PATHS_BY_BRAND` and the overrides until the files exist.
Also found in 1 other location(s):
- apps/web/public/manifest.json:10 -- The manifest references `/pwa-192x192.png` (and the 512px/maskable variants), but none of these files exists anywhere in the repository. Every declared PWA icon therefore returns 404 in the built app, leaving installations without the intended app icons and potentially preventing browsers that require a valid manifest icon from offering installation.
| --ring: #37e57b; | ||
| --destructive-foreground: #ff643b; | ||
| --info: #688dfd; | ||
| --info-foreground: #0575d8; |
There was a problem hiding this comment.
🟡 Medium src/index.css:740
In dark mode, --info-foreground: #0575d8 produces text at roughly 3.2:1 contrast against the Badge info variant's bg-info/16 surface — below WCAG AA's 4.5:1 minimum. #0575d8 is too dark for its actual surfaces, making info badge labels hard to read. The value should be substantially lighter, closer to the light-mode --info-foreground relationship where the foreground is a darker shade of the same hue.
🤖 Copy this AI Prompt to have your agent fix this:
In file @apps/web/src/index.css around line 740:
In dark mode, `--info-foreground: #0575d8` produces text at roughly 3.2:1 contrast against the `Badge` info variant's `bg-info/16` surface — below WCAG AA's 4.5:1 minimum. `#0575d8` is too dark for its actual surfaces, making info badge labels hard to read. The value should be substantially lighter, closer to the light-mode `--info-foreground` relationship where the foreground is a darker shade of the same hue.
| --muted-foreground: #817e7e; | ||
| --accent: rgb(255 255 255 / 4%); | ||
| --accent-foreground: #dee3e4; | ||
| --destructive: #cf494c; |
There was a problem hiding this comment.
🟡 Medium src/index.css:734
In dark mode, --destructive is set to #cf494c, which has only about 3.1:1 contrast against --background (#141414). Error text rendered with text-destructive directly on the dark background falls below the 4.5:1 WCAG AA minimum. The previous dark-mode value lifted the color to maintain accessible contrast; consider using a lighter destructive token for dark mode.
🤖 Copy this AI Prompt to have your agent fix this:
In file @apps/web/src/index.css around line 734:
In dark mode, `--destructive` is set to `#cf494c`, which has only about 3.1:1 contrast against `--background` (`#141414`). Error text rendered with `text-destructive` directly on the dark background falls below the 4.5:1 WCAG AA minimum. The previous dark-mode value lifted the color to maintain accessible contrast; consider using a lighter destructive token for dark mode.
| --card-foreground: #1c1918; | ||
| --popover: #eae5e1; | ||
| --popover-foreground: #1c1918; | ||
| --primary: #1a8e46; |
There was a problem hiding this comment.
🟡 Medium src/index.css:685
The light-theme --primary: #1a8e46 with --primary-foreground: #f5f3f1 yields roughly a 3.8:1 contrast ratio, so text rendered on a primary-colored surface (e.g. default Button and Badge labels using text-primary-foreground on bg-primary) falls below the WCAG AA 4.5:1 minimum for normal-sized text and is hard to read for low-vision users. Consider using a darker --primary or a higher-contrast --primary-foreground so the pair meets at least 4.5:1.
🤖 Copy this AI Prompt to have your agent fix this:
In file @apps/web/src/index.css around line 685:
The light-theme `--primary: #1a8e46` with `--primary-foreground: #f5f3f1` yields roughly a 3.8:1 contrast ratio, so text rendered on a primary-colored surface (e.g. default `Button` and `Badge` labels using `text-primary-foreground` on `bg-primary`) falls below the WCAG AA 4.5:1 minimum for normal-sized text and is hard to read for low-vision users. Consider using a darker `--primary` or a higher-contrast `--primary-foreground` so the pair meets at least 4.5:1.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 5 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
| "type": "image/png", | ||
| "purpose": "maskable" | ||
| } | ||
| ] |
There was a problem hiding this comment.
Missing PWA icon assets
High Severity
The PWA and maskable icon source files are missing from the assets/ directory. While manifest.json and scripts/lib/brand-assets.ts reference these paths, their absence causes build failures during asset copying and prevents PWA icons from loading correctly.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
| <link rel="manifest" href="/manifest.json" /> | ||
| <meta name="apple-mobile-web-app-capable" content="yes" /> | ||
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | ||
| <meta name="apple-mobile-web-app-title" content="T3 Code" /> |
There was a problem hiding this comment.
Boot chrome colors not updated
Medium Severity
The Dimidium theme colors (#f5f3f1 / #141414) aren't consistently applied during initial load. The theme-color meta tags, boot script, inline body styles, and PWA manifest still use the old palette (#ffffff / #161616), causing a flash of incorrect colors and wrong browser/PWA chrome until the runtime theme syncs.
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
| [variant.outputs.windowsIco, ico], | ||
| [variant.outputs.pwaIcon192, yield* render("iOS", 192)], | ||
| [variant.outputs.pwaIcon512, pwaIcon512], | ||
| [variant.outputs.maskableIcon512, pwaIcon512], |
There was a problem hiding this comment.
Maskable icon lacks safe zone
Medium Severity
The maskableIcon512 uses the same full-bleed 512px render as pwaIcon512. Maskable icons require a padded safe zone, so Android adaptive icons will appear cropped.
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
| --ring: #37e57b; | ||
| --destructive-foreground: #ff643b; | ||
| --info: #688dfd; | ||
| --info-foreground: #0575d8; |
There was a problem hiding this comment.
Dark info text poorly contrasted
Medium Severity
In dark mode, --info-foreground is #0575d8, darker than --info and unlike the other semantic foregrounds which go brighter. Badges using text-info-foreground on near-black surfaces get low-contrast info text.
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
| // origin, so the service worker only makes sense in a real browser. | ||
| window.addEventListener("load", () => { | ||
| void navigator.serviceWorker.register("/sw.js"); | ||
| }); |
There was a problem hiding this comment.
SW updates never reload clients
Medium Severity
VitePWA is set to registerType: "autoUpdate" with injectRegister: false, but registration is a bare navigator.serviceWorker.register("/sw.js") with no virtual:pwa-register / workbox-window handler. New precaches can activate without reloading open SPA tabs, leaving users on stale JS after deploy.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 2539103. Configure here.
ApprovabilityVerdict: Needs human review 4 blocking correctness issues found. This PR introduces new PWA functionality alongside theme changes, and has unresolved high-severity comments about missing PWA icon assets that would cause build failures. Multiple accessibility contrast issues and service worker update handling concerns also remain open. You can customize Macroscope's approvability policy. Learn more. |
![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: 2539103593
ℹ️ 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".
| developmentWebFavicon32Png: "assets/dev/blueprint-web-favicon-32x32.png", | ||
| developmentWebAppleTouchIconPng: "assets/dev/blueprint-web-apple-touch-180.png", | ||
|
|
||
| productionWebPwaIcon192Png: "assets/prod/t3-black-web-pwa-192x192.png", |
There was a problem hiding this comment.
These new PWA asset paths are included in resolveWebIconOverrides, but the commit does not add any matching pwa-* or maskable-icon-* PNGs under assets/ or apps/web/public (git ls-tree -r 0720069 returns none). The hosted Vercel build runs scripts/apply-web-brand-assets.ts after @t3tools/web build and copies this production path, so latest/nightly deploys fail with ENOENT; apps/server/scripts/cli.ts has the same missing-source/target problem for bundled web assets. Please commit the regenerated icon files or avoid referencing them until they exist.
Useful? React with 👍 / 👎.
|
Opened in error (wrong repo target from my tooling) — closing. Apologies for the noise. |
1 participant
Summary
apps/web/src/index.csswith the Dimidium palette (backgrounds, foregrounds, accent green, semantic colours) for:root,@variant dark, and both[data-sidebar-version]overrides.Test plan
--primaryand other theme CSS variables resolve to the new Dimidium hex values in both light and dark via Playwright/computed-style check.ECONNREFUSED :13773) — app fell back to its connection-error screen instead of mounting. Recommend a manual pass withnpm run dev(server+web) before merge.🤖 Generated with Claude Code
https://claude.ai/code/session_01YWn9N1i3XsfpGqs6zqqyHR
Note
Medium Risk
Service worker caching can affect how quickly users pick up new deployments; theme changes are global UI with no auth impact.
Overview
The web app gets PWA installability and a Dimidium visual refresh.
PWA: Adds a hand-authored
manifest.json, Apple web-app meta tags, andvite-plugin-pwafor Workbox precaching (/sw.js). Service workers register in the browser only—not in Electron. Brand icon export and deploy overrides now include 192×512 and maskable 512 assets.Theme: Replaces the default blue-accent palette in
index.csswith Dimidium tokens (warm light#f5f3f1, dark#141414, green primary) for:root, dark mode, and sidebar v1/v2 surfaces.Reviewed by Cursor Bugbot for commit 2539103. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Apply Dimidium colour theme and add PWA support to web app
#1a8e46light /#37e57bdark), and updated sidebar variants./sw.jsin main.tsx on page load for non-Electron environments.📊 Macroscope summarized 2539103. 6 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted
🗂️ Filtered Issues
No issues evaluated.