From cbd847d1a91924291b9a16b91a1a4c1f50572a8b Mon Sep 17 00:00:00 2001
From: Lukas Tyla <llukas.tyla@gmail.com>
Date: Tue, 22 Oct 2024 14:33:36 +0300
Subject: [PATCH] [TreeView] Fix drag and drop color usage (#15042)

---
 .../TreeItem2DragAndDropOverlay.tsx           | 31 +++----------------
 1 file changed, 5 insertions(+), 26 deletions(-)

diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
index db551010137a1..c4379e687a65f 100644
--- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
+++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
@@ -25,36 +25,22 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
         borderRadius: theme.shape.borderRadius,
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})`
-          : alpha(theme.palette.primary.dark, 0.15),
+          ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})`
+          : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity),
       },
     },
     {
       props: { action: 'reorder-above' },
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-        borderTop: theme.vars
-          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
-          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
-        ...theme.applyStyles('dark', {
-          borderTopColor: theme.vars
-            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
-            : alpha(theme.palette.grey[100], 0.6),
-        }),
+        borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`,
       },
     },
     {
       props: { action: 'reorder-below' },
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-        borderBottom: theme.vars
-          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
-          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
-        ...theme.applyStyles('dark', {
-          borderBottomColor: theme.vars
-            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
-            : alpha(theme.palette.grey[100], 0.6),
-        }),
+        borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`,
       },
     },
     {
@@ -62,14 +48,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft:
           'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any,
-        borderBottom: theme.vars
-          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
-          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
-        ...theme.applyStyles('dark', {
-          borderBottomColor: theme.vars
-            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
-            : alpha(theme.palette.grey[100], 0.6),
-        }),
+        borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`,
       },
     },
   ],