@okta/odyssey-react-mui 1.4.0 → 1.6.0

package/dist/theme/components.js

@@ -42,6 +42,86 @@ export const components = _ref => {
     shadowRootElement
   } = _ref;
   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: {
@@ -225,7 +305,12 @@ export const components = _ref => {
         limitTags: -1,
         openOnFocus: false,
         popupIcon: _jsx(ChevronDownIcon, {}),
-        selectOnFocus: true
+        selectOnFocus: true,
+        slotProps: {
+          paper: {
+            elevation: 1
+          }
+        }
       },
       styleOverrides: {
         clearIndicator: {
@@ -256,6 +341,9 @@ export const components = _ref => {
           };
         },
         listbox: {
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200,
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
@@ -290,6 +378,10 @@ export const components = _ref => {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset"
         },
+        popper: {
+          background: "transparent",
+          paddingBlockStart: odysseyTokens.Spacing1
+        },
         inputRoot: _ref7 => {
           let {
             ownerState
@@ -412,18 +504,20 @@ export const components = _ref => {
               }
             }),
             ...(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
               }
             }),
@@ -806,6 +900,7 @@ export const components = _ref => {
     MuiScopedCssBaseline: {
       styleOverrides: {
         root: {
+          background: "transparent",
           abbr: {
             borderBottomWidth: odysseyTokens.BorderWidthMain,
             borderBottomStyle: "dashed",
@@ -1466,7 +1561,7 @@ export const components = _ref => {
       styleOverrides: {
         root: {
           color: odysseyTokens.TypographyColorAction,
-          textDecoration: "underline",
+          textDecoration: "none",
           cursor: "pointer",
           "&:visited": {
             color: odysseyTokens.TypographyColorAction
@@ -1489,10 +1584,10 @@ export const components = _ref => {
             lineHeight: 1
           },
           ".Link-indicator": {
-            marginInlineStart: odysseyTokens.Spacing2
+            marginInlineStart: odysseyTokens.Spacing1
           },
           ".Link-icon": {
-            marginInlineEnd: odysseyTokens.Spacing2
+            marginInlineEnd: odysseyTokens.Spacing1
           },
           svg: {
             fontSize: "1em",
@@ -1618,6 +1713,13 @@ export const components = _ref => {
         }
       }
     },
+    MuiListItemSecondaryAction: {
+      styleOverrides: {
+        root: {
+          display: "flex"
+        }
+      }
+    },
     MuiModal: {
       defaultProps: {
         container: shadowRootElement
@@ -1640,6 +1742,19 @@ export const components = _ref => {
         }
       }
     },
+    MuiPaper: {
+      styleOverrides: {
+        elevation1: {
+          boxShadow: odysseyTokens.DepthLow
+        },
+        elevation2: {
+          boxShadow: odysseyTokens.DepthMedium
+        },
+        elevation3: {
+          boxShadow: odysseyTokens.DepthHigh
+        }
+      }
+    },
     MuiPopover: {
       defaultProps: {
         container: shadowRootElement
@@ -1753,7 +1868,12 @@ export const components = _ref => {
     MuiSelect: {
       defaultProps: {
         variant: "standard",
-        IconComponent: ChevronDownIcon
+        IconComponent: ChevronDownIcon,
+        MenuProps: {
+          PaperProps: {
+            elevation: 1
+          }
+        }
       },
       styleOverrides: {
         select: {
@@ -1762,18 +1882,21 @@ export const components = _ref => {
           "&:focus": {
             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
         }
       }
     },