diff 页面同步 & Github 全局变量

src/core/color.ts

@@ -1,6 +1,6 @@
 import { rgba } from "polished";
 import { scaleColorLight } from "src/functions";
-import type { Ansi, Console, Diff, Message, Named, Other, Primary, Secondary } from "src/types";
+import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
 import { themeVars } from "src/types/vars";
 import type { Theme } from "./theme";
 
@@ -51,6 +51,8 @@ interface ColorTheme {
   diff: Diff;
   /** 其他 */
   other: Other;
+  /** 仅适用于本主题的全局变量, 取自 Github */
+  github: Github;
 }
 
 /** 定义颜色, 用于生成颜色主题
@@ -349,5 +351,6 @@ export function defineTheme(theme: ColorTheme): Theme {
       ...message,
       ...theme.other,
     },
+    github: theme.github,
   };
 }

src/types/color/github.ts

@@ -0,0 +1,56 @@
+export const github = {
+  display: {
+    brown: { fgColor: null },
+    cyan: { fgColor: null },
+    indigo: { fgColor: null },
+    lemon: { fgColor: null },
+    olive: { fgColor: null },
+    teal: { fgColor: null },
+  },
+  diffBlob: {
+    addtionNum: {
+      bgColor: null,
+    },
+    addtionWord: {
+      bgColor: null,
+    },
+    deletionNum: {
+      bgColor: null,
+    },
+    deletionWord: {
+      bgColor: null,
+    },
+    hunkNum: {
+      /** diff 按钮色 */
+      bgColorRest: null,
+    },
+  },
+  fgColor: {
+    accent: null,
+    attention: null,
+    danger: null,
+    default: null,
+    disabled: null,
+    done: null,
+    neutral: null,
+    severe: null,
+    sponsors: null,
+    success: null,
+    black: null,
+    white: null,
+  },
+  bgColor: {
+    accent: {
+      emphasis: null,
+      muted: null,
+    },
+    black: null,
+    success: {
+      muted: null,
+    },
+    danger: {
+      muted: null,
+    },
+    muted: null,
+  },
+};

src/types/color/index.ts

@@ -1,5 +1,6 @@
 export { ansi, console } from "./console";
 export { diff } from "./diff";
+export { github } from "./github";
 export { primary, secondary } from "./main";
 export { message } from "./message";
 export { named } from "./named";

src/types/index.ts

@@ -9,3 +9,4 @@ export type Ansi = MapLeafNodes<typeof color.ansi, string>;
 export type Console = MapLeafNodes<typeof color.console, string>;
 export type Diff = MapLeafNodes<typeof color.diff, string>;
 export type Other = MapLeafNodes<typeof color.other, string>;
+export type Github = MapLeafNodes<typeof color.github, string>;

src/types/vars.ts

@@ -22,6 +22,7 @@ const vars = {
     console: color.console,
     diff: color.diff,
   },
+  github: color.github,
 };
 
 const otherVars = {

styles/components/diff.scss

@@ -1,42 +0,0 @@
-// Made by Luting ^-^
-.added-code,
-.removed-code {
-  color: #fff !important;
-  border-radius: 0.1875rem;
-
-  * {
-    color: #fff !important;
-    border-radius: 0.1875rem;
-  }
-}
-.code-diff-unified {
-  .add-code {
-    .lines-num,
-    .lines-escape {
-      background-color: #1c4428;
-    }
-  }
-  .del-code {
-    .lines-num,
-    .lines-escape {
-      background-color: #542426;
-    }
-  }
-}
-
-.code-diff-unified .tag-code td,
-.diff-file-body tr.tag-code:last-child > td {
-  background-color: #121d2f;
-}
-
-.code-expander-button,
-.code-diff-unified .tag-code .lines-num,
-.code-diff-unified .tag-code .lines-escape,
-.diff-file-body tr.tag-code:last-child > td.lines-num,
-.diff-file-body tr.tag-code:last-child > td.lines-escape {
-  background-color: #0c2d6b;
-}
-
-.code-expander-button:hover {
-  background: #1f6feb;
-}

styles/components/diff.tsx

@@ -0,0 +1,29 @@
+import { css, themeVars } from "src";
+
+export const diff = css`
+  /* 间隔行多余的颜色 */
+  .tag-code td {
+    background-color: unset;
+  }
+  /* 增加/删除行多余的颜色 */
+  .code-diff-unified {
+    .del-code,
+    .add-code {
+      background-color: unset;
+      border-color: unset;
+    }
+  }
+  /* 增加/删除相关代码背景色圆角 */
+  .added-code,
+  .removed-code {
+    border-radius: 0.1875rem;
+  }
+  /* 展开/收缩按钮悬停时颜色 */
+  .code-expander-button:hover {
+    background: ${themeVars.github.bgColor.accent.emphasis}
+  }
+  /* 行号居中 */
+  .lines-num {
+    text-align: center !important;
+  }
+`;

styles/components/index.tsx

@@ -0,0 +1 @@
+import "./diff"

styles/index.tsx

@@ -0,0 +1 @@
+import "./components"

themes/dark.css.tsx

@@ -10,6 +10,24 @@ const github = {
     olive: { fgColor: "#a2a626" },
     teal: { fgColor: "#1cb0ab" },
   },
+  diffBlob: {
+    addtionNum: {
+      bgColor: "#3fb9504d",
+    },
+    addtionWord: {
+      bgColor: "#2ea04366",
+    },
+    deletionNum: {
+      bgColor: "#f851494d",
+    },
+    deletionWord: {
+      bgColor: "#f8514966",
+    },
+    hunkNum: {
+      /** diff 按钮色 */
+      bgColorRest: "#0c2d6b",
+    },
+  },
   fgColor: {
     accent: "#4493f8",
     attention: "#d29922",
@@ -25,7 +43,18 @@ const github = {
     white: "#ffffff",
   },
   bgColor: {
+    accent: {
+      emphasis: "#1f6feb",
+      muted: "#388bfd1a",
+    },
     black: "#010409",
+    success: {
+      muted: "#2ea04326",
+    },
+    danger: {
+      muted: "#f851491a",
+    },
+    muted: "#151b23",
   },
 };
 
@@ -47,26 +76,26 @@ const console: Console = {
 const diff: Diff = {
   added: {
     linenum: {
-      bg: "#1c4428",
+      bg: github.diffBlob.addtionNum.bgColor,
     },
     row: {
-      bg: "#12261e",
+      bg: github.bgColor.success.muted,
-      border: "#314a37",
+      border: github.bgColor.success.muted,
     },
     word: {
-      bg: "#1d572d",
+      bg: github.diffBlob.addtionWord.bgColor,
     },
   },
   removed: {
     linenum: {
-      bg: "#542426",
+      bg: github.diffBlob.deletionNum.bgColor,
     },
     row: {
-      bg: "#25171c",
+      bg: github.bgColor.danger.muted,
-      border: "#634343",
+      border: github.bgColor.danger.muted,
     },
     word: {
-      bg: "#792e2d",
+      bg: github.diffBlob.deletionWord.bgColor,
     },
   },
   moved: {
@@ -75,7 +104,7 @@ const diff: Diff = {
       border: "#bcca6f",
     },
   },
-  inactive: "#353846",
+  inactive: github.bgColor.muted,
 };
 
 const other: Other = {
@@ -85,11 +114,12 @@ const other: Other = {
     header: "#151b23",
     body: {
       self: "#0d1117",
-      highlight: "#262c36",
+      /** diff 按钮行行色 */
+      highlight: github.bgColor.accent.muted,
     },
   },
   text: {
-    self: "#dce2e7",
+    self: github.fgColor.default,
     dark: "#dbe0ea",
     light: {
       self: "#a6aab5",
@@ -135,7 +165,7 @@ const other: Other = {
     opaque: "#00000080",
   },
   secondaryBg: "#ffffff26",
-  expandButton: "#3c404d",
+  expandButton: github.diffBlob.hunkNum.bgColorRest,
   placeholderText: "#8a8e99",
   editorLineHighlight: themeVars.color.primary.light.num5,
   projectColumnBg: themeVars.color.secondary.light.num2,
@@ -194,4 +224,5 @@ export default defineTheme({
   console,
   diff,
   other,
+  github,
 });