@okta/odyssey-react-mui 1.14.2 → 1.14.4

package/dist/theme/components.js

@@ -721,7 +721,7 @@ export const components = ({
               duration: odysseyTokens.TransitionDurationMain
             })
           },
-          "&.Mui-checked": {
+          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
             backgroundColor: odysseyTokens.PalettePrimaryMain,
             borderColor: odysseyTokens.PalettePrimaryMain,
             [`.${formControlLabelClasses.root}:hover > &`]: {
@@ -1788,6 +1788,9 @@ export const components = ({
       }
     },
     MuiMenu: {
+      defaultProps: {
+        elevation: 2
+      },
       styleOverrides: {
         list: {
           paddingBlock: odysseyTokens.Spacing2,
@@ -1812,7 +1815,7 @@ export const components = ({
           minHeight: "unset",
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
-          borderRadius: odysseyTokens.BorderRadiusTight,
+          borderRadius: odysseyTokens.BorderRadiusMain,
           [`& .${formControlLabelClasses.root}`]: {
             gap: "unset"
           },
@@ -1832,6 +1835,12 @@ export const components = ({
               color: "inherit"
             }
           },
+          "&.isVisiblySelected": {
+            backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+            [`& .${typographyClasses.root}`]: {
+              color: odysseyTokens.HueBlue600
+            }
+          },
           [`&.${menuItemClasses.selected}`]: {
             backgroundColor: "transparent",
             color: odysseyTokens.TypographyColorAction,
@@ -2255,12 +2264,14 @@ export const components = ({
           }),
           [`.${tableHeadClasses.root} &`]: {
             color: odysseyTokens.TypographyColorHeading,
-            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontSize: `0.71428571rem`,
             lineHeight: odysseyTokens.TypographyLineHeightBody,
             fontWeight: odysseyTokens.TypographyWeightBodyBold,
             textTransform: "uppercase",
             backgroundColor: odysseyTokens.HueNeutral50,
-            borderBottom: 0
+            borderBottom: 0,
+            height: `${odysseyTokens.Spacing7} !important`,
+            paddingBlock: `${odysseyTokens.Spacing3} !important`
           },
           [`.${tableHeadClasses.root} &:first-of-type`]: {
             borderTopLeftRadius: odysseyTokens.Spacing2,
@@ -2270,10 +2281,10 @@ export const components = ({
             borderTopRightRadius: odysseyTokens.Spacing2,
             borderBottomRightRadius: odysseyTokens.Spacing2
           },
-          ...(ownerState.variant === "head" && {
-            lineHeight: odysseyTokens.TypographyLineHeightBody,
-            fontWeight: odysseyTokens.TypographyWeightBodyBold
-          }),
+          [`.${tableHeadClasses.root} .ods-actions-cell + &:last-of-type, .${tableBodyClasses.root} .ods-actions-cell + &:last-of-type`]: {
+            flexGrow: 0,
+            width: odysseyTokens.Spacing2
+          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"'
@@ -2298,23 +2309,31 @@ export const components = ({
           ...(ownerState.align === "justify" && {
             textAlign: "justify"
           }),
-          ["&.MuiTableCell-compact"]: {
-            fontSize: odysseyTokens.TypographySizeSubordinate,
-            padding: odysseyTokens.Spacing2
-          },
-          ["&.MuiTableCell-spacious"]: {
-            padding: odysseyTokens.Spacing4
-          },
+          ...(ownerState.variant !== "head" && {
+            ["&.MuiTableCell-compact"]: {
+              padding: "0.4285714286rem",
+              height: "2.5714285714rem"
+            },
+            ["&.MuiTableCell-spacious"]: {
+              padding: odysseyTokens.Spacing4,
+              height: odysseyTokens.Spacing9
+            }
+          }),
           [`& .${checkboxClasses.root}`]: {
             width: `${odysseyTokens.TypographyLineHeightUi}rem`,
             height: `${odysseyTokens.TypographyLineHeightUi}rem`,
             margin: 0
           },
           [`& .${dividerClasses.vertical}`]: {
-            borderStyle: "none none none dotted",
-            borderWidth: 2,
+            borderStyle: "none none none solid",
+            borderWidth: 1,
             borderRadius: 0,
-            marginRight: 2
+            marginRight: 2,
+            borderColor: odysseyTokens.HueNeutral400,
+            height: 18
+          },
+          ["&.ods-drag-handle svg"]: {
+            color: odysseyTokens.HueNeutral500
           }
         })
       }