From 1484496dfbc0f912817cfdc88e62d8f0d6d449d2 Mon Sep 17 00:00:00 2001 From: lutinglt Date: Mon, 30 Jun 2025 23:29:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=8F=98=E9=87=8F=E5=92=8C?= =?UTF-8?q?=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 15 ++++++++--- src/index.ts | 1 - src/types/color/other.ts | 18 +++++++++++++ src/types/vars.ts | 2 ++ styles/components/actions.tsx | 6 ++--- styles/components/diff.tsx | 2 +- styles/public/chroma.tsx | 2 +- themes/dark.css.tsx | 51 +++++++++++++++++++---------------- vite.config.ts | 2 +- 9 files changed, 65 insertions(+), 34 deletions(-) diff --git a/.github/release.md b/.github/release.md index b406220..8ee5252 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,10 +2,17 @@ #### 更符合 GitHub 风格 -- 优化侧边栏间隔 -- 优化下拉菜单项目边距 -- 关闭工单按钮为紫色 +- 差异对比折叠行文本颜色同步 +- 差异对比行号位置同步 +- 差异对比按钮和折叠行高度同步 +- Actions 日志页面标题颜色同步 +- Actions 日志页面设置菜单背景色同步 +- 菜单背景色同步当前最新颜色 + +## 🎈 Perf + +- Actions 日志页面标题间隔优化 ## 🐞 Fix -- 分支按钮高度 +- 修复差异对比分列视图下颜色丢失 diff --git a/src/index.ts b/src/index.ts index dc5b6be..e792b23 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ -export { css } from "@linaria/core"; export { defineTheme } from "./core/color"; export type { Console, Diff, Other } from "./types"; export { themeVars } from "./types/vars"; diff --git a/src/types/color/other.ts b/src/types/color/other.ts index b2c25e5..e09f039 100644 --- a/src/types/color/other.ts +++ b/src/types/color/other.ts @@ -9,8 +9,10 @@ export const other = { timeline: null, /** 一些盒子颜色, 比如仓库文件列表 */ box: { + /** 仓库文件列表最后一次提交, 头行背景色 */ header: null, body: { + /** 仓库文件列表背景色 */ self: null, /** diff 按钮行行色 */ highlight: null, @@ -18,19 +20,27 @@ export const other = { }, /** 文本 */ text: { + /** 主文本/主标题颜色 */ self: null, light: { + /** 普通basic按钮的文本颜色 */ self: null, + /** 仓库文件列表的commit信息和时间文本 */ num1: null, + /** 副标题颜色 */ num2: null, + /** git 提交图里的提交时间文本 */ num3: null, }, + /** 弹窗标题色/一些激活的标题色 */ dark: null, }, /** 输入框 */ input: { + /** 选中时的文字颜色 */ text: null, background: null, + /** 找不到, 不知道啥玩意, 似乎是和复选框有关的东西 */ toggleBackgound: "color-input-toggle-background", border: { self: null, @@ -38,16 +48,24 @@ export const other = { }, }, light: { + /** 多行下交替行的强调色, 例提交历史 */ self: null, + /** 不知道什么用, gitea css 中没有使用这个属性的 */ mimicEnabled: "color-light-mimic-enabled", + /** 基础按钮/标签的边框色 */ border: null, }, hover: { + /** 按钮悬停背景色 */ self: null, + /** 仓库文件列表悬停背景色 */ opaque: null, }, + /** 设置页面菜单项当前项的背景色 */ active: null, + /** 菜单背景色 */ menu: null, + /** 卡片背景色, 但是找不到元素, 可能是个人 README */ card: null, markup: { tableRow: "color-markup-table-row", diff --git a/src/types/vars.ts b/src/types/vars.ts index 463c158..b4f8ce9 100644 --- a/src/types/vars.ts +++ b/src/types/vars.ts @@ -34,3 +34,5 @@ const otherVars = { export const themeVars = createGlobalThemeContract(vars, varMapper); export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper); + +export { css } from "@linaria/core"; diff --git a/styles/components/actions.tsx b/styles/components/actions.tsx index 1a067af..8050bd3 100644 --- a/styles/components/actions.tsx +++ b/styles/components/actions.tsx @@ -1,6 +1,6 @@ -import { css, themeVars } from "src"; -import { otherThemeVars } from "src/types/vars"; +import { css, otherThemeVars, themeVars } from "src/types/vars"; +// 仓库 Actions 页面 export const actions = css` .page-content.repository.actions .ui.grid { .four.wide { @@ -143,7 +143,7 @@ export const actionViewLeft = css` &.selected { &:hover { - background-color: ${themeVars.color.hover.self}; + background-color: ${themeVars.color.console.hoverBg}; } &:after { diff --git a/styles/components/diff.tsx b/styles/components/diff.tsx index cd207a8..2c37610 100644 --- a/styles/components/diff.tsx +++ b/styles/components/diff.tsx @@ -1,4 +1,4 @@ -import { css, themeVars } from "src"; +import { css, themeVars } from "src/types/vars"; export const diff = css` /* 折叠行多余的颜色 */ diff --git a/styles/public/chroma.tsx b/styles/public/chroma.tsx index 263f2ad..3d14101 100644 --- a/styles/public/chroma.tsx +++ b/styles/public/chroma.tsx @@ -1,4 +1,4 @@ -import { css } from "src"; +import { css } from "src/types/vars"; export const chroma = css` .chroma { diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 5fe8951..4d2dd8c 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -1,6 +1,8 @@ import type { Console, Diff, Other } from "src"; import { defineTheme, themeVars } from "src"; +const isDarkTheme = true; + const github = { display: { brown: { fgColor: "#b69a6d" }, @@ -40,25 +42,28 @@ const github = { attention: { muted: "#bb800926", }, - black: "#010409", success: { muted: "#2ea04326", }, danger: { muted: "#f851491a", }, + default: "#0d1117", inset: "#010409", muted: "#151b23", }, borderColor: { + default: "#3d444d", muted: "#3d444db3", }, control: { bgColor: { active: "#2a313c", + hover: "#262c36", }, transparent: { bgColor: { + selected: "#656c761a", hover: "#656c7633", }, }, @@ -116,47 +121,47 @@ const diff: Diff = { const other: Other = { git: "#f05133", - body: "#0d1117", + body: github.bgColor.default, box: { - header: "#151b23", + header: github.bgColor.muted, body: { - self: "#0d1117", + self: themeVars.color.body, highlight: github.bgColor.accent.muted, }, }, text: { self: github.fgColor.default, - dark: "#dbe0ea", light: { - self: "#a6aab5", - num1: "rgb(125, 133, 144)", - num2: "#8a8e99", - num3: "#707687", + self: github.fgColor.default, + num1: github.fgColor.muted, + num2: github.fgColor.muted, + num3: github.fgColor.muted, }, + dark: github.fgColor.default, }, - footer: github.bgColor.black, - timeline: "#4c525e", + footer: github.bgColor.inset, + timeline: github.borderColor.muted, input: { - text: "#d5dbe6", - background: "#2c2f35", - toggleBackgound: "#454a57", + 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: "#00000028", + self: themeVars.color.body, mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))", - border: "#3d444d", + border: github.borderColor.default, }, hover: { - self: "#656c7633", - opaque: "#656c7666", + self: github.control.bgColor.hover, + opaque: themeVars.color.box.header, }, - active: "#161a21", - menu: "#0d1117", - card: "#0d1117", + active: github.control.transparent.bgColor.selected, + menu: github.bgColor.inset, + card: github.bgColor.inset, markup: { tableRow: "#ffffff06", code: { @@ -186,7 +191,7 @@ const other: Other = { bg: "#000000f0", }, nav: { - bg: github.bgColor.black, + bg: github.bgColor.inset, hoverBg: themeVars.color.hover.self, text: themeVars.color.text.self, }, @@ -207,7 +212,7 @@ const other: Other = { }; export default defineTheme({ - isDarkTheme: true, + isDarkTheme, primary: github.fgColor.accent, primaryContrast: github.fgColor.default, secondary: "#3d444d", diff --git a/vite.config.ts b/vite.config.ts index 5fa43fe..8a606df 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -42,7 +42,7 @@ export default defineConfig(({ mode }) => { preprocessor: (_selector, cssText) => sass.compileString(cssText).css, // 默认为全局样式并使用 sass-embedded 预处理 css tagResolver: (source, tag) => // 识别从 src 导出的 css 标签，使用 @linaria/core/processors/css 处理 - source === "src" && tag === "css" ? require.resolve("@linaria/core/processors/css") : null, + source === "src/types/vars" && tag === "css" ? require.resolve("@linaria/core/processors/css") : null, }), react(), vanillaExtractPlugin(),