feat(odyssey-react-mui): update Dialog to match Rebrand

okta · Jul 13, 2023 · 2894c1d · 2894c1d
1 parent e97daf2
commit 2894c1d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1143,6 +1143,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 +1155,7 @@ export const components = (
         root: {
           flexWrap: "wrap",
           gap: odysseyTokens.Spacing2,
-          paddingBlockStart: odysseyTokens.Spacing4,
+          paddingBlockStart: odysseyTokens.Spacing6,
           paddingBlockEnd: odysseyTokens.Spacing6,
           paddingInline: odysseyTokens.Spacing6,
 
@@ -1167,29 +1168,21 @@ export const components = (
     MuiDialogContent: {
       styleOverrides: {
         root: ({ ownerState }) => ({
-          padding: 0,
-          paddingBlock: odysseyTokens.Spacing4,
+          paddingBlock: 0,
           paddingInline: odysseyTokens.Spacing6,
 
-          "&:last-child": {
-            paddingBlockEnd: odysseyTokens.Spacing6,
-          },
-
-          ...(ownerState.dividers === false && {
-            [`& + .${dialogActionsClasses.root}`]: {
-              paddingBlockStart: odysseyTokens.Spacing4,
-            },
+          ...(ownerState.dividers === true && {
+            paddingBlock: odysseyTokens.Spacing6,
+            color: odysseyTokens.HueNeutral600,
           }),
         }),
       },
     },
     MuiDialogContentText: {
-      defaultProps: {
-        color: "text.primary",
-      },
       styleOverrides: {
         root: {
           marginBlockEnd: odysseyTokens.Spacing5,
+          color: odysseyTokens.HueNeutral700,
 
           "&:last-child": {
             marginBlockEnd: "0",
@@ -1212,6 +1205,7 @@ export const components = (
           paddingBlockStart: odysseyTokens.Spacing5,
           paddingBlockEnd: odysseyTokens.Spacing4,
           paddingInline: odysseyTokens.Spacing6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
         },
       },
     },

diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -26,47 +26,52 @@ 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,
       lineHeight: odysseyTokens.TypographyLineHeightHeading1,
       marginBottom: odysseyTokens.Spacing2,
     },
     h2: {
+      fontFamily: odysseyTokens.TypographyFamilyHeading,
       color: odysseyTokens.TypographyColorHeading,
       fontWeight: Number(odysseyTokens.TypographyWeightHeading),
       fontSize: odysseyTokens.TypographySizeHeading2,
       lineHeight: odysseyTokens.TypographyLineHeightHeading2,
       marginBottom: odysseyTokens.Spacing2,
     },
     h3: {
+      fontFamily: odysseyTokens.TypographyFamilyHeading,
       color: odysseyTokens.TypographyColorHeading,
       fontWeight: Number(odysseyTokens.TypographyWeightHeading),
       fontSize: odysseyTokens.TypographySizeHeading3,
       lineHeight: odysseyTokens.TypographyLineHeightHeading3,
       marginBottom: odysseyTokens.Spacing2,
     },
     h4: {
+      fontFamily: odysseyTokens.TypographyFamilyHeading,
       color: odysseyTokens.TypographyColorHeading,
       fontWeight: Number(odysseyTokens.TypographyWeightHeading),
       fontSize: odysseyTokens.TypographySizeHeading4,
       lineHeight: odysseyTokens.TypographyLineHeightHeading4,
       marginBottom: odysseyTokens.Spacing2,
     },
     h5: {
+      fontFamily: odysseyTokens.TypographyFamilyHeading,
       color: odysseyTokens.TypographyColorHeading,
       fontWeight: Number(odysseyTokens.TypographyWeightHeading),
       fontSize: odysseyTokens.TypographySizeHeading5,
       lineHeight: odysseyTokens.TypographyLineHeightHeading5,
       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,