[TreeView] Fix drag and drop color usage

mui · Oct 28, 2024 · 35ecd1a · 35ecd1a
1 parent fa96196
commit 35ecd1a
Showing 1 changed file with 5 additions and 26 deletions.
diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
@@ -25,51 +25,30 @@ 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}`,
       },
     },
     {
       props: { action: 'move-to-parent' },
       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}`,
       },
     },
   ],