菜单项默认颜色更改

.github/release.md

@@ -2,10 +2,17 @@
 
 #### 更符合 GitHub 风格
 
-- 优化侧边栏间隔
-- 优化下拉菜单项目边距
-- 关闭工单按钮为紫色
+- 差异对比折叠行文本颜色同步
+- 差异对比行号位置同步
+- 差异对比按钮和折叠行高度同步
+- Actions 日志页面标题颜色同步
+- Actions 日志页面设置菜单背景色同步
+- 菜单背景色同步当前最新颜色
+
+## 🎈 Perf
+
+- Actions 日志页面标题间隔优化
 
 ## 🐞 Fix
 
-- 分支按钮高度
+- 修复差异对比分列视图下颜色丢失

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";

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",

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";

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 {

styles/components/diff.tsx

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src";
+import { css, themeVars } from "src/types/vars";
 
 export const diff = css`
   /* 折叠行多余的颜色 */

styles/public/chroma.tsx

@@ -1,4 +1,4 @@
-import { css } from "src";
+import { css } from "src/types/vars";
 
 export const chroma = css`
   .chroma {

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: themeVars.color.body, // 此菜单项涉及太多, 不仅仅是下拉菜单, 默认使用 body 颜色
+  card: themeVars.color.body,
   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",

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