@okta/odyssey-react-mui 0.14.3 → 0.14.6

package/src/themes/odyssey/components.ts

@@ -12,17 +12,25 @@
 
 import type { ThemeOptions } from "@mui/material";
 //import radioClasses from "@mui/material";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
 
 export const components: ThemeOptions["components"] = {
   MuiAlert: {
     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 +38,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 +80,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 +115,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
@@ -227,7 +278,7 @@ export const components: ThemeOptions["components"] = {
         whiteSpace: "nowrap",
 
         "& + &": {
-          marginInlineStart: "0.57142857rem",
+          marginInlineStart: theme.spacing(2),
         },
 
         "&:focus-visible": {
@@ -264,34 +315,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",
@@ -299,9 +351,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 }) => ({
@@ -332,8 +384,8 @@ export const components: ThemeOptions["components"] = {
   },
   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" && {
@@ -347,28 +399,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,
           },
       }),
     },
@@ -378,32 +430,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: {
@@ -442,24 +518,24 @@ export const components: ThemeOptions["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": {
@@ -469,11 +545,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",
@@ -483,30 +559,30 @@ 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,
           },
-        },
+        }),
       },
     ],
   },
@@ -523,25 +599,59 @@ export const components: ThemeOptions["components"] = {
   MuiOutlinedInput: {
     defaultProps: {
       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,
-        },
       }),
     },
   },
@@ -550,35 +660,110 @@ export const components: ThemeOptions["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),
+      }),
     },
   },
 };