From 8b27fa777bc90918204d6801e43ccbd8de987565 Mon Sep 17 00:00:00 2001 From: fullstackjam Date: Tue, 16 Jun 2026 09:13:41 +0800 Subject: [PATCH] style(ui): unify config detail, profile & dashboard with terminal system Bring the remaining surfaces in line with the terminal-native redesign: - replace gradient-text headings with solid mono headings (config title, profile username, dashboard title) - fix font weights 700/800 -> 600 (Geist Mono only loads 400/500/600; heavier weights were rendering faux-bold) - map hardcoded #000/#fff and neon-green shadows to theme tokens - unify profile stat colors and config-card hovers to a single restrained accent instead of a rainbow palette - keep decorative per-config accent stripes and app-icon identity colors Co-Authored-By: Claude Opus 4.8 (1M context) --- .gitignore | 3 ++ src/lib/components/ConfigDetail.svelte | 38 +++++++++--------- src/lib/components/ConfigEditor.svelte | 24 ++++++------ src/routes/[username]/+page.svelte | 53 +++++++++----------------- src/routes/dashboard/+page.svelte | 18 ++++----- src/routes/preview/+page.svelte | 4 +- 6 files changed, 60 insertions(+), 80 deletions(-) diff --git a/.gitignore b/.gitignore index ec035f9..9b6a614 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,6 @@ vite.config.ts.timestamp-* !.claude/skills/ .claude/settings.local.json .dev.vars + +# Playwright MCP scratch artifacts +.playwright-mcp/ diff --git a/src/lib/components/ConfigDetail.svelte b/src/lib/components/ConfigDetail.svelte index e092c47..2afabdc 100644 --- a/src/lib/components/ConfigDetail.svelte +++ b/src/lib/components/ConfigDetail.svelte @@ -552,12 +552,12 @@ height: 64px; border-radius: 50%; border: 2px solid var(--border); - background: linear-gradient(135deg, var(--accent), #3b82f6); - color: #000; + background: var(--bg-tertiary); + color: var(--accent); display: flex; align-items: center; justify-content: center; - font-weight: 700; + font-weight: 600; font-size: 1.5rem; } @@ -584,14 +584,12 @@ } .title { - font-size: 3.5rem; - font-weight: 800; + font-size: clamp(2.2rem, 5vw, 3.2rem); + font-weight: 600; margin: 0 0 16px; - line-height: 1.1; - background: linear-gradient(135deg, var(--text-primary), var(--accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + line-height: 1.05; + letter-spacing: -0.035em; + color: var(--text-primary); } .desc { @@ -663,7 +661,7 @@ align-items: center; gap: 6px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; padding: 10px 18px; border-radius: 8px; @@ -758,7 +756,7 @@ .stat-val { font-size: 2.5rem; - font-weight: 800; + font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 8px; @@ -784,7 +782,7 @@ .section-title { font-size: 1.75rem; - font-weight: 700; + font-weight: 600; margin: 0 0 32px; color: var(--text-primary); } @@ -817,7 +815,7 @@ align-items: center; justify-content: center; font-size: 2rem; - font-weight: 700; + font-weight: 600; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } @@ -852,7 +850,7 @@ align-items: center; justify-content: center; font-size: 1.5rem; - font-weight: 700; + font-weight: 600; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } @@ -995,7 +993,7 @@ .v.badge { background: var(--accent); - color: #000; + color: var(--bg-primary); padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; @@ -1037,7 +1035,7 @@ .code-header button { background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; padding: 6px 14px; border-radius: 6px; @@ -1125,7 +1123,7 @@ .cta-text h3 { font-size: 1.5rem; - font-weight: 700; + font-weight: 600; margin: 0 0 8px; color: var(--text-primary); } @@ -1142,11 +1140,11 @@ gap: 8px; padding: 16px 32px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; border-radius: 12px; font-size: 1rem; - font-weight: 700; + font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; diff --git a/src/lib/components/ConfigEditor.svelte b/src/lib/components/ConfigEditor.svelte index 0fe9d3d..bf0fc05 100644 --- a/src/lib/components/ConfigEditor.svelte +++ b/src/lib/components/ConfigEditor.svelte @@ -715,11 +715,11 @@ .save-btn { padding: 10px 24px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; border-radius: 10px; font-size: 0.88rem; - font-weight: 700; + font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s; @@ -812,7 +812,7 @@ .section-tag { font-size: 0.68rem; - font-weight: 800; + font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); @@ -870,7 +870,7 @@ border: none; color: var(--text-primary); font-size: 2.2rem; - font-weight: 800; + font-weight: 600; font-family: inherit; outline: none; padding: 0; @@ -941,7 +941,7 @@ .vis-pill.active { background: var(--accent); - color: #000; + color: var(--bg-primary); } .alias-field { @@ -1063,8 +1063,8 @@ background: var(--accent); border-radius: 8px; font-size: 0.65rem; - font-weight: 700; - color: #000; + font-weight: 600; + color: var(--bg-primary); line-height: 1.3; } @@ -1110,7 +1110,7 @@ border: 1.5px solid var(--border); border-radius: 4px; font-size: 0.65rem; - font-weight: 700; + font-weight: 600; color: transparent; background: var(--bg-secondary); transition: all 0.15s; @@ -1119,7 +1119,7 @@ .pref-check-on { background: var(--accent); border-color: var(--accent); - color: #000; + color: var(--bg-primary); } .pref-info { @@ -1149,7 +1149,7 @@ padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; - font-weight: 700; + font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; @@ -1373,7 +1373,7 @@ .script-edit-btn:hover { border-color: var(--accent); - background: rgba(34, 197, 94, 0.08); + background: var(--accent-glow); } .script-preview { @@ -1478,7 +1478,7 @@ background: var(--accent); border: none; border-radius: 8px; - color: #000; + color: var(--bg-primary); font-size: 0.82rem; font-weight: 600; font-family: inherit; diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte index 1e7868a..8d8ddd5 100644 --- a/src/routes/[username]/+page.svelte +++ b/src/routes/[username]/+page.svelte @@ -350,23 +350,20 @@ height: 104px; border-radius: 50%; background: var(--accent); - color: #000; + color: var(--bg-primary); display: flex; align-items: center; justify-content: center; - font-weight: 800; + font-weight: 600; font-size: 2.75rem; box-shadow: 0 0 40px var(--accent-glow); } .profile-username { - font-size: 2.75rem; - font-weight: 800; + font-size: 2.4rem; + font-weight: 600; margin-bottom: 12px; - background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-primary); letter-spacing: -0.04em; } @@ -396,7 +393,7 @@ left: 50%; transform: translateX(-50%); background: var(--accent); - color: #000; + color: var(--bg-primary); padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; @@ -472,25 +469,25 @@ } .stat-installs .stat-bar { - background: linear-gradient(90deg, #3b82f6 0%, transparent 100%); + background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); } .stat-installs .stat-value { - color: #3b82f6; + color: var(--accent); } .stat-packages .stat-bar { - background: linear-gradient(90deg, #a855f7 0%, transparent 100%); + background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); } .stat-packages .stat-value { - color: #a855f7; + color: var(--accent); } .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; - font-weight: 700; + font-weight: 600; line-height: 1; } @@ -536,7 +533,7 @@ gap: 8px; padding: 14px 28px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; border-radius: 10px; font-size: 0.95rem; @@ -608,8 +605,8 @@ .config-card[data-color="cyan"] .card-accent { background: #0ea5e9; } .config-card:hover { - transform: translateY(-2px); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); + border-color: var(--border-hover); + box-shadow: 0 0 0 1px var(--accent-glow), 0 14px 40px -22px var(--shadow); } .config-card:hover .card-accent { @@ -617,22 +614,6 @@ opacity: 1; } - .config-card[data-color="green"]:hover { - box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15); - } - - .config-card[data-color="blue"]:hover { - box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15); - } - - .config-card[data-color="purple"]:hover { - box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15); - } - - .config-card[data-color="orange"]:hover { - box-shadow: 0 8px 32px rgba(251, 146, 60, 0.15); - } - .config-card[data-color="pink"]:hover { box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15); } @@ -749,7 +730,7 @@ .install-command .prompt { color: var(--accent); margin-right: 8px; - font-weight: 700; + font-weight: 600; } .copy-button { @@ -819,7 +800,7 @@ .cta-title { font-size: 1.5rem; - font-weight: 700; + font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } @@ -836,7 +817,7 @@ gap: 8px; padding: 14px 28px; background: var(--accent); - color: #000; + color: var(--bg-primary); border: none; border-radius: 10px; font-size: 0.95rem; diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte index 8bdedaa..d4028ba 100644 --- a/src/routes/dashboard/+page.svelte +++ b/src/routes/dashboard/+page.svelte @@ -444,12 +444,10 @@ } .page-title { - font-size: 2.2rem; - font-weight: 800; - background: linear-gradient(135deg, var(--text-primary), var(--accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-size: 1.9rem; + font-weight: 600; + color: var(--text-primary); + letter-spacing: -0.03em; line-height: 1.2; } @@ -577,7 +575,7 @@ .modal-head h3 { font-size: 1.15rem; - font-weight: 700; + font-weight: 600; margin: 0; } @@ -710,13 +708,13 @@ bottom: 24px; left: 50%; transform: translateX(-50%); - background: #22c55e; - color: #000; + background: var(--accent); + color: var(--bg-primary); padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 0.88rem; - box-shadow: 0 4px 24px rgba(34, 197, 94, 0.3); + box-shadow: 0 8px 30px -8px var(--shadow); z-index: 9999; animation: toastIn 0.3s ease-out; } diff --git a/src/routes/preview/+page.svelte b/src/routes/preview/+page.svelte index 8e4c95e..8c69550 100644 --- a/src/routes/preview/+page.svelte +++ b/src/routes/preview/+page.svelte @@ -192,7 +192,7 @@ .page-title { font-size: 1.6rem; - font-weight: 700; + font-weight: 600; } .page-stats { @@ -235,7 +235,7 @@ .btn.primary { background: var(--accent); border: none; - color: #000; + color: var(--bg-primary); } .btn.primary:hover {