MSPCA-32 Add Chakra UI v3 and theme.ts

apps/frontend/index.html

@@ -7,6 +7,12 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap"
+    />
     <link rel="stylesheet" href="/src/styles.css" />
   </head>
   <body>

apps/frontend/src/main.tsx

@@ -1,8 +1,11 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { Authenticator } from '@aws-amplify/ui-react';
+import '@aws-amplify/ui-react/styles.css';
+import { ChakraProvider } from '@chakra-ui/react';
 import { configureAmplify, isAuthEnabled } from './auth/auth.config';
 import App from './app';
+import { system } from './theme';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
@@ -12,15 +15,17 @@ const root = ReactDOM.createRoot(
 configureAmplify();
 
 root.render(
-  isAuthEnabled() ? (
-    <Authenticator>
+  <ChakraProvider value={system}>
+    {isAuthEnabled() ? (
+      <Authenticator>
+        <StrictMode>
+          <App />
+        </StrictMode>
+      </Authenticator>
+    ) : (
       <StrictMode>
         <App />
       </StrictMode>
-    </Authenticator>
-  ) : (
-    <StrictMode>
-      <App />
-    </StrictMode>
-  ),
+    )}
+  </ChakraProvider>,
 );

apps/frontend/src/theme.ts

@@ -0,0 +1,188 @@
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineTextStyles,
+} from '@chakra-ui/react';
+
+export const colors = {
+  black: '#000000',
+  gray: {
+    0: '#ffffff',
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+  },
+  error: {
+    50: '#fef2f2',
+    100: '#ef4444',
+  },
+  blue: {
+    primary: '#009cde',
+    blue2: '#0d5b90',
+    blue3: '#2c4068',
+  },
+  orange: {
+    orange1: '#dea631',
+    orange2: '#e9954b',
+    orange3: '#e17152',
+  },
+  green: {
+    green1: '#88b613',
+    green2: '#769b3d',
+  },
+  teal: {
+    teal: '#4ba2a6',
+  },
+  brown: {
+    brown: '#5e3638',
+  },
+  neutrals: {
+    black: '#231f20',
+    black85: '#4d4d4f',
+    grey: '#858f98',
+  },
+  trello: {
+    noRestrictions: '#174b35',
+    dogFreeHome: '#87b400',
+    catFreeHome: '#9f4b00',
+    activityRestriction: '#5d1f1a',
+    childFreeHome: '#ae2e24',
+    petFreeHome: '#813ea5',
+    requiresMedication: '#1458bc',
+  },
+} as const;
+
+const toColorTokens = (palette: typeof colors) =>
+  Object.fromEntries(
+    Object.entries(palette).map(([group, shades]) => [
+      group,
+      typeof shades === 'string'
+        ? { value: shades }
+        : Object.fromEntries(
+            Object.entries(shades).map(([shade, value]) => [shade, { value }]),
+          ),
+    ]),
+  );
+
+const textStyle = (
+  mobile: string,
+  desktop: string,
+  lineHeight: string,
+  font: 'heading' | 'body' = 'heading',
+) => ({
+  value: {
+    fontFamily: font,
+    fontSize: { base: mobile, md: desktop },
+    fontWeight: font === 'heading' ? 'semibold' : 'normal',
+    lineHeight,
+    letterSpacing: '0',
+  },
+});
+
+const textStyles = defineTextStyles({
+  h1: textStyle('36px', '60px', '1.5'),
+  h2: textStyle('32px', '48px', '1.5'),
+  h3: textStyle('28px', '36px', '1.5'),
+  h4: textStyle('24px', '30px', '1.533'),
+  h5: textStyle('20px', '24px', '1.5'),
+  h6: textStyle('18px', '20px', '1.5'),
+  h7: textStyle('16px', '18px', '1.556'),
+  body: textStyle('14px', '16px', '1.5', 'body'),
+  'body-small': textStyle('12px', '14px', '1.43', 'body'),
+  xs: textStyle('10px', '12px', '1rem', 'body'),
+  '2xs': textStyle('8px', '10px', '0.75rem', 'body'),
+});
+
+const config = defineConfig({
+  theme: {
+    tokens: {
+      colors: toColorTokens(colors),
+      fonts: {
+        heading: { value: "'Montserrat', sans-serif" },
+        body: { value: "'Montserrat', sans-serif" },
+      },
+      fontWeights: {
+        thin: { value: '100' },
+        extralight: { value: '200' },
+        light: { value: '300' },
+        normal: { value: '400' },
+        medium: { value: '500' },
+        semibold: { value: '600' },
+        bold: { value: '700' },
+        extrabold: { value: '800' },
+        black: { value: '900' },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        bg: {
+          DEFAULT: { value: '{colors.gray.0}' },
+          subtle: { value: '{colors.gray.50}' },
+          muted: { value: '{colors.gray.100}' },
+          emphasized: { value: '{colors.gray.200}' },
+          inverted: { value: '{colors.black}' },
+          panel: { value: '{colors.gray.0}' },
+          error: { value: '{colors.error.50}' },
+        },
+        fg: {
+          DEFAULT: { value: '{colors.black}' },
+          subtle: { value: '{colors.gray.400}' },
+          muted: { value: '{colors.gray.600}' },
+          inverted: { value: '{colors.gray.50}' },
+          error: { value: '{colors.error.100}' },
+        },
+        border: {
+          DEFAULT: { value: '{colors.gray.200}' },
+          subtle: { value: '{colors.gray.50}' },
+          muted: { value: '{colors.gray.100}' },
+          emphasized: { value: '{colors.gray.300}' },
+          inverted: { value: '{colors.gray.800}' },
+          error: { value: '{colors.error.100}' },
+        },
+        text: {
+          fg: { value: '{colors.black}' },
+          fg_muted: { value: '{colors.gray.600}' },
+          fg_subtle: { value: '{colors.gray.400}' },
+          fg_error: { value: '{colors.error.100}' },
+        },
+        neutral: {
+          contrast: { value: '{colors.gray.0}' },
+          fg: { value: '{colors.gray.800}' },
+          subtle: { value: '{colors.gray.100}' },
+          muted: { value: '{colors.gray.200}' },
+          emphasized: { value: '{colors.gray.300}' },
+          solid: { value: '{colors.gray.900}' },
+          focusRing: { value: '{colors.gray.400}' },
+        },
+      },
+    },
+    textStyles,
+  },
+  globalCss: {
+    body: {
+      textStyle: 'body',
+      color: 'fg',
+      bg: 'bg',
+    },
+    h1: { textStyle: 'h1' },
+    h2: { textStyle: 'h2' },
+    h3: { textStyle: 'h3' },
+    h4: { textStyle: 'h4' },
+    h5: { textStyle: 'h5' },
+    h6: { textStyle: 'h6' },
+    'p, li, label': { textStyle: 'body' },
+    'small, figcaption': { textStyle: 'body-small' },
+    a: { color: 'blue.primary', textDecoration: 'underline' },
+    'button, input, textarea, select': { fontFamily: 'body' },
+  },
+});
+
+export const system = createSystem(defaultConfig, config);

package.json

@@ -23,6 +23,8 @@
     "@aws-sdk/client-cognito-identity-provider": "^3.1058.0",
     "@aws-sdk/client-s3": "^3.1073.0",
     "@aws-sdk/client-sesv2": "^3.1063.0",
+    "@chakra-ui/react": "^3.37.0",
+    "@emotion/react": "^11.14.0",
     "@nestjs/cli": "^11.0.24",
     "@nestjs/common": "^10.0.2",
     "@nestjs/config": "^4.0.4",