From 3c0af3654ac5491e79c6f9b55de5debf0e1e13c1 Mon Sep 17 00:00:00 2001 From: Miguel Solorio Date: Fri, 15 Aug 2025 15:39:54 -0700 Subject: Update semantic color tokens (#6253) Co-authored-by: jacob314 --- packages/cli/src/ui/utils/CodeColorizer.tsx | 5 +-- .../cli/src/ui/utils/InlineMarkdownRenderer.tsx | 38 ++++++++++++++-------- packages/cli/src/ui/utils/MarkdownDisplay.tsx | 28 ++++++++-------- packages/cli/src/ui/utils/TableRenderer.tsx | 10 +++--- packages/cli/src/ui/utils/displayUtils.test.ts | 18 +++++----- packages/cli/src/ui/utils/displayUtils.ts | 8 ++--- 6 files changed, 60 insertions(+), 47 deletions(-) (limited to 'packages/cli/src/ui/utils') diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx index b183d556..047e7bae 100644 --- a/packages/cli/src/ui/utils/CodeColorizer.tsx +++ b/packages/cli/src/ui/utils/CodeColorizer.tsx @@ -21,6 +21,7 @@ import { MINIMUM_MAX_HEIGHT, } from '../components/shared/MaxSizedBox.js'; import { LoadedSettings } from '../../config/settings.js'; +import { theme as semanticTheme } from '../semantic-colors.js'; // Configure theming and parsing utilities. const lowlight = createLowlight(common); @@ -171,7 +172,7 @@ export function colorizeCode( return ( {showLineNumbers && ( - + {`${String(index + 1 + hiddenLinesCount).padStart( padWidth, ' ', @@ -208,7 +209,7 @@ export function colorizeCode( {`${String(index + 1).padStart(padWidth, ' ')} `} )} - {line} + {line} ))} diff --git a/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx b/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx index ff8d6257..28c47b83 100644 --- a/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx +++ b/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text } from 'ink'; -import { Colors } from '../colors.js'; +import { theme } from '../semantic-colors.js'; import stringWidth from 'string-width'; // Constants for Markdown parsing @@ -31,7 +31,7 @@ const RenderInlineInternal: React.FC = ({ text }) => { while ((match = inlineRegex.exec(text)) !== null) { if (match.index > lastIndex) { nodes.push( - + {text.slice(lastIndex, match.index)} , ); @@ -48,7 +48,7 @@ const RenderInlineInternal: React.FC = ({ text }) => { fullMatch.length > BOLD_MARKER_LENGTH * 2 ) { renderedNode = ( - + {fullMatch.slice(BOLD_MARKER_LENGTH, -BOLD_MARKER_LENGTH)} ); @@ -60,13 +60,13 @@ const RenderInlineInternal: React.FC = ({ text }) => { !/\w/.test( text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 1), ) && - !/\S[./\\]/.test(text.substring(match.index - 2, match.index)) && - !/[./\\]\S/.test( + !/\S[./]/.test(text.substring(match.index - 2, match.index)) && + !/[./]\S/.test( text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 2), ) ) { renderedNode = ( - + {fullMatch.slice(ITALIC_MARKER_LENGTH, -ITALIC_MARKER_LENGTH)} ); @@ -76,7 +76,7 @@ const RenderInlineInternal: React.FC = ({ text }) => { fullMatch.length > STRIKETHROUGH_MARKER_LENGTH * 2 ) { renderedNode = ( - + {fullMatch.slice( STRIKETHROUGH_MARKER_LENGTH, -STRIKETHROUGH_MARKER_LENGTH, @@ -91,7 +91,7 @@ const RenderInlineInternal: React.FC = ({ text }) => { const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s); if (codeMatch && codeMatch[2]) { renderedNode = ( - + {codeMatch[2]} ); @@ -106,9 +106,9 @@ const RenderInlineInternal: React.FC = ({ text }) => { const linkText = linkMatch[1]; const url = linkMatch[2]; renderedNode = ( - + {linkText} - ({url}) + ({url}) ); } @@ -116,10 +116,10 @@ const RenderInlineInternal: React.FC = ({ text }) => { fullMatch.startsWith('') && fullMatch.endsWith('') && fullMatch.length > - UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 // -1 because length is compared to combined length of start and end tags + UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 ) { renderedNode = ( - + {fullMatch.slice( UNDERLINE_TAG_START_LENGTH, -UNDERLINE_TAG_END_LENGTH, @@ -132,12 +132,22 @@ const RenderInlineInternal: React.FC = ({ text }) => { renderedNode = null; } - nodes.push(renderedNode ?? {fullMatch}); + nodes.push( + renderedNode ?? ( + + {fullMatch} + + ), + ); lastIndex = inlineRegex.lastIndex; } if (lastIndex < text.length) { - nodes.push({text.slice(lastIndex)}); + nodes.push( + + {text.slice(lastIndex)} + , + ); } return <>{nodes.filter((node) => node !== null)}; diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx index 7568e1f8..d656dbc8 100644 --- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx +++ b/packages/cli/src/ui/utils/MarkdownDisplay.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; -import { Colors } from '../colors.js'; +import { theme } from '../semantic-colors.js'; import { colorizeCode } from './CodeColorizer.js'; import { TableRenderer } from './TableRenderer.js'; import { RenderInline } from './InlineMarkdownRenderer.js'; @@ -115,7 +115,7 @@ const MarkdownDisplayInternal: React.FC = ({ // Not a table, treat as regular text addContentBlock( - + , @@ -154,7 +154,7 @@ const MarkdownDisplayInternal: React.FC = ({ if (line.trim().length > 0) { addContentBlock( - + , @@ -173,35 +173,35 @@ const MarkdownDisplayInternal: React.FC = ({ switch (level) { case 1: headerNode = ( - + ); break; case 2: headerNode = ( - + ); break; case 3: headerNode = ( - + ); break; case 4: headerNode = ( - + ); break; default: headerNode = ( - + ); @@ -245,7 +245,7 @@ const MarkdownDisplayInternal: React.FC = ({ } else { addContentBlock( - + , @@ -314,7 +314,9 @@ const RenderCodeBlockInternal: React.FC = ({ // Not enough space to even show the message meaningfully return ( - ... code is being written ... + + ... code is being written ... + ); } @@ -330,7 +332,7 @@ const RenderCodeBlockInternal: React.FC = ({ return ( {colorizedTruncatedCode} - ... generating more ... + ... generating more ... ); } @@ -383,10 +385,10 @@ const RenderListItemInternal: React.FC = ({ flexDirection="row" > - {prefix} + {prefix} - + diff --git a/packages/cli/src/ui/utils/TableRenderer.tsx b/packages/cli/src/ui/utils/TableRenderer.tsx index 2ec19549..478a0893 100644 --- a/packages/cli/src/ui/utils/TableRenderer.tsx +++ b/packages/cli/src/ui/utils/TableRenderer.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { Text, Box } from 'ink'; -import { Colors } from '../colors.js'; +import { theme } from '../semantic-colors.js'; import { RenderInline, getPlainTextLength } from './InlineMarkdownRenderer.js'; interface TableRendererProps { @@ -87,9 +87,9 @@ export const TableRenderer: React.FC = ({ const paddingNeeded = Math.max(0, contentWidth - actualDisplayWidth); return ( - + {isHeader ? ( - + ) : ( @@ -112,7 +112,7 @@ export const TableRenderer: React.FC = ({ const borderParts = adjustedWidths.map((w) => char.horizontal.repeat(w)); const border = char.left + borderParts.join(char.middle) + char.right; - return {border}; + return {border}; }; // Helper function to render a table row @@ -123,7 +123,7 @@ export const TableRenderer: React.FC = ({ }); return ( - + │{' '} {renderedCells.map((cell, index) => ( diff --git a/packages/cli/src/ui/utils/displayUtils.test.ts b/packages/cli/src/ui/utils/displayUtils.test.ts index 7dd9f0e8..64b0a727 100644 --- a/packages/cli/src/ui/utils/displayUtils.test.ts +++ b/packages/cli/src/ui/utils/displayUtils.test.ts @@ -14,7 +14,7 @@ import { CACHE_EFFICIENCY_HIGH, CACHE_EFFICIENCY_MEDIUM, } from './displayUtils.js'; -import { Colors } from '../colors.js'; +import { theme } from '../semantic-colors.js'; describe('displayUtils', () => { describe('getStatusColor', () => { @@ -24,24 +24,24 @@ describe('displayUtils', () => { }; it('should return green for values >= green threshold', () => { - expect(getStatusColor(90, thresholds)).toBe(Colors.AccentGreen); - expect(getStatusColor(80, thresholds)).toBe(Colors.AccentGreen); + expect(getStatusColor(90, thresholds)).toBe(theme.status.success); + expect(getStatusColor(80, thresholds)).toBe(theme.status.success); }); it('should return yellow for values < green and >= yellow threshold', () => { - expect(getStatusColor(79, thresholds)).toBe(Colors.AccentYellow); - expect(getStatusColor(50, thresholds)).toBe(Colors.AccentYellow); + expect(getStatusColor(79, thresholds)).toBe(theme.status.warning); + expect(getStatusColor(50, thresholds)).toBe(theme.status.warning); }); it('should return red for values < yellow threshold', () => { - expect(getStatusColor(49, thresholds)).toBe(Colors.AccentRed); - expect(getStatusColor(0, thresholds)).toBe(Colors.AccentRed); + expect(getStatusColor(49, thresholds)).toBe(theme.status.error); + expect(getStatusColor(0, thresholds)).toBe(theme.status.error); }); it('should return defaultColor for values < yellow threshold when provided', () => { expect( - getStatusColor(49, thresholds, { defaultColor: Colors.Foreground }), - ).toBe(Colors.Foreground); + getStatusColor(49, thresholds, { defaultColor: theme.text.primary }), + ).toBe(theme.text.primary); }); }); diff --git a/packages/cli/src/ui/utils/displayUtils.ts b/packages/cli/src/ui/utils/displayUtils.ts index a52c6ff0..6f6c9209 100644 --- a/packages/cli/src/ui/utils/displayUtils.ts +++ b/packages/cli/src/ui/utils/displayUtils.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Colors } from '../colors.js'; +import { theme } from '../semantic-colors.js'; // --- Thresholds --- export const TOOL_SUCCESS_RATE_HIGH = 95; @@ -23,10 +23,10 @@ export const getStatusColor = ( options: { defaultColor?: string } = {}, ) => { if (value >= thresholds.green) { - return Colors.AccentGreen; + return theme.status.success; } if (value >= thresholds.yellow) { - return Colors.AccentYellow; + return theme.status.warning; } - return options.defaultColor || Colors.AccentRed; + return options.defaultColor || theme.status.error; }; -- cgit v1.2.3