Optimize the style under high contrast themes.

CHANGELOG.md

@@ -1,7 +1,7 @@
 ### ✨ 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.
+- Add default to the base default theme display name to sort it together when there are many themes in the list.
   `GitHub Dark` -> `GitHub Default Dark`
 
 ### 🌈 Style

src/palette/catppuccin.ts

@@ -19,6 +19,7 @@
 
 import type { CatppuccinFlavor } from "@catppuccin/palette";
 import { darken, lighten, mix, rgba, saturate } from "polished";
+import { scaleColorLight } from "../functions";
 import type { Ansi, Console, Diff, GitHub, Other } from "../types";
 import { themeVars } from "../types";
 import type { ThemeColor } from "./theme";
@@ -211,7 +212,15 @@ export function catppuccin2ThemeColor(flavor: CatppuccinFlavor): ThemeColor {
         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) } },
+      danger: {
+        fgColor: {
+          hover: flavor.dark ? scaleColorLight(flavor.colors.red.hex, 15) : scaleColorLight(flavor.colors.red.hex, 25),
+        },
+        bgColor: {
+          hover: rgba(flavor.colors.red.hex, 0.1),
+          active: rgba(flavor.colors.red.hex, 0.3),
+        },
+      },
     },
     // 对调颜色映射, 倾向于个人标准(激活项颜色和菜单色一致)
     controlTrack: { bgColor: { rest: flavor.colors.surface0.hex } },

src/palette/gitea.ts

@@ -104,7 +104,9 @@ export function gitea2ThemeVars(giteaColor: GiteaColor): ThemeVars {
         borderColor: { active: "#0000" },
       },
       danger: {
+        fgColor: { hover: giteaColor.named.red.light },
         bgColor: {
+          hover: giteaColor.named.red.badge.bg,
           active: opacify(0.3, giteaColor.named.red.badge.bg),
         },
       },

src/palette/github.ts

@@ -42,13 +42,13 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
 
   const diff: Diff = {
     added: {
-      fg: githubColor.bgColor.success.emphasis,
+      fg: githubColor.fgColor.success,
       linenum: { bg: githubColor.diffBlob.additionNum.bgColor },
       row: { bg: githubColor.bgColor.success.muted, border: githubColor.bgColor.success.muted },
       word: { bg: githubColor.diffBlob.additionWord.bgColor },
     },
     removed: {
-      fg: githubColor.bgColor.danger.emphasis,
+      fg: githubColor.fgColor.danger,
       linenum: { bg: githubColor.diffBlob.deletionNum.bgColor },
       row: { bg: githubColor.bgColor.danger.muted, border: githubColor.bgColor.danger.muted },
       word: { bg: githubColor.diffBlob.deletionWord.bgColor },
@@ -184,7 +184,13 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
         },
         borderColor: { active: githubColor.control.transparent.borderColor.active },
       },
-      danger: { bgColor: { active: githubColor.control.danger.bgColor.active } },
+      danger: {
+        fgColor: { hover: githubColor.control.danger.fgColor.hover },
+        bgColor: {
+          hover: githubColor.control.danger.bgColor.hover,
+          active: githubColor.control.danger.bgColor.active,
+        },
+      },
     },
     controlTrack: { bgColor: { rest: githubColor.controlTrack.bgColor.rest } },
     controlKnob: { bgColor: { rest: githubColor.controlKnob.bgColor.rest } },

src/types/color/github.ts

@@ -280,7 +280,11 @@ export const github = {
       },
     },
     danger: {
+      fgColor: {
+        hover: null,
+      },
       bgColor: {
+        hover: null,
         /** 激活色
          * @repo_file_view `repoFileView` 菜单删除操作项激活颜色
          * @issue_comment `comment` 菜单删除操作项激活颜色

styles/common/after.ts

@@ -24,6 +24,7 @@ import type { StyleRule } from "@vanilla-extract/css";
  * @example 菜单激活子项前面的竖线, 方便识别
  */
 export const activeItemAfterStyle = {
+  content: `""`,
   backgroundColor: themeVars.github.borderColor.accent.emphasis,
   borderRadius: otherThemeVars.border.radius,
   height: "24px",

styles/common/delete.ts

@@ -0,0 +1,33 @@
+/*!
+ * Copyright (c) https://github.com/lutinglt
+ *
+ * See the NOTICE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { themeVars } from "@gitea-github-theme/core";
+import type { StyleRule } from "@vanilla-extract/css";
+
+export const deleteHoverActiveStyle = {
+  "&:hover": {
+    backgroundColor: `${themeVars.github.control.danger.bgColor.hover} !important`,
+    color: `${themeVars.github.control.danger.fgColor.hover} !important`,
+  } satisfies StyleRule,
+  "&:active": {
+    backgroundColor: `${themeVars.github.control.danger.bgColor.active} !important`,
+    color: `${themeVars.github.control.danger.fgColor.hover} !important`,
+    boxShadow: `inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active}`,
+  } satisfies StyleRule,
+};

styles/common/index.ts

@@ -20,4 +20,5 @@
 export { activeItemAfterStyle } from "./after";
 export { animation, animationDown, animationUp } from "./animation";
 export { primaryButtonHoverStyle, primaryButtonStyle } from "./button";
+export { deleteHoverActiveStyle } from "./delete";
 export { botLabelStyle, labelStyle } from "./label";

styles/components/issues/issue.ts

@@ -32,6 +32,7 @@ export const button = css`
 export const babel = css`
   .issue-content-left {
     .badge {
+      box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
       /* 时间线打开状态标签 */
       &.tw-bg-green {
         background-color: ${themeVars.github.bgColor.success.emphasis} !important;
@@ -53,16 +54,19 @@ export const babel = css`
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.success.emphasis} !important;
       border-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.success.emphasis};
     }
     &.red {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.done.emphasis};
     }
     &.purple {
       color: ${themeVars.color.white} !important;
       background-color: ${themeVars.github.bgColor.done.emphasis} !important;
       border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.done.emphasis};
     }
   }
 `;
@@ -96,7 +100,6 @@ export const dropdown = css`
     /* Issue/PR 详情下的右侧的上半部分选项菜单 */
     &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
       .item:hover:after {
-        content: "";
         ${activeItemAfterStyle}
       }
     }

styles/components/issues/issue_comment.ts

@@ -18,7 +18,7 @@
  */
 
 import { otherThemeVars, themeVars } from "@gitea-github-theme/core";
-import { botLabelStyle } from "@gitea-github-theme/styles/common";
+import { botLabelStyle, deleteHoverActiveStyle } from "@gitea-github-theme/styles/common";
 import { css } from "@linaria/core";
 
 // 评论
@@ -83,9 +83,11 @@ export const comment = css`
         border-radius: ${otherThemeVars.border.radius};
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
         }
         &:active {
           background-color: ${themeVars.github.control.transparent.bgColor.active};
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
         }
         a.context-menu {
           display: flex;
@@ -97,14 +99,7 @@ export const comment = css`
         /* 评论菜单的删除按钮 */
         .menu .item.delete-comment {
           color: ${themeVars.color.red.self};
-          &:hover {
-            background-color: ${themeVars.color.red.badge.bg} !important;
-            color: ${themeVars.color.red.light};
-          }
-          &:active {
-            background-color: ${themeVars.github.control.danger.bgColor.active} !important;
-            color: ${themeVars.color.red.light};
-          }
+          ${deleteHoverActiveStyle}
         }
       }
     }

styles/components/issues/issue_sidebar.ts

@@ -18,6 +18,7 @@
  */
 
 import { otherThemeVars, themeVars } from "@gitea-github-theme/core";
+import { deleteHoverActiveStyle } from "@gitea-github-theme/styles/common";
 import { css } from "@linaria/core";
 import type { StyleRule } from "@vanilla-extract/css";
 
@@ -83,6 +84,7 @@ export const issueSidebar = css`
             height: 28px;
             &:hover {
               background: ${themeVars.github.control.transparent.bgColor.hover};
+              box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             }
           }
           .ui.list {
@@ -199,9 +201,11 @@ export const issueSidebar = css`
           justify-content: left;
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
           }
           &:active {
             background-color: ${themeVars.github.control.transparent.bgColor.active};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
           }
         }
         .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
@@ -209,14 +213,7 @@ export const issueSidebar = css`
           svg {
             color: inherit;
           }
-          &:hover {
-            background-color: ${themeVars.color.red.badge.bg};
-            color: ${themeVars.color.red.light};
-          }
-          &:active {
-            background-color: ${themeVars.github.control.danger.bgColor.active} !important;
-            color: ${themeVars.color.red.light};
-          }
+          ${deleteHoverActiveStyle}
         }
       }
     }

styles/components/navbar.ts

@@ -34,6 +34,9 @@ export const navbarRight = css`
       > .item {
         padding: 4px 8px;
         min-height: 20px;
+        &:hover {
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+        }
         &.active {
           font-weight: 600;
         }

styles/components/newrepo.ts

@@ -25,7 +25,6 @@ export const newRepo = css`
   .page-content.repository.new-repo {
     .ui.dropdown .menu {
       .item:hover:after {
-        content: "";
         ${activeItemAfterStyle}
       }
     }

styles/components/repo/clone.ts

@@ -47,6 +47,7 @@ export const clone = css`
           margin: 8px 0;
           &:hover {
             background: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             border-radius: ${otherThemeVars.border.radius};
           }
           &.active:after {

styles/components/repo/diff.ts

@@ -18,6 +18,7 @@
  */
 
 import { otherThemeVars, themeVars } from "@gitea-github-theme/core";
+import { activeItemAfterStyle } from "@gitea-github-theme/styles/common";
 import { css } from "@linaria/core";
 
 export const diff = css`
@@ -81,6 +82,9 @@ export const diff = css`
       color: ${themeVars.color.text.self} !important;
     }
   }
+`;
+// 差异对比文件盒子头
+export const diffFileBoxHeader = css`
   /* 差异对比文件盒子 */
   .diff-file-box {
     /* 差异对比文件头 */
@@ -94,9 +98,6 @@ export const diff = css`
           height: 16px;
           width: 16px;
         }
-        .diff-stats-bar {
-          height: 8px;
-        }
         > div,
         .file-link {
           font-size: 12px;
@@ -112,16 +113,30 @@ export const diff = css`
         .tw-text-diff-removed-fg {
           font-weight: 600;
         }
+        /* 增加/删除的状态条 */
+        .diff-stats-bar {
+          border: 1px solid ${themeVars.color.secondary.self};
+          border-radius: 2px;
+          overflow: hidden;
+          .diff-stats-add-bar {
+            border-right: 1px solid ${themeVars.github.borderColor.success.emphasis};
+          }
+        }
+        /* 三点操作展开按钮 */
         .diff-header-popup-btn {
           border-radius: ${otherThemeVars.border.radius};
           padding: 5px !important;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
           }
         }
       }
     }
   }
+`;
+// 差异对比文件盒子内容
+export const diffFileBoxCodeDiff = css`
   /* 差异对比文件盒子 */
   .repository .diff-file-box {
     .code-diff {
@@ -175,3 +190,24 @@ export const diff = css`
     }
   }
 `;
+// 差异对比左侧文件树
+export const diffFileTree = css`
+  #diff-file-tree {
+    margin-right: 8px;
+    .diff-file-tree-items {
+      .item-file.item-file {
+        position: relative;
+        margin-left: 8px;
+        &.selected:after {
+          ${activeItemAfterStyle}
+        }
+      }
+      .item-file.item-file,
+      .item-directory.item-directory {
+        &:hover {
+          box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+        }
+      }
+    }
+  }
+`;

styles/components/repo/repo_file_view.ts

@@ -18,7 +18,7 @@
  */
 
 import { otherThemeVars, themeVars } from "@gitea-github-theme/core";
-import { activeItemAfterStyle } from "@gitea-github-theme/styles/common";
+import { activeItemAfterStyle, deleteHoverActiveStyle } from "@gitea-github-theme/styles/common";
 import { css } from "@linaria/core";
 
 // 仓库打开文件时的视图
@@ -81,9 +81,13 @@ export const repoFileView = css`
             height: 1px;
             background: ${themeVars.color.secondary.self};
           }
+          /* 收起文件树按钮 */
           .repo-view-file-tree-toggle {
             border-color: #0000;
             min-width: 32px;
+            &:hover {
+              box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+            }
           }
           .ui.compact.icon.button {
             border: 0;
@@ -95,8 +99,10 @@ export const repoFileView = css`
           .tree-item {
             position: relative;
             margin-left: 8px;
+            &:hover {
+              box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
+            }
             &.selected:after {
-              content: "";
               ${activeItemAfterStyle}
             }
           }
@@ -128,6 +134,7 @@ export const repoFileView = css`
               min-width: 32px;
               &:hover {
                 background: ${themeVars.color.hover.self};
+                box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
               }
             }
             /* 分支选择按钮 */
@@ -157,13 +164,7 @@ export const repoFileView = css`
             .ui.dropdown.basic.button:has(.octicon-kebab-horizontal) {
               width: 32px;
               .item.tw-text-danger {
-                &:hover {
-                  background-color: ${themeVars.color.red.badge.bg} !important;
-                  color: ${themeVars.color.red.light} !important;
-                }
-                &:active {
-                  background-color: ${themeVars.github.control.danger.bgColor.active} !important;
-                }
+                ${deleteHoverActiveStyle}
                 svg {
                   color: inherit;
                 }

styles/public/dropdown/dropdown.ts

@@ -80,7 +80,6 @@ export const dropdown = css`
         &.active,
         &.selected {
           &:after {
-            content: "";
             ${activeItemAfterStyle};
           }
         }

styles/public/dropdown/selection_dropdown.ts

@@ -41,7 +41,6 @@ export const selectionDropdown = css`
     }
     /* 悬停提供伪元素 */
     .item:hover:after {
-      content: "";
       ${activeItemAfterStyle};
     }
   }

styles/public/menu/menu.ts

@@ -34,6 +34,7 @@ export const menu = css`
   .ui.secondary.menu .dropdown.item {
     &:hover {
       background: ${themeVars.github.control.transparent.bgColor.hover};
+      box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
     }
   }
   /* 一些水平小型菜单的颜色更改 */

styles/public/menu/vertical_menu.ts

@@ -40,6 +40,7 @@ export const verticalMenu = css`
     a.item {
       &:hover {
         background: ${themeVars.github.control.transparent.bgColor.hover};
+        box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
       }
       &:active {
         background-color: ${themeVars.github.control.transparent.bgColor.active};
@@ -73,7 +74,6 @@ export const verticalMenu = css`
     }
     /* 添加伪元素, 用于指示当前激活的菜单项 */
     .active.item:after {
-      content: "";
       ${activeItemAfterStyle};
     }
     /* 部分菜单项的子菜单 */
@@ -81,6 +81,7 @@ export const verticalMenu = css`
       /* 子菜单的标题 */
       summary:hover {
         background: ${themeVars.github.control.transparent.bgColor.hover};
+        box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
       }
       /* 子菜单的选项 */
       .menu .item {
@@ -100,7 +101,6 @@ export const verticalMenu = css`
           }
         }
         &:after {
-          content: "";
           ${activeItemAfterStyle};
         }
         /* 子菜单的选项 */

styles/public/tippy.ts

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

styles/public/transition.ts

@@ -83,6 +83,7 @@ export const transition = css`
       color 80ms cubic-bezier(0.65, 0, 0.35, 1),
       fill 80ms cubic-bezier(0.65, 0, 0.35, 1),
       background-color 80ms cubic-bezier(0.65, 0, 0.35, 1),
+      box-shadow 80ms cubic-bezier(0.65, 0, 0.35, 1),
       /* 位移慢一点, 这样视觉上与颜色变化同步 */ transform 200ms cubic-bezier(0.65, 0, 0.35, 1),
       border-color 80ms cubic-bezier(0.65, 0, 0.35, 1);
     transition-duration: 80ms;

styles/templates/repo/view_content.ts

@@ -38,6 +38,7 @@ export const repoButtonRow = css`
           min-height: 32px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
+            box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
             text-decoration-line: none;
           }
           svg {