支持克隆菜单自定义长度

* 弹窗动画

* 优化 PR 中的合并提交按钮颜色

* 优化按钮样式

* 同步 PR 的合并提交头像样式

* 同步 Issue/PR 的时间线样式

* Issue/PR 的时间线样式间隔和大小

* 同步 PR 的合并提交操作面板样式

* PR 操作间隔

* green

* PR 操作边框色

* 已合并颜色

* 仓库同步派生栏样式同步

* 动画迁移 & 一些圆角修复

* 修复工单下依赖工单选择框

* 评论标题颜色&分支字体&提交栏样式

---------

Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>

.github/release-template.md

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

.github/release.md

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

README.md

@@ -26,6 +26,35 @@ 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)
@@ -45,3 +74,7 @@ THEMES = gitea-dark, github-dark
 ## 贡献
 
 欢迎提交 Issue 或 Pull Request
+
+```
+
+```

TODO.md

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

eslint.config.js

@@ -1,6 +1,4 @@
 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";
 
@@ -8,17 +6,10 @@ export default tseslint.config(
   { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
+    files: ["**/*.{ts}"],
     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.2",
+  "version": "1.24.4",
   "description": "A theme to make Gitea look and feel like GitHub",
   "type": "module",
   "scripts": {
@@ -12,35 +12,26 @@
     "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": {
@@ -62,8 +53,5 @@
       "prettier-plugin-organize-imports"
     ],
     "organizeImportsSkipDestructiveCodeActions": false
-  },
-  "dependencies": {
-    "typescript-styled-plugin": "^0.18.3"
   }
 }

src/core/github.ts

@@ -350,6 +350,9 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
       },
     },
     control: {
+      bgColor: {
+        rest: githubColor.control.bgColor.rest,
+      },
       transparent: {
         bgColor: {
           hover: githubColor.control.transparent.bgColor.hover,

src/core/theme.ts

@@ -48,14 +48,16 @@ export function createTheme(theme: Theme): void {
   }
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
+    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)))",
       },
-    border: {
-      radius: "6px",
     },
   });
   globalStyle(":root", {
@@ -63,11 +65,11 @@ export function createTheme(theme: Theme): void {
     colorScheme: isDarkTheme ? "dark" : "light",
   });
   globalKeyframes(overlayAppearDown, {
-    "0%": { opacity: 0, transform: "translateY(-12px)" },
+    "0%": { opacity: 0, transform: "translateY(-8px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
   globalKeyframes(overlayAppearUp, {
-    "0%": { opacity: 0, transform: "translateY(12px)" },
+    "0%": { opacity: 0, transform: "translateY(8px)" },
     "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.tsx";
+const suffix = ".css.ts";
 
 /**
  * 生成主题输入

src/types/color/github.ts

@@ -41,6 +41,7 @@ export const github = {
     success: {
       /** 成功的背景颜色
        * @issue `babel` 重新开启图标背景颜色
+       * @issue `prMerge` 合并提交的图标背景色
        */
       emphasis: null,
     },
@@ -157,6 +158,12 @@ export const github = {
     },
   },
   control: {
+    bgColor: {
+      /** 背景色
+       * @issue `timeline` 时间线标签背景色
+       */
+      rest: null,
+    },
     transparent: {
       bgColor: {
         /** 悬停色

src/types/vars.ts

@@ -30,10 +30,19 @@ const otherVars = {
   border: {
     radius: null,
   },
+  color: {
     ...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.ts

@@ -1,3 +1,4 @@
+import { animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 仓库 Actions 页面
@@ -57,6 +58,7 @@ 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};
@@ -132,6 +134,7 @@ 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;
@@ -212,6 +215,7 @@ export const actionViewRight = css`
     }
 
     .job-step-container {
+      // 步骤标题
       .job-step-summary {
         color: ${themeVars.color.console.fg.subtle};
         padding: 8px 10px;
@@ -238,6 +242,9 @@ export const actionViewRight = css`
           }
         }
       }
+      // 步骤日志
+      .job-step-logs {
+        animation: ${animationDown};
         /* 日志字体颜色白色 */
         .job-log-line {
           color: ${themeVars.color.console.fg.self};
@@ -248,4 +255,5 @@ export const actionViewRight = css`
         }
       }
     }
+  }
 `;

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";
 
 // 克隆按钮的弹窗
 export const clone = css`
@@ -52,7 +52,9 @@ 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);
-          width: 332px;
+          min-width: 150px;
+          max-width: 400px;
+          width: ${customThemeVars.custom.cloneMenuWidth};
           &:hover {
             border: 1px solid ${themeVars.color.light.border};
             border-radius: ${otherThemeVars.border.radius};

styles/components/filelist.ts

@@ -16,12 +16,15 @@ export const branchButton = css`
   }
 `;
 
-// 仓库按钮
-export const repoButton = css`
+// 仓库同步派生
+export const syncFork = css`
   .page-content.repository.file.list {
-    // clone 按钮调整
-    .repo-button-row .repo-button-row-right .ui.primary.button span {
-      margin: 0px 3px;
+    .repo-home-filelist > .ui.message {
+      background: ${themeVars.color.box.header};
+      padding: 8px 8px 8px 16px;
+      .ui.button {
+        min-width: 96px;
+      }
     }
   }
 `;
@@ -107,6 +110,29 @@ 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 {
@@ -198,7 +224,7 @@ export const repoSidebarBottom = css`
         .color-icon {
           height: 8px;
           width: 8px;
-          margin-right: 6px;
+          margin-right: 8px;
         }
         .tw-font-semibold {
           color: ${themeVars.color.text.self};

styles/components/issue.ts

@@ -0,0 +1,274 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
+
+export const button = css`
+  .issue-content-left .field.footer {
+    // 关闭工单按钮
+    .ui.red.basic.button#status-button {
+      color: ${themeVars.github.fgColor.done};
+      background-color: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+
+    // 重新开启按钮
+    .ui.basic.primary.button#status-button {
+      color: ${themeVars.github.fgColor.success};
+    }
+  }
+`;
+
+export const babel = css`
+  .issue-content-left {
+    .badge {
+      // 时间线打开状态标签
+      &.tw-bg-green {
+        background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      }
+      // 时间线关闭状态标签
+      &.tw-bg-red {
+        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      }
+      // 时间线合并状态标签
+      &.tw-bg-purple {
+        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      }
+    }
+  }
+  // 工单&PR状态标签
+  .ui.label.issue-state-label {
+    border-radius: 25px !important;
+
+    &.green {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.success.emphasis} !important;
+    }
+
+    &.red {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+    }
+
+    &.purple {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+    }
+  }
+`;
+
+// PR 分支标签
+export const prBranch = css`
+  .repository.view.issue .pull-desc code,
+  #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;
+    }
+  }
+`;
+
+// 评论
+export const comment = css`
+  .comment {
+    // 去除评论标题左侧指向头像的小箭头
+    .comment-header,
+    &:target .comment-header {
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+    // 评论焦点样式
+    &:target {
+      .comment-container {
+        border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
+        box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
+      }
+    }
+    .comment-header-right {
+      > .item,
+      > .label {
+        color: ${themeVars.color.text.light.num1};
+      }
+      .context-dropdown {
+        // 评论菜单的删除按钮
+        .menu .item.delete-comment {
+          color: ${themeVars.color.red.self};
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg} !important;
+            color: ${themeVars.color.red.light};
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const dropdown = css`
+  .repository {
+    // Issue/PR 列表下的所有筛选菜单
+    &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
+    // Issue/PR 详情下的右侧的上半部分选项菜单
+    &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
+      .item:hover:after {
+        content: "";
+        ${activeItemAfterStyle}
+      }
+    }
+  }
+`;
+
+// PR 界面的 PR 操作评论
+export const prMerge = css`
+  .repository.view.issue .comment-list .timeline-item.pull-merge-box {
+    // 头像
+    .timeline-avatar {
+      color: ${themeVars.color.text.self} !important;
+      border-radius: ${otherThemeVars.border.radius};
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        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 {
+      .commit-status-header {
+        background: ${themeVars.color.body};
+        padding: 16px;
+        font-size: 16px;
+        font-weight: 600;
+        .ui.right {
+          color: ${themeVars.color.text.light.num1};
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      // 检查状态列表
+      .commit-status-list {
+        background: ${themeVars.color.menu};
+        .commit-status-item {
+          border-radius: ${otherThemeVars.border.radius};
+          padding: 2px 8px;
+          margin: 0px 8px;
+          height: 37px;
+          &:first-child {
+            margin-top: 8px;
+          }
+          &:last-child {
+            margin-bottom: 8px;
+          }
+          &:hover {
+            background-color: ${themeVars.color.hover.opaque};
+          }
+        }
+      }
+    }
+    // 合并信息和操作
+    .merge-section {
+      color: ${themeVars.color.text.light.num1};
+      padding: 16px;
+      display: grid;
+      gap: 8px;
+    }
+  }
+`;
+
+// 时间线
+export const timeline = css`
+  .repository.view.issue {
+    .comment-list {
+      .timeline-item,
+      .timeline-item-group {
+        padding: 16px 0;
+        // 事件
+        &.event {
+          // 修复覆盖后的位置问题
+          padding-left: 15px;
+          .avatar {
+            width: 20px;
+            height: 20px;
+          }
+          .badge {
+            border: 2px solid ${themeVars.color.body};
+          }
+          // 仅匹配只有 badge
+          .badge:not([class*=" "]) {
+            background-color: ${themeVars.github.control.bgColor.rest};
+            svg {
+              color: ${themeVars.color.text.light.num1};
+            }
+          }
+        }
+        // 提交
+        &.commits-list {
+          // 每个提交之间的间隔
+          .flex-text-block {
+            padding-top: 4px;
+          }
+          .badge svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+          // 仅覆盖左侧 commit 不覆盖右侧 SHA
+          a.muted {
+            font-size: 12px;
+            color: ${themeVars.color.text.light.num1};
+            text-decoration-line: underline;
+            &:hover {
+              color: ${themeVars.color.primary.self};
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/issue.tsx

@@ -1,123 +0,0 @@
-import { css, themeVars } from "src/types/vars";
-import { activeItemAfterStyle } from "styles/public/menu";
-
-export const button = css`
-  .issue-content-left .field.footer {
-    // 关闭工单按钮
-    .ui.red.basic.button#status-button {
-      color: ${themeVars.github.fgColor.done};
-      background-color: ${themeVars.color.button};
-      border-color: ${themeVars.color.light.border};
-      &:hover {
-        background-color: ${themeVars.color.hover.self};
-      }
-    }
-
-    // 重新开启按钮
-    .ui.basic.primary.button#status-button {
-      color: ${themeVars.github.fgColor.success};
-    }
-  }
-`;
-
-export const babel = css`
-  .issue-content-left {
-    .badge {
-      // 时间线打开状态标签
-      &.tw-bg-green {
-        background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.success.emphasis} !important;
-      }
-      // 时间线关闭状态标签
-      &.tw-bg-red {
-        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      }
-      // 时间线合并状态标签
-      &.tw-bg-purple {
-        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      }
-    }
-  }
-  // 工单&PR状态标签
-  .ui.label.issue-state-label {
-    border-radius: 25px !important;
-
-    &.green {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.success.emphasis} !important;
-    }
-
-    &.red {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-    }
-
-    &.purple {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-    }
-  }
-`;
-
-// PR 分支标签
-export const prBranch = css`
-  .repository.view.issue .pull-desc code,
-  #issue-list .flex-item-body .branches .branch {
-    color: ${themeVars.github.fgColor.accent};
-    background-color: ${themeVars.github.bgColor.accent.muted};
-    font-size: 12px;
-    padding: 0 5px;
-  }
-`;
-
-// 评论
-export const comment = css`
-  .comment {
-    // 去除评论标题左侧指向头像的小箭头
-    .comment-header,
-    &:target .comment-header {
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-    // 评论焦点样式
-    &:target {
-      .comment-container {
-        border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
-        box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
-      }
-    }
-    .comment-header-right {
-      .context-dropdown {
-        // 评论菜单的删除按钮
-        .menu .item.delete-comment {
-          color: ${themeVars.color.red.self};
-          &:hover {
-            background-color: ${themeVars.color.red.badge.bg} !important;
-            color: ${themeVars.color.red.light};
-          }
-        }
-      }
-    }
-  }
-`;
-
-export const dropdown = css`
-  .repository {
-    // Issue/PR 列表下的所有筛选菜单
-    &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
-    // Issue/PR 详情下的右侧的上半部分选项菜单
-    &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
-      .item:hover:after {
-        content: "";
-        ${activeItemAfterStyle}
-      }
-    }
-  }
-`;

styles/components/repo.ts

@@ -6,10 +6,6 @@ export const repoHeader = css`
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
       padding: 3px 12px;
-      // 文本跟图标间隔, 文本在手机下不显示
-      span {
-        margin-left: 0.5rem;
-      }
     }
     // 仓库图标
     img.ui.avatar {

styles/public/button.ts

@@ -18,16 +18,27 @@ export const baseButton = css`
     min-height: 30px;
     font-weight: 500;
     padding: 9px 16px;
+    &.ui {
+      gap: 8px;
+    }
   }
   .ui.button:not(.primary):not(.red) svg {
     color: ${themeVars.color.text.light.num1};
   }
-  .ui.primary.button {
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
       ${primaryStyle}
       &:hover {
         ${primaryHoverStyle}
       }
     }
+  }
   // 主色调基本按钮和普通按钮一样
   // 作者的关注按钮
   .ui.basic.primary.button {

styles/public/dropdown.ts

@@ -37,9 +37,6 @@ export const dropdown = css`
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
-        svg {
-          margin-right: 0.5rem;
-        }
         &.active,
         &.selected {
           &:after {
@@ -154,10 +151,32 @@ 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-right-radius: ${otherThemeVars.border.radius}!important;
+    border-top-left-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.ts

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

styles/public/modal.ts

@@ -1,7 +1,9 @@
+import { animationDown } from "src/core/theme";
 import { css, themeVars } from "src/types/vars";
 
 export const modal = css`
   .ui.modal {
+    animation: ${animationDown};
     border: 1.5px solid ${themeVars.color.light.border};
 
     > .header {

styles/public/navbar.ts

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
@@ -13,6 +13,7 @@ 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.ts

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

styles/public/transition.scss

@@ -1,45 +0,0 @@
-// 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,
-.ui.modal,
-.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

@@ -0,0 +1,49 @@
+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,7 +23,6 @@
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-    "jsx": "react-jsx",
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

vite.config.ts

@@ -1,5 +1,4 @@
 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";
@@ -24,7 +23,7 @@ export default defineConfig(({ mode }) => {
         styles: path.resolve(__dirname, "styles"),
         themes: path.resolve(__dirname, "themes"),
       },
-      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
+      extensions: [".js", ".ts", ".css.ts"],
     },
     css: {
       transformer: "lightningcss",
@@ -37,14 +36,13 @@ export default defineConfig(({ mode }) => {
       linaria({
         include: ["**/*.{ts,tsx}"],
         babelOptions: {
-          presets: ["@babel/preset-typescript", "@babel/preset-react"],
+          presets: ["@babel/preset-typescript"],
         },
         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(),
     ],