Skip to content

feat: implement vellum-style dialog treatment for auth surfaces #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhargavi075 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: implement vellum-style dialog treatment for auth surfaces #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5355e8e
fix: Responsive Animated Mobile Navigation
Areeb-coder May 17, 2026
20ee10b
feat: add show/hide password toggle for authentication forms
Areeb-coder May 17, 2026
ef5d768
Added password strength validation to signup
Areeb-coder May 17, 2026
ca90fe6
feat: add vellum-style treatment for auth dialog surfaces
bhargavi075 May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion server/src/routes/auth.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ const roleSchema = z.preprocess(

const registerSchema = z.object({
email: z.string().trim().email(),
password: z.string().min(6),
password: z
.string()
.min(8, 'Password must be at least 8 characters')
.regex(/[A-Z]/, 'Password must contain at least 1 uppercase letter')
.regex(/[0-9]/, 'Password must contain at least 1 number')
.regex(/[!@#$%^&*]/, 'Password must contain at least 1 special character (!@#$%^&*)'),
displayName: z.string().trim().min(1).max(100).optional(),
name: z.string().trim().min(1).max(100).optional(),
role: roleSchema,
Expand Down
19 changes: 18 additions & 1 deletion web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,23 @@ body {
box-shadow: 0 8px 32px 0 var(--glass-shadow);
}

/*
* Vellum Dialog — thin translucent manuscript paper layered over content.
* Used for auth cards, modal overlays, and floating dialogs.
* Slightly more opaque than ambient glass-card to ensure readability
* and visual separation, while preserving the parchment atmosphere.
*/
.vellum-dialog {
background: rgba(237, 232, 216, 0.82);
backdrop-filter: blur(16px) saturate(1.1);
-webkit-backdrop-filter: blur(16px) saturate(1.1);
border: 1px solid rgba(74, 80, 51, 0.22);
box-shadow:
0 2px 0 0 rgba(255, 255, 255, 0.55) inset,
0 16px 48px 0 rgba(62, 68, 40, 0.14),
0 2px 8px 0 rgba(62, 68, 40, 0.06);
}

.glass-border {
border: 1px solid var(--glass-border);
}
Expand All @@ -87,4 +104,4 @@ body {
line-height: 1.8;
font-size: 1.125rem;
color: #2E3318;
}
}
2 changes: 1 addition & 1 deletion web/src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function LoginPage() {

return (
<main className="min-h-screen flex items-center justify-center p-6">
<GlassCard className="w-full max-w-md p-8 space-y-6">
<GlassCard variant="dialog" className="w-full max-w-md p-8 space-y-6">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-serif font-black italic">Welcome Back</h1>
<p className="text-sm opacity-60">Sign in to continue to Writers&apos; Pub.</p>
Expand Down
Loading