From 3c15da1a49bb8c88b8789da6a205f1ee5b8fc5c8 Mon Sep 17 00:00:00 2001 From: Jon Cursi Date: Tue, 10 Dec 2024 11:40:37 -0400 Subject: [PATCH] feat: Export more internals from the E4E theme --- .../themeEncourageE4E/E4ECustomDimensions.ts | 2 +- .../themeEncourageE4E/augmentTheme.d.ts | 20 +++++++++---------- src/styles/themeEncourageE4E/baseTheme.ts | 2 +- src/styles/themeEncourageE4E/palette.ts | 2 +- src/styles/themeEncourageE4E/props.ts | 2 +- src/styles/themeEncourageE4E/shadows.ts | 4 ++-- src/styles/themeEncourageE4E/spacing.ts | 2 +- src/styles/themeEncourageE4E/typography.ts | 17 +++++++++++++++- 8 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/styles/themeEncourageE4E/E4ECustomDimensions.ts b/src/styles/themeEncourageE4E/E4ECustomDimensions.ts index f1c80082f..ddc4716a9 100644 --- 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 index 755bc4cfb..6038d4242 100644 --- 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 index a07026183..9b8fb934e 100644 --- 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 index 4ed8261ad..a6feea53f 100644 --- 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 index 94b47ef72..0692efa5b 100644 --- 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 index 6de8f55e7..9f5443894 100644 --- 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 index f6dbb8d56..94303a06a 100644 --- 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 index 30edfb1d9..40f780bf3 100644 --- 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,