@okta/odyssey-react-mui 0.14.1 → 0.14.4

package/src/themes/odyssey/components.ts

@@ -11,139 +11,56 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+//import radioClasses from "@mui/material";
 
 export const components: ThemeOptions["components"] = {
-  MuiCssBaseline: {
+  MuiAlert: {
     styleOverrides: {
-      boxSizing: "border-box",
-    },
-  },
-  MuiCircularProgress: {
-    defaultProps: {
-      size: "1.14285714rem",
-      thickness: 8,
-      color: "primary",
-      disableShrink: false,
-      variant: "indeterminate",
-    },
-    styleOverrides: {
-      root: ({ ownerState }) => ({
-        ...(ownerState.color !== "inherit" && {
-          color: "#00297a",
+      root: ({ ownerState, theme }) => ({
+        padding: theme.spacing(4),
+        color: theme.palette.text.primary,
+        ...(ownerState.severity && {
+          backgroundColor: theme.palette[ownerState.severity].lighter,
+          borderColor: theme.palette[ownerState.severity].light,
+        }),
+        ...(ownerState.variant === "infobox" && {
+          borderStyle: "solid",
+          borderWidth: 1,
+          "&:not(:last-child)": {
+            marginBottom: theme.spacing(4),
+          },
+        }),
+        ...(ownerState.variant === "banner" && {
+          borderWidth: 0,
         }),
       }),
-      circle: ({ ownerState }) => ({
-        ...(ownerState.variant === "indeterminate" && {
-          strokeDasharray: "160%, 360%",
+      icon: ({ ownerState, theme }) => ({
+        marginRight: theme.spacing(4),
+        padding: 0,
+        fontSize: "1.429rem",
+        opacity: 1,
+        ...(ownerState.severity && {
+          color: theme.palette[ownerState.severity].main,
+        }),
+        ...(ownerState.severity === "warning" && {
+          color: theme.palette[ownerState.severity].dark,
         }),
       }),
+      message: ({ theme }) => ({
+        padding: 0,
+        lineHeight: theme.typography.body.lineHeight,
+      }),
     },
   },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: {
-        color: "#1d1d21",
-        lineHeight: "1.42857143",
-        fontSize: "1rem",
-        fontWeight: 600,
-      },
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        lineHeight: "1.14285714",
-      },
-      input: {
-        boxSizing: "border-box",
-        height: "auto",
-      },
-    },
-  },
-  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",
-      },
-    },
-  },
-  MuiLink: {
+  MuiAlertTitle: {
     styleOverrides: {
-      root: {
-        color: "#1662dd",
-        textDecoration: "none",
-
-        "&:hover": {
-          color: "#1662dd",
-          textDecoration: "underline",
-        },
-
-        "&:focus-visible": {
-          outlineColor: "#1662dd",
-          outlineOffset: "2px",
-          outlineStyle: "solid",
-          outlineWidth: "1px",
-        },
-
-        "&:visited": {
-          color: "#1662dd",
-        },
-
-        ".Link-indicator, .Link-icon": {
-          display: "inline-block",
-          height: "1em",
-          lineHeight: 1,
-        },
-
-        ".Link-indicator": {
-          marginInlineStart: "0.57142857rem",
-        },
-
-        ".Link-icon": {
-          marginInlineEnd: "0.57142857rem",
-        },
-        svg: {
-          fontSize: "1rem",
-          height: "1em",
-          position: "relative",
-          top: "-0.0625em",
-          verticalAlign: "middle",
-          width: "1em",
-        },
-      },
-    },
-    variants: [
-      {
-        props: { variant: "monochrome" },
-        style: {
-          color: "#1d1d21",
-          textDecoration: "underline",
-
-          "&:hover": {
-            color: "#6e6e78",
-          },
-
-          "&:focus-visible": {
-            outlineColor: "#1662dd",
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "1px",
-          },
-
-          "&:visited": {
-            color: "#1d1d21",
-          },
-        },
-      },
-    ],
-  },
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: true,
+      root: ({ theme }) => ({
+        marginTop: 0,
+        marginBottom: theme.spacing(1),
+        lineHeight: theme.typography.h6.lineHeight,
+        fontSize: theme.typography.h6.fontSize,
+        fontWeight: theme.typography.fontWeightBold,
+      }),
     },
   },
   MuiButton: {
@@ -153,86 +70,85 @@ 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,
           },
 
           "&: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",
+        style: ({ theme }) => ({
+          backgroundColor: theme.palette.grey[50],
+          borderColor: theme.palette.grey[200],
+          color: theme.palette.text.primary,
           "&:hover": {
-            background: "#f2f5ff",
-            borderColor: "#a7b5ec",
-            color: "#1662dd",
+            background: theme.palette.primary.lighter,
+            borderColor: theme.palette.primary.light,
+            color: theme.palette.primary.main,
           },
 
           "&:focus-visible": {
-            backgroundColor: "#1662dd",
-            color: "#1662dd",
+            backgroundColor: theme.palette.primary.main,
+            color: 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": {
-            borderColor: "transparent",
-            backgroundColor: "#640019",
+            backgroundColor: theme.palette.error.dark,
           },
 
           "&:focus-visible": {
-            outlineColor: "#f88c90",
-            backgroundColor: "#640019",
+            outlineColor: theme.palette.error.light,
+            backgroundColor: theme.palette.error.dark,
           },
 
           "&:active": {
-            borderColor: "transparent",
-            backgroundColor: "#da372c",
+            backgroundColor: theme.palette.error.main,
           },
 
           "&:disabled": {
-            color: "#ffffff",
-            borderColor: "#f88c90",
-            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": {
@@ -245,46 +161,55 @@ export const components: ThemeOptions["components"] = {
           },
           "&: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
+        props: { children: "" },
+        style: {
+          minWidth: "auto",
+
+          ".MuiButton-startIcon": {
+            margin: "0",
           },
         },
       },
     ],
     styleOverrides: {
-      root: ({ ownerState }) => ({
-        ...ownerState,
+      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",
@@ -302,7 +227,7 @@ export const components: ThemeOptions["components"] = {
         whiteSpace: "nowrap",
 
         "& + &": {
-          marginInlineStart: "0.57142857rem",
+          marginInlineStart: theme.spacing(2),
         },
 
         "&:focus-visible": {
@@ -313,9 +238,370 @@ 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)": {
+          fontSize: "inherit",
         },
       }),
     },
   },
+  MuiButtonBase: {
+    defaultProps: {
+      disableRipple: true,
+    },
+  },
+  MuiCssBaseline: {
+    styleOverrides: {
+      boxSizing: "border-box",
+      fontFeatureSettings: "'lnum','pnum'",
+      fontVariant: "normal",
+    },
+  },
+  MuiCheckbox: {
+    defaultProps: {
+      size: "small",
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius: "4px",
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: theme.palette.error.main,
+          "&:hover": {
+            color: theme.palette.error.dark,
+          },
+        },
+        ".Mui-error > &.Mui-checked": {
+          "&:hover": {
+            color: theme.palette.error.dark,
+          },
+        },
+        "&.Mui-focusVisible": {
+          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",
+      disableShrink: false,
+      variant: "indeterminate",
+    },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        ...(ownerState.color !== "inherit" && {
+          color: theme.palette.primary.dark,
+        }),
+      }),
+      circle: ({ ownerState }) => ({
+        ...(ownerState.variant === "indeterminate" && {
+          strokeDasharray: "160%, 360%",
+        }),
+      }),
+    },
+  },
+  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: theme.spacing(2),
+        marginLeft: 0,
+        marginRight: 0, // used for row presentation of radio/checkbox
+        ...(ownerState.labelPlacement === "start" && {
+          marginLeft: 0, // used for row presentation of radio/checkbox
+          marginRight: 0,
+        }),
+        ...(ownerState.labelPlacement === "top" && {
+          marginLeft: 0,
+        }),
+        ...(ownerState.labelPlacement === "bottom" && {
+          marginLeft: 0,
+        }),
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(2),
+        },
+        "&.Mui-disabled": {
+          pointerEvents: "none",
+        },
+        //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: {
+        //color: theme.palette.text.primary,
+        //},
+        "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
+          color: theme.palette.text.primary,
+        },
+        "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked":
+          {
+            color: theme.palette.primary.dark,
+          },
+        "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root":
+          {
+            color: theme.palette.error.dark,
+          },
+        "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked":
+          {
+            color: theme.palette.error.dark,
+          },
+      }),
+    },
+  },
+  MuiFormHelperText: {
+    defaultProps: {
+      variant: "standard",
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        lineHeight: "1.33333333",
+        marginTop: theme.spacing(2),
+        ".MuiFormLabel-root + &": {
+          marginTop: `-${theme.spacing(1)}`,
+          color: theme.palette.text.secondary,
+        },
+        marginBottom: theme.spacing(2),
+        "&:last-child": {
+          marginBottom: 0,
+        },
+      }),
+    },
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        color: theme.palette.text.primary,
+        lineHeight: "1.14285714",
+        fontSize: "1rem",
+        fontWeight: 600,
+        marginBottom: theme.spacing(2),
+        "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
+          color: theme.palette.text.primary,
+        },
+      }),
+    },
+  },
+  MuiInputAdornment: {
+    defaultProps: {
+      variant: "outlined",
+    },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        display: "flex",
+        ...(ownerState.position === "start" && {
+          marginRight: 0,
+        }),
+        ...(ownerState.position === "end" && {
+          marginLeft: 0,
+        }),
+      }),
+    },
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        lineHeight: "1.14285714",
+      },
+      input: {
+        boxSizing: "border-box",
+        height: "auto",
+      },
+    },
+  },
+  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: ({ theme }) => ({
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+
+        "&:hover": {
+          color: theme.palette.primary.main,
+          textDecoration: "underline",
+        },
+
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: "2px",
+          outlineStyle: "solid",
+          outlineWidth: "1px",
+        },
+
+        "&:visited": {
+          color: theme.palette.primary.main,
+        },
+
+        ".Link-indicator, .Link-icon": {
+          display: "inline-block",
+          height: "1em",
+          lineHeight: 1,
+        },
+
+        ".Link-indicator": {
+          marginInlineStart: theme.spacing(2),
+        },
+
+        ".Link-icon": {
+          marginInlineEnd: theme.spacing(2),
+        },
+        svg: {
+          fontSize: "1rem",
+          height: "1em",
+          position: "relative",
+          top: "-0.0625em",
+          verticalAlign: "middle",
+          width: "1em",
+        },
+      }),
+    },
+    variants: [
+      {
+        props: { variant: "monochrome" },
+        style: ({ theme }) => ({
+          color: theme.palette.text.primary,
+          textDecoration: "underline",
+
+          "&:hover": {
+            color: theme.palette.text.secondary,
+          },
+
+          "&:focus-visible": {
+            outlineColor: theme.palette.primary.main,
+            outlineOffset: "2px",
+            outlineStyle: "solid",
+            outlineWidth: "1px",
+          },
+
+          "&:visited": {
+            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: ({ theme }) => ({
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: theme.palette.error.main,
+          "&:hover": {
+            color: theme.palette.error.dark,
+          },
+        },
+        "&.Mui-focusVisible": {
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: 0,
+          outlineStyle: "solid",
+          outlineWidth: "2px",
+        },
+      }),
+    },
+  },
+  MuiTypography: {
+    defaultProps: {
+      fontFamily:
+        "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+    },
+    styleOverrides: {
+      paragraph: ({ theme }) => ({
+        marginBottom: theme.spacing(4),
+      }),
+    },
+  },
 };