dbeaver/pro#6038 refactor: update menu item and tree node styles

replace theme-ripple classname with in-place styles  for hover and active states

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;

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%);
+}

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%);
+    }
   }
 
   & > * {