grant/recap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate UI colors behind CSS custom properties; fix design drift

Browse Source 
Phase 1 of the design-contract conformance cleanup. Add a canonical
:root token block (single source of truth, mirroring
design/tokens.tokens.json) to public/index.html's stylesheet and migrate
the whole <style> block to var(--token); give public/auth.html its own
subset :root and migrate it too.

Fix all color + weight drift across every surface (stylesheet, inline
styles, JS handlers, the SHARE_PAGE_CSS export):
- legacy indigos #6366f1/#4f46e5/#4338ca + rgba(99,102,241) ->
  #818cf8/#a5b4fc/rgba(129,140,248)
- blue #3b82f6 interactive buttons (incl. the whole auth screen) -> indigo
- legacy darks #0a0e17/#0b1120/#020617/#121828/#1f2942 -> the surface ladder
- #f5f9ff -> #f1f5f9, #312e81 -> #1e293b, weights 650->600 / 680->700

The meta theme-color stays a literal #0a0e1a. Verified: 144 tests pass,
both pages serve 200, all var() references resolve. Phase 2 (var-ifying
the long-tail inline styles, snapping off-scale font/radius) is in
ROADMAP.md.
This commit is contained in:
Keysat
2026-06-16 23:36:42 -05:00
parent 1741fb11a5
commit 211287aed5
4 changed files with 488 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/auth.html
+50 -31
View File
@@ -30,12 +30,31 @@
<link rel="icon" type="image/png" href="/assets/icon.png">
<style>
/* Design tokens (subset used by this page) — mirror of design/tokens.tokens.json.
This is a standalone document, so it carries its own copy; keep it in sync with
the canonical :root in index.html. Accent is indigo, not the old blue. */
:root {
--bg: #0a0e1a;
--surface: #111827;
--border: #1e293b;
--accent: #818cf8;
--accent-hover: #a5b4fc;
--text: #e2e8f0;
--text-strong: #f1f5f9;
--text-body: #cbd5e1;
--text-muted: #94a3b8;
--text-label: #64748b;
--text-faint: #475569;
--error-soft: #fca5a5;
--success-text: #4ade80;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0a0e1a;
color: #e2e8f0;
background: var(--bg);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
@@ -44,8 +63,8 @@
.card {
width: 100%;
max-width: 420px;
background: #121828;
border: 1px solid #1f2942;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px 28px;
}
@@ -56,65 +75,65 @@
margin-bottom: 28px;
}
.logo img { width: 32px; height: 32px; border-radius: 6px; }
.logo span { font-size: 18px; font-weight: 600; color: #f5f9ff; }
.logo span { font-size: 18px; font-weight: 600; color: var(--text-strong); }
h1 {
font-size: 22px;
font-weight: 600;
color: #f5f9ff;
color: var(--text-strong);
margin-bottom: 8px;
}
p.lede {
font-size: 14px;
line-height: 1.55;
color: #94a3b8;
color: var(--text-muted);
margin-bottom: 24px;
}
label {
display: block;
font-size: 13px;
font-weight: 500;
color: #cbd5e1;
color: var(--text-body);
margin-bottom: 8px;
}
input[type=email],
input[type=password] {
width: 100%;
background: #0a0e1a;
border: 1px solid #1f2942;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
font-size: 15px;
color: #f5f9ff;
font-size: 16px;
color: var(--text-strong);
font-family: inherit;
outline: none;
transition: border-color 0.15s ease;
/* Browsers auto-fill password fields with their own bright
background; -webkit-text-fill-color + a long inset shadow
override that so the field stays on-brand. */
-webkit-text-fill-color: #f5f9ff;
-webkit-box-shadow: 0 0 0 1000px #0a0e1a inset;
caret-color: #f5f9ff;
-webkit-text-fill-color: var(--text-strong);
-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
caret-color: var(--text-strong);
}
input[type=email]:focus,
input[type=password]:focus { border-color: #3b82f6; }
input[type=password]:focus { border-color: var(--accent); }
input[type=email]::placeholder,
input[type=password]::placeholder { color: #475569; }
input[type=password]::placeholder { color: var(--text-faint); }
button {
width: 100%;
margin-top: 16px;
background: #3b82f6;
background: var(--accent);
color: white;
border: none;
border-radius: 8px;
padding: 12px 14px;
font-size: 15px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
font-family: inherit;
}
button:hover:not(:disabled) { background: #2563eb; }
button:disabled { background: #1e3a8a; cursor: not-allowed; opacity: 0.6; }
button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { background: var(--border); cursor: not-allowed; opacity: 0.6; }
.feedback {
margin-top: 20px;
padding: 14px 16px;
@@ -124,26 +143,26 @@
display: none;
}
.feedback.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #6ee7b7;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: var(--success-text);
display: block;
}
.feedback.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
color: var(--error-soft);
display: block;
}
.footer {
margin-top: 28px;
font-size: 12px;
color: #64748b;
color: var(--text-label);
text-align: center;
line-height: 1.5;
}
.footer a { color: #94a3b8; text-decoration: none; }
.footer a:hover { color: #cbd5e1; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--text-body); }
/* Password group hidden by default — most users want the magic
link and the optional-password field cluttered the form. The
"Use password instead" link below the submit button reveals
@@ -153,14 +172,14 @@
text-align: center;
margin-top: 14px;
font-size: 12px;
color: #64748b;
color: var(--text-label);
}
.toggle-pwd-row a {
color: #94a3b8;
color: var(--text-muted);
text-decoration: underline;
cursor: pointer;
}
.toggle-pwd-row a:hover { color: #cbd5e1; }
.toggle-pwd-row a:hover { color: var(--text-body); }
</style>
</head>
<body>
public/index.html
+408 -370
View File
File diff suppressed because it is too large Load Diff