@okta/odyssey-react-mui 0.14.1 → 0.14.2

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: {
@@ -206,8 +123,9 @@ export const components: ThemeOptions["components"] = {
         style: {
           backgroundColor: "#da372c",
           color: "#ffffff",
+          borderColor: "transparent",
+
           "&:hover": {
-            borderColor: "transparent",
             backgroundColor: "#640019",
           },
 
@@ -217,13 +135,11 @@ export const components: ThemeOptions["components"] = {
           },
 
           "&:active": {
-            borderColor: "transparent",
             backgroundColor: "#da372c",
           },
 
           "&:disabled": {
             color: "#ffffff",
-            borderColor: "#f88c90",
             backgroundColor: "#f88c90",
           },
         },
@@ -278,10 +194,20 @@ export const components: ThemeOptions["components"] = {
           },
         },
       },
+      {
+        // icon only
+        props: { children: "" },
+        style: {
+          minWidth: "auto",
+
+          ".MuiButton-startIcon": {
+            margin: "0",
+          },
+        },
+      },
     ],
     styleOverrides: {
-      root: ({ ownerState }) => ({
-        ...ownerState,
+      root: () => ({
         fontWeight: 600,
         paddingBlock: "0.85714286rem",
         paddingInline: "0.85714286rem",
@@ -315,7 +241,268 @@ export const components: ThemeOptions["components"] = {
           cursor: "not-allowed",
           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: {
+        borderRadius: "4px",
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: "#da372c",
+          "&:hover": {
+            color: "#640019",
+          },
+        },
+        ".Mui-error > &.Mui-checked": {
+          "&:hover": {
+            color: "#640019",
+          },
+        },
+        "&.Mui-focusVisible": {
+          outlineColor: "#1662dd",
+          outlineOffset: 0,
+          outlineStyle: "solid",
+          outlineWidth: "2px",
+        },
+      },
+    },
+  },
+  MuiCircularProgress: {
+    defaultProps: {
+      size: "1.14285714rem",
+      thickness: 8,
+      color: "primary",
+      disableShrink: false,
+      variant: "indeterminate",
+    },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        ...(ownerState.color !== "inherit" && {
+          color: "#00297a",
+        }),
+      }),
+      circle: ({ ownerState }) => ({
+        ...(ownerState.variant === "indeterminate" && {
+          strokeDasharray: "160%, 360%",
+        }),
+      }),
+    },
+  },
+  MuiFormControlLabel: {
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        gap: "0.57142857rem",
+        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: "0.57142857rem",
+        },
+        "&.Mui-disabled": {
+          pointerEvents: "none",
+        },
+        //[`&:hover ${radioClasses.root}:not(${radioClasses.checked})`]: {
+        //color: "#1d1d21",
+        //},
+        "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
+          color: "#1d1d21",
+        },
+        "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked":
+          {
+            color: "#00297a",
+          },
+        "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root":
+          {
+            color: "#640019",
+          },
+        "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked":
+          {
+            color: "#640019",
+          },
       }),
     },
   },
+  MuiFormHelperText: {
+    defaultProps: {
+      variant: "standard",
+    },
+    styleOverrides: {
+      root: {
+        lineHeight: "1.33333333",
+        marginTop: "0.57142857rem",
+        ".MuiFormLabel-root + &": {
+          marginTop: "-0.28571429rem",
+          color: "#6e6e78",
+        },
+        marginBottom: "0.57142857rem",
+        "&:last-child": {
+          marginBottom: 0,
+        },
+      },
+    },
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: {
+        color: "#1d1d21",
+        lineHeight: "1.14285714",
+        fontSize: "1rem",
+        fontWeight: 600,
+        marginBottom: "0.57142857rem",
+        "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
+          color: "#1d1d21",
+        },
+      },
+    },
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        lineHeight: "1.14285714",
+      },
+      input: {
+        boxSizing: "border-box",
+        height: "auto",
+      },
+    },
+  },
+  MuiLink: {
+    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",
+          },
+        },
+      },
+    ],
+  },
+  MuiRadio: {
+    defaultProps: {
+      size: "small",
+    },
+    styleOverrides: {
+      root: {
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+        padding: 0,
+        ".Mui-error > &": {
+          color: "#da372c",
+          "&:hover": {
+            color: "#640019",
+          },
+        },
+        "&.Mui-focusVisible": {
+          outlineColor: "#1662dd",
+          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: {
+        marginBottom: "1.14285714rem",
+      },
+    },
+  },
 };

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

@@ -10,6 +10,47 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+declare module "@mui/material/Alert" {
+  interface AlertPropsVariantOverrides {
+    // Disable Mui defaults
+    filled: false;
+    outlined: false;
+    standard: false;
+    // Enable Odyssey variants
+    banner: true;
+    infobox: true;
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsVariantOverrides {
+    floating: true;
+    primary: true;
+    secondary: true;
+    danger: true;
+    text: false;
+    contained: false;
+    outlined: false;
+  }
+  interface ButtonPropsSizeOverrides {
+    s: true;
+    m: true;
+    l: true;
+    small: false;
+    medium: false;
+    large: false;
+  }
+  interface ButtonPropsColorOverrides {
+    inherit: false;
+    primary: false;
+    secondary: false;
+    error: false;
+    info: false;
+    warning: false;
+    success: false;
+  }
+}
+
 declare module "@mui/material/Link" {
   interface LinkPropsVariantOverrides {
     default: true;
@@ -46,33 +87,5 @@ declare module "@mui/material/Link" {
     success: false;
   }
 }
-declare module "@mui/material/Button" {
-  interface ButtonPropsVariantOverrides {
-    floating: true;
-    primary: true;
-    secondary: true;
-    danger: true;
-    text: false;
-    contained: false;
-    outlined: false;
-  }
-  interface ButtonPropsSizeOverrides {
-    s: true;
-    m: true;
-    l: true;
-    small: false;
-    medium: false;
-    large: false;
-  }
-  interface ButtonPropsColorOverrides {
-    inherit: false;
-    primary: false;
-    secondary: false;
-    error: false;
-    info: false;
-    warning: false;
-    success: false;
-  }
-}
 
 export {};

package/src/themes/odyssey/palette.ts

@@ -11,48 +11,54 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+import * as Tokens from "@okta/odyssey-design-tokens";
 
 export const palette: ThemeOptions["palette"] = {
   mode: "light",
   common: {
-    black: "#1d1d21",
-    white: "#ffffff",
+    black: Tokens.ColorNeutralDark,
+    white: Tokens.ColorPaletteNeutralWhite,
   },
   primary: {
-    light: "#a7b5ec",
-    main: "#1662dd",
-    dark: "#00297a",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteBlue000,
+    light: Tokens.ColorPaletteBlue300,
+    main: Tokens.ColorPaletteBlue500,
+    dark: Tokens.ColorPaletteBlue900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   secondary: {
     light: "#80C7CA",
-    main: "#2D8C9E",
+    main: Tokens.ColorPaletteTurquoise500,
     dark: "#004650",
-    contrastText: "#ffffff",
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   error: {
-    light: "#f88c90",
-    main: "#da372c",
-    dark: "#640019",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteRed000,
+    light: Tokens.ColorPaletteRed300,
+    main: Tokens.ColorPaletteRed500,
+    dark: Tokens.ColorPaletteRed900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   warning: {
-    light: "#f9dc77",
-    main: "#ffc61c",
-    dark: "#663800",
-    contrastText: "#1d1d21",
+    lighter: Tokens.ColorPaletteYellow000,
+    light: Tokens.ColorPaletteYellow300,
+    main: Tokens.ColorPaletteYellow500,
+    dark: Tokens.ColorPaletteYellow900,
+    contrastText: Tokens.ColorTextBody,
   },
   info: {
-    light: "#a7b5ec",
-    main: "#1662dd",
-    dark: "#00297a",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteBlue000,
+    light: Tokens.ColorPaletteBlue300,
+    main: Tokens.ColorPaletteBlue500,
+    dark: Tokens.ColorPaletteBlue900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   success: {
-    light: "#84d2b1",
-    main: "#00b478",
-    dark: "#00503c",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteGreen000,
+    light: Tokens.ColorPaletteGreen300,
+    main: Tokens.ColorPaletteGreen500,
+    dark: Tokens.ColorPaletteGreen900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   grey: {
     50: "#f5f5f6",
@@ -72,16 +78,14 @@ export const palette: ThemeOptions["palette"] = {
     A700: "#585862",
   },
   text: {
-    primary: "#1d1d21",
-    secondary: "#6e6e78",
-    // We do not currently have a unique disabled color.
-    disabled: "#6e6e78",
+    primary: Tokens.ColorNeutralDark,
+    secondary: Tokens.ColorNeutralBase,
+    disabled: Tokens.ColorNeutralBase, // We do not currently have a unique disabled color.
   },
-  // Currently mapping this to ColorBorderDisplay.
-  divider: "#d7d7dc",
+  divider: Tokens.ColorBorderDisplay,
   background: {
-    paper: "#ffffff",
-    default: "#ffffff",
+    paper: Tokens.ColorBackgroundBase,
+    default: Tokens.ColorBackgroundBase,
   },
   action: {
     // We have no equivalents here. It's likely we will update these as their uses are discovered.

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

@@ -0,0 +1,22 @@
+/*!
+ * 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 PaletteColor {
+    lighter?: string;
+  }
+  interface SimplePaletteColorOptions {
+    lighter?: string;
+  }
+}
+
+export {};