Merge pull request #1881 from okta/ee/dialog

Rebrand: Dialog
okta · Jul 14, 2023 · 654c65a · 654c65a
2 parents 1f2369e + 4cef709
commit 654c65a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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,