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