diff options
Diffstat (limited to 'packages/cli/src')
33 files changed, 533 insertions, 385 deletions
diff --git a/packages/cli/src/ui/colors.ts b/packages/cli/src/ui/colors.ts index 19fae1b9..bb8451cc 100644 --- a/packages/cli/src/ui/colors.ts +++ b/packages/cli/src/ui/colors.ts @@ -38,8 +38,8 @@ export const Colors: ColorsTheme = { get AccentRed() { return themeManager.getActiveTheme().colors.AccentRed; }, - get SubtleComment() { - return themeManager.getActiveTheme().colors.SubtleComment; + get Comment() { + return themeManager.getActiveTheme().colors.Comment; }, get Gray() { return themeManager.getActiveTheme().colors.Gray; diff --git a/packages/cli/src/ui/components/AboutBox.tsx b/packages/cli/src/ui/components/AboutBox.tsx index 472bf979..0744beff 100644 --- a/packages/cli/src/ui/components/AboutBox.tsx +++ b/packages/cli/src/ui/components/AboutBox.tsx @@ -24,7 +24,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({ }) => ( <Box borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} flexDirection="column" padding={1} marginY={1} diff --git a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx index dbdb3e9a..9375a7d6 100644 --- a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx +++ b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx @@ -40,7 +40,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({ <Box> <Text color={textColor}> {textContent} - {subText && <Text color={Colors.SubtleComment}>{subText}</Text>} + {subText && <Text color={Colors.Gray}>{subText}</Text>} </Text> </Box> ); diff --git a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx index fba536d2..6012b565 100644 --- a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx +++ b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx @@ -27,7 +27,7 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({ {errorCount > 0 && ( <Text color={Colors.AccentRed}> {errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '} - <Text color={Colors.SubtleComment}>(ctrl+O for details)</Text> + <Text color={Colors.Gray}>(ctrl+O for details)</Text> </Text> )} </Box> diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx index 3cfb4d8d..b42785a2 100644 --- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx +++ b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx @@ -47,5 +47,5 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({ summaryText += mcpText; } - return <Text color={Colors.SubtleComment}>{summaryText}</Text>; + return <Text color={Colors.Gray}>{summaryText}</Text>; }; diff --git a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx index cd3f37bb..c2ecb803 100644 --- a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx +++ b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx @@ -27,13 +27,12 @@ export const DetailedMessagesDisplay: React.FC< flexDirection="column" marginTop={1} borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} paddingX={1} > <Box marginBottom={1}> <Text bold color={Colors.Foreground}> - Debug Console{' '} - <Text color={Colors.SubtleComment}>(ctrl+O to close)</Text> + Debug Console <Text color={Colors.Gray}>(ctrl+O to close)</Text> </Text> </Box> {messages.map((msg, index) => { @@ -50,7 +49,7 @@ export const DetailedMessagesDisplay: React.FC< icon = '\u2716'; // Heavy multiplication x (✖) break; case 'debug': - textColor = Colors.SubtleComment; // Or Colors.Gray + textColor = Colors.Gray; // Or Colors.Gray icon = '\u1F50D'; // Left-pointing magnifying glass (????) break; case 'log': @@ -65,7 +64,7 @@ export const DetailedMessagesDisplay: React.FC< <Text color={textColor} wrap="wrap"> {msg.content} {msg.count && msg.count > 1 && ( - <Text color={Colors.SubtleComment}> (x{msg.count})</Text> + <Text color={Colors.Gray}> (x{msg.count})</Text> )} </Text> </Box> diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx index 46d669b7..ea83a031 100644 --- a/packages/cli/src/ui/components/Footer.tsx +++ b/packages/cli/src/ui/components/Footer.tsx @@ -40,9 +40,7 @@ export const Footer: React.FC<FooterProps> = ({ <Box> <Text color={Colors.LightBlue}> {shortenPath(tildeifyPath(targetDir), 70)} - {branchName && ( - <Text color={Colors.SubtleComment}> ({branchName}*)</Text> - )} + {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>} </Text> {debugMode && ( <Text color={Colors.AccentRed}> @@ -65,13 +63,11 @@ export const Footer: React.FC<FooterProps> = ({ ) : process.env.SANDBOX === 'sandbox-exec' ? ( <Text color={Colors.AccentYellow}> sandbox-exec{' '} - <Text color={Colors.SubtleComment}> - ({process.env.SEATBELT_PROFILE}) - </Text> + <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text> </Text> ) : ( <Text color={Colors.AccentRed}> - no sandbox <Text color={Colors.SubtleComment}>(see README)</Text> + no sandbox <Text color={Colors.Gray}>(see README)</Text> </Text> )} </Box> @@ -81,7 +77,7 @@ export const Footer: React.FC<FooterProps> = ({ <Text color={Colors.AccentBlue}> {model} </Text> {corgiMode && ( <Text> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <Text color={Colors.AccentRed}>▼</Text> <Text color={Colors.Foreground}>(´</Text> <Text color={Colors.AccentRed}>ᴥ</Text> @@ -91,7 +87,7 @@ export const Footer: React.FC<FooterProps> = ({ )} {!showErrorDetails && errorCount > 0 && ( <Box> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <ConsoleSummaryDisplay errorCount={errorCount} /> </Box> )} diff --git a/packages/cli/src/ui/components/Help.tsx b/packages/cli/src/ui/components/Help.tsx index 74d03573..92e94a8a 100644 --- a/packages/cli/src/ui/components/Help.tsx +++ b/packages/cli/src/ui/components/Help.tsx @@ -31,7 +31,7 @@ export const Help: React.FC<Help> = ({ commands }) => ( {commands .filter((command) => command.description) .map((command: SlashCommand) => ( - <Text key={command.name} color={Colors.SubtleComment}> + <Text key={command.name} color={Colors.Gray}> <Text bold color={Colors.AccentPurple}> {' '} /{command.name} @@ -39,7 +39,7 @@ export const Help: React.FC<Help> = ({ commands }) => ( {command.description && ' - ' + command.description} </Text> ))} - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> <Text bold color={Colors.AccentPurple}> {' '} !{' '} diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx index 7e4c8c8b..4d71e612 100644 --- a/packages/cli/src/ui/components/InputPrompt.tsx +++ b/packages/cli/src/ui/components/InputPrompt.tsx @@ -349,7 +349,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({ </Text> <Box flexGrow={1} flexDirection="column"> {buffer.text.length === 0 && placeholder ? ( - <Text color={Colors.SubtleComment}>{placeholder}</Text> + <Text color={Colors.Gray}>{placeholder}</Text> ) : ( linesToRender.map((lineText, visualIdxInRenderedSet) => { const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow; diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx index 6ff4dac8..61b74b89 100644 --- a/packages/cli/src/ui/components/LoadingIndicator.tsx +++ b/packages/cli/src/ui/components/LoadingIndicator.tsx @@ -40,7 +40,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ {currentLoadingPhrase && ( <Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text> )} - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> {streamingState === StreamingState.WaitingForConfirmation ? '' : ` (esc to cancel, ${elapsedTime}s)`} diff --git a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx index 5d9a7c49..d768445c 100644 --- a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx +++ b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx @@ -12,18 +12,14 @@ import { formatMemoryUsage } from '../utils/formatters.js'; export const MemoryUsageDisplay: React.FC = () => { const [memoryUsage, setMemoryUsage] = useState<string>(''); - const [memoryUsageColor, setMemoryUsageColor] = useState<string>( - Colors.SubtleComment, - ); + const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray); useEffect(() => { const updateMemory = () => { const usage = process.memoryUsage().rss; setMemoryUsage(formatMemoryUsage(usage)); setMemoryUsageColor( - usage >= 2 * 1024 * 1024 * 1024 - ? Colors.AccentRed - : Colors.SubtleComment, + usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray, ); }; const intervalId = setInterval(updateMemory, 2000); @@ -33,7 +29,7 @@ export const MemoryUsageDisplay: React.FC = () => { return ( <Box> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <Text color={memoryUsageColor}>{memoryUsage}</Text> </Box> ); diff --git a/packages/cli/src/ui/components/ShellModeIndicator.tsx b/packages/cli/src/ui/components/ShellModeIndicator.tsx index 612af1a6..f5b11b24 100644 --- a/packages/cli/src/ui/components/ShellModeIndicator.tsx +++ b/packages/cli/src/ui/components/ShellModeIndicator.tsx @@ -12,7 +12,7 @@ export const ShellModeIndicator: React.FC = () => ( <Box> <Text color={Colors.AccentYellow}> shell mode enabled - <Text color={Colors.SubtleComment}> (esc to disable)</Text> + <Text color={Colors.Gray}> (esc to disable)</Text> </Text> </Box> ); diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx index fb8005f6..0620665f 100644 --- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx +++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx @@ -57,7 +57,7 @@ export function SuggestionsDisplay({ {visibleSuggestions.map((suggestion, index) => { const originalIndex = startIndex + index; const isActive = originalIndex === activeIndex; - const textColor = isActive ? Colors.AccentPurple : Colors.SubtleComment; + const textColor = isActive ? Colors.AccentPurple : Colors.Gray; return ( <Box key={`${suggestion}-${originalIndex}`} width={width}> diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx index 81a34ff4..eeccee4c 100644 --- a/packages/cli/src/ui/components/ThemeDialog.tsx +++ b/packages/cli/src/ui/components/ThemeDialog.tsx @@ -97,7 +97,7 @@ export function ThemeDialog({ return ( <Box borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} flexDirection="row" padding={1} width="100%" @@ -106,7 +106,7 @@ export function ThemeDialog({ <Box flexDirection="column" width="45%" paddingRight={2}> <Text bold={focusedSection === 'theme'}> {focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '} - <Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text> + <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text> </Text> <RadioButtonSelect key={selectInputKey} @@ -132,7 +132,7 @@ export function ThemeDialog({ </Box> <Box marginTop={1}> - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> (Use Enter to select, Tab to change focus) </Text> </Box> @@ -143,12 +143,13 @@ export function ThemeDialog({ <Text bold>Preview</Text> <Box borderStyle="single" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} padding={1} flexDirection="column" > {colorizeCode( - `def fibonacci(n): + `# function +def fibonacci(n): a, b = 0, 1 for _ in range(n): a, b = b, a + b diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx index 1a4c69c0..0b35e32d 100644 --- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx +++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx @@ -107,7 +107,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ if (parsedLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}> + <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> <Text dimColor>No changes detected.</Text> </Box> ); @@ -162,7 +162,7 @@ const renderDiffContent = ( if (displayableLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}> + <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> <Text dimColor>No changes detected.</Text> </Box> ); @@ -217,7 +217,7 @@ const renderDiffContent = ( borderRight={false} borderLeft={false} borderStyle="double" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} ></Box>, ); } @@ -260,7 +260,7 @@ const renderDiffContent = ( acc.push( <Box key={lineKey} flexDirection="row"> - <Text color={Colors.SubtleComment}>{gutterNumStr.padEnd(4)} </Text> + <Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text> <Text color={color} dimColor={dim}> {prefixSymbol}{' '} </Text> diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 280b4321..71e6a59b 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -25,7 +25,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ const hasPending = !toolCalls.every( (t) => t.status === ToolCallStatus.Success, ); - const borderColor = hasPending ? Colors.AccentYellow : Colors.SubtleComment; + const borderColor = hasPending ? Colors.AccentYellow : Colors.Gray; const staticHeight = /* border */ 2 + /* marginBottom */ 1; diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx index 0cb5a101..3883d361 100644 --- a/packages/cli/src/ui/components/messages/ToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx @@ -72,7 +72,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ <Box flexDirection="column"> {hiddenLines > 0 && ( <Box> - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> ... first {hiddenLines} line{hiddenLines === 1 ? '' : 's'}{' '} hidden ... </Text> @@ -162,7 +162,7 @@ const ToolInfo: React.FC<ToolInfo> = ({ case 'medium': return Colors.Foreground; case 'low': - return Colors.SubtleComment; + return Colors.Gray; default: { const exhaustiveCheck: never = emphasis; return exhaustiveCheck; @@ -178,7 +178,7 @@ const ToolInfo: React.FC<ToolInfo> = ({ <Text color={nameColor} bold> {name} </Text>{' '} - <Text color={Colors.SubtleComment}>{description}</Text> + <Text color={Colors.Gray}>{description}</Text> </Text> </Box> ); diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx index 5cd25c7c..22b5cecd 100644 --- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx +++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx @@ -111,9 +111,7 @@ export function RadioButtonSelect<T>({ return ( <Text color={textColor}> {itemWithThemeProps.themeNameDisplay}{' '} - <Text color={Colors.SubtleComment}> - {itemWithThemeProps.themeTypeDisplay} - </Text> + <Text color={Colors.Gray}>{itemWithThemeProps.themeTypeDisplay}</Text> </Text> ); } diff --git a/packages/cli/src/ui/themes/ansi-light.ts b/packages/cli/src/ui/themes/ansi-light.ts index dae9eecd..fc35e434 100644 --- a/packages/cli/src/ui/themes/ansi-light.ts +++ b/packages/cli/src/ui/themes/ansi-light.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { lightTheme, Theme } from './theme.js'; +import { lightTheme, Theme, type ColorsTheme } from './theme.js'; + +const ansiLightColors: ColorsTheme = { + type: 'light', + Background: 'white', + Foreground: 'black', + LightBlue: 'blue', + AccentBlue: 'blue', + AccentPurple: 'purple', + AccentCyan: 'cyan', + AccentGreen: 'green', + AccentYellow: 'orange', + AccentRed: 'red', + Comment: 'gray', + Gray: 'gray', + GradientColors: lightTheme.GradientColors, +}; export const ANSILight: Theme = new Theme( 'ANSI Light', @@ -126,5 +142,5 @@ export const ANSILight: Theme = new Theme( color: 'orange', }, }, - lightTheme, + ansiLightColors, ); diff --git a/packages/cli/src/ui/themes/ansi.ts b/packages/cli/src/ui/themes/ansi.ts index bfc43495..9a8feb33 100644 --- a/packages/cli/src/ui/themes/ansi.ts +++ b/packages/cli/src/ui/themes/ansi.ts @@ -4,11 +4,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { darkTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const ansiColors: ColorsTheme = { + type: 'dark', + Background: 'black', + Foreground: 'white', + LightBlue: 'bluebright', + AccentBlue: '#0000FF', + AccentPurple: 'magenta', + AccentCyan: 'cyan', + AccentGreen: 'green', + AccentYellow: 'yellow', + AccentRed: 'red', + Comment: 'gray', + Gray: 'gray', + GradientColors: darkTheme.GradientColors, // Fallback +}; export const ANSI: Theme = new Theme( 'ANSI', - 'dark', + 'dark', // Consistent with its color palette base { hljs: { display: 'block', @@ -135,5 +151,5 @@ export const ANSI: Theme = new Theme( color: 'yellow', // Mapped from #D7BA7D }, }, - darkTheme, + ansiColors, ); diff --git a/packages/cli/src/ui/themes/atom-one-dark.ts b/packages/cli/src/ui/themes/atom-one-dark.ts index d38fbcbd..84849a54 100644 --- a/packages/cli/src/ui/themes/atom-one-dark.ts +++ b/packages/cli/src/ui/themes/atom-one-dark.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { darkTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const atomOneDarkColors: ColorsTheme = { + type: 'dark', + Background: '#282c34', + Foreground: '#abb2bf', + LightBlue: '#61aeee', + AccentBlue: '#61aeee', + AccentPurple: '#c678dd', + AccentCyan: '#56b6c2', + AccentGreen: '#98c379', + AccentYellow: '#e6c07b', + AccentRed: '#e06c75', + Comment: '#5c6370', + Gray: '#5c6370', + GradientColors: darkTheme.GradientColors, +}; export const AtomOneDark: Theme = new Theme( 'Atom One', @@ -14,107 +30,107 @@ export const AtomOneDark: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - color: '#abb2bf', - background: '#282c34', + color: atomOneDarkColors.Foreground, + background: atomOneDarkColors.Background, }, 'hljs-comment': { - color: '#5c6370', + color: atomOneDarkColors.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#5c6370', + color: atomOneDarkColors.Comment, fontStyle: 'italic', }, 'hljs-doctag': { - color: '#c678dd', + color: atomOneDarkColors.AccentPurple, }, 'hljs-keyword': { - color: '#c678dd', + color: atomOneDarkColors.AccentPurple, }, 'hljs-formula': { - color: '#c678dd', + color: atomOneDarkColors.AccentPurple, }, 'hljs-section': { - color: '#e06c75', + color: atomOneDarkColors.AccentRed, }, 'hljs-name': { - color: '#e06c75', + color: atomOneDarkColors.AccentRed, }, 'hljs-selector-tag': { - color: '#e06c75', + color: atomOneDarkColors.AccentRed, }, 'hljs-deletion': { - color: '#e06c75', + color: atomOneDarkColors.AccentRed, }, 'hljs-subst': { - color: '#e06c75', + color: atomOneDarkColors.AccentRed, }, 'hljs-literal': { - color: '#56b6c2', + color: atomOneDarkColors.AccentCyan, }, 'hljs-string': { - color: '#98c379', + color: atomOneDarkColors.AccentGreen, }, 'hljs-regexp': { - color: '#98c379', + color: atomOneDarkColors.AccentGreen, }, 'hljs-addition': { - color: '#98c379', + color: atomOneDarkColors.AccentGreen, }, 'hljs-attribute': { - color: '#98c379', + color: atomOneDarkColors.AccentGreen, }, 'hljs-meta-string': { - color: '#98c379', + color: atomOneDarkColors.AccentGreen, }, 'hljs-built_in': { - color: '#e6c07b', + color: atomOneDarkColors.AccentYellow, }, 'hljs-class .hljs-title': { - color: '#e6c07b', + color: atomOneDarkColors.AccentYellow, }, 'hljs-attr': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-variable': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-template-variable': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-type': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-selector-class': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-selector-attr': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-selector-pseudo': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-number': { - color: '#d19a66', + color: atomOneDarkColors.AccentYellow, }, 'hljs-symbol': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, }, 'hljs-bullet': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, }, 'hljs-link': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, textDecoration: 'underline', }, 'hljs-meta': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, }, 'hljs-selector-id': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, }, 'hljs-title': { - color: '#61aeee', + color: atomOneDarkColors.AccentBlue, }, 'hljs-emphasis': { fontStyle: 'italic', @@ -123,5 +139,5 @@ export const AtomOneDark: Theme = new Theme( fontWeight: 'bold', }, }, - darkTheme, + atomOneDarkColors, ); diff --git a/packages/cli/src/ui/themes/ayu-light.ts b/packages/cli/src/ui/themes/ayu-light.ts index b2a1c60d..9d91e509 100644 --- a/packages/cli/src/ui/themes/ayu-light.ts +++ b/packages/cli/src/ui/themes/ayu-light.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { lightTheme, Theme } from './theme.js'; +import { lightTheme, Theme, type ColorsTheme } from './theme.js'; + +const ayuLightColors: ColorsTheme = { + type: 'light', + Background: '#f8f9fa', + Foreground: '#5c6166', + LightBlue: '#55b4d4', + AccentBlue: '#399ee6', + AccentPurple: '#a37acc', + AccentCyan: '#4cbf99', + AccentGreen: '#86b300', + AccentYellow: '#f2ae49', + AccentRed: '#f07171', + Comment: '#ABADB1', + Gray: '#CCCFD3', + GradientColors: lightTheme.GradientColors, +}; export const AyuLight: Theme = new Theme( 'Ayu Light', @@ -14,84 +30,84 @@ export const AyuLight: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: '#f8f9fa', - color: '#5c6166', + background: ayuLightColors.Background, + color: ayuLightColors.Foreground, }, 'hljs-comment': { - color: '#787b80', + color: ayuLightColors.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#4cbf99', + color: ayuLightColors.AccentCyan, fontStyle: 'italic', }, 'hljs-string': { - color: '#86b300', + color: ayuLightColors.AccentGreen, }, 'hljs-constant': { - color: '#4cbf99', + color: ayuLightColors.AccentCyan, }, 'hljs-number': { - color: '#a37acc', + color: ayuLightColors.AccentPurple, }, 'hljs-keyword': { - color: '#fa8d3e', + color: ayuLightColors.AccentYellow, }, 'hljs-selector-tag': { - color: '#fa8d3e', + color: ayuLightColors.AccentYellow, }, 'hljs-attribute': { - color: '#f2ae49', + color: ayuLightColors.AccentYellow, }, 'hljs-variable': { - color: '#5c6166', + color: ayuLightColors.Foreground, }, 'hljs-variable.language': { - color: '#55b4d4', + color: ayuLightColors.LightBlue, fontStyle: 'italic', }, 'hljs-title': { - color: '#399ee6', + color: ayuLightColors.AccentBlue, }, 'hljs-section': { - color: '#86b300', + color: ayuLightColors.AccentGreen, fontWeight: 'bold', }, 'hljs-type': { - color: '#55b4d4', + color: ayuLightColors.LightBlue, }, 'hljs-class .hljs-title': { - color: '#399ee6', + color: ayuLightColors.AccentBlue, }, 'hljs-tag': { - color: '#55b4d4', + color: ayuLightColors.LightBlue, }, 'hljs-name': { - color: '#399ee6', + color: ayuLightColors.AccentBlue, }, 'hljs-builtin-name': { - color: '#f2ae49', + color: ayuLightColors.AccentYellow, }, 'hljs-meta': { - color: '#e6ba7e', + color: ayuLightColors.AccentYellow, }, 'hljs-symbol': { - color: '#f07171', + color: ayuLightColors.AccentRed, }, 'hljs-bullet': { - color: '#f2ae49', + color: ayuLightColors.AccentYellow, }, 'hljs-regexp': { - color: '#4cbf99', + color: ayuLightColors.AccentCyan, }, 'hljs-link': { - color: '#55b4d4', + color: ayuLightColors.LightBlue, }, 'hljs-deletion': { - color: '#ff7383', + color: ayuLightColors.AccentRed, }, 'hljs-addition': { - color: '#6cbf43', + color: ayuLightColors.AccentGreen, }, 'hljs-emphasis': { fontStyle: 'italic', @@ -100,20 +116,20 @@ export const AyuLight: Theme = new Theme( fontWeight: 'bold', }, 'hljs-literal': { - color: '#4cbf99', + color: ayuLightColors.AccentCyan, }, 'hljs-built_in': { - color: '#f07171', + color: ayuLightColors.AccentRed, }, 'hljs-doctag': { - color: '#d14', + color: ayuLightColors.AccentRed, }, 'hljs-template-variable': { - color: '#008080', + color: ayuLightColors.AccentCyan, }, 'hljs-selector-id': { - color: '#900', + color: ayuLightColors.AccentRed, }, }, - lightTheme, + ayuLightColors, ); diff --git a/packages/cli/src/ui/themes/ayu.ts b/packages/cli/src/ui/themes/ayu.ts index a87a1ee3..738d4dae 100644 --- a/packages/cli/src/ui/themes/ayu.ts +++ b/packages/cli/src/ui/themes/ayu.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { darkTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const ayuDarkColors: ColorsTheme = { + type: 'dark', + Background: '#0b0e14', + Foreground: '#bfbdb6', + LightBlue: '#59C2FF', + AccentBlue: '#39BAE6', + AccentPurple: '#D2A6FF', + AccentCyan: '#95E6CB', + AccentGreen: '#AAD94C', + AccentYellow: '#FFB454', + AccentRed: '#F26D78', + Comment: '#646A71', + Gray: '##3D4149', + GradientColors: darkTheme.GradientColors, +}; export const AyuDark: Theme = new Theme( 'Ayu', @@ -14,70 +30,70 @@ export const AyuDark: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: '#0b0e14', - color: '#bfbdb6', + background: ayuDarkColors.Background, + color: ayuDarkColors.Foreground, }, 'hljs-keyword': { - color: '#FF8F40', + color: ayuDarkColors.AccentYellow, }, 'hljs-literal': { - color: '#D2A6FF', + color: ayuDarkColors.AccentPurple, }, 'hljs-symbol': { - color: '#95E6CB', + color: ayuDarkColors.AccentCyan, }, 'hljs-name': { - color: '#59C2FF', + color: ayuDarkColors.LightBlue, }, 'hljs-link': { - color: '#39BAE6', + color: ayuDarkColors.AccentBlue, }, 'hljs-function .hljs-keyword': { - color: '#FFB454', + color: ayuDarkColors.AccentYellow, }, 'hljs-subst': { - color: '#BFBDB6', + color: ayuDarkColors.Foreground, }, 'hljs-string': { - color: '#AAD94C', + color: ayuDarkColors.AccentGreen, }, 'hljs-title': { - color: '#FFB454', + color: ayuDarkColors.AccentYellow, }, 'hljs-type': { - color: '#39BAE6', + color: ayuDarkColors.AccentBlue, }, 'hljs-attribute': { - color: '#FFB454', + color: ayuDarkColors.AccentYellow, }, 'hljs-bullet': { - color: '#FFB454', + color: ayuDarkColors.AccentYellow, }, 'hljs-addition': { - color: '#7FD962', + color: ayuDarkColors.AccentGreen, }, 'hljs-variable': { - color: '#BFBDB6', + color: ayuDarkColors.Foreground, }, 'hljs-template-tag': { - color: '#FF8F40', + color: ayuDarkColors.AccentYellow, }, 'hljs-template-variable': { - color: '#FF8F40', + color: ayuDarkColors.AccentYellow, }, 'hljs-comment': { - color: '#ACB6BF8C', + color: ayuDarkColors.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#95E6CB', + color: ayuDarkColors.AccentCyan, fontStyle: 'italic', }, 'hljs-deletion': { - color: '#F26D78', + color: ayuDarkColors.AccentRed, }, 'hljs-meta': { - color: '#E6B673', + color: ayuDarkColors.AccentYellow, }, 'hljs-doctag': { fontWeight: 'bold', @@ -89,5 +105,5 @@ export const AyuDark: Theme = new Theme( fontStyle: 'italic', }, }, - darkTheme, + ayuDarkColors, ); diff --git a/packages/cli/src/ui/themes/default-light.ts b/packages/cli/src/ui/themes/default-light.ts index b86af6f3..1803e7fa 100644 --- a/packages/cli/src/ui/themes/default-light.ts +++ b/packages/cli/src/ui/themes/default-light.ts @@ -14,86 +14,86 @@ export const DefaultLight: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: 'white', - color: 'black', + background: lightTheme.Background, + color: lightTheme.Foreground, }, 'hljs-comment': { - color: '#008000', + color: lightTheme.Comment, }, 'hljs-quote': { - color: '#008000', + color: lightTheme.Comment, }, 'hljs-variable': { - color: '#008000', + color: lightTheme.Foreground, }, 'hljs-keyword': { - color: '#00f', + color: lightTheme.AccentBlue, }, 'hljs-selector-tag': { - color: '#00f', + color: lightTheme.AccentBlue, }, 'hljs-built_in': { - color: '#00f', + color: lightTheme.AccentBlue, }, 'hljs-name': { - color: '#00f', + color: lightTheme.AccentBlue, }, 'hljs-tag': { - color: '#00f', + color: lightTheme.AccentBlue, }, 'hljs-string': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-title': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-section': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-attribute': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-literal': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-template-tag': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-template-variable': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-type': { - color: '#a31515', + color: lightTheme.AccentRed, }, 'hljs-addition': { - color: '#a31515', + color: lightTheme.AccentGreen, }, 'hljs-deletion': { - color: '#2b91af', + color: lightTheme.AccentRed, }, 'hljs-selector-attr': { - color: '#2b91af', + color: lightTheme.AccentCyan, }, 'hljs-selector-pseudo': { - color: '#2b91af', + color: lightTheme.AccentCyan, }, 'hljs-meta': { - color: '#2b91af', + color: lightTheme.AccentCyan, }, 'hljs-doctag': { - color: '#808080', + color: lightTheme.Gray, }, 'hljs-attr': { - color: '#f00', + color: lightTheme.AccentRed, }, 'hljs-symbol': { - color: '#00b0e8', + color: lightTheme.AccentCyan, }, 'hljs-bullet': { - color: '#00b0e8', + color: lightTheme.AccentCyan, }, 'hljs-link': { - color: '#00b0e8', + color: lightTheme.AccentCyan, }, 'hljs-emphasis': { fontStyle: 'italic', diff --git a/packages/cli/src/ui/themes/default.ts b/packages/cli/src/ui/themes/default.ts index f3c8cbcd..e1d0247c 100644 --- a/packages/cli/src/ui/themes/default.ts +++ b/packages/cli/src/ui/themes/default.ts @@ -14,101 +14,101 @@ export const DefaultDark: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: '#1E1E1E', - color: '#DCDCDC', + background: darkTheme.Background, + color: darkTheme.Foreground, }, 'hljs-keyword': { - color: '#569CD6', + color: darkTheme.AccentBlue, }, 'hljs-literal': { - color: '#569CD6', + color: darkTheme.AccentBlue, }, 'hljs-symbol': { - color: '#569CD6', + color: darkTheme.AccentBlue, }, 'hljs-name': { - color: '#569CD6', + color: darkTheme.AccentBlue, }, 'hljs-link': { - color: '#569CD6', + color: darkTheme.AccentBlue, textDecoration: 'underline', }, 'hljs-built_in': { - color: '#4EC9B0', + color: darkTheme.AccentCyan, }, 'hljs-type': { - color: '#4EC9B0', + color: darkTheme.AccentCyan, }, 'hljs-number': { - color: '#B8D7A3', + color: darkTheme.AccentGreen, }, 'hljs-class': { - color: '#B8D7A3', + color: darkTheme.AccentGreen, }, 'hljs-string': { - color: '#D69D85', + color: darkTheme.AccentYellow, }, 'hljs-meta-string': { - color: '#D69D85', + color: darkTheme.AccentYellow, }, 'hljs-regexp': { - color: '#9A5334', + color: darkTheme.AccentRed, }, 'hljs-template-tag': { - color: '#9A5334', + color: darkTheme.AccentRed, }, 'hljs-subst': { - color: '#DCDCDC', + color: darkTheme.Foreground, }, 'hljs-function': { - color: '#DCDCDC', + color: darkTheme.Foreground, }, 'hljs-title': { - color: '#DCDCDC', + color: darkTheme.Foreground, }, 'hljs-params': { - color: '#DCDCDC', + color: darkTheme.Foreground, }, 'hljs-formula': { - color: '#DCDCDC', + color: darkTheme.Foreground, }, 'hljs-comment': { - color: '#57A64A', + color: darkTheme.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#57A64A', + color: darkTheme.Comment, fontStyle: 'italic', }, 'hljs-doctag': { - color: '#608B4E', + color: darkTheme.Comment, }, 'hljs-meta': { - color: '#9B9B9B', + color: darkTheme.Gray, }, 'hljs-meta-keyword': { - color: '#9B9B9B', + color: darkTheme.Gray, }, 'hljs-tag': { - color: '#9B9B9B', + color: darkTheme.Gray, }, 'hljs-variable': { - color: '#BD63C5', + color: darkTheme.AccentPurple, }, 'hljs-template-variable': { - color: '#BD63C5', + color: darkTheme.AccentPurple, }, 'hljs-attr': { - color: '#9CDCFE', + color: darkTheme.LightBlue, }, 'hljs-attribute': { - color: '#9CDCFE', + color: darkTheme.LightBlue, }, 'hljs-builtin-name': { - color: '#9CDCFE', + color: darkTheme.LightBlue, }, 'hljs-section': { - color: 'gold', + color: darkTheme.AccentYellow, }, 'hljs-emphasis': { fontStyle: 'italic', @@ -117,22 +117,22 @@ export const DefaultDark: Theme = new Theme( fontWeight: 'bold', }, 'hljs-bullet': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-selector-tag': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-selector-id': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-selector-class': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-selector-attr': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-selector-pseudo': { - color: '#D7BA7D', + color: darkTheme.AccentYellow, }, 'hljs-addition': { backgroundColor: '#144212', diff --git a/packages/cli/src/ui/themes/dracula.ts b/packages/cli/src/ui/themes/dracula.ts index 9597e005..101f1942 100644 --- a/packages/cli/src/ui/themes/dracula.ts +++ b/packages/cli/src/ui/themes/dracula.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { darkTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const draculaColors: ColorsTheme = { + type: 'dark', + Background: '#282a36', + Foreground: '#f8f8f2', + LightBlue: '#8be9fd', + AccentBlue: '#8be9fd', + AccentPurple: '#ff79c6', + AccentCyan: '#8be9fd', + AccentGreen: '#50fa7b', + AccentYellow: '#f1fa8c', + AccentRed: '#ff5555', + Comment: '#6272a4', + Gray: '#6272a4', + GradientColors: darkTheme.GradientColors, +}; export const Dracula: Theme = new Theme( 'Dracula', @@ -14,81 +30,81 @@ export const Dracula: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: '#282a36', - color: '#f8f8f2', + background: draculaColors.Background, + color: draculaColors.Foreground, }, 'hljs-keyword': { - color: '#8be9fd', + color: draculaColors.AccentBlue, fontWeight: 'bold', }, 'hljs-selector-tag': { - color: '#8be9fd', + color: draculaColors.AccentBlue, fontWeight: 'bold', }, 'hljs-literal': { - color: '#8be9fd', + color: draculaColors.AccentBlue, fontWeight: 'bold', }, 'hljs-section': { - color: '#8be9fd', + color: draculaColors.AccentBlue, fontWeight: 'bold', }, 'hljs-link': { - color: '#8be9fd', + color: draculaColors.AccentBlue, }, 'hljs-function .hljs-keyword': { - color: '#ff79c6', + color: draculaColors.AccentPurple, }, 'hljs-subst': { - color: '#f8f8f2', + color: draculaColors.Foreground, }, 'hljs-string': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-title': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, fontWeight: 'bold', }, 'hljs-name': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, fontWeight: 'bold', }, 'hljs-type': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, fontWeight: 'bold', }, 'hljs-attribute': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-symbol': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-bullet': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-addition': { - color: '#f1fa8c', + color: draculaColors.AccentGreen, }, 'hljs-variable': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-template-tag': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-template-variable': { - color: '#f1fa8c', + color: draculaColors.AccentYellow, }, 'hljs-comment': { - color: '#6272a4', + color: draculaColors.Comment, }, 'hljs-quote': { - color: '#6272a4', + color: draculaColors.Comment, }, 'hljs-deletion': { - color: '#6272a4', + color: draculaColors.AccentRed, }, 'hljs-meta': { - color: '#6272a4', + color: draculaColors.Comment, }, 'hljs-doctag': { fontWeight: 'bold', @@ -100,5 +116,5 @@ export const Dracula: Theme = new Theme( fontStyle: 'italic', }, }, - darkTheme, + draculaColors, ); diff --git a/packages/cli/src/ui/themes/github-dark.ts b/packages/cli/src/ui/themes/github-dark.ts index 42f36db1..1333f945 100644 --- a/packages/cli/src/ui/themes/github-dark.ts +++ b/packages/cli/src/ui/themes/github-dark.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { darkTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const githubDarkColors: ColorsTheme = { + type: 'dark', + Background: '#24292e', + Foreground: '#d1d5da', + LightBlue: '#79B8FF', + AccentBlue: '#79B8FF', + AccentPurple: '#B392F0', + AccentCyan: '#9ECBFF', + AccentGreen: '#85E89D', + AccentYellow: '#FFAB70', + AccentRed: '#F97583', + Comment: '#6A737D', + Gray: '#6A737D', + GradientColors: darkTheme.GradientColors, +}; export const GitHubDark: Theme = new Theme( 'GitHub', @@ -14,107 +30,107 @@ export const GitHubDark: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - color: '#d1d5da', - background: '#24292e', + color: githubDarkColors.Foreground, + background: githubDarkColors.Background, }, 'hljs-comment': { - color: '#6A737D', + color: githubDarkColors.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#6A737D', + color: githubDarkColors.Comment, fontStyle: 'italic', }, 'hljs-keyword': { - color: '#F97583', + color: githubDarkColors.AccentRed, fontWeight: 'bold', }, 'hljs-selector-tag': { - color: '#F97583', + color: githubDarkColors.AccentRed, fontWeight: 'bold', }, 'hljs-subst': { - color: '#e1e4e8', + color: githubDarkColors.Foreground, }, 'hljs-number': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, }, 'hljs-literal': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, }, 'hljs-variable': { - color: '#FFAB70', + color: githubDarkColors.AccentYellow, }, 'hljs-template-variable': { - color: '#FFAB70', + color: githubDarkColors.AccentYellow, }, 'hljs-tag .hljs-attr': { - color: '#FFAB70', + color: githubDarkColors.AccentYellow, }, 'hljs-string': { - color: '#9ECBFF', + color: githubDarkColors.AccentCyan, }, 'hljs-doctag': { - color: '#9ECBFF', + color: githubDarkColors.AccentCyan, }, 'hljs-title': { - color: '#B392F0', + color: githubDarkColors.AccentPurple, fontWeight: 'bold', }, 'hljs-section': { - color: '#B392F0', + color: githubDarkColors.AccentPurple, fontWeight: 'bold', }, 'hljs-selector-id': { - color: '#B392F0', + color: githubDarkColors.AccentPurple, fontWeight: 'bold', }, 'hljs-type': { - color: '#85E89D', + color: githubDarkColors.AccentGreen, fontWeight: 'bold', }, 'hljs-class .hljs-title': { - color: '#85E89D', + color: githubDarkColors.AccentGreen, fontWeight: 'bold', }, 'hljs-tag': { - color: '#85E89D', + color: githubDarkColors.AccentGreen, }, 'hljs-name': { - color: '#85E89D', + color: githubDarkColors.AccentGreen, }, 'hljs-attribute': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, }, 'hljs-regexp': { - color: '#DBEDFF', + color: githubDarkColors.AccentCyan, }, 'hljs-link': { - color: '#DBEDFF', + color: githubDarkColors.AccentCyan, }, 'hljs-symbol': { - color: '#990073', + color: githubDarkColors.AccentPurple, }, 'hljs-bullet': { - color: '#990073', + color: githubDarkColors.AccentPurple, }, 'hljs-built_in': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, }, 'hljs-builtin-name': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, }, 'hljs-meta': { - color: '#79B8FF', + color: githubDarkColors.LightBlue, fontWeight: 'bold', }, 'hljs-deletion': { background: '#86181D', - color: '#FDAEB7', + color: githubDarkColors.AccentRed, }, 'hljs-addition': { background: '#144620', - color: '#85E89D', + color: githubDarkColors.AccentGreen, }, 'hljs-emphasis': { fontStyle: 'italic', @@ -123,5 +139,5 @@ export const GitHubDark: Theme = new Theme( fontWeight: 'bold', }, }, - darkTheme, + githubDarkColors, ); diff --git a/packages/cli/src/ui/themes/github-light.ts b/packages/cli/src/ui/themes/github-light.ts index f66f8558..15a9249d 100644 --- a/packages/cli/src/ui/themes/github-light.ts +++ b/packages/cli/src/ui/themes/github-light.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { lightTheme, Theme } from './theme.js'; +import { lightTheme, Theme, type ColorsTheme } from './theme.js'; + +const githubLightColors: ColorsTheme = { + type: 'light', + Background: '#f8f8f8', + Foreground: '#24292E', + LightBlue: '#0086b3', + AccentBlue: '#458', + AccentPurple: '#900', + AccentCyan: '#009926', + AccentGreen: '#008080', + AccentYellow: '#990073', + AccentRed: '#d14', + Comment: '#998', + Gray: '#999', + GradientColors: lightTheme.GradientColors, +}; export const GitHubLight: Theme = new Theme( 'GitHub Light', @@ -14,102 +30,102 @@ export const GitHubLight: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - color: '#24292E', - background: '#f8f8f8', + color: githubLightColors.Foreground, + background: githubLightColors.Background, }, 'hljs-comment': { - color: '#998', + color: githubLightColors.Comment, fontStyle: 'italic', }, 'hljs-quote': { - color: '#998', + color: githubLightColors.Comment, fontStyle: 'italic', }, 'hljs-keyword': { - color: '#333', + color: githubLightColors.Foreground, fontWeight: 'bold', }, 'hljs-selector-tag': { - color: '#333', + color: githubLightColors.Foreground, fontWeight: 'bold', }, 'hljs-subst': { - color: '#333', + color: githubLightColors.Foreground, fontWeight: 'normal', }, 'hljs-number': { - color: '#008080', + color: githubLightColors.AccentGreen, }, 'hljs-literal': { - color: '#008080', + color: githubLightColors.AccentGreen, }, 'hljs-variable': { - color: '#008080', + color: githubLightColors.AccentGreen, }, 'hljs-template-variable': { - color: '#008080', + color: githubLightColors.AccentGreen, }, 'hljs-tag .hljs-attr': { - color: '#008080', + color: githubLightColors.AccentGreen, }, 'hljs-string': { - color: '#d14', + color: githubLightColors.AccentRed, }, 'hljs-doctag': { - color: '#d14', + color: githubLightColors.AccentRed, }, 'hljs-title': { - color: '#900', + color: githubLightColors.AccentPurple, fontWeight: 'bold', }, 'hljs-section': { - color: '#900', + color: githubLightColors.AccentPurple, fontWeight: 'bold', }, 'hljs-selector-id': { - color: '#900', + color: githubLightColors.AccentPurple, fontWeight: 'bold', }, 'hljs-type': { - color: '#458', + color: githubLightColors.AccentBlue, fontWeight: 'bold', }, 'hljs-class .hljs-title': { - color: '#458', + color: githubLightColors.AccentBlue, fontWeight: 'bold', }, 'hljs-tag': { - color: '#000080', + color: githubLightColors.AccentBlue, fontWeight: 'normal', }, 'hljs-name': { - color: '#000080', + color: githubLightColors.AccentBlue, fontWeight: 'normal', }, 'hljs-attribute': { - color: '#000080', + color: githubLightColors.AccentBlue, fontWeight: 'normal', }, 'hljs-regexp': { - color: '#009926', + color: githubLightColors.AccentCyan, }, 'hljs-link': { - color: '#009926', + color: githubLightColors.AccentCyan, }, 'hljs-symbol': { - color: '#990073', + color: githubLightColors.AccentYellow, }, 'hljs-bullet': { - color: '#990073', + color: githubLightColors.AccentYellow, }, 'hljs-built_in': { - color: '#0086b3', + color: githubLightColors.LightBlue, }, 'hljs-builtin-name': { - color: '#0086b3', + color: githubLightColors.LightBlue, }, 'hljs-meta': { - color: '#999', + color: githubLightColors.Gray, fontWeight: 'bold', }, 'hljs-deletion': { @@ -125,5 +141,5 @@ export const GitHubLight: Theme = new Theme( fontWeight: 'bold', }, }, - lightTheme, + githubLightColors, ); diff --git a/packages/cli/src/ui/themes/googlecode.ts b/packages/cli/src/ui/themes/googlecode.ts index 0729d67a..a7895bb8 100644 --- a/packages/cli/src/ui/themes/googlecode.ts +++ b/packages/cli/src/ui/themes/googlecode.ts @@ -4,7 +4,23 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { lightTheme, Theme } from './theme.js'; +import { lightTheme, Theme, type ColorsTheme } from './theme.js'; + +const googleCodeColors: ColorsTheme = { + type: 'light', + Background: 'white', + Foreground: 'black', + LightBlue: '#066', + AccentBlue: '#008', + AccentPurple: '#606', + AccentCyan: '#066', + AccentGreen: '#080', + AccentYellow: '#660', + AccentRed: '#800', + Comment: '#5f6368', + Gray: lightTheme.Gray, + GradientColors: lightTheme.GradientColors, +}; export const GoogleCode: Theme = new Theme( 'Google Code', @@ -14,100 +30,100 @@ export const GoogleCode: Theme = new Theme( display: 'block', overflowX: 'auto', padding: '0.5em', - background: 'white', - color: 'black', + background: googleCodeColors.Background, + color: googleCodeColors.Foreground, }, 'hljs-comment': { - color: '#800', + color: googleCodeColors.AccentRed, }, 'hljs-quote': { - color: '#800', + color: googleCodeColors.AccentRed, }, 'hljs-keyword': { - color: '#008', + color: googleCodeColors.AccentBlue, }, 'hljs-selector-tag': { - color: '#008', + color: googleCodeColors.AccentBlue, }, 'hljs-section': { - color: '#008', + color: googleCodeColors.AccentBlue, }, 'hljs-title': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-name': { - color: '#008', + color: googleCodeColors.AccentBlue, }, 'hljs-variable': { - color: '#660', + color: googleCodeColors.AccentYellow, }, 'hljs-template-variable': { - color: '#660', + color: googleCodeColors.AccentYellow, }, 'hljs-string': { - color: '#080', + color: googleCodeColors.AccentGreen, }, 'hljs-selector-attr': { - color: '#080', + color: googleCodeColors.AccentGreen, }, 'hljs-selector-pseudo': { - color: '#080', + color: googleCodeColors.AccentGreen, }, 'hljs-regexp': { - color: '#080', + color: googleCodeColors.AccentGreen, }, 'hljs-literal': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-symbol': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-bullet': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-meta': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-number': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-link': { - color: '#066', + color: googleCodeColors.AccentCyan, }, 'hljs-doctag': { - color: '#606', + color: googleCodeColors.AccentPurple, fontWeight: 'bold', }, 'hljs-type': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-attr': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-built_in': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-builtin-name': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-params': { - color: '#606', + color: googleCodeColors.AccentPurple, }, 'hljs-attribute': { - color: '#000', + color: googleCodeColors.Foreground, }, 'hljs-subst': { - color: '#000', + color: googleCodeColors.Foreground, }, 'hljs-formula': { backgroundColor: '#eee', fontStyle: 'italic', }, 'hljs-selector-id': { - color: '#9B703F', + color: googleCodeColors.AccentYellow, }, 'hljs-selector-class': { - color: '#9B703F', + color: googleCodeColors.AccentYellow, }, 'hljs-addition': { backgroundColor: '#baeeba', @@ -122,5 +138,5 @@ export const GoogleCode: Theme = new Theme( fontStyle: 'italic', }, }, - lightTheme, + googleCodeColors, ); diff --git a/packages/cli/src/ui/themes/theme.ts b/packages/cli/src/ui/themes/theme.ts index 4b280ec4..9b04da52 100644 --- a/packages/cli/src/ui/themes/theme.ts +++ b/packages/cli/src/ui/themes/theme.ts @@ -19,7 +19,7 @@ export interface ColorsTheme { AccentGreen: string; AccentYellow: string; AccentRed: string; - SubtleComment: string; + Comment: string; Gray: string; GradientColors?: string[]; } @@ -35,8 +35,8 @@ export const lightTheme: ColorsTheme = { AccentGreen: '#3CA84B', AccentYellow: '#D5A40A', AccentRed: '#DD4C4C', - SubtleComment: '#9CA3AF', - Gray: 'gray', + Comment: '#008000', + Gray: '#B7BECC', GradientColors: ['#4796E4', '#847ACE', '#C3677F'], }; @@ -51,8 +51,8 @@ export const darkTheme: ColorsTheme = { AccentGreen: '#A6E3A1', AccentYellow: '#F9E2AF', AccentRed: '#F38BA8', - SubtleComment: '#6C7086', - Gray: 'gray', + Comment: '#6C7086', + Gray: '#6C7086', GradientColors: ['#4796E4', '#847ACE', '#C3677F'], }; @@ -67,7 +67,7 @@ export const ansiTheme: ColorsTheme = { AccentGreen: 'green', AccentYellow: 'yellow', AccentRed: 'red', - SubtleComment: 'gray', + Comment: 'gray', Gray: 'gray', }; diff --git a/packages/cli/src/ui/themes/xcode.ts b/packages/cli/src/ui/themes/xcode.ts index 26b8cf72..d73c664a 100644 --- a/packages/cli/src/ui/themes/xcode.ts +++ b/packages/cli/src/ui/themes/xcode.ts @@ -4,105 +4,121 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { lightTheme, Theme } from './theme.js'; +import { darkTheme, Theme, type ColorsTheme } from './theme.js'; + +const xcodeColors: ColorsTheme = { + type: 'light', + Background: '#fff', + Foreground: 'black', + LightBlue: '#0E0EFF', + AccentBlue: '#1c00cf', + AccentPurple: '#aa0d91', + AccentCyan: '#3F6E74', + AccentGreen: '#007400', + AccentYellow: '#836C28', + AccentRed: '#c41a16', + Comment: '#007400', + Gray: '#c0c0c0', + GradientColors: darkTheme.GradientColors, +}; export const XCode: Theme = new Theme( - 'XCode', + 'Xcode', 'light', { hljs: { display: 'block', overflowX: 'auto', padding: '0.5em', - background: '#fff', - color: 'black', + background: xcodeColors.Background, + color: xcodeColors.Foreground, }, 'xml .hljs-meta': { - color: '#c0c0c0', + color: xcodeColors.Gray, }, 'hljs-comment': { - color: '#007400', + color: xcodeColors.Comment, }, 'hljs-quote': { - color: '#007400', + color: xcodeColors.Comment, }, 'hljs-tag': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-attribute': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-keyword': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-selector-tag': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-literal': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-name': { - color: '#aa0d91', + color: xcodeColors.AccentPurple, }, 'hljs-variable': { - color: '#3F6E74', + color: xcodeColors.AccentCyan, }, 'hljs-template-variable': { - color: '#3F6E74', + color: xcodeColors.AccentCyan, }, 'hljs-code': { - color: '#c41a16', + color: xcodeColors.AccentRed, }, 'hljs-string': { - color: '#c41a16', + color: xcodeColors.AccentRed, }, 'hljs-meta-string': { - color: '#c41a16', + color: xcodeColors.AccentRed, }, 'hljs-regexp': { - color: '#0E0EFF', + color: xcodeColors.LightBlue, }, 'hljs-link': { - color: '#0E0EFF', + color: xcodeColors.LightBlue, }, 'hljs-title': { - color: '#1c00cf', + color: xcodeColors.AccentBlue, }, 'hljs-symbol': { - color: '#1c00cf', + color: xcodeColors.AccentBlue, }, 'hljs-bullet': { - color: '#1c00cf', + color: xcodeColors.AccentBlue, }, 'hljs-number': { - color: '#1c00cf', + color: xcodeColors.AccentBlue, }, 'hljs-section': { - color: '#643820', + color: xcodeColors.AccentYellow, }, 'hljs-meta': { - color: '#643820', + color: xcodeColors.AccentYellow, }, 'hljs-class .hljs-title': { - color: '#5c2699', + color: xcodeColors.AccentPurple, }, 'hljs-type': { - color: '#5c2699', + color: xcodeColors.AccentPurple, }, 'hljs-built_in': { - color: '#5c2699', + color: xcodeColors.AccentPurple, }, 'hljs-builtin-name': { - color: '#5c2699', + color: xcodeColors.AccentPurple, }, 'hljs-params': { - color: '#5c2699', + color: xcodeColors.AccentPurple, }, 'hljs-attr': { - color: '#836C28', + color: xcodeColors.AccentYellow, }, 'hljs-subst': { - color: '#000', + color: xcodeColors.Foreground, }, 'hljs-formula': { backgroundColor: '#eee', @@ -115,10 +131,10 @@ export const XCode: Theme = new Theme( backgroundColor: '#ffc8bd', }, 'hljs-selector-id': { - color: '#9b703f', + color: xcodeColors.AccentYellow, }, 'hljs-selector-class': { - color: '#9b703f', + color: xcodeColors.AccentYellow, }, 'hljs-doctag': { fontWeight: 'bold', @@ -130,5 +146,5 @@ export const XCode: Theme = new Theme( fontStyle: 'italic', }, }, - lightTheme, + xcodeColors, ); diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx index b56c83f4..441fc610 100644 --- a/packages/cli/src/ui/utils/CodeColorizer.tsx +++ b/packages/cli/src/ui/utils/CodeColorizer.tsx @@ -107,7 +107,7 @@ export function colorizeCode( <Text> {lines.map((line, index) => ( <Text key={index}> - <Text color={activeTheme.colors.SubtleComment}> + <Text color={activeTheme.colors.Gray}> {`${String(index + 1).padStart(padWidth, ' ')} `} </Text> <Text color={activeTheme.defaultColor}> @@ -138,7 +138,7 @@ export function colorizeCode( <Text color={activeTheme.defaultColor}> {`${String(index + 1).padStart(padWidth, ' ')} `} </Text> - <Text color={activeTheme.colors.SubtleComment}>{line}</Text> + <Text color={activeTheme.colors.Gray}>{line}</Text> {index < lines.length - 1 && '\n'} </Text> ))} diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx index d93b5be2..1eda45d3 100644 --- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx +++ b/packages/cli/src/ui/utils/MarkdownDisplay.tsx @@ -121,7 +121,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({ break; case 4: headerNode = ( - <Text italic color={Colors.SubtleComment}> + <Text italic color={Colors.Gray}> <RenderInline text={headerText} /> </Text> ); @@ -358,9 +358,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({ // Not enough space to even show the message meaningfully return ( <Box padding={CODE_BLOCK_PADDING}> - <Text color={Colors.SubtleComment}> - ... code is being written ... - </Text> + <Text color={Colors.Gray}>... code is being written ...</Text> </Box> ); } @@ -372,7 +370,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({ return ( <Box flexDirection="column" padding={CODE_BLOCK_PADDING}> {colorizedTruncatedCode} - <Text color={Colors.SubtleComment}>... generating more ...</Text> + <Text color={Colors.Gray}>... generating more ...</Text> </Box> ); } |