fix(design): purge the last purple from /docs and de-darken /admin/spine #5459
2 changed files+48−40
Modifiedsrc/routes/admin-spine.tsx+44−36View fileUnifiedSplit
@@ -666,60 +666,68 @@ spine.get("/admin/spine", async (c) => {
666666 );
667667});
668668
669/* Tokens only. The previous version referenced tokens that do not exist
670 (--bg-subtle, --border-muted) with GitHub-dark hex fallbacks, so every
671 panel rendered #161b22 even on the light "Natural Light" theme — and the
672 name column (which inherits the page's dark ink) disappeared into it.
673 Every colour below reads a real token from design-tokens.ts, which is
674 defined in BOTH theme blocks, so nothing can fall through to a dark
675 value again. */
669676const spineStyles = `
670677.spine-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;
671 padding:24px;border-radius:12px;margin-bottom:24px;border:1px solid var(--border,#30363d);
672 background:var(--bg-subtle,#161b22)}
673.spine-hero.is-bad{border-color:#f85149;background:linear-gradient(90deg,rgba(248,81,73,.10),transparent)}
674.spine-hero.is-ok{border-color:#238636;background:linear-gradient(90deg,rgba(35,134,54,.10),transparent)}
678 padding:24px;border-radius:12px;margin-bottom:24px;border:1px solid var(--border);
679 background:var(--bg-elevated)}
680.spine-hero.is-bad{border-color:var(--red);background:linear-gradient(90deg,color-mix(in srgb,var(--red) 10%,transparent),transparent)}
681.spine-hero.is-ok{border-color:var(--green);background:linear-gradient(90deg,color-mix(in srgb,var(--green) 10%,transparent),transparent)}
675682.spine-hero-eyebrow{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
676 color:var(--text-muted,#8b949e)}
677.spine-hero-title{margin:0 0 4px;font-size:24px;line-height:1.2}
678.spine-hero-sub{margin:0;color:var(--text-muted,#8b949e);font-size:13px}
683 color:var(--text-muted)}
684.spine-hero-title{margin:0 0 4px;font-size:24px;line-height:1.2;color:var(--text-strong)}
685.spine-hero-sub{margin:0;color:var(--text-muted);font-size:13px}
679686.spine-hero-meta{display:flex;gap:28px;text-align:right}
680.spine-hero-metric{display:block;font-size:20px;font-weight:600}
681.spine-hero-label{display:block;font-size:11px;color:var(--text-muted,#8b949e);
687.spine-hero-metric{display:block;font-size:20px;font-weight:600;color:var(--text-strong)}
688.spine-hero-label{display:block;font-size:11px;color:var(--text-muted);
682689 text-transform:uppercase;letter-spacing:.05em}
683.spine-section{margin-bottom:28px;border:1px solid var(--border,#30363d);border-radius:10px;
684 background:var(--bg-subtle,#161b22);overflow:hidden}
685.spine-section-alert{border-color:#f85149}
690.spine-section{margin-bottom:28px;border:1px solid var(--border);border-radius:10px;
691 background:var(--bg-elevated);overflow:hidden}
692.spine-section-alert{border-color:var(--red)}
686693.spine-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
687 padding:16px 18px;border-bottom:1px solid var(--border,#30363d)}
688.spine-section-title{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px}
689.spine-section-blurb{margin:0;font-size:12px;color:var(--text-muted,#8b949e);max-width:70ch}
690.spine-count{font-size:11px;color:var(--text-muted,#8b949e);white-space:nowrap}
694 padding:16px 18px;border-bottom:1px solid var(--border)}
695.spine-section-title{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px;
696 color:var(--text-strong)}
697.spine-section-blurb{margin:0;font-size:12px;color:var(--text-muted);max-width:70ch}
698.spine-count{font-size:11px;color:var(--text-muted);white-space:nowrap}
691699.spine-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
692.spine-dot-green{background:#3fb950}.spine-dot-yellow{background:#d29922}
693.spine-dot-red{background:#f85149}.spine-dot-idle{background:#8b949e}
694.spine-dot-empty{background:#484f58}
700.spine-dot-green{background:var(--green)}.spine-dot-yellow{background:var(--yellow)}
701.spine-dot-red{background:var(--red)}.spine-dot-idle{background:var(--text-muted)}
702.spine-dot-empty{background:var(--text-faint)}
695703.spine-table-wrap{overflow-x:auto}
696704.spine-table{width:100%;border-collapse:collapse;font-size:13px}
697705.spine-table th{text-align:left;padding:9px 14px;font-size:11px;text-transform:uppercase;
698 letter-spacing:.05em;color:var(--text-muted,#8b949e);border-bottom:1px solid var(--border,#30363d)}
699.spine-table td{padding:9px 14px;border-bottom:1px solid var(--border-muted,#21262d);vertical-align:top}
706 letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border)}
707.spine-table td{padding:9px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
700708.spine-th-c,.spine-td-c{text-align:center}
701.spine-name{font-weight:500;word-break:break-all}
702.spine-detail{color:var(--text-muted,#8b949e);font-size:12px;max-width:52ch}
703.spine-muted{color:var(--text-muted,#8b949e);font-size:12px;white-space:nowrap}
704.spine-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
709.spine-name{font-weight:500;word-break:break-all;color:var(--text-strong)}
710.spine-detail{color:var(--text-muted);font-size:12px;max-width:52ch}
711.spine-muted{color:var(--text-muted);font-size:12px;white-space:nowrap}
712.spine-mono{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px}
705713.spine-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;
706714 font-weight:600;text-transform:capitalize}
707.spine-pill-green{background:rgba(63,185,80,.15);color:#3fb950}
708.spine-pill-yellow{background:rgba(210,153,34,.15);color:#d29922}
709.spine-pill-red{background:rgba(248,81,73,.15);color:#f85149}
710.spine-sev-minor{background:rgba(139,148,158,.15);color:#8b949e}
711.spine-sev-major{background:rgba(210,153,34,.15);color:#d29922}
712.spine-sev-critical{background:rgba(248,81,73,.15);color:#f85149}
713.spine-out-ok{background:rgba(63,185,80,.15);color:#3fb950}
714.spine-out-warn{background:rgba(210,153,34,.15);color:#d29922}
715.spine-out-bad{background:rgba(248,81,73,.15);color:#f85149}
716.spine-out-idle{background:rgba(139,148,158,.15);color:#8b949e}
715.spine-pill-green{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
716.spine-pill-yellow{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}
717.spine-pill-red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
718.spine-sev-minor{background:color-mix(in srgb,var(--text-muted) 15%,transparent);color:var(--text-muted)}
719.spine-sev-major{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}
720.spine-sev-critical{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
721.spine-out-ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
722.spine-out-warn{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}
723.spine-out-bad{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
724.spine-out-idle{background:color-mix(in srgb,var(--text-muted) 15%,transparent);color:var(--text-muted)}
717725.spine-src-server{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
718726.spine-src-client{background:color-mix(in srgb,var(--accent-warm) 18%,transparent);color:var(--accent-warm)}
719727.spine-section-link{margin-left:auto;align-self:center;font-size:12px;font-weight:600;
720728 color:var(--text-link);text-decoration:none;white-space:nowrap}
721729.spine-section-link:hover{text-decoration:underline}
722.spine-empty{padding:18px;margin:0;color:var(--text-muted,#8b949e);font-size:13px}
730.spine-empty{padding:18px;margin:0;color:var(--text-muted);font-size:13px}
723731.spine-section-links{padding:16px 18px}
724732.spine-links{margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.9}
725733@media (max-width:720px){
Modifiedsrc/routes/docs.tsx+4−4View fileUnifiedSplit
@@ -83,7 +83,7 @@ const docsStyles = `
8383 }
8484 .docs-sidebar-nav a.docs-nav-active {
8585 background: color-mix(in srgb, var(--accent) 14%, transparent);
86 color: #c4b6ff;
86 color: var(--accent);
8787 font-weight: 600;
8888 }
8989
@@ -235,18 +235,18 @@ const docsStyles = `
235235 padding: 1px 5px;
236236 border-radius: 4px;
237237 background: color-mix(in srgb, var(--accent) 10%, transparent);
238 color: #c4b6ff;
238 color: var(--accent);
239239 }
240240 .docs-content pre {
241241 margin: 0 0 var(--space-3);
242242 padding: 16px 18px;
243 background: #0a0c14;
243 background: var(--bg-tertiary);
244244 border: 1px solid var(--border);
245245 border-radius: 10px;
246246 font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
247247 font-size: 13px;
248248 line-height: 1.6;
249 color: #d6d8e3;
249 color: var(--text);
250250 overflow-x: auto;
251251 }
252252 .docs-content pre code {
253253
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts