Apply suggestions from code review

Co-authored-by: Jean-Baptiste Kaiser <jb@marmelab.com>

Author: djhi

packages/ra-input-rich-text/src/buttons/LevelSelect.tsx

@@ -213,7 +213,7 @@ const classes = {
 const Root = styled('div')(({ theme }) => ({
     [`&.${classes.list}`]: {
         borderRadius: theme.shape.borderRadius,
-        border: `1px solid color-mix(in srgb, ${(theme.vars || theme).palette.action.active}, transparent 12%) solid 2px`,
+        border: `1px solid color-mix(in srgb, ${(theme.vars || theme).palette.action.active}, transparent 12%)`,
     },
     [`& .${classes.sizeSmall}`]: {
         paddingTop: 1,

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -134,7 +134,7 @@ const StyledButton = styled(Button, {
 })(({ theme }) => ({
     color: (theme.vars || theme).palette.error.main,
     '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%) solid 2px`,
+        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
         // Reset on mouse devices
         '@media (hover: none)': {
             backgroundColor: 'transparent',

packages/ra-ui-materialui/src/button/SelectAllButton.tsx

@@ -109,7 +109,7 @@ const StyledButton = styled(Button, {
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%) solid 2px`,
+        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
         // Reset on mouse devices
         '@media (hover: none)': {
             backgroundColor: 'transparent',

packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx

@@ -164,7 +164,7 @@ const Root = styled('div', {
     [`& .${BulkActionsToolbarClasses.icon}`]: {
         marginLeft: '-0.5em',
         '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%) solid 2px`,
+            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
         },
     },
 }));

packages/ra-ui-materialui/src/preferences/Configurable.tsx

@@ -209,14 +209,14 @@ const Root = styled('span', {
     display: 'inline-block',
     [`&.${ConfigurableClasses.editMode}`]: {
         transition: theme.transitions.create('outline'),
-        outline: `color-mix(in srgb, ${(theme.vars || theme).palette.warning.main}, transparent 50%) solid 2px`,
+        outline: `color-mix(in srgb, ${(theme.vars || theme).palette.warning.main}, transparent 30%) solid 2px`,
     },
     [`&.${ConfigurableClasses.editMode}:hover `]: {
         outline: `color-mix(in srgb, ${(theme.vars || theme).palette.warning.main}, transparent 50%) solid 2px`,
     },
     [`&.${ConfigurableClasses.editMode}.${ConfigurableClasses.editorActive} , &.${ConfigurableClasses.editMode}.${ConfigurableClasses.editorActive}:hover `]:
         {
-            outline: `color-mix(in srgb, ${(theme.vars || theme).palette.warning.main}, transparent 50%) solid 2px`,
+            outline: `${(theme.vars || theme).palette.warning.main} solid 2px`,
         },
 }));