green

.github/release-template.md

@@ -1,7 +1,3 @@
-## ✨ Feat
-
-#### CSS 变量
-
 ## 🌈 Style
 
 #### 更符合 GitHub 风格

.github/release.md

@@ -1,31 +1,12 @@
-## ✨ Feat
-
-🎉 支持自定义 CSS 变量设置主题样式
-
-#### CSS 变量
-
-- 支持克隆菜单自定义长度
-
 ## 🌈 Style
 
-- 分支菜单项目添加动画效果
-
 #### 更符合 GitHub 风格
 
 - 同步 PR 的合并提交操作面板样式
 - 同步 Issue/PR 的时间线样式
-- 仓库同步派生栏样式同步
-- 添加一些颜色的渐变过渡动画
-- 同步 Issue/PR 的评论标题颜色
-- 同步 PR/Actions 的分支字体
-- 同步文件打开时的提交栏样式
 
 ## 🎈 Perf
 
 - 优化全局按钮样式
-- 优化顶部导航栏按钮圆角
 
 ## 🐞 Fix
-
-- 修复一些圆角问题
-- 修复工单下依赖工单选择框的高度对齐

README.md

@@ -26,35 +26,6 @@ THEMES = gitea-dark, github-dark
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
-## 自定义 CSS 变量
-
-可以根据自己的偏好自定义主题的一部分样式
-
-### 使用方法
-
-在主题的 CSS 文件中头部或尾部添加以下代码
-
-```css
-:root {
-  --custom-clone-menu-width: 150px;.
-  ...
-}
-```
-
->[!IMPORTANT]
->
->请确保在 `:root` 选择器中添加自定义变量，否则无法生效
->
->变量之间用 `;` 分隔
->
->建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
-
-### CSS 变量
-
-| 变量名                    | 描述         | Gitea (默认值) | Github | 推荐  | 最小值 | 最大值 |
-| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
-| --custom-clone-menu-width | 克隆菜单宽度 | 232px          | 332px  | 200px | 150px  | 400px  |
-
 ## 截图
 
 ![仓库](screenshots/repo.png)
@@ -74,7 +45,3 @@ THEMES = gitea-dark, github-dark
 ## 贡献
 
 欢迎提交 Issue 或 Pull Request
-
-```
-
-```

TODO.md

@@ -1,3 +1,8 @@
+### 轻量
+
+- hover 动画迁移
+- 列表部分 item 展开动画迁移
+
 ### 重大
 
 - gitea issue 默认标签颜色匹配使用 github 样式
@@ -7,7 +12,6 @@
 - defineTheme 颜色生成代码重构
 - 亮色主题适配/测试
 - 自动颜色主题生成
-- github primer 官方库集成
 
 ### 其他
 

eslint.config.js

@@ -1,4 +1,6 @@
 import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
@@ -6,10 +8,17 @@ export default tseslint.config(
   { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts}"],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+    },
   }
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitea-github-theme",
-  "version": "1.24.4",
+  "version": "1.24.2",
   "description": "A theme to make Gitea look and feel like GitHub",
   "type": "module",
   "scripts": {
@@ -12,26 +12,35 @@
     "version": "node scripts/version.cjs"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.29.0",
     "@linaria/core": "^6.3.0",
+    "@linaria/react": "^6.3.0",
     "@types/node": "^24.0.3",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.0.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react-swc": "^3.10.2",
     "@wyw-in-js/babel-preset": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",
     "dotenv": "^17.0.0",
     "eslint": "^9.29.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.2.0",
     "lightningcss": "^1.30.1",
     "polished": "^4.3.1",
     "prettier": "3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "sass-embedded": "^1.89.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.1",
     "typescript-plugin-css-modules": "^5.1.0",
-    "typescript-styled-plugin": "^0.18.3",
     "vite": "^6.3.5"
   },
   "prettier": {
@@ -53,5 +62,8 @@
       "prettier-plugin-organize-imports"
     ],
     "organizeImportsSkipDestructiveCodeActions": false
+  },
+  "dependencies": {
+    "typescript-styled-plugin": "^0.18.3"
   }
 }

src/core/theme.ts

@@ -48,28 +48,26 @@ export function createTheme(theme: Theme): void {
   }
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
+    git: "#f05133",
+    light: {
+      mimicEnabled: isDarkTheme
+        ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
+        : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
+    },
     border: {
       radius: "6px",
     },
-    color: {
-      git: "#f05133",
-      light: {
-        mimicEnabled: isDarkTheme
-          ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
-          : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
-      },
-    },
   });
   globalStyle(":root", {
     accentColor: themeVars.color.accent,
     colorScheme: isDarkTheme ? "dark" : "light",
   });
   globalKeyframes(overlayAppearDown, {
-    "0%": { opacity: 0, transform: "translateY(-8px)" },
+    "0%": { opacity: 0, transform: "translateY(-12px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
   globalKeyframes(overlayAppearUp, {
-    "0%": { opacity: 0, transform: "translateY(8px)" },
+    "0%": { opacity: 0, transform: "translateY(12px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
 }

src/core/vite.ts

@@ -4,7 +4,7 @@ import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";
 
-const suffix = ".css.ts";
+const suffix = ".css.tsx";
 
 /**
  * 生成主题输入

src/types/vars.ts

@@ -30,19 +30,10 @@ const otherVars = {
   border: {
     radius: null,
   },
-  color: {
+  ...color.otherAuto,
-    ...color.otherAuto,
-  },
-};
-
-const customVars = {
-  custom: {
-    cloneMenuWidth: "custom-clone-menu-width",
-  },
 };
 
 export const themeVars = createGlobalThemeContract(vars, varMapper);
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
-export const customThemeVars = createGlobalThemeContract(customVars, varMapper);
 
 export { css } from "@linaria/core";

styles/components/actions.tsx

@@ -1,4 +1,3 @@
-import { animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 仓库 Actions 页面
@@ -58,7 +57,6 @@ export const actions = css`
         .run-list-ref {
           background-color: ${themeVars.github.bgColor.accent.muted};
           color: ${themeVars.github.fgColor.accent};
-          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
           font-weight: 400;
           &:hover {
             background-color: ${themeVars.github.bgColor.accent.muted};
@@ -134,7 +132,6 @@ export const actionViewHeader = css`
       .ui.label {
         background-color: ${themeVars.github.bgColor.accent.muted};
         color: ${themeVars.github.fgColor.accent};
-        font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
         font-weight: 400;
         > a {
           opacity: 1;
@@ -215,7 +212,6 @@ export const actionViewRight = css`
     }
 
     .job-step-container {
-      // 步骤标题
       .job-step-summary {
         color: ${themeVars.color.console.fg.subtle};
         padding: 8px 10px;
@@ -242,16 +238,12 @@ export const actionViewRight = css`
           }
         }
       }
-      // 步骤日志
+      /* 日志字体颜色白色 */
-      .job-step-logs {
+      .job-log-line {
-        animation: ${animationDown};
+        color: ${themeVars.color.console.fg.self};
-        /* 日志字体颜色白色 */
+        /* 被 hover 时覆盖 ANSI 颜色 */
-        .job-log-line {
+        .log-msg:hover * {
-          color: ${themeVars.color.console.fg.self};
+          color: ${themeVars.color.console.fg.self} !important;
-          /* 被 hover 时覆盖 ANSI 颜色 */
-          .log-msg:hover * {
-            color: ${themeVars.color.console.fg.self} !important;
-          }
         }
       }
     }

styles/components/clone.tsx

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -52,9 +52,7 @@ export const clone = css`
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-          min-width: 150px;
+          width: 332px;
-          max-width: 400px;
-          width: ${customThemeVars.custom.cloneMenuWidth};
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
             border-radius: ${otherThemeVars.border.radius};

styles/components/filelist.tsx

@@ -16,19 +16,6 @@ export const branchButton = css`
   }
 `;
 
-// 仓库同步派生
-export const syncFork = css`
-  .page-content.repository.file.list {
-    .repo-home-filelist > .ui.message {
-      background: ${themeVars.color.box.header};
-      padding: 8px 8px 8px 16px;
-      .ui.button {
-        min-width: 96px;
-      }
-    }
-  }
-`;
-
 // 仓库文件列表
 export const repoFiles = css`
   .repository.file.list {
@@ -110,29 +97,6 @@ export const repoFilesMobile = css`
   }
 `;
 
-// 仓库打开文件时的视图
-export const repoFileView = css`
-  .page-content.repository.file.list {
-    .repo-view-container {
-      // 右侧文件视图内容
-      .repo-view-content {
-        // 头部提交信息
-        #repo-file-commit-box {
-          padding: 8px 12px;
-          > .latest-commit {
-            gap: 8px;
-          }
-          // 右侧提交时间
-          > .age {
-            display: flex;
-            align-items: center;
-          }
-        }
-      }
-    }
-  }
-`;
-
 // 仓库代码布局调整, 侧边栏宽度调整
 export const repoGrid = css`
   .repo-grid-filelist-sidebar {

styles/components/issue.tsx

@@ -67,19 +67,8 @@ export const prBranch = css`
   #issue-list .flex-item-body .branches .branch {
     color: ${themeVars.github.fgColor.accent};
     background-color: ${themeVars.github.bgColor.accent.muted};
-    border-radius: ${otherThemeVars.border.radius};
-    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
     font-size: 12px;
     padding: 0 5px;
-    line-height: 20px;
-  }
-
-  .repository.view.issue .pull-desc code {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    a:hover {
-      text-decoration-line: none;
-    }
   }
 `;
 
@@ -102,10 +91,6 @@ export const comment = css`
       }
     }
     .comment-header-right {
-      > .item,
-      > .label {
-        color: ${themeVars.color.text.light.num1};
-      }
       .context-dropdown {
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
@@ -138,7 +123,8 @@ export const dropdown = css`
 export const prMerge = css`
   .repository.view.issue .comment-list .timeline-item.pull-merge-box {
     // 头像
-    .timeline-avatar {
+    .timeline-avatar.green {
+      background-color: ${themeVars.github.bgColor.success.emphasis};
       color: ${themeVars.color.text.self} !important;
       border-radius: ${otherThemeVars.border.radius};
       width: 40px;
@@ -150,35 +136,6 @@ export const prMerge = css`
         width: 24px;
         height: 24px;
       }
-      // 可以合并
-      &.green {
-        background-color: ${themeVars.github.bgColor.success.emphasis};
-        // 操作评论边框色
-        + .content > .ui.attached.segment {
-          border-left-color: ${themeVars.github.bgColor.success.emphasis};
-          border-right-color: ${themeVars.github.bgColor.success.emphasis};
-          &:first-child {
-            border-top-color: ${themeVars.github.bgColor.success.emphasis};
-          }
-          &:last-child {
-            border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
-          }
-        }
-      }
-      // 已合并
-      &.purple {
-        background-color: ${themeVars.github.bgColor.done.emphasis};
-        + .content > .ui.attached.segment {
-          border-left-color: ${themeVars.github.bgColor.done.emphasis};
-          border-right-color: ${themeVars.github.bgColor.done.emphasis};
-          &:first-child {
-            border-top-color: ${themeVars.github.bgColor.done.emphasis};
-          }
-          &:last-child {
-            border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
-          }
-        }
-      }
     }
     // 检查状态
     .commit-status-panel {

styles/public/dropdown.tsx

@@ -37,6 +37,9 @@ export const dropdown = css`
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
+        svg {
+          margin-right: 0.5rem;
+        }
         &.active,
         &.selected {
           &:after {
@@ -151,32 +154,10 @@ export const selectionDropdown = css`
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }
-  // 修复因为上面的排除导致的圆角问题
-  // 具体工单页面下依赖菜单选择框
-  #new-dependency-drop-list.ui.selection.dropdown.active,
-  // 提交图分支选择框
-  #git-graph-container #flow-select-refs-dropdown {
-    border-bottom-right-radius: 0 !important;
-  }
   // 修复选择框的下拉菜单向上显示时的样式问题
   .ui.upward.selection.dropdown.visible:not(.small),
   .ui.active.upward.selection.dropdown:not(.small) {
-    border-top-left-radius: ${otherThemeVars.border.radius} !important;
+    border-top-left-radius: ${otherThemeVars.border.radius}!important;
-    border-top-right-radius: ${otherThemeVars.border.radius} !important;
+    border-top-right-radius: ${otherThemeVars.border.radius}!important;
-  }
-`;
-
-export const fixSelectionDropdown = css`
-  // 具体工单页面下依赖菜单选择框
-  #new-dependency-drop-list.ui.selection.dropdown {
-    // 高度对齐问题, 应该与 input 框高度一致
-    min-height: 32px;
-  }
-`;
-
-// 分支菜单
-export const branchDropdown = css`
-  .ui.dropdown.branch-selector-dropdown .menu > .item {
-    animation: ${animationDown};
   }
 `;

styles/public/index.tsx

@@ -2,7 +2,6 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
-import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮

styles/public/navbar.tsx

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
@@ -13,7 +13,6 @@ export const navbarRight = css`
         align-content: center;
         justify-content: center;
         border: 1px solid ${themeVars.color.light.border};
-        border-radius: ${otherThemeVars.border.radius};
         padding: unset;
         height: 32px;
         min-width: 32px;

styles/public/radius.tsx

@@ -78,10 +78,8 @@ export const radiusImportant = css`
     border-radius: ${otherThemeVars.border.radius} !important;
   }
   // 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
-  .ui.secondary.tabular.menu .item {
+  .ui.tabular.menu .active.item {
     border-radius: ${otherThemeVars.border.radius} !important;
-    &.active,
-    &.active:hover,
     &:hover {
       border-radius: ${otherThemeVars.border.radius} !important;
     }
@@ -115,10 +113,10 @@ export const radiusTop = css`
 
 // 上半部分圆角替换(原CSS带!important)
 export const radiusTopImportant = css`
-  .ui.tabular.menu .item,
   .ui.simple.upward.dropdown {
-    &.active,
+    &.active {
-    &.active:hover,
+      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
+    }
     &:hover {
       border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
     }

styles/public/transition.scss

@@ -0,0 +1,44 @@
+// Made by Luting ^-^
+@keyframes overlay-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#navbar .item,
+.header-wrapper .ui.tabular.menu .item,
+.job-step-summary,
+.job-step-logs,
+.job-brief-item,
+.tippy-box .flex-items-block .item,
+.clone-panel-tab .item,
+.ui.form select,
+.ui.label,
+.ui.modal,
+.ui.selection.dropdown,
+.ui.checkbox label:before,
+.ui.checkbox input:checked ~ label:before,
+.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
+.ui.selection.active.dropdown,
+.ui.selection.active.dropdown:hover,
+.ui.selection.active.dropdown .menu,
+.ui.selection.active.dropdown:hover .menu,
+.ui.vertical.menu .header.item,
+.ui.secondary.menu .item {
+  transition: 0.12s ease-out;
+}
+
+textarea,
+.ui.form input,
+.menu .item,
+.job-step-summary,
+.job-step-logs,
+.job-brief-item {
+  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
+}

styles/public/transition.ts

@@ -1,49 +0,0 @@
-import { css } from "src/types/vars";
-
-// 简单的渐变过渡
-export const transition = css`
-  // 迁移的元素
-  #navbar .item,
-  .header-wrapper .ui.tabular.menu .item,
-  .job-step-summary,
-  .job-step-logs,
-  .job-brief-item,
-  .repo-file-cell,
-  .tippy-box .flex-items-block .item,
-  .clone-panel-tab .item,
-  .ui.form select,
-  .ui.label,
-  .ui.modal,
-  .ui.checkbox label:before,
-  .ui.checkbox input:checked ~ label:before,
-  .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
-  .ui.selection.dropdown,
-  .ui.selection.active.dropdown,
-  .ui.selection.active.dropdown:hover,
-  .ui.selection.active.dropdown .menu,
-  .ui.selection.active.dropdown:hover .menu,
-  .ui.vertical.menu .header.item,
-  .ui.secondary.menu .item {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  }
-  // Gitea 表单元素原始过渡覆盖
-  input,
-  textarea,
-  tr,
-  .ui.input textarea,
-  .ui.form textarea,
-  .ui.form input:not([type]),
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="time"],
-  .ui.form input[type="text"],
-  .ui.form input[type="file"],
-  .ui.form input[type="url"] {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  }
-`;

tsconfig.json

@@ -23,6 +23,7 @@
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
+    "jsx": "react-jsx",
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

vite.config.ts

@@ -1,4 +1,5 @@
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import react from "@vitejs/plugin-react";
 import linaria from "@wyw-in-js/vite";
 import * as dotenv from "dotenv";
 import { Features } from "lightningcss";
@@ -23,7 +24,7 @@ export default defineConfig(({ mode }) => {
         styles: path.resolve(__dirname, "styles"),
         themes: path.resolve(__dirname, "themes"),
       },
-      extensions: [".js", ".ts", ".css.ts"],
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
     },
     css: {
       transformer: "lightningcss",
@@ -36,13 +37,14 @@ export default defineConfig(({ mode }) => {
       linaria({
         include: ["**/*.{ts,tsx}"],
         babelOptions: {
-          presets: ["@babel/preset-typescript"],
+          presets: ["@babel/preset-typescript", "@babel/preset-react"],
         },
         preprocessor: (_selector, cssText) => sass.compileString(cssText).css, // 默认为全局样式并使用 sass-embedded 预处理 css
         tagResolver: (source, tag) =>
           // 识别从 src 导出的 css 标签，使用 @linaria/core/processors/css 处理
           source === "src/types/vars" && tag === "css" ? require.resolve("@linaria/core/processors/css") : null,
       }),
+      react(),
       vanillaExtractPlugin(),
       themePlugin(),
     ],