admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: US-009 - Replace hardcoded colors with design tokens

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-15 14:30:21 +00:00
parent fc1581a9ff
commit 615198b080
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LoginScreen.tsx
+16 -16
View File
@@ -163,10 +163,10 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
}, [startLoginSequence, addTimeout, prefersReducedMotion]) }, [startLoginSequence, addTimeout, prefersReducedMotion])
const buttonBg = buttonPressed const buttonBg = buttonPressed
? '#085858' ? 'var(--accent-pressed, #085858)'
: buttonHovered && canLogin : buttonHovered && canLogin
? '#0A8080' ? 'var(--accent-hover, #0A8080)'
: '#0D6E6E' : 'var(--accent, #0D6E6E)'
return ( return (
<motion.div <motion.div
@@ -193,7 +193,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
maxWidth: 'calc(100vw - 32px)', maxWidth: 'calc(100vw - 32px)',
padding: 'clamp(24px, 2.5vw, 40px)', padding: 'clamp(24px, 2.5vw, 40px)',
borderRadius: 'var(--radius-card, 8px)', borderRadius: 'var(--radius-card, 8px)',
border: '1px solid #E4EDEB', border: '1px solid var(--border-light, #E4EDEB)',
boxShadow: 'var(--shadow-lg, 0 8px 32px rgba(26,43,42,0.12))', boxShadow: 'var(--shadow-lg, 0 8px 32px rgba(26,43,42,0.12))',
backgroundColor: 'var(--surface, #FFFFFF)', backgroundColor: 'var(--surface, #FFFFFF)',
}} }}
@@ -217,8 +217,8 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
width: '32px', width: '32px',
height: '32px', height: '32px',
border: '3px solid #E4EDEB', border: '3px solid var(--border-light, #E4EDEB)',
borderTopColor: '#0D6E6E', borderTopColor: 'var(--accent, #0D6E6E)',
borderRadius: '50%', borderRadius: '50%',
}} }}
role="status" role="status"
@@ -294,9 +294,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
fontFamily: "'Geist Mono', 'Fira Code', monospace", fontFamily: "'Geist Mono', 'Fira Code', monospace",
fontSize: 'clamp(13px, 1.1vw, 15px)', fontSize: 'clamp(13px, 1.1vw, 15px)',
backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)', backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB', border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
borderRadius: 'var(--radius-sm, 6px)', borderRadius: 'var(--radius-sm, 6px)',
color: '#111827', color: 'var(--text-primary, #1A2B2A)',
minHeight: '38px', minHeight: '38px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@@ -306,7 +306,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
<span>{username}</span> <span>{username}</span>
{activeField === 'username' && ( {activeField === 'username' && (
<span <span
style={{ opacity: showCursor ? 1 : 0, color: '#0D6E6E' }} style={{ opacity: showCursor ? 1 : 0, color: 'var(--accent, #0D6E6E)' }}
aria-hidden="true" aria-hidden="true"
> >
| |
@@ -336,9 +336,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
fontFamily: "'Geist Mono', 'Fira Code', monospace", fontFamily: "'Geist Mono', 'Fira Code', monospace",
fontSize: 'clamp(13px, 1.1vw, 15px)', fontSize: 'clamp(13px, 1.1vw, 15px)',
backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)', backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB', border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
borderRadius: 'var(--radius-sm, 6px)', borderRadius: 'var(--radius-sm, 6px)',
color: '#111827', color: 'var(--text-primary, #1A2B2A)',
letterSpacing: '0.15em', letterSpacing: '0.15em',
minHeight: '38px', minHeight: '38px',
display: 'flex', display: 'flex',
@@ -349,7 +349,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
<span>{'\u2022'.repeat(passwordDots)}</span> <span>{'\u2022'.repeat(passwordDots)}</span>
{activeField === 'password' && ( {activeField === 'password' && (
<span <span
style={{ opacity: showCursor ? 1 : 0, color: '#0D6E6E' }} style={{ opacity: showCursor ? 1 : 0, color: 'var(--accent, #0D6E6E)' }}
aria-hidden="true" aria-hidden="true"
> >
| |
@@ -365,7 +365,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
disabled={!canLogin} disabled={!canLogin}
onMouseEnter={() => setButtonHovered(true)} onMouseEnter={() => setButtonHovered(true)}
onMouseLeave={() => setButtonHovered(false)} onMouseLeave={() => setButtonHovered(false)}
className={`focus-visible:ring-2 focus-visible:ring-[#0D6E6E]/40 focus-visible:ring-offset-2 focus:outline-none${canLogin && !buttonPressed ? ' login-pulse-active' : ''}`} className={`focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus:outline-none${canLogin && !buttonPressed ? ' login-pulse-active' : ''}`}
style={{ style={{
width: '100%', width: '100%',
padding: '10px 16px', padding: '10px 16px',
@@ -399,7 +399,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
width: '10px', width: '10px',
height: '10px', height: '10px',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: connectionState === 'connected' ? '#059669' : '#DC2626', backgroundColor: connectionState === 'connected' ? 'var(--success, #059669)' : 'var(--alert, #DC2626)',
boxShadow: connectionState === 'connected' boxShadow: connectionState === 'connected'
? '0 0 6px 1px rgba(5,150,105,0.4)' ? '0 0 6px 1px rgba(5,150,105,0.4)'
: '0 0 6px 1px rgba(220,38,38,0.4)', : '0 0 6px 1px rgba(220,38,38,0.4)',
@@ -411,7 +411,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
fontFamily: "var(--font-geist-mono, 'Geist Mono', monospace)", fontFamily: "var(--font-geist-mono, 'Geist Mono', monospace)",
fontSize: '12px', fontSize: '12px',
color: connectionState === 'connected' ? '#059669' : '#DC2626', color: connectionState === 'connected' ? 'var(--success, #059669)' : 'var(--alert, #DC2626)',
transition: prefersReducedMotion ? 'none' : 'color 300ms ease', transition: prefersReducedMotion ? 'none' : 'color 300ms ease',
}} }}
> >
@@ -427,7 +427,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
style={{ style={{
marginTop: '22px', marginTop: '22px',
paddingTop: '18px', paddingTop: '18px',
borderTop: '1px solid #E4EDEB', borderTop: '1px solid var(--border-light, #E4EDEB)',
}} }}
> >
<p <p
src/index.css
+1
View File
@@ -106,6 +106,7 @@
--text-tertiary: #8DA8A5; --text-tertiary: #8DA8A5;
--accent: #0D6E6E; --accent: #0D6E6E;
--accent-hover: #0A8080; --accent-hover: #0A8080;
--accent-pressed: #085858;
--accent-light: rgba(10,128,128,0.08); --accent-light: rgba(10,128,128,0.08);
--accent-border: rgba(10,128,128,0.18); --accent-border: rgba(10,128,128,0.18);
--amber: #D97706; --amber: #D97706;