MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-12 22:31:12 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): standardize semantic focus colors and enhance history visibility (#20745)

Browse Source 
Co-authored-by: jacob314 <jacob314@gmail.com>
This commit is contained in:
Keith Guerin
2026-03-03 16:10:09 -08:00
committed by GitHub
parent 75737c1b44
commit d25088956d
70 changed files with 1427 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,13 +19,15 @@ vi.mock('../../hooks/useSelectionList.js');
const mockTheme = {
text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' },
status: { success: 'COLOR_SUCCESS' },
ui: { focus: 'COLOR_FOCUS' },
background: { focus: 'COLOR_FOCUS_BG' },
} as typeof theme;
vi.mock('../../semantic-colors.js', () => ({
theme: {
text: { primary: 'COLOR_PRIMARY', secondary: 'COLOR_SECONDARY' },
status: { success: 'COLOR_SUCCESS' },
ui: { focus: 'COLOR_FOCUS' },
background: { focus: 'COLOR_FOCUS_BG' },
},
}));
@@ -161,8 +163,8 @@ describe('BaseSelectionList', () => {
expect(mockRenderItem).toHaveBeenCalledWith(
items[0],
expect.objectContaining({
titleColor: mockTheme.status.success,
numberColor: mockTheme.status.success,
titleColor: mockTheme.ui.focus,
numberColor: mockTheme.ui.focus,
isSelected: true,
}),
);
@@ -207,8 +209,8 @@ describe('BaseSelectionList', () => {
expect(mockRenderItem).toHaveBeenCalledWith(
items[1],
expect.objectContaining({
titleColor: mockTheme.status.success,
numberColor: mockTheme.status.success,
titleColor: mockTheme.ui.focus,
numberColor: mockTheme.ui.focus,
isSelected: true,
}),
);
@@ -267,7 +269,7 @@ describe('BaseSelectionList', () => {
items[0],
expect.objectContaining({
isSelected: true,
titleColor: mockTheme.status.success,
titleColor: mockTheme.ui.focus,
numberColor: mockTheme.text.secondary,
}),
);

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

@@ -117,8 +117,8 @@ export function BaseSelectionList<
let numberColor = theme.text.primary;
if (isSelected) {
titleColor = theme.status.success;
numberColor = theme.status.success;
titleColor = theme.ui.focus;
numberColor = theme.ui.focus;
} else if (item.disabled) {
titleColor = theme.text.secondary;
numberColor = theme.text.secondary;
@@ -137,11 +137,15 @@ export function BaseSelectionList<
)}.`;
return (
<Box key={item.key} alignItems="flex-start">
<Box
key={item.key}
alignItems="flex-start"
backgroundColor={isSelected ? theme.background.focus : undefined}
>
{/* Radio button indicator */}
<Box minWidth={2} flexShrink={0}>
<Text
color={isSelected ? theme.status.success : theme.text.primary}
color={isSelected ? theme.ui.focus : theme.text.primary}
aria-hidden
>
{isSelected ? '●' : ' '}

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

@@ -459,7 +459,7 @@ export function BaseSettingsDialog({
editingKey
? theme.border.default
: focusSection === 'settings'
? theme.border.focused
? theme.ui.focus
: theme.border.default
}
paddingX={1}
@@ -522,12 +522,17 @@ export function BaseSettingsDialog({
return (
<React.Fragment key={item.key}>
<Box marginX={1} flexDirection="row" alignItems="flex-start">
<Box
marginX={1}
flexDirection="row"
alignItems="flex-start"
backgroundColor={
isActive ? theme.background.focus : undefined
}
>
<Box minWidth={2} flexShrink={0}>
<Text
color={
isActive ? theme.status.success : theme.text.secondary
}
color={isActive ? theme.ui.focus : theme.text.secondary}
>
{isActive ? '●' : ''}
</Text>
@@ -544,9 +549,7 @@ export function BaseSettingsDialog({
minWidth={0}
>
<Text
color={
isActive ? theme.status.success : theme.text.primary
}
color={isActive ? theme.ui.focus : theme.text.primary}
>
{item.label}
{item.scopeMessage && (
@@ -565,7 +568,7 @@ export function BaseSettingsDialog({
<Text
color={
isActive
? theme.status.success
? theme.ui.focus
: item.isGreyedOut
? theme.text.secondary
: theme.text.primary

6
packages/cli/src/ui/components/shared/DescriptiveRadioButtonSelect.test.tsx
View File

@@ -29,6 +29,12 @@ vi.mock('../../semantic-colors.js', () => ({
primary: 'COLOR_PRIMARY',
secondary: 'COLOR_SECONDARY',
},
ui: {
focus: 'COLOR_FOCUS',
},
background: {
focus: 'COLOR_FOCUS_BG',
},
status: {
success: 'COLOR_SUCCESS',
},

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

@@ -27,6 +27,8 @@ vi.mock('./BaseSelectionList.js', () => ({
vi.mock('../../semantic-colors.js', () => ({
theme: {
text: { secondary: 'COLOR_SECONDARY' },
ui: { focus: 'COLOR_FOCUS' },
background: { focus: 'COLOR_FOCUS_BG' },
},
}));