@okta/odyssey-react-mui 0.14.4 → 0.15.0

package/src/themes/odyssey/{components.ts → components.tsx}

@@ -12,17 +12,38 @@
 
 import type { ThemeOptions } from "@mui/material";
 //import radioClasses from "@mui/material";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import {
+  AlertTriangleFilledIcon,
+  CheckCircleFilledIcon,
+  InformationCircleFilledIcon,
+} from "../../components/Icon";
 
 export const components: ThemeOptions["components"] = {
   MuiAlert: {
+    defaultProps: {
+      iconMapping: {
+        error: <AlertTriangleFilledIcon />,
+        info: <InformationCircleFilledIcon />,
+        success: <CheckCircleFilledIcon />,
+        warning: <AlertTriangleFilledIcon />,
+      },
+    },
     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 +51,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 +93,17 @@ export const components: ThemeOptions["components"] = {
           color: theme.palette[ownerState.severity].dark,
         }),
       }),
-      message: ({ theme }) => ({
+      message: ({ ownerState, theme }) => ({
         padding: 0,
-        lineHeight: theme.typography.body.lineHeight,
+        lineHeight: theme.typography.body1.lineHeight,
+        ...(ownerState.variant === "banner" && {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: theme.spacing(4),
+        }),
+        ...(ownerState.variant === "toast" && {
+          flexGrow: 1,
+        }),
       }),
     },
   },
@@ -80,6 +135,10 @@ export const components: ThemeOptions["components"] = {
             backgroundColor: theme.palette.primary.dark,
           },
 
+          "&:focus-visible": {
+            outlineColor: theme.palette.primary.main,
+          },
+
           "&:active": {
             backgroundColor: theme.palette.primary.main,
           },
@@ -96,15 +155,14 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[200],
           color: theme.palette.text.primary,
-          "&:hover": {
-            background: theme.palette.primary.lighter,
+          "&:hover, &:focus-visible": {
+            backgroundColor: theme.palette.primary.lighter,
             borderColor: theme.palette.primary.light,
             color: theme.palette.primary.main,
           },
 
           "&:focus-visible": {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.main,
+            outlineColor: theme.palette.primary.main,
           },
 
           "&:active": {
@@ -130,7 +188,7 @@ export const components: ThemeOptions["components"] = {
           },
 
           "&:focus-visible": {
-            outlineColor: theme.palette.error.light,
+            outlineColor: theme.palette.error.main,
             backgroundColor: theme.palette.error.dark,
           },
 
@@ -155,6 +213,9 @@ export const components: ThemeOptions["components"] = {
             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",
@@ -226,7 +287,7 @@ export const components: ThemeOptions["components"] = {
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
 
-        "& + &": {
+        ".MuiButton-root + &": {
           marginInlineStart: theme.spacing(2),
         },
 
@@ -313,17 +374,26 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiFormControl: {
+    defaultProps: {
+      margin: "normal",
+    },
     styleOverrides: {
       root: ({ ownerState, theme }) => ({
         width: "100%",
         maxWidth: "32rem",
         ...(ownerState.margin === "normal" && {
           marginTop: 0,
-          marginBottom: theme.spacing(4),
+          marginBottom: theme.spacing(5),
+          "&:last-child": {
+            marginBottom: 0,
+          },
         }),
         ...(ownerState.margin === "dense" && {
           marginTop: 0,
-          marginBottom: theme.spacing(4),
+          marginBottom: theme.spacing(5),
+          "&:last-child": {
+            marginBottom: 0,
+          },
         }),
         ...(ownerState.fullWidth && {
           maxWidth: "100%",
@@ -407,6 +477,14 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiIconButton: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: theme.spacing(1),
+        fontSize: theme.typography.body1.fontSize,
+      }),
+    },
+  },
   MuiInputAdornment: {
     defaultProps: {
       variant: "outlined",
@@ -540,10 +618,36 @@ export const components: ThemeOptions["components"] = {
   MuiOutlinedInput: {
     defaultProps: {
       notched: false,
+      minRows: 3,
     },
     styleOverrides: {
       root: ({ ownerState, theme }) => ({
-        "&.Mui-disabled": {
+        [`&: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 && {
@@ -552,19 +656,21 @@ export const components: ThemeOptions["components"] = {
         ...(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,
-        },
       }),
     },
   },
@@ -593,15 +699,125 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiSnackbar: {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right",
+      },
+    },
+  },
+  MuiSvgIcon: {
+    defaultProps: {
+      fontSize: "inherit",
+      color: "inherit",
+    },
+  },
+  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.body1.lineHeight,
+        overflow: "visible",
+        ...(ownerState.selected == true && {
+          color: theme.palette.text.primary,
+        }),
+        ...(ownerState.textColor === "inherit" && {
+          color: "inherit",
+          opacity: 1,
+        }),
+        ...(ownerState.wrapped && {
+          fontSize: theme.typography.subtitle1.fontSize,
+          lineHeight: theme.typography.subtitle1.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",
+      variantMapping: {
+        h1: "h1",
+        h2: "h2",
+        h3: "h3",
+        h4: "h4",
+        h5: "h5",
+        h6: "h6",
+        subtitle1: "p",
+        body1: "p",
+        inherit: "p",
+        kbd: "kbd",
+        legend: "legend",
+      },
     },
     styleOverrides: {
       paragraph: ({ theme }) => ({
         marginBottom: theme.spacing(4),
       }),
+      root: ({ theme, ownerState }) => ({
+        ...(ownerState.variant === "kbd" && {
+          display: "inline-block",
+          minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
+          borderColor: theme.palette.grey[200],
+          backgroundColor: theme.palette.grey[50],
+          padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`,
+          fontSize: theme.typography.subtitle1.fontSize,
+          fontWeight: theme.typography.fontWeightRegular,
+          lineHeight: theme.typography.h5.lineHeight,
+          boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
+        }),
+      }),
     },
   },
 };

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;
   }
 }
 

package/src/themes/odyssey/mixins.ts

@@ -0,0 +1,21 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import type { ThemeOptions } from "@mui/material";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+export const mixins: ThemeOptions["mixins"] = {
+  maxWidth: Tokens.FontLineLengthMax,
+  borderRadius: Tokens.BorderRadiusBase,
+  borderStyle: Tokens.BorderStyleBase,
+  borderWidth: Tokens.BorderWidthBase,
+};

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

@@ -0,0 +1,29 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+declare module "@mui/material/styles" {
+  interface Mixins {
+    borderRadius?: string;
+    borderStyle?: string;
+    borderWidth?: string;
+    maxWidth?: string;
+  }
+
+  interface MixinsOptions {
+    borderRadius?: string;
+    borderStyle?: string;
+    borderWidth?: string;
+    maxWidth?: string;
+  }
+}
+
+export {};

package/src/themes/odyssey/palette.ts

@@ -78,9 +78,9 @@ export const palette: ThemeOptions["palette"] = {
     A700: "#585862",
   },
   text: {
-    primary: Tokens.ColorNeutralDark,
-    secondary: Tokens.ColorNeutralBase,
-    disabled: Tokens.ColorNeutralBase, // We do not currently have a unique disabled color.
+    primary: Tokens.ColorPaletteNeutral900,
+    secondary: Tokens.ColorPaletteNeutral600,
+    disabled: Tokens.ColorPaletteNeutral500,
   },
   divider: Tokens.ColorBorderDisplay,
   background: {
@@ -94,7 +94,7 @@ export const palette: ThemeOptions["palette"] = {
     hoverOpacity: 0.04,
     selected: "rgba(0, 0, 0, 0.08)",
     selectedOpacity: 0.08,
-    disabled: "rgba(0, 0, 0, 0.26)",
+    disabled: Tokens.ColorPaletteNeutral200,
     disabledBackground: "rgba(0, 0, 0, 0.12)",
     disabledOpacity: 0.38,
     focus: "rgba(0, 0, 0, 0.12)",

package/src/themes/odyssey/theme.ts

@@ -15,6 +15,8 @@ import { createTheme } from "@mui/material/styles";
 import { palette } from "./palette";
 import "./palette.types";
 import { shape } from "./shape";
+import { mixins } from "./mixins";
+import "./mixins.types";
 import { spacing } from "./spacing";
 import { typography } from "./typography";
 import "./typography.types";
@@ -24,6 +26,7 @@ import "./components.types";
 export const theme = createTheme({
   palette,
   shape,
+  mixins,
   spacing,
   typography,
   components,

package/src/themes/odyssey/typography.ts

@@ -63,9 +63,13 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightHeading6,
     marginBottom: Tokens.SpaceScale1,
   },
-  subtitle1: undefined,
+  subtitle1: {
+    fontWeight: Tokens.FontWeightNormal,
+    fontSize: Tokens.FontScale0,
+    lineHeight: Tokens.FontLineHeightBody,
+  },
   subtitle2: undefined,
-  body: {
+  body1: {
     fontFamily: Tokens.FontFamilyBase,
     fontWeight: Number(Tokens.FontWeightNormal),
     fontSize: Tokens.FontScale1,
@@ -74,13 +78,14 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightBody,
     letterSpacing: "initial",
   },
-  body1: undefined,
   body2: undefined,
   button: undefined,
-  caption: {
-    fontWeight: Tokens.FontWeightNormal,
-    fontSize: Tokens.FontScale0,
-    lineHeight: Tokens.FontLineHeightBody,
-  },
   overline: undefined,
+  legend: {
+    padding: 0,
+    fontWeight: Number(Tokens.FontWeightBold),
+    fontSize: Tokens.FontScale2,
+    lineHeight: Tokens.FontLineHeightHeading6,
+    marginBottom: Tokens.SpaceScale1,
+  },
 };

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

@@ -14,23 +14,29 @@ import { CSSProperties } from "react";
 
 declare module "@mui/material/styles" {
   interface TypographyVariants {
-    body: CSSProperties;
+    kbd: CSSProperties;
+    legend: CSSProperties;
   }
   interface TypographyVariantsOptions {
-    body?: CSSProperties;
+    kbd?: CSSProperties;
+    legend?: CSSProperties;
   }
 }
 
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
-    body1: false;
+    body1: true;
     body2: false;
     body: true;
     button: false;
+    kbd: true;
+    legend: true;
     overline: false;
-    subtitle1: false;
+    subtitle1: true;
     subtitle2: false;
     default: true; // used by Link
     monochrome: true; // used by Link
   }
 }
+
+export {};