diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 0728347acc..b3b490346d 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -16,7 +16,6 @@ import { alertTitleClasses } from "@mui/material/AlertTitle"; import { buttonClasses } from "@mui/material/Button"; import { checkboxClasses } from "@mui/material/Checkbox"; import { chipClasses } from "@mui/material/Chip"; -import { dialogActionsClasses } from "@mui/material/DialogActions"; import { dividerClasses } from "@mui/material/Divider"; import { formControlLabelClasses } from "@mui/material/FormControlLabel"; import { formLabelClasses } from "@mui/material/FormLabel"; @@ -371,13 +370,13 @@ export const components = ( "&:hover": { backgroundColor: odysseyTokens.HueBlue200, - borderColor: odysseyTokens.PalettePrimaryMain, + borderColor: odysseyTokens.BorderColorPrimaryMain, color: odysseyTokens.HueBlue800, }, "&:active": { backgroundColor: odysseyTokens.PalettePrimaryLight, - borderColor: odysseyTokens.PalettePrimaryMain, + borderColor: odysseyTokens.BorderColorPrimaryMain, color: odysseyTokens.HueBlue800, }, @@ -440,13 +439,12 @@ export const components = ( borderColor: "transparent", "&:hover": { - backgroundColor: odysseyTokens.HueBlue100, + backgroundColor: odysseyTokens.HueNeutral100, borderColor: "transparent", }, "&:active": { - backgroundColor: odysseyTokens.PalettePrimaryLight, - color: odysseyTokens.HueBlue800, + backgroundColor: odysseyTokens.HueNeutral200, }, "&:disabled": { @@ -1143,6 +1141,7 @@ export const components = ( styleOverrides: { paper: { maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} + (${odysseyTokens.Spacing6} * 2))`, + borderRadius: odysseyTokens.BorderRadiusOuter, boxShadow: "none", filter: "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))", @@ -1154,7 +1153,7 @@ export const components = ( root: { flexWrap: "wrap", gap: odysseyTokens.Spacing2, - paddingBlockStart: odysseyTokens.Spacing4, + paddingBlockStart: odysseyTokens.Spacing6, paddingBlockEnd: odysseyTokens.Spacing6, paddingInline: odysseyTokens.Spacing6, @@ -1167,29 +1166,25 @@ export const components = ( MuiDialogContent: { styleOverrides: { root: ({ ownerState }) => ({ - padding: 0, - paddingBlock: odysseyTokens.Spacing4, + paddingBlock: 0, paddingInline: odysseyTokens.Spacing6, - "&:last-child": { + ...(ownerState.dividers === true && { + paddingBlock: odysseyTokens.Spacing6, + color: odysseyTokens.HueNeutral600, + }), + + ["&:last-child"]: { paddingBlockEnd: odysseyTokens.Spacing6, }, - - ...(ownerState.dividers === false && { - [`& + .${dialogActionsClasses.root}`]: { - paddingBlockStart: odysseyTokens.Spacing4, - }, - }), }), }, }, MuiDialogContentText: { - defaultProps: { - color: "text.primary", - }, styleOverrides: { root: { marginBlockEnd: odysseyTokens.Spacing5, + color: odysseyTokens.HueNeutral700, "&:last-child": { marginBlockEnd: "0", @@ -1212,6 +1207,12 @@ export const components = ( paddingBlockStart: odysseyTokens.Spacing5, paddingBlockEnd: odysseyTokens.Spacing4, paddingInline: odysseyTokens.Spacing6, + fontFamily: odysseyTokens.TypographyFamilyHeading, + + [`.${buttonClasses.root}`]: { + // Pull close button by inline padding amount + marginInlineEnd: `-${odysseyTokens.Spacing3}`, + }, }, }, }, diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts index 1e27d63323..d72e2121d4 100644 --- a/packages/odyssey-react-mui/src/theme/typography.ts +++ b/packages/odyssey-react-mui/src/theme/typography.ts @@ -26,12 +26,12 @@ export const typography = ( fontWeightMedium: Number(odysseyTokens.TypographyWeightHeading), fontWeightBold: Number(odysseyTokens.TypographyWeightHeadingBold), allVariants: { - fontFamily: odysseyTokens.TypographyFamilyBody, fontFeatureSettings: "'lnum', 'pnum'", fontVariant: "normal", letterSpacing: 0, }, h1: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading1, @@ -39,6 +39,7 @@ export const typography = ( marginBottom: odysseyTokens.Spacing2, }, h2: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading2, @@ -46,6 +47,7 @@ export const typography = ( marginBottom: odysseyTokens.Spacing2, }, h3: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading3, @@ -53,6 +55,7 @@ export const typography = ( marginBottom: odysseyTokens.Spacing2, }, h4: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading4, @@ -60,6 +63,7 @@ export const typography = ( marginBottom: odysseyTokens.Spacing2, }, h5: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading5, @@ -67,6 +71,7 @@ export const typography = ( marginBottom: odysseyTokens.Spacing2, }, h6: { + fontFamily: odysseyTokens.TypographyFamilyHeading, color: odysseyTokens.TypographyColorHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographyScale2, @@ -112,6 +117,7 @@ export const typography = ( }, legend: { padding: 0, + fontFamily: odysseyTokens.TypographyFamilyHeading, fontWeight: Number(odysseyTokens.TypographyWeightHeading), fontSize: odysseyTokens.TypographySizeHeading5, lineHeight: odysseyTokens.TypographyLineHeightHeading5,