add source target related colours

Author: themisvaltinos

vscode/react/src/components/tablediff/RowStatsSection.tsx

@@ -46,19 +46,19 @@ export function RowStatsSection({
               <span className="font-medium">{formatCount(fullMatchCount)}</span>
             </div>
             <div className="flex justify-between">
-              <span className={twColors.textInfo}>~ Partial Matches</span>
+              <span className={twColors.textClass}>~ Partial Matches</span>
               <span className="font-medium">
                 {formatCount(partialMatchCount)}
               </span>
             </div>
           </div>
           <div className="space-y-1">
             <div className="flex justify-between">
-              <span className={twColors.textWarning}>+ Source Only</span>
+              <span className={twColors.textSource}>+ Source Only</span>
               <span className="font-medium">{formatCount(sOnlyCount)}</span>
             </div>
             <div className="flex justify-between">
-              <span className={twColors.textError}>- Target Only</span>
+              <span className={twColors.textTarget}>- Target Only</span>
               <span className="font-medium">{formatCount(tOnlyCount)}</span>
             </div>
           </div>

vscode/react/src/components/tablediff/SampleDataSection.tsx

@@ -29,8 +29,8 @@ const TableHeaderCell = ({
     <th
       className={twMerge(
         'text-left py-2 px-2 font-medium whitespace-nowrap',
-        isSource && twColors.textInfo,
-        isTarget && twColors.textSuccess,
+        isSource && twColors.textSource,
+        isTarget && twColors.textTarget,
         !isSource && !isTarget && twColors.textMuted,
       )}
     >
@@ -61,8 +61,8 @@ const DiffTableCell = ({
     <td
       className={twMerge(
         'py-2 px-2 font-mono whitespace-nowrap',
-        isSource && twColors.textInfo + ' bg-blue-500/10',
-        isTarget && twColors.textSuccess + ' bg-green-500/10',
+        isSource && twColors.textSource + ' bg-blue-500/10',
+        isTarget && twColors.textTarget + ' bg-green-500/10',
         !isSource && !isTarget && twColors.textForeground,
       )}
     >
@@ -255,7 +255,7 @@ export function SampleDataSection({ rowDiff }: SampleDataSectionProps) {
     <div className="px-8 py-3 space-y-6">
       {/* COMMON ROWS diff */}
       <div>
-        <h4 className={twMerge('text-sm font-medium mb-3', twColors.textInfo)}>
+        <h4 className={twMerge('text-sm font-medium mb-3', twColors.textClass)}>
           COMMON ROWS Data Differences:
         </h4>
         {Object.keys(groupedDifferences).length > 0 ? (

vscode/react/src/components/tablediff/TableDiffResults.tsx

@@ -38,7 +38,7 @@ export function TableDiffResults({ data }: Props) {
     }))
   }
 
-  const formatPercentage = (v: number) => `${(v * 100).toFixed(1)}%`
+  const formatPercentage = (v: number) => `${(v).toFixed(1)}%`
   const formatCount = (v: number) => v.toLocaleString()
 
   return (
@@ -58,13 +58,13 @@ export function TableDiffResults({ data }: Props) {
         )}
       >
         <div className="flex items-center gap-3 flex-wrap">
-          <span className={twMerge('text-sm font-medium', twColors.textInfo)}>
+          <span className={twMerge('text-sm font-medium', twColors.textSource)}>
             Source:
           </span>
           <code
             className={twMerge(
               'px-2 py-1 rounded text-sm whitespace-nowrap border',
-              twColors.textInfo,
+              twColors.textSource,
               twColors.bgInput,
               twColors.borderPanel,
             )}
@@ -74,15 +74,15 @@ export function TableDiffResults({ data }: Props) {
           <span
             className={twMerge(
               'text-sm font-medium ml-4',
-              twColors.textSuccess,
+              twColors.textTarget,
             )}
           >
             Target:
           </span>
           <code
             className={twMerge(
               'px-2 py-1 rounded text-sm whitespace-nowrap border',
-              twColors.textSuccess,
+              twColors.textTarget,
               twColors.bgInput,
               twColors.borderPanel,
             )}
@@ -91,13 +91,13 @@ export function TableDiffResults({ data }: Props) {
           </code>
         </div>
         <div className="flex items-center gap-6 text-xs flex-wrap">
-          <span className={twColors.textInfo}>
+          <span className={twColors.textSource}>
             Source rows:{' '}
             <span className="font-medium">
               {formatCount(row_diff.source_count)}
             </span>
           </span>
-          <span className={twColors.textSuccess}>
+          <span className={twColors.textTarget}>
             Target rows:{' '}
             <span className="font-medium">
               {formatCount(row_diff.target_count)}

vscode/react/src/components/tablediff/tailwind-utils.ts

@@ -12,6 +12,17 @@ export const twColors = {
   textRemoved: 'text-[var(--vscode-diffEditor-removedTextForeground)]',
   textModified: 'text-[var(--vscode-diffEditor-modifiedTextForeground)]',
 
+  // Source and target environment colors
+  textSource: 'text-[var(--vscode-debugIcon-continueForeground)]',
+  textTarget: 'text-[var(--vscode-debugIcon-startForeground)]',
+  textClass: 'text-[var(--vscode-symbolIcon-classForeground)]',
+  bgSource: 'bg-[var(--vscode-debugIcon-continueForeground)]',
+  bgTarget: 'bg-[var(--vscode-debugIcon-startForeground)]',
+  bgClass: 'bg-[var(--vscode-symbolIcon-classForeground)]',
+  borderSource: 'border-[var(--vscode-debugIcon-continueForeground)]',
+  borderTarget: 'border-[var(--vscode-debugIcon-startForeground)]',
+  borderClass: 'border-[var(--vscode-symbolIcon-classForeground)]',
+
   // Background colors
   bgEditor: 'bg-[var(--vscode-editor-background)]',
   bgInput: 'bg-[var(--vscode-input-background)]',