diff --git a/src/core/color.ts b/src/core/color.ts index 555c06b..19db673 100644 --- a/src/core/color.ts +++ b/src/core/color.ts @@ -4,7 +4,7 @@ import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secon import { themeVars } from "src/types/vars"; import type { Theme } from "./theme"; -interface ColorTheme { +type ThemeColor = { /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */ isDarkTheme: boolean; /** 主色调(强调色) */ @@ -53,7 +53,7 @@ interface ColorTheme { other: Other; /** 仅适用于本主题的全局变量, 取自 Github */ github: Github; -} +}; /** 定义颜色, 用于生成颜色主题 * @example @@ -80,7 +80,7 @@ interface ColorTheme { * other, * }) */ -export function defineTheme(theme: ColorTheme): Theme { +export function defineTheme(theme: ThemeColor): Theme { const lighten = theme.isDarkTheme ? -1 : 1; const primary: Primary = { diff --git a/src/core/github.ts b/src/core/github.ts new file mode 100644 index 0000000..d84d818 --- /dev/null +++ b/src/core/github.ts @@ -0,0 +1,258 @@ +import type { Console, Diff, Other } from "src"; +import { themeVars } from "src/types/vars"; +import { defineTheme } from "./color"; +import type { Theme } from "./theme"; + +export type GithubColor = { + isDarkTheme: boolean; + display: { + brown: { fgColor: string }; + cyan: { fgColor: string }; + indigo: { fgColor: string }; + lemon: { fgColor: string }; + olive: { fgColor: string }; + teal: { fgColor: string }; + }; + diffBlob: { + addtionNum: { bgColor: string }; + addtionWord: { bgColor: string }; + deletionNum: { bgColor: string }; + deletionWord: { bgColor: string }; + hunkNum: { bgColor: { rest: string } }; + }; + fgColor: { + accent: string; + attention: string; + danger: string; + default: string; + disabled: string; + done: string; + neutral: string; + severe: string; + sponsors: string; + success: string; + black: string; + white: string; + muted: string; + }; + bgColor: { + accent: { + emphasis: string; + muted: string; + }; + attention: { + muted: string; + }; + success: { + muted: string; + }; + danger: { + muted: string; + }; + default: string; + inset: string; + muted: string; + neutral: { + muted: string; + }; + }; + borderColor: { + default: string; + muted: string; + }; + control: { + bgColor: { + active: string; + hover: string; + rest: string; + }; + transparent: { + bgColor: { + active: string; + hover: string; + selected: string; + }; + }; + }; + shadow: { + floating: string; + }; +} + +export function defineGithubTheme(github: GithubColor): Theme { + const console: Console = { + fg: { + self: github.fgColor.default, + subtle: github.fgColor.muted, + }, + bg: github.bgColor.inset, + border: github.borderColor.muted, + activeBg: github.control.bgColor.active, + hoverBg: github.control.transparent.bgColor.hover, + menu: { + bg: github.bgColor.inset, + border: github.borderColor.muted, + }, + }; + + const diff: Diff = { + added: { + linenum: { + bg: github.diffBlob.addtionNum.bgColor, + }, + row: { + bg: github.bgColor.success.muted, + border: github.bgColor.success.muted, + }, + word: { + bg: github.diffBlob.addtionWord.bgColor, + }, + }, + removed: { + linenum: { + bg: github.diffBlob.deletionNum.bgColor, + }, + row: { + bg: github.bgColor.danger.muted, + border: github.bgColor.danger.muted, + }, + word: { + bg: github.diffBlob.deletionWord.bgColor, + }, + }, + moved: { + row: { + bg: github.bgColor.attention.muted, + border: github.bgColor.attention.muted, + }, + }, + inactive: github.bgColor.muted, + }; + + const other: Other = { + body: github.bgColor.default, + box: { + header: github.bgColor.muted, + body: { + self: themeVars.color.body, + highlight: github.bgColor.accent.muted, + }, + }, + text: { + self: github.fgColor.default, + light: { + self: github.fgColor.default, + num1: github.fgColor.muted, + num2: github.fgColor.muted, + num3: github.fgColor.muted, + }, + dark: github.fgColor.default, + }, + footer: github.bgColor.inset, + timeline: github.borderColor.muted, + input: { + text: themeVars.color.text.self, + background: themeVars.color.body, + toggleBackgound: themeVars.color.body, + border: { + self: themeVars.color.light.border, + hover: themeVars.color.light.border, + }, + }, + light: { + self: themeVars.color.body, + border: github.borderColor.default, + }, + hover: { + self: github.control.bgColor.hover, + opaque: themeVars.color.box.header, + }, + active: github.control.transparent.bgColor.selected, + menu: github.bgColor.inset, + card: themeVars.color.body, + markup: { + tableRow: github.bgColor.muted, + code: { + block: github.bgColor.muted, + inline: github.bgColor.neutral.muted, + }, + }, + button: github.control.bgColor.rest, + codeBg: "unset", + shadow: { + self: github.shadow.floating, + opaque: themeVars.color.shadow.self, + }, + secondaryBg: "unset", + expandButton: github.diffBlob.hunkNum.bgColor.rest, + placeholderText: themeVars.color.text.light.num3, + editorLineHighlight: themeVars.color.primary.light.num5, + projectColumnBg: github.bgColor.inset, + caret: themeVars.color.text.dark, + reaction: { + bg: "initial", + hoverBg: github.bgColor.accent.muted, + activeBg: github.bgColor.accent.muted, + }, + tooltip: { + text: github.fgColor.default, + bg: github.bgColor.default, + }, + nav: { + bg: github.bgColor.inset, + hoverBg: github.control.transparent.bgColor.hover, + text: themeVars.color.text.self, + }, + secondaryNavBg: themeVars.color.nav.bg, + label: { + text: themeVars.color.text.self, + bg: github.bgColor.neutral.muted, + hoverBg: github.control.transparent.bgColor.active, + activeBg: themeVars.color.label.hoverBg, + }, + accent: themeVars.color.primary.light.num1, + smallAccent: themeVars.color.primary.light.num5, + highlight: { + fg: github.fgColor.attention, + bg: github.bgColor.attention.muted, + }, + overlayBackdrop: themeVars.color.body, + }; + return defineTheme({ + isDarkTheme: github.isDarkTheme, + primary: github.fgColor.accent, + primaryContrast: github.fgColor.default, + secondary: github.borderColor.default, + red: github.fgColor.danger, + orange: github.fgColor.severe, + yellow: github.fgColor.attention, + olive: github.display.olive.fgColor, + green: github.fgColor.success, + cyan: github.display.cyan.fgColor, + teal: github.display.teal.fgColor, + blue: github.fgColor.accent, + violet: github.display.indigo.fgColor, + purple: github.fgColor.done, + pink: github.fgColor.sponsors, + brown: github.display.brown.fgColor, + black: github.fgColor.black, + grey: github.fgColor.neutral, + gold: github.display.lemon.fgColor, + white: github.fgColor.white, + console, + diff, + other, + github: { + fgColor: { + accent: github.fgColor.accent, + default: github.fgColor.default, + muted: github.fgColor.muted, + }, + bgColor: { + accent: { + emphasis: github.bgColor.accent.emphasis, + }, + }, + }, + }); +} diff --git a/src/core/theme.ts b/src/core/theme.ts index 3028e85..ed53543 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -16,6 +16,12 @@ function stringToBoolean(str: string, name: string): boolean { export function createTheme(theme: Theme): void { createGlobalTheme(":root", themeVars, theme); createGlobalTheme(":root", otherThemeVars, { + git: "#f05133", + light: { + mimicEnabled: theme.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", }, diff --git a/src/types/color/diff.ts b/src/types/color/diff.ts index b154e2b..6966c68 100644 --- a/src/types/color/diff.ts +++ b/src/types/color/diff.ts @@ -4,20 +4,27 @@ const row = { }; const line = { + /** 行号 */ linenum: { bg: null, }, + /** 代码行 */ row: row, + /** 代码 */ word: { bg: null, }, }; export const diff = { + /** 添加 */ added: line, + /** 移动 */ moved: { row: row, }, + /** 删除 */ removed: line, + /** 对比空白部分背景色 */ inactive: null, }; diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 86822e0..15327bc 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -2,7 +2,7 @@ export const github = { /** 用于 color 属性的颜色 */ fgColor: { /** 强调色 - * @actions 右侧日志标题颜色 + * @actions `actionViewRight` 右侧日志标题颜色 */ accent: null, /** 默认的文本颜色 @@ -19,7 +19,7 @@ export const github = { accent: { /** 强调色 * @diff 折叠/展开按钮的悬停颜色 - * @actions 左侧子作业激活伪元素颜色 + * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 */ emphasis: null, }, diff --git a/src/types/color/index.ts b/src/types/color/index.ts index 68d23d9..4dcf082 100644 --- a/src/types/color/index.ts +++ b/src/types/color/index.ts @@ -4,4 +4,4 @@ export { github } from "./github"; export { primary, secondary } from "./main"; export { message } from "./message"; export { named } from "./named"; -export { other } from "./other"; +export { other, otherAuto } from "./other"; diff --git a/src/types/color/other.ts b/src/types/color/other.ts index bd62285..c1b6925 100644 --- a/src/types/color/other.ts +++ b/src/types/color/other.ts @@ -1,6 +1,13 @@ -export const other = { +export const otherAuto= { /** 未知 */ git: null, + light: { + /** 不知道什么用, gitea css 中没有使用这个属性的 */ + mimicEnabled: "color-light-mimic-enabled", + }, +} + +export const other = { /** 主要背景色 */ body: null, /** 页面底部状态栏背景色 */ @@ -50,8 +57,6 @@ export const other = { light: { /** 多行下交替行的强调色, 例提交历史 */ self: null, - /** 不知道什么用, gitea css 中没有使用这个属性的 */ - mimicEnabled: "color-light-mimic-enabled", /** 基础按钮/标签的边框色 */ border: null, }, diff --git a/src/types/vars.ts b/src/types/vars.ts index b4f8ce9..c51d066 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -30,6 +30,7 @@ const otherVars = { border: { radius: null, }, + ...color.otherAuto, }; export const themeVars = createGlobalThemeContract(vars, varMapper); diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 609830e..7426411 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -1,9 +1,7 @@ -import type { Console, Diff, Other } from "src"; -import { defineTheme, themeVars } from "src"; +import { defineGithubTheme, type GithubColor } from "src/core/github"; -const isDarkTheme = true; - -const github = { +const github: GithubColor = { + isDarkTheme: true, display: { brown: { fgColor: "#b69a6d" }, cyan: { fgColor: "#07ace4" }, @@ -53,7 +51,7 @@ const github = { muted: "#151b23", neutral: { muted: "#656c7633", - } + }, }, borderColor: { default: "#3d444d", @@ -74,185 +72,8 @@ const github = { }, }, shadow: { - floating: "#01040966" - } -}; - -const console: Console = { - fg: { - self: github.fgColor.default, - subtle: github.fgColor.muted, - }, - bg: github.bgColor.inset, - border: github.borderColor.muted, - activeBg: github.control.bgColor.active, - hoverBg: github.control.transparent.bgColor.hover, - menu: { - bg: github.bgColor.inset, - border: github.borderColor.muted, + floating: "#01040966", }, }; -const diff: Diff = { - added: { - linenum: { - bg: github.diffBlob.addtionNum.bgColor, - }, - row: { - bg: github.bgColor.success.muted, - border: github.bgColor.success.muted, - }, - word: { - bg: github.diffBlob.addtionWord.bgColor, - }, - }, - removed: { - linenum: { - bg: github.diffBlob.deletionNum.bgColor, - }, - row: { - bg: github.bgColor.danger.muted, - border: github.bgColor.danger.muted, - }, - word: { - bg: github.diffBlob.deletionWord.bgColor, - }, - }, - moved: { - row: { - bg: github.bgColor.attention.muted, - border: github.bgColor.attention.muted, - }, - }, - inactive: github.bgColor.muted, -}; - -const other: Other = { - git: "#f05133", - body: github.bgColor.default, - box: { - header: github.bgColor.muted, - body: { - self: themeVars.color.body, - highlight: github.bgColor.accent.muted, - }, - }, - text: { - self: github.fgColor.default, - light: { - self: github.fgColor.default, - num1: github.fgColor.muted, - num2: github.fgColor.muted, - num3: github.fgColor.muted, - }, - dark: github.fgColor.default, - }, - footer: github.bgColor.inset, - timeline: github.borderColor.muted, - input: { - text: themeVars.color.text.self, - background: themeVars.color.body, - toggleBackgound: themeVars.color.body, - border: { - self: themeVars.color.light.border, - hover: themeVars.color.light.border, - }, - }, - light: { - self: themeVars.color.body, - mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))", - border: github.borderColor.default, - }, - hover: { - self: github.control.bgColor.hover, - opaque: themeVars.color.box.header, - }, - active: github.control.transparent.bgColor.selected, - menu: github.bgColor.inset, - card: themeVars.color.body, - markup: { - tableRow: github.bgColor.muted, - code: { - block: github.bgColor.muted, - inline: github.bgColor.neutral.muted, - }, - }, - button: github.control.bgColor.rest, - codeBg: "unset", - shadow: { - self: github.shadow.floating, - opaque: themeVars.color.shadow.self, - }, - secondaryBg: "unset", - expandButton: github.diffBlob.hunkNum.bgColor.rest, - placeholderText: themeVars.color.text.light.num3, - editorLineHighlight: themeVars.color.primary.light.num5, - projectColumnBg: github.bgColor.inset, - caret: themeVars.color.text.dark, - reaction: { - bg: "initial", - hoverBg: github.bgColor.accent.muted, - activeBg: github.bgColor.accent.muted, - }, - tooltip: { - text: github.fgColor.default, - bg: github.bgColor.default, - }, - nav: { - bg: github.bgColor.inset, - hoverBg: github.control.transparent.bgColor.hover, - text: themeVars.color.text.self, - }, - secondaryNavBg: themeVars.color.nav.bg, - label: { - text: themeVars.color.text.self, - bg: github.bgColor.neutral.muted, - hoverBg: github.control.transparent.bgColor.active, - activeBg: themeVars.color.label.hoverBg, - }, - accent: themeVars.color.primary.light.num1, - smallAccent: themeVars.color.primary.light.num5, - highlight: { - fg: github.fgColor.attention, - bg: github.bgColor.attention.muted, - }, - overlayBackdrop: themeVars.color.body, -}; - -export default defineTheme({ - isDarkTheme, - primary: github.fgColor.accent, - primaryContrast: github.fgColor.default, - secondary: github.borderColor.default, - red: github.fgColor.danger, - orange: github.fgColor.severe, - yellow: github.fgColor.attention, - olive: github.display.olive.fgColor, - green: github.fgColor.success, - cyan: github.display.cyan.fgColor, - teal: github.display.teal.fgColor, - blue: github.fgColor.accent, - violet: github.display.indigo.fgColor, - purple: github.fgColor.done, - pink: github.fgColor.sponsors, - brown: github.display.brown.fgColor, - black: github.fgColor.black, - grey: github.fgColor.neutral, - gold: github.display.lemon.fgColor, - white: github.fgColor.white, - console, - diff, - other, - github: { - fgColor: { - accent: github.fgColor.accent, - default: github.fgColor.default, - muted: github.fgColor.muted, - }, - bgColor: { - accent: { - emphasis: github.bgColor.accent.emphasis, - }, - }, - }, -}); +export default defineGithubTheme(github);