Merge pull request #11160 from mjsarfatti/fix-confirm-warning-bg

[RFR] Fix Confirm warning hover background transparency

Author: slax57

packages/ra-ui-materialui/src/layout/Confirm.stories.tsx

@@ -6,7 +6,11 @@ export default {
     title: 'ra-ui-materialui/layout/Confirm',
 };
 
-export const BackClick = () => {
+export const BackClick = ({
+    confirmColor,
+}: {
+    confirmColor?: 'primary' | 'warning';
+}) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isClicked, setIsClicked] = React.useState(false);
 
@@ -35,11 +39,20 @@ export const BackClick = () => {
                     title="Delete Item"
                     content="Are you sure you want to delete this item?"
                     confirm="Yes"
-                    confirmColor="primary"
+                    confirmColor={confirmColor}
                     onConfirm={() => setIsOpen(false)}
                     onClose={() => setIsOpen(false)}
                 />
             </div>
         </>
     );
 };
+BackClick.args = {
+    confirmColor: 'primary',
+};
+BackClick.argTypes = {
+    confirmColor: {
+        control: { type: 'select' },
+        options: ['primary', 'warning'],
+    },
+};

packages/ra-ui-materialui/src/layout/Confirm.tsx

@@ -167,7 +167,7 @@ const StyledDialog = styled(Dialog, {
     [`& .${ConfirmClasses.confirmWarning}`]: {
         color: (theme.vars || theme).palette.error.main,
         '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
+            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 88%)`,
             // Reset on mouse devices
             '@media (hover: none)': {
                 backgroundColor: 'transparent',