From 4e812232a8bb64354895be2fc34e53acb7503743 Mon Sep 17 00:00:00 2001 From: Keith Guerin Date: Sat, 28 Feb 2026 22:46:24 -0800 Subject: [PATCH] feat(ui): standardize focus/selection color and integrate visualizer into theme dialog --- packages/cli/src/ui/components/ColorsDisplay.test.tsx | 1 + packages/cli/src/ui/components/Header.test.tsx | 1 + packages/cli/src/ui/components/SessionBrowser.tsx | 3 ++- packages/cli/src/ui/components/SuggestionsDisplay.tsx | 2 +- .../components/__snapshots__/ThemeDialog.test.tsx.snap | 4 ++++ .../cli/src/ui/components/shared/BaseSelectionList.tsx | 6 +++--- .../src/ui/components/shared/BaseSettingsDialog.tsx | 10 +++------- packages/cli/src/ui/themes/no-color.ts | 1 + packages/cli/src/ui/themes/semantic-tokens.ts | 3 +++ packages/cli/src/ui/themes/solarized-dark.ts | 3 ++- packages/cli/src/ui/themes/solarized-light.ts | 3 ++- packages/cli/src/ui/themes/theme.ts | 2 ++ packages/core/src/config/config.ts | 1 + 13 files changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/cli/src/ui/components/ColorsDisplay.test.tsx b/packages/cli/src/ui/components/ColorsDisplay.test.tsx index 78caa46d94..2a470e3317 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.test.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.test.tsx @@ -38,6 +38,7 @@ describe('ColorsDisplay', () => { comment: '#666666', symbol: '#cccccc', dark: '#333333', + focus: '#0000ff', gradient: undefined, }, status: { diff --git a/packages/cli/src/ui/components/Header.test.tsx b/packages/cli/src/ui/components/Header.test.tsx index 4d59bf14aa..759ce04bb9 100644 --- a/packages/cli/src/ui/components/Header.test.tsx +++ b/packages/cli/src/ui/components/Header.test.tsx @@ -108,6 +108,7 @@ describe('
', () => { comment: '', symbol: '', dark: '', + focus: '', gradient: undefined, }, status: { diff --git a/packages/cli/src/ui/components/SessionBrowser.tsx b/packages/cli/src/ui/components/SessionBrowser.tsx index 9d1ce57f52..f1dabc9548 100644 --- a/packages/cli/src/ui/components/SessionBrowser.tsx +++ b/packages/cli/src/ui/components/SessionBrowser.tsx @@ -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 ? '❯ ' : ' '; diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx index d9498e7a6b..f9470ea840 100644 --- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx +++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx @@ -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 = ( 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 │ │ diff --git a/packages/cli/src/ui/components/shared/BaseSelectionList.tsx b/packages/cli/src/ui/components/shared/BaseSelectionList.tsx index db0d624a74..117ed57e97 100644 --- a/packages/cli/src/ui/components/shared/BaseSelectionList.tsx +++ b/packages/cli/src/ui/components/shared/BaseSelectionList.tsx @@ -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 */} {isSelected ? '●' : ' '} diff --git a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx index 29592b479b..b805d60ba4 100644 --- a/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx +++ b/packages/cli/src/ui/components/shared/BaseSettingsDialog.tsx @@ -517,9 +517,7 @@ export function BaseSettingsDialog({ {isActive ? '●' : ''} @@ -536,9 +534,7 @@ export function BaseSettingsDialog({ minWidth={0} > {item.label} {item.scopeMessage && ( @@ -557,7 +553,7 @@ export function BaseSettingsDialog({