diff --git a/packages/cli/src/ui/components/ColorsDisplay.test.tsx b/packages/cli/src/ui/components/ColorsDisplay.test.tsx index 795982d261..a3855c99f6 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.test.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.test.tsx @@ -25,7 +25,7 @@ describe('ColorsDisplay', () => { primary: '#000000', message: '#111111', input: '#222222', - selection: '#333333', + focus: '#333333', diff: { added: '#003300', removed: '#330000', diff --git a/packages/cli/src/ui/components/ColorsDisplay.tsx b/packages/cli/src/ui/components/ColorsDisplay.tsx index 75f9d39c1a..08ca0f7a3d 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.tsx @@ -42,7 +42,7 @@ const COLOR_DESCRIPTIONS: Record = { 'background.primary': 'Main terminal background color', 'background.message': 'Subtle background for message blocks', 'background.input': 'Background for the input prompt', - 'background.selection': 'Background highlight for selected/focused items', + 'background.focus': 'Background highlight for selected/focused items', 'background.diff.added': 'Background for added lines in diffs', 'background.diff.removed': 'Background for removed lines in diffs', 'border.default': 'Standard border color', diff --git a/packages/cli/src/ui/components/Header.test.tsx b/packages/cli/src/ui/components/Header.test.tsx index b01ef6aeab..46710c5302 100644 --- a/packages/cli/src/ui/components/Header.test.tsx +++ b/packages/cli/src/ui/components/Header.test.tsx @@ -98,7 +98,7 @@ describe('
', () => { primary: '', message: '', input: '', - selection: '', + focus: '', diff: { added: '', removed: '' }, }, border: { diff --git a/packages/cli/src/ui/components/SessionBrowser.tsx b/packages/cli/src/ui/components/SessionBrowser.tsx index 71399fb2f1..154ad62522 100644 --- a/packages/cli/src/ui/components/SessionBrowser.tsx +++ b/packages/cli/src/ui/components/SessionBrowser.tsx @@ -486,7 +486,7 @@ const SessionItem = ({ return ( {prefix} diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx index 3465917d30..7ce950eec9 100644 --- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx +++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx @@ -100,7 +100,7 @@ export function SuggestionsDisplay({ should default to a dark theme when terminal │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ │ │ #39… background. Background highlight for │ │ -│ │ selection selected/focused items │ │ +│ │ focus selected/focused items │ │ │ │ #283… backgrou Background for added lines │ │ │ │ nd.diff. in diffs │ │ │ │ added │ │ @@ -67,8 +67,8 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ │ B and UI icons │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #89B4F ui.focus Color for focused or │ │ -│ │ A selected UI elements (e.g. │ │ +│ │ #A6E3A ui.focus Color for focused or │ │ +│ │ 1 selected UI elements (e.g. │ │ │ │ menu items) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ @@ -126,7 +126,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ │ #e2e… backgroun Background for the input │ │ │ │ d.input prompt │ │ │ │ #d4… background. Background highlight for │ │ -│ │ selection selected/focused items │ │ +│ │ focus selected/focused items │ │ │ │ #C6E… backgrou Background for added lines │ │ │ │ nd.diff. in diffs │ │ │ │ added │ │ @@ -154,8 +154,8 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ │ 4 and UI icons │ │ │ │ #d2d6d ui.dark Deeply dimmed color for │ │ │ │ c subtle UI elements │ │ -│ │ #3B82F ui.focus Color for focused or │ │ -│ │ 6 selected UI elements (e.g. │ │ +│ │ #3CA84 ui.focus Color for focused or │ │ +│ │ B selected UI elements (e.g. │ │ │ │ menu items) │ │ │ │ #DD4C4Cstatus.err Color for error messages │ │ │ │ or and critical status │ │ @@ -213,7 +213,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ │ │ #39… background. Background highlight for │ │ -│ │ selection selected/focused items │ │ +│ │ focus selected/focused items │ │ │ │ #283… backgrou Background for added lines │ │ │ │ nd.diff. in diffs │ │ │ │ added │ │ @@ -241,8 +241,8 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ │ B and UI icons │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #89B4F ui.focus Color for focused or │ │ -│ │ A selected UI elements (e.g. │ │ +│ │ #A6E3A ui.focus Color for focused or │ │ +│ │ 1 selected UI elements (e.g. │ │ │ │ menu items) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ @@ -313,6 +313,8 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ │ d.message message blocks │ │ │ │ #313… backgroun Background for the input │ │ │ │ d.input prompt │ │ +│ │ #39… background. Background highlight for │ │ +│ │ focus selected/focused items │ │ │ │ #283… backgrou Background for added lines │ │ │ │ nd.diff. in diffs │ │ │ │ added │ │ @@ -340,8 +342,8 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ │ 6 and UI icons │ │ │ │ #3d3f5 ui.dark Deeply dimmed color for │ │ │ │ 1 subtle UI elements │ │ -│ │ #89B4F ui.focus Color for focused or │ │ -│ │ A selected UI elements (e.g. │ │ +│ │ #A6E3A ui.focus Color for focused or │ │ +│ │ 1 selected UI elements (e.g. │ │ │ │ menu items) │ │ │ │ #F38BA8status.err Color for error messages │ │ │ │ or and critical status │ │ diff --git a/packages/cli/src/ui/components/shared/BaseSelectionList.tsx b/packages/cli/src/ui/components/shared/BaseSelectionList.tsx index 4ab6f18c67..1467bb357e 100644 --- a/packages/cli/src/ui/components/shared/BaseSelectionList.tsx +++ b/packages/cli/src/ui/components/shared/BaseSelectionList.tsx @@ -140,9 +140,7 @@ export function BaseSelectionList< {/* Radio button indicator */} diff --git a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx index 6bd3f4b97c..455d4e3e7d 100644 --- a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx +++ b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx @@ -519,7 +519,7 @@ export function BaseSettingsDialog({ flexDirection="row" alignItems="flex-start" backgroundColor={ - isActive ? theme.background.selection : undefined + isActive ? theme.background.focus : undefined } > diff --git a/packages/cli/src/ui/themes/no-color.ts b/packages/cli/src/ui/themes/no-color.ts index 3baeaca4cb..2d24c75f4d 100644 --- a/packages/cli/src/ui/themes/no-color.ts +++ b/packages/cli/src/ui/themes/no-color.ts @@ -26,7 +26,7 @@ const noColorColorsTheme: ColorsTheme = { DarkGray: '', InputBackground: '', MessageBackground: '', - SelectionBackground: '', + FocusBackground: '', }; const noColorSemanticColors: SemanticColors = { @@ -41,7 +41,7 @@ const noColorSemanticColors: SemanticColors = { primary: '', message: '', input: '', - selection: '', + focus: '', diff: { added: '', removed: '', diff --git a/packages/cli/src/ui/themes/semantic-tokens.ts b/packages/cli/src/ui/themes/semantic-tokens.ts index dbdb903540..a6fb8819cf 100644 --- a/packages/cli/src/ui/themes/semantic-tokens.ts +++ b/packages/cli/src/ui/themes/semantic-tokens.ts @@ -18,7 +18,7 @@ export interface SemanticColors { primary: string; message: string; input: string; - selection: string; + focus: string; diff: { added: string; removed: string; @@ -54,6 +54,7 @@ export const lightSemanticColors: SemanticColors = { primary: lightTheme.Background, message: lightTheme.MessageBackground!, input: lightTheme.InputBackground!, + focus: lightTheme.FocusBackground!, diff: { added: lightTheme.DiffAdded, removed: lightTheme.DiffRemoved, @@ -67,7 +68,7 @@ export const lightSemanticColors: SemanticColors = { comment: lightTheme.Comment, symbol: lightTheme.Gray, dark: lightTheme.DarkGray, - focus: lightTheme.AccentBlue, + focus: lightTheme.AccentGreen, gradient: lightTheme.GradientColors, }, status: { @@ -89,6 +90,7 @@ export const darkSemanticColors: SemanticColors = { primary: darkTheme.Background, message: darkTheme.MessageBackground!, input: darkTheme.InputBackground!, + focus: darkTheme.FocusBackground!, diff: { added: darkTheme.DiffAdded, removed: darkTheme.DiffRemoved, @@ -102,7 +104,7 @@ export const darkSemanticColors: SemanticColors = { comment: darkTheme.Comment, symbol: darkTheme.Gray, dark: darkTheme.DarkGray, - focus: darkTheme.AccentBlue, + focus: darkTheme.AccentGreen, gradient: darkTheme.GradientColors, }, status: { diff --git a/packages/cli/src/ui/themes/solarized-dark.ts b/packages/cli/src/ui/themes/solarized-dark.ts index a30a25e2a5..e5a14d80f2 100644 --- a/packages/cli/src/ui/themes/solarized-dark.ts +++ b/packages/cli/src/ui/themes/solarized-dark.ts @@ -39,11 +39,7 @@ const semanticColors: SemanticColors = { primary: '#002b36', message: '#073642', input: '#073642', - selection: interpolateColor( - '#002b36', - '#859900', - DEFAULT_SELECTION_OPACITY, - ), + focus: interpolateColor('#002b36', '#859900', DEFAULT_SELECTION_OPACITY), diff: { added: '#00382f', removed: '#3d0115', @@ -57,7 +53,7 @@ const semanticColors: SemanticColors = { comment: '#586e75', symbol: '#93a1a1', dark: '#073642', - focus: '#268bd2', + focus: '#859900', gradient: ['#268bd2', '#2aa198', '#859900'], }, status: { diff --git a/packages/cli/src/ui/themes/solarized-light.ts b/packages/cli/src/ui/themes/solarized-light.ts index c08f6705a6..866ec3f035 100644 --- a/packages/cli/src/ui/themes/solarized-light.ts +++ b/packages/cli/src/ui/themes/solarized-light.ts @@ -39,11 +39,7 @@ const semanticColors: SemanticColors = { primary: '#fdf6e3', message: '#eee8d5', input: '#eee8d5', - selection: interpolateColor( - '#fdf6e3', - '#859900', - DEFAULT_SELECTION_OPACITY, - ), + focus: interpolateColor('#fdf6e3', '#859900', DEFAULT_SELECTION_OPACITY), diff: { added: '#d7f2d7', removed: '#f2d7d7', @@ -57,7 +53,7 @@ const semanticColors: SemanticColors = { comment: '#93a1a1', symbol: '#586e75', dark: '#eee8d5', - focus: '#268bd2', + focus: '#859900', gradient: ['#268bd2', '#2aa198', '#859900'], }, status: { diff --git a/packages/cli/src/ui/themes/theme-manager.ts b/packages/cli/src/ui/themes/theme-manager.ts index 412643bbd6..439ecdff59 100644 --- a/packages/cli/src/ui/themes/theme-manager.ts +++ b/packages/cli/src/ui/themes/theme-manager.ts @@ -22,7 +22,9 @@ import * as fs from 'node:fs'; import * as path from 'node:path'; import type { Theme, ThemeType, ColorsTheme } from './theme.js'; import type { CustomTheme } from '@google/gemini-cli-core'; -import { createCustomTheme, validateCustomTheme , +import { + createCustomTheme, + validateCustomTheme, interpolateColor, getThemeTypeFromBackgroundColor, resolveColor, @@ -369,7 +371,7 @@ class ThemeManager { colors.Gray, DEFAULT_BACKGROUND_OPACITY, ), - SelectionBackground: interpolateColor( + FocusBackground: interpolateColor( this.terminalBackground, colors.AccentGreen, DEFAULT_SELECTION_OPACITY, @@ -407,7 +409,7 @@ class ThemeManager { primary: this.terminalBackground, message: colors.MessageBackground!, input: colors.InputBackground!, - selection: colors.SelectionBackground!, + focus: colors.FocusBackground!, }, border: { ...semanticColors.border, @@ -416,6 +418,7 @@ class ThemeManager { ui: { ...semanticColors.ui, dark: colors.DarkGray, + focus: colors.AccentGreen, }, }; } else { diff --git a/packages/cli/src/ui/themes/theme.test.ts b/packages/cli/src/ui/themes/theme.test.ts index db083d95b5..bba28521f7 100644 --- a/packages/cli/src/ui/themes/theme.test.ts +++ b/packages/cli/src/ui/themes/theme.test.ts @@ -32,7 +32,7 @@ describe('createCustomTheme', () => { DiffRemoved: '#FF0000', Comment: '#808080', Gray: '#cccccc', - SelectionBackground: '#004000', + FocusBackground: '#004000', // DarkGray intentionally omitted to test fallback }; @@ -104,7 +104,7 @@ describe('validateCustomTheme', () => { DiffRemoved: '#FF0000', Comment: '#808080', Gray: '#808080', - SelectionBackground: '#004000', + FocusBackground: '#004000', }; it('should return isValid: true for a valid theme', () => { @@ -155,7 +155,7 @@ describe('themeManager.loadCustomThemes', () => { AccentRed: '#F00', Comment: '#888', Gray: '#888', - SelectionBackground: '#040', + FocusBackground: '#040', }; it('should use values from DEFAULT_THEME when DiffAdded and DiffRemoved are not provided', () => { diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts index 88894a2c89..9cb996e5f6 100644 --- a/packages/cli/src/ui/themes/theme.ts +++ b/packages/cli/src/ui/themes/theme.ts @@ -185,7 +185,7 @@ export interface ColorsTheme { DarkGray: string; InputBackground?: string; MessageBackground?: string; - SelectionBackground?: string; + FocusBackground?: string; GradientColors?: string[]; } @@ -215,7 +215,7 @@ export const lightTheme: ColorsTheme = { '#97a0b0', DEFAULT_BACKGROUND_OPACITY, ), - SelectionBackground: interpolateColor( + FocusBackground: interpolateColor( '#FAFAFA', '#3CA84B', DEFAULT_SELECTION_OPACITY, @@ -249,7 +249,7 @@ export const darkTheme: ColorsTheme = { '#6C7086', DEFAULT_BACKGROUND_OPACITY, ), - SelectionBackground: interpolateColor( + FocusBackground: interpolateColor( '#1E1E2E', '#A6E3A1', DEFAULT_SELECTION_OPACITY, @@ -275,7 +275,7 @@ export const ansiTheme: ColorsTheme = { DarkGray: 'gray', InputBackground: 'black', MessageBackground: 'black', - SelectionBackground: 'black', + FocusBackground: 'black', }; export class Theme { @@ -327,8 +327,8 @@ export class Theme { this.colors.Gray, DEFAULT_INPUT_BACKGROUND_OPACITY, ), - selection: - this.colors.SelectionBackground ?? + focus: + this.colors.FocusBackground ?? interpolateColor( this.colors.Background, this.colors.AccentGreen, @@ -347,7 +347,7 @@ export class Theme { comment: this.colors.Gray, symbol: this.colors.AccentCyan, dark: this.colors.DarkGray, - focus: this.colors.AccentBlue, + focus: this.colors.AccentGreen, gradient: this.colors.GradientColors, }, status: { @@ -456,7 +456,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme { customTheme.text?.secondary ?? customTheme.Gray ?? '', DEFAULT_BACKGROUND_OPACITY, ), - SelectionBackground: interpolateColor( + FocusBackground: interpolateColor( customTheme.background?.primary ?? customTheme.Background ?? '', customTheme.status?.success ?? customTheme.AccentGreen ?? '#3CA84B', // Fallback to a default green if not found DEFAULT_SELECTION_OPACITY, @@ -617,7 +617,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme { primary: customTheme.background?.primary ?? colors.Background, message: colors.MessageBackground!, input: colors.InputBackground!, - selection: colors.SelectionBackground!, + focus: colors.FocusBackground!, diff: { added: customTheme.background?.diff?.added ?? colors.DiffAdded, removed: customTheme.background?.diff?.removed ?? colors.DiffRemoved, @@ -631,7 +631,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme { comment: customTheme.ui?.comment ?? colors.Comment, symbol: customTheme.ui?.symbol ?? colors.Gray, dark: colors.DarkGray, - focus: customTheme.ui?.focus ?? colors.AccentBlue, + focus: customTheme.ui?.focus ?? colors.AccentGreen, gradient: customTheme.ui?.gradient ?? colors.GradientColors, }, status: {