button 样式迁移

.github/release.md

@@ -13,10 +13,15 @@
 - 弹窗阴影颜色同步
 - 仓库项目页面列背景色同步
 - Issue/PR 表情背景色同步
+- 普通按钮激活背景色同步
+- 主色调按钮边框色同步
+- 设置界面右上角小按钮样式同步
 
 ## 🎈 Perf
 
 - Actions 日志页面标题间隔优化
+- 管理员后台按钮样式优化
+- 信息提示颜色优化
 
 ## 🐞 Fix
 

src/core/color.ts

@@ -1,4 +1,4 @@
-import { rgba } from "polished";
+import { rgba, saturate } from "polished";
 import { scaleColorLight } from "src/functions";
 import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
 import { themeVars } from "src/types/vars";
@@ -80,241 +80,241 @@ type ThemeColor = {
  *   other,
  * })
  */
-export function defineTheme(theme: ThemeColor): Theme {
+export function defineTheme(themeColor: ThemeColor): Theme {
-  const lighten = theme.isDarkTheme ? -1 : 1;
+  const brightDir = themeColor.isDarkTheme ? -1 : 1;
 
   const primary: Primary = {
-    self: theme.primary,
+    self: themeColor.primary,
-    contrast: theme.primaryContrast,
+    contrast: themeColor.primaryContrast,
     dark: {
-      num1: scaleColorLight(theme.primary, -12 * lighten),
+      num1: scaleColorLight(themeColor.primary, -12 * brightDir),
-      num2: scaleColorLight(theme.primary, -24 * lighten),
+      num2: scaleColorLight(themeColor.primary, -24 * brightDir),
-      num3: scaleColorLight(theme.primary, -36 * lighten),
+      num3: scaleColorLight(themeColor.primary, -36 * brightDir),
-      num4: scaleColorLight(theme.primary, -48 * lighten),
+      num4: scaleColorLight(themeColor.primary, -48 * brightDir),
-      num5: scaleColorLight(theme.primary, -60 * lighten),
+      num5: scaleColorLight(themeColor.primary, -60 * brightDir),
-      num6: scaleColorLight(theme.primary, -72 * lighten),
+      num6: scaleColorLight(themeColor.primary, -72 * brightDir),
-      num7: scaleColorLight(theme.primary, -84 * lighten),
+      num7: scaleColorLight(themeColor.primary, -84 * brightDir),
     },
     light: {
-      num1: scaleColorLight(theme.primary, 12 * lighten),
+      num1: scaleColorLight(themeColor.primary, 12 * brightDir),
-      num2: scaleColorLight(theme.primary, 24 * lighten),
+      num2: scaleColorLight(themeColor.primary, 24 * brightDir),
-      num3: scaleColorLight(theme.primary, 36 * lighten),
+      num3: scaleColorLight(themeColor.primary, 36 * brightDir),
-      num4: scaleColorLight(theme.primary, 48 * lighten),
+      num4: scaleColorLight(themeColor.primary, 48 * brightDir),
-      num5: scaleColorLight(theme.primary, 60 * lighten),
+      num5: scaleColorLight(themeColor.primary, 60 * brightDir),
-      num6: scaleColorLight(theme.primary, 72 * lighten),
+      num6: scaleColorLight(themeColor.primary, 72 * brightDir),
-      num7: scaleColorLight(theme.primary, 84 * lighten),
+      num7: scaleColorLight(themeColor.primary, 84 * brightDir),
     },
     alpha: {
-      num10: rgba(theme.primary, 0.1),
+      num10: rgba(themeColor.primary, 0.1),
-      num20: rgba(theme.primary, 0.2),
+      num20: rgba(themeColor.primary, 0.2),
-      num30: rgba(theme.primary, 0.3),
+      num30: rgba(themeColor.primary, 0.3),
-      num40: rgba(theme.primary, 0.4),
+      num40: rgba(themeColor.primary, 0.4),
-      num50: rgba(theme.primary, 0.5),
+      num50: rgba(themeColor.primary, 0.5),
-      num60: rgba(theme.primary, 0.6),
+      num60: rgba(themeColor.primary, 0.6),
-      num70: rgba(theme.primary, 0.7),
+      num70: rgba(themeColor.primary, 0.7),
-      num80: rgba(theme.primary, 0.8),
+      num80: rgba(themeColor.primary, 0.8),
-      num90: rgba(theme.primary, 0.9),
+      num90: rgba(themeColor.primary, 0.9),
     },
-    hover: theme.isDarkTheme ? themeVars.color.primary.light.num1 : themeVars.color.primary.dark.num1,
+    hover: themeColor.isDarkTheme ? themeVars.color.primary.light.num1 : themeVars.color.primary.dark.num1,
-    active: theme.isDarkTheme ? themeVars.color.primary.light.num2 : themeVars.color.primary.dark.num2,
+    active: themeColor.isDarkTheme ? themeVars.color.primary.light.num2 : themeVars.color.primary.dark.num2,
   };
 
   const secondary: Secondary = {
-    self: theme.secondary,
+    self: themeColor.secondary,
     dark: {
-      num1: scaleColorLight(theme.secondary, -6 * lighten),
+      num1: scaleColorLight(themeColor.secondary, -6 * brightDir),
-      num2: scaleColorLight(theme.secondary, -12 * lighten),
+      num2: scaleColorLight(themeColor.secondary, -12 * brightDir),
-      num3: scaleColorLight(theme.secondary, -18 * lighten),
+      num3: scaleColorLight(themeColor.secondary, -18 * brightDir),
-      num4: scaleColorLight(theme.secondary, -24 * lighten),
+      num4: scaleColorLight(themeColor.secondary, -24 * brightDir),
-      num5: scaleColorLight(theme.secondary, -30 * lighten),
+      num5: scaleColorLight(themeColor.secondary, -30 * brightDir),
-      num6: scaleColorLight(theme.secondary, -36 * lighten),
+      num6: scaleColorLight(themeColor.secondary, -36 * brightDir),
-      num7: scaleColorLight(theme.secondary, -42 * lighten),
+      num7: scaleColorLight(themeColor.secondary, -42 * brightDir),
-      num8: scaleColorLight(theme.secondary, -48 * lighten),
+      num8: scaleColorLight(themeColor.secondary, -48 * brightDir),
-      num9: scaleColorLight(theme.secondary, -54 * lighten),
+      num9: scaleColorLight(themeColor.secondary, -54 * brightDir),
-      num10: scaleColorLight(theme.secondary, -60 * lighten),
+      num10: scaleColorLight(themeColor.secondary, -60 * brightDir),
-      num11: scaleColorLight(theme.secondary, -66 * lighten),
+      num11: scaleColorLight(themeColor.secondary, -66 * brightDir),
-      num12: scaleColorLight(theme.secondary, -72 * lighten),
+      num12: scaleColorLight(themeColor.secondary, -72 * brightDir),
-      num13: scaleColorLight(theme.secondary, -80 * lighten),
+      num13: scaleColorLight(themeColor.secondary, -80 * brightDir),
     },
     light: {
-      num1: scaleColorLight(theme.secondary, 18 * lighten),
+      num1: scaleColorLight(themeColor.secondary, 18 * brightDir),
-      num2: scaleColorLight(theme.secondary, 36 * lighten),
+      num2: scaleColorLight(themeColor.secondary, 36 * brightDir),
-      num3: scaleColorLight(theme.secondary, 54 * lighten),
+      num3: scaleColorLight(themeColor.secondary, 54 * brightDir),
-      num4: scaleColorLight(theme.secondary, 72 * lighten),
+      num4: scaleColorLight(themeColor.secondary, 72 * brightDir),
     },
     alpha: {
-      num10: rgba(theme.secondary, 0.1),
+      num10: rgba(themeColor.secondary, 0.1),
-      num20: rgba(theme.secondary, 0.2),
+      num20: rgba(themeColor.secondary, 0.2),
-      num30: rgba(theme.secondary, 0.3),
+      num30: rgba(themeColor.secondary, 0.3),
-      num40: rgba(theme.secondary, 0.4),
+      num40: rgba(themeColor.secondary, 0.4),
-      num50: rgba(theme.secondary, 0.5),
+      num50: rgba(themeColor.secondary, 0.5),
-      num60: rgba(theme.secondary, 0.6),
+      num60: rgba(themeColor.secondary, 0.6),
-      num70: rgba(theme.secondary, 0.7),
+      num70: rgba(themeColor.secondary, 0.7),
-      num80: rgba(theme.secondary, 0.8),
+      num80: rgba(themeColor.secondary, 0.8),
-      num90: rgba(theme.secondary, 0.9),
+      num90: rgba(themeColor.secondary, 0.9),
     },
     button: themeVars.color.secondary.dark.num4,
-    hover: theme.isDarkTheme ? themeVars.color.secondary.dark.num3 : themeVars.color.secondary.dark.num5,
+    hover: themeColor.isDarkTheme ? themeVars.color.secondary.dark.num3 : themeVars.color.secondary.dark.num5,
-    active: theme.isDarkTheme ? themeVars.color.secondary.dark.num2 : themeVars.color.secondary.dark.num6,
+    active: themeColor.isDarkTheme ? themeVars.color.secondary.dark.num2 : themeVars.color.secondary.dark.num6,
   };
 
   const named: Named = {
     red: {
-      self: theme.red,
+      self: themeColor.red,
-      light: theme.isDarkTheme ? scaleColorLight(theme.red, 10) : scaleColorLight(theme.red, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 10) : scaleColorLight(themeColor.red, 25),
       dark: {
-        num1: scaleColorLight(theme.red, -10),
+        num1: scaleColorLight(themeColor.red, -10),
-        num2: scaleColorLight(theme.red, -20),
+        num2: scaleColorLight(themeColor.red, -20),
       },
       badge: {
-        self: theme.red,
+        self: themeColor.red,
-        bg: rgba(theme.red, 0.1),
+        bg: rgba(themeColor.red, 0.1),
         hover: {
-          bg: rgba(theme.red, 0.3),
+          bg: rgba(themeColor.red, 0.3),
         },
       },
     },
     orange: {
-      self: theme.orange,
+      self: themeColor.orange,
-      light: theme.isDarkTheme ? scaleColorLight(theme.orange, 10) : scaleColorLight(theme.orange, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 10) : scaleColorLight(themeColor.orange, 25),
       dark: {
-        num1: scaleColorLight(theme.orange, -10),
+        num1: scaleColorLight(themeColor.orange, -10),
-        num2: scaleColorLight(theme.orange, -20),
+        num2: scaleColorLight(themeColor.orange, -20),
       },
       badge: {
-        self: theme.orange,
+        self: themeColor.orange,
-        bg: rgba(theme.orange, 0.1),
+        bg: rgba(themeColor.orange, 0.1),
         hover: {
-          bg: rgba(theme.orange, 0.3),
+          bg: rgba(themeColor.orange, 0.3),
         },
       },
     },
     yellow: {
-      self: theme.yellow,
+      self: themeColor.yellow,
-      light: theme.isDarkTheme ? scaleColorLight(theme.yellow, 10) : scaleColorLight(theme.yellow, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 10) : scaleColorLight(themeColor.yellow, 25),
       dark: {
-        num1: scaleColorLight(theme.yellow, -10),
+        num1: scaleColorLight(themeColor.yellow, -10),
-        num2: scaleColorLight(theme.yellow, -20),
+        num2: scaleColorLight(themeColor.yellow, -20),
       },
       badge: {
-        self: theme.yellow,
+        self: themeColor.yellow,
-        bg: rgba(theme.yellow, 0.1),
+        bg: rgba(themeColor.yellow, 0.1),
         hover: {
-          bg: rgba(theme.yellow, 0.3),
+          bg: rgba(themeColor.yellow, 0.3),
         },
       },
     },
     olive: {
-      self: theme.olive,
+      self: themeColor.olive,
-      light: theme.isDarkTheme ? scaleColorLight(theme.olive, 10) : scaleColorLight(theme.olive, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 10) : scaleColorLight(themeColor.olive, 25),
       dark: {
-        num1: scaleColorLight(theme.olive, -10),
+        num1: scaleColorLight(themeColor.olive, -10),
-        num2: scaleColorLight(theme.olive, -20),
+        num2: scaleColorLight(themeColor.olive, -20),
       },
     },
     green: {
-      self: theme.green,
+      self: themeColor.green,
-      light: theme.isDarkTheme ? scaleColorLight(theme.green, 10) : scaleColorLight(theme.green, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 10) : scaleColorLight(themeColor.green, 25),
       dark: {
-        num1: scaleColorLight(theme.green, -10),
+        num1: scaleColorLight(themeColor.green, -10),
-        num2: scaleColorLight(theme.green, -20),
+        num2: scaleColorLight(themeColor.green, -20),
       },
       badge: {
-        self: theme.green,
+        self: themeColor.green,
-        bg: rgba(theme.green, 0.1),
+        bg: rgba(themeColor.green, 0.1),
         hover: {
-          bg: rgba(theme.green, 0.3),
+          bg: rgba(themeColor.green, 0.3),
         },
       },
     },
     teal: {
-      self: theme.teal,
+      self: themeColor.teal,
-      light: theme.isDarkTheme ? scaleColorLight(theme.teal, 10) : scaleColorLight(theme.teal, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 10) : scaleColorLight(themeColor.teal, 25),
       dark: {
-        num1: scaleColorLight(theme.teal, -10),
+        num1: scaleColorLight(themeColor.teal, -10),
-        num2: scaleColorLight(theme.teal, -20),
+        num2: scaleColorLight(themeColor.teal, -20),
       },
     },
     blue: {
-      self: theme.blue,
+      self: themeColor.blue,
-      light: theme.isDarkTheme ? scaleColorLight(theme.blue, 10) : scaleColorLight(theme.blue, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 10) : scaleColorLight(themeColor.blue, 25),
       dark: {
-        num1: scaleColorLight(theme.blue, -10),
+        num1: scaleColorLight(themeColor.blue, -10),
-        num2: scaleColorLight(theme.blue, -20),
+        num2: scaleColorLight(themeColor.blue, -20),
       },
     },
     violet: {
-      self: theme.violet,
+      self: themeColor.violet,
-      light: theme.isDarkTheme ? scaleColorLight(theme.violet, 10) : scaleColorLight(theme.violet, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 10) : scaleColorLight(themeColor.violet, 25),
       dark: {
-        num1: scaleColorLight(theme.violet, -10),
+        num1: scaleColorLight(themeColor.violet, -10),
-        num2: scaleColorLight(theme.violet, -20),
+        num2: scaleColorLight(themeColor.violet, -20),
       },
     },
     purple: {
-      self: theme.purple,
+      self: themeColor.purple,
-      light: theme.isDarkTheme ? scaleColorLight(theme.purple, 10) : scaleColorLight(theme.purple, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 10) : scaleColorLight(themeColor.purple, 25),
       dark: {
-        num1: scaleColorLight(theme.purple, -10),
+        num1: scaleColorLight(themeColor.purple, -10),
-        num2: scaleColorLight(theme.purple, -20),
+        num2: scaleColorLight(themeColor.purple, -20),
       },
     },
     pink: {
-      self: theme.pink,
+      self: themeColor.pink,
-      light: theme.isDarkTheme ? scaleColorLight(theme.pink, 10) : scaleColorLight(theme.pink, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 10) : scaleColorLight(themeColor.pink, 25),
       dark: {
-        num1: scaleColorLight(theme.pink, -10),
+        num1: scaleColorLight(themeColor.pink, -10),
-        num2: scaleColorLight(theme.pink, -20),
+        num2: scaleColorLight(themeColor.pink, -20),
       },
     },
     brown: {
-      self: theme.brown,
+      self: themeColor.brown,
-      light: theme.isDarkTheme ? scaleColorLight(theme.brown, 10) : scaleColorLight(theme.brown, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 10) : scaleColorLight(themeColor.brown, 25),
       dark: {
-        num1: scaleColorLight(theme.brown, -10),
+        num1: scaleColorLight(themeColor.brown, -10),
-        num2: scaleColorLight(theme.brown, -20),
+        num2: scaleColorLight(themeColor.brown, -20),
       },
     },
     black: {
-      self: theme.black,
+      self: themeColor.black,
-      light: theme.isDarkTheme ? scaleColorLight(theme.black, 10) : scaleColorLight(theme.black, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 10) : scaleColorLight(themeColor.black, 25),
       dark: {
-        num1: scaleColorLight(theme.black, -10),
+        num1: scaleColorLight(themeColor.black, -10),
-        num2: scaleColorLight(theme.black, -20),
+        num2: scaleColorLight(themeColor.black, -20),
       },
     },
     grey: {
-      self: theme.grey,
+      self: themeColor.grey,
-      light: theme.isDarkTheme ? scaleColorLight(theme.grey, 10) : scaleColorLight(theme.grey, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 10) : scaleColorLight(themeColor.grey, 25),
     },
-    gold: theme.gold,
+    gold: themeColor.gold,
-    white: theme.white,
+    white: themeColor.white,
   };
 
   const message: Message = {
     error: {
       bg: {
-        self: rgba(theme.red, 0.1),
+        self: rgba(themeColor.red, 0.1),
-        active: rgba(theme.red, 0.5),
+        active: rgba(themeColor.red, 0.5),
-        hover: rgba(theme.red, 0.3),
+        hover: rgba(themeColor.red, 0.3),
       },
-      border: rgba(theme.red, 0.4),
+      border: rgba(themeColor.red, 0.4),
-      text: theme.red,
+      text: saturate(0.2, themeColor.red), // 饱和度提高
     },
     success: {
-      bg: rgba(theme.green, 0.1),
+      bg: rgba(themeColor.green, 0.1),
-      border: rgba(theme.green, 0.4),
+      border: rgba(themeColor.green, 0.4),
-      text: theme.green,
+      text: saturate(0.2, themeColor.green),
     },
     warning: {
-      bg: rgba(theme.yellow, 0.1),
+      bg: rgba(themeColor.yellow, 0.1),
-      border: rgba(theme.yellow, 0.4),
+      border: rgba(themeColor.yellow, 0.4),
-      text: theme.yellow,
+      text: saturate(0.2, themeColor.yellow),
     },
     info: {
-      bg: rgba(theme.blue, 0.1),
+      bg: rgba(themeColor.blue, 0.1),
-      border: rgba(theme.blue, 0.4),
+      border: rgba(themeColor.blue, 0.4),
-      text: theme.blue,
+      text: saturate(0.2, themeColor.blue),
     },
   };
 
@@ -325,7 +325,7 @@ export function defineTheme(theme: ThemeColor): Theme {
     yellow: themeVars.color.yellow.self,
     blue: themeVars.color.blue.self,
     magenta: themeVars.color.pink.self,
-    cyan: theme.cyan,
+    cyan: themeColor.cyan,
     white: themeVars.color.console.fg.subtle,
     bright: {
       black: themeVars.color.black.light,
@@ -334,23 +334,23 @@ export function defineTheme(theme: ThemeColor): Theme {
       yellow: themeVars.color.yellow.light,
       blue: themeVars.color.blue.light,
       magenta: themeVars.color.pink.light,
-      cyan: theme.isDarkTheme ? scaleColorLight(theme.cyan, 10) : scaleColorLight(theme.cyan, 25),
+      cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.cyan, 10) : scaleColorLight(themeColor.cyan, 25),
       white: themeVars.color.console.fg.self,
     },
   };
 
   return {
-    isDarkTheme: theme.isDarkTheme.toString(),
+    isDarkTheme: themeColor.isDarkTheme.toString(),
     color: {
       primary,
       secondary,
       ...named,
       ansi,
-      console: theme.console,
+      console: themeColor.console,
-      diff: theme.diff,
+      diff: themeColor.diff,
       ...message,
-      ...theme.other,
+      ...themeColor.other,
     },
-    github: theme.github,
+    github: themeColor.github,
   };
 }

src/core/github.ts

@@ -1,4 +1,5 @@
 import type { Console, Diff, Other } from "src";
+import type { Github } from "src/types";
 import { themeVars } from "src/types/vars";
 import { defineTheme } from "./color";
 import type { Theme } from "./theme";
@@ -59,6 +60,28 @@ export type GithubColor = {
   borderColor: {
     default: string;
     muted: string;
+    translucent: string;
+  };
+  button: {
+    primary: {
+      fgColor: {
+        accent: string;
+        rest: string;
+      };
+      bgColor: {
+        rest: string;
+        hover: string;
+      };
+    };
+    danger: {
+      fgColor: {
+        rest: string;
+        hover: string;
+      };
+      bgColor: {
+        hover: string;
+      };
+    };
   };
   control: {
     bgColor: {
@@ -79,77 +102,77 @@ export type GithubColor = {
   };
 };
 
-export function defineGithubTheme(github: GithubColor): Theme {
+export function defineGithubTheme(githubColor: GithubColor): Theme {
   const console: Console = {
     fg: {
-      self: github.fgColor.default,
+      self: githubColor.fgColor.default,
-      subtle: github.fgColor.muted,
+      subtle: githubColor.fgColor.muted,
     },
-    bg: github.bgColor.inset,
+    bg: githubColor.bgColor.inset,
-    border: github.borderColor.muted,
+    border: githubColor.borderColor.muted,
-    activeBg: github.control.bgColor.active,
+    activeBg: githubColor.control.bgColor.active,
-    hoverBg: github.control.transparent.bgColor.hover,
+    hoverBg: githubColor.control.transparent.bgColor.hover,
     menu: {
-      bg: github.bgColor.inset,
+      bg: githubColor.bgColor.inset,
-      border: github.borderColor.muted,
+      border: githubColor.borderColor.muted,
     },
   };
 
   const diff: Diff = {
     added: {
       linenum: {
-        bg: github.diffBlob.addtionNum.bgColor,
+        bg: githubColor.diffBlob.addtionNum.bgColor,
       },
       row: {
-        bg: github.bgColor.success.muted,
+        bg: githubColor.bgColor.success.muted,
-        border: github.bgColor.success.muted,
+        border: githubColor.bgColor.success.muted,
       },
       word: {
-        bg: github.diffBlob.addtionWord.bgColor,
+        bg: githubColor.diffBlob.addtionWord.bgColor,
       },
     },
     removed: {
       linenum: {
-        bg: github.diffBlob.deletionNum.bgColor,
+        bg: githubColor.diffBlob.deletionNum.bgColor,
       },
       row: {
-        bg: github.bgColor.danger.muted,
+        bg: githubColor.bgColor.danger.muted,
-        border: github.bgColor.danger.muted,
+        border: githubColor.bgColor.danger.muted,
       },
       word: {
-        bg: github.diffBlob.deletionWord.bgColor,
+        bg: githubColor.diffBlob.deletionWord.bgColor,
       },
     },
     moved: {
       row: {
-        bg: github.bgColor.attention.muted,
+        bg: githubColor.bgColor.attention.muted,
-        border: github.bgColor.attention.muted,
+        border: githubColor.bgColor.attention.muted,
       },
     },
-    inactive: github.bgColor.muted,
+    inactive: githubColor.bgColor.muted,
   };
 
   const other: Other = {
-    body: github.bgColor.default,
+    body: githubColor.bgColor.default,
     box: {
-      header: github.bgColor.muted,
+      header: githubColor.bgColor.muted,
       body: {
         self: themeVars.color.body,
-        highlight: github.bgColor.accent.muted,
+        highlight: githubColor.bgColor.accent.muted,
       },
     },
     text: {
-      self: github.fgColor.default,
+      self: githubColor.fgColor.default,
       light: {
-        self: github.fgColor.default,
+        self: githubColor.fgColor.default,
-        num1: github.fgColor.muted,
+        num1: githubColor.fgColor.muted,
-        num2: github.fgColor.muted,
+        num2: githubColor.fgColor.muted,
-        num3: github.fgColor.muted,
+        num3: githubColor.fgColor.muted,
       },
-      dark: github.fgColor.default,
+      dark: githubColor.fgColor.default,
     },
-    footer: github.bgColor.inset,
+    footer: githubColor.bgColor.inset,
-    timeline: github.borderColor.muted,
+    timeline: githubColor.borderColor.muted,
     input: {
       text: themeVars.color.text.self,
       background: themeVars.color.body,
@@ -161,98 +184,136 @@ export function defineGithubTheme(github: GithubColor): Theme {
     },
     light: {
       self: themeVars.color.body,
-      border: github.borderColor.default,
+      border: githubColor.borderColor.default,
     },
     hover: {
-      self: github.control.bgColor.hover,
+      self: githubColor.control.bgColor.hover,
       opaque: themeVars.color.box.header,
     },
-    active: github.control.transparent.bgColor.selected,
+    active: githubColor.control.transparent.bgColor.selected,
-    menu: github.bgColor.inset,
+    menu: githubColor.bgColor.inset,
     card: themeVars.color.body,
     markup: {
-      tableRow: github.bgColor.muted,
+      tableRow: githubColor.bgColor.muted,
       code: {
-        block: github.bgColor.muted,
+        block: githubColor.bgColor.muted,
-        inline: github.bgColor.neutral.muted,
+        inline: githubColor.bgColor.neutral.muted,
       },
     },
-    button: github.control.bgColor.rest,
+    button: githubColor.control.bgColor.rest,
     codeBg: "unset",
     shadow: {
-      self: github.shadow.floating,
+      self: githubColor.shadow.floating,
       opaque: themeVars.color.shadow.self,
     },
     secondaryBg: "unset",
-    expandButton: github.diffBlob.hunkNum.bgColor.rest,
+    expandButton: githubColor.diffBlob.hunkNum.bgColor.rest,
     placeholderText: themeVars.color.text.light.num3,
     editorLineHighlight: themeVars.color.primary.light.num5,
-    projectColumnBg: github.bgColor.inset,
+    projectColumnBg: githubColor.bgColor.inset,
     caret: themeVars.color.text.dark,
     reaction: {
       bg: "initial",
-      hoverBg: github.bgColor.accent.muted,
+      hoverBg: githubColor.bgColor.accent.muted,
-      activeBg: github.bgColor.accent.muted,
+      activeBg: githubColor.bgColor.accent.muted,
     },
     tooltip: {
-      text: github.fgColor.default,
+      text: githubColor.fgColor.default,
-      bg: github.bgColor.default,
+      bg: githubColor.bgColor.default,
     },
     nav: {
-      bg: github.bgColor.inset,
+      bg: githubColor.bgColor.inset,
-      hoverBg: github.control.transparent.bgColor.hover,
+      hoverBg: githubColor.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,
+      bg: githubColor.bgColor.neutral.muted,
-      hoverBg: github.control.transparent.bgColor.active,
+      hoverBg: githubColor.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,
+      fg: githubColor.fgColor.attention,
-      bg: github.bgColor.attention.muted,
+      bg: githubColor.bgColor.attention.muted,
     },
     overlayBackdrop: themeVars.color.body,
   };
-  return defineTheme({
+
-    isDarkTheme: github.isDarkTheme,
+  const github: Github = {
-    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,
+      accent: githubColor.fgColor.accent,
-        default: github.fgColor.default,
+      default: githubColor.fgColor.default,
-        muted: github.fgColor.muted,
+      muted: githubColor.fgColor.muted,
+      success: githubColor.fgColor.success,
+      done: githubColor.fgColor.done,
     },
     bgColor: {
       accent: {
-          emphasis: github.bgColor.accent.emphasis,
+        emphasis: githubColor.bgColor.accent.emphasis,
+      },
+    },
+    button: {
+      default: {
+        bgColor: {
+          active: githubColor.control.bgColor.active,
+        },
+      },
+      primary: {
+        fgColor: {
+          accent: githubColor.button.primary.fgColor.accent,
+          rest: githubColor.button.primary.fgColor.rest,
+        },
+        bgColor: {
+          rest: githubColor.button.primary.bgColor.rest,
+          hover: githubColor.button.primary.bgColor.hover,
+        },
+        borderColor: {
+          rest: githubColor.borderColor.translucent,
+          hover: githubColor.borderColor.translucent,
+        },
+      },
+      danger: {
+        fgColor: {
+          rest: githubColor.button.danger.fgColor.rest,
+          hover: githubColor.button.danger.fgColor.hover,
+        },
+        bgColor: {
+          rest: githubColor.control.bgColor.rest,
+          hover: githubColor.button.danger.bgColor.hover,
+        },
+        borderColor: {
+          hover: githubColor.borderColor.translucent,
         },
       },
     },
+  };
+  return defineTheme({
+    isDarkTheme: githubColor.isDarkTheme,
+    primary: githubColor.fgColor.accent,
+    primaryContrast: githubColor.fgColor.default,
+    secondary: githubColor.borderColor.default,
+    red: githubColor.fgColor.danger,
+    orange: githubColor.fgColor.severe,
+    yellow: githubColor.fgColor.attention,
+    olive: githubColor.display.olive.fgColor,
+    green: githubColor.fgColor.success,
+    cyan: githubColor.display.cyan.fgColor,
+    teal: githubColor.display.teal.fgColor,
+    blue: githubColor.fgColor.accent,
+    violet: githubColor.display.indigo.fgColor,
+    purple: githubColor.fgColor.done,
+    pink: githubColor.fgColor.sponsors,
+    brown: githubColor.display.brown.fgColor,
+    black: githubColor.fgColor.black,
+    grey: githubColor.fgColor.neutral,
+    gold: githubColor.display.lemon.fgColor,
+    white: githubColor.fgColor.white,
+    console,
+    diff,
+    other,
+    github,
   });
 }

src/types/color/github.ts

@@ -13,6 +13,14 @@ export const github = {
      * @diff 折叠行的文本颜色
      */
     muted: null,
+    /** 成功的文本颜色
+     * @issue `button` 重新开启按钮文本颜色
+     */
+    success: null,
+    /** 完成的文本颜色
+     * @issue `button` 关闭工单按钮文本颜色
+     */
+    done: null,
   },
   /** 用于 background 属性的颜色 */
   bgColor: {
@@ -24,4 +32,79 @@ export const github = {
       emphasis: null,
     },
   },
+  button: {
+    /** 普通按钮 */
+    default: {
+      bgColor: {
+        /** 静止色
+         * @button `baseButton` 默认按钮激活颜色
+         */
+        active: null,
+      },
+    },
+    /** 主色调按钮 */
+    primary: {
+      fgColor: {
+        /** 静止色
+         * @button `primaryStyle` `primaryHoverStyle` 按钮文本颜色
+         * @setting `tinyHoverStyle` 按钮的悬停文本颜色
+         */
+        rest: null,
+        /** 强调色 (Github 没有此颜色, 为本主题自定义, 需自行设置)
+         * @setting `tinyStyle` 按钮的文本颜色
+         */
+        accent: null,
+      },
+      bgColor: {
+        /** 静止色
+         * @button `primaryStyle` 按钮颜色
+         */
+        rest: null,
+        /** 悬停色
+         * @button `primaryHoverStyle` 按钮悬停颜色
+         * @setting `tinyHoverStyle` 按钮的悬停背景颜色
+         */
+        hover: null,
+      },
+      borderColor: {
+        /** 静止色
+         * @button `primaryStyle` 按钮边框颜色
+         */
+        rest: null,
+        /** 悬停色
+         * @button `primaryHoverStyle` 按钮悬停边框颜色
+         * @setting `tinyHoverStyle` 按钮的悬停边框颜色
+         */
+        hover: null,
+      },
+    },
+    danger: {
+      fgColor: {
+        /** 静止色
+         * @button `redButton` 红色按钮文本颜色
+         */
+        rest: null,
+        /** 悬停色
+         * @button `redButton` 红色按钮悬停文本颜色
+         */
+        hover: null,
+      },
+      bgColor: {
+        /** 静止色
+         * @button `redButton` 红色按钮颜色
+         */
+        rest: null,
+        /** 悬停色
+         * @button `redButton` 红色按钮悬停颜色
+         */
+        hover: null,
+      },
+      borderColor: {
+        /** 悬停色
+         * @button `redButton` 红色按钮悬停边框颜色
+         */
+        hover: null,
+      },
+    },
+  },
 };

styles/components/index.tsx

@@ -1,5 +1,4 @@
-// organize-imports-ignore
-// tslint:disable:ordered-imports
-// 组件导入有顺序, 禁止插件优化
 import "./actions";
 import "./diff";
+import "./issue";
+import "./setting";

styles/components/issue.tsx

@@ -0,0 +1,25 @@
+import { css, themeVars } from "src/types/vars";
+
+export const button = css`
+  .issue-content-left .field.footer {
+    // 关闭工单按钮
+    .ui.red.basic.button#status-button {
+      color: ${themeVars.github.fgColor.done};
+      background-color: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+
+    // 重新开启按钮
+    .ui.basic.primary.button#status-button {
+      color: ${themeVars.github.fgColor.success};
+      background-color: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+  }
+`;

styles/components/setting.tsx

@@ -0,0 +1,68 @@
+import { css, themeVars } from "src/types/vars";
+import { primaryHoverStyle, primaryStyle } from "styles/public/button";
+
+const tinyStyle = {
+  color: themeVars.github.button.primary.fgColor.accent,
+  backgroundColor: themeVars.color.button,
+  borderColor: themeVars.color.light.border,
+};
+
+const tinyHoverStyle = {
+  color: themeVars.github.button.primary.fgColor.rest,
+  backgroundColor: themeVars.github.button.primary.bgColor.hover,
+  borderColor: themeVars.github.button.primary.borderColor.hover,
+};
+
+// 设置界面下的按钮
+export const button = css`
+  // 不包含管理员的设置界面
+  .user-main-content,
+  .repo-setting-content,
+  .user-setting-content,
+  .org-setting-content {
+    // 主色调按钮替换为普通按钮
+    .ui.primary.button {
+      color: ${themeVars.color.text.light.self};
+      background-color: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+    // 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮)
+    .ui.primary.button.tiny {
+      ${tinyStyle}
+      &:hover {
+        ${tinyHoverStyle}
+      }
+    }
+  }
+  // 右上角迷你按钮替换会主色调按钮
+  .user-main-content,
+  .repo-setting-content,
+  .user-setting-content,
+  .org-setting-content,
+  .admin-setting-content {
+    .ui.attached.header > .ui.right {
+      .ui.primary.button.tiny {
+        ${primaryStyle}
+        padding: 3px 12px;
+        min-height: 20px;
+        line-height: 20px;
+        &:hover {
+          ${primaryHoverStyle}
+        }
+      }
+    }
+  }
+  // 管理员设置界面下的自定义主色调按钮
+  .admin-setting-content .ui.primary.button {
+    ${tinyStyle}
+    padding: 5px 16px;
+    line-height: 22px;
+    &:hover {
+      ${tinyHoverStyle}
+    }
+  }
+`;

styles/index.tsx

@@ -1,5 +1,8 @@
 // organize-imports-ignore
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
+
+// 全局样式
 import "./public";
+// 组件样式
 import "./components";

styles/public/button.scss

@@ -1,138 +0,0 @@
-// Made by Luting ^-^
-.ui.button {
-  min-height: 30px;
-  font-weight: 500;
-  padding: 9px 16px;
-}
-.ui.primary.button {
-  background-color: #238636;
-  &:hover {
-    background-color: #29903b;
-  }
-}
-
-.ui.basic.button {
-  color: #f0f6fc;
-}
-
-.ui.basic.button:hover,
-.ui.labeled.button > .label:hover {
-  color: #f0f6fc;
-  background: #262c36;
-  border-color: var(--color-light-border);
-}
-
-.ui.red.button,
-.ui.basic.red.buttons .button,
-.ui.basic.red.button {
-  color: #fa5e55;
-  background-color: var(--color-button);
-  border-color: var(--color-light-border);
-  &:hover {
-    color: #fff;
-    background-color: #b62324;
-    border-color: #ffffff1a;
-  }
-}
-
-.ui.button.branch-dropdown-button {
-  padding: 3px 12px;
-  min-height: 30px;
-}
-
-.ui.menu button.item:hover {
-  color: var(--color-text);
-  background: var(--color-hover);
-  border-radius: 0;
-}
-
-// 设置界面
-.user-main-content,
-.repo-setting-content,
-.user-setting-content,
-.org-setting-content {
-  .ui.primary.button {
-    color: #f0f6fc;
-    background-color: var(--color-button);
-    border-color: var(--color-light-border);
-    &:hover {
-      background-color: #262c36;
-    }
-  }
-}
-
-%button-tiny-style {
-  color: #39d353;
-  background-color: var(--color-button);
-  border-color: var(--color-light-border);
-  &:hover {
-    color: #fff;
-    background-color: #29903b;
-    border-color: #ffffff1a;
-  }
-}
-
-.user-main-content,
-.repo-setting-content,
-.user-setting-content,
-.org-setting-content {
-  .ui.primary.button.tiny {
-    @extend %button-tiny-style;
-  }
-}
-
-.admin-setting-content .ui.primary.button {
-  @extend %button-tiny-style;
-}
-
-.user-main-content,
-.repo-setting-content,
-.user-setting-content,
-.org-setting-content,
-.admin-setting-content {
-  .ui.right {
-    .ui.primary.button.tiny {
-      color: #fff;
-      background-color: #238636;
-      &:hover {
-        background-color: #29903b;
-        border-color: var(--color-light-border);
-      }
-    }
-  }
-}
-
-// 工单侧边栏
-.ui.fluid.ui.button,
-.ui.button.branch-dropdown-button,
-.ui.ui.icon.button,
-.ui.two.wide.button {
-  background-color: var(--color-button);
-  &:hover {
-    color: #fff;
-    background-color: #262c36;
-  }
-}
-
-// 关闭工单按钮
-.ui.red.basic.button#status-button {
-  color: #ab7df8;
-  border-color: var(--color-light-border);
-  background-color: var(--color-button);
-  &:hover {
-    color: #fff;
-    border-color: #ffffff1a;
-    background-color: var(--color-purple);
-  }
-}
-
-// 重新开启按钮
-.ui.basic.primary.button#status-button {
-  color: #39d353;
-  background-color: var(--color-button);
-  border-color: var(--color-light-border);
-  &:hover {
-    color: #44ff61;
-    background: var(--color-hover);
-  }
-}

styles/public/button.tsx

@@ -0,0 +1,70 @@
+import { css, themeVars } from "src/types/vars";
+
+export const primaryStyle = {
+  color: themeVars.github.button.primary.fgColor.rest,
+  backgroundColor: themeVars.github.button.primary.bgColor.rest,
+  borderColor: themeVars.github.button.primary.borderColor.rest,
+};
+
+export const primaryHoverStyle = {
+  color: themeVars.github.button.primary.fgColor.rest,
+  backgroundColor: themeVars.github.button.primary.bgColor.hover,
+  borderColor: themeVars.github.button.primary.borderColor.hover,
+};
+
+// 普通按钮和主色调按钮
+export const baseButton = css`
+  .ui.button {
+    min-height: 30px;
+    font-weight: 500;
+    padding: 9px 16px;
+  }
+
+  .ui.primary.button {
+    ${primaryStyle}
+    &:hover {
+      ${primaryHoverStyle}
+    }
+  }
+  /* 普通按钮边框色不变 */
+  .ui.basic.button:hover,
+  /* 仓库点星等数字标签按钮边框色不变 */
+  .ui.labeled.button > .label:hover {
+    border-color: ${themeVars.color.light.border};
+  }
+  /* 普通按钮激活时背景色 */
+  .ui.basic.buttons .button:active,
+  .ui.basic.button:active,
+  .ui.basic.buttons .active.button,
+  .ui.basic.active.button,
+  .ui.basic.buttons .active.button:hover,
+  .ui.basic.active.button:hover {
+    background-color: ${themeVars.github.button.default.bgColor.active};
+  }
+`;
+
+// 红色按钮
+export const redButton = css`
+  .ui.red.button,
+  .ui.basic.red.buttons .button,
+  .ui.basic.red.button {
+    color: ${themeVars.github.button.danger.fgColor.rest};
+    background-color: ${themeVars.github.button.danger.bgColor.rest};
+    /* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
+    border-color: ${themeVars.color.light.border};
+
+    &:hover {
+      color: ${themeVars.github.button.danger.fgColor.hover};
+      background-color: ${themeVars.github.button.danger.bgColor.hover};
+      border-color: ${themeVars.github.button.danger.borderColor.hover};
+    }
+  }
+`;
+
+// 分支菜单按钮
+export const branchDropdownButton = css`
+  .ui.button.branch-dropdown-button {
+    padding: 3px 12px;
+    min-height: 30px;
+  }
+`;

styles/public/index.tsx

@@ -1,4 +1,2 @@
-// organize-imports-ignore
+import "./button";
-// tslint:disable:ordered-imports
-// 组件导入有顺序, 禁止插件优化
 import "./chroma";

themes/dark.css.tsx

@@ -56,6 +56,28 @@ const github: GithubColor = {
   borderColor: {
     default: "#3d444d",
     muted: "#3d444db3",
+    translucent: "#ffffff26",
+  },
+  button: {
+    primary: {
+      fgColor: {
+        accent: "#39d353",
+        rest: "#ffffff",
+      },
+      bgColor: {
+        rest: "#238636",
+        hover: "#29903b",
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: "#fa5e55",
+        hover: "#ffffff",
+      },
+      bgColor: {
+        hover: "#b62324",
+      },
+    },
   },
   control: {
     bgColor: {