abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-21 01:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Update semantic color tokens" (#6365)

Browse Source
This commit is contained in:
Jacob Richman
2025-08-15 20:18:31 -07:00
committed by GitHub
parent d57cc0b930
commit 6c1373c332
60 changed files with 502 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/cli/src/ui/utils/CodeColorizer.tsx
View File

@@ -21,7 +21,6 @@ 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);
@@ -172,7 +171,7 @@ export function colorizeCode(
return (
<Box key={index}>
{showLineNumbers && (
<Text color={semanticTheme.text.secondary}>
<Text color={activeTheme.colors.Gray}>
{`${String(index + 1 + hiddenLinesCount).padStart(
padWidth,
' ',
@@ -209,7 +208,7 @@ export function colorizeCode(
{`${String(index + 1).padStart(padWidth, ' ')} `}
</Text>
)}
<Text color={semanticTheme.text.secondary}>{line}</Text>
<Text color={activeTheme.colors.Gray}>{line}</Text>
</Box>
))}
</MaxSizedBox>

38
packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
View File

@@ -6,7 +6,7 @@
import React from 'react';
import { Text } from 'ink';
import { theme } from '../semantic-colors.js';
import { Colors } from '../colors.js';
import stringWidth from 'string-width';
// Constants for Markdown parsing
@@ -31,7 +31,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
while ((match = inlineRegex.exec(text)) !== null) {
if (match.index > lastIndex) {
nodes.push(
<Text key={`t-${lastIndex}`} color={theme.text.primary}>
<Text key={`t-${lastIndex}`}>
{text.slice(lastIndex, match.index)}
</Text>,
);
@@ -48,7 +48,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.length > BOLD_MARKER_LENGTH * 2
) {
renderedNode = (
<Text key={key} bold color={theme.text.primary}>
<Text key={key} bold>
{fullMatch.slice(BOLD_MARKER_LENGTH, -BOLD_MARKER_LENGTH)}
</Text>
);
@@ -60,13 +60,13 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ 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 = (
<Text key={key} italic color={theme.text.primary}>
<Text key={key} italic>
{fullMatch.slice(ITALIC_MARKER_LENGTH, -ITALIC_MARKER_LENGTH)}
</Text>
);
@@ -76,7 +76,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.length > STRIKETHROUGH_MARKER_LENGTH * 2
) {
renderedNode = (
<Text key={key} strikethrough color={theme.text.primary}>
<Text key={key} strikethrough>
{fullMatch.slice(
STRIKETHROUGH_MARKER_LENGTH,
-STRIKETHROUGH_MARKER_LENGTH,
@@ -91,7 +91,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s);
if (codeMatch && codeMatch[2]) {
renderedNode = (
<Text key={key} color={theme.text.accent}>
<Text key={key} color={Colors.AccentPurple}>
{codeMatch[2]}
</Text>
);
@@ -106,9 +106,9 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
const linkText = linkMatch[1];
const url = linkMatch[2];
renderedNode = (
<Text key={key} color={theme.text.primary}>
<Text key={key}>
{linkText}
<Text color={theme.text.link}> ({url})</Text>
<Text color={Colors.AccentBlue}> ({url})</Text>
</Text>
);
}
@@ -116,10 +116,10 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.startsWith('<u>') &&
fullMatch.endsWith('</u>') &&
fullMatch.length >
UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1
UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 // -1 because length is compared to combined length of start and end tags
) {
renderedNode = (
<Text key={key} underline color={theme.text.primary}>
<Text key={key} underline>
{fullMatch.slice(
UNDERLINE_TAG_START_LENGTH,
-UNDERLINE_TAG_END_LENGTH,
@@ -132,22 +132,12 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
renderedNode = null;
}
nodes.push(
renderedNode ?? (
<Text key={key} color={theme.text.primary}>
{fullMatch}
</Text>
),
);
nodes.push(renderedNode ?? <Text key={key}>{fullMatch}</Text>);
lastIndex = inlineRegex.lastIndex;
}
if (lastIndex < text.length) {
nodes.push(
<Text key={`t-${lastIndex}`} color={theme.text.primary}>
{text.slice(lastIndex)}
</Text>,
);
nodes.push(<Text key={`t-${lastIndex}`}>{text.slice(lastIndex)}</Text>);
}
return <>{nodes.filter((node) => node !== null)}</>;

28
packages/cli/src/ui/utils/MarkdownDisplay.tsx
View File

@@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { theme } from '../semantic-colors.js';
import { Colors } from '../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<MarkdownDisplayProps> = ({
// Not a table, treat as regular text
addContentBlock(
<Box key={key}>
<Text wrap="wrap" color={theme.text.primary}>
<Text wrap="wrap">
<RenderInline text={line} />
</Text>
</Box>,
@@ -154,7 +154,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
if (line.trim().length > 0) {
addContentBlock(
<Box key={key}>
<Text wrap="wrap" color={theme.text.primary}>
<Text wrap="wrap">
<RenderInline text={line} />
</Text>
</Box>,
@@ -173,35 +173,35 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
switch (level) {
case 1:
headerNode = (
<Text bold color={theme.text.accent}>
<Text bold color={Colors.AccentCyan}>
<RenderInline text={headerText} />
</Text>
);
break;
case 2:
headerNode = (
<Text bold color={theme.text.link}>
<Text bold color={Colors.AccentBlue}>
<RenderInline text={headerText} />
</Text>
);
break;
case 3:
headerNode = (
<Text bold color={theme.text.primary}>
<Text bold>
<RenderInline text={headerText} />
</Text>
);
break;
case 4:
headerNode = (
<Text italic color={theme.text.secondary}>
<Text italic color={Colors.Gray}>
<RenderInline text={headerText} />
</Text>
);
break;
default:
headerNode = (
<Text color={theme.text.primary}>
<Text>
<RenderInline text={headerText} />
</Text>
);
@@ -245,7 +245,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
} else {
addContentBlock(
<Box key={key}>
<Text wrap="wrap" color={theme.text.primary}>
<Text wrap="wrap">
<RenderInline text={line} />
</Text>
</Box>,
@@ -314,9 +314,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
// Not enough space to even show the message meaningfully
return (
<Box paddingLeft={CODE_BLOCK_PREFIX_PADDING}>
<Text color={theme.text.secondary}>
... code is being written ...
</Text>
<Text color={Colors.Gray}>... code is being written ...</Text>
</Box>
);
}
@@ -332,7 +330,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
return (
<Box paddingLeft={CODE_BLOCK_PREFIX_PADDING} flexDirection="column">
{colorizedTruncatedCode}
<Text color={theme.text.secondary}>... generating more ...</Text>
<Text color={Colors.Gray}>... generating more ...</Text>
</Box>
);
}
@@ -385,10 +383,10 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
flexDirection="row"
>
<Box width={prefixWidth}>
<Text color={theme.text.accent}>{prefix}</Text>
<Text>{prefix}</Text>
</Box>
<Box flexGrow={LIST_ITEM_TEXT_FLEX_GROW}>
<Text wrap="wrap" color={theme.text.primary}>
<Text wrap="wrap">
<RenderInline text={itemText} />
</Text>
</Box>

10
packages/cli/src/ui/utils/TableRenderer.tsx
View File

@@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { theme } from '../semantic-colors.js';
import { Colors } from '../colors.js';
import { RenderInline, getPlainTextLength } from './InlineMarkdownRenderer.js';
interface TableRendererProps {
@@ -87,9 +87,9 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
const paddingNeeded = Math.max(0, contentWidth - actualDisplayWidth);
return (
<Text color={theme.text.primary}>
<Text>
{isHeader ? (
<Text bold color={theme.text.accent}>
<Text bold color={Colors.AccentCyan}>
<RenderInline text={cellContent} />
</Text>
) : (
@@ -112,7 +112,7 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
const borderParts = adjustedWidths.map((w) => char.horizontal.repeat(w));
const border = char.left + borderParts.join(char.middle) + char.right;
return <Text color={theme.text.primary}>{border}</Text>;
return <Text>{border}</Text>;
};
// Helper function to render a table row
@@ -123,7 +123,7 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
});
return (
<Text color={theme.text.primary}>
<Text>
│{' '}
{renderedCells.map((cell, index) => (
<React.Fragment key={index}>

18
packages/cli/src/ui/utils/displayUtils.test.ts
View File

@@ -14,7 +14,7 @@ import {
CACHE_EFFICIENCY_HIGH,
CACHE_EFFICIENCY_MEDIUM,
} from './displayUtils.js';
import { theme } from '../semantic-colors.js';
import { Colors } from '../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(theme.status.success);
expect(getStatusColor(80, thresholds)).toBe(theme.status.success);
expect(getStatusColor(90, thresholds)).toBe(Colors.AccentGreen);
expect(getStatusColor(80, thresholds)).toBe(Colors.AccentGreen);
});
it('should return yellow for values < green and >= yellow threshold', () => {
expect(getStatusColor(79, thresholds)).toBe(theme.status.warning);
expect(getStatusColor(50, thresholds)).toBe(theme.status.warning);
expect(getStatusColor(79, thresholds)).toBe(Colors.AccentYellow);
expect(getStatusColor(50, thresholds)).toBe(Colors.AccentYellow);
});
it('should return red for values < yellow threshold', () => {
expect(getStatusColor(49, thresholds)).toBe(theme.status.error);
expect(getStatusColor(0, thresholds)).toBe(theme.status.error);
expect(getStatusColor(49, thresholds)).toBe(Colors.AccentRed);
expect(getStatusColor(0, thresholds)).toBe(Colors.AccentRed);
});
it('should return defaultColor for values < yellow threshold when provided', () => {
expect(
getStatusColor(49, thresholds, { defaultColor: theme.text.primary }),
).toBe(theme.text.primary);
getStatusColor(49, thresholds, { defaultColor: Colors.Foreground }),
).toBe(Colors.Foreground);
});
});

8
packages/cli/src/ui/utils/displayUtils.ts
View File

@@ -4,7 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { theme } from '../semantic-colors.js';
import { Colors } from '../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 theme.status.success;
return Colors.AccentGreen;
}
if (value >= thresholds.yellow) {
return theme.status.warning;
return Colors.AccentYellow;
}
return options.defaultColor || theme.status.error;
return options.defaultColor || Colors.AccentRed;
};