Skip to content

refactor: MCP-compliant theme tokens and CSS class rename #7275

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

Merged
zanesq merged 8 commits into from
Feb 23, 2026
Merged

refactor: MCP-compliant theme tokens and CSS class rename #7275

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
7a8e92d
refactor: add TypeScript-first theme token system and restructure mai…
aharvard Feb 17, 2026
249f23e
refactor: rename CSS classes to MCP-compliant token names
aharvard Feb 17, 2026
eeb7668
fix: use flipped primary tokens for user message bubble contrast
aharvard Feb 17, 2026
b263501
fix: add mcpHostStyles to useMemo dependency array
aharvard Feb 17, 2026
88360fa
fix: use placeholder:text-text-secondary (Tailwind v4 variant syntax)
aharvard Feb 20, 2026
87593eb
fix: remove stray apostrophe in RecipeHeader className
aharvard Feb 20, 2026
1fa8867
fix: correct section numbering in main.css
aharvard Feb 23, 2026
23b36f7
refactor: extract baseTokens and fix light-dark() for MCP host styles
aharvard Feb 23, 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
8 changes: 4 additions & 4 deletions ui/desktop/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ const ConfigureProvidersRoute = () => {
const navigate = useNavigate();

return (
<div className="w-screen h-screen bg-background-default">
<div className="w-screen h-screen bg-background-primary">
<ProviderSettings
onClose={() => navigate('/settings', { state: { section: 'models' } })}
isOnboarding={false}
Expand All @@ -248,7 +248,7 @@ const WelcomeRoute = ({ onSelectProvider }: WelcomeRouteProps) => {
const navigate = useNavigate();

return (
<div className="w-screen h-screen bg-background-default">
<div className="w-screen h-screen bg-background-primary">
<ProviderSettings
onClose={() => {
navigate('/', { replace: true });
Expand Down Expand Up @@ -625,7 +625,7 @@ export function AppInner() {
toastClassName={() =>
`relative min-h-16 mb-4 p-2 rounded-lg
flex justify-between overflow-hidden cursor-pointer
text-text-on-accent bg-background-inverse
text-text-inverse bg-background-inverse
`
}
style={{ width: '450px' }}
Expand All @@ -636,7 +636,7 @@ export function AppInner() {
pauseOnHover
/>
<ExtensionInstallModal addExtension={addExtension} setView={setView} />
<div className="relative w-screen h-screen overflow-hidden bg-background-muted flex flex-col">
<div className="relative w-screen h-screen overflow-hidden bg-background-secondary flex flex-col">
<div className="titlebar-drag-region" />
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Routes>
Expand Down
2 changes: 1 addition & 1 deletion ui/desktop/src/components/AnnouncementModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default function AnnouncementModal() {
<Button
variant="ghost"
onClick={handleCloseAnnouncement}
className="w-full h-[60px] rounded-none border-b border-border-default bg-transparent hover:bg-background-muted text-text-default font-medium text-md"
className="w-full h-[60px] rounded-none border-b border-border-primary bg-transparent hover:bg-background-secondary text-text-primary font-medium text-md"
>
Got it!
</Button>
Expand Down
16 changes: 8 additions & 8 deletions ui/desktop/src/components/ApiKeyTester.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,14 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
</span>
</div>

<div className="w-full p-3 sm:p-4 bg-background-muted border rounded-xl">
<div className="w-full p-3 sm:p-4 bg-background-secondary border rounded-xl">
<div className="flex items-center gap-3 mb-3">
<Key className="w-4 h-4 text-text-default flex-shrink-0" />
<Key className="w-4 h-4 text-text-primary flex-shrink-0" />
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
<h3 className="font-medium text-text-default text-sm sm:text-base">
<h3 className="font-medium text-text-primary text-sm sm:text-base">
Quick Setup with API Key
</h3>
<span className="text-text-muted text-xs sm:text-sm">Auto-detect your provider</span>
<span className="text-text-secondary text-xs sm:text-sm">Auto-detect your provider</span>
</div>
</div>

Expand All @@ -92,7 +92,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
placeholder="Enter your API key (OpenAI, Anthropic, Google, etc.)"
className="flex-1 px-3 py-2 border rounded-lg bg-background-default text-text-default placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="flex-1 px-3 py-2 border rounded-lg bg-background-primary text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
disabled={isLoading}
onKeyDown={(e) => {
if (e.key === 'Enter' && canSubmit) {
Expand All @@ -116,7 +116,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester

{/* Loading state */}
{isLoading && (
<div className="flex items-center gap-2 px-3 py-2 bg-background-muted rounded text-sm text-text-muted">
<div className="flex items-center gap-2 px-3 py-2 bg-background-secondary rounded text-sm text-text-secondary">
<div className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
<span>Detecting provider and validating key...</span>
</div>
Expand Down Expand Up @@ -148,8 +148,8 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
</div>
</div>
<div className="ml-6 space-y-1">
<p className="text-xs font-medium text-text-muted">Suggestions:</p>
<ul className="text-xs text-text-muted space-y-1">
<p className="text-xs font-medium text-text-secondary">Suggestions:</p>
<ul className="text-xs text-text-secondary space-y-1">
<li className="flex items-start gap-1">
<span className="text-blue-500 mt-0.5">•</span>
<span>
Expand Down
14 changes: 7 additions & 7 deletions ui/desktop/src/components/BaseChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,13 +346,13 @@ export default function BaseChat({
return (
<div className="h-full flex flex-col min-h-0">
<MainPanelLayout
backgroundColor={'bg-background-muted'}
backgroundColor={'bg-background-secondary'}
removeTopPadding={true}
{...customMainLayoutProps}
>
{renderHeader && renderHeader()}
<div className="flex flex-col flex-1 mb-0.5 min-h-0 relative">
<div className="flex-1 bg-background-default rounded-b-2xl flex items-center justify-center">
<div className="flex-1 bg-background-primary rounded-b-2xl flex items-center justify-center">
<div className="flex flex-col items-center justify-center p-8">
<div className="text-red-700 dark:text-red-300 bg-red-400/50 p-4 rounded-lg mb-4 max-w-md">
<h3 className="font-semibold mb-2">Failed to Load Session</h3>
Expand All @@ -362,7 +362,7 @@ export default function BaseChat({
onClick={() => {
setView('chat');
}}
className="px-4 py-2 text-center cursor-pointer text-text-default border border-border-default hover:bg-background-muted rounded-lg transition-all duration-150"
className="px-4 py-2 text-center cursor-pointer text-text-primary border border-border-primary hover:bg-background-secondary rounded-lg transition-all duration-150"
>
Go home
</button>
Expand All @@ -377,7 +377,7 @@ export default function BaseChat({
return (
<div className="h-full flex flex-col min-h-0">
<MainPanelLayout
backgroundColor={'bg-background-muted'}
backgroundColor={'bg-background-secondary'}
removeTopPadding={true}
{...customMainLayoutProps}
>
Expand All @@ -394,14 +394,14 @@ export default function BaseChat({
className="no-drag flex flex-row items-center gap-1 hover:opacity-80 transition-opacity"
>
<Goose className="size-5 goose-icon-animation" />
<span className="text-sm leading-none text-text-muted -translate-y-px">goose</span>
<span className="text-sm leading-none text-text-secondary -translate-y-px">goose</span>
</a>
<EnvironmentBadge className="translate-y-px" />
</div>

<ScrollArea
ref={scrollRef}
className={`flex-1 bg-background-default rounded-b-2xl min-h-0 relative ${contentClassName}`}
className={`flex-1 bg-background-primary rounded-b-2xl min-h-0 relative ${contentClassName}`}
autoScroll
onDrop={handleDrop}
onDragOver={handleDragOver}
Expand All @@ -410,7 +410,7 @@ export default function BaseChat({
paddingY={0}
>
{recipe?.title && (
<div className="sticky top-0 z-10 bg-background-default px-0 -mx-6 mb-6 pt-6">
<div className="sticky top-0 z-10 bg-background-primary px-0 -mx-6 mb-6 pt-6">
<RecipeHeader title={recipe.title} />
</div>
)}
Expand Down
46 changes: 23 additions & 23 deletions ui/desktop/src/components/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1165,9 +1165,9 @@ export default function ChatInput({
disableAnimation ? '' : 'page-transition'
} ${
isFocused
? 'border-border-strong hover:border-border-strong'
: 'border-border-default hover:border-border-default'
} bg-background-default z-10 rounded-t-2xl`}
? 'border-border-secondary hover:border-border-secondary'
: 'border-border-primary hover:border-border-primary'
} bg-background-primary z-10 rounded-t-2xl`}
data-drop-zone="true"
onDrop={handleLocalDrop}
onDragOver={handleLocalDragOver}
Expand All @@ -1191,7 +1191,7 @@ export default function ChatInput({
onTriggerQueueProcessing={handleResumeQueue}
editingMessageIdRef={editingMessageIdRef}
isPaused={queuePausedRef.current}
className="border-b border-border-default"
className="border-b border-border-primary"
/>
)}
{/* Input row with inline action buttons wrapped in form */}
Expand Down Expand Up @@ -1219,7 +1219,7 @@ export default function ChatInput({
overflowY: 'auto',
paddingRight: dictationProvider ? '180px' : '120px',
}}
className="w-full outline-none border-none focus:ring-0 bg-transparent px-3 pt-3 pb-1.5 text-sm resize-none text-text-default placeholder:text-text-muted"
className="w-full outline-none border-none focus:ring-0 bg-transparent px-3 pt-3 pb-1.5 text-sm resize-none text-text-primary placeholder:text-text-secondary"
/>

{/* Inline action buttons - absolutely positioned on the right */}
Expand Down Expand Up @@ -1346,15 +1346,15 @@ export default function ChatInput({

{/* Recording/transcribing status indicator - positioned above the button row */}
{(isRecording || isTranscribing) && (
<div className="absolute right-0 -top-8 bg-background-default px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-border-default">
<div className="absolute right-0 -top-8 bg-background-primary px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-border-primary">
<span className="flex items-center gap-2">
{isRecording && (
<span className="flex items-center gap-1 text-text-muted">
<span className="flex items-center gap-1 text-text-secondary">
<span className="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse" />
Listening
</span>
)}
{isRecording && isTranscribing && <span className="text-text-muted">•</span>}
{isRecording && isTranscribing && <span className="text-text-secondary">•</span>}
{isTranscribing && (
<span className="flex items-center gap-1 text-blue-500">
<span className="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
Expand All @@ -1370,15 +1370,15 @@ export default function ChatInput({

{/* Combined files and images preview */}
{(pastedImages.length > 0 || allDroppedFiles.length > 0) && (
<div className="flex flex-wrap gap-2 p-4 mt-2 border-t border-border-default">
<div className="flex flex-wrap gap-2 p-4 mt-2 border-t border-border-primary">
{/* Render pasted images first */}
{pastedImages.map((img) => (
<div key={img.id} className="relative group w-20 h-20">
{img.dataUrl && (
<img
src={img.dataUrl}
alt={`Pasted image ${img.id}`}
className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-border-default'}`}
className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-border-primary'}`}
/>
)}
{img.isLoading && (
Expand Down Expand Up @@ -1419,7 +1419,7 @@ export default function ChatInput({
<img
src={file.dataUrl}
alt={file.name}
className={`w-full h-full object-cover rounded border ${file.error ? 'border-red-500' : 'border-border-default'}`}
className={`w-full h-full object-cover rounded border ${file.error ? 'border-red-500' : 'border-border-primary'}`}
/>
)}
{file.isLoading && (
Expand All @@ -1437,15 +1437,15 @@ export default function ChatInput({
</div>
) : (
// File box preview
<div className="flex items-center gap-2 px-3 py-2 bg-bgSubtle border border-border-default rounded-lg min-w-[120px] max-w-[200px]">
<div className="flex-shrink-0 w-8 h-8 bg-background-default border border-border-default rounded flex items-center justify-center text-xs font-mono text-text-muted">
<div className="flex items-center gap-2 px-3 py-2 bg-bgSubtle border border-border-primary rounded-lg min-w-[120px] max-w-[200px]">
<div className="flex-shrink-0 w-8 h-8 bg-background-primary border border-border-primary rounded flex items-center justify-center text-xs font-mono text-text-secondary">
{file.name.split('.').pop()?.toUpperCase() || 'FILE'}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm text-text-default truncate" title={file.name}>
<p className="text-sm text-text-primary truncate" title={file.name}>
{file.name}
</p>
<p className="text-xs text-text-muted">{file.type || 'Unknown type'}</p>
<p className="text-xs text-text-secondary">{file.type || 'Unknown type'}</p>
</div>
</div>
)}
Expand Down Expand Up @@ -1482,7 +1482,7 @@ export default function ChatInput({
onRestartStart={() => setChatState?.(ChatState.RestartingAgent)}
onRestartEnd={() => setChatState?.(ChatState.Idle)}
/>
<div className="w-px h-4 bg-border-default mx-2" />
<div className="w-px h-4 bg-border-primary mx-2" />
<Tooltip>
<TooltipTrigger asChild>
<Button
Expand All @@ -1491,14 +1491,14 @@ export default function ChatInput({
disabled={isFilePickerOpen}
variant="ghost"
size="sm"
className={`flex items-center justify-center text-text-default/70 hover:text-text-default text-xs transition-colors ${isFilePickerOpen ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
className={`flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs transition-colors ${isFilePickerOpen ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
>
<Attach className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Attach file</TooltipContent>
</Tooltip>
<div className="w-px h-4 bg-border-default mx-2" />
<div className="w-px h-4 bg-border-primary mx-2" />
{/* Model selector, mode selector, alerts, summarize button */}
<div className="flex flex-row items-center">
{/* Cost Tracker */}
Expand All @@ -1523,13 +1523,13 @@ export default function ChatInput({
/>
</div>
</Tooltip>
<div className="w-px h-4 bg-border-default mx-2" />
<div className="w-px h-4 bg-border-primary mx-2" />
<BottomMenuModeSelection />
<div className="w-px h-4 bg-border-default mx-2" />
<div className="w-px h-4 bg-border-primary mx-2" />
<BottomMenuExtensionSelection sessionId={sessionId} />
{sessionId && messages.length > 0 && (
<>
<div className="w-px h-4 bg-border-default mx-2" />
<div className="w-px h-4 bg-border-primary mx-2" />
<div className="flex items-center h-full">
<Tooltip>
<TooltipTrigger asChild>
Expand All @@ -1545,7 +1545,7 @@ export default function ChatInput({
}}
variant="ghost"
size="sm"
className="flex items-center justify-center text-text-default/70 hover:text-text-default text-xs cursor-pointer"
className="flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs cursor-pointer"
>
<ChefHat size={16} />
</Button>
Expand All @@ -1568,7 +1568,7 @@ export default function ChatInput({
}}
variant="ghost"
size="sm"
className="flex items-center justify-center text-text-default/70 hover:text-text-default text-xs cursor-pointer transition-colors"
className="flex items-center justify-center text-text-primary/70 hover:text-text-primary text-xs cursor-pointer transition-colors"
>
<Bug className="w-4 h-4" />
</Button>
Expand Down
Loading
Loading