@@ -386,7 +386,7 @@ export default function LoginPage({
386386 < h1 className = 'font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]' >
387387 Sign in
388388 </ h1 >
389- < p className = 'font-[430] font-season text-[#F6F6F6 ]/60 text-[18px] leading-[125%] tracking-[0.02em]' >
389+ < p className = 'font-[430] font-season text-[var(--text-primary) ]/60 text-lg leading-[125%] tracking-[0.02em]' >
390390 Enter your details
391391 </ p >
392392 </ div >
@@ -404,7 +404,7 @@ export default function LoginPage({
404404
405405 { /* Password reset success message */ }
406406 { resetSuccessMessage && (
407- < div className = 'mt-1 space-y-1 text-[#4CAF50 ] text-xs' >
407+ < div className = 'mt-1 space-y-1 text-[var(--success) ] text-xs' >
408408 < p > { resetSuccessMessage } </ p >
409409 </ div >
410410 ) }
@@ -459,7 +459,7 @@ export default function LoginPage({
459459 < button
460460 type = 'button'
461461 onClick = { ( ) => setForgotPasswordOpen ( true ) }
462- className = 'font-medium text-[#999 ] text-xs transition hover:text-[#ECECEC ]'
462+ className = 'font-medium text-[var(--text-subtle) ] text-xs transition hover:text-[var(--landing-text) ]'
463463 >
464464 Forgot password?
465465 </ button >
@@ -487,7 +487,7 @@ export default function LoginPage({
487487 < button
488488 type = 'button'
489489 onClick = { ( ) => setShowPassword ( ! showPassword ) }
490- className = '-translate-y-1/2 absolute top-1/2 right-3 text-[#999 ] transition hover:text-[#ECECEC ]'
490+ className = '-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle) ] transition hover:text-[var(--landing-text) ]'
491491 aria-label = { showPassword ? 'Hide password' : 'Show password' }
492492 >
493493 { showPassword ? < EyeOff size = { 18 } /> : < Eye size = { 18 } /> }
@@ -530,10 +530,10 @@ export default function LoginPage({
530530 { showDivider && (
531531 < div className = 'relative my-6 font-light' >
532532 < div className = 'absolute inset-0 flex items-center' >
533- < div className = 'w-full border-[#2A2A2A ] border-t' />
533+ < div className = 'w-full border-[var(--surface-4) ] border-t' />
534534 </ div >
535535 < div className = 'relative flex justify-center text-sm' >
536- < span className = 'bg-[#1C1C1C ] px-4 font-[340] text-[#999 ]' > Or continue with</ span >
536+ < span className = 'bg-[var(--text-primary) ] px-4 font-[340] text-[var(--text-subtle) ]' > Or continue with</ span >
537537 </ div >
538538 </ div >
539539 ) }
@@ -559,24 +559,24 @@ export default function LoginPage({
559559
560560 { /* Only show signup link if email/password signup is enabled */ }
561561 { ! isFalsy ( getEnv ( 'NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED' ) ) && (
562- < div className = 'pt-6 text-center font-light text-[14px] ' >
562+ < div className = 'pt-6 text-center font-light text-sm ' >
563563 < span className = 'font-normal' > Don't have an account? </ span >
564564 < Link
565565 href = { isInviteFlow ? `/signup?invite_flow=true&callbackUrl=${ callbackUrl } ` : '/signup' }
566- className = 'font-medium text-[#ECECEC ] underline-offset-4 transition hover:text-white hover:underline'
566+ className = 'font-medium text-[var(--landing-text) ] underline-offset-4 transition hover:text-white hover:underline'
567567 >
568568 Sign up
569569 </ Link >
570570 </ div >
571571 ) }
572572
573- < div className = 'absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999 ] text-[13px] leading-relaxed sm:px-8 md:px-[44px]' >
573+ < div className = 'absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle) ] text-small leading-relaxed sm:px-8 md:px-[44px]' >
574574 By signing in, you agree to our{ ' ' }
575575 < Link
576576 href = '/terms'
577577 target = '_blank'
578578 rel = 'noopener noreferrer'
579- className = 'text-[#999 ] underline-offset-4 transition hover:text-[#ECECEC ] hover:underline'
579+ className = 'text-[var(--text-subtle) ] underline-offset-4 transition hover:text-[var(--landing-text) ] hover:underline'
580580 >
581581 Terms of Service
582582 </ Link > { ' ' }
@@ -585,7 +585,7 @@ export default function LoginPage({
585585 href = '/privacy'
586586 target = '_blank'
587587 rel = 'noopener noreferrer'
588- className = 'text-[#999 ] underline-offset-4 transition hover:text-[#ECECEC ] hover:underline'
588+ className = 'text-[var(--text-subtle) ] underline-offset-4 transition hover:text-[var(--landing-text) ] hover:underline'
589589 >
590590 Privacy Policy
591591 </ Link >
@@ -635,7 +635,7 @@ export default function LoginPage({
635635 aria-live = 'polite'
636636 >
637637 < div className = 'overflow-hidden' >
638- < div className = 'mt-1 text-[#4CAF50 ] text-xs' >
638+ < div className = 'mt-1 text-[var(--success) ] text-xs' >
639639 < p > { resetStatus . message } </ p >
640640 </ div >
641641 </ div >
0 commit comments