mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-03-19 02:20:42 -07:00
feat(ui): standardize focus/selection color and integrate visualizer into theme dialog
This commit is contained in:
Keith Guerin
@@ -38,6 +38,7 @@ describe('ColorsDisplay', () => {
|
||||
comment: '#666666',
|
||||
symbol: '#cccccc',
|
||||
dark: '#333333',
|
||||
focus: '#0000ff',
|
||||
gradient: undefined,
|
||||
},
|
||||
status: {
|
||||
|
||||
@@ -108,6 +108,7 @@ describe('<Header />', () => {
|
||||
comment: '',
|
||||
symbol: '',
|
||||
dark: '',
|
||||
focus: '',
|
||||
gradient: undefined,
|
||||
},
|
||||
status: {
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import type React from 'react';
|
||||
import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
|
||||
import { Box, Text } from 'ink';
|
||||
import { theme } from '../semantic-colors.js';
|
||||
import { Colors } from '../colors.js';
|
||||
import { useTerminalSize } from '../hooks/useTerminalSize.js';
|
||||
import { useKeypress } from '../hooks/useKeypress.js';
|
||||
@@ -436,7 +437,7 @@ const SessionItem = ({
|
||||
if (isDisabled) {
|
||||
return Colors.Gray;
|
||||
}
|
||||
return isActive ? Colors.AccentPurple : c;
|
||||
return isActive ? theme.ui.focus : c;
|
||||
};
|
||||
|
||||
const prefix = isActive ? '❯ ' : ' ';
|
||||
|
||||
@@ -84,7 +84,7 @@ export function SuggestionsDisplay({
|
||||
const originalIndex = startIndex + index;
|
||||
const isActive = originalIndex === activeIndex;
|
||||
const isExpanded = originalIndex === expandedIndex;
|
||||
const textColor = isActive ? theme.text.accent : theme.text.secondary;
|
||||
const textColor = isActive ? theme.ui.focus : theme.text.secondary;
|
||||
const isLong = suggestion.value.length >= MAX_WIDTH;
|
||||
const labelElement = (
|
||||
<ExpandableText
|
||||
|
||||
@@ -47,6 +47,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
|
||||
│ │ #6C7086 ui.comment │ │
|
||||
│ │ #89DCEB ui.symbol │ │
|
||||
│ │ #3d3f51 ui.dark │ │
|
||||
│ │ #89B4FA ui.focus │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
@@ -108,6 +109,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
|
||||
│ │ #97a0b0 ui.comment │ │
|
||||
│ │ #06B6D4 ui.symbol │ │
|
||||
│ │ #d2d6dc ui.dark │ │
|
||||
│ │ #3B82F6 ui.focus │ │
|
||||
│ │ #DD4C4C status.error │ │
|
||||
│ │ #3CA84B status.success │ │
|
||||
│ │ #D5A40A status.warning │ │
|
||||
@@ -169,6 +171,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
|
||||
│ │ #6C7086 ui.comment │ │
|
||||
│ │ #89DCEB ui.symbol │ │
|
||||
│ │ #3d3f51 ui.dark │ │
|
||||
│ │ #89B4FA ui.focus │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
@@ -244,6 +247,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
|
||||
│ │ #6C7086 ui.comment │ │
|
||||
│ │ #6C7086 ui.symbol │ │
|
||||
│ │ #3d3f51 ui.dark │ │
|
||||
│ │ #89B4FA ui.focus │ │
|
||||
│ │ #F38BA8 status.error │ │
|
||||
│ │ #A6E3A1 status.success │ │
|
||||
│ │ #F9E2AF status.warning │ │
|
||||
|
||||
@@ -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;
|
||||
@@ -141,7 +141,7 @@ export function BaseSelectionList<
|
||||
{/* 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 ? '●' : ' '}
|
||||
|
||||
@@ -517,9 +517,7 @@ export function BaseSettingsDialog({
|
||||
<Box marginX={1} flexDirection="row" alignItems="flex-start">
|
||||
<Box minWidth={2} flexShrink={0}>
|
||||
<Text
|
||||
color={
|
||||
isActive ? theme.status.success : theme.text.secondary
|
||||
}
|
||||
color={isActive ? theme.ui.focus : theme.text.secondary}
|
||||
>
|
||||
{isActive ? '●' : ''}
|
||||
</Text>
|
||||
@@ -536,9 +534,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 && (
|
||||
@@ -557,7 +553,7 @@ export function BaseSettingsDialog({
|
||||
<Text
|
||||
color={
|
||||
isActive
|
||||
? theme.status.success
|
||||
? theme.ui.focus
|
||||
: item.isGreyedOut
|
||||
? theme.text.secondary
|
||||
: theme.text.primary
|
||||
|
||||
@@ -53,6 +53,7 @@ const noColorSemanticColors: SemanticColors = {
|
||||
comment: '',
|
||||
symbol: '',
|
||||
dark: '',
|
||||
focus: '',
|
||||
gradient: [],
|
||||
},
|
||||
status: {
|
||||
|
||||
@@ -31,6 +31,7 @@ export interface SemanticColors {
|
||||
comment: string;
|
||||
symbol: string;
|
||||
dark: string;
|
||||
focus: string;
|
||||
gradient: string[] | undefined;
|
||||
};
|
||||
status: {
|
||||
@@ -65,6 +66,7 @@ export const lightSemanticColors: SemanticColors = {
|
||||
comment: lightTheme.Comment,
|
||||
symbol: lightTheme.Gray,
|
||||
dark: lightTheme.DarkGray,
|
||||
focus: lightTheme.AccentBlue,
|
||||
gradient: lightTheme.GradientColors,
|
||||
},
|
||||
status: {
|
||||
@@ -99,6 +101,7 @@ export const darkSemanticColors: SemanticColors = {
|
||||
comment: darkTheme.Comment,
|
||||
symbol: darkTheme.Gray,
|
||||
dark: darkTheme.DarkGray,
|
||||
focus: darkTheme.AccentBlue,
|
||||
gradient: darkTheme.GradientColors,
|
||||
},
|
||||
status: {
|
||||
|
||||
@@ -51,7 +51,8 @@ const semanticColors: SemanticColors = {
|
||||
comment: '#586e75',
|
||||
symbol: '#93a1a1',
|
||||
dark: '#073642',
|
||||
gradient: ['#268bd2', '#2aa198'],
|
||||
focus: '#268bd2',
|
||||
gradient: ['#268bd2', '#2aa198', '#859900'],
|
||||
},
|
||||
status: {
|
||||
success: '#859900',
|
||||
|
||||
@@ -51,7 +51,8 @@ const semanticColors: SemanticColors = {
|
||||
comment: '#93a1a1',
|
||||
symbol: '#586e75',
|
||||
dark: '#eee8d5',
|
||||
gradient: ['#268bd2', '#2aa198'],
|
||||
focus: '#268bd2',
|
||||
gradient: ['#268bd2', '#2aa198', '#859900'],
|
||||
},
|
||||
status: {
|
||||
success: '#859900',
|
||||
|
||||
@@ -186,6 +186,7 @@ export class Theme {
|
||||
comment: this.colors.Gray,
|
||||
symbol: this.colors.AccentCyan,
|
||||
dark: this.colors.DarkGray,
|
||||
focus: this.colors.AccentBlue,
|
||||
gradient: this.colors.GradientColors,
|
||||
},
|
||||
status: {
|
||||
@@ -463,6 +464,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,
|
||||
gradient: customTheme.ui?.gradient ?? colors.GradientColors,
|
||||
},
|
||||
status: {
|
||||
|
||||
Reference in New Issue
Block a user