workavia-calendar-front/src/theme

Custom MUI Theme

Overview

This project uses a custom MUI theme to customize Typography, colors and components according to Twake Calendar design.

File Structure

src/theme/
├── theme.ts          # Custom theme definition
├── ThemeProvider.tsx # ThemeProvider wrapper
└── README.md         # This documentation

Custom Theme Features

Colors

• Text Primary: #000000 (Black)
• Text Secondary: #717D96 (Custom gray)
• Text Secondary Container: #243B55 (Dark gray)

Typography

• Caption: fontSize 13px, color #717D96

Components

• Typography: Custom styled caption variant

Usage

Using CustomThemeProvider

Import and use CustomThemeProvider to wrap your application:

import { CustomThemeProvider } from "./theme/ThemeProvider";

function App() {
  return <CustomThemeProvider>{/* Your application */}</CustomThemeProvider>;
}

Accessing the Theme

Use useTheme to access theme variables:

import { useTheme } from "@mui/material/styles";

function MyComponent() {
  const theme = useTheme();
  const textColor = theme.palette.text.secondary;
}

CSS Variables

Use theme variables directly in CSS:

<Typography sx={{ color: "text.secondary" }}>
  Text with secondary color
</Typography>

Typography

Use predefined typography variants:

<Typography variant="caption">Caption text</Typography>

Customizing Styles

Modify styles in theme.ts to customize components:

components: {
  MuiTypography: {
    styleOverrides: {
      caption: {
        fontSize: "13px",
        color: "#717D96",
      },
    },
  },
}

Migration to Cozy UI

Installation

npm install cozy-ui

Replacing ThemeProvider

In your main file, replace CustomThemeProvider with MuiCozyTheme:

import { MuiCozyTheme } from "cozy-ui/React/MuiCozyTheme";

<MuiCozyTheme>{children}</MuiCozyTheme>;

Updating Palette

Adapt the color palette in theme.ts to use Cozy UI colors. Cozy UI provides its own colors that can be integrated into the theme configuration.

Component Migration

Update components to use Cozy UI components instead of standard MUI components, following Cozy UI documentation for specific components.