MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-29 15:30:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): rename selection to focus and use AccentGreen for focus by default

Browse Source
This commit is contained in:
Keith Guerin
2026-02-28 23:31:51 -08:00
parent e90f2c1339
commit 990f0280f1
15 changed files with 50 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/cli/src/ui/components/ColorsDisplay.test.tsx
View File

@@ -25,7 +25,7 @@ describe('ColorsDisplay', () => {
primary: '#000000',
message: '#111111',
input: '#222222',
selection: '#333333',
focus: '#333333',
diff: {
added: '#003300',
removed: '#330000',

2
packages/cli/src/ui/components/ColorsDisplay.tsx
View File

@@ -42,7 +42,7 @@ const COLOR_DESCRIPTIONS: Record<string, string> = {
'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',

2
packages/cli/src/ui/components/Header.test.tsx
View File

@@ -98,7 +98,7 @@ describe('<Header />', () => {
primary: '',
message: '',
input: '',
selection: '',
focus: '',
diff: { added: '', removed: '' },
},
border: {

2
packages/cli/src/ui/components/SessionBrowser.tsx
View File

@@ -486,7 +486,7 @@ const SessionItem = ({
return (
<Box
flexDirection="row"
backgroundColor={isActive ? theme.background.selection : undefined}
backgroundColor={isActive ? theme.background.focus : undefined}
>
<Text color={textColor()} dimColor={isDisabled}>
{prefix}

2
packages/cli/src/ui/components/SuggestionsDisplay.tsx
View File

@@ -100,7 +100,7 @@ export function SuggestionsDisplay({
<Box
key={`${suggestion.value}-${originalIndex}`}
flexDirection="row"
backgroundColor={isActive ? theme.background.selection : undefined}
backgroundColor={isActive ? theme.background.focus : undefined}
>
<Box
{...(mode === 'slash'

24
packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap
View File

@@ -39,7 +39,7 @@ exports[`Initial Theme Selection > 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 │ │

4
packages/cli/src/ui/components/shared/BaseSelectionList.tsx
View File

@@ -140,9 +140,7 @@ export function BaseSelectionList<
<Box
key={item.key}
alignItems="flex-start"
backgroundColor={
isSelected ? theme.background.selection : undefined
}
backgroundColor={isSelected ? theme.background.focus : undefined}
>
{/* Radio button indicator */}
<Box minWidth={2} flexShrink={0}>

2
packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx
View File

@@ -519,7 +519,7 @@ export function BaseSettingsDialog({
flexDirection="row"
alignItems="flex-start"
backgroundColor={
isActive ? theme.background.selection : undefined
isActive ? theme.background.focus : undefined
}
>
<Box minWidth={2} flexShrink={0}>

4
packages/cli/src/ui/themes/no-color.ts
View File

@@ -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: '',

8
packages/cli/src/ui/themes/semantic-tokens.ts
View File

@@ -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: {

8
packages/cli/src/ui/themes/solarized-dark.ts
View File

@@ -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: {

8
packages/cli/src/ui/themes/solarized-light.ts
View File

@@ -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: {

9
packages/cli/src/ui/themes/theme-manager.ts
View File

@@ -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 {

6
packages/cli/src/ui/themes/theme.test.ts
View File

@@ -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', () => {

20
packages/cli/src/ui/themes/theme.ts
View File

@@ -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: {