From 0a6770c28e05469b837751af6fa19e5924030749 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Thu, 7 Aug 2025 16:19:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- TODO.md | 1 - src/core/github.ts | 20 +++++++----- themes/dark.css.ts | 14 ++++----- themes/light.css.ts | 77 +++++++++++++++++++++++++++++++++++++++++++++ vite.config.ts | 2 +- 5 files changed, 96 insertions(+), 18 deletions(-) create mode 100644 themes/light.css.ts diff --git a/TODO.md b/TODO.md index e9eb7d5..ea36a19 100644 --- a/TODO.md +++ b/TODO.md @@ -6,7 +6,6 @@ - defineTheme 颜色生成代码重构 - 亮色主题适配/测试 - 自动颜色主题生成 -- github primer 官方库集成 ### 其他 diff --git a/src/core/github.ts b/src/core/github.ts index 02255e3..287e335 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -1,4 +1,6 @@ +import { saturate } from "polished"; import type { Console, Diff, Other } from "src"; +import { scaleColorLight } from "src/functions"; import type { Github } from "src/types"; import { themeVars } from "src/types/vars"; import { defineTheme } from "./color"; @@ -81,11 +83,9 @@ export type GithubColor = { button: { primary: { fgColor: { - accent: string; rest: string; }; bgColor: { - rest: string; hover: string; }; }; @@ -114,7 +114,9 @@ export type GithubColor = { }; }; shadow: { - floating: string; + floating: { + small: string; + }; }; overlay: { backdrop: { @@ -134,7 +136,6 @@ export type GithubColor = { num2: string; num3: string; num4: string; - num5: string; }; borderColor: { num0: string; @@ -244,7 +245,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { button: githubColor.control.bgColor.rest, codeBg: "unset", shadow: { - self: githubColor.shadow.floating, + self: githubColor.shadow.floating.small, opaque: themeVars.color.shadow.self, }, secondaryBg: "unset", @@ -323,11 +324,11 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { }, primary: { fgColor: { - accent: githubColor.button.primary.fgColor.accent, + accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 5 : -5)), rest: githubColor.button.primary.fgColor.rest, }, bgColor: { - rest: githubColor.button.primary.bgColor.rest, + rest: themeVars.github.bgColor.success.emphasis, hover: githubColor.button.primary.bgColor.hover, }, borderColor: { @@ -377,7 +378,10 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { num2: githubColor.contribution.default.bgColor.num2, num3: githubColor.contribution.default.bgColor.num3, num4: githubColor.contribution.default.bgColor.num4, - num5: githubColor.contribution.default.bgColor.num5, + num5: saturate( + 0.1, + scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 30 : -30) + ), }, borderColor: { num0: githubColor.contribution.default.borderColor.num0, diff --git a/themes/dark.css.ts b/themes/dark.css.ts index 2d23458..4e714f6 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -1,6 +1,6 @@ -import { defineGithubTheme, type GithubColor } from "src/core/github"; +import { defineGithubTheme } from "src/core/github"; -const github: GithubColor = { +export default defineGithubTheme({ isDarkTheme: true, display: { brown: { fgColor: "#b69a6d" }, @@ -53,22 +53,20 @@ const github: GithubColor = { translucent: "#ffffff26", }, button: { - primary: { fgColor: { accent: "#39d353", rest: "#ffffff" }, bgColor: { rest: "#238636", hover: "#29903b" } }, + primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } }, danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, }, control: { bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, }, - shadow: { floating: "#01040966" }, + shadow: { floating: { small: "#01040966" } }, overlay: { backdrop: { bgColor: "#21283066" } }, underlineNav: { borderColor: { active: "#f78166" } }, contribution: { default: { - bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364", num5: "#7ee787" }, + bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364" }, borderColor: { num0: "#0104090d" }, }, }, -}; - -export default defineGithubTheme(github); +}); diff --git a/themes/light.css.ts b/themes/light.css.ts new file mode 100644 index 0000000..219ab66 --- /dev/null +++ b/themes/light.css.ts @@ -0,0 +1,77 @@ +import { defineGithubTheme } from "src/core/github"; + +// [TODO] 亮色主题下 PR/Issue 的标签文字颜色 +// 亮色主题下仓库主题标签 hover 时的文字颜色 +// 头像的管理员标识文字颜色 +// 差异对比的展开按钮 hover 时的文字颜色 +// chroma 语法高亮的颜色 +export default defineGithubTheme({ + isDarkTheme: false, + display: { + brown: { fgColor: "#755f43" }, + cyan: { fgColor: "#006a80" }, + indigo: { fgColor: "#494edf" }, + lemon: { fgColor: "#786002" }, + olive: { fgColor: "#56682c" }, + teal: { fgColor: "#106e75" }, + }, + diffBlob: { + addtionNum: { bgColor: "#aceebb" }, + addtionWord: { bgColor: "#aceebb" }, + deletionNum: { bgColor: "#ffcecb" }, + deletionWord: { bgColor: "#ffcecb" }, + hunkNum: { bgColor: { rest: "#b6e3ff" } }, + }, + fgColor: { + accent: "#0969da", + attention: "#9a6700", + danger: "#d1242f", + default: "#1f2328", + disabled: "#818b98", + done: "#8250df", + neutral: "#59636e", + severe: "#bc4c00", + sponsors: "#bf3989", + success: "#1a7f37", + black: "#1f2328", + white: "#ffffff", + muted: "#59636e", + }, + bgColor: { + accent: { emphasis: "#0969da", muted: "#ddf4ff" }, + attention: { muted: "#fff8c5" }, + success: { emphasis: "#1f883d", muted: "#dafbe1" }, + danger: { muted: "#ffebe9" }, + done: { emphasis: "#8250df" }, + default: "#ffffff", + inset: "#f6f8fa", + muted: "#f6f8fa", + neutral: { muted: "#818b981f" }, + }, + borderColor: { + accent: { emphasis: "#0969da" }, + default: "#d1d9e0", + attention: { emphasis: "#9a6700" }, + success: { emphasis: "#1a7f37" }, + done: { emphasis: "#8250df" }, + muted: "#d1d9e0b3", + translucent: "#1f232826", + }, + button: { + primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } }, + danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, + }, + control: { + bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" }, + transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, + }, + shadow: { floating: { small: "#25292e0a" } }, + overlay: { backdrop: { bgColor: "#c8d1da66" } }, + underlineNav: { borderColor: { active: "#fd8c73" } }, + contribution: { + default: { + bgColor: { num0: "#eff2f5", num1: "#aceebb", num2: "#4ac26b", num3: "#2da44e", num4: "#116329" }, + borderColor: { num0: "#1f23280d" }, + }, + }, +}); diff --git a/vite.config.ts b/vite.config.ts index 1cb8ede..855c280 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => { }, plugins: [ linaria({ - include: ["**/*.{ts,tsx}"], + include: ["**/*.ts"], babelOptions: { presets: ["@babel/preset-typescript"], },