Improve diff viewer color styling for better theme support (Vibe Kanban) (#1894)

* improve diff styles

* diffs

* review comment styles

frontend/src/components/ui-new/containers/CommentWidgetLine.tsx

@@ -43,27 +43,29 @@ export function CommentWidgetLine({
   }, [value, draft, setDraft, widgetKey, onSave, addComment]);
 
   return (
-    <div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
-      <WYSIWYGEditor
-        value={value}
-        onChange={setValue}
-        placeholder={t('comments.addPlaceholder')}
-        className="w-full text-normal min-h-[60px]"
-        projectId={projectId}
-        onCmdEnter={handleSave}
-        autoFocus
-      />
-      <div className="mt-half flex gap-half">
-        <PrimaryButton
-          variant="default"
-          onClick={handleSave}
-          disabled={!value.trim()}
-        >
-          {t('comments.addReviewComment')}
-        </PrimaryButton>
-        <PrimaryButton variant="secondary" onClick={handleCancel}>
-          {t('actions.cancel')}
-        </PrimaryButton>
+    <div className="p-base bg-panel font-sans text-base">
+      <div className="p-base rounded-sm bg-brand/20 border border-brand">
+        <WYSIWYGEditor
+          value={value}
+          onChange={setValue}
+          placeholder={t('comments.addPlaceholder')}
+          className="w-full text-normal min-h-[60px]"
+          projectId={projectId}
+          onCmdEnter={handleSave}
+          autoFocus
+        />
+        <div className="mt-half flex gap-half">
+          <PrimaryButton
+            variant="default"
+            onClick={handleSave}
+            disabled={!value.trim()}
+          >
+            {t('comments.addReviewComment')}
+          </PrimaryButton>
+          <PrimaryButton variant="secondary" onClick={handleCancel}>
+            {t('actions.cancel')}
+          </PrimaryButton>
+        </div>
       </div>
     </div>
   );

frontend/src/components/ui-new/containers/ReviewCommentRenderer.tsx

@@ -41,41 +41,45 @@ export function ReviewCommentRenderer({
 
   if (isEditing) {
     return (
-      <div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
-        <WYSIWYGEditor
-          value={editText}
-          onChange={setEditText}
-          placeholder={t('comments.editPlaceholder')}
-          className="w-full text-normal min-h-[60px]"
-          projectId={projectId}
-          onCmdEnter={handleSave}
-          autoFocus
-        />
-        <div className="mt-half flex gap-half">
-          <PrimaryButton
-            variant="default"
-            onClick={handleSave}
-            disabled={!editText.trim()}
-          >
-            {t('actions.saveChanges')}
-          </PrimaryButton>
-          <PrimaryButton variant="tertiary" onClick={handleCancel}>
-            {t('actions.cancel')}
-          </PrimaryButton>
+      <div className="p-base bg-panel font-sans text-base">
+        <div className="p-base rounded-sm bg-brand/20 border border-brand">
+          <WYSIWYGEditor
+            value={editText}
+            onChange={setEditText}
+            placeholder={t('comments.editPlaceholder')}
+            className="w-full text-sm text-normal min-h-[60px]"
+            projectId={projectId}
+            onCmdEnter={handleSave}
+            autoFocus
+          />
+          <div className="mt-half flex gap-half">
+            <PrimaryButton
+              variant="default"
+              onClick={handleSave}
+              disabled={!editText.trim()}
+            >
+              {t('actions.saveChanges')}
+            </PrimaryButton>
+            <PrimaryButton variant="tertiary" onClick={handleCancel}>
+              {t('actions.cancel')}
+            </PrimaryButton>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="p-base rounded-sm border border-brand bg-brand/10 font-sans">
-      <WYSIWYGEditor
-        value={comment.text}
-        disabled={true}
-        className="text-sm"
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-      />
+    <div className="p-base bg-panel font-sans text-base">
+      <div className="p-base rounded-sm bg-brand/20 border border-brand">
+        <WYSIWYGEditor
+          value={comment.text}
+          disabled={true}
+          className="text-sm"
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+      </div>
     </div>
   );
 }

frontend/src/styles/diff-style-overrides.css

@@ -1,3 +1,31 @@
+.light .legacy-design {
+  --line-added: 160 77% 88%;
+  --line-removed: 10 100% 90%;
+  --line-unchanged: var(--secondary);
+  --line-number-color: var(--primary-foreground);
+}
+
+.dark .legacy-design {
+  --line-added: 130 30% 20%;
+  --line-removed: 12 30% 18%;
+  --line-unchanged: var(--secondary);
+  --line-number-color: var(--primary-foreground);
+}
+
+.light .new-design {
+  --line-added: 160 77% 88%;
+  --line-removed: 10 100% 90%;
+  --line-unchanged: var(--bg-primary);
+  --line-number-color: var(--text-low);
+}
+
+.dark .new-design {
+  --line-added: 130 30% 20%;
+  --line-removed: 12 30% 18%;
+  --line-unchanged: var(--bg-panel);
+  --line-number-color: var(--text-low);
+}
+
 .diff-tailwindcss-wrapper .container {
   width: 100%;
 }
@@ -364,29 +392,21 @@
 
 .diff-tailwindcss-wrapper .diff-style-root {
   --diff-border--: var(--border);
-  --diff-add-content--: hsl(var(--console-success) / 0.2);
-  --diff-del-content--: hsl(var(--console-error) / 0.2);
-  --diff-add-lineNumber--: color-mix(
-    in srgb,
-    hsl(var(--console-success)) 20%,
-    hsl(var(--background)) 80%
-  );
-  --diff-del-lineNumber--: color-mix(
-    in srgb,
-    hsl(var(--console-error)) 20%,
-    hsl(var(--background)) 80%
-  );
-  --diff-plain-content--: hsl(var(--muted));
+  --diff-add-content--: hsl(var(--line-added));
+  --diff-del-content--: hsl(var(--line-removed));
+  --diff-add-lineNumber--: hsl(var(--line-added));
+  --diff-del-lineNumber--: hsl(var(--line-removed));
+  --diff-plain-content--: hsl(var(--line-unchanged));
   --diff-expand-content--: hsl(var(--muted));
-  --diff-plain-lineNumber--: hsl(var(--muted));
+  --diff-plain-lineNumber--: hsl(var(--line-unchanged));
   --diff-expand-lineNumber--: hsl(var(--muted));
-  --diff-plain-lineNumber-color--: hsl(var(--muted-foreground) / 0.7);
-  --diff-expand-lineNumber-color--: hsl(var(--muted-foreground) / 0.7);
+  --diff-plain-lineNumber-color--: hsl(var(--line-number-color));
+  --diff-expand-lineNumber-color--: hsl(var(--muted-foreground));
   --diff-hunk-content--: hsl(var(--muted));
   --diff-hunk-lineNumber--: hsl(var(--muted));
   --diff-hunk-lineNumber-hover--: hsl(var(--muted-foreground) / 0.7);
-  --diff-add-content-highlight--: hsl(var(--console-success) / 0.4);
-  --diff-del-content-highlight--: hsl(var(--console-error) / 0.4);
+  --diff-add-content-highlight--: hsl(var(--line-added) / 0.4);
+  --diff-del-content-highlight--: hsl(var(--line-removed) / 0.4);
   --diff-add-widget--: hsl(var(--muted-foreground) / 0.7);
   --diff-add-widget-color--: hsl(var(--muted));
   --diff-empty-content--: hsl(var(--background));

frontend/src/styles/new/index.css

@@ -55,7 +55,7 @@
 
     /* Text (light) */
     --text-high: 0 0% 5%;
-    --text-normal: 0 0% 16%;
+    --text-normal: 0 0% 20%;
     --text-low: 0 0% 39%;
 
     /* Background (light) */