Add high contrast color themes.

.github/workflows/release.yml

@@ -25,11 +25,13 @@ jobs:
 
           tar -zcf dist/theme-github-colorblind-protanopia-deuteranopia.tar.gz dist/theme-github-colorblind-*.css
           tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz dist/theme-github-tritanopia-*.css
+          tar -zcf dist/theme-github-high-contrast.tar.gz dist/theme-github-high-contrast-*.css
 
           tar -zcf dist/theme-github-extra-pink.tar.gz dist/theme-github-pink-*.css
           tar -zcf dist/theme-github-extra-gitea.tar.gz dist/theme-github-gitea-*.css
           tar -zcf dist/theme-github-extra-catppuccin.tar.gz dist/theme-github-catppuccin-*.css
 
+
           tar -zcf dist/theme-github.tar.gz --remove-files dist/theme-github-*.css
 
           tar -zcf dist/theme-github-templates.tar.gz templates

CHANGELOG.md

@@ -1,3 +1,7 @@
+### ✨ Feature
+
+- Add high contrast color themes.
+
 ### 🌈 Style
 
 - Optimize catppuccin theme with regular label colors.
@@ -7,3 +11,8 @@
 #### More GitHub-like style
 
 - Fine tune the heatmap colors of catppuccin theme and pink soft dark theme.
+- Optimize heat map style.
+
+### 🐞 Fix
+
+- Fix the missing highlight style when hovering the heatmap mouse.

package.json

@@ -23,7 +23,7 @@
     "@catppuccin/palette": "^1.8.0",
     "@eslint/js": "^10.0.1",
     "@linaria/core": "^7.0.0",
-    "@primer/primitives": "^11.9.0",
+    "@primer/primitives": "11.9.0",
     "@types/node": "^25.5.2",
     "@typescript/native-preview": "^7.0.0-dev.20260509.2",
     "@vanilla-extract/css": "^1.20.1",

src/index.ts

@@ -26,9 +26,9 @@ export {
   catppuccin2ThemeColor,
   display2GitHubColor,
   github2ThemeColor,
+  primer,
   primer2GitHubColor,
   primer2GitHubSyntax,
-  primer,
 } from "./palette";
 export type { DisplayColor, GitHubColor, GitHubSyntax, GiteaColor, ThemeColor } from "./palette";
 export { createThemeMetaInfo } from "./styles";

src/palette/primer.ts

@@ -257,20 +257,34 @@ export function primer2GitHubSyntax(primerTokens: PrimerTokens): GitHubSyntax {
   return { prettyLights, codeMirror };
 }
 
+import darkColorblindHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json" with { type: "json" };
 import darkColorblind from "@primer/primitives/dist/styleLint/functional/themes/dark-colorblind.json" with { type: "json" };
+import darkDimmedHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json" with { type: "json" };
 import darkDimmed from "@primer/primitives/dist/styleLint/functional/themes/dark-dimmed.json" with { type: "json" };
+import darkHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-high-contrast.json" with { type: "json" };
+import darkTritanopiaHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json" with { type: "json" };
 import darkTritanopia from "@primer/primitives/dist/styleLint/functional/themes/dark-tritanopia.json" with { type: "json" };
 import dark from "@primer/primitives/dist/styleLint/functional/themes/dark.json" with { type: "json" };
+import lightColorblindHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-colorblind-high-contrast.json" with { type: "json" };
 import lightColorblind from "@primer/primitives/dist/styleLint/functional/themes/light-colorblind.json" with { type: "json" };
+import lightHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-high-contrast.json" with { type: "json" };
+import lightTritanopiaHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json" with { type: "json" };
 import lightTritanopia from "@primer/primitives/dist/styleLint/functional/themes/light-tritanopia.json" with { type: "json" };
 import light from "@primer/primitives/dist/styleLint/functional/themes/light.json" with { type: "json" };
 
 export default {
   dark,
   darkColorblind,
-  darkDimmed,
   darkTritanopia,
+  darkDimmed,
   light,
   lightColorblind,
   lightTritanopia,
+  darkHighContrast,
+  darkColorblindHighContrast,
+  darkTritanopiaHighContrast,
+  darkDimmedHighContrast,
+  lightHighContrast,
+  lightColorblindHighContrast,
+  lightTritanopiaHighContrast,
 };

styles/components/heatmap.ts

@@ -46,40 +46,38 @@ export const heatmap = css`
         /* 圆角 */
         rx: 2.5px;
         ry: 2.5px;
-        /* hover 时的圆角 */
-        border-radius: 0.75px;
+        /* 边框圆角 */
+        border-radius: 1px;
         /* 宽度和高度可以用来控制间隔 */
-        width: 9px;
-        height: 9px;
+        width: 9.5px;
+        height: 9.5px;
         /* 边框 */
         outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
         /* 边框向内偏移 */
         outline-offset: -0.5px;
 
+        &:hover {
+          outline: 0.5px solid ${themeVars.color.text.self} !important;
+        }
         &[style="fill: var(--color-secondary-alpha-60);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
         }
-
         &[style="fill: var(--color-primary-light-4);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
           outline-color: ${themeVars.github.contribution.default.borderColor.num1};
         }
-
         &[style="fill: var(--color-primary-light-2);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
           outline-color: ${themeVars.github.contribution.default.borderColor.num2};
         }
-
         &[style="fill: var(--color-primary);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
           outline-color: ${themeVars.github.contribution.default.borderColor.num3};
         }
-
         &[style="fill: var(--color-primary-dark-2);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
           outline-color: ${themeVars.github.contribution.default.borderColor.num4};
         }
-
         &[style="fill: var(--color-primary-dark-4);"] {
           fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
           outline-color: ${themeVars.github.contribution.default.borderColor.num5};

theme.config.ts

@@ -85,4 +85,44 @@ export default defineThemeConfig([
       macchiato: { theme: themes.catppuccin.macchiato },
     },
   },
+  {
+    themeSeriesName: "high-contrast",
+    themes: {
+      dark: { theme: themes.github.highContrast.dark },
+      light: { theme: themes.github.highContrast.light },
+      "soft-dark": { theme: themes.github.highContrast.softDark },
+    },
+  },
+  {
+    themeSeriesName: "high-contrast-colorblind",
+    autoTheme: { displayName: "High Contrast Auto Protanopia And Deuteranopia", colorblindType: "red-green" },
+    themes: {
+      dark: {
+        displayName: "High Contrast Dark Protanopia And Deuteranopia",
+        colorblindType: "red-green",
+        theme: themes.github.highContrast.colorblind.dark,
+      },
+      light: {
+        displayName: "High Contrast Light Protanopia And Deuteranopia",
+        colorblindType: "red-green",
+        theme: themes.github.highContrast.colorblind.light,
+      },
+    },
+  },
+  {
+    themeSeriesName: "high-contrast-tritanopia",
+    autoTheme: { displayName: "High Contrast Auto Tritanopia", colorblindType: "blue-yellow" },
+    themes: {
+      dark: {
+        displayName: "High Contrast Dark Tritanopia",
+        colorblindType: "blue-yellow",
+        theme: themes.github.highContrast.tritanopia.dark,
+      },
+      light: {
+        displayName: "High Contrast Light Tritanopia",
+        colorblindType: "blue-yellow",
+        theme: themes.github.highContrast.tritanopia.light,
+      },
+    },
+  },
 ]);

themes/github.ts

@@ -21,31 +21,55 @@
  * @author lutinglt
  */
 
-import type { GitHubColor, GitHubSyntax } from "src";
+import type { GitHubColor } from "src";
 import { defineTheme, primer, primer2GitHubColor, primer2GitHubSyntax } from "src";
+/** - 仅适用于 Dark 主题
+ * - 不同步 GitHub 样式, 对调 --controlKnob-bgColor-rest 和 --controlTrack-bgColor-rest 的颜色
+ * - 激活颜色与背景色更一致, 在仪表板仓库/组织切换按钮中与菜单颜色一致
+ */
+function swapKnobAndTrackBgColor(color: GitHubColor): GitHubColor {
+  return {
+    ...color,
+    controlKnob: { bgColor: { rest: color.controlTrack.bgColor.rest } },
+    controlTrack: { bgColor: { rest: color.controlKnob.bgColor.rest } },
+  };
+}
 
-const rawDarkColor = primer2GitHubColor(primer.dark, true);
-export const githubDarkColor: GitHubColor = {
-  ...rawDarkColor,
-  // 不同步 GitHub 样式, 对调 --controlKnob-bgColor-rest 和 --controlTrack-bgColor-rest 的颜色
-  // 激活颜色与背景色更一致, 在仪表板仓库/组织切换按钮中与菜单颜色一致
-  controlKnob: { bgColor: { rest: rawDarkColor.controlTrack.bgColor.rest } },
-  controlTrack: { bgColor: { rest: rawDarkColor.controlKnob.bgColor.rest } },
-};
-export const githubSoftDarkColor: GitHubColor = primer2GitHubColor(primer.darkDimmed, true);
-export const githubColorblindDarkColor: GitHubColor = primer2GitHubColor(primer.darkColorblind, true);
-export const githubTritanopiaDarkColor: GitHubColor = primer2GitHubColor(primer.darkTritanopia, true);
-export const githubLightColor: GitHubColor = primer2GitHubColor(primer.light);
-export const githubColorblindLightColor: GitHubColor = primer2GitHubColor(primer.lightColorblind);
-export const githubTritanopiaLightColor: GitHubColor = primer2GitHubColor(primer.lightTritanopia);
+export const githubDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.dark, true));
+export const githubColorblindDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkColorblind, true));
+export const githubTritanopiaDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkTritanopia, true));
+export const githubSoftDarkColor = primer2GitHubColor(primer.darkDimmed, true);
+export const githubLightColor = primer2GitHubColor(primer.light);
+export const githubColorblindLightColor = primer2GitHubColor(primer.lightColorblind);
+export const githubTritanopiaLightColor = primer2GitHubColor(primer.lightTritanopia);
 
-export const githubDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.dark);
-export const githubSoftDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkDimmed);
-export const githubColorblindDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkColorblind);
-export const githubTritanopiaDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkTritanopia);
-export const githubLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.light);
-export const githubColorblindLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.lightColorblind);
-export const githubTritanopiaLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.lightTritanopia);
+export const githubDarkHighContrastColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkHighContrast, true));
+export const githubDarkColorblindHighContrastColor = swapKnobAndTrackBgColor(
+  primer2GitHubColor(primer.darkColorblindHighContrast, true)
+);
+export const githubDarkTritanopiaHighContrastColor = swapKnobAndTrackBgColor(
+  primer2GitHubColor(primer.darkTritanopiaHighContrast, true)
+);
+export const githubSoftDarkHighContrastColor = primer2GitHubColor(primer.darkDimmedHighContrast, true);
+export const githubLightHighContrastColor = primer2GitHubColor(primer.lightHighContrast);
+export const githubLightColorblindHighContrastColor = primer2GitHubColor(primer.lightColorblindHighContrast);
+export const githubLightTritanopiaHighContrastColor = primer2GitHubColor(primer.lightTritanopiaHighContrast);
+
+export const githubDarkSyntax = primer2GitHubSyntax(primer.dark);
+export const githubSoftDarkSyntax = primer2GitHubSyntax(primer.darkDimmed);
+export const githubColorblindDarkSyntax = primer2GitHubSyntax(primer.darkColorblind);
+export const githubTritanopiaDarkSyntax = primer2GitHubSyntax(primer.darkTritanopia);
+export const githubLightSyntax = primer2GitHubSyntax(primer.light);
+export const githubColorblindLightSyntax = primer2GitHubSyntax(primer.lightColorblind);
+export const githubTritanopiaLightSyntax = primer2GitHubSyntax(primer.lightTritanopia);
+
+export const githubDarkHighContrastSyntax = primer2GitHubSyntax(primer.darkHighContrast);
+export const githubDarkColorblindHighContrastSyntax = primer2GitHubSyntax(primer.darkColorblindHighContrast);
+export const githubDarkTritanopiaHighContrastSyntax = primer2GitHubSyntax(primer.darkTritanopiaHighContrast);
+export const githubSoftDarkHighContrastSyntax = primer2GitHubSyntax(primer.darkDimmedHighContrast);
+export const githubLightHighContrastSyntax = primer2GitHubSyntax(primer.lightHighContrast);
+export const githubLightColorblindHighContrastSyntax = primer2GitHubSyntax(primer.lightColorblindHighContrast);
+export const githubLightTritanopiaHighContrastSyntax = primer2GitHubSyntax(primer.lightTritanopiaHighContrast);
 
 export const githubDarkTheme = defineTheme({
   colorType: "github",
@@ -83,6 +107,42 @@ export const githubTritanopiaLightTheme = defineTheme({
   syntaxColor: githubTritanopiaLightSyntax,
 });
 
+export const githubDarkHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubDarkHighContrastColor,
+  syntaxColor: githubDarkHighContrastSyntax,
+});
+export const githubDarkColorblindHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubDarkColorblindHighContrastColor,
+  syntaxColor: githubDarkColorblindHighContrastSyntax,
+});
+export const githubDarkTritanopiaHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubDarkTritanopiaHighContrastColor,
+  syntaxColor: githubDarkTritanopiaHighContrastSyntax,
+});
+export const githubSoftDarkHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubSoftDarkHighContrastColor,
+  syntaxColor: githubSoftDarkHighContrastSyntax,
+});
+export const githubLightHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubLightHighContrastColor,
+  syntaxColor: githubLightHighContrastSyntax,
+});
+export const githubLightColorblindHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubLightColorblindHighContrastColor,
+  syntaxColor: githubLightColorblindHighContrastSyntax,
+});
+export const githubLightTritanopiaHighContrastTheme = defineTheme({
+  colorType: "github",
+  themeColor: githubLightTritanopiaHighContrastColor,
+  syntaxColor: githubLightTritanopiaHighContrastSyntax,
+});
+
 export default {
   githubDarkTheme,
   githubSoftDarkTheme,
@@ -91,4 +151,11 @@ export default {
   githubLightTheme,
   githubColorblindLightTheme,
   githubTritanopiaLightTheme,
+  githubDarkHighContrastTheme,
+  githubDarkColorblindHighContrastTheme,
+  githubDarkTritanopiaHighContrastTheme,
+  githubSoftDarkHighContrastTheme,
+  githubLightHighContrastTheme,
+  githubLightColorblindHighContrastTheme,
+  githubLightTritanopiaHighContrastTheme,
 };

themes/index.ts

@@ -41,6 +41,19 @@ export default {
       light: githubPink.githubPinkLightTheme,
       softDark: githubPink.githubPinkSoftDarkTheme,
     },
+    highContrast: {
+      dark: github.githubDarkHighContrastTheme,
+      light: github.githubLightHighContrastTheme,
+      softDark: github.githubSoftDarkHighContrastTheme,
+      colorblind: {
+        dark: github.githubDarkColorblindHighContrastTheme,
+        light: github.githubLightColorblindHighContrastTheme,
+      },
+      tritanopia: {
+        dark: github.githubDarkTritanopiaHighContrastTheme,
+        light: github.githubLightTritanopiaHighContrastTheme,
+      },
+    },
   },
   gitea: {
     dark: giteaDarkTheme,