diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 691e216..2039d14 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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,14 +143,14 @@ export default theme: Theme = { ## 主题样式贡献 -主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因. +主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且本主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因. 请尽量不要使用 SCSS 的函数, `vscode-styled-components` 插件会报错, 请使用 TypeScript 相关库处理, 比如本主题自带的 `polished` 库. 推荐需要使用复杂处理时, 提取逻辑到 `src/functions` 目录下的函数中, 然后在 `src/styles` 目录下的样式文件中使用. -主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types"` +主题样式中使用到的所有颜色必须使用颜色变量, 颜色变量导入 `import { themeVars } from "src/types/vars"` 涉及到本主题的颜色变量 `${themeVars.github.xxx}`, 在使用时请将使用的文件和变量添加到对应变量的注释中 `src/types/color/github` diff --git a/README.md b/README.md index b079de7..5e02ccf 100644 --- a/README.md +++ b/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. ## 安装 diff --git a/src/core/color.ts b/src/core/color.ts index e8febca..1c11bde 100644 --- a/src/core/color.ts +++ b/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 { diff --git a/src/functions/var.ts b/src/functions/var.ts index 90a9996..546a560 100644 --- a/src/functions/var.ts +++ b/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})`; diff --git a/src/index.ts b/src/index.ts index cc42935..330b5bf 100644 --- a/src/index.ts +++ b/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"; diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 8a85c84..043d252 100644 --- a/src/types/color/github.ts +++ b/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,