6302310dba
Fills in the design tokens proposed for the app (palette, type scale, shadows/radii, and a real dark theme) and applies them to the existing auth and home pages: - _theme.scss: full token set — basil/vermillion/turmeric/raspberry palette, heading type scale (was missing above --font-size-base), elevation/radius scale, and a working dark theme via prefers-color-scheme (color-scheme: light dark was declared but unused). Includes a 3-tier allergen/intolerance color scale, kept distinct from --color-error, for when the recipe/allergy feature lands — not yet consumed by any component. - global.scss: box-sizing reset, headings on the display font stack, visible focus ring. - auth-form.scss / HomePage.scss(+tsx): both screens now render their content on a raised card (--color-surface, radius, shadow) instead of directly on the page background, so login/signup and home read as one coherent app. Also adds .claude/launch.json (pnpm --filter web dev, port 5173) used to preview the change locally. Verified: `vite build` passes; computed styles checked live against the token values in both themes.
113 lines
3.3 KiB
SCSS
113 lines
3.3 KiB
SCSS
// =============================================================================
|
|
// Styles shared by LoginPage and SignupPage — both render the same card/form
|
|
// layout, so this lives in features/auth/ (the concern both pages share)
|
|
// rather than being duplicated in each page's own stylesheet. Imported by
|
|
// both LoginPage.tsx and SignupPage.tsx.
|
|
// =============================================================================
|
|
|
|
// No `@use` of the theme partial needed here: every design token below is a
|
|
// CSS custom property (--color-*, --space-*...) declared once on :root in
|
|
// styles/global.scss and available globally at runtime — not a Sass-level
|
|
// variable/mixin that would require an explicit compile-time import.
|
|
|
|
// Full-viewport centering wrapper for the auth card.
|
|
.auth-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-md);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
// The form itself: a vertically-stacked card, capped width so it stays
|
|
// readable on wide screens. Raised on its own surface (rather than sitting
|
|
// directly on the page background) so it reads as one focused task.
|
|
.auth-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
width: 100%;
|
|
max-width: var(--max-width-form);
|
|
padding: var(--space-xl);
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
|
|
// Card title — smaller than the global page-title size (h1 defaults to
|
|
// --font-size-2xl), since here it's heading a card, not the page.
|
|
h1 {
|
|
font-size: var(--font-size-lg);
|
|
text-align: center;
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
|
|
// Field labels sit directly above their input, with a little breathing
|
|
// room from the previous field.
|
|
label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
input {
|
|
padding: var(--space-sm);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
// Submit button: full-width, visually separated from the fields above it.
|
|
button {
|
|
margin-top: var(--space-md);
|
|
padding: 0.6rem;
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-base);
|
|
border: none;
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Per-field validation message (client-side, from zod) — sits directly
|
|
// under its input.
|
|
.field-error {
|
|
color: var(--color-error);
|
|
font-size: var(--font-size-xs);
|
|
margin: 0;
|
|
}
|
|
|
|
// Whole-form error message (from the API, e.g. wrong credentials) — sits
|
|
// above the submit button.
|
|
.form-error {
|
|
color: var(--color-error);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
// "Already have an account? / No account yet?" link row under the form.
|
|
.auth-switch {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--space-md);
|
|
text-align: center;
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
}
|