UI style: restyle theme with new fonts and color palette#1028
UI style: restyle theme with new fonts and color palette#1028liviolanda wants to merge 3 commits into
Conversation
Semgrep Security ScanNo security issues found. |
|
Preview environment deployed 🚀
Stack: Auto-destroys on PR close/merge. Login via the bundled Keycloak realm — |
PR Metrics
Updated Mon, 06 Jul 2026 14:21:06 GMT · run #2189 |
| .filter((part) => part.type === 'text') | ||
| .map((part, j) => ( | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-muted dark:bg-secondary/60 ml-auto mt-6"> | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-[#e8e8e8] dark:bg-secondary/60 ml-auto mt-6"> |
There was a problem hiding this comment.
this hardcodes a raw hex (#e8e8e8) for the light-mode bubble. Looks like we have a bg-accent token that's #e7e7e7. Would it make sense to use it or create a new token for this value?
There was a problem hiding this comment.
create a new token!
| import './polyfills' | ||
|
|
||
| // Self-hosted fonts (offline-capable). Variable fonts ship all weights in one file. | ||
| import '@fontsource-variable/mona-sans' |
There was a problem hiding this comment.
The bare @fontsource-variable/* import pulls every unicode subset (latin, latin-ext, cyrillic, greek, vietnamese, …) plus the full weight axis into the entry bundle, which loads on the landing path. If we only need latin, importing the scoped subset CSS (e.g. the latin/weight-axis file) would ship a lot fewer bytes. Was loading all subsets intended?
There was a problem hiding this comment.
no, don't know how to fix it. would you help me?
|
|
||
| // Self-hosted fonts (offline-capable). Variable fonts ship all weights in one file. | ||
| import '@fontsource-variable/mona-sans' | ||
| import '@fontsource-variable/dm-sans' |
There was a problem hiding this comment.
DM Sans is listed only as a fallback after Mona Sans in --font-sans, but both are self-hosted. So Mona Sans always loads and DM Sans never actually renders, while still being downloaded. Would it makese to drop the DM Sans import and let ui-sans-serif / system-ui be the real fallback?
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| root.classList.add(systemTheme) | ||
|
|
||
| const bgColor = systemTheme === 'dark' ? '#0a0a0a' : '#fff' | ||
| const bgColor = systemTheme === 'dark' ? '#1a2329' : '#fafafa' |
There was a problem hiding this comment.
Pre-paint theme colors stale
Medium Severity
This PR updates theme-provider surface colors to #fafafa / #1a2329, but the inline pre-hydration script in index.html still sets #fff / #0a0a0a on documentElement and meta theme-color. Users see the old palette on first paint and in browser chrome until React mounts, then colors jump to the new slate theme.
Reviewed by Cursor Bugbot for commit 53c3984. Configure here.
| root.classList.add(theme) | ||
|
|
||
| const bgColor = theme === 'dark' ? '#0a0a0a' : '#fff' | ||
| const bgColor = theme === 'dark' ? '#1a2329' : '#fafafa' |
There was a problem hiding this comment.
Chrome background mismatches page
Low Severity
In light mode, theme-provider sets documentElement and meta theme-color to #fafafa, while index.css sets body background to #f5f5f5 via --color-background. Overscroll, safe areas, and any gap around the body can show a lighter band than the main app surface after load.
Reviewed by Cursor Bugbot for commit 53c3984. Configure here.
| .filter((part) => part.type === 'text') | ||
| .map((part, j) => ( | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-muted dark:bg-secondary/60 ml-auto mt-6"> | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-accent dark:bg-secondary/60 ml-auto mt-6 text-[14px]"> |
There was a problem hiding this comment.
User bubble ignores responsive font
Medium Severity
User message bubbles use a fixed text-[14px] while the same PR switches the chat prompt and --font-size-body to scale (16px on mobile, 14px from the md breakpoint), so user text can render smaller than the composer on narrow viewports.
Reviewed by Cursor Bugbot for commit fae3d2c. Configure here.
- add self-hosted fonts: Mona Sans (body), Mozilla Text (headings), Space Mono (code) - introduce full light and dark color palette with a cohesive slate dark theme - fix dark-mode border visibility across form controls (input, select, switch, toggle, etc.) - make chat-input font size responsive and match its background/outline to slate - darken the user message bubble slightly in light mode - remove sidebar section dividers
- Remap Tailwind --color-white to #fafafa and --color-black to #1a2329 so nothing renders as #ffffff/#000000; apply the same in provider-icon SVG fills and theme-provider hardcoded colors - Swap heading font from Mozilla Text to EB Garamond and drop DM Sans from the body stack - Set explicit 14px on chat message bubbles - Restyle skill-form Description/Instructions labels (responsive 14px, new foreground colors)
liviolanda
force-pushed
the
restyle-theme-fonts-colors
branch
from
fae3d2c to
fd56588
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 5 total unresolved issues (including 3 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fd56588. Configure here.
| className="relative z-10 flex flex-col w-full gap-0 rounded-2xl border bg-card p-2 dark:border-input dark:bg-[oklch(0.182_0_0)]" | ||
| ======= | ||
| className="flex flex-col w-full gap-0 rounded-2xl border bg-sidebar p-2" | ||
| >>>>>>> 2a33ea40 (style: restyle theme with new fonts and color palette) |
There was a problem hiding this comment.
Unmerged conflict markers remain
High Severity
The chat prompt className prop still contains Git conflict markers (<<<<<<<, =======, >>>>>>>) with two competing values. That invalid JSX prevents the file from parsing and blocks the app from building until the merge is resolved.
Reviewed by Cursor Bugbot for commit fd56588. Configure here.
| .filter((part) => part.type === 'text') | ||
| .map((part, j) => ( | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-muted dark:bg-secondary/60 ml-auto mt-6"> | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-accent dark:bg-secondary/60 ml-auto mt-6 text-[14px]"> |
There was a problem hiding this comment.
Unmerged conflict breaks MessageBubbles
High Severity
message-bubbles.tsx still has Git conflict markers and two conflicting MessageBubbles implementations stitched together. The result is invalid JSX (mismatched tags), duplicate text-bubble rendering, and a reference to hasTransformer without an import in the kept HEAD block.
Reviewed by Cursor Bugbot for commit fd56588. Configure here.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🔭 thunder-deep-review (advisory)
Complements the other bots — surfaces only what they did not flag. Never approves, never requests changes, never gates merge.
head: fd5658805564 · mode: single · deferred 7 item(s) already reported by other bots (best-effort dedup)
| <label htmlFor="skill-description" className="flex items-center gap-1.5 text-base text-foreground"> | ||
| <label | ||
| htmlFor="skill-description" | ||
| className="flex items-center gap-1.5 text-[length:var(--font-size-body)] text-[#393333] dark:text-[#f5f5f5]" |
There was a problem hiding this comment.
📐 Convention — Hardcoded hex label colors instead of a theme token
This PR's whole thesis is "no pure white/black anywhere — use theme tokens," so it caught my eye that these two labels swap the old text-foreground for hardcoded text-[#393333] dark:text-[#f5f5f5]. Neither hex is in the new palette (light foreground is #211d1d, dark is #f2f7fc, and #f5f5f5 is actually the light background color being reused as dark text), and hardcoding them means these labels won't follow any future theme tweak. The same pattern repeats on line 201. Could we keep text-foreground here so they stay on-palette and theme-aware?
| --color-muted-foreground: #797979; | ||
| --color-accent: #e7e7e7; | ||
| --color-accent-foreground: #211d1d; | ||
| --color-destructive: #ff5f5f; |
There was a problem hiding this comment.
📐 Convention — New destructive red may be too light for error text on light backgrounds
I wonder if the lighter --color-destructive: #ff5f5f hurts readability when used as text-destructive on the light surfaces. Against the new #f5f5f5 background it lands around 2.7:1 contrast, which is under the 4.5:1 WCAG AA bar for normal text (the previous saturated red was noticeably darker). It's fine as a button background with the dark destructive-foreground, but inline error/validation text could get hard to read. Might be worth a slightly darker red for the light theme, or verifying the AA contrast where destructive text appears.
2 participants
Note
High Risk
Unresolved merge conflicts in
chat-prompt-input.tsxandmessage-bubbles.tsxwill break the build and may drop attachment UI if the wrong side is kept.Overview
Visual refresh replaces the oklch-based theme with a cohesive hex palette for light and dark (slate dark), remaps Tailwind
white/blackto off-white and slate, and wires Mona Sans (UI), EB Garamond (headings via base layer), and Space Mono (code) through@fontsourceimports inindex.tsx.theme-providerand provider SVG fills now use the same off-white/dark background colors instead of#fff/#0a0a0a.Form and shell polish: shared controls (
input,select,textarea,combobox,toggleoutline,switchin dark) switch default borders fromborder-inputtoborder-borderfor clearer edges; the chat prompt overlay/textarea usevar(--font-size-body)instead oftext-base. Sidebars drop separators and several top/bottom borders (header, footer).Chat-specific: user text bubbles move from
bg-mutedtobg-accentwithtext-[14px]in light/dark.Blocker: the diff still contains unresolved
<<<<<<</=======/>>>>>>>markers inchat-prompt-input.tsx(prompt container classes:bg-card+ dark oklch vsbg-sidebar) andmessage-bubbles.tsx(HEAD attachment/FileCardflow vs a stripped text-only branch)—the PR cannot build until those are resolved.Reviewed by Cursor Bugbot for commit fd56588. Bugbot is set up for automated code reviews on this repo. Configure here.