亮色主题适配

.github/release.md

@@ -1,20 +1,11 @@
 ## ✨ Feature
 
-#### CSS 变量
+- 支持亮色主题
 
-- 支持自定义探索/组织/用户页面的仓库列表列数
-- 支持自定义探索/组织页面的用户/组织列表列数
+## 🎈 Perf
 
-## 🌈 Style
-
-#### 更符合 GitHub 风格
-
-- 同步 Issue/PR 的评论样式
-- 同步表情菜单样式
-- 同步探索/组织/用户页面的仓库列表样式
-- 同步探索/组织页面的用户列表样式
-- 同步探索页面的组织列表样式
+- 优化差异对比的代码折叠/展开按钮的高度和动画效果
 
 ## 🐞 Fix
 
-- 修复探索页面下仓库的类型标签意外触发悬浮效果
+- 修复仓库页面与探索页面下仓库主题标签字重不一致的问题

TODO.md

@@ -6,7 +6,6 @@
 - defineTheme 颜色生成代码重构
 - 亮色主题适配/测试
 - 自动颜色主题生成
-- github primer 官方库集成
 
 ### 其他
 

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 ? 10 : -10)),
           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.2,
+            scaleColorLight(githubColor.contribution.default.bgColor.num4, githubColor.isDarkTheme ? 58 : -58)
+          ),
         },
         borderColor: {
           num0: githubColor.contribution.default.borderColor.num0,

styles/components/diff.ts

@@ -29,11 +29,11 @@ export const diff = css`
   }
   /* 展开/收缩按钮 */
   .code-expander-button {
-    height: 24px !important;
-    line-height: 24px;
+    height: 28px !important;
 
     &:hover {
       background: ${themeVars.github.bgColor.accent.emphasis};
+      color: ${themeVars.color.white}
     }
   }
   /* 行号居中 */

styles/components/issue.ts

@@ -42,19 +42,19 @@ export const babel = css`
     border-radius: 25px !important;
 
     &.green {
-      color: ${themeVars.color.text.self} !important;
+      color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.success.emphasis} !important;
       border-color: ${themeVars.github.bgColor.success.emphasis} !important;
     }
 
     &.red {
-      color: ${themeVars.color.text.self} !important;
+      color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
     }
 
     &.purple {
-      color: ${themeVars.color.text.self} !important;
+      color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
     }

styles/components/repo.ts

@@ -80,12 +80,13 @@ export const repoTopic = css`
   #repo-topics .ui.label.repo-topic {
     border-radius: 25px;
     font-size: 12px;
+    font-weight: 500;
     padding: 5px 10px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
     &:hover {
       background-color: ${themeVars.github.bgColor.accent.emphasis};
-      color: ${themeVars.color.text.self};
+      color: ${themeVars.color.white};
     }
   }
 `;

styles/public/navbar.ts

@@ -68,7 +68,7 @@ export const navbarRight = css`
         .navbar-profile-admin {
           background-color: ${themeVars.github.bgColor.accent.emphasis};
           border-radius: 25px;
-          color: ${themeVars.color.text.self};
+          color: ${themeVars.color.white};
           font-size: 8px;
           font-weight: 600;
           padding: 2px 5px;

styles/public/transition.ts

@@ -9,6 +9,8 @@ export const transition = css`
   .job-step-logs,
   .job-brief-item,
   .repo-file-cell,
+  // 差异对比的代码折叠按钮
+  .code-expander-button,
   .tippy-box .flex-items-block .item,
   .clone-panel-tab .item,
   .ui.form select,

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);
+});

themes/light.css.ts

@@ -0,0 +1,74 @@
+import { defineGithubTheme } from "src/core/github";
+
+// [TODO] 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" },
+    },
+  },
+});

vite.config.ts

@@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       linaria({
-        include: ["**/*.{ts,tsx}"],
+        include: ["**/*.ts"],
         babelOptions: {
           presets: ["@babel/preset-typescript"],
         },