Synchronize styles under high contrast themes.

CHANGELOG.md

@@ -1,6 +1,8 @@
 ### ✨ Feature
 
 - Add high contrast color themes.
+- Add default to the basic default theme display name to sort it together when there are many themes in the list.
+  `GitHub Dark` -> `GitHub Default Dark`
 
 ### 🌈 Style
 
@@ -12,7 +14,9 @@
 
 - Fine tune the heatmap colors of catppuccin theme and pink soft dark theme.
 - Optimize heat map style.
+- Synchronize styles under high contrast themes.
 
 ### 🐞 Fix
 
 - Fix the missing highlight style when hovering the heatmap mouse.
+- Fix the last commit avatar on the repo homepage being blocked.

package.json

@@ -46,7 +46,7 @@
     "typescript-plugin-css-modules": "^5.2.0",
     "undici": "^7.0.0",
     "vite": "^8.0.5",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.7"
   },
   "prettier": {
     "printWidth": 120,

src/palette/catppuccin.ts

@@ -209,6 +209,7 @@ export function catppuccin2ThemeColor(flavor: CatppuccinFlavor): ThemeColor {
       bgColor: { rest: themeVars.color.timeline },
       transparent: {
         bgColor: { hover: rgba(flavor.colors.surface2.hex, 0.2), active: rgba(flavor.colors.overlay0.hex, 0.5) },
+        borderColor: { active: "#0000" },
       },
       danger: { bgColor: { active: rgba(flavor.colors.red.hex, 0.3) } },
     },
@@ -246,6 +247,9 @@ export function catppuccin2ThemeColor(flavor: CatppuccinFlavor): ThemeColor {
       },
     },
     workflowCardBg: flavor.colors.surface0.hex,
+    counter: { borderColor: "#0000" },
+    progressBar: { track: { bgColor: "#0000", borderColor: "#0000" } },
+    topicTag: { borderColor: "#0000" },
     themeExtra: {
       button: { primary: { fgColor: { accent: flavor.colors.green.hex } } },
       contribution: {

src/palette/gitea.ts

@@ -101,6 +101,7 @@ export function gitea2ThemeVars(giteaColor: GiteaColor): ThemeVars {
       bgColor: { rest: giteaColor.other.timeline },
       transparent: {
         bgColor: { hover: giteaColor.other.hover.self, active: giteaColor.other.active },
+        borderColor: { active: "#0000" },
       },
       danger: {
         bgColor: {
@@ -142,6 +143,9 @@ export function gitea2ThemeVars(giteaColor: GiteaColor): ThemeVars {
       },
     },
     workflowCardBg: giteaColor.other.button,
+    counter: { borderColor: "#0000" },
+    progressBar: { track: { bgColor: "#0000", borderColor: "#0000" } },
+    topicTag: { borderColor: "#0000" },
     themeExtra: {
       button: {
         primary: {

src/palette/github.ts

@@ -103,7 +103,7 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
     projectColumnBg: githubColor.bgColor.inset,
     caret: themeVars.color.text.dark,
     reaction: { bg: "initial", hoverBg: githubColor.bgColor.accent.muted, activeBg: githubColor.bgColor.accent.muted },
-    tooltip: { text: githubColor.fgColor.onEmphasis, bg: githubColor.bgColor.emphasis },
+    tooltip: { text: githubColor.tooltip.fgColor, bg: githubColor.tooltip.bgColor },
     nav: {
       bg: githubColor.bgColor.inset,
       hoverBg: githubColor.control.transparent.bgColor.hover,
@@ -124,7 +124,6 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
     transparency: { grid: { light: "#ffffff", dark: "#e5e5e5" } },
     workflowEdgeHover: githubColor.bgColor.accent.emphasis,
   };
-
   const github: GitHub = {
     avatar: { bgColor: githubColor.avatar.bgColor, borderColor: githubColor.avatar.borderColor },
     fgColor: {
@@ -149,7 +148,7 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
       emphasis: githubColor.borderColor.emphasis,
     },
     button: {
-      default: { bgColor: { active: githubColor.control.bgColor.active } },
+      default: { bgColor: { active: githubColor.button.default.bgColor.active } },
       primary: {
         fgColor: {
           rest: githubColor.button.primary.fgColor.rest,
@@ -159,16 +158,19 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
           hover: githubColor.button.primary.bgColor.hover,
           active: githubColor.button.primary.bgColor.active,
         },
-        borderColor: { rest: githubColor.borderColor.translucent, hover: githubColor.borderColor.translucent },
+        borderColor: {
+          rest: githubColor.button.primary.borderColor.rest,
+          hover: githubColor.button.primary.borderColor.hover,
+        },
       },
       danger: {
         fgColor: { rest: githubColor.button.danger.fgColor.rest, hover: githubColor.button.danger.fgColor.hover },
         bgColor: {
-          rest: githubColor.control.bgColor.rest,
+          rest: githubColor.button.danger.bgColor.rest,
           hover: githubColor.button.danger.bgColor.hover,
           active: githubColor.button.danger.bgColor.active,
         },
-        borderColor: { hover: githubColor.borderColor.translucent },
+        borderColor: { hover: githubColor.button.danger.borderColor.hover },
       },
       star: { iconColor: githubColor.button.star.iconColor },
       invisible: { iconColor: { rest: githubColor.button.invisible.iconColor.rest } },
@@ -180,6 +182,7 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
           hover: githubColor.control.transparent.bgColor.hover,
           active: githubColor.control.transparent.bgColor.active,
         },
+        borderColor: { active: githubColor.control.transparent.borderColor.active },
       },
       danger: { bgColor: { active: githubColor.control.danger.bgColor.active } },
     },
@@ -196,6 +199,16 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
         medium: `drop-shadow(0 1px 1px ${githubColor.shadow.floating.small}) drop-shadow(0 3px 6px ${githubColor.shadow.resting.medium})`,
       },
     },
+    counter: {
+      borderColor: githubColor.counter.borderColor,
+    },
+    progressBar: {
+      track: {
+        bgColor: githubColor.progressBar.track.bgColor,
+        borderColor: githubColor.progressBar.track.borderColor,
+      },
+    },
+    topicTag: { borderColor: githubColor.topicTag.borderColor },
     underlineNav: { borderColor: { active: githubColor.underlineNav.borderColor.active } },
     contribution: {
       default: {

src/types/color/github.ts

@@ -265,6 +265,19 @@ export const github = {
          */
         active: null,
       },
+      borderColor: {
+        /** 激活色, 默认 #0000, 高对比度专属色
+         * @dropdown `dropdown` 下拉框子项悬停时的边框色
+         * @sha_label `shaLabel` 提交 SHA 标签悬停时的边框色
+         * @commit `commit` 提交信息的 Action 按钮的悬停边框色
+         * @repo_files `fileSearch` 文件搜索框子项的悬停边框色 `repoFiles` README 右侧操作悬停边框色
+         * @clone `clone` 克隆按钮和面板操作列表的悬停边框色
+         * @templates @commit_sign_badge `commitSignBadge` SHA 标签悬停时的边框色
+         * @templates @commits_list `commitsList` 提交操作按钮悬停时的边框色
+         * @templates @view_list `repoFileLastCommit` 提交历史按钮悬停时的边框色
+         */
+        active: null,
+      },
     },
     danger: {
       bgColor: {
@@ -355,6 +368,31 @@ export const github = {
    * @workflow_summary `summaryView` 节点背景色
    */
   workflowCardBg: "github-workflow-card-bg",
+  counter: {
+    /** 标签的边框色, 默认为 #0000, 高对比度专属颜色
+     * @label `label` 标签的边框色
+     * @dashboard `dashboard` 仓库/组织列表标签的边框色
+     */
+    borderColor: null,
+  },
+  progressBar: {
+    track: {
+      /** 进度条轨道背景色, 默认为 #0000, 高对比度专属颜色
+       * @repo_sidebar `repoSidebarBottom` 语言统计条的背景色
+       */
+      bgColor: null,
+      /** 进度条轨道边框色, 默认为 #0000, 高对比度专属颜色
+       * @repo_sidebar `repoSidebarBottom` 语言统计条的边框色
+       */
+      borderColor: null,
+    },
+  },
+  topicTag: {
+    /** 主题标签的边框色, 默认为 #0000, 高对比度专属颜色
+     * @repo `repoTopic` 仓库标签的边框色
+     */
+    borderColor: null,
+  },
   /** 主题额外的 GitHub 颜色 */
   themeExtra: {
     button: {

src/vite-plugin.ts

@@ -164,11 +164,11 @@ export function giteaGitHubThemePlugin(): PluginOption[] {
         }
         /** 辅助函数: 将主题名称转为正式主题名称 */
         function buildFullThemeName(themeSeries: ThemeSeries, themeName: string): string {
-          return `${PREFIX}${themeSeries.themeSeriesName !== "base" ? `${themeSeries.themeSeriesName}-` : ""}${themeName}`;
+          return `${PREFIX}${themeSeries.themeSeriesName !== "default" ? `${themeSeries.themeSeriesName}-` : ""}${themeName}`;
         }
         /** 辅助函数: 将显示名称转为正式名称 */
         function buildFullDisplayName(themeSeries: ThemeSeries, displayName: string): string {
-          return `GitHub${themeSeries.themeSeriesName !== "base" ? ` ${kebabToTitle(themeSeries.themeSeriesName)}` : ""} ${kebabToTitle(displayName)}`;
+          return `GitHub ${kebabToTitle(themeSeries.themeSeriesName)} ${kebabToTitle(displayName)}`;
         }
 
         // 4. 解析主题条目

styles/components/dashboard.ts

@@ -91,7 +91,7 @@ export const dashboard = css`
       background-color: unset !important;
       margin-bottom: 0.25rem;
       .ui.label {
-        border-color: #00000000;
+        border-color: ${themeVars.github.counter.borderColor};
       }
     }
     /* 仓库/组织列表 */
@@ -106,7 +106,7 @@ export const dashboard = css`
         border-top-right-radius: 12px;
         > .menu.repos-filter {
           .ui.circular.label {
-            border-color: #00000000;
+            border-color: ${themeVars.github.counter.borderColor};
             min-height: fit-content;
             padding: ${labelStyle.padding} !important;
           }

styles/components/repo/clone.ts

@@ -95,6 +95,7 @@ export const clone = css`
           margin-left: 5px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
           }
           svg {
             width: 16px;
@@ -125,6 +126,7 @@ export const clone = css`
             color: ${themeVars.color.text.self};
             text-decoration: none;
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             &:active {
               background: ${themeVars.github.control.transparent.bgColor.active};
             }

styles/components/repo/commit.ts

@@ -62,6 +62,9 @@ export const commit = css`
         svg {
           color: ${themeVars.color.text.light.num1};
         }
+        .btn.interact-bg:hover {
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+        }
       }
       tr {
         /* 整行悬停色 */

styles/components/repo/repo.ts

@@ -98,6 +98,7 @@ export const repoTopic = css`
     line-height: 22px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
+    border-color: ${themeVars.github.topicTag.borderColor};
     &:hover {
       background-color: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};

styles/components/repo/repo_files.ts

@@ -69,10 +69,11 @@ export const fileSearch = css`
         color: ${themeVars.color.text.light.num1};
         &.selected {
           background-color: unset;
-          box-shadow: 0 0 0 2px ${themeVars.github.borderColor.accent.emphasis};
+          box-shadow: 0 0 0 2px ${themeVars.github.borderColor.accent.emphasis} !important;
         }
         &:hover {
           background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
         }
         .full-path :nth-child(2n) {
           color: ${themeVars.color.text.self};
@@ -131,6 +132,7 @@ export const repoFiles = css`
           min-height: 3.725rem;
           .latest-commit {
             gap: 8px;
+            line-height: 24px;
             .commit-summary {
               color: ${themeVars.color.text.light.num1};
             }
@@ -143,6 +145,7 @@ export const repoFiles = css`
             /* 作者 */
             .author-wrapper {
               display: flex;
+              align-items: center;
               &:hover {
                 color: ${themeVars.color.text.self};
               }
@@ -217,6 +220,7 @@ export const repoFiles = css`
             width: 28px;
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             }
           }
         }

styles/components/repo/repo_sidebar.ts

@@ -113,6 +113,9 @@ export const repoSidebarBottom = css`
       .language-stats {
         height: 8px;
         margin-bottom: 0px;
+        background-color: ${themeVars.github.progressBar.track.bgColor};
+        outline: 1px solid ${themeVars.github.progressBar.track.borderColor};
+        outline-offset: -1px;
       }
       .language-stats-details .item {
         font-size: 12px;

styles/public/dropdown/dropdown.ts

@@ -63,6 +63,7 @@ export const dropdown = css`
         }
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
         }
         &:active {
           background-color: ${themeVars.github.control.transparent.bgColor.active} !important;

styles/public/label/label.ts

@@ -23,7 +23,7 @@ import { css } from "@linaria/core";
 
 export const label = css`
   .ui.label {
-    border: 1px solid #00000000;
+    border: 1px solid ${themeVars.github.counter.borderColor};
   }
   /* 所有标签, 但不包括 a 标签 */
   /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */

styles/public/label/sha_label.ts

@@ -33,6 +33,7 @@ export const shaLabel = css`
     margin-top: 2px;
     &:hover {
       background-color: ${themeVars.color.label.hoverBg};
+      box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
     }
     /* 验证提交 SHA 标签 */
     &.commit-is-signed {

styles/templates/repo/commit_sign_badge.ts

@@ -29,6 +29,7 @@ export const commitSignBadge = css`
     margin: 0 4px;
     &:hover {
       background-color: unset !important;
+      box-shadow: unset;
     }
     &.commit-is-signed {
       span.ui.label.commit-sign-badge.commit-is-signed {
@@ -49,6 +50,7 @@ export const commitSignBadge = css`
       justify-content: center;
       &:hover {
         background-color: ${themeVars.color.hover.self};
+        box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
       }
     }
   }

styles/templates/repo/commits_list.ts

@@ -62,6 +62,7 @@ export const commitsList = css`
           vertical-align: bottom;
           &:hover {
             background: ${themeVars.color.hover.self};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
           }
         }
         .commit-body {
@@ -118,6 +119,9 @@ export const commitsList = css`
           justify-content: center;
           height: 28px;
           width: 28px;
+          &:hover {
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+          }
         }
       }
     }

styles/templates/repo/view_list.ts

@@ -42,6 +42,7 @@ export const repoFileLastCommit = css`
       font-weight: 500;
       &:hover {
         background-color: ${themeVars.github.control.transparent.bgColor.hover};
+        box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
         color: inherit;
         text-decoration-line: none;
       }

theme.config.ts

@@ -22,7 +22,7 @@ import themes from "@gitea-github-theme/themes";
 
 export default defineThemeConfig([
   {
-    themeSeriesName: "base",
+    themeSeriesName: "default",
     themes: {
       dark: { theme: themes.github.dark },
       light: { theme: themes.github.light },
@@ -31,15 +31,15 @@ export default defineThemeConfig([
   },
   {
     themeSeriesName: "colorblind",
-    autoTheme: { displayName: "Auto Protanopia And Deuteranopia", colorblindType: "red-green" },
+    autoTheme: { displayName: "Default Auto Protanopia And Deuteranopia", colorblindType: "red-green" },
     themes: {
       dark: {
-        displayName: "Dark Protanopia And Deuteranopia",
+        displayName: "Default Dark Protanopia And Deuteranopia",
         colorblindType: "red-green",
         theme: themes.github.colorblind.dark,
       },
       light: {
-        displayName: "Light Protanopia And Deuteranopia",
+        displayName: "Default Light Protanopia And Deuteranopia",
         colorblindType: "red-green",
         theme: themes.github.colorblind.light,
       },
@@ -47,15 +47,15 @@ export default defineThemeConfig([
   },
   {
     themeSeriesName: "tritanopia",
-    autoTheme: { displayName: "Auto Tritanopia", colorblindType: "blue-yellow" },
+    autoTheme: { displayName: "Default Auto Tritanopia", colorblindType: "blue-yellow" },
     themes: {
       dark: {
-        displayName: "Dark Tritanopia",
+        displayName: "Default Dark Tritanopia",
         colorblindType: "blue-yellow",
         theme: themes.github.tritanopia.dark,
       },
       light: {
-        displayName: "Light Tritanopia",
+        displayName: "Default Light Tritanopia",
         colorblindType: "blue-yellow",
         theme: themes.github.tritanopia.light,
       },