Tweaked guideline background color style

src/devtools/views/Components/Element.css

@@ -33,6 +33,7 @@
 
   /* Invert colors */
   --color-component-name: var(--color-component-name-inverted);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );

src/devtools/views/Components/Guideline.css

@@ -1,8 +1,16 @@
-.Guideline {
+.Active,
+.Inactive {
   position: absolute;
   left: 0;
   width: 100%;
   z-index: 0;
   pointer-events: none;
-  background-color: var(--color-guideline);
+}
+
+.Active {
+  background-color: var(--color-guideline-active);
+}
+
+.Inactive {
+  background-color: var(--color-guideline-inactive);
 }

src/devtools/views/Components/Guideline.js

@@ -3,6 +3,7 @@
 import React, { useContext, useMemo } from 'react';
 import { TreeStateContext } from './TreeContext';
 import { SettingsContext } from '../Settings/SettingsContext';
+import TreeFocusedContext from './TreeFocusedContext';
 import { StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from '../../store';
@@ -17,6 +18,7 @@ type Data = {|
 export default function Guideline(_: {||}) {
   const { lineHeight } = useContext(SettingsContext);
   const store = useContext(StoreContext);
+  const treeFocused = useContext(TreeFocusedContext);
   const { selectedElementID } = useContext(TreeStateContext);
 
   const subscription = useMemo(
@@ -81,7 +83,7 @@ export default function Guideline(_: {||}) {
 
   return (
     <div
-      className={styles.Guideline}
+      className={treeFocused ? styles.Active : styles.Inactive}
       style={{
         position: 'absolute',
         top: `${startIndex * lineHeight - lineHeight / 2}px`,

src/devtools/views/Components/HocBadges.css

@@ -1,7 +1,7 @@
 .HocBadges {
   padding: 0.125rem 0.25rem;
   background-color: var(--color-background-selected);
-  color: var(--color-text-selected);
+  --color-text: var(--color-text-selected);
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );

src/devtools/views/Settings/SettingsContext.js

@@ -261,7 +261,8 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-dimmer', documentElements);
   updateStyleHelper(theme, 'color-dimmest', documentElements);
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-guideline', documentElements);
+  updateStyleHelper(theme, 'color-guideline-active', documentElements);
+  updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
   updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
   updateStyleHelper(
     theme,

src/devtools/views/root.css

@@ -8,7 +8,7 @@
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
-  --light-color-background-hover: #ebf1fb;
+  --light-color-background-hover: rgba(0, 136, 250, 0.1);
   --light-color-background-inactive: #e5e5e5;
   --light-color-background-selected: #0088fa;
   --light-color-button-background: #ffffff;
@@ -42,7 +42,8 @@
   --light-color-dimmer: #cfd1d5;
   --light-color-dimmest: #eff0f1;
   --light-color-expand-collapse-toggle: #777d88;
-  --light-color-guideline: rgba(0, 0, 0, 0.05);
+  --light-color-guideline-active: rgba(0, 136, 250, 0.1);
+  --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
   --light-color-jsx-arrow-brackets: #333333;
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -66,7 +67,7 @@
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
-  --dark-color-background-hover: #3d424a;
+  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
   --dark-color-background-inactive: #3d424a;
   --dark-color-background-selected: #178fb9;
   --dark-color-button-background: #282c34;
@@ -100,7 +101,8 @@
   --dark-color-dimmer: #777d88;
   --dark-color-dimmest: #4f5766;
   --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-guideline: rgba(255, 255, 255, 0.05);
+  --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
+  --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
   --dark-color-jsx-arrow-brackets: #777d88;
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);