[Juwang110]

ℹ️ Issue

Closes MSPCA-32

📝 Description

Adds Chakra UI v3 and a theme.ts with the brand colors and typography from the MSPCA UI Kit in Figma, so frontend pages can use named tokens like color="blue.primary" or textStyle="h3" instead of hardcoded hex codes and font sizes. Changing a value in theme.ts changes it across the whole app.

Changes:

1. Installed @chakra-ui/react (v3.37) and @emotion/react.
2. Added apps/frontend/src/theme.ts, built from the Figma file's variables and text styles:
   • colors holds every brand color's hex code (black, gray 0–900, error, blue, orange, green, teal, brown, neutrals, and the Trello foster-restriction label colors). It's exported for places where Chakra props aren't available, and the same values are registered as Chakra tokens (blue.primary, trello.dogFreeHome, ...).
   • black is pure #000000, which Figma uses directly in fg, text.fg, and bg.inverted. It replaces Chakra's default black (#09090B). It's not the same as the brand black neutrals.black (#231f20).
   • Semantic tokens (bg, fg, border, text, neutral) use the Figma values in place of Chakra's defaults.
   • Typography: Montserrat for headings and body, weights thin–black, and text styles h1–h7, body, body-small, xs, and 2xs (defined with defineTextStyles). Figma only has font sizes for xs (12/10px) and 2xs (10/8px), with no text style or line height, so those two use Chakra's default line heights (1rem and 0.75rem). Each text style includes its weight (semibold for headings, normal for body), so <Text textStyle="h3"> looks the same as a plain <h3>, and a fontWeight prop can still override it. Figma defines Desktop and Mobile sizes, so each text style uses the mobile size below Chakra's md breakpoint (768px) and the desktop size above it.
   • Common tags get typography by default through globalCss: body, h1–h6, p, li, label, small, figcaption, a, and form controls.
3. Wrapped the app in <ChakraProvider value={system}> in main.tsx, outside the auth branch so both paths get the theme.
4. Loaded Montserrat from Google Fonts in index.html as a variable font (wght@100..900), so every weight token works from a single font file.
5. Imported @aws-amplify/ui-react/styles.css in main.tsx. The Amplify sign-in form never had its stylesheet and relied on browser defaults, which Chakra's CSS reset removes (inputs lost their borders and buttons looked like plain text). With the stylesheet, it renders Amplify's styled sign-in card. This adds ~30 kB of gzipped CSS.

Radii and spacing aren't overridden: the Figma values match Chakra's defaults.

✔️ Verification

• npx nx run frontend:typecheck, npx nx lint frontend, and npx nx build frontend pass.
• Ran npx nx serve frontend and checked computed styles in the browser for each tag:
  • Desktop: h1 60/90px, h2 48/72, h3 36/54, h4 30/46, h5 24/36, h6 20/30, p 16/24, small 14/20, all Montserrat. This matches the Figma text styles.
  • At 390px wide, sizes switch to the Figma mobile values (h1 36px down to p 14px).
  • <Text textStyle="h3"> and <Heading textStyle="h2"> match the plain tags (36px/600 and 48px/600), and fontWeight="bold" overrides to 700.
  • With COGNITO_* set, the Amplify sign-in form renders as a styled card (bordered inputs, filled button) in Montserrat at desktop and mobile widths.
  • The CSS variables resolve to the Figma hex codes (e.g. --chakra-colors-blue-primary = #009cde; --chakra-colors-fg, -text-fg, and -bg-inverted = #000000 via colors.black), and there are no console errors.
  • textStyle="xs" / "2xs" produce 10px / 8px on mobile and 12px / 10px from md up.
  • Montserrat weights 100 and 900 both load.
• nx test frontend was already failing on main (parseCLI is not a function: the @nx/vite:test executor doesn't support vitest 0.32). Running npx vitest run directly in apps/frontend gives the same result before and after this change: the stale "Welcome frontend" assertion fails and apiClient logs network errors.

To try a token, render something like <Heading as="h2" textStyle="h2" color="blue.primary">Hello</Heading> or <Text textStyle="body-small" color="fg.muted">...</Text> in root.tsx. If COGNITO_USER_POOL_ID and COGNITO_CLIENT_ID are set in .env, the sign-in form shows first, so comment them out (and restart the dev server) to see the page directly.

🏕️ (Optional) Future Work / Notes

[dburkhart07]

looks very good aside from a few small things. tysm for this justin!!!

[pujitakalinadhabhotla]

looks good!