Skip to content

Commit 650621b

Browse files
lutingltlutinglt
committed
Optimize the style under high contrast themes.
1 parent ff82594 commit 650621b

23 files changed

Lines changed: 133 additions & 40 deletions

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
### ✨ Feature
22

33
- Add high contrast color themes.
4-
- Add default to the basic default theme display name to sort it together when there are many themes in the list.
4+
- Add default to the base default theme display name to sort it together when there are many themes in the list.
55
`GitHub Dark` -> `GitHub Default Dark`
66

77
### 🌈 Style

‎src/palette/catppuccin.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
import type { CatppuccinFlavor } from "@catppuccin/palette";
2121
import { darken, lighten, mix, rgba, saturate } from "polished";
22+
import { scaleColorLight } from "../functions";
2223
import type { Ansi, Console, Diff, GitHub, Other } from "../types";
2324
import { themeVars } from "../types";
2425
import type { ThemeColor } from "./theme";
@@ -211,7 +212,15 @@ export function catppuccin2ThemeColor(flavor: CatppuccinFlavor): ThemeColor {
211212
bgColor: { hover: rgba(flavor.colors.surface2.hex, 0.2), active: rgba(flavor.colors.overlay0.hex, 0.5) },
212213
borderColor: { active: "#0000" },
213214
},
214-
danger: { bgColor: { active: rgba(flavor.colors.red.hex, 0.3) } },
215+
danger: {
216+
fgColor: {
217+
hover: flavor.dark ? scaleColorLight(flavor.colors.red.hex, 15) : scaleColorLight(flavor.colors.red.hex, 25),
218+
},
219+
bgColor: {
220+
hover: rgba(flavor.colors.red.hex, 0.1),
221+
active: rgba(flavor.colors.red.hex, 0.3),
222+
},
223+
},
215224
},
216225
// 对调颜色映射, 倾向于个人标准(激活项颜色和菜单色一致)
217226
controlTrack: { bgColor: { rest: flavor.colors.surface0.hex } },

‎src/palette/gitea.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,9 @@ export function gitea2ThemeVars(giteaColor: GiteaColor): ThemeVars {
104104
borderColor: { active: "#0000" },
105105
},
106106
danger: {
107+
fgColor: { hover: giteaColor.named.red.light },
107108
bgColor: {
109+
hover: giteaColor.named.red.badge.bg,
108110
active: opacify(0.3, giteaColor.named.red.badge.bg),
109111
},
110112
},

‎src/palette/github.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
4242

4343
const diff: Diff = {
4444
added: {
45-
fg: githubColor.bgColor.success.emphasis,
45+
fg: githubColor.fgColor.success,
4646
linenum: { bg: githubColor.diffBlob.additionNum.bgColor },
4747
row: { bg: githubColor.bgColor.success.muted, border: githubColor.bgColor.success.muted },
4848
word: { bg: githubColor.diffBlob.additionWord.bgColor },
4949
},
5050
removed: {
51-
fg: githubColor.bgColor.danger.emphasis,
51+
fg: githubColor.fgColor.danger,
5252
linenum: { bg: githubColor.diffBlob.deletionNum.bgColor },
5353
row: { bg: githubColor.bgColor.danger.muted, border: githubColor.bgColor.danger.muted },
5454
word: { bg: githubColor.diffBlob.deletionWord.bgColor },
@@ -184,7 +184,13 @@ export function github2ThemeColor(githubColor: GitHubColor): ThemeColor {
184184
},
185185
borderColor: { active: githubColor.control.transparent.borderColor.active },
186186
},
187-
danger: { bgColor: { active: githubColor.control.danger.bgColor.active } },
187+
danger: {
188+
fgColor: { hover: githubColor.control.danger.fgColor.hover },
189+
bgColor: {
190+
hover: githubColor.control.danger.bgColor.hover,
191+
active: githubColor.control.danger.bgColor.active,
192+
},
193+
},
188194
},
189195
controlTrack: { bgColor: { rest: githubColor.controlTrack.bgColor.rest } },
190196
controlKnob: { bgColor: { rest: githubColor.controlKnob.bgColor.rest } },

‎src/types/color/github.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,11 @@ export const github = {
280280
},
281281
},
282282
danger: {
283+
fgColor: {
284+
hover: null,
285+
},
283286
bgColor: {
287+
hover: null,
284288
/** 激活色
285289
* @repo_file_view `repoFileView` 菜单删除操作项激活颜色
286290
* @issue_comment `comment` 菜单删除操作项激活颜色

‎styles/common/after.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type { StyleRule } from "@vanilla-extract/css";
2424
* @example 菜单激活子项前面的竖线, 方便识别
2525
*/
2626
export const activeItemAfterStyle = {
27+
content: `""`,
2728
backgroundColor: themeVars.github.borderColor.accent.emphasis,
2829
borderRadius: otherThemeVars.border.radius,
2930
height: "24px",

‎styles/common/delete.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*!
2+
* Copyright (c) https://github.com/lutinglt
3+
*
4+
* See the NOTICE file distributed with this work for additional
5+
* information regarding copyright ownership.
6+
*
7+
* Licensed under the Apache License, Version 2.0 (the "License");
8+
* you may not use this file except in compliance with the License.
9+
* You may obtain a copy of the License at
10+
*
11+
* http://www.apache.org/licenses/LICENSE-2.0
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS,
15+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
* See the License for the specific language governing permissions and
17+
* limitations under the License.
18+
*/
19+
20+
import { themeVars } from "@gitea-github-theme/core";
21+
import type { StyleRule } from "@vanilla-extract/css";
22+
23+
export const deleteHoverActiveStyle = {
24+
"&:hover": {
25+
backgroundColor: `${themeVars.github.control.danger.bgColor.hover} !important`,
26+
color: `${themeVars.github.control.danger.fgColor.hover} !important`,
27+
} satisfies StyleRule,
28+
"&:active": {
29+
backgroundColor: `${themeVars.github.control.danger.bgColor.active} !important`,
30+
color: `${themeVars.github.control.danger.fgColor.hover} !important`,
31+
boxShadow: `inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active}`,
32+
} satisfies StyleRule,
33+
};

‎styles/common/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@
2020
export { activeItemAfterStyle } from "./after";
2121
export { animation, animationDown, animationUp } from "./animation";
2222
export { primaryButtonHoverStyle, primaryButtonStyle } from "./button";
23+
export { deleteHoverActiveStyle } from "./delete";
2324
export { botLabelStyle, labelStyle } from "./label";

‎styles/components/issues/issue.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export const button = css`
3232
export const babel = css`
3333
.issue-content-left {
3434
.badge {
35+
box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
3536
/* 时间线打开状态标签 */
3637
&.tw-bg-green {
3738
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
@@ -53,16 +54,19 @@ export const babel = css`
5354
color: ${themeVars.color.white} !important;
5455
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
5556
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
57+
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.success.emphasis};
5658
}
5759
&.red {
5860
color: ${themeVars.color.white} !important;
5961
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
6062
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
63+
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.done.emphasis};
6164
}
6265
&.purple {
6366
color: ${themeVars.color.white} !important;
6467
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
6568
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
69+
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.done.emphasis};
6670
}
6771
}
6872
`;
@@ -96,7 +100,6 @@ export const dropdown = css`
96100
/* Issue/PR 详情下的右侧的上半部分选项菜单 */
97101
&.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
98102
.item:hover:after {
99-
content: "";
100103
${activeItemAfterStyle}
101104
}
102105
}

‎styles/components/issues/issue_comment.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
*/
1919

2020
import { otherThemeVars, themeVars } from "@gitea-github-theme/core";
21-
import { botLabelStyle } from "@gitea-github-theme/styles/common";
21+
import { botLabelStyle, deleteHoverActiveStyle } from "@gitea-github-theme/styles/common";
2222
import { css } from "@linaria/core";
2323

2424
// 评论
@@ -83,9 +83,11 @@ export const comment = css`
8383
border-radius: ${otherThemeVars.border.radius};
8484
&:hover {
8585
background-color: ${themeVars.github.control.transparent.bgColor.hover};
86+
box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
8687
}
8788
&:active {
8889
background-color: ${themeVars.github.control.transparent.bgColor.active};
90+
box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
8991
}
9092
a.context-menu {
9193
display: flex;
@@ -97,14 +99,7 @@ export const comment = css`
9799
/* 评论菜单的删除按钮 */
98100
.menu .item.delete-comment {
99101
color: ${themeVars.color.red.self};
100-
&:hover {
101-
background-color: ${themeVars.color.red.badge.bg} !important;
102-
color: ${themeVars.color.red.light};
103-
}
104-
&:active {
105-
background-color: ${themeVars.github.control.danger.bgColor.active} !important;
106-
color: ${themeVars.color.red.light};
107-
}
102+
${deleteHoverActiveStyle}
108103
}
109104
}
110105
}

0 commit comments

Comments
 (0)