探索/组织/用户仓库样式 github 布局 (#8)

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

.github/release-template.md

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

.github/release.md

@@ -1,12 +1,20 @@
+## ✨ Feature
+
+#### CSS 变量
+
+- 支持自定义探索/组织/用户页面的仓库列表列数
+- 支持自定义探索/组织页面的用户/组织列表列数
+
 ## 🌈 Style
 
 #### 更符合 GitHub 风格
 
-## 🎈 Perf
-
-- 优化提交中 Action 状态标签的位置
-- 优化按钮和菜单下的图标颜色
-- 优化仓库发布中的分支选择按钮样式
-- 优化向上弹窗的菜单动画
+- 同步 Issue/PR 的评论样式
+- 同步表情菜单样式
+- 同步探索/组织/用户页面的仓库列表样式
+- 同步探索/组织页面的用户列表样式
+- 同步探索页面的组织列表样式
 
 ## 🐞 Fix
+
+- 修复探索页面下仓库的类型标签意外触发悬浮效果

README.md

@@ -26,6 +26,40 @@ 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 变量
+
+| 变量名                            | 描述                        | 默认值 | Github | 推荐  | 最小值 | 最大值 |
+| :-------------------------------- | :-------------------------- | :----- | :----- | :---- | :----- | :----- |
+| --custom-clone-menu-width         | 克隆菜单宽度                | Gitea  | 332px  | 200px | 150px  | 400px  |
+| --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2      | 2      | 2     |        |        |
+| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3      | 1      | 2/3   |        |        |
+| --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2      | 2      | 2     |        |        |
+| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1      | 1      | 1     |        |        |
+| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2      | 1      | 2     |        |        |
+
 ## 截图
 
 ![仓库](screenshots/repo.png)

TODO.md

@@ -1,17 +1,12 @@
-### 轻量
-
-- hover 动画迁移
-- 列表部分 item 展开动画迁移
-
 ### 重大
 
 - gitea issue 默认标签颜色匹配使用 github 样式
-- 探索/组织/用户仓库样式 github 布局
 - issue/PR 列表样式 github 布局
 - styles/themes 库组件导出整理
 - 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,26 +48,28 @@ 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(-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/types.ts

@@ -1,8 +1,8 @@
 type Primitive = string | boolean | number | null | undefined;
 type Tokens = { [key: string]: string | Tokens };
 
+export type CSSVarFunction = `var(--${string})`;
 export type WithOptionalLayer<T extends Tokens> = T & { "@layer"?: string };
-
 export type MapLeafNodes<Obj, LeafType> = {
   [Prop in keyof Obj]: Obj[Prop] extends Primitive
     ? LeafType

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/functions/index.ts

@@ -1 +1,2 @@
 export { scaleColorLight } from "./scss";
+export { fallbackVar } from "./var";

src/functions/var.ts

@@ -0,0 +1,7 @@
+import type { CSSVarFunction } from "src/core/types";
+
+type CSSFallbackVar = `var(--${string}, ${string})`;
+export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar {
+  const var_name = cssvar.replace("var(--", "").replace(")", "");
+  return `var(--${var_name}, ${fallback})`;
+}

src/types/color/github.ts

@@ -28,6 +28,7 @@ export const github = {
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        * @navbar `navbarRight` 头像管理员标识背景颜色
+       * @dropdown `dropdown` emoji 的悬停背景色
        */
       emphasis: null,
       /** 暗淡的背景颜色
@@ -41,6 +42,7 @@ export const github = {
     success: {
       /** 成功的背景颜色
        * @issue `babel` 重新开启图标背景颜色
+       * @issue `prMerge` 合并提交的图标背景色
        */
       emphasis: null,
     },
@@ -157,6 +159,12 @@ export const github = {
     },
   },
   control: {
+    bgColor: {
+      /** 背景色
+       * @issue `timeline` 时间线标签背景色
+       */
+      rest: null,
+    },
     transparent: {
       bgColor: {
         /** 悬停色

src/types/vars.ts

@@ -30,10 +30,28 @@ const otherVars = {
   border: {
     radius: null,
   },
-  ...color.otherAuto,
+  color: {
+    ...color.otherAuto,
+  },
+};
+
+const customVars = {
+  custom: {
+    cloneMenuWidth: "custom-clone-menu-width",
+    explore: {
+      repolistColumns: "custom-explore-repolist-columns",
+      userlistColumns: "custom-explore-userlist-columns",
+    },
+    userRepolistColumns: "custom-user-repolist-columns",
+    org: {
+      repolistColumns: "custom-org-repolist-columns",
+      userlistColumns: "custom-org-userlist-columns",
+    },
+  },
 };
 
 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,12 +242,16 @@ export const actionViewRight = css`
           }
         }
       }
-      /* 日志字体颜色白色 */
-      .job-log-line {
-        color: ${themeVars.color.console.fg.self};
-        /* 被 hover 时覆盖 ANSI 颜色 */
-        .log-msg:hover * {
-          color: ${themeVars.color.console.fg.self} !important;
+      // 步骤日志
+      .job-step-logs {
+        animation: ${animationDown};
+        /* 日志字体颜色白色 */
+        .job-log-line {
+          color: ${themeVars.color.console.fg.self};
+          /* 被 hover 时覆盖 ANSI 颜色 */
+          .log-msg:hover * {
+            color: ${themeVars.color.console.fg.self} !important;
+          }
         }
       }
     }

styles/components/clone.ts

@@ -1,4 +1,4 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, customThemeVars, otherThemeVars, themeVars } 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/explore.ts

@@ -0,0 +1,161 @@
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
+
+const userRepoVar = fallbackVar(customThemeVars.custom.userRepolistColumns, "2");
+const exploreRepoVar = fallbackVar(customThemeVars.custom.explore.repolistColumns, "2");
+const orgRepoVar = fallbackVar(customThemeVars.custom.org.repolistColumns, "1");
+
+// 仓库列表
+export const repoList = css`
+  // 组织
+  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
+  // 用户
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
+  // 探索
+  .page-content.explore.repositories > .ui.container {
+    > .flex-list {
+      display: grid;
+      > .flex-item {
+        border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
+        padding: 16px;
+        // 仓库头像
+        > .flex-item-leading {
+          img,
+          svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+        }
+        // 仓库信息
+        > .flex-item-main {
+          // 仓库标题
+          > .flex-item-header {
+            // 仓库名称
+            > .flex-item-title {
+              gap: 8px;
+              // 仓库中间的间隔线
+              &:not(a) {
+                color: ${themeVars.color.text.light.num1};
+              }
+              // 仓库类型和状态标签
+              > .label-list .label {
+                padding: 3px 6px;
+              }
+            }
+            // 仓库语言, 星标
+            > .flex-item-trailing {
+              color: ${themeVars.color.text.light.num1};
+              gap: 16px;
+              font-size: 12px;
+              > .flex-text-inline .color-icon {
+                width: 12px;
+                height: 12px;
+                margin-right: 0 !important;
+              }
+            }
+          }
+          // 描述和更新时间
+          > .flex-item-body {
+            margin-top: 8px;
+            // 更新时间
+            &:last-child {
+              font-size: 12px;
+            }
+          }
+          // 主题标签
+          > .label-list {
+            margin-top: 8px;
+          }
+        }
+      }
+    }
+  }
+  // 仓库列表列数
+  // 组织
+  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list {
+    grid-template-columns: repeat(${orgRepoVar}, 1fr);
+    gap: min(${orgRepoVar} * 8px, 16px);
+  }
+  // 用户
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list {
+    grid-template-columns: repeat(${userRepoVar}, 1fr);
+    gap: min(${userRepoVar} * 8px, 16px);
+  }
+  // 探索
+  .page-content.explore.repositories > .ui.container > .flex-list {
+    grid-template-columns: repeat(${exploreRepoVar}, 1fr);
+    gap: min(${exploreRepoVar} * 8px, 16px);
+  }
+`;
+
+const exploreUserVar = fallbackVar(customThemeVars.custom.explore.userlistColumns, "3");
+const orgUserVar = fallbackVar(customThemeVars.custom.org.userlistColumns, "2");
+
+// 用户列表
+export const userList = css`
+  // 组织
+  .page-content.organization.members > .ui.container,
+  // 探索的用户和组织
+  .page-content.explore.users > .ui.container {
+    > .flex-list {
+      display: grid;
+      > .flex-item {
+        border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
+        padding: 16px;
+        > .flex-item-main {
+          // 用户名称
+          > .flex-item-title {
+            gap: 8px;
+            margin-bottom: 8px;
+            // 用户标签
+            > .label {
+              font-size: 12px;
+              padding: 3px 6px;
+            }
+          }
+          // 用户描述
+          > .flex-item-body {
+            font-size: 12px;
+            svg {
+              width: 12px;
+              min-width: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  // 用户列表列数
+  // 组织
+  .page-content.organization.members > .ui.container > .flex-list {
+    grid-template-columns: repeat(${orgUserVar}, 1fr);
+    gap: min(${orgUserVar} * 8px, 16px);
+  }
+  // 探索的用户和组织
+  .page-content.explore.users > .ui.container > .flex-list {
+    grid-template-columns: repeat(${exploreUserVar}, 1fr);
+    gap: min(${exploreUserVar} * 8px, 16px);
+  }
+`;
+
+// 手机下的仓库和用户列表
+export const mobileList = css`
+  @media (max-width: 767.98px) {
+    // 组织的仓库列表
+    .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
+    // 用户的仓库列表
+    .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
+    // 探索的仓库列表
+    .page-content.explore.repositories > .ui.container,
+    // 组织的成员列表
+    .page-content.organization.members >.ui.container,
+    // 探索的用户和组织列表
+    .page-content.explore.users >.ui.container {
+      > .flex-list {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+    }
+  }
+`;

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/index.ts

@@ -3,6 +3,7 @@ import "./clone";
 import "./commit";
 import "./dashboard";
 import "./diff";
+import "./explore";
 import "./filelist";
 import "./heatmap";
 import "./issue";

styles/components/issue.ts

@@ -0,0 +1,332 @@
+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-container {
+    // 去除评论标题左侧指向头像的小箭头
+    .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 {
+      padding: 4px 4px 4px 16px;
+    }
+    .comment-header-right {
+      > .item,
+      > .label {
+        color: ${themeVars.color.text.light.num1};
+      }
+      > .ui.label {
+        background-color: initial;
+        font-size: 12px;
+        height: 20px;
+        padding: 0 6px;
+      }
+      // 隐藏顶部菜单的表情按钮
+      // 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
+      // 很蛋疼, 希望 Gitea 早日使用 Github 的样式, 因为 Github 的更合理, 无论是操作的方便程度还是按钮的冗余度
+      // .ui.dropdown.action.select-reaction {
+      //   display: none;
+      // }
+      .context-dropdown {
+        a.context-menu {
+          display: flex;
+          align-items: center;
+        }
+        // 评论菜单的删除按钮
+        .menu .item.delete-comment {
+          color: ${themeVars.color.red.self};
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg} !important;
+            color: ${themeVars.color.red.light};
+          }
+        }
+      }
+    }
+    // 表情菜单按钮头部+底部
+    .ui.dropdown.action.select-reaction > a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${themeVars.color.button};
+      border-radius: 25px;
+      border: 1px solid ${themeVars.color.light.border};
+      color: ${themeVars.color.text.light.num1};
+      padding: 0px 8px !important;
+      height: 28px;
+      width: 28px;
+    }
+    // 底部表情栏
+    .bottom-reactions {
+      .ui.ui.ui.label {
+        background-color: unset !important;
+        border-radius: 25px;
+        border-color: ${themeVars.color.light.border};
+        &:hover {
+          background-color: ${themeVars.color.reaction.hoverBg} !important;
+          border-color: ${themeVars.color.light.border};
+        }
+        .reaction {
+          font-size: 12px;
+        }
+        .reaction-count {
+          color: ${themeVars.color.text.light.self};
+          font-weight: 500;
+          margin-left: 0;
+        }
+      }
+      // 显示表情菜单按钮
+      .select-reaction {
+        padding: 0;
+        // 两个表情按钮看着怪怪的, 很难受
+        // visibility: visible;
+      }
+    }
+  }
+`;
+
+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 {
@@ -78,13 +74,13 @@ export const repoMenu = css`
 
 export const repoTopic = css`
   // 理应只能覆盖探索/组织/用户下仓库的 topic 标签
-  .label-list .ui.label,
+  // 避免渲染到仓库的类型标签
+  .flex-item-main > .label-list .ui.label,
   // 仓库文件列表下的 topic 标签
   #repo-topics .ui.label.repo-topic {
     border-radius: 25px;
     font-size: 12px;
     padding: 5px 10px;
-    margin: 0px 1.5px 3.5px 0px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
     &:hover {

styles/public/button.ts

@@ -18,14 +18,25 @@ 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 {
-    ${primaryStyle}
-    &:hover {
-      ${primaryHoverStyle}
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
+      ${primaryStyle}
+      &:hover {
+        ${primaryHoverStyle}
+      }
     }
   }
   // 主色调基本按钮和普通按钮一样

styles/public/dropdown.ts

@@ -19,13 +19,15 @@ export const dropdown = css`
         gap: 0.5rem;
         padding: 8px 10px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
-        margin: 0 0.5rem;
-        &:first-of-type {
+        &:not(.emoji) {
+          margin: 0 0.5rem;
+        }
+        &:not(.emoji):first-of-type {
           margin-top: 0.5rem;
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
-        &:last-of-type {
+        &:not(.emoji):last-of-type {
           margin-bottom: 0.5rem;
         }
         &:hover {
@@ -37,9 +39,6 @@ export const dropdown = css`
             background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
           }
         }
-        svg {
-          margin-right: 0.5rem;
-        }
         &.active,
         &.selected {
           &:after {
@@ -154,10 +153,52 @@ 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};
+  }
+`;
+
+// 包含表情的下拉菜单
+export const emojiDropdown = css`
+  .ui.dropdown.action.select-reaction.active .menu:has(.emoji) {
+    display: flex !important;
+    flex-direction: row;
+    gap: 4px;
+    padding: 4px;
+    min-width: auto;
+    > .item.emoji {
+      font-size: 14px;
+      min-height: 32px;
+      height: 32px;
+      margin: 0px;
+      &:hover {
+        background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
+      }
+    }
   }
 `;

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(),
     ],