@okta/odyssey-react-mui 1.4.0 → 1.6.0

package/src/theme/components.tsx

@@ -59,6 +59,98 @@ export const components = ({
   shadowRootElement?: HTMLDivElement;
 }): ThemeOptions["components"] => {
   return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          borderWidth: 1,
+          borderInlineStyle: "solid",
+          borderColor: odysseyTokens.HueNeutral100,
+          boxShadow: "none",
+
+          "&.hasShadow": {
+            boxShadow: odysseyTokens.DepthLow,
+          },
+
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutralWhite,
+            color: odysseyTokens.TypographyColorDisabled,
+            cursor: "default",
+
+            "& .MuiAccordionSummary-content": {
+              color: odysseyTokens.TypographyColorDisabled,
+            },
+          },
+
+          "&::before": {
+            backgroundColor: odysseyTokens.BorderColorDisplay,
+            opacity: "1 !important",
+          },
+
+          "&:first-of-type": {
+            borderTopLeftRadius: odysseyTokens.BorderRadiusMain,
+            borderTopRightRadius: odysseyTokens.BorderRadiusMain,
+            borderBlockStartStyle: "solid",
+          },
+
+          "&:last-of-type": {
+            borderBottomLeftRadius: odysseyTokens.BorderRadiusMain,
+            borderBottomRightRadius: odysseyTokens.BorderRadiusMain,
+            borderBlockEndStyle: "solid",
+          },
+        }),
+      },
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: () => ({
+          paddingBlock: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing3,
+
+          ".MuiAccordion-root:first-of-type &": {
+            borderTopLeftRadius: odysseyTokens.BorderRadiusMain,
+            borderTopRightRadius: odysseyTokens.BorderRadiusMain,
+          },
+
+          ".MuiAccordion-root:last-of-type &": {
+            borderBottomLeftRadius: odysseyTokens.BorderRadiusMain,
+            borderBottomRightRadius: odysseyTokens.BorderRadiusMain,
+          },
+
+          ".MuiAccordion-root.Mui-expanded &": {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+
+          "&:hover, &:focus": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+          },
+
+          "&:focus-visible": {
+            outlineColor: odysseyTokens.PalettePrimaryMain,
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            zIndex: 1,
+          },
+        }),
+        content: () => ({
+          marginBlock: 0,
+
+          [`& > .${typographyClasses.root}`]: {
+            marginBlockEnd: 0,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          },
+        }),
+      },
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: () => ({
+          paddingInline: odysseyTokens.Spacing3,
+          paddingBlock: odysseyTokens.Spacing4,
+        }),
+      },
+    },
     MuiAlert: {
       defaultProps: {
         iconMapping: {
@@ -244,6 +336,11 @@ export const components = ({
         openOnFocus: false,
         popupIcon: <ChevronDownIcon />,
         selectOnFocus: true,
+        slotProps: {
+          paper: {
+            elevation: 1,
+          },
+        },
       },
       styleOverrides: {
         clearIndicator: {
@@ -271,6 +368,9 @@ export const components = ({
           }),
         }),
         listbox: {
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200,
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
@@ -311,6 +411,10 @@ export const components = ({
           padding: odysseyTokens.Spacing1,
           marginRight: "unset",
         },
+        popper: {
+          background: "transparent",
+          paddingBlockStart: odysseyTokens.Spacing1,
+        },
         inputRoot: ({ ownerState }) => ({
           ...(ownerState.readOnly === true && {
             backgroundColor: odysseyTokens.HueNeutral50,
@@ -434,21 +538,23 @@ export const components = ({
           }),
 
           ...(ownerState.variant === "secondary" && {
-            backgroundColor: odysseyTokens.HueBlue100,
-            color: odysseyTokens.PalettePrimaryDark,
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral300,
+            color: odysseyTokens.TypographyColorBody,
 
             "&:hover": {
-              backgroundColor: odysseyTokens.HueBlue200,
-              color: odysseyTokens.HueBlue800,
+              backgroundColor: odysseyTokens.HueNeutral100,
             },
 
             "&:active": {
-              backgroundColor: odysseyTokens.PalettePrimaryLight,
-              color: odysseyTokens.HueBlue800,
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.BorderColorPrimaryControl,
+              color: odysseyTokens.TypographyColorAction,
             },
 
             "&:disabled": {
               backgroundColor: odysseyTokens.HueNeutral100,
+              borderColor: "transparent",
               color: odysseyTokens.TypographyColorDisabled,
             },
           }),
@@ -853,6 +959,8 @@ export const components = ({
     MuiScopedCssBaseline: {
       styleOverrides: {
         root: {
+          background: "transparent",
+
           abbr: {
             borderBottomWidth: odysseyTokens.BorderWidthMain,
             borderBottomStyle: "dashed", // Token?
@@ -1567,7 +1675,7 @@ export const components = ({
       styleOverrides: {
         root: {
           color: odysseyTokens.TypographyColorAction,
-          textDecoration: "underline",
+          textDecoration: "none",
           cursor: "pointer",
 
           "&:visited": {
@@ -1595,11 +1703,11 @@ export const components = ({
           },
 
           ".Link-indicator": {
-            marginInlineStart: odysseyTokens.Spacing2,
+            marginInlineStart: odysseyTokens.Spacing1,
           },
 
           ".Link-icon": {
-            marginInlineEnd: odysseyTokens.Spacing2,
+            marginInlineEnd: odysseyTokens.Spacing1,
           },
           svg: {
             fontSize: "1em",
@@ -1737,6 +1845,13 @@ export const components = ({
         }),
       },
     },
+    MuiListItemSecondaryAction: {
+      styleOverrides: {
+        root: {
+          display: "flex",
+        },
+      },
+    },
     MuiModal: {
       defaultProps: {
         container: shadowRootElement,
@@ -1759,6 +1874,24 @@ export const components = ({
         },
       },
     },
+    MuiPaper: {
+      styleOverrides: {
+        // depth/low
+        elevation1: {
+          boxShadow: odysseyTokens.DepthLow,
+        },
+
+        // depth/medium
+        elevation2: {
+          boxShadow: odysseyTokens.DepthMedium,
+        },
+
+        // depth/high
+        elevation3: {
+          boxShadow: odysseyTokens.DepthHigh,
+        },
+      },
+    },
     MuiPopover: {
       defaultProps: {
         container: shadowRootElement,
@@ -1876,6 +2009,11 @@ export const components = ({
       defaultProps: {
         variant: "standard",
         IconComponent: ChevronDownIcon,
+        MenuProps: {
+          PaperProps: {
+            elevation: 1,
+          },
+        },
       },
       styleOverrides: {
         select: {
@@ -1886,18 +2024,22 @@ export const components = ({
             backgroundColor: "transparent",
           },
 
-          ".MuiBox-root": {
+          "& .MuiBox-root": {
             display: "flex",
             flexWrap: "wrap",
             gap: odysseyTokens.Spacing1,
             marginBlock: `-${odysseyTokens.Spacing2}`,
             marginInline: `-${odysseyTokens.Spacing2}`,
           },
+
+          ["& .MuiListItemSecondaryAction-root"]: {
+            display: "none",
+          },
         },
         icon: {
           right: "unset",
           insetInlineEnd: odysseyTokens.Spacing3,
-          color: odysseyTokens.TypographyColorBody,
+          color: odysseyTokens.TypographyColorSubordinate,
         },
       },
     },