Nicolas
5bc3dc9d08
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.
55 lines
1.7 KiB
SCSS
55 lines
1.7 KiB
SCSS
// =============================================================================
|
|
// Styles specific to HomePage — colocated next to HomePage.tsx since nothing
|
|
// else uses these classes.
|
|
// =============================================================================
|
|
|
|
// 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, mirroring .auth-page's layout so the app
|
|
// doesn't visually jump between the login/signup screens and the home page.
|
|
.home-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-md);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
// The greeting itself sits on its own surface, same treatment as the auth
|
|
// card, so the two screens read as one coherent app rather than two.
|
|
.home-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-xl);
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
text-align: center;
|
|
|
|
p {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
button {
|
|
padding: 0.6rem var(--space-lg);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-base);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
|
|
&:hover {
|
|
background: var(--color-surface-alt);
|
|
}
|
|
}
|
|
}
|