@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/dist/theme/components.js

@@ -376,7 +376,9 @@ export const components = ({
             display: "none"
           })
         }),
-        listbox: {
+        listbox: ({
+          theme
+        }) => ({
           borderWidth: odysseyTokens.BorderWidthMain,
           borderStyle: odysseyTokens.BorderStyleMain,
           borderColor: odysseyTokens.HueNeutral200,
@@ -394,6 +396,13 @@ export const components = ({
             [`&.${autocompleteClasses.focused}`]: {
               backgroundColor: odysseyTokens.HueNeutral100
             },
+            [`&.${autocompleteClasses.focusVisible}`]: {
+              backgroundColor: "transparent",
+              boxShadow: theme.mixins.insetFocusRing,
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.HueNeutral100
+              }
+            },
             [`&[aria-selected="true"]`]: {
               backgroundColor: "transparent",
               color: odysseyTokens.TypographyColorAction,
@@ -411,7 +420,7 @@ export const components = ({
             marginBlockStart: 0,
             marginBlockEnd: 0
           }
-        },
+        }),
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
@@ -579,7 +588,7 @@ export const components = ({
               "&:hover": {
                 backgroundColor: odysseyTokens.PalettePrimaryDark
               },
-              "&:active": {
+              "&:active, &[aria-expanded='true']": {
                 backgroundColor: odysseyTokens.PalettePrimaryDarker
               },
               "&:disabled": {
@@ -592,24 +601,18 @@ export const components = ({
               borderColor: odysseyTokens.HueNeutral300,
               color: odysseyTokens.TypographyColorBody,
               "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: odysseyTokens.HueNeutral400
               },
-              "&:active": {
+              "&:active, &[aria-expanded='true']": {
                 backgroundColor: "transparent",
                 borderColor: odysseyTokens.BorderColorPrimaryControl,
                 color: odysseyTokens.TypographyColorAction
               },
               "&:disabled": {
-                ...(contrastMode === "highContrast" && {
-                  backgroundColor: odysseyTokens.HueNeutral200,
-                  borderColor: "transparent",
-                  color: odysseyTokens.TypographyColorDisabled
-                }),
-                ...(contrastMode === "lowContrast" && {
-                  backgroundColor: odysseyTokens.HueNeutral100,
-                  borderColor: "transparent",
-                  color: odysseyTokens.TypographyColorDisabled
-                })
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
               }
             }),
             ...(ownerState.variant === "danger" && {
@@ -621,7 +624,7 @@ export const components = ({
               "&:focus-visible": {
                 boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
               },
-              "&:active": {
+              "&:active, &[aria-expanded='true']": {
                 backgroundColor: odysseyTokens.PaletteDangerDarker
               },
               "&:disabled": {
@@ -634,17 +637,18 @@ export const components = ({
               borderColor: odysseyTokens.HueNeutral300,
               color: odysseyTokens.PaletteDangerMain,
               "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100,
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: odysseyTokens.HueNeutral400,
                 color: odysseyTokens.PaletteDangerMain
               },
-              "&:active": {
+              "&:active, &[aria-expanded='true']": {
                 backgroundColor: "transparent",
                 borderColor: odysseyTokens.PaletteDangerMain,
                 color: odysseyTokens.PaletteDangerMain
               },
               "&:disabled": {
-                backgroundColor: "transparent",
-                borderColor: odysseyTokens.PaletteDangerLight,
+                backgroundColor: odysseyTokens.PaletteDangerHighlight,
+                borderColor: "transparent",
                 color: odysseyTokens.PaletteDangerLight
               }
             }),
@@ -652,11 +656,13 @@ export const components = ({
               backgroundColor: "transparent",
               color: odysseyTokens.TypographyColorBody,
               "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100
-              },
-              "&:active": {
                 backgroundColor: odysseyTokens.HueNeutral200
               },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.HueBlue600,
+                borderColor: odysseyTokens.HueBlue600
+              },
               "&:disabled": {
                 backgroundColor: "transparent",
                 color: odysseyTokens.TypographyColorDisabled
@@ -666,11 +672,12 @@ export const components = ({
               backgroundColor: "transparent",
               color: odysseyTokens.TypographyColorAction,
               "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100
-              },
-              "&:active": {
                 backgroundColor: odysseyTokens.HueNeutral200
               },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.HueBlue600
+              },
               "&:disabled": {
                 backgroundColor: "transparent",
                 color: odysseyTokens.TypographyColorDisabled
@@ -738,8 +745,8 @@ export const components = ({
           position: "relative",
           transition: `all ${odysseyTokens.TransitionDurationMain} ${odysseyTokens.TransitionTimingMain}`,
           "&.ods-card-compact": {
-            marginBlockEnd: odysseyTokens.Spacing3,
-            padding: odysseyTokens.Spacing3
+            marginBlockEnd: odysseyTokens.Spacing2,
+            padding: odysseyTokens.Spacing4
           },
           "& img": {
             maxHeight: "100%",
@@ -1939,7 +1946,7 @@ export const components = ({
       styleOverrides: {
         list: {
           paddingBlock: odysseyTokens.Spacing2,
-          paddingInline: odysseyTokens.Spacing2,
+          paddingInline: `${odysseyTokens.Spacing2} !important`,
           borderRadius: odysseyTokens.BorderRadiusMain
         },
         root: {
@@ -1954,7 +1961,8 @@ export const components = ({
     MuiMenuItem: {
       styleOverrides: {
         root: ({
-          ownerState
+          ownerState,
+          theme
         }) => ({
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
@@ -1991,11 +1999,32 @@ export const components = ({
           [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
             "&:hover": {
               backgroundColor: odysseyTokens.PalettePrimaryLighter,
               "@media (hover: none)": {
                 backgroundColor: odysseyTokens.PalettePrimaryLighter
               }
+            },
+            [`&.${menuItemClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.TypographyColorAction,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                "@media (hover: none)": {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter
+                }
+              }
+            }
+          },
+          [`&.${menuItemClasses.focusVisible}`]: {
+            backgroundColor: "transparent",
+            boxShadow: theme.mixins.insetFocusRing,
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              "@media (hover: none)": {
+                backgroundColor: "transparent"
+              }
             }
           },
           "&[data-empty='true']": {
@@ -2010,6 +2039,9 @@ export const components = ({
           ...(ownerState.divider && {
             borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`
           }),
+          ...(!ownerState.isFullWidth && {
+            maxWidth: "100%"
+          }),
           [`&.${menuItemClasses.disabled}`]: {
             opacity: 1,
             color: odysseyTokens.TypographyColorDisabled,