background color, not bold (#3443)

* background color, not bold

* same thing for the nav items

Author: lerouxb

packages/compass-components/src/components/resizeable-sidebar.tsx

@@ -33,6 +33,7 @@ const containerStylesDark = css({
   '--item-color': 'white',
   '--item-color-active': '#71F6BA', // TODO: there is no uiColors.green.light1
   '--item-bg-color': uiColors.gray.dark3,
+  '--item-bg-color-hover': uiColors.gray.dark2,
   '--item-bg-color-active': uiColors.black,
 
   color: 'var(--color)',
@@ -51,6 +52,7 @@ const containerStylesLight = css({
   '--item-color': uiColors.gray.dark3,
   '--item-color-active': uiColors.green.dark2,
   '--item-bg-color': uiColors.gray.light3,
+  '--item-bg-color-hover': uiColors.gray.light2,
   '--item-bg-color-active': uiColors.green.light3,
 
   color: 'var(--color)',

packages/compass-databases-navigation/src/tree-item.tsx

@@ -65,7 +65,7 @@ const itemContainer = css({
   backgroundColor: 'var(--item-bg-color)',
 
   ':hover': {
-    fontWeight: 'bold',
+    backgroundColor: 'var(--item-bg-color-hover)',
   },
 
   svg: {

packages/compass-sidebar/src/components-legacy/sidebar/sidebar.module.less

@@ -28,6 +28,7 @@
   --item-color: @pw;
   --item-color-active: @pw;
   --item-bg-color: @compass-sidebar-base-background-color;
+  --item-bg-color-hover: @grayDark2;
   --item-bg-color-active: @grayDark1;
 
   color: var(--color);

packages/compass-sidebar/src/components/navigation-items.tsx

@@ -31,7 +31,7 @@ const navigationItem = css({
   position: 'relative',
 
   ':hover': {
-    fontWeight: 'bold',
+    backgroundColor: 'var(--item-bg-color-hover)',
   },
 });