@okta/odyssey-react-mui 0.14.2 → 0.14.5

package/src/themes/odyssey/components.ts

@@ -18,11 +18,18 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ ownerState, 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,
@@ -30,12 +37,38 @@ export const components: ThemeOptions["components"] = {
             marginBottom: theme.spacing(4),
           },
         }),
+        ...(ownerState.variant === "toast" && {
+          maxWidth: theme.mixins.maxWidth,
+          borderStyle: "solid",
+          borderWidth: 1,
+          position: "relative",
+          alignItems: "start",
+        }),
+      }),
+      action: ({ ownerState, theme }) => ({
         ...(ownerState.variant === "banner" && {
-          borderWidth: 0,
+          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,
@@ -46,9 +79,20 @@ export const components: ThemeOptions["components"] = {
           color: theme.palette[ownerState.severity].dark,
         }),
       }),
-      message: ({ theme }) => ({
+      message: ({ ownerState, theme }) => ({
         padding: 0,
         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)})`,
+        }),
       }),
     },
   },
@@ -70,129 +114,135 @@ export const components: ThemeOptions["components"] = {
     variants: [
       {
         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),
           },
-        },
+        }),
       },
       {
         // icon only
@@ -207,10 +257,9 @@ export const components: ThemeOptions["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",
@@ -228,7 +277,7 @@ export const components: ThemeOptions["components"] = {
         whiteSpace: "nowrap",
 
         "& + &": {
-          marginInlineStart: "0.57142857rem",
+          marginInlineStart: theme.spacing(2),
         },
 
         "&:focus-visible": {
@@ -239,7 +288,7 @@ export const components: ThemeOptions["components"] = {
 
         "&:disabled": {
           cursor: "not-allowed",
-          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from 'none'
+          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from "none"
         },
 
         ".MuiButton-startIcon > *:nth-of-type(1)": {
@@ -265,34 +314,35 @@ export const components: ThemeOptions["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: {
     defaultProps: {
+      // TODO: defaultProps cannot take a theme object; needs workaround
       size: "1.14285714rem",
       thickness: 8,
       color: "primary",
@@ -300,9 +350,9 @@ export const components: ThemeOptions["components"] = {
       variant: "indeterminate",
     },
     styleOverrides: {
-      root: ({ ownerState }) => ({
+      root: ({ theme, ownerState }) => ({
         ...(ownerState.color !== "inherit" && {
-          color: "#00297a",
+          color: theme.palette.primary.dark,
         }),
       }),
       circle: ({ ownerState }) => ({
@@ -312,10 +362,29 @@ export const components: ThemeOptions["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: ({ ownerState }) => ({
-        gap: "0.57142857rem",
+      root: ({ theme, ownerState }) => ({
+        gap: theme.spacing(2),
         marginLeft: 0,
         marginRight: 0, // used for row presentation of radio/checkbox
         ...(ownerState.labelPlacement === "start" && {
@@ -329,28 +398,28 @@ export const components: ThemeOptions["components"] = {
           marginLeft: 0,
         }),
         "&:not(:last-child)": {
-          marginBottom: "0.57142857rem",
+          marginBottom: theme.spacing(2),
         },
         "&.Mui-disabled": {
           pointerEvents: "none",
         },
         //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: {
-        //color: "#1d1d21",
+        //color: theme.palette.text.primary,
         //},
         "&: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,
           },
       }),
     },
@@ -360,32 +429,56 @@ export const components: ThemeOptions["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: {
@@ -399,26 +492,49 @@ export const components: ThemeOptions["components"] = {
       },
     },
   },
+  MuiInputLabel: {
+    defaultProps: {
+      disableAnimation: true,
+      shrink: false,
+    },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        // @ts-expect-error: Incorrect typing in MUI
+        ...(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": {
@@ -428,11 +544,11 @@ export const components: ThemeOptions["components"] = {
         },
 
         ".Link-indicator": {
-          marginInlineStart: "0.57142857rem",
+          marginInlineStart: theme.spacing(2),
         },
 
         ".Link-icon": {
-          marginInlineEnd: "0.57142857rem",
+          marginInlineEnd: theme.spacing(2),
         },
         svg: {
           fontSize: "1rem",
@@ -442,55 +558,104 @@ export const components: ThemeOptions["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",
       },
     },
   },
@@ -500,9 +665,9 @@ export const components: ThemeOptions["components"] = {
         "'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),
+      }),
     },
   },
 };

package/src/themes/odyssey/components.types.ts

@@ -19,6 +19,7 @@ declare module "@mui/material/Alert" {
     // Enable Odyssey variants
     banner: true;
     infobox: true;
+    toast: true;
   }
 }