todo

CONTRIBUTING.md

@@ -15,7 +15,7 @@
 
 ## 贡献说明
 
-本主题不推荐样式贡献, 因为 Gitea 主题最终是由单个 CSS 文件提供, 所以会有先后顺序覆盖, 样式影响广泛等问题.
+不推荐主题样式贡献, 因为 Gitea 主题最终是由单个 CSS 文件提供, 所以会有先后顺序覆盖, 样式影响广泛等问题.
 
 开发者每个人的思路不一样, 审核很难看出这些问题, 会极大增加维护难度.
 
@@ -29,7 +29,7 @@
 
 ## 开发环境
 
-本主题仅依赖于 Node.js 环境, 请确保你的环境中已经安装了 Node.js, 推荐使用 Node.js 20 或以上版本.
+主题仅依赖于 Node.js 环境, 请确保你的环境中已经安装了 Node.js, 推荐使用 Node.js 20 或以上版本.
 
 请使用 VSCode 开发, 并安装仓库中推荐的插件.
 
@@ -98,6 +98,8 @@ npm run commit
 推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题,
 defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明.
 
+颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
+
 例: `themes/主题名称-dark.css.ts`
 
 ```ts
@@ -119,7 +121,7 @@ export default defineTheme({
 
 如果不需要自定义代码高亮色, 则不传递 chroma 参数, 框架会自动根据主题的暗色或亮色生成代码高亮色.
 
-如果需要完全自定义每个 Gitea 变量, 请导入 `import { Theme } from "src/theme"`
+如果需要完全自定义每个 Gitea 变量, 请导入 `import type { Theme } from "src"`
 
 例: `themes/主题名称-dark.css.ts`
 
@@ -128,7 +130,7 @@ export default defineTheme({
  * @author 你的名字
  * @description 主题描述
  */
-import { Theme } from "src";
+import type { Theme } from "src";
 export default theme: Theme = {
  ...
 };
@@ -141,16 +143,16 @@ export default theme: Theme = {
 
 ## 主题样式贡献
 
-主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.
+主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.
 
-请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如本主题自带的
+请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如主题自带的
 `polished` 库.
 
 推荐需要使用复杂处理时, 提取逻辑到 `src/functions` 目录下的函数中, 然后在 `src/styles` 目录下的样式文件中使用.
 
-主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types"`
+主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types/vars"`
 
-涉及到本主题的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中
+涉及到主题自己的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中
 `src/types/color/github`
 
 小型圆角(6px)请使用全局圆角变量, 圆角变量导入 `import { otherThemeVars } from "src/types/vars"`

README.md

@@ -9,15 +9,15 @@
 
 ## 版本号说明
 
-本主题版本号格式: `Gitea 版本号.时间戳`
+主题版本号格式: `Gitea 版本号.时间戳`
 
 Gitea 版本号格式: `1.大版本号.小版本号`
 
-Gitea 理论上小版本号变更不会修改前端布局, 所以本主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
+Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
 
-比如: 本主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
+比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
 
-本主题仅维护本主题发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
+仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
 
 ## 安装
 
@@ -42,6 +42,23 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+## 截图
+
+<details open>
+<summary>GitHub</summary>
+<h4>theme-github-light.css</h4>
+<img src="screenshots/light.png"/>
+<h4>theme-github-dark.css</h4>
+<img src="screenshots/dark.png"/>
+<h4>theme-github-soft-dark.css</h4>
+<img src="screenshots/soft-dark.png"/>
+</details>
+
+<details>
+<summary>其他主题</summary>
+等待贡献者ing...
+</details>
+
 ## 自定义 CSS 变量
 
 可以根据自己的偏好自定义主题的一部分样式
@@ -67,31 +84,14 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 
 ### 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      | 1/2   |        |        |
-| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1      | 1      | 1/2   |        |        |
-| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2      | 1      | 1/2   |        |        |
-
-## 截图
-
-<details open>
-<summary>GitHub</summary>
-<h4>theme-github-light.css</h4>
-<img src="screenshots/light.png"/>
-<h4>theme-github-dark.css</h4>
-<img src="screenshots/dark.png"/>
-<h4>theme-github-soft-dark.css</h4>
-<img src="screenshots/soft-dark.png"/>
-</details>
-
-<details>
-<summary>其他主题</summary>
-等待贡献者ing...
-</details>
+| 变量名                            | 描述                        | 默认  | 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      | 1/2   |       |       |
+| --custom-org-repolist-columns     | 组织页面的仓库列表列数      | 1     | 1      | 1/2   |       |       |
+| --custom-org-userlist-columns     | 组织页面的用户列表列数      | 2     | 1      | 1/2   |       |       |
 
 ## 使用开发中的主题
 

TODO.md

@@ -1,4 +1,14 @@
 ### 重大
 
-- gitea issue 默认标签颜色匹配使用 github 样式
+- gitea issue 暗色模式下默认标签颜色匹配使用 github 样式
 - issue/PR 列表样式 github 布局
+- 用户动态仪表板样式优化
+- 分页样式优化
+- 工单管理中搜索框精细按钮的宽度修复
+- 仓库文件列表的单行高度调整
+- 仓库文件列表页 README 导航栏样式
+- 色盲主题支持
+- 打开文件时的文件导航树样式和滚动高度
+- 私有库标签大小, 组织页面下的RSS订阅按钮样式
+- 登录/注册页面样式
+- 创建仓库页面样式 ? (待验证)

src/core/color.ts

@@ -59,7 +59,7 @@ type ThemeColor = {
 /** 定义颜色, 用于生成颜色主题
  * @example
  * 文件名: "dark.css.ts"
- * import type { Console, Diff, Other } from "src/types";
+ * import type { Console, Diff, Other, Github } from "src/types";
  * import { defineTheme, themeVars } from "src";
  *
  * const console: Console = {
@@ -78,6 +78,7 @@ type ThemeColor = {
  *   console,
  *   diff,
  *   other,
+ *   github,
  * })
  */
 export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme {

src/functions/var.ts

@@ -1,6 +1,12 @@
 import type { CSSVarFunction } from "src/core/types";
 
 type CSSFallbackVar = `var(--${string}, ${string})`;
+/**
+ * 设置 CSS 变量的回退值
+ * @param cssvar `var(--${string})`
+ * @param fallback
+ * @returns `var(--${string}, fallback)`
+ */
 export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallbackVar {
   const var_name = cssvar.replace("var(--", "").replace(")", "");
   return `var(--${var_name}, ${fallback})`;

src/index.ts

@@ -1,3 +1,4 @@
 export { defineTheme } from "./core/color";
-export type { Chroma, Console, Diff, Other } from "./types";
-export { themeVars } from "./types/vars";
+export type { Theme } from "./core/theme";
+export type { Chroma, Console, Diff, Github, Other } from "./types";
+export { otherThemeVars, themeVars } from "./types/vars";

src/types/color/github.ts

@@ -201,17 +201,17 @@ export const github = {
   /** 热力图 */
   contribution: {
     default: {
+      /** 热力图方块的颜色 */
       bgColor: {
         num0: null,
         num1: null,
         num2: null,
         num3: null,
         num4: null,
-        /** github 无此颜色需自行计算
-         * @example 可参考这个颜色 `--color-prettylights-syntax-string-regexp`
-         */
+        /** github 无此颜色需自行计算 */
         num5: null,
       },
+      /** 热力图方块的内边框颜色 */
       borderColor: {
         num0: null,
         num1: null,