Skip to content

Commit cbb8b09

Browse files
lutingltlutinglt
committed
Add high contrast color themes.
1 parent 102648e commit cbb8b09

9 files changed

Lines changed: 177 additions & 34 deletions

File tree

‎.github/workflows/release.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,13 @@ jobs:
2525
2626
tar -zcf dist/theme-github-colorblind-protanopia-deuteranopia.tar.gz dist/theme-github-colorblind-*.css
2727
tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz dist/theme-github-tritanopia-*.css
28+
tar -zcf dist/theme-github-high-contrast.tar.gz dist/theme-github-high-contrast-*.css
2829
2930
tar -zcf dist/theme-github-extra-pink.tar.gz dist/theme-github-pink-*.css
3031
tar -zcf dist/theme-github-extra-gitea.tar.gz dist/theme-github-gitea-*.css
3132
tar -zcf dist/theme-github-extra-catppuccin.tar.gz dist/theme-github-catppuccin-*.css
3233
34+
3335
tar -zcf dist/theme-github.tar.gz --remove-files dist/theme-github-*.css
3436
3537
tar -zcf dist/theme-github-templates.tar.gz templates

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
### ✨ Feature
2+
3+
- Add high contrast color themes.
4+
15
### 🌈 Style
26

37
- Optimize catppuccin theme with regular label colors.
@@ -7,3 +11,8 @@
711
#### More GitHub-like style
812

913
- Fine tune the heatmap colors of catppuccin theme and pink soft dark theme.
14+
- Optimize heat map style.
15+
16+
### 🐞 Fix
17+
18+
- Fix the missing highlight style when hovering the heatmap mouse.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@catppuccin/palette": "^1.8.0",
2424
"@eslint/js": "^10.0.1",
2525
"@linaria/core": "^7.0.0",
26-
"@primer/primitives": "^11.9.0",
26+
"@primer/primitives": "11.9.0",
2727
"@types/node": "^25.5.2",
2828
"@typescript/native-preview": "^7.0.0-dev.20260509.2",
2929
"@vanilla-extract/css": "^1.20.1",

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ export {
2626
catppuccin2ThemeColor,
2727
display2GitHubColor,
2828
github2ThemeColor,
29+
primer,
2930
primer2GitHubColor,
3031
primer2GitHubSyntax,
31-
primer,
3232
} from "./palette";
3333
export type { DisplayColor, GitHubColor, GitHubSyntax, GiteaColor, ThemeColor } from "./palette";
3434
export { createThemeMetaInfo } from "./styles";

‎src/palette/primer.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,20 +257,34 @@ export function primer2GitHubSyntax(primerTokens: PrimerTokens): GitHubSyntax {
257257
return { prettyLights, codeMirror };
258258
}
259259

260+
import darkColorblindHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json" with { type: "json" };
260261
import darkColorblind from "@primer/primitives/dist/styleLint/functional/themes/dark-colorblind.json" with { type: "json" };
262+
import darkDimmedHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json" with { type: "json" };
261263
import darkDimmed from "@primer/primitives/dist/styleLint/functional/themes/dark-dimmed.json" with { type: "json" };
264+
import darkHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-high-contrast.json" with { type: "json" };
265+
import darkTritanopiaHighContrast from "@primer/primitives/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json" with { type: "json" };
262266
import darkTritanopia from "@primer/primitives/dist/styleLint/functional/themes/dark-tritanopia.json" with { type: "json" };
263267
import dark from "@primer/primitives/dist/styleLint/functional/themes/dark.json" with { type: "json" };
268+
import lightColorblindHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-colorblind-high-contrast.json" with { type: "json" };
264269
import lightColorblind from "@primer/primitives/dist/styleLint/functional/themes/light-colorblind.json" with { type: "json" };
270+
import lightHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-high-contrast.json" with { type: "json" };
271+
import lightTritanopiaHighContrast from "@primer/primitives/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json" with { type: "json" };
265272
import lightTritanopia from "@primer/primitives/dist/styleLint/functional/themes/light-tritanopia.json" with { type: "json" };
266273
import light from "@primer/primitives/dist/styleLint/functional/themes/light.json" with { type: "json" };
267274

268275
export default {
269276
dark,
270277
darkColorblind,
271-
darkDimmed,
272278
darkTritanopia,
279+
darkDimmed,
273280
light,
274281
lightColorblind,
275282
lightTritanopia,
283+
darkHighContrast,
284+
darkColorblindHighContrast,
285+
darkTritanopiaHighContrast,
286+
darkDimmedHighContrast,
287+
lightHighContrast,
288+
lightColorblindHighContrast,
289+
lightTritanopiaHighContrast,
276290
};

‎styles/components/heatmap.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,40 +46,38 @@ export const heatmap = css`
4646
/* 圆角 */
4747
rx: 2.5px;
4848
ry: 2.5px;
49-
/* hover 时的圆角 */
50-
border-radius: 0.75px;
49+
/* 边框圆角 */
50+
border-radius: 1px;
5151
/* 宽度和高度可以用来控制间隔 */
52-
width: 9px;
53-
height: 9px;
52+
width: 9.5px;
53+
height: 9.5px;
5454
/* 边框 */
5555
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
5656
/* 边框向内偏移 */
5757
outline-offset: -0.5px;
5858
59+
&:hover {
60+
outline: 0.5px solid ${themeVars.color.text.self} !important;
61+
}
5962
&[style="fill: var(--color-secondary-alpha-60);"] {
6063
fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
6164
}
62-
6365
&[style="fill: var(--color-primary-light-4);"] {
6466
fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
6567
outline-color: ${themeVars.github.contribution.default.borderColor.num1};
6668
}
67-
6869
&[style="fill: var(--color-primary-light-2);"] {
6970
fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
7071
outline-color: ${themeVars.github.contribution.default.borderColor.num2};
7172
}
72-
7373
&[style="fill: var(--color-primary);"] {
7474
fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
7575
outline-color: ${themeVars.github.contribution.default.borderColor.num3};
7676
}
77-
7877
&[style="fill: var(--color-primary-dark-2);"] {
7978
fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
8079
outline-color: ${themeVars.github.contribution.default.borderColor.num4};
8180
}
82-
8381
&[style="fill: var(--color-primary-dark-4);"] {
8482
fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
8583
outline-color: ${themeVars.github.contribution.default.borderColor.num5};

‎theme.config.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,44 @@ export default defineThemeConfig([
8585
macchiato: { theme: themes.catppuccin.macchiato },
8686
},
8787
},
88+
{
89+
themeSeriesName: "high-contrast",
90+
themes: {
91+
dark: { theme: themes.github.highContrast.dark },
92+
light: { theme: themes.github.highContrast.light },
93+
"soft-dark": { theme: themes.github.highContrast.softDark },
94+
},
95+
},
96+
{
97+
themeSeriesName: "high-contrast-colorblind",
98+
autoTheme: { displayName: "High Contrast Auto Protanopia And Deuteranopia", colorblindType: "red-green" },
99+
themes: {
100+
dark: {
101+
displayName: "High Contrast Dark Protanopia And Deuteranopia",
102+
colorblindType: "red-green",
103+
theme: themes.github.highContrast.colorblind.dark,
104+
},
105+
light: {
106+
displayName: "High Contrast Light Protanopia And Deuteranopia",
107+
colorblindType: "red-green",
108+
theme: themes.github.highContrast.colorblind.light,
109+
},
110+
},
111+
},
112+
{
113+
themeSeriesName: "high-contrast-tritanopia",
114+
autoTheme: { displayName: "High Contrast Auto Tritanopia", colorblindType: "blue-yellow" },
115+
themes: {
116+
dark: {
117+
displayName: "High Contrast Dark Tritanopia",
118+
colorblindType: "blue-yellow",
119+
theme: themes.github.highContrast.tritanopia.dark,
120+
},
121+
light: {
122+
displayName: "High Contrast Light Tritanopia",
123+
colorblindType: "blue-yellow",
124+
theme: themes.github.highContrast.tritanopia.light,
125+
},
126+
},
127+
},
88128
]);

‎themes/github.ts‎

Lines changed: 89 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,55 @@
2121
* @author lutinglt
2222
*/
2323

24-
import type { GitHubColor, GitHubSyntax } from "src";
24+
import type { GitHubColor } from "src";
2525
import { defineTheme, primer, primer2GitHubColor, primer2GitHubSyntax } from "src";
26+
/** - 仅适用于 Dark 主题
27+
* - 不同步 GitHub 样式, 对调 --controlKnob-bgColor-rest 和 --controlTrack-bgColor-rest 的颜色
28+
* - 激活颜色与背景色更一致, 在仪表板仓库/组织切换按钮中与菜单颜色一致
29+
*/
30+
function swapKnobAndTrackBgColor(color: GitHubColor): GitHubColor {
31+
return {
32+
...color,
33+
controlKnob: { bgColor: { rest: color.controlTrack.bgColor.rest } },
34+
controlTrack: { bgColor: { rest: color.controlKnob.bgColor.rest } },
35+
};
36+
}
2637

27-
const rawDarkColor = primer2GitHubColor(primer.dark, true);
28-
export const githubDarkColor: GitHubColor = {
29-
...rawDarkColor,
30-
// 不同步 GitHub 样式, 对调 --controlKnob-bgColor-rest 和 --controlTrack-bgColor-rest 的颜色
31-
// 激活颜色与背景色更一致, 在仪表板仓库/组织切换按钮中与菜单颜色一致
32-
controlKnob: { bgColor: { rest: rawDarkColor.controlTrack.bgColor.rest } },
33-
controlTrack: { bgColor: { rest: rawDarkColor.controlKnob.bgColor.rest } },
34-
};
35-
export const githubSoftDarkColor: GitHubColor = primer2GitHubColor(primer.darkDimmed, true);
36-
export const githubColorblindDarkColor: GitHubColor = primer2GitHubColor(primer.darkColorblind, true);
37-
export const githubTritanopiaDarkColor: GitHubColor = primer2GitHubColor(primer.darkTritanopia, true);
38-
export const githubLightColor: GitHubColor = primer2GitHubColor(primer.light);
39-
export const githubColorblindLightColor: GitHubColor = primer2GitHubColor(primer.lightColorblind);
40-
export const githubTritanopiaLightColor: GitHubColor = primer2GitHubColor(primer.lightTritanopia);
38+
export const githubDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.dark, true));
39+
export const githubColorblindDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkColorblind, true));
40+
export const githubTritanopiaDarkColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkTritanopia, true));
41+
export const githubSoftDarkColor = primer2GitHubColor(primer.darkDimmed, true);
42+
export const githubLightColor = primer2GitHubColor(primer.light);
43+
export const githubColorblindLightColor = primer2GitHubColor(primer.lightColorblind);
44+
export const githubTritanopiaLightColor = primer2GitHubColor(primer.lightTritanopia);
45+
46+
export const githubDarkHighContrastColor = swapKnobAndTrackBgColor(primer2GitHubColor(primer.darkHighContrast, true));
47+
export const githubDarkColorblindHighContrastColor = swapKnobAndTrackBgColor(
48+
primer2GitHubColor(primer.darkColorblindHighContrast, true)
49+
);
50+
export const githubDarkTritanopiaHighContrastColor = swapKnobAndTrackBgColor(
51+
primer2GitHubColor(primer.darkTritanopiaHighContrast, true)
52+
);
53+
export const githubSoftDarkHighContrastColor = primer2GitHubColor(primer.darkDimmedHighContrast, true);
54+
export const githubLightHighContrastColor = primer2GitHubColor(primer.lightHighContrast);
55+
export const githubLightColorblindHighContrastColor = primer2GitHubColor(primer.lightColorblindHighContrast);
56+
export const githubLightTritanopiaHighContrastColor = primer2GitHubColor(primer.lightTritanopiaHighContrast);
4157

42-
export const githubDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.dark);
43-
export const githubSoftDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkDimmed);
44-
export const githubColorblindDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkColorblind);
45-
export const githubTritanopiaDarkSyntax: GitHubSyntax = primer2GitHubSyntax(primer.darkTritanopia);
46-
export const githubLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.light);
47-
export const githubColorblindLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.lightColorblind);
48-
export const githubTritanopiaLightSyntax: GitHubSyntax = primer2GitHubSyntax(primer.lightTritanopia);
58+
export const githubDarkSyntax = primer2GitHubSyntax(primer.dark);
59+
export const githubSoftDarkSyntax = primer2GitHubSyntax(primer.darkDimmed);
60+
export const githubColorblindDarkSyntax = primer2GitHubSyntax(primer.darkColorblind);
61+
export const githubTritanopiaDarkSyntax = primer2GitHubSyntax(primer.darkTritanopia);
62+
export const githubLightSyntax = primer2GitHubSyntax(primer.light);
63+
export const githubColorblindLightSyntax = primer2GitHubSyntax(primer.lightColorblind);
64+
export const githubTritanopiaLightSyntax = primer2GitHubSyntax(primer.lightTritanopia);
65+
66+
export const githubDarkHighContrastSyntax = primer2GitHubSyntax(primer.darkHighContrast);
67+
export const githubDarkColorblindHighContrastSyntax = primer2GitHubSyntax(primer.darkColorblindHighContrast);
68+
export const githubDarkTritanopiaHighContrastSyntax = primer2GitHubSyntax(primer.darkTritanopiaHighContrast);
69+
export const githubSoftDarkHighContrastSyntax = primer2GitHubSyntax(primer.darkDimmedHighContrast);
70+
export const githubLightHighContrastSyntax = primer2GitHubSyntax(primer.lightHighContrast);
71+
export const githubLightColorblindHighContrastSyntax = primer2GitHubSyntax(primer.lightColorblindHighContrast);
72+
export const githubLightTritanopiaHighContrastSyntax = primer2GitHubSyntax(primer.lightTritanopiaHighContrast);
4973

5074
export const githubDarkTheme = defineTheme({
5175
colorType: "github",
@@ -83,6 +107,42 @@ export const githubTritanopiaLightTheme = defineTheme({
83107
syntaxColor: githubTritanopiaLightSyntax,
84108
});
85109

110+
export const githubDarkHighContrastTheme = defineTheme({
111+
colorType: "github",
112+
themeColor: githubDarkHighContrastColor,
113+
syntaxColor: githubDarkHighContrastSyntax,
114+
});
115+
export const githubDarkColorblindHighContrastTheme = defineTheme({
116+
colorType: "github",
117+
themeColor: githubDarkColorblindHighContrastColor,
118+
syntaxColor: githubDarkColorblindHighContrastSyntax,
119+
});
120+
export const githubDarkTritanopiaHighContrastTheme = defineTheme({
121+
colorType: "github",
122+
themeColor: githubDarkTritanopiaHighContrastColor,
123+
syntaxColor: githubDarkTritanopiaHighContrastSyntax,
124+
});
125+
export const githubSoftDarkHighContrastTheme = defineTheme({
126+
colorType: "github",
127+
themeColor: githubSoftDarkHighContrastColor,
128+
syntaxColor: githubSoftDarkHighContrastSyntax,
129+
});
130+
export const githubLightHighContrastTheme = defineTheme({
131+
colorType: "github",
132+
themeColor: githubLightHighContrastColor,
133+
syntaxColor: githubLightHighContrastSyntax,
134+
});
135+
export const githubLightColorblindHighContrastTheme = defineTheme({
136+
colorType: "github",
137+
themeColor: githubLightColorblindHighContrastColor,
138+
syntaxColor: githubLightColorblindHighContrastSyntax,
139+
});
140+
export const githubLightTritanopiaHighContrastTheme = defineTheme({
141+
colorType: "github",
142+
themeColor: githubLightTritanopiaHighContrastColor,
143+
syntaxColor: githubLightTritanopiaHighContrastSyntax,
144+
});
145+
86146
export default {
87147
githubDarkTheme,
88148
githubSoftDarkTheme,
@@ -91,4 +151,11 @@ export default {
91151
githubLightTheme,
92152
githubColorblindLightTheme,
93153
githubTritanopiaLightTheme,
154+
githubDarkHighContrastTheme,
155+
githubDarkColorblindHighContrastTheme,
156+
githubDarkTritanopiaHighContrastTheme,
157+
githubSoftDarkHighContrastTheme,
158+
githubLightHighContrastTheme,
159+
githubLightColorblindHighContrastTheme,
160+
githubLightTritanopiaHighContrastTheme,
94161
};

‎themes/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@ export default {
4141
light: githubPink.githubPinkLightTheme,
4242
softDark: githubPink.githubPinkSoftDarkTheme,
4343
},
44+
highContrast: {
45+
dark: github.githubDarkHighContrastTheme,
46+
light: github.githubLightHighContrastTheme,
47+
softDark: github.githubSoftDarkHighContrastTheme,
48+
colorblind: {
49+
dark: github.githubDarkColorblindHighContrastTheme,
50+
light: github.githubLightColorblindHighContrastTheme,
51+
},
52+
tritanopia: {
53+
dark: github.githubDarkTritanopiaHighContrastTheme,
54+
light: github.githubLightTritanopiaHighContrastTheme,
55+
},
56+
},
4457
},
4558
gitea: {
4659
dark: giteaDarkTheme,

0 commit comments

Comments
 (0)