refactor: MCP-compliant theme tokens and CSS class rename by aharvard · Pull Request #7275 · block/goose

aharvard · 2026-02-17T19:33:59Z

Summary

Establishes the theming infrastructure for both the Goose desktop UI and MCP apps.

What's included

Commit 1: TypeScript-first theme token system

theme-tokens.ts — single source of truth for all MCP spec tokens, typed against McpUiStyleVariableKey
applyThemeTokens() sets CSS custom properties via style.setProperty() — instant, no server round-trip. Optionally accepts a theme argument; defaults to calling getResolvedTheme() internally.
getResolvedTheme() — centralized helper that reads localStorage / system preference to determine the active theme, replacing duplicated logic in renderer.tsx and ThemeContext.tsx
buildMcpHostStyles() — generates light-dark() format variables for MCP apps, plus css.fonts with @font-face rules for Cash Sans so sandboxed iframes can load host fonts
main.css restructured into 5 numbered sections with @theme inline registration
ThemeContext simplified to core infrastructure: userThemePreference, resolvedTheme, and setUserThemePreference

Commit 2: CSS class rename (~130 TSX files)

Rename legacy class names (bg-background-default, border-default, text-muted, etc.) to MCP-compliant equivalents (bg-background-primary, border-border-primary, text-text-secondary, etc.)

Commit 3: Fix user message bubble contrast

Use bg-text-primary and text-background-primary to naturally invert the color scheme inside chat bubbles, ensuring readable text in both light and dark modes
Override prose typography styles with !text-inherit so dark:prose-invert cannot clobber bubble text color

Key decisions

Zero server endpoints — removed the Rust CSS parser (theme_css.rs) and all server theme endpoints from the initial PR
No new Rust dependencies — the regex crate that was added for the Rust parser is not included
TypeScript-first — all theming logic lives client-side

Verification

✅ cargo build -p goose-server
✅ cargo fmt -- --check
✅ cargo clippy --all-targets -- -D warnings
✅ npx tsc --noEmit (zero errors)
✅ eslint (zero new errors, 1 pre-existing warning in McpAppRenderer)

Based on work from Mcp apps styling #7147 (MCP CSS variable rename) and TypeScript-first theme tokens: replace Rust CSS parser with client-side token system #7218 (TypeScript token architecture)
Prerequisite for WIP: theme preset gallery and custom color editor #7276 (theme preset gallery & custom color editor)

Copilot

Pull request overview

This PR establishes a TypeScript-first theme token system for both the Goose desktop UI and MCP apps, eliminating the need for server-side CSS parsing. It includes three main commits: (1) creating the theme token infrastructure with theme-tokens.ts and related helpers, (2) renaming ~130 legacy CSS classes to MCP-compliant equivalents (e.g., bg-background-default → bg-background-primary, text-text-muted → text-text-secondary), and (3) fixing user message bubble contrast by using inverted color schemes.

Changes:

New TypeScript theme token system with applyThemeTokens(), buildMcpHostStyles(), and getResolvedTheme() helpers
Systematic CSS class renames across ~130 TSX files to align with MCP naming conventions
User message bubble contrast improvements using bg-text-primary and text-background-primary with !text-inherit overrides

Reviewed changes

Copilot reviewed 137 out of 137 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
ui/desktop/src/renderer.tsx	Early theme token application before first paint
ui/desktop/src/preload.ts	Added `tokensUpdated` optional property to theme change broadcast
ui/desktop/src/contexts/ThemeContext.tsx	Integrated theme token functions and added `mcpHostStyles` to context
ui/desktop/src/components/UserMessage.tsx	Fixed bubble contrast with inverted colors and `!text-inherit` prose overrides
~130 component files	Systematic CSS class renames from legacy to MCP-compliant naming

aharvard · 2026-02-18T15:44:39Z

@DOsinga & @zanesq, ready for review!

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 137 out of 137 changed files in this pull request and generated 4 comments.

ui/desktop/src/components/RecipeHeader.tsx

ui/desktop/src/components/ui/Expand.tsx

ui/desktop/src/components/LauncherView.tsx

ui/desktop/src/components/ApiKeyTester.tsx

Copilot

Pull request overview

Copilot reviewed 137 out of 137 changed files in this pull request and generated 3 comments.

ui/desktop/src/contexts/ThemeContext.tsx

Copilot · 2026-02-20T21:06:18Z

ui/desktop/src/theme/theme-tokens.ts

+  for (const key of Object.keys(lightTokens) as McpUiStyleVariableKey[]) {
+    const light = lightTokens[key];
+    const dark = darkTokens[key];
+    variables[key] = light === dark ? light : `light-dark(${light}, ${dark})`;
+  }


buildMcpHostStyles() wraps any differing token values in light-dark(...), but several non-color tokens (e.g., shadows) differ between lightTokens and darkTokens, and light-dark() is only valid for color values; this will make those variables invalid when used in properties like box-shadow. Consider limiting light-dark() generation to color keys (e.g., --color-*, --color-ring-*) and keeping non-color tokens identical for host styles (or exposing theme-specific non-color tokens via another mechanism).

will follow up on this later.

ui/desktop/src/components/ui/Expand.tsx

DOsinga · 2026-02-20T20:12:51Z

ui/desktop/src/styles/main.css

-  --shadow-default: var(--shadow-default);
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   7. BASE LAYER + FONTS + ANIMATIONS + COMPONENTS


what happened to section 6?

DOsinga · 2026-02-22T16:25:49Z

ui/desktop/src/theme/theme-tokens.ts

+  '--shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
+  '--shadow-lg':
+    '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2)',
+};


I think we can elminate some duplication here and get slightly better type safety with something like:

const baseTokens = { /* fonts, radii, shadows / } as const;
const lightColors = { / colors only / } as const;
const darkColors = { / colors only */ } as const;

export const lightTokens = { ...baseTokens, ...lightColors } satisfies ThemeTokens;
export const darkTokens = { ...baseTokens, ...darkColors } satisfies ThemeTokens;

Agreed, and get valid CSS too! missed that... whoops

@theme

…n.css - Add theme-tokens.ts as single source of truth for all MCP spec token values - Apply tokens to :root via style.setProperty() before first paint (renderer.tsx) - Remove duplicate token values from main.css :root/.dark blocks - main.css now only registers variable names for Tailwind (@theme inline) and defines app-specific aliases (sidebar, search highlight, legacy) - Add buildMcpHostStyles() to generate light-dark() format for MCP apps - Update ThemeContext with refreshTokens, tokenVersion, localStorage override - Update preload and suspense-loader to use MCP-compliant variable names

Rename ~130 TSX files from legacy class names (bg-background-default, border-default, text-muted, etc.) to MCP-compliant equivalents (bg-background-primary, border-border-primary, text-text-secondary, etc.) This aligns the Goose desktop UI with the MCP theming specification, enabling consistent styling across both the host app and MCP app iframes.

Use bg-text-primary and text-background-primary to naturally invert the color scheme inside chat bubbles, ensuring readable text in both light and dark modes.

Section headers jumped from 5 to 7, skipping 6. This was a typo introduced when the file was restructured into numbered sections.

- Extract shared tokens (fonts, radii, border-width) into baseTokens to eliminate duplication between light and dark theme definitions. - Use type-safe Pick/Exclude to enforce the split at compile time. - Restrict light-dark() in buildMcpHostStyles() to --color-* keys only, since light-dark() is a CSS color function and produces invalid values for non-color properties like box-shadow. - Always wrap color keys in light-dark() for consistency, even when both theme values are identical (e.g. transparent, #878787).

Copilot

Pull request overview

Copilot reviewed 137 out of 137 changed files in this pull request and generated no new comments.

…oviders * 'main' of github.com:block/goose: New navigation settings layout options and styling (#6645) refactor: MCP-compliant theme tokens and CSS class rename (#7275) Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434) refactor: change open recipe in new window to pass recipe id (#7392) fix: handle truncated tool calls that break conversation alternation (#7424) streamline some github actions (#7430) Enable bedrock prompt cache (#6710) fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429) Display working dir (#7419) dev: add cmake to hermitized env (#7399) refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255) feat: expose context window utilization to agent via MOIM (#7418) Small model naming (#7394) chore(deps): bump ajv in /documentation (#7416) doc: groq models (#7404) Client settings (#7381) Fix settings tabs getting cut off in narrow windows (#7379) # Conflicts: # ui/desktop/src/components/settings/dictation/DictationSettings.tsx

…xt-edit * origin/main: (35 commits) docs: generate manpages (#7443) Blog/goose v1 25 0 release (#7433) fix: detect truncated LLM responses in apps extension (#7354) fix: removed unnecessary version for goose acp macro dependency (#7428) add flag to hide select voice providers (#7406) New navigation settings layout options and styling (#6645) refactor: MCP-compliant theme tokens and CSS class rename (#7275) Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434) refactor: change open recipe in new window to pass recipe id (#7392) fix: handle truncated tool calls that break conversation alternation (#7424) streamline some github actions (#7430) Enable bedrock prompt cache (#6710) fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429) Display working dir (#7419) dev: add cmake to hermitized env (#7399) refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255) feat: expose context window utilization to agent via MOIM (#7418) Small model naming (#7394) chore(deps): bump ajv in /documentation (#7416) doc: groq models (#7404) ...

* main: Simplified custom model flow with canonical models (#6934) feat: simplify the text editor to be more like pi (#7426) docs: add YouTube short embed to Neighborhood extension tutorial (#7456) fix: flake.nix build failure and deprecation warning (#7408) feat(claude-code): add permission prompt routing for approve mode (#7420) docs: generate manpages (#7443) Blog/goose v1 25 0 release (#7433) fix: detect truncated LLM responses in apps extension (#7354) fix: removed unnecessary version for goose acp macro dependency (#7428) add flag to hide select voice providers (#7406) New navigation settings layout options and styling (#6645) refactor: MCP-compliant theme tokens and CSS class rename (#7275) Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434) refactor: change open recipe in new window to pass recipe id (#7392) fix: handle truncated tool calls that break conversation alternation (#7424) streamline some github actions (#7430) Enable bedrock prompt cache (#6710) fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429) Display working dir (#7419)

* main: (171 commits) fix: TLDR CLI tab in Neighborhood MCP docs (#7461) fix(summon): restore skill supporting files and directory path in load output (#7457) Simplified custom model flow with canonical models (#6934) feat: simplify the text editor to be more like pi (#7426) docs: add YouTube short embed to Neighborhood extension tutorial (#7456) fix: flake.nix build failure and deprecation warning (#7408) feat(claude-code): add permission prompt routing for approve mode (#7420) docs: generate manpages (#7443) Blog/goose v1 25 0 release (#7433) fix: detect truncated LLM responses in apps extension (#7354) fix: removed unnecessary version for goose acp macro dependency (#7428) add flag to hide select voice providers (#7406) New navigation settings layout options and styling (#6645) refactor: MCP-compliant theme tokens and CSS class rename (#7275) Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434) refactor: change open recipe in new window to pass recipe id (#7392) fix: handle truncated tool calls that break conversation alternation (#7424) streamline some github actions (#7430) Enable bedrock prompt cache (#6710) fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429) ...

* origin/main: (49 commits) add flag to hide select voice providers (#7406) New navigation settings layout options and styling (#6645) refactor: MCP-compliant theme tokens and CSS class rename (#7275) Redirect llama.cpp logs through tracing to avoid polluting CLI stdout/stderr (#7434) refactor: change open recipe in new window to pass recipe id (#7392) fix: handle truncated tool calls that break conversation alternation (#7424) streamline some github actions (#7430) Enable bedrock prompt cache (#6710) fix: use BEGIN IMMEDIATE to prevent SQLite deadlocks (#7429) Display working dir (#7419) dev: add cmake to hermitized env (#7399) refactor: remove allows_unlisted_models flag, always allow custom model entry (#7255) feat: expose context window utilization to agent via MOIM (#7418) Small model naming (#7394) chore(deps): bump ajv in /documentation (#7416) doc: groq models (#7404) Client settings (#7381) Fix settings tabs getting cut off in narrow windows (#7379) docs: voice dictation updates (#7396) [docs] Add Excalidraw MCP App Tutorial (#7401) ... # Conflicts: # ui/desktop/src/components/McpApps/McpAppRenderer.tsx

aharvard mentioned this pull request Feb 17, 2026

WIP: theme preset gallery and custom color editor #7276

Draft

aharvard force-pushed the theme-tokens branch 7 times, most recently from 5dc34ec to 90bc11a Compare February 17, 2026 21:36

aharvard marked this pull request as ready for review February 17, 2026 22:15

aharvard requested review from DOsinga, Copilot, spencrmartin and zanesq February 17, 2026 22:15

This was referenced Feb 17, 2026

Mcp apps styling #7147

Closed

TypeScript-first theme tokens: replace Rust CSS parser with client-side token system #7218

Closed

Spence/mcp styling design #7216

Closed

Copilot started reviewing on behalf of aharvard February 17, 2026 22:16 View session

Copilot AI reviewed Feb 17, 2026

View reviewed changes

aharvard force-pushed the theme-tokens branch from ce7b889 to 74bbb84 Compare February 18, 2026 15:37

Copilot AI review requested due to automatic review settings February 18, 2026 15:37

Copilot started reviewing on behalf of aharvard February 18, 2026 15:46 View session

Copilot AI reviewed Feb 18, 2026

View reviewed changes

aharvard force-pushed the theme-tokens branch from 6d4519b to 6263672 Compare February 19, 2026 17:11

Copilot AI review requested due to automatic review settings February 20, 2026 20:41

Copilot started reviewing on behalf of aharvard February 20, 2026 20:42 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 20, 2026 21:00

Copilot started reviewing on behalf of aharvard February 20, 2026 21:01 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

DOsinga approved these changes Feb 22, 2026

View reviewed changes

aharvard added 8 commits February 23, 2026 11:09

fix: use flipped primary tokens for user message bubble contrast

eeb7668

Use bg-text-primary and text-background-primary to naturally invert the color scheme inside chat bubbles, ensuring readable text in both light and dark modes.

fix: add mcpHostStyles to useMemo dependency array

b263501

fix: use placeholder:text-text-secondary (Tailwind v4 variant syntax)

88360fa

fix: remove stray apostrophe in RecipeHeader className

87593eb

fix: correct section numbering in main.css

1fa8867

Section headers jumped from 5 to 7, skipping 6. This was a typo introduced when the file was restructured into numbered sections.

Copilot AI review requested due to automatic review settings February 23, 2026 16:10

aharvard force-pushed the theme-tokens branch from 9511d70 to 23b36f7 Compare February 23, 2026 16:10

Copilot started reviewing on behalf of aharvard February 23, 2026 16:11 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

aharvard added this pull request to the merge queue Feb 23, 2026

zanesq removed this pull request from the merge queue due to a manual request Feb 23, 2026

zanesq merged commit c73bad9 into main Feb 23, 2026
25 checks passed

zanesq deleted the theme-tokens branch February 23, 2026 16:41

github-actions bot mentioned this pull request Feb 25, 2026

chore(release): release version 1.26.0 (minor) #7512

Open

Conversation

aharvard commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's included

Key decisions

Verification

Related

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

aharvard commented Feb 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

aharvard Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DOsinga Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

DOsinga Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

aharvard Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aharvard commented Feb 17, 2026 •

edited

Loading