[DO NOT MERGE] feat: Add Encourage E4E theme

.storybook/preview.tsx

@@ -36,7 +36,14 @@ const preview: Preview = {
       name: 'Theme',
       toolbar: {
         icon: 'paintbrush',
-        items: ['ACT', 'ACT_ET', 'ENCOURA', 'ENCOURA_CLASSIC', 'ENCOURAGE'],
+        items: [
+          'ACT',
+          'ACT_ET',
+          'ENCOURA',
+          'ENCOURA_CLASSIC',
+          'ENCOURAGE',
+          'ENCOURAGE_E4E',
+        ],
       },
     },
     language: {

src/components/ThemeProvider/index.tsx

@@ -22,9 +22,17 @@ import { THEME_ACT_ET } from '~/styles/themeActEt';
 import { THEME_ENCOURA } from '~/styles/themeEncoura';
 import { THEME_ENCOURA_CLASSIC } from '~/styles/themeEncouraClassic';
 import { THEME_ENCOURAGE } from '~/styles/themeEncourage';
+import { THEME_ENCOURAGE_E4E } from '~/styles/themeEncourageE4E';
 
 export interface ThemeProviderProps extends MuiThemeProviderProps {
-  theme: 'ACT' | 'ACT_ET' | 'ENCOURA' | 'ENCOURA_CLASSIC' | 'ENCOURAGE' | Theme;
+  theme:
+    | 'ACT'
+    | 'ACT_ET'
+    | 'ENCOURA'
+    | 'ENCOURA_CLASSIC'
+    | 'ENCOURAGE'
+    | 'ENCOURAGE_E4E'
+    | Theme;
   locale?:
     | 'azAZ'
     | 'bgBG'
@@ -97,6 +105,12 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
         locale ? locales[locale] : locales.enUS,
       );
       break;
+    case 'ENCOURAGE_E4E':
+      themeImpl = createTheme(
+        THEME_ENCOURAGE_E4E,
+        locale ? locales[locale] : locales.enUS,
+      );
+      break;
     default:
       themeImpl = theme;
   }

src/styles/themeEncourageE4E/E4ECustomDimensions.ts

@@ -0,0 +1,19 @@
+const E4ECustomDimensions = {
+  heights: {
+    dialogContainer: 32,
+    dialogMargin: 44,
+    header: 64,
+    tableHeader: 48,
+    tablePagination: 58,
+  },
+  widths: {
+    datePickerPopper: 277,
+    largeDialog: 872,
+    leftNavBar: 72,
+    listItemIcon: 40,
+    mediumDialog: 648,
+    pageMainContent: 1320,
+  },
+};
+
+export default E4ECustomDimensions;

src/styles/themeEncourageE4E/augmentTheme.d.ts

@@ -0,0 +1,231 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import React from 'react';
+
+import type { Color } from '@mui/material';
+
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    buttonLarge: React.CSSProperties;
+    buttonMedium: React.CSSProperties;
+    buttonSmall: React.CSSProperties;
+    body1Strong?: React.CSSProperties;
+    body2Strong?: React.CSSProperties;
+    inputLabel?: React.CSSProperties;
+    inputLabelStrong?: React.CSSProperties;
+    linkBody1?: React.CSSProperties;
+    linkBody2?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    tableHeader?: React.CSSProperties;
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    buttonLarge?: React.CSSProperties;
+    buttonMedium?: React.CSSProperties;
+    buttonSmall?: React.CSSProperties;
+    body1Strong?: React.CSSProperties;
+    body2Strong?: React.CSSProperties;
+    inputLabel?: React.CSSProperties;
+    inputLabelStrong?: React.CSSProperties;
+    linkBody1?: React.CSSProperties;
+    linkBody2?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    tableHeader?: React.CSSProperties;
+  }
+
+  interface IconButtonClasses {
+    colorTerciary: React.CSSProperties;
+  }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    buttonLarge: true;
+    buttonMedium: true;
+    buttonSmall: true;
+    body1Strong: true;
+    body2Strong: true;
+    inputLabel: true;
+    inputLabelStrong: true;
+    linkBody1: true;
+    linkBody2: true;
+    tooltip: true;
+    tableHeader: true;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    buttonLarge: true;
+    buttonMedium: true;
+    buttonSmall: true;
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonClasses {
+    iconOutlined: true;
+  }
+  interface ButtonPropsVariantOverrides {
+    iconOutlined: true;
+  }
+}
+
+declare module '@mui/material/TextField' {
+  interface TextFieldPropsSizeOverrides {
+    large: true;
+  }
+}
+
+declare module '@mui/material/IconButton' {
+  interface IconButtonClasses {
+    colorTerciary: true;
+  }
+  interface IconButtonPropsColorOverrides {
+    terciary: true;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface TypeText {
+    overDark: {
+      high: string;
+      disabled: string;
+      medium: string;
+    };
+    overLight: {
+      high: string;
+      disabled: string;
+      medium: string;
+    };
+  }
+
+  // Overriding the Palette interface here, gives us quick access to all the colors generated on components.ts
+  interface Palette {
+    action: {
+      activeHover: string;
+    };
+    progress: {
+      failure: string;
+      idle: string;
+      interrupted: string;
+      ongoing: string;
+      success: string;
+    };
+    background: {
+      paper: string;
+    };
+    branding: {
+      blue: Color;
+      fuchsia: Color;
+      mist: Color;
+      navy: Color;
+      neon: Color;
+      orange: Color;
+      sapphire: Color;
+      seafoam: Color;
+      surface: Color;
+      teal: Color;
+    };
+    error: {
+      main: string;
+    };
+    info: {
+      main: string;
+    };
+    primary: {
+      contrastText: string;
+      light: string;
+      main: string;
+    };
+    progress: {
+      failure: string;
+      idle: string;
+      interrupted: string;
+      ongoing: string;
+      success: string;
+    };
+    secondary: {
+      contrastText: string;
+      main: string;
+    };
+    success: {
+      contrastText: string;
+      main: string;
+    };
+    text: {
+      primary: string;
+      secondary: string;
+      overDark: {
+        disabled: string;
+        high: string;
+        medium: string;
+      };
+      overLight: {
+        disabled: string;
+        high: string;
+        medium: string;
+      };
+    };
+    utility: {
+      error: Color;
+      info: Color;
+      success: Color;
+      warning: Color;
+      white: '#ffffff';
+    };
+    warning: {
+      main: string;
+    };
+  }
+
+  interface Theme {
+    customDims: {
+      heights: {
+        header: number;
+        tableHeader: number;
+        tablePagination: number;
+      };
+      widths: {
+        pageMainContent: number;
+        datePickerPopper: number;
+        largeDialog: number;
+        leftNavBar: number;
+        listItemIcon: number;
+        mediumDialog: number;
+      };
+    };
+    spacingPx: number;
+  }
+}
+
+declare module '@mui/material/Autocomplete' {
+  interface AutocompletePropsSizeOverrides {
+    small: false;
+    large: true;
+  }
+}
+
+declare module '@mui/material/Divider' {
+  interface DividerPropsVariantOverrides {
+    small: true;
+    medium: true;
+    large: true;
+    fill: true;
+  }
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsVariantOverrides {
+    interactive: true;
+    gradYear: true;
+    matched: true;
+    possible: true;
+    inverted: true;
+  }
+}
+
+// disable automatic export
+export {};

src/styles/themeEncourageE4E/baseTheme.ts

@@ -0,0 +1,5 @@
+import { createTheme as muiCreateTheme } from '@mui/material/styles';
+
+const baseTheme = muiCreateTheme({});
+
+export default baseTheme;