Skip to content

Design: App styling following blue Enterprise site tones #1074

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 8 commits into from
Closed

Design: App styling following blue Enterprise site tones #1074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5191e43
design: unified styling system for web and app
liviolanda Jul 11, 2026
e52965f
design: refine enterprise page and app styling
liviolanda Jul 11, 2026
2076b47
design: unify light and dark themes with enterprise color scheme
liviolanda Jul 13, 2026
68f7673
design: make dark theme titles almost white for better readability
liviolanda Jul 13, 2026
b78d059
fix(marketing): set font-mono to IBM Plex Mono for monospace text
liviolanda Jul 15, 2026
fe6ff0d
style: uppercase all monospaced font text
liviolanda Jul 15, 2026
3a0c1f3
fix: improve dark theme input field visibility
liviolanda Jul 15, 2026
8a59367
config: enable autoPort for dev server
liviolanda Jul 15, 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
3 changes: 3 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.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"@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",
"@hookform/resolvers": "^5.2.1",
"@icons-pack/react-simple-icons": "^13.13.0",
"@journeyapps/wa-sqlite": "^1.7.0",
Expand Down
48 changes: 47 additions & 1 deletion src/assets/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 @@ -726,7 +726,7 @@ export const ChatPromptInput = forwardRef<ChatPromptInputRef, ChatPromptInputPro
onStop={stop}
autoFocus={!isMobile}
submitOnEnter={!isStreaming && !shouldInsertNewlineOnEnter}
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="relative z-10 flex flex-col w-full gap-0 rounded-2xl border bg-card p-2 dark:border-input dark:bg-secondary"
footerStartElements={footerStartElements}
renderOverlay={(value) => renderHighlightedSkillTokens(value, classifySkill)}
popoverSlot={
Expand Down
8 changes: 7 additions & 1 deletion src/components/ui/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,13 @@ const CardHeader = ({ className, ...props }: ComponentProps<'div'>) => {
}

const CardTitle = ({ className, ...props }: ComponentProps<'div'>) => {
return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />
return (
<div
data-slot="card-title"
className={cn('leading-none font-semibold dark:text-[#f5f5f5]', className)}
{...props}
/>
)
}

const CardDescription = ({ className, ...props }: ComponentProps<'div'>) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/page-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type PageHeaderProps = {
*/
export const PageHeader = ({ title, children }: PageHeaderProps) => (
<div className="flex items-center justify-between mt-4">
<h1 className="text-4xl font-bold tracking-tight text-primary">{title}</h1>
<h1 className="text-4xl font-bold tracking-tight text-primary dark:text-[#f5f5f5]">{title}</h1>
<div className="flex items-center gap-2 pr-2">{children}</div>
</div>
)
140 changes: 85 additions & 55 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import '@fontsource-variable/dm-sans';
@import 'tailwindcss';

@plugin 'tailwindcss-animate';
Expand All @@ -10,45 +11,50 @@
@variant dark (&:where(.dark, .dark *));

@theme {

@github-actions github-actions Bot Jul 13, 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.

📐 Convention — --font-mono now points to a proportional font

I noticed --font-mono is being set to DM Sans, which is a proportional typeface. A fair number of spots in the app lean on font-mono precisely because they want monospacing — code snippets like /name and localhost, MCP server config textareas, URLs, and the text-snippet block. Those will lose alignment and their code-y look. If the goal was just to unify the UI font, could we keep a real monospace stack for --font-mono (e.g. ui-monospace, SFMono-Regular, Menlo, monospace)?

--color-background: oklch(1 0 0);
--color-foreground: oklch(0.145 0 0);
--color-card: oklch(1 0 0);
--color-card-foreground: oklch(0.145 0 0);
--color-popover: oklch(1 0 0);
--color-popover-foreground: oklch(0.145 0 0);
--color-primary: #191919;
--font-sans: 'DM Sans Variable', system-ui, -apple-system, sans-serif;
--font-mono: 'DM Sans Variable', system-ui, -apple-system, sans-serif;

@github-actions github-actions Bot Jul 11, 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.

📐 Convention — --font-mono now points at a proportional font in the main app

Small thing that might have knock-on effects: --font-mono is now 'DM Sans Variable', the same proportional face as --font-sans. A few places in the app rely on font-mono specifically because they want monospacing — e.g. the chat text snippet (font-mono text-[9px]) and inline <code> in the sign-in step. Those will lose their fixed-width alignment. If the intent was to unify the display font, could we keep an actual monospace stack for --font-mono (or at least for code/snippet surfaces) so code still lines up?

@github-actions github-actions Bot Jul 13, 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.

📐 Convention — --font-mono is set to a proportional sans font

Both --font-sans and --font-mono now point at 'DM Sans Variable', a proportional font. Anywhere the app uses the font-mono utility — most notably rendered code blocks in chat — will lose true monospacing and column alignment. If the intent was to unify the display font, we might still want a real monospace stack for code so snippets stay legible. Was mapping mono → sans deliberate here?

/* Enterprise Light Theme */

@github-actions github-actions Bot Jul 13, 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.

📐 Convention — Overriding --color-black remaps Tailwind's black utility app-wide

Defining --color-black inside @theme doesn't just add a semantic token — in Tailwind v4 it overrides the built-in black, so every bg-black / text-black / border-black in the app resolves to this navy #101828 instead of true black. There are ~11 uses across the app, including modal/backdrop overlays (bg-black/60 in dialog, sheet, alert-dialog, mobile backdrop), so those tints shift subtly. If you want a semantic near-black, a differently named token (e.g. --color-ink) would avoid clobbering the primitive. Was the global remap intended?

--color-white: #ffffff;
--color-black: #101828;
--color-background: #f9fafb;
--color-foreground: #101828;
--color-card: #ffffff;
--color-card-foreground: #101828;
--color-popover: #ffffff;
--color-popover-foreground: #101828;
--color-primary: #142952;
--color-primary-foreground: #ffffff;
--color-secondary: #f7f7f8;
--color-secondary-foreground: #000000;
--color-tertiary: #808080;
--color-muted: oklch(0.97 0 0);
--color-muted-foreground: oklch(0.556 0 0);
--color-accent: oklch(0.97 0 0);
--color-accent-foreground: oklch(0.205 0 0);
--color-destructive: oklch(0.577 0.245 27.325);
--color-destructive-foreground: oklch(0.577 0.245 27.325);
--color-secondary: #eff1f4;
--color-secondary-foreground: #101828;
--color-tertiary: #667085;
--color-muted: #f2f4f7;
--color-muted-foreground: #667085;
--color-accent: #eff1f4;
--color-accent-foreground: #101828;
--color-destructive: #ff5f5f;
--color-destructive-foreground: #101828;
--color-success: oklch(0.627 0.17 149.214);
--color-success-foreground: oklch(0.985 0 0);
--color-warning: oklch(0.769 0.171 70.67);
--color-warning-foreground: oklch(0.205 0 0);
--color-border: oklch(0.922 0 0);
--color-input: oklch(0.922 0 0);
--color-ring: oklch(0.708 0 0);
--color-border: #eaecf0;
--color-input: #f2f4f7;
--color-ring: #142952;
--color-chart-1: oklch(0.646 0.222 41.116);
--color-chart-2: oklch(0.6 0.118 184.704);
--color-chart-3: oklch(0.398 0.07 227.392);
--color-chart-4: oklch(0.828 0.189 84.429);
--color-chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--color-sidebar: oklch(0.985 0 0);
--color-sidebar-foreground: oklch(0.145 0 0);
--color-sidebar-primary: oklch(0.205 0 0);
--color-sidebar-primary-foreground: oklch(0.985 0 0);
--color-sidebar-accent: oklch(0.97 0 0);
--color-sidebar-accent-foreground: oklch(0.205 0 0);
--color-sidebar-border: oklch(0.922 0 0);
--color-sidebar-ring: oklch(0.708 0 0);
--color-card-border: #dee8df;
--color-sidebar: #ffffff;
--color-sidebar-foreground: #101828;
--color-sidebar-primary: #142952;
--color-sidebar-primary-foreground: #ffffff;
--color-sidebar-accent: #eff1f4;
--color-sidebar-accent-foreground: #101828;
--color-sidebar-border: #eaecf0;
--color-sidebar-ring: #142952;
--color-card-border: #eaecf0;
}

/* ===========================
Expand Down Expand Up @@ -125,42 +131,45 @@
}

.dark {
--color-background: oklch(0.145 0 0);
--color-foreground: oklch(0.985 0 0);
--color-card: oklch(0.145 0 0);
--color-card-foreground: oklch(0.985 0 0);
--color-popover: oklch(0.145 0 0);
--color-popover-foreground: oklch(0.985 0 0);
--color-primary: oklch(0.985 0 0);
--color-primary-foreground: oklch(0.205 0 0);
--color-secondary: oklch(0.269 0 0);
--color-secondary-foreground: oklch(0.985 0 0);
--color-muted: oklch(0.269 0 0);
--color-muted-foreground: oklch(0.708 0 0);
--color-accent: oklch(0.269 0 0);
--color-accent-foreground: oklch(0.985 0 0);
--color-destructive: oklch(0.396 0.141 25.723);
--color-destructive-foreground: oklch(0.637 0.237 25.331);
--color-background: #0f1117;
--color-foreground: #e8e8e8;
--color-card: #161b22;
--color-card-foreground: #e8e8e8;
--color-popover: #161b22;
--color-popover-foreground: #e8e8e8;
--color-primary: #58a6ff;
--color-primary-foreground: #0f1117;
--color-heading: #f5f5f5;

@github-actions github-actions Bot Jul 13, 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.

📐 Convention — New --color-heading token is dark-only and unused; components hardcode the same hex

This adds --color-heading: #f5f5f5 in the .dark block only (there's no light-mode counterpart), and I couldn't find any text-heading/--color-heading consumer. Meanwhile card.tsx and page-header.tsx hardcode the same value via dark:text-[#f5f5f5] instead of the token. Could we either wire the components to a real semantic token (defined for both themes) or drop the unused variable, so the heading color lives in one place?

--color-secondary: #21262d;
--color-secondary-foreground: #e8e8e8;
--color-tertiary: #8b949e;
--color-muted: #21262d;
--color-muted-foreground: #8b949e;
--color-accent: #21262d;
--color-accent-foreground: #e8e8e8;
--color-destructive: #ff5f5f;
--color-destructive-foreground: #0f1117;
--color-success: oklch(0.696 0.17 162.48);
--color-success-foreground: oklch(0.985 0 0);
--color-warning: oklch(0.828 0.189 84.429);
--color-warning-foreground: oklch(0.205 0 0);
--color-border: oklch(0.269 0 0);
--color-input: oklch(0.269 0 0);
--color-ring: oklch(0.439 0 0);
--color-border: #30363d;
--color-input: #0d1117;
--color-ring: #58a6ff;
--color-chart-1: oklch(0.488 0.243 264.376);
--color-chart-2: oklch(0.696 0.17 162.48);
--color-chart-3: oklch(0.769 0.188 70.08);
--color-chart-4: oklch(0.627 0.265 303.9);
--color-chart-5: oklch(0.645 0.246 16.439);
--color-sidebar: oklch(0.205 0 0);
--color-sidebar-foreground: oklch(0.985 0 0);
--color-sidebar-primary: oklch(0.488 0.243 264.376);
--color-sidebar-primary-foreground: oklch(0.985 0 0);
--color-sidebar-accent: oklch(0.269 0 0);
--color-sidebar-accent-foreground: oklch(0.985 0 0);
--color-sidebar-border: oklch(0.269 0 0);
--color-sidebar-ring: oklch(0.439 0 0);
--color-sidebar: #161b22;
--color-sidebar-foreground: #e8e8e8;
--color-sidebar-primary: #58a6ff;
--color-sidebar-primary-foreground: #0f1117;
--color-sidebar-accent: #21262d;
--color-sidebar-accent-foreground: #e8e8e8;
--color-sidebar-border: #30363d;
--color-sidebar-ring: #58a6ff;
--color-card-border: #30363d;
}

@keyframes accordion-down {
Expand Down Expand Up @@ -214,9 +223,30 @@
border-color: var(--color-border);
outline-color: oklch(from var(--color-ring) l c h / 0.5);
}
html {
font-family:
'DM Sans Variable',
system-ui,
-apple-system,
sans-serif;
}
body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family:
'DM Sans Variable',
system-ui,
-apple-system,
sans-serif;
letter-spacing: -0.03em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.05em;
}
}

Expand Down
11 changes: 1 addition & 10 deletions src/layout/sidebar/chat-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,7 @@
import type { DeleteAllChatsDialogRef } from '@/components/delete-all-chats-dialog'
import type { DeleteChatDialogRef } from '@/components/delete-chat-dialog'
import { SidebarFooter } from '@/components/sidebar-footer'
import {
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarSeparator,
useSidebar,
} from '@/components/ui/sidebar'
import { SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, useSidebar } from '@/components/ui/sidebar'
import type { DeleteAllChatsMutationType, DeleteChatMutationType } from '@/layout/sidebar/types'
import type { MouseEvent, RefObject } from 'react'
import { useLocation } from 'react-router'
Expand Down Expand Up @@ -87,8 +80,6 @@ export const ChatSidebarContent = ({
</SidebarGroupContent>
</SidebarGroup>

<SidebarSeparator className="m-0 flex-shrink-0" />

<ChatList
chatThreads={chatThreads}
currentChatThreadId={currentChatThreadId}
Expand Down
Loading