@okta/odyssey-react-mui 0.14.3 → 0.14.6

package/dist/themes/odyssey/components.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
 export const components = {
   MuiAlert: {
     styleOverrides: {
@@ -17,11 +18,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 +37,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 +81,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 +119,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: ""
@@ -226,7 +287,7 @@ export const components = {
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
         "& + &": {
-          marginInlineStart: "0.57142857rem"
+          marginInlineStart: theme.spacing(2)
         },
         "&:focus-visible": {
           outlineOffset: "2px",
@@ -260,30 +321,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: {
@@ -296,9 +359,10 @@ export const components = {
     },
     styleOverrides: {
       root: ({
+        theme,
         ownerState
       }) => ({ ...(ownerState.color !== "inherit" && {
-          color: "#00297a"
+          color: theme.palette.primary.dark
         })
       }),
       circle: ({
@@ -334,9 +398,10 @@ export const components = {
   MuiFormControlLabel: {
     styleOverrides: {
       root: ({
+        theme,
         ownerState
       }) => ({
-        gap: "0.57142857rem",
+        gap: theme.spacing(2),
         marginLeft: 0,
         marginRight: 0,
         ...(ownerState.labelPlacement === "start" && {
@@ -350,22 +415,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
         }
       })
     }
@@ -375,32 +440,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: {
@@ -439,21 +536,23 @@ export const components = {
   },
   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",
@@ -461,10 +560,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",
@@ -474,28 +573,30 @@ 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: {
@@ -512,30 +613,62 @@ export const components = {
   },
   MuiOutlinedInput: {
     defaultProps: {
-      notched: false
+      notched: false,
+      minRows: 3
     },
     styleOverrides: {
-      root: {
-        "&.Mui-disabled": {
+      root: ({
+        ownerState,
+        theme
+      }) => ({
+        [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.text.primary
+        },
+        [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.primary.main,
+          borderWidth: 2
+        },
+        [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.error.main
+        },
+        [`&.${outlinedInputClasses.error}:hover .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.error.dark
+        },
+        [`&.${outlinedInputClasses.error}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.error.main
+        },
+        [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.palette.action.disabled
+        },
+        [`&.${outlinedInputClasses.disabled}`]: {
+          backgroundColor: theme.palette.grey[50],
           pointerEvents: "none"
-        }
-      },
+        },
+        ...(ownerState.startAdornment && {
+          paddingLeft: theme.spacing(3)
+        }),
+        ...(ownerState.endAdornment && {
+          paddingRight: theme.spacing(3)
+        }),
+        ...(ownerState.multiline && {
+          padding: "0",
+          ...(ownerState.size === "small" && {
+            padding: "0"
+          })
+        })
+      }),
       input: ({
         theme
       }) => ({
         padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-        border: "1px solid transparent"
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderColor: "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
-        }
+        borderColor: theme.palette.grey[500]
       })
     }
   },
@@ -544,34 +677,120 @@ export const components = {
       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"
       }
     }
   },
+  MuiTab: {
+    defaultProps: {
+      iconPosition: "start"
+    },
+    styleOverrides: {
+      root: ({
+        theme,
+        ownerState
+      }) => ({
+        maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
+        minWidth: "unset",
+        minHeight: "unset",
+        padding: `${theme.spacing(4)} 0`,
+        lineHeight: theme.typography.body.lineHeight,
+        overflow: "visible",
+        ...(ownerState.selected == true && {
+          color: theme.palette.text.primary
+        }),
+        ...(ownerState.textColor === "inherit" && {
+          color: "inherit",
+          opacity: 1
+        }),
+        ...(ownerState.wrapped && {
+          fontSize: theme.typography.caption.fontSize,
+          lineHeight: theme.typography.caption.lineHeight
+        }),
+        "&:hover": {
+          color: theme.palette.primary.main
+        },
+        "&:focus-visible::before, &.Mui-focusVisible::before": {
+          content: "''",
+          position: "absolute",
+          top: theme.spacing(4),
+          right: `calc(-1 * ${theme.spacing(2)})`,
+          bottom: theme.spacing(4),
+          left: `calc(-1 * ${theme.spacing(2)})`,
+          borderWidth: theme.mixins.borderWidth,
+          borderStyle: theme.mixins.borderStyle,
+          borderColor: theme.palette.primary.main,
+          borderRadius: theme.mixins.borderRadius
+        },
+        "&.Mui-selected": {
+          color: theme.palette.text.primary,
+          fontWeight: theme.typography.fontWeightBold,
+          "&:hover": {
+            color: theme.palette.primary.main
+          }
+        },
+        "&.Mui-disabled": {
+          cursor: "not-allowed",
+          pointerEvents: "unset",
+          "&:hover": {
+            color: theme.palette.text.disabled
+          }
+        }
+      })
+    }
+  },
+  MuiTabs: {
+    styleOverrides: {
+      root: ({
+        theme
+      }) => ({
+        minHeight: "unset",
+        marginBottom: theme.spacing(5)
+      }),
+      flexContainer: ({
+        theme
+      }) => ({
+        gap: theme.spacing(5),
+        borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
+      })
+    }
+  },
   MuiTypography: {
     defaultProps: {
       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)
+      })
     }
   }
 };