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.
55 lines
1.7 KiB
SCSS
55 lines
1.7 KiB
SCSS
// =============================================================================
|
|
// Global stylesheet — imported exactly once, in main.tsx. Contains only
|
|
// truly app-wide rules: the theme tokens and a minimal reset/base styling
|
|
// that every page inherits. Anything specific to one component or page
|
|
// belongs in a .scss file colocated next to that component/page instead.
|
|
// =============================================================================
|
|
|
|
@use "./theme";
|
|
|
|
// Include borders/padding in an element's declared width/height everywhere,
|
|
// rather than the browser default of adding them on top.
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Minimal reset: remove the default body margin so pages can control their
|
|
// own layout without fighting the browser's default 8px margin.
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-base);
|
|
line-height: 1.55;
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
// Headings use the condensed "label" face app-wide — see _theme.scss for
|
|
// the rationale. `text-wrap: balance` avoids a lone short word wrapping
|
|
// onto its own line in multi-line titles.
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
// Default to the page-title size; a heading used as a smaller component
|
|
// title (e.g. the auth card's <h1>) overrides this in its own stylesheet.
|
|
h1 {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
// A visible, consistent focus ring for keyboard navigation — the browser
|
|
// default varies a lot between elements and browsers.
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|