一些颜色修复

.github/release.md

@@ -32,6 +32,7 @@
 - 仓库标签页样式和颜色同步
 - 仓库发布页样式和颜色同步
 - 关注按钮样式同步
+- Issue 评论菜单删除按钮样式同步
 
 ## 🎈 Perf
 

src/core/color.ts

@@ -161,7 +161,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
   const named: Named = {
     red: {
       self: themeColor.red,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 10) : scaleColorLight(themeColor.red, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
       dark: {
         num1: scaleColorLight(themeColor.red, -10),
         num2: scaleColorLight(themeColor.red, -20),
@@ -176,7 +176,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     orange: {
       self: themeColor.orange,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 10) : scaleColorLight(themeColor.orange, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
       dark: {
         num1: scaleColorLight(themeColor.orange, -10),
         num2: scaleColorLight(themeColor.orange, -20),
@@ -191,7 +191,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     yellow: {
       self: themeColor.yellow,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 10) : scaleColorLight(themeColor.yellow, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
       dark: {
         num1: scaleColorLight(themeColor.yellow, -10),
         num2: scaleColorLight(themeColor.yellow, -20),
@@ -206,7 +206,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     olive: {
       self: themeColor.olive,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 10) : scaleColorLight(themeColor.olive, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
       dark: {
         num1: scaleColorLight(themeColor.olive, -10),
         num2: scaleColorLight(themeColor.olive, -20),
@@ -214,7 +214,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     green: {
       self: themeColor.green,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 10) : scaleColorLight(themeColor.green, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
       dark: {
         num1: scaleColorLight(themeColor.green, -10),
         num2: scaleColorLight(themeColor.green, -20),
@@ -229,7 +229,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     teal: {
       self: themeColor.teal,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 10) : scaleColorLight(themeColor.teal, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
       dark: {
         num1: scaleColorLight(themeColor.teal, -10),
         num2: scaleColorLight(themeColor.teal, -20),
@@ -237,7 +237,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     blue: {
       self: themeColor.blue,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 10) : scaleColorLight(themeColor.blue, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
       dark: {
         num1: scaleColorLight(themeColor.blue, -10),
         num2: scaleColorLight(themeColor.blue, -20),
@@ -245,7 +245,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     violet: {
       self: themeColor.violet,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 10) : scaleColorLight(themeColor.violet, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
       dark: {
         num1: scaleColorLight(themeColor.violet, -10),
         num2: scaleColorLight(themeColor.violet, -20),
@@ -253,7 +253,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     purple: {
       self: themeColor.purple,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 10) : scaleColorLight(themeColor.purple, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
       dark: {
         num1: scaleColorLight(themeColor.purple, -10),
         num2: scaleColorLight(themeColor.purple, -20),
@@ -261,7 +261,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     pink: {
       self: themeColor.pink,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 10) : scaleColorLight(themeColor.pink, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
       dark: {
         num1: scaleColorLight(themeColor.pink, -10),
         num2: scaleColorLight(themeColor.pink, -20),
@@ -269,7 +269,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     brown: {
       self: themeColor.brown,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 10) : scaleColorLight(themeColor.brown, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
       dark: {
         num1: scaleColorLight(themeColor.brown, -10),
         num2: scaleColorLight(themeColor.brown, -20),
@@ -277,7 +277,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     black: {
       self: themeColor.black,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 10) : scaleColorLight(themeColor.black, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
       dark: {
         num1: scaleColorLight(themeColor.black, -10),
         num2: scaleColorLight(themeColor.black, -20),
@@ -285,7 +285,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     grey: {
       self: themeColor.grey,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 10) : scaleColorLight(themeColor.grey, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
     },
     gold: themeColor.gold,
     white: themeColor.white,

src/types/color/github.ts

@@ -165,6 +165,7 @@ export const github = {
          * @input `inputAction` 输入框动作按钮的悬停背景颜色
          * @dropdown `dropdown` 下拉框子项的悬停背景颜色
          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色
+         * @menu `menu` 菜单项的悬停背景颜色
          */
         hover: null,
       },

styles/components/dashboard.tsx

@@ -2,9 +2,14 @@ import { css } from "src/types/vars";
 
 export const dashboard = css`
   .page-content.dashboard {
+    // 动态的右侧 svg 图标
     .flex-item .flex-item-trailing svg {
       height: 20px;
       width: 20px;
     }
+    // 仓库列表的仓库/组织切换按钮
+    .ui.two.item.menu {
+      background-color: unset;
+    }
   }
 `;

styles/components/issue.tsx

@@ -93,6 +93,18 @@ export const comment = css`
         box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
       }
     }
+    .comment-header-right {
+      .context-dropdown {
+        // 评论菜单的删除按钮
+        .menu .item.delete-comment {
+          color: ${themeVars.color.red.self};
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg} !important;
+            color: ${themeVars.color.red.light};
+          }
+        }
+      }
+    }
   }
 `;
 

styles/public/menu.tsx

@@ -108,3 +108,20 @@ export const verticalMenu = css`
     }
   }
 `;
+
+export const menu = css`
+  // 菜单默认悬浮色更改
+  .ui.menu a.item,
+  .ui.secondary.menu .dropdown.item {
+    &:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover};
+    }
+  }
+  // 一些水平小型菜单的颜色更改
+  .small-menu-items .item {
+    background-color: ${themeVars.color.body} !important;
+    &:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+    }
+  }
+`;

themes/dark.css.tsx

@@ -33,108 +33,40 @@ const github: GithubColor = {
     muted: "#9198a1",
   },
   bgColor: {
-    accent: {
+    accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
-      emphasis: "#1f6feb",
+    attention: { muted: "#bb800926" },
-      muted: "#388bfd1a",
+    success: { emphasis: "#238636", muted: "#2ea04326" },
-    },
+    danger: { muted: "#f851491a" },
-    attention: {
+    done: { emphasis: "#8957e5" },
-      muted: "#bb800926",
-    },
-    success: {
-      emphasis: "#238636",
-      muted: "#2ea04326",
-    },
-    danger: {
-      muted: "#f851491a",
-    },
-    done: {
-      emphasis: "#8957e5",
-    },
     default: "#0d1117",
     inset: "#010409",
     muted: "#151b23",
-    neutral: {
+    neutral: { muted: "#656c7633" },
-      muted: "#656c7633",
-    },
   },
   borderColor: {
-    accent: {
+    accent: { emphasis: "#1f6feb" },
-      emphasis: "#1f6feb",
-    },
     default: "#3d444d",
-    attention: {
+    attention: { emphasis: "#9e6a03" },
-      emphasis: "#9e6a03",
+    success: { emphasis: "#238636" },
-    },
+    done: { emphasis: "#8957e5" },
-    success: {
-      emphasis: "#238636",
-    },
-    done: {
-      emphasis: "#8957e5",
-    },
     muted: "#3d444db3",
     translucent: "#ffffff26",
   },
   button: {
-    primary: {
+    primary: { fgColor: { accent: "#39d353", rest: "#ffffff" }, bgColor: { rest: "#238636", hover: "#29903b" } },
-      fgColor: {
+    danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
-        accent: "#39d353",
-        rest: "#ffffff",
-      },
-      bgColor: {
-        rest: "#238636",
-        hover: "#29903b",
-      },
-    },
-    danger: {
-      fgColor: {
-        rest: "#fa5e55",
-        hover: "#ffffff",
-      },
-      bgColor: {
-        hover: "#b62324",
-      },
-    },
   },
   control: {
-    bgColor: {
+    bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
-      active: "#2a313c",
+    transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
-      hover: "#262c36",
-      rest: "#212830",
-    },
-    transparent: {
-      bgColor: {
-        active: "#656c7640",
-        hover: "#656c7633",
-        selected: "#656c761a",
-      },
-    },
-  },
-  shadow: {
-    floating: "#01040966",
-  },
-  overlay: {
-    backdrop: {
-      bgColor: "#21283066",
-    },
-  },
-  underlineNav: {
-    borderColor: {
-      active: "#f78166",
-    },
   },
+  shadow: { floating: "#01040966" },
+  overlay: { backdrop: { bgColor: "#21283066" } },
+  underlineNav: { borderColor: { active: "#f78166" } },
   contribution: {
     default: {
-      bgColor: {
+      bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364", num5: "#7ee787" },
-        num0: "#151b23",
+      borderColor: { num0: "#0104090d" },
-        num1: "#033a16",
-        num2: "#196c2e",
-        num3: "#2ea043",
-        num4: "#56d364",
-        num5: "#7ee787",
-      },
-      borderColor: {
-        num0: "#0104090d",
-      },
     },
   },
 };