oiupoyt/token-contribution
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: simplified monochromatic gradient from black to vibrant DeepSeek blue

Browse source
This commit is contained in:
katR 2026-10-09 13:15:57 +05:30
parent 9c46847e40
commit 87eba045a5
4 changed files with 42 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
lib/client.js
View file

@ -52,11 +52,16 @@ function formatExact(num) {
var MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var DAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
var DEEPSEEK_LEVELS = [
"rgba(57, 100, 254, 0.06)",
"#1c2d68",
"#2849b8",
"#3964fe",
"#5686fe"
"#0f1117",
// Level 0: Black / dark void tile
"#152c6f",
// Level 1: Dark deep blue
"#1f4cdb",
// Level 2: Medium vibrant blue
"#336dfa",
// Level 3: Vibrant DeepSeek brand blue
"#4f85ff"
// Level 4: Bright electric DeepSeek blue
];
function HeatmapView() {
const [data, setData] = (0, import_react.useState)(null);
@ -270,9 +275,9 @@ function HeatmapView() {
fontWeight: 600,
padding: "2px 8px",
borderRadius: 12,
background: "rgba(57, 100, 254, 0.12)",
color: "#5686fe",
border: "1px solid rgba(57, 100, 254, 0.3)"
background: "rgba(51, 109, 250, 0.12)",
color: "#4f85ff",
border: "1px solid rgba(51, 109, 250, 0.35)"
}
},
"52 Weeks"
@ -350,7 +355,7 @@ function HeatmapView() {
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Total Tokens"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#5686fe" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " tokens")
),
/* @__PURE__ */ import_react.default.createElement(
@ -538,7 +543,7 @@ function HeatmapView() {
month: "short",
day: "numeric"
})),
hoveredDay.stats.totalTokens === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "var(--dsw-alias-label-tertiary)" } }, "No activity recorded") : /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#5686fe", fontWeight: 600 } }, formatExact(hoveredDay.stats.totalTokens), " tokens"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary)", marginTop: 2 } }, hoveredDay.stats.turns, " requests / steps"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)", marginTop: 4 } }, "Billed: ", formatNumber(hoveredDay.stats.inputTokens + hoveredDay.stats.outputTokens), " \xB7 Cache: ", formatNumber(hoveredDay.stats.cacheReadTokens)))
hoveredDay.stats.totalTokens === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "var(--dsw-alias-label-tertiary)" } }, "No activity recorded") : /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#4f85ff", fontWeight: 600 } }, formatExact(hoveredDay.stats.totalTokens), " tokens"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary)", marginTop: 2 } }, hoveredDay.stats.turns, " requests / steps"), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)", marginTop: 4 } }, "Billed: ", formatNumber(hoveredDay.stats.inputTokens + hoveredDay.stats.outputTokens), " \xB7 Cache: ", formatNumber(hoveredDay.stats.cacheReadTokens)))
)
);
}
@ -671,22 +676,22 @@ function apply(ctx) {
width: 100%;
margin-top: 12px;
padding: 8px 12px;
background: rgba(57, 100, 254, 0.12);
border: 1px solid rgba(57, 100, 254, 0.35);
background: rgba(51, 109, 250, 0.12);
border: 1px solid rgba(51, 109, 250, 0.35);
border-radius: 8px;
color: #5686fe;
color: #4f85ff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(57, 100, 254, 0.22)";
button.style.borderColor = "#3964fe";
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
};
button.onmouseleave = () => {
button.style.background = "rgba(57, 100, 254, 0.12)";
button.style.borderColor = "rgba(57, 100, 254, 0.35)";
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
};
button.onclick = (e) => {
e.preventDefault();

4
lib/client.js.map
View file

File diff suppressed because one or more lines are too long

22
src/client/HeatmapView.tsx
View file

@ -57,13 +57,13 @@ function formatExact(num: number): string {
const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const DAY_LABELS = ["", "Mon", "", "Wed", "", "Fri", ""];
// DeepSeek Official Blue Gradient (anchored on DeepSeek logo #3964FE and highlight #5686FE)
// Simple monochromatic gradient: Black -> Vibrant DeepSeek Blue
const DEEPSEEK_LEVELS = [
"rgba(57, 100, 254, 0.06)",
"#1c2d68",
"#2849b8",
"#3964fe",
"#5686fe",
"#0f1117", // Level 0: Black / dark void tile
"#152c6f", // Level 1: Dark deep blue
"#1f4cdb", // Level 2: Medium vibrant blue
"#336dfa", // Level 3: Vibrant DeepSeek brand blue
"#4f85ff", // Level 4: Bright electric DeepSeek blue
];
export function HeatmapView() {
@ -321,9 +321,9 @@ export function HeatmapView() {
fontWeight: 600,
padding: "2px 8px",
borderRadius: 12,
background: "rgba(57, 100, 254, 0.12)",
color: "#5686fe",
border: "1px solid rgba(57, 100, 254, 0.3)",
background: "rgba(51, 109, 250, 0.12)",
color: "#4f85ff",
border: "1px solid rgba(51, 109, 250, 0.35)",
}}
>
52 Weeks
@ -412,7 +412,7 @@ export function HeatmapView() {
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
Total Tokens
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#5686fe" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" }}>
{formatNumber(summary.totalTokens)}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -660,7 +660,7 @@ export function HeatmapView() {
<div style={{ color: "var(--dsw-alias-label-tertiary)" }}>No activity recorded</div>
) : (
<div>
<div style={{ color: "#5686fe", fontWeight: 600 }}>
<div style={{ color: "#4f85ff", fontWeight: 600 }}>
{formatExact(hoveredDay.stats.totalTokens)} tokens
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary)", marginTop: 2 }}>

14
src/client/index.tsx
View file

@ -78,22 +78,22 @@ export function apply(ctx: any) {
width: 100%;
margin-top: 12px;
padding: 8px 12px;
background: rgba(57, 100, 254, 0.12);
border: 1px solid rgba(57, 100, 254, 0.35);
background: rgba(51, 109, 250, 0.12);
border: 1px solid rgba(51, 109, 250, 0.35);
border-radius: 8px;
color: #5686fe;
color: #4f85ff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(57, 100, 254, 0.22)";
button.style.borderColor = "#3964fe";
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
};
button.onmouseleave = () => {
button.style.background = "rgba(57, 100, 254, 0.12)";
button.style.borderColor = "rgba(57, 100, 254, 0.35)";
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
};
button.onclick = (e) => {
e.preventDefault();