From e113d1c603663d480d125169299fc1a17ce0d902 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sat, 28 Jun 2025 23:19:37 +0800 Subject: [PATCH] =?UTF-8?q?diff=20=E9=A1=B5=E9=9D=A2=E5=90=8C=E6=AD=A5=20&?= =?UTF-8?q?=20Github=20=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/color.ts | 5 +++- src/types/color/github.ts | 56 +++++++++++++++++++++++++++++++++++++ src/types/color/index.ts | 1 + src/types/index.ts | 1 + src/types/vars.ts | 1 + styles/components/diff.scss | 42 ---------------------------- styles/components/diff.tsx | 29 +++++++++++++++++++ styles/components/index.tsx | 1 + styles/index.tsx | 1 + themes/dark.css.tsx | 55 ++++++++++++++++++++++++++++-------- 10 files changed, 137 insertions(+), 55 deletions(-) create mode 100644 src/types/color/github.ts delete mode 100644 styles/components/diff.scss create mode 100644 styles/components/diff.tsx create mode 100644 styles/components/index.tsx diff --git a/src/core/color.ts b/src/core/color.ts index 9b8e30c..82fa107 100644 --- a/src/core/color.ts +++ b/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, }; } diff --git a/src/types/color/github.ts b/src/types/color/github.ts new file mode 100644 index 0000000..8efae3d --- /dev/null +++ b/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, + }, +}; diff --git a/src/types/color/index.ts b/src/types/color/index.ts index 94336c2..68d23d9 100644 --- a/src/types/color/index.ts +++ b/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"; diff --git a/src/types/index.ts b/src/types/index.ts index e72cca8..25c2e55 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -9,3 +9,4 @@ export type Ansi = MapLeafNodes; export type Console = MapLeafNodes; export type Diff = MapLeafNodes; export type Other = MapLeafNodes; +export type Github = MapLeafNodes; diff --git a/src/types/vars.ts b/src/types/vars.ts index 93c6b34..071a8e2 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -22,6 +22,7 @@ const vars = { console: color.console, diff: color.diff, }, + github: color.github, }; const otherVars = { diff --git a/styles/components/diff.scss b/styles/components/diff.scss deleted file mode 100644 index 71cab27..0000000 --- a/styles/components/diff.scss +++ /dev/null @@ -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; -} diff --git a/styles/components/diff.tsx b/styles/components/diff.tsx new file mode 100644 index 0000000..1f1bf1a --- /dev/null +++ b/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; + } +`; diff --git a/styles/components/index.tsx b/styles/components/index.tsx new file mode 100644 index 0000000..ab57fe7 --- /dev/null +++ b/styles/components/index.tsx @@ -0,0 +1 @@ +import "./diff" \ No newline at end of file diff --git a/styles/index.tsx b/styles/index.tsx index e69de29..774b845 100644 --- a/styles/index.tsx +++ b/styles/index.tsx @@ -0,0 +1 @@ +import "./components" \ No newline at end of file diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 8aa61d2..8b14fc4 100644 --- a/themes/dark.css.tsx +++ b/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", - border: "#314a37", + bg: github.bgColor.success.muted, + 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", - border: "#634343", + bg: github.bgColor.danger.muted, + 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, });