From 2c2fdc2e8d8be737857e7fb89b30bf22dec04dea Mon Sep 17 00:00:00 2001
From: Sychev Andrey <nukemoore@gmail.com>
Date: Mon, 23 Jun 2025 15:20:40 +0200
Subject: [PATCH] dbeaver/pro#6038 refactor: update menu item and tree node
 styles

replace theme-ripple classname with in-place styles  for hover and active states
---
 .../core-blocks/src/Menu/MenuItem.module.css    |  1 -
 .../src/Menu/MenuItemElement.module.css         |  8 +++++++-
 .../Tree/TreeNode/TreeNodeControl.module.css    | 17 ++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Menu/MenuItem.module.css b/webapp/packages/core-blocks/src/Menu/MenuItem.module.css
index d3f2ca38fd..67e55a4783 100644
--- a/webapp/packages/core-blocks/src/Menu/MenuItem.module.css
+++ b/webapp/packages/core-blocks/src/Menu/MenuItem.module.css
@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 .menuItem {
-  composes: theme-ripple from global;
   composes: menuItem from './MenuItemElement.module.css';
 
   display: flex;
diff --git a/webapp/packages/core-blocks/src/Menu/MenuItemElement.module.css b/webapp/packages/core-blocks/src/Menu/MenuItemElement.module.css
index 829632d63d..a5b7d9ea1b 100644
--- a/webapp/packages/core-blocks/src/Menu/MenuItemElement.module.css
+++ b/webapp/packages/core-blocks/src/Menu/MenuItemElement.module.css
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 .menuPanelItem {
-  composes: theme-ripple theme-border-color-background from global;
+  composes: theme-border-color-background from global;
 
   flex: 1;
   display: flex;
@@ -71,7 +71,13 @@
 
 .menuItem:hover,
 .menuItem:global([aria-expanded='true']) {
+  background-color: color-mix(in srgb, var(--theme-on-surface) 4%, transparent 96%);
+
   & .menuItemContent .icon {
     opacity: 1;
   }
 }
+
+.menuItem:active {
+  background-color: color-mix(in srgb, var(--theme-on-surface) 12%, transparent 88%);
+}
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.module.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.module.css
index 4fc6531fd2..f53b5f3ee9 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.module.css
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.module.css
@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 .treeNodeControl {
-  composes: theme-ripple theme-ripple-selectable from global;
   box-sizing: border-box;
   height: 22px;
   display: flex;
@@ -18,10 +17,26 @@
   outline: none;
 
   &::before {
+    position: absolute;
+    content: '';
     left: 0 !important;
     top: auto !important;
     height: inherit !important;
     width: 100% !important;
+    pointer-events: none;
+  }
+
+  &:hover {
+    &::before {
+      background-color: color-mix(in srgb, var(--theme-on-surface) 4%, transparent 96%);
+    }
+  }
+
+  &:active,
+  &[aria-selected='true'] {
+    &::before {
+      background-color: color-mix(in srgb, var(--theme-on-surface) 12%, transparent 88%);
+    }
   }
 
   & > * {