heatmap 迁移

This commit is contained in:
lutinglt
2025-07-06 00:27:10 +08:00
parent 7fe76d6444
commit 98446a9bb3
7 changed files with 130 additions and 51 deletions

1
.github/release.md vendored
View File

@@ -27,6 +27,7 @@
- Code/Runner/PR 提示框样式同步
- 下拉菜单样式同步
- 选择下拉菜单样式同步
- 热力图颜色和样式同步
## 🎈 Perf

View File

@@ -121,6 +121,21 @@ export type GithubColor = {
bgColor: string;
};
};
contribution: {
default: {
bgColor: {
num0: string;
num1: string;
num2: string;
num3: string;
num4: string;
num5: string;
};
borderColor: {
num0: string;
};
};
};
};
export function defineGithubTheme(githubColor: GithubColor): Theme {
@@ -343,6 +358,26 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
},
},
contribution: {
default: {
bgColor: {
num0: githubColor.contribution.default.bgColor.num0,
num1: githubColor.contribution.default.bgColor.num1,
num2: githubColor.contribution.default.bgColor.num2,
num3: githubColor.contribution.default.bgColor.num3,
num4: githubColor.contribution.default.bgColor.num4,
num5: githubColor.contribution.default.bgColor.num5,
},
borderColor: {
num0: githubColor.contribution.default.borderColor.num0,
num1: themeVars.github.contribution.default.borderColor.num0,
num2: themeVars.github.contribution.default.borderColor.num0,
num3: themeVars.github.contribution.default.borderColor.num0,
num4: themeVars.github.contribution.default.borderColor.num0,
num5: themeVars.github.contribution.default.borderColor.num0,
},
},
},
};
return defineTheme({
isDarkTheme: githubColor.isDarkTheme,

View File

@@ -175,4 +175,31 @@ export const github = {
small: null,
},
},
/** 热力图 */
contribution: {
default: {
bgColor: {
num0: null,
num1: null,
num2: null,
num3: null,
num4: null,
/** github 无此颜色需自行计算
* @example 可参考这个颜色 `--color-prettylights-syntax-string-regexp`
*/
num5: null,
},
borderColor: {
num0: null,
num1: null,
num2: null,
num3: null,
num4: null,
/** github 无此颜色需自行计算
* @example 目前均取 num0 的值
*/
num5: null,
},
},
},
};

View File

@@ -1,51 +0,0 @@
// Made by Luting ^-^
.vch__day__square,
.vch__legend__wrapper rect {
rx: 2px;
ry: 2px;
width: 9px;
height: 9px;
outline: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 0.5px;
outline-offset: -1px;
}
.vch__legend__wrapper rect {
rx: 3px;
ry: 3px;
border-radius: 1px;
}
.vch__day__square,
.vch__legend__wrapper rect {
&[style="fill: var(--color-secondary-alpha-60);"] {
outline: 1px solid rgba(27, 31, 35, 0.06);
background: #161b22;
fill: #161b22 !important;
}
&[style="fill: var(--color-primary-light-4);"] {
background: #0e4429;
fill: #0e4429 !important;
}
&[style="fill: var(--color-primary-light-2);"] {
background: #006d32;
fill: #006d32 !important;
}
&[style="fill: var(--color-primary);"] {
background: #238636;
fill: #238636 !important;
}
&[style="fill: var(--color-primary-dark-2);"] {
background: #39d353;
fill: #39d353 !important;
}
&[style="fill: var(--color-primary-dark-4);"] {
background: #44ff61;
fill: #44ff61 !important;
}
}

View File

@@ -0,0 +1,51 @@
import { css, themeVars } from "src/types/vars";
export const heatmap = css`
.vch__container {
// 覆盖热力图和图例的背景色
.vch__day__square,
.vch__legend__wrapper rect {
// 圆角
rx: 2.5px;
ry: 2.5px;
// hover 时的圆角
border-radius: 0.75px;
// 宽度和高度可以用来控制间隔
width: 9.5px;
height: 9.5px;
// 边框
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
// 边框向内偏移
outline-offset: -0.5px;
&[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};
}
}
}
`;

View File

@@ -2,6 +2,7 @@ import "./actions";
import "./clone";
import "./dashboard";
import "./diff";
import "./heatmap";
import "./issue";
import "./repo";
import "./setting";

View File

@@ -119,6 +119,21 @@ const github: GithubColor = {
bgColor: "#21283066",
},
},
contribution: {
default: {
bgColor: {
num0: "#151b23",
num1: "#033a16",
num2: "#196c2e",
num3: "#2ea043",
num4: "#56d364",
num5: "#7ee787",
},
borderColor: {
num0: "#0104090d",
},
},
},
};
export default defineGithubTheme(github);