Revert "Update semantic color tokens" (#6365)

6 files changed, 47 insertions, 60 deletions

diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index 047e7bae..b183d556 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/packages/cli/src/ui/utils/CodeColorizer.tsx
@@ -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>
diff --git a/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx b/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
index 28c47b83..ff8d6257 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 { 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)}</>;
diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
index d656dbc8..7568e1f8 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 { 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>
diff --git a/packages/cli/src/ui/utils/TableRenderer.tsx b/packages/cli/src/ui/utils/TableRenderer.tsx
index 478a0893..2ec19549 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 { 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}>
diff --git a/packages/cli/src/ui/utils/displayUtils.test.ts b/packages/cli/src/ui/utils/displayUtils.test.ts
index 64b0a727..7dd9f0e8 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 { 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);
     });
   });
 
diff --git a/packages/cli/src/ui/utils/displayUtils.ts b/packages/cli/src/ui/utils/displayUtils.ts
index 6f6c9209..a52c6ff0 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 { 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;
 };