支持猛男粉颜色主题

.github/release.md

@@ -12,6 +12,7 @@ determined.
 
 ### ✨ Feature
 
+- 支持猛男粉颜色主题
 - 修改外观设置中显示的主题名称
 
 #### CSS 变量

.github/workflows/release.yml

@@ -19,9 +19,19 @@ jobs:
         run: |
           export TZ=Asia/Shanghai
           TAG="v$(npm run -s version)"
-          tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
+
-          tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
+          tar -zcf dist/theme-github-base.tar.gz --remove-files \
-          tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
+          dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
+
+          tar -zcf dist/theme-github-colorblind.tar.gz --remove-files \
+          dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
+
+          tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files \
+          dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
+
+          tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \
+          dist/theme-github-extra-pink-auto.css dist/theme-github-extra-pink-light.css dist/theme-github-extra-pink-dark.css dist/theme-github-extra-pink-soft-dark.css
+
           gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
         env:
           GH_TOKEN: ${{ github.token }}

src/core/display.ts

@@ -0,0 +1,77 @@
+import { type GithubColor } from "./github";
+
+export type DisplayColor = {
+  num0: string;
+  num1: string;
+  num2: string;
+  num3: string;
+  num4: string;
+  num5: string;
+  num6: string;
+  num7: string;
+  num8: string;
+  num9: string;
+};
+
+export function display2GithubColor(
+  displayColor: DisplayColor,
+  baseGithubColor: GithubColor,
+  soft?: boolean
+): GithubColor {
+  return {
+    ...baseGithubColor,
+    fgColor: {
+      ...baseGithubColor.fgColor,
+      accent: soft ? displayColor.num7 : displayColor.num6,
+    },
+    bgColor: {
+      ...baseGithubColor.bgColor,
+      accent: {
+        emphasis: displayColor.num5,
+        muted: soft ? displayColor.num1 : displayColor.num0,
+      },
+    },
+    borderColor: {
+      ...baseGithubColor.borderColor,
+      accent: {
+        emphasis: soft ? displayColor.num6 : displayColor.num5,
+      },
+    },
+    button: {
+      ...baseGithubColor.button,
+      primary: {
+        ...baseGithubColor.button.primary,
+        fgColor: {
+          ...baseGithubColor.button.primary.fgColor,
+          accent: soft ? displayColor.num6 : displayColor.num5,
+        },
+        bgColor: {
+          ...baseGithubColor.button.primary.bgColor,
+          rest: displayColor.num5,
+          hover: displayColor.num4,
+        },
+      },
+      star: {
+        iconColor: soft ? displayColor.num6 : displayColor.num5,
+      },
+    },
+    underlineNav: {
+      borderColor: {
+        active: soft ? displayColor.num6 : displayColor.num5,
+      },
+    },
+    contribution: {
+      ...baseGithubColor.contribution,
+      default: {
+        ...baseGithubColor.contribution.default,
+        bgColor: {
+          num0: baseGithubColor.contribution.default.bgColor.num0,
+          num1: soft ? displayColor.num2 : displayColor.num1,
+          num2: soft ? displayColor.num3 : displayColor.num2,
+          num3: soft ? displayColor.num5 : displayColor.num4,
+          num4: soft ? displayColor.num7 : displayColor.num6,
+        },
+      },
+    },
+  };
+}

src/core/github.ts

@@ -8,6 +8,7 @@ import { type ThemeColor } from "./color";
 export type GithubColor = {
   isDarkTheme: boolean;
   display: {
+    blue: { fgColor: string };
     brown: { fgColor: string };
     cyan: { fgColor: string };
     indigo: { fgColor: string };
@@ -60,7 +61,7 @@ export type GithubColor = {
     translucent: string;
   };
   button: {
-    primary: { fgColor: { rest: string }; bgColor: { hover: string } };
+    primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } };
     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
     star: { iconColor: string };
   };
@@ -259,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       },
       primary: {
         fgColor: {
-          accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)),
+          accent: saturate(
+            0.1,
+            scaleColorLight(githubColor.button.primary.fgColor.accent, githubColor.isDarkTheme ? 10 : -10)
+          ),
           rest: githubColor.button.primary.fgColor.rest,
         },
         bgColor: {
-          rest: themeVars.github.bgColor.success.emphasis,
+          rest: githubColor.button.primary.bgColor.rest,
           hover: githubColor.button.primary.bgColor.hover,
         },
         borderColor: {
@@ -348,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       green: githubColor.fgColor.success,
       cyan: githubColor.display.cyan.fgColor,
       teal: githubColor.display.teal.fgColor,
-      blue: githubColor.fgColor.accent,
+      blue: githubColor.display.blue.fgColor,
       violet: githubColor.display.indigo.fgColor,
       purple: githubColor.fgColor.done,
       pink: githubColor.fgColor.sponsors,

src/types/color/github.ts

@@ -25,7 +25,6 @@ export const github = {
     accent: {
       /** 强调色
        * @diff 折叠/展开按钮的悬停颜色
-       * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        * @navbar `navbarRight` 头像管理员标识背景颜色
        * @dropdown `dropdown` emoji 的悬停背景色
@@ -61,6 +60,7 @@ export const github = {
        * @input `input` 输入框被选中时的边框颜色
        * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
+       * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
        * @notification `notification` 通知列表悬停时的左边框颜色

styles/components/actions.ts

@@ -180,7 +180,7 @@ export const actionViewLeft = css`
 
           &:after {
             overflow: visible;
-            background: ${themeVars.github.bgColor.accent.emphasis};
+            background: ${themeVars.github.borderColor.accent.emphasis};
             border-radius: ${otherThemeVars.border.radius};
             content: "";
             height: 24px;

themes/colorblind-dark.css.ts

@@ -1,4 +1,4 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { darkGithubColors } from "themes/dark";
@@ -28,7 +28,10 @@ export const colorblindDarkGithubColors: GithubColor = {
     success: { emphasis: "#1f6feb" },
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
+    primary: {
+      fgColor: { accent: "#58a6ff", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#2a7aef" },
+    },
     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
     star: darkGithubColors.button.star,
   },
@@ -69,7 +72,7 @@ export const colorblindDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
+export const colorblindDarkColors = github2ThemeColor(colorblindDarkGithubColors);
 export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
 
 export default defineTheme(colorblindDarkColors, colorblindDarkChroma);

themes/colorblind-light.css.ts

@@ -1,4 +1,4 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { lightGithubColors } from "themes/light";
@@ -28,7 +28,10 @@ export const colorblindLightGithubColors: GithubColor = {
     success: { emphasis: "#0969da" },
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
+    primary: {
+      fgColor: { accent: "#0969da", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#0864d1" },
+    },
     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
     star: lightGithubColors.button.star,
   },
@@ -69,7 +72,7 @@ export const colorblindLightPrettylights: prettylightsColor = {
   },
 };
 
-export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
+export const colorblindLightColors = github2ThemeColor(colorblindLightGithubColors);
 export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
 
 export default defineTheme(colorblindLightColors, colorblindLightChroma);

themes/dark.css.ts

@@ -1,9 +1,10 @@
-import { defineTheme, type ThemeColor } from "src";
+import { defineTheme, themeVars } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 
 export const darkGithubColors: GithubColor = {
   isDarkTheme: true,
   display: {
+    blue: { fgColor: "#4493f8" },
     brown: { fgColor: "#b69a6d" },
     cyan: { fgColor: "#07ace4" },
     indigo: { fgColor: "#9899ec" },
@@ -56,7 +57,10 @@ export const darkGithubColors: GithubColor = {
     translucent: "#ffffff26",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
+    primary: {
+      fgColor: { accent: "#3fb950", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" },
+    },
     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
     star: { iconColor: "#e3b341" },
   },
@@ -75,6 +79,6 @@ export const darkGithubColors: GithubColor = {
   },
 };
 
-export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
+export const darkColors = github2ThemeColor(darkGithubColors);
 
 export default defineTheme(darkColors);

themes/light.css.ts

@@ -1,9 +1,10 @@
-import { defineTheme, type ThemeColor } from "src";
+import { defineTheme, themeVars } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 
 export const lightGithubColors: GithubColor = {
   isDarkTheme: false,
   display: {
+    blue: { fgColor: "#0969da" },
     brown: { fgColor: "#755f43" },
     cyan: { fgColor: "#006a80" },
     indigo: { fgColor: "#494edf" },
@@ -56,7 +57,10 @@ export const lightGithubColors: GithubColor = {
     translucent: "#1f232826",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
+    primary: {
+      fgColor: { accent: "#1a7f37", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" },
+    },
     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
     star: { iconColor: "#eac54f" },
   },
@@ -75,6 +79,6 @@ export const lightGithubColors: GithubColor = {
   },
 };
 
-export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
+export const lightColors = github2ThemeColor(lightGithubColors);
 
 export default defineTheme(lightColors);

themes/pink-dark.css.ts

@@ -0,0 +1,22 @@
+import { defineTheme } from "src";
+import { display2GithubColor, type DisplayColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { darkGithubColors } from "themes/dark";
+
+export const pinkDarkDisplayColors: DisplayColor = {
+  num0: "#2d1524",
+  num1: "#451c35",
+  num2: "#65244a",
+  num3: "#842a5d",
+  num4: "#ac2f74",
+  num5: "#d34591",
+  num6: "#e57bb2",
+  num7: "#ec8dbd",
+  num8: "#f4a9cd",
+  num9: "#f9bed9",
+};
+
+export const pinkDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, darkGithubColors);
+export const pinkDarkColors = github2ThemeColor(pinkDarkGithubColors);
+
+export default defineTheme(pinkDarkColors);

themes/pink-light.css.ts

@@ -0,0 +1,22 @@
+import { defineTheme } from "src";
+import { display2GithubColor, type DisplayColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { lightGithubColors } from "themes/light";
+
+export const pinkLightDisplayColors: DisplayColor = {
+  num0: "#ffe5f1",
+  num1: "#fdc9e2",
+  num2: "#f8a5cf",
+  num3: "#f184bc",
+  num4: "#e55da5",
+  num5: "#ce2c85",
+  num6: "#b12f79",
+  num7: "#8e2e66",
+  num8: "#6e2b53",
+  num9: "#4d233d",
+};
+
+export const pinkLightGithubColors = display2GithubColor(pinkLightDisplayColors, lightGithubColors);
+export const pinkLightColors = github2ThemeColor(pinkLightGithubColors);
+
+export default defineTheme(pinkLightColors);

themes/pink-soft-dark.css.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "src";
+import { display2GithubColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { softDarkGithubColors } from "themes/soft-dark";
+import { pinkDarkDisplayColors } from "./pink-dark.css";
+
+export const pinkSoftDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, softDarkGithubColors, true);
+export const pinkSoftDarkColors = github2ThemeColor(pinkSoftDarkGithubColors);
+
+export default defineTheme(pinkSoftDarkColors);

themes/soft-dark.css.ts

@@ -1,4 +1,4 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { darkGithubColors } from "themes/dark";
@@ -51,7 +51,10 @@ export const softDarkGithubColors: GithubColor = {
     translucent: "#cdd9e526",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
+    primary: {
+      fgColor: { accent: "#57ab5a", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" },
+    },
     danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
     star: { iconColor: "#daaa3f" },
   },
@@ -100,7 +103,7 @@ export const softDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
+export const softDarkColors = github2ThemeColor(softDarkGithubColors);
 export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
 
 export default defineTheme(softDarkColors, softDarkChroma);

themes/tritanopia-dark.css.ts

@@ -1,4 +1,4 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { defineTheme, type Chroma } from "src";
 import { darkPrettylights } from "src/core/chroma";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
@@ -39,7 +39,7 @@ export const tritanopiaDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
+export const tritanopiaDarkColors = github2ThemeColor(tritanopiaDarkGithubColors);
 export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
 
 export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);

themes/tritanopia-light.css.ts

@@ -1,4 +1,4 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+import { defineTheme, type Chroma } from "src";
 import { lightPrettylights } from "src/core/chroma";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
@@ -39,7 +39,7 @@ export const tritanopiaLightPrettylights: prettylightsColor = {
   },
 };
 
-export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
+export const tritanopiaLightColors = github2ThemeColor(tritanopiaLightGithubColors);
 export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
 
 export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);