@okta/odyssey-react-mui 0.14.2 → 0.14.5

package/dist/themes/odyssey/components.js

@@ -17,11 +17,18 @@ export const components = {
         theme
       }) => ({
         padding: theme.spacing(4),
+        gap: theme.spacing(4),
         color: theme.palette.text.primary,
         ...(ownerState.severity && {
           backgroundColor: theme.palette[ownerState.severity].lighter,
           borderColor: theme.palette[ownerState.severity].light
         }),
+        ...(ownerState.variant === "banner" && {
+          position: "relative",
+          justifyContent: "center",
+          alignItems: "center",
+          borderWidth: 0
+        }),
         ...(ownerState.variant === "infobox" && {
           borderStyle: "solid",
           borderWidth: 1,
@@ -29,15 +36,39 @@ export const components = {
             marginBottom: theme.spacing(4)
           }
         }),
-        ...(ownerState.variant === "banner" && {
-          borderWidth: 0
+        ...(ownerState.variant === "toast" && {
+          maxWidth: theme.mixins.maxWidth,
+          borderStyle: "solid",
+          borderWidth: 1,
+          position: "relative",
+          alignItems: "start"
+        })
+      }),
+      action: ({
+        ownerState,
+        theme
+      }) => ({ ...(ownerState.variant === "banner" && {
+          padding: 0,
+          marginRight: 0,
+          top: "50%",
+          right: theme.spacing(4),
+          position: "absolute",
+          transform: "translateY(-50%)"
+        }),
+        ...(ownerState.variant === "toast" && {
+          position: "absolute",
+          top: `calc(${theme.spacing(4)} - ${theme.spacing(1)} + ${theme.mixins.borderWidth})`,
+          right: `calc(${theme.spacing(4)} - ${theme.spacing(1)} + ${theme.mixins.borderWidth})`,
+          padding: 0,
+          marginLeft: 0,
+          marginRight: 0
         })
       }),
       icon: ({
         ownerState,
         theme
       }) => ({
-        marginRight: theme.spacing(4),
+        marginRight: 0,
         padding: 0,
         fontSize: "1.429rem",
         opacity: 1,
@@ -49,10 +80,20 @@ export const components = {
         })
       }),
       message: ({
+        ownerState,
         theme
       }) => ({
         padding: 0,
-        lineHeight: theme.typography.body.lineHeight
+        lineHeight: theme.typography.body.lineHeight,
+        ...(ownerState.variant === "banner" && {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: theme.spacing(4)
+        }),
+        ...(ownerState.variant === "toast" && {
+          flexGrow: 1,
+          paddingRight: `calc((${theme.spacing(1)} * 2) + ${theme.typography.body.fontSize} + ${theme.spacing(4)})`
+        })
       })
     }
   },
@@ -77,123 +118,142 @@ export const components = {
       props: {
         variant: "primary"
       },
-      style: {
+      style: ({
+        theme
+      }) => ({
         fontWeight: 600,
-        color: "#ffffff",
+        color: theme.palette.common.white,
         borderColor: "transparent",
-        backgroundColor: "#1662dd",
+        backgroundColor: theme.palette.primary.main,
         "&:hover, &:focus-visible": {
-          backgroundColor: "#00297a"
+          backgroundColor: theme.palette.primary.dark
+        },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main
         },
         "&:active": {
-          backgroundColor: "#1662dd"
+          backgroundColor: theme.palette.primary.main
         },
         "&:disabled": {
-          color: "#ffffff",
-          backgroundColor: "#a7b5ec"
+          color: theme.palette.common.white,
+          backgroundColor: theme.palette.primary.light
         }
-      }
+      })
     }, {
       props: {
         variant: "secondary"
       },
-      style: {
-        backgroundColor: "#f5f5f6",
-        borderColor: "#d7d7dc",
-        color: "#1d1d21",
-        "&:hover": {
-          background: "#f2f5ff",
-          borderColor: "#a7b5ec",
-          color: "#1662dd"
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.grey[50],
+        borderColor: theme.palette.grey[200],
+        color: theme.palette.text.primary,
+        "&:hover, &:focus-visible": {
+          backgroundColor: theme.palette.primary.lighter,
+          borderColor: theme.palette.primary.light,
+          color: theme.palette.primary.main
         },
         "&:focus-visible": {
-          backgroundColor: "#1662dd",
-          color: "#1662dd"
+          outlineColor: theme.palette.primary.main
         },
         "&:active": {
-          borderColor: "#1662dd"
+          borderColor: theme.palette.primary.main
         },
         "&:disabled": {
-          borderColor: "#ebebed",
-          backgroundColor: "#ebebed",
-          color: "#8c8c96"
+          borderColor: theme.palette.grey[100],
+          backgroundColor: theme.palette.grey[100],
+          color: theme.palette.grey[500]
         }
-      }
+      })
     }, {
       props: {
         variant: "danger"
       },
-      style: {
-        backgroundColor: "#da372c",
-        color: "#ffffff",
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.error.main,
+        color: theme.palette.common.white,
         borderColor: "transparent",
         "&:hover": {
-          backgroundColor: "#640019"
+          backgroundColor: theme.palette.error.dark
         },
         "&:focus-visible": {
-          outlineColor: "#f88c90",
-          backgroundColor: "#640019"
+          outlineColor: theme.palette.error.main,
+          backgroundColor: theme.palette.error.dark
         },
         "&:active": {
-          backgroundColor: "#da372c"
+          backgroundColor: theme.palette.error.main
         },
         "&:disabled": {
-          color: "#ffffff",
-          backgroundColor: "#f88c90"
+          color: theme.palette.common.white,
+          backgroundColor: theme.palette.error.light
         }
-      }
+      })
     }, {
       props: {
         variant: "floating"
       },
-      style: {
-        backgroundColor: "#ffffff",
-        color: "#1d1d21",
+      style: ({
+        theme
+      }) => ({
+        backgroundColor: theme.palette.common.white,
+        color: theme.palette.text.primary,
         borderColor: "transparent",
         "&:hover, &:focus-visible": {
           backgroundColor: "rgba(29, 29, 33, 0.1)",
           borderColor: "transparent"
         },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main
+        },
         "&:active": {
           backgroundColor: "rgba(29, 29, 33, 0.2)",
           borderColor: "transparent"
         },
         "&:disabled": {
           backgroundColor: "rgba(235, 235, 237, 0.6)",
-          color: "#6e6e78",
+          color: theme.palette.text.secondary,
           borderColor: "transparent"
         }
-      }
+      })
     }, {
       props: {
         size: "s"
       },
-      style: {
-        paddingBlock: "calc(0.57142857rem - 1px)",
-        paddingInline: "calc(0.85714286rem - - 1px)",
+      style: ({
+        theme
+      }) => ({
+        paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
+        paddingInline: `calc(${theme.spacing(3)} - 1px)`,
         fontSize: "1rem"
-      }
+      })
     }, {
       props: {
         size: "l"
       },
-      style: {
-        paddingBlock: "calc(1.14285714rem - 1px)",
-        paddingInline: "calc(1.14285714rem - 1px)"
-      }
+      style: ({
+        theme
+      }) => ({
+        paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
+        paddingInline: `calc(${theme.spacing(4)} - 1px)`
+      })
     }, {
       props: {
         fullWidth: true
       },
-      style: {
+      style: ({
+        theme
+      }) => ({
         display: "block",
         width: "100%",
         marginBlock: "0",
         marginInline: "0",
         "&:not(:last-child)": {
-          marginBlockEnd: "1.14285714rem"
+          marginBlockEnd: theme.spacing(4)
         }
-      }
+      })
     }, {
       props: {
         children: ""
@@ -206,10 +266,11 @@ export const components = {
       }
     }],
     styleOverrides: {
-      root: () => ({
+      root: ({
+        theme
+      }) => ({
         fontWeight: 600,
-        paddingBlock: "0.85714286rem",
-        paddingInline: "0.85714286rem",
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
         display: "inline-block",
         position: "relative",
         marginBlock: "0",
@@ -225,7 +286,7 @@ export const components = {
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
         "& + &": {
-          marginInlineStart: "0.57142857rem"
+          marginInlineStart: theme.spacing(2)
         },
         "&:focus-visible": {
           outlineOffset: "2px",
@@ -259,30 +320,32 @@ export const components = {
       size: "small"
     },
     styleOverrides: {
-      root: {
+      root: ({
+        theme
+      }) => ({
         borderRadius: "4px",
         "&:hover": {
           backgroundColor: "transparent"
         },
         padding: 0,
         ".Mui-error > &": {
-          color: "#da372c",
+          color: theme.palette.error.main,
           "&:hover": {
-            color: "#640019"
+            color: theme.palette.error.dark
           }
         },
         ".Mui-error > &.Mui-checked": {
           "&:hover": {
-            color: "#640019"
+            color: theme.palette.error.dark
           }
         },
         "&.Mui-focusVisible": {
-          outlineColor: "#1662dd",
+          outlineColor: theme.palette.primary.main,
           outlineOffset: 0,
           outlineStyle: "solid",
           outlineWidth: "2px"
         }
-      }
+      })
     }
   },
   MuiCircularProgress: {
@@ -295,9 +358,10 @@ export const components = {
     },
     styleOverrides: {
       root: ({
+        theme,
         ownerState
       }) => ({ ...(ownerState.color !== "inherit" && {
-          color: "#00297a"
+          color: theme.palette.primary.dark
         })
       }),
       circle: ({
@@ -308,12 +372,35 @@ export const components = {
       })
     }
   },
+  MuiFormControl: {
+    styleOverrides: {
+      root: ({
+        ownerState,
+        theme
+      }) => ({
+        width: "100%",
+        maxWidth: "32rem",
+        ...(ownerState.margin === "normal" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4)
+        }),
+        ...(ownerState.margin === "dense" && {
+          marginTop: 0,
+          marginBottom: theme.spacing(4)
+        }),
+        ...(ownerState.fullWidth && {
+          maxWidth: "100%"
+        })
+      })
+    }
+  },
   MuiFormControlLabel: {
     styleOverrides: {
       root: ({
+        theme,
         ownerState
       }) => ({
-        gap: "0.57142857rem",
+        gap: theme.spacing(2),
         marginLeft: 0,
         marginRight: 0,
         ...(ownerState.labelPlacement === "start" && {
@@ -327,22 +414,22 @@ export const components = {
           marginLeft: 0
         }),
         "&:not(:last-child)": {
-          marginBottom: "0.57142857rem"
+          marginBottom: theme.spacing(2)
         },
         "&.Mui-disabled": {
           pointerEvents: "none"
         },
         "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
-          color: "#1d1d21"
+          color: theme.palette.text.primary
         },
         "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": {
-          color: "#00297a"
+          color: theme.palette.primary.dark
         },
         "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": {
-          color: "#640019"
+          color: theme.palette.error.dark
         },
         "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": {
-          color: "#640019"
+          color: theme.palette.error.dark
         }
       })
     }
@@ -352,32 +439,64 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: {
+      root: ({
+        theme
+      }) => ({
         lineHeight: "1.33333333",
-        marginTop: "0.57142857rem",
+        marginTop: theme.spacing(2),
         ".MuiFormLabel-root + &": {
-          marginTop: "-0.28571429rem",
-          color: "#6e6e78"
+          marginTop: `-${theme.spacing(1)}`,
+          color: theme.palette.text.secondary
         },
-        marginBottom: "0.57142857rem",
+        marginBottom: theme.spacing(2),
         "&:last-child": {
           marginBottom: 0
         }
-      }
+      })
     }
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: {
-        color: "#1d1d21",
+      root: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary,
         lineHeight: "1.14285714",
         fontSize: "1rem",
         fontWeight: 600,
-        marginBottom: "0.57142857rem",
+        marginBottom: theme.spacing(2),
         "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
-          color: "#1d1d21"
+          color: theme.palette.text.primary
         }
-      }
+      })
+    }
+  },
+  MuiIconButton: {
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        padding: theme.spacing(1),
+        fontSize: theme.typography.body.fontSize
+      })
+    }
+  },
+  MuiInputAdornment: {
+    defaultProps: {
+      variant: "outlined"
+    },
+    styleOverrides: {
+      root: ({
+        ownerState
+      }) => ({
+        display: "flex",
+        ...(ownerState.position === "start" && {
+          marginRight: 0
+        }),
+        ...(ownerState.position === "end" && {
+          marginLeft: 0
+        })
+      })
     }
   },
   MuiInputBase: {
@@ -391,23 +510,48 @@ export const components = {
       }
     }
   },
+  MuiInputLabel: {
+    defaultProps: {
+      disableAnimation: true,
+      shrink: false
+    },
+    styleOverrides: {
+      root: ({
+        ownerState
+      }) => ({ ...(ownerState.formControl && {
+          position: "initial",
+          transform: "none"
+        }),
+        ...(ownerState.variant === "outlined" && {
+          pointerEvents: "initial",
+          transform: "none",
+          maxWidth: "100%",
+          ...(ownerState.size === "small" && {
+            transform: "none"
+          })
+        })
+      })
+    }
+  },
   MuiLink: {
     styleOverrides: {
-      root: {
-        color: "#1662dd",
+      root: ({
+        theme
+      }) => ({
+        color: theme.palette.primary.main,
         textDecoration: "none",
         "&:hover": {
-          color: "#1662dd",
+          color: theme.palette.primary.main,
           textDecoration: "underline"
         },
         "&:focus-visible": {
-          outlineColor: "#1662dd",
+          outlineColor: theme.palette.primary.main,
           outlineOffset: "2px",
           outlineStyle: "solid",
           outlineWidth: "1px"
         },
         "&:visited": {
-          color: "#1662dd"
+          color: theme.palette.primary.main
         },
         ".Link-indicator, .Link-icon": {
           display: "inline-block",
@@ -415,10 +559,10 @@ export const components = {
           lineHeight: 1
         },
         ".Link-indicator": {
-          marginInlineStart: "0.57142857rem"
+          marginInlineStart: theme.spacing(2)
         },
         ".Link-icon": {
-          marginInlineEnd: "0.57142857rem"
+          marginInlineEnd: theme.spacing(2)
         },
         svg: {
           fontSize: "1rem",
@@ -428,52 +572,114 @@ export const components = {
           verticalAlign: "middle",
           width: "1em"
         }
-      }
+      })
     },
     variants: [{
       props: {
         variant: "monochrome"
       },
-      style: {
-        color: "#1d1d21",
+      style: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary,
         textDecoration: "underline",
         "&:hover": {
-          color: "#6e6e78"
+          color: theme.palette.text.secondary
         },
         "&:focus-visible": {
-          outlineColor: "#1662dd",
+          outlineColor: theme.palette.primary.main,
           outlineOffset: "2px",
           outlineStyle: "solid",
           outlineWidth: "1px"
         },
         "&:visited": {
-          color: "#1d1d21"
+          color: theme.palette.text.primary
         }
-      }
+      })
     }]
   },
+  MuiNativeSelect: {
+    defaultProps: {
+      variant: "outlined"
+    },
+    styleOverrides: {
+      icon: ({
+        theme
+      }) => ({
+        color: theme.palette.text.primary
+      })
+    }
+  },
+  MuiOutlinedInput: {
+    defaultProps: {
+      notched: false
+    },
+    styleOverrides: {
+      root: ({
+        ownerState,
+        theme
+      }) => ({
+        "&.Mui-disabled": {
+          pointerEvents: "none"
+        },
+        ...(ownerState.startAdornment && {
+          paddingLeft: theme.spacing(3)
+        }),
+        ...(ownerState.endAdornment && {
+          paddingRight: theme.spacing(3)
+        })
+      }),
+      input: ({
+        theme
+      }) => ({
+        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
+        border: "1px solid transparent"
+      }),
+      notchedOutline: ({
+        theme
+      }) => ({
+        borderColor: theme.palette.grey[500],
+        ".MuiOutlinedInput-root:hover &": {
+          borderColor: theme.palette.primary.main
+        },
+        ".MuiOutlinedInput-root.Mui-error:hover &": {
+          borderColor: theme.palette.error.dark
+        }
+      })
+    }
+  },
   MuiRadio: {
     defaultProps: {
       size: "small"
     },
     styleOverrides: {
-      root: {
+      root: ({
+        theme
+      }) => ({
         "&:hover": {
           backgroundColor: "transparent"
         },
         padding: 0,
         ".Mui-error > &": {
-          color: "#da372c",
+          color: theme.palette.error.main,
           "&:hover": {
-            color: "#640019"
+            color: theme.palette.error.dark
           }
         },
         "&.Mui-focusVisible": {
-          outlineColor: "#1662dd",
+          outlineColor: theme.palette.primary.main,
           outlineOffset: 0,
           outlineStyle: "solid",
           outlineWidth: "2px"
         }
+      })
+    }
+  },
+  MuiSnackbar: {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
       }
     }
   },
@@ -482,9 +688,11 @@ export const components = {
       fontFamily: "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif"
     },
     styleOverrides: {
-      paragraph: {
-        marginBottom: "1.14285714rem"
-      }
+      paragraph: ({
+        theme
+      }) => ({
+        marginBottom: theme.spacing(4)
+      })
     }
   }
 };