Skip to content

Restyle: color scheme warm-ish + serif font #1052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
liviolanda wants to merge 4 commits into from
Closed

Restyle: color scheme warm-ish + serif font #1052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a33ea4
style: restyle theme with new fonts and color palette
Jun 27, 2026
53c3984
style: eliminate pure white/black and swap heading font to EB Garamond
Jul 2, 2026
11c1818
style: add warm-ish color-scheme palette and token-based bubble
Jul 2, 2026
6ab47c1
style: swap fonts to DM Sans (body) and Radley (headings) for warm-is…
Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@fontsource-variable/dm-sans": "^5.2.8",
"@fontsource/radley": "^5.2.8",
"@fontsource/space-mono": "^5.2.9",
"@hookform/resolvers": "^5.2.1",
"@icons-pack/react-simple-icons": "^13.13.0",
"@journeyapps/wa-sqlite": "^1.7.0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/chat-prompt-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ export const ChatPromptInput = forwardRef<ChatPromptInputRef, ChatPromptInputPro
onStop={stop}
autoFocus={!isMobile}
submitOnEnter={!isStreaming && !shouldInsertNewlineOnEnter}
className="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"
footerStartElements={footerStartElements}
renderOverlay={(value) => renderHighlightedSkillTokens(value, classifySkill)}
popoverSlot={
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/message-bubbles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const MessageBubbles = ({ message }: MessageBubblesProps) =>
message.parts
.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]">

@cursor cursor Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

User bubble size ignores body scale

Low Severity

User message bubbles now force text-[14px] while the same PR moves the prompt input and overlay to var(--font-size-body) (16px on mobile, 14px from 768px up). On phones, user chat text renders smaller than the rest of the chat UI.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 11c1818. Configure here.

<div className="space-y-2">
<MemoizedMarkdown id={`${message.id}_${j}`} content={part.text || ''} />
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/provider-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const GmailIcon = () => (
*/
export const GoogleCalendarIcon = () => (
<svg className="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="22" height="22" x="13" y="13" fill="#fff" />
<rect width="22" height="22" x="13" y="13" fill="#fafafa" />
<polygon
fill="#1e88e5"
points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616"
Expand Down Expand Up @@ -120,15 +120,15 @@ export const OutlookIcon = () => (
d="M27.198,42.999H11.589c-3.646,0-6.602-2.956-6.602-6.602V17.783c0,1.076,0.552,2.076,1.461,2.649 l23.067,14.543c1.263,0.796,2.029,2.185,2.029,3.678C31.544,41.053,29.598,42.999,27.198,42.999z"
/>
<path
fill="#fff"
fill="#fafafa"
d="M11.282,36.236c-1.398,0-2.545-0.437-3.442-1.312c-0.897-0.874-1.346-2.015-1.346-3.423 c0-1.486,0.455-2.689,1.366-3.607c0.911-0.918,2.103-1.377,3.577-1.377c1.393,0,2.526,0.439,3.401,1.318 c0.879,0.879,1.319,2.037,1.319,3.475c0,1.478-0.456,2.669-1.366,3.574C13.885,35.786,12.716,36.236,11.282,36.236z M11.323,34.381 c0.762,0,1.375-0.26,1.839-0.78c0.464-0.52,0.696-1.244,0.696-2.171c0-0.966-0.226-1.718-0.676-2.256 c-0.451-0.538-1.053-0.806-1.805-0.806c-0.775,0-1.4,0.278-1.873,0.833c-0.473,0.551-0.71,1.281-0.71,2.19 c0,0.923,0.237,1.653,0.71,2.19C9.977,34.114,10.583,34.381,11.323,34.381z"
/>
<path
fill="#1565c0"
d="M6.453,23h10.094C18.454,23,20,24.546,20,26.453v10.094C20,38.454,18.454,40,16.547,40H6.453 C4.546,40,3,38.454,3,36.547V26.453C3,24.546,4.546,23,6.453,23z"
/>
<path
fill="#fff"
fill="#fafafa"
d="M11.453,36.518c-1.4,0-2.55-0.452-3.449-1.355c-0.899-0.903-1.348-2.082-1.348-3.537 c0-1.536,0.456-2.778,1.369-3.726c0.913-0.949,2.107-1.423,3.584-1.423c1.396,0,2.532,0.454,3.408,1.362 c0.881,0.908,1.321,2.105,1.321,3.591c0,1.527-0.456,2.758-1.369,3.692C14.061,36.053,12.889,36.518,11.453,36.518z M11.493,34.601 c0.763,0,1.378-0.269,1.843-0.806c0.465-0.538,0.698-1.285,0.698-2.243c0-0.998-0.226-1.775-0.677-2.331 c-0.452-0.556-1.055-0.833-1.809-0.833c-0.777,0-1.403,0.287-1.877,0.861c-0.474,0.569-0.711,1.323-0.711,2.263 c0,0.953,0.237,1.707,0.711,2.263C10.145,34.326,10.752,34.601,11.493,34.601z"
/>
</svg>
Expand All @@ -140,10 +140,10 @@ export const OutlookIcon = () => (
export const MicrosoftCalendarIcon = () => (
<svg className="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#1976d2" d="M28,13h14.533C43.343,13,44,13.657,44,14.467v19.066C44,34.343,43.343,35,42.533,35H28V13z" />
<rect width="14" height="15.542" x="28" y="17.958" fill="#fff" />
<rect width="14" height="15.542" x="28" y="17.958" fill="#fafafa" />
<polygon fill="#1976d2" points="27,44 4,39.5 4,8.5 27,4" />
<path
fill="#fff"
fill="#fafafa"
d="M15.25,16.5c-3.176,0-5.75,3.358-5.75,7.5s2.574,7.5,5.75,7.5S21,28.142,21,24 S18.426,16.5,15.25,16.5z M15,28.5c-1.657,0-3-2.015-3-4.5s1.343-4.5,3-4.5s3,2.015,3,4.5S16.657,28.5,15,28.5z"
/>
<rect width="2.7" height="2.9" x="28.047" y="29.737" fill="#1976d2" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/sidebar-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const SidebarFooter = ({ className }: SidebarFooterProps) => {

return (
<Popover open={menuOpen} onOpenChange={setMenuOpen} modal={isMobile}>
<ShadcnSidebarFooter className={cn('border-t border-border !p-0 !gap-0', className)}>
<ShadcnSidebarFooter className={cn('!p-0 !gap-0', className)}>
<SidebarMenu>
<SidebarMenuItem>
{isPending ? (
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const Combobox = ({
disabled={disabled}
{...triggerProps}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-[var(--touch-height-default)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-[var(--touch-height-default)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
!triggerLabel && 'text-muted-foreground',
className,
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react'
import { cn } from '@/lib/utils'

const inputVariants = cva(
'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 rounded-lg border bg-transparent px-3 py-1 text-[length:var(--font-size-body)] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
'border-border file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 rounded-lg border bg-transparent px-3 py-1 text-[length:var(--font-size-body)] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
{
variants: {
variant: {
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/prompt-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
<div
ref={overlayRef}
aria-hidden="true"
className="pointer-events-none absolute inset-0 z-10 overflow-hidden whitespace-pre-wrap break-words px-1 py-2 text-base leading-5 text-foreground"
className="pointer-events-none absolute inset-0 z-10 overflow-hidden whitespace-pre-wrap break-words px-1 py-2 text-[length:var(--font-size-body)] leading-5 text-foreground"
>
{renderOverlay(value)}
</div>
Expand All @@ -170,7 +170,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
maxHeight={240}
autoFocus={autoFocus}
className={cn(
'w-full border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 resize-none px-1 py-2 text-base leading-5',
'w-full border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 resize-none px-1 py-2 text-[length:var(--font-size-body)] leading-5',
renderOverlay && 'text-transparent caret-foreground',
)}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const SelectTrigger = ({
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[var(--touch-height-default)] data-[size=sm]:h-[var(--touch-height-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[var(--touch-height-default)] data-[size=sm]:h-[var(--touch-height-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Switch = ({ className, onCheckedChange, ...props }: ComponentProps<typeof
<SwitchPrimitive.Root
data-slot="switch"
className={cn(
'cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[var(--switch-track-height)] w-[var(--switch-track-width)] shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
'cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[var(--switch-track-height)] w-[var(--switch-track-width)] shrink-0 items-center rounded-full border border-transparent dark:border-border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
onCheckedChange={handleCheckedChange}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Textarea = ({ className, ...props }: ComponentProps<'textarea'>) => {
<textarea
data-slot="textarea"
className={cn(
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 md:min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
'border-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 md:min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const toggleVariants = cva(
variants: {
variant: {
default: 'bg-transparent',
outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
outline: 'border border-border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
},
size: {
default: 'h-[var(--touch-height-default)] px-2 min-w-[var(--touch-height-default)]',
Expand Down
Loading