update.

MrWangJustToDo · MrWangJustToDo · commit 5df49e3e6b49 · 2025-05-19T14:55:39.000+08:00
diff --git a/packages/react/src/_com.css b/packages/react/src/_com.css
@@ -11,7 +11,9 @@
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
   --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
   --diff-hunk-lineNumber--: #c7ecff;
   --diff-hunk-lineNumber-hover--: #0969da;
@@ -40,7 +42,9 @@
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
   --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
   --diff-hunk-lineNumber--: #204274;
   --diff-hunk-lineNumber-hover--: #1f6feb;
diff --git a/packages/react/src/components/DiffSplitContentLineNormal.tsx b/packages/react/src/components/DiffSplitContentLineNormal.tsx
@@ -5,6 +5,7 @@ import {
   plainLineNumberColorName,
   diffAsideWidthName,
   emptyBGName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
 
@@ -76,7 +77,7 @@ const InternalDiffSplitLine = ({
             className={`diff-line-${SplitSide[side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`}
             style={{
               backgroundColor: lineNumberBG,
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               width: `var(${diffAsideWidthName})`,
               minWidth: `var(${diffAsideWidthName})`,
               maxWidth: `var(${diffAsideWidthName})`,
diff --git a/packages/react/src/components/DiffSplitContentLineWrap.tsx b/packages/react/src/components/DiffSplitContentLineWrap.tsx
@@ -5,6 +5,7 @@ import {
   plainLineNumberColorName,
   emptyBGName,
   borderColorName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
 
@@ -132,7 +133,7 @@ const InternalDiffSplitLine = ({
             data-side={SplitSide[SplitSide.new]}
             style={{
               backgroundColor: newLineNumberBG,
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               borderLeftColor: `var(${borderColorName})`,
               borderLeftStyle: "solid",
             }}
diff --git a/packages/react/src/components/DiffUnifiedContentLine.tsx b/packages/react/src/components/DiffUnifiedContentLine.tsx
@@ -9,6 +9,7 @@ import {
   plainContentBGName,
   plainLineNumberBGName,
   plainLineNumberColorName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
 import { memo } from "react";
@@ -244,7 +245,7 @@ const _DiffUnifiedLine = memo(
           <td
             className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
             style={{
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
               maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
               minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
diff --git a/packages/react/src/components/v2/DiffSplitContentLineNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitContentLineNormal_v2.tsx
@@ -5,6 +5,7 @@ import {
   plainLineNumberColorName,
   emptyBGName,
   diffAsideWidthName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
 
@@ -74,7 +75,7 @@ const InternalDiffSplitLine = ({
             className={`diff-line-${SplitSide[side]}-num sticky left-0 flex w-[1%] min-w-[40px] select-none items-center px-[10px] text-right`}
             style={{
               backgroundColor: lineNumberBG,
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               width: `var(${diffAsideWidthName})`,
               minWidth: `var(${diffAsideWidthName})`,
               maxWidth: `var(${diffAsideWidthName})`,
diff --git a/packages/react/src/components/v2/DiffSplitContentLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitContentLineWrap_v2.tsx
@@ -6,6 +6,7 @@ import {
   emptyBGName,
   borderColorName,
   diffAsideWidthName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
 
@@ -73,7 +74,7 @@ const InternalDiffSplitLine = ({
             data-side={SplitSide[SplitSide.old]}
             style={{
               backgroundColor: oldLineNumberBG,
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               width: `var(${diffAsideWidthName})`,
               minWidth: `var(${diffAsideWidthName})`,
               maxWidth: `var(${diffAsideWidthName})`,
@@ -155,7 +156,7 @@ const InternalDiffSplitLine = ({
             data-side={SplitSide[SplitSide.new]}
             style={{
               backgroundColor: newLineNumberBG,
-              color: `var(${plainLineNumberColorName})`,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
               width: `var(${diffAsideWidthName})`,
               minWidth: `var(${diffAsideWidthName})`,
               maxWidth: `var(${diffAsideWidthName})`,
diff --git a/packages/utils/index.d.ts b/packages/utils/index.d.ts
@@ -17,7 +17,9 @@ export declare const delLineNumberBGName = "--diff-del-lineNumber--";
 export declare const plainContentBGName = "--diff-plain-content--";
 export declare const expandContentBGName = "--diff-expand-content--";
 export declare const plainLineNumberColorName = "--diff-plain-lineNumber-color--";
+export declare const expandLineNumberColorName = "--diff-expand-lineNumber-color--";
 export declare const plainLineNumberBGName = "--diff-plain-lineNumber--";
+export declare const expandLineNumberBGName = "--diff-expand-lineNumber--";
 export declare const hunkContentBGName = "--diff-hunk-content--";
 export declare const hunkContentColorName = "--diff-hunk-content-color--";
 export declare const hunkLineNumberBGName = "--diff-hunk-lineNumber--";
@@ -28,7 +30,7 @@ export declare const addWidgetBGName = "--diff-add-widget--";
 export declare const addWidgetColorName = "--diff-add-widget-color--";
 export declare const emptyBGName = "--diff-empty-content--";
 export declare const getContentBG: (isAdded: boolean, isDelete: boolean, hasDiff: boolean) => "var(--diff-add-content--)" | "var(--diff-del-content--)" | "var(--diff-plain-content--)" | "var(--diff-expand-content--)";
-export declare const getLineNumberBG: (isAdded: boolean, isDelete: boolean, hasDiff: boolean) => "var(--diff-expand-content--)" | "var(--diff-add-lineNumber--)" | "var(--diff-del-lineNumber--)" | "var(--diff-plain-lineNumber--)";
+export declare const getLineNumberBG: (isAdded: boolean, isDelete: boolean, hasDiff: boolean) => "var(--diff-add-lineNumber--)" | "var(--diff-del-lineNumber--)" | "var(--diff-plain-lineNumber--)" | "var(--diff-expand-lineNumber--)";
 export declare const removeAllSelection: () => void;
 export declare const syncScroll: (left: HTMLElement, right: HTMLElement) => () => void;
 export declare const diffFontSizeName = "--diff-font-size--";
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
@@ -14,8 +14,12 @@ export const expandContentBGName = "--diff-expand-content--";
 
 export const plainLineNumberColorName = "--diff-plain-lineNumber-color--";
 
+export const expandLineNumberColorName = "--diff-expand-lineNumber-color--";
+
 export const plainLineNumberBGName = "--diff-plain-lineNumber--";
 
+export const expandLineNumberBGName = "--diff-expand-lineNumber--";
+
 export const hunkContentBGName = "--diff-hunk-content--";
 
 export const hunkContentColorName = "--diff-hunk-content-color--";
@@ -51,5 +55,5 @@ export const getLineNumberBG = (isAdded: boolean, isDelete: boolean, hasDiff: bo
       ? `var(${delLineNumberBGName})`
       : hasDiff
         ? `var(${plainLineNumberBGName})`
-        : `var(${expandContentBGName})`;
+        : `var(${expandLineNumberBGName})`;
 };
diff --git a/packages/vue/src/_com.css b/packages/vue/src/_com.css
@@ -11,7 +11,9 @@
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
   --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
   --diff-hunk-lineNumber--: #c7ecff;
   --diff-hunk-lineNumber-hover--: #0969da;
@@ -40,7 +42,9 @@
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
   --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
   --diff-hunk-lineNumber--: #204274;
   --diff-hunk-lineNumber-hover--: #1f6feb;
diff --git a/packages/vue/src/components/DiffSplitContentLineNormal.tsx b/packages/vue/src/components/DiffSplitContentLineNormal.tsx
@@ -5,6 +5,7 @@ import {
   plainLineNumberColorName,
   diffAsideWidthName,
   emptyBGName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import { defineComponent, ref } from "vue";
 
@@ -89,7 +90,7 @@ export const DiffSplitContentLine = defineComponent(
                 class={`diff-line-${SplitSide[props.side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`}
                 style={{
                   backgroundColor: lineNumberBG,
-                  color: `var(${plainLineNumberColorName})`,
+                  color: `var(${currentLineHasDiff.value ? plainLineNumberColorName : expandLineNumberColorName})`,
                   width: `var(${diffAsideWidthName})`,
                   minWidth: `var(${diffAsideWidthName})`,
                   maxWidth: `var(${diffAsideWidthName})`,
diff --git a/packages/vue/src/components/DiffSplitContentLineWrap.tsx b/packages/vue/src/components/DiffSplitContentLineWrap.tsx
@@ -2,6 +2,7 @@ import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-di
 import {
   borderColorName,
   emptyBGName,
+  expandLineNumberColorName,
   getContentBG,
   getLineNumberBG,
   plainLineNumberColorName,
@@ -89,7 +90,10 @@ export const DiffSplitContentLine = defineComponent(
             <>
               <td
                 class="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
-                style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+                style={{
+                  backgroundColor: oldLineNumberBG,
+                  color: `var(${hasDiff.value ? plainLineNumberColorName : expandLineNumberColorName})`,
+                }}
               >
                 {hasDiff.value && enableAddWidget.value && (
                   <DiffSplitAddWidget
@@ -147,7 +151,7 @@ export const DiffSplitContentLine = defineComponent(
                 class="diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top"
                 style={{
                   backgroundColor: newLineNumberBG,
-                  color: `var(${plainLineNumberColorName})`,
+                  color: `var(${hasDiff.value ? plainLineNumberColorName : expandLineNumberColorName})`,
                   borderLeftColor: `var(${borderColorName})`,
                   borderLeftStyle: "solid",
                 }}
diff --git a/packages/vue/src/components/DiffUnifiedContentLine.tsx b/packages/vue/src/components/DiffUnifiedContentLine.tsx
@@ -9,6 +9,7 @@ import {
   plainContentBGName,
   plainLineNumberBGName,
   plainLineNumberColorName,
+  expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import { defineComponent, ref } from "vue";
 
@@ -246,7 +247,7 @@ export const DiffUnifiedContentLine = defineComponent(
             <td
               class="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
               style={{
-                color: `var(${plainLineNumberColorName})`,
+                color: `var(${unifiedItem.value.diff ? plainLineNumberColorName : expandLineNumberColorName})`,
                 backgroundColor: unifiedItem.value.diff
                   ? `var(${plainLineNumberBGName})`
                   : `var(${expandContentBGName})`,
