Use text color rather than bg to highlight hovered props

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx

@@ -33,7 +33,7 @@ const Header = deriver(styled.div<{isHighlighted: PropHighlighted}>`
   align-items: stretch;
   position: relative;
 
-  background-color: ${getDetailRowHighlightBackground};
+  /* background-color: ${getDetailRowHighlightBackground}; */
 `)
 
 const Padding = styled.div`
@@ -42,7 +42,7 @@ const Padding = styled.div`
   align-items: center;
 `
 
-const PropName = styled.div`
+const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>`
   margin-left: 4px;
   cursor: default;
   height: 100%;
@@ -54,7 +54,7 @@ const PropName = styled.div`
   }
 
   ${() => propNameTextCSS};
-`
+`)
 
 const color = transparentize(0.05, `#282b2f`)
 
@@ -114,8 +114,6 @@ function DetailCompoundPropEditor<
     [pointerToProp],
   )
 
-  // previous versions of the DetailCompoundPropEditor had a context menu item for "Reset values".
-
   return (
     <Container>
       {contextMenu}
@@ -126,7 +124,12 @@ function DetailCompoundPropEditor<
       >
         <Padding>
           {tools.controlIndicators}
-          <PropName ref={propNameContainerRef}>{propName || 'Props'}</PropName>
+          <PropName
+            isHighlighted={isPropHighlightedD}
+            ref={propNameContainerRef}
+          >
+            {propName || 'Props'}
+          </PropName>
         </Padding>
       </Header>
 

theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx

@@ -33,7 +33,7 @@ const Container = deriver(styled.div<{
   position: relative;
   ${pointerEventsAutoInNormalMode};
 
-  background-color: ${getDetailRowHighlightBackground};
+  /* background-color: ${getDetailRowHighlightBackground}; */
 `)
 
 const Left = styled.div`
@@ -50,7 +50,9 @@ const Left = styled.div`
   width: calc(100% - var(--right-width));
 `
 
-const PropNameContainer = styled.div`
+const PropNameContainer = deriver(styled.div<{
+  isHighlighted: PropHighlighted
+}>`
   text-align: left;
   flex: 1 0;
   white-space: nowrap;
@@ -65,7 +67,7 @@ const PropNameContainer = styled.div`
   &:hover {
     color: white;
   }
-`
+`)
 
 const ControlsContainer = styled.div`
   flex-basis: 8px;
@@ -118,6 +120,7 @@ export function SingleRowPropEditor<T>({
       <Left>
         <ControlsContainer>{editingTools.controlIndicators}</ControlsContainer>
         <PropNameContainer
+          isHighlighted={isPropHighlightedD}
           ref={propNameContainerRef}
           title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
             '.',

theatre/studio/src/propEditors/utils/propNameTextCSS.tsx

@@ -1,8 +1,9 @@
+import type {PropHighlighted} from '@theatre/studio/panels/SequenceEditorPanel/whatPropIsHighlighted'
 import {css} from 'styled-components'
 
-export const propNameTextCSS = css`
+export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
   font-weight: 300;
   font-size: 11px;
-  color: #919191;
+  color: ${(props) => (props.isHighlighted === 'self' ? '#CCC' : '#919191')};
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 `