Merge pull request #502 from act-org/jc-e4e-theme-exports

feat: Export more internals from the E4E theme
act-org · Dec 10, 2024 · 6de156d · 6de156d
2 parents 12bc4d2 + 3c15da1
commit 6de156d
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 18 deletions.
diff --git a/src/styles/themeEncourageE4E/E4ECustomDimensions.ts b/src/styles/themeEncourageE4E/E4ECustomDimensions.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const E4ECustomDimensions = {
+export const E4ECustomDimensions = {
   heights: {
     dialogContainer: 32,
     dialogMargin: 44,

diff --git a/src/styles/themeEncourageE4E/augmentTheme.d.ts b/src/styles/themeEncourageE4E/augmentTheme.d.ts
@@ -13,32 +13,32 @@ 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;
+    buttonLarge?: React.CSSProperties;
+    buttonMedium?: React.CSSProperties;
+    buttonSmall?: React.CSSProperties;
     inputLabel?: React.CSSProperties;
     inputLabelStrong?: React.CSSProperties;
     linkBody1?: React.CSSProperties;
     linkBody2?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
     tableHeader?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
   }
 
   // allow configuration using `createTheme`
   interface TypographyVariantsOptions {
+    body1Strong?: React.CSSProperties;
+    body2Strong?: React.CSSProperties;
     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;
+    tooltip?: React.CSSProperties;
   }
 
   interface IconButtonClasses {
@@ -49,17 +49,17 @@ declare module '@mui/material/styles' {
 // Update the Typography's variant prop options
 declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
+    body1Strong: true;
+    body2Strong: true;
     buttonLarge: true;
     buttonMedium: true;
     buttonSmall: true;
-    body1Strong: true;
-    body2Strong: true;
     inputLabel: true;
     inputLabelStrong: true;
     linkBody1: true;
     linkBody2: true;
-    tooltip: true;
     tableHeader: true;
+    tooltip: true;
   }
 }
 

diff --git a/src/styles/themeEncourageE4E/baseTheme.ts b/src/styles/themeEncourageE4E/baseTheme.ts
@@ -7,6 +7,6 @@
 
 import { createTheme as muiCreateTheme } from '@mui/material/styles';
 
-const baseTheme = muiCreateTheme({});
+export const baseTheme = muiCreateTheme({});
 
 export default baseTheme;
diff --git a/src/styles/themeEncourageE4E/palette.ts b/src/styles/themeEncourageE4E/palette.ts
@@ -65,7 +65,7 @@ export type CustomPaletteOptions = PaletteOptions & {
   };
 };
 
-const palette: CustomPaletteOptions = {
+export const palette: CustomPaletteOptions = {
   action: {
     active: yellow[900],
     activeHover: yellow[800],

diff --git a/src/styles/themeEncourageE4E/props.ts b/src/styles/themeEncourageE4E/props.ts
@@ -7,7 +7,7 @@
 
 import { ComponentsProps } from '@mui/material';
 
-const props: ComponentsProps = {
+export const props: ComponentsProps = {
   MuiButton: {
     disableRipple: true,
   },

diff --git a/src/styles/themeEncourageE4E/shadows.ts b/src/styles/themeEncourageE4E/shadows.ts
@@ -9,7 +9,7 @@ import baseTheme from './baseTheme';
 
 import type { Shadows } from '@mui/material';
 
-const SHADOWS_MAPPING: { [key: number]: string } = {
+export const SHADOWS_MAPPING: { [key: number]: string } = {
   0: 'none',
   2: '0px 4px 8px rgba(79, 94, 113, 0.1),0px 2px 4px rgba(79, 94, 113, 0.11), 0px 0px 2px rgba(79, 94, 113, 0.12)',
   24:
@@ -24,7 +24,7 @@ const SHADOWS_MAPPING: { [key: number]: string } = {
     '0px 4px 8px rgba(79, 94, 113, 0.1), 0px 2px 4px rgba(79, 94, 113, 0.11),0px 0px 2px rgba(79, 94, 113, 0.12)',
 };
 
-const shadows = baseTheme.shadows.map((shadow, index) => {
+export const shadows = baseTheme.shadows.map((shadow, index) => {
   return SHADOWS_MAPPING[index] || shadow;
 }) as Shadows;
 

diff --git a/src/styles/themeEncourageE4E/spacing.ts b/src/styles/themeEncourageE4E/spacing.ts
@@ -12,6 +12,6 @@ import { createSpacing } from '@mui/system';
 // Override here to change
 export const SPACING_PX = 8;
 
-const spacing = createSpacing(SPACING_PX);
+export const spacing = createSpacing(SPACING_PX);
 
 export default spacing;
diff --git a/src/styles/themeEncourageE4E/typography.ts b/src/styles/themeEncourageE4E/typography.ts
@@ -6,6 +6,7 @@
  */
 
 import { TypographyVariantsOptions } from '@mui/material/styles';
+import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
 
 import palette from './palette';
 
@@ -43,7 +44,21 @@ export interface IFontSize {
 export const BASE_FONT_SIZE: IFontSize = { fontSize: 16, lineHeight: 24 / 16 };
 export const INPUT_FONT_SIZE: IFontSize = { fontSize: 16, lineHeight: 20 / 16 };
 
-const typography: TypographyVariantsOptions = {
+export type CustomTypographyVariantsOptions = TypographyVariantsOptions & {
+  body1Strong: TypographyStyleOptions;
+  body2Strong: TypographyStyleOptions;
+  buttonLarge: TypographyStyleOptions;
+  buttonMedium: TypographyStyleOptions;
+  buttonSmall: TypographyStyleOptions;
+  inputLabel: TypographyStyleOptions;
+  inputLabelStrong: TypographyStyleOptions;
+  linkBody1: TypographyStyleOptions;
+  linkBody2: TypographyStyleOptions;
+  tableHeader: TypographyStyleOptions;
+  tooltip: TypographyStyleOptions;
+};
+
+export const typography: CustomTypographyVariantsOptions = {
   allVariants: {
     color: palette.text.overLight.high,
     fontFamily: primaryFontFamily,