Tweaked hover and focus colors. Temporarily disabled Tooltip.

shells/dev/index.html

@@ -13,6 +13,7 @@
         height: 400px;
         max-height: 50%;
         overflow: hidden;
+        z-index: 10000001;
       }
       body {
         display: flex;

src/devtools/views/Button.css

@@ -14,11 +14,9 @@
 }
 
 .Button:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 .Button:active {
-  background: var(--color-button-background-focus);
   color: var(--color-button-focus);
   outline: none;
 }
@@ -28,7 +26,7 @@
 }
 
 .Button:focus > .ButtonContent {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
 }
 
 .Button:disabled,

src/devtools/views/Button.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
-import Tooltip from '@reach/tooltip';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -12,15 +12,21 @@ type Props = {
   title: string,
 };
 
-export default function Button({ children, className, title, ...rest }: Props) {
+export default function Button({
+  children,
+  className = '',
+  title,
+  ...rest
+}: Props) {
   let button = (
-    <button className={`${styles.Button} ${className || ''}`} {...rest}>
-      <span className={styles.ButtonContent} tabIndex={-1}>
+    <button className={`${styles.Button} ${className}`} title={title} {...rest}>
+      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
         {children}
       </span>
     </button>
   );
 
+  /* TODO (tooltips)
   if (title) {
     button = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -28,6 +34,7 @@ export default function Button({ children, className, title, ...rest }: Props) {
       </Tooltip>
     );
   }
+  */
 
   return button;
 }

src/devtools/views/Components/OwnersStack.css

@@ -8,41 +8,19 @@
 }
 
 .Component,
-.Component[data-reach-menu-item],
-.SelectedComponent {
-  padding: 0.25rem;
-  margin-right: 0.5rem;
-  color: var(--color-component-name);
+.Component[data-reach-menu-item] {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);
-  border-radius: 0.125rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
   user-select: none;
   white-space: nowrap;
 }
 
-.Component:hover,
-.Component[data-reach-menu-item]:hover {
-  background-color: var(--color-hover-background);
-}
-.Component:focus,
-.Component[data-reach-menu-item]:focus {
-  outline: none;
-  background-color: var(--color-hover-background);
-}
-
 .Component[data-reach-menu-item][data-selected],
-.Component[data-reach-menu-item][data-selected]:hover,
-.SelectedComponent,
-.SelectedComponent:hover {
-  background-color: var(--color-selected-background);
+.Component[data-reach-menu-item][data-selected]:hover {
   color: var(--color-selected-foreground);
+  background: var(--color-selected-background);
 }
-.Component[data-reach-menu-item][data-selected]:focus,
-.SelectedComponent:focus {
+.Component[data-reach-menu-item][data-selected]:focus {
   outline: none;
 }
 
@@ -65,7 +43,6 @@
   display: inline-flex;
   align-items: center;
   padding: 0.25rem;
-  cursor: pointer;
   flex: 0 0 auto;
   border: none;
   background: var(--color-button-background);
@@ -73,17 +50,15 @@
   margin-right: 0.5rem;
 }
 .MenuButton:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 .MenuButton[aria-expanded='true'],
 .MenuButton[aria-expanded='true']:active {
-  background: var(--color-button-background-focus);
-  color: var(--color-button-focus);
+  color: var(--color-button-active);
   outline: none;
 }
 .MenuButton:focus-within {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
   outline: none;
 }
 
@@ -91,14 +66,18 @@
   display: inline-flex;
   flex-direction: column;
   background-color: var(--color-background);
-  color: var(--color-text-color);
-  padding: 0.5rem;
+  color: var(--color-button);
+  padding: 0.25rem 0;
   padding-right: 0;
   border: 1px solid var(--color-border);
   border-radius: 0.25rem;
   max-height: 10rem;
   overflow: auto;
 
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+  position: relative;
+
   /* Reach UI tries to set its own :( */
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-normal);

src/devtools/views/Components/OwnersStack.js

@@ -6,10 +6,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
-import Tooltip from '@reach/tooltip';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import Toggle from '../Toggle';
 import { TreeContext } from './TreeContext';
 import { StoreContext } from '../context';
 import { useIsOverflowing } from '../hooks';
@@ -94,11 +95,11 @@ function ElementsDropdown({
 
   return (
     <Menu>
-      <Tooltip label="Open elements dropdown">
-        <MenuButton className={styles.MenuButton}>
-          <ButtonIcon type="more" />
-        </MenuButton>
-      </Tooltip>
+      {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
+      <MenuButton className={styles.MenuButton}>
+        <ButtonIcon type="more" />
+      </MenuButton>
+      {/* TODO (tooltips) </Tooltip> */}
       <MenuList className={styles.Modal}>
         {ownerStack.map((id, index) => (
           <MenuItem
@@ -124,20 +125,21 @@ function ElementView({ id, index }: ElementViewProps) {
 
   const { displayName } = ((store.getElementByID(id): any): Element);
 
-  const isSelected = ownerStackIndex === index;
+  const isChecked = ownerStackIndex === index;
 
-  const handleClick = useCallback(() => {
-    if (!isSelected) {
+  const handleChange = useCallback(() => {
+    if (!isChecked) {
       selectOwner(id);
     }
-  }, [id, isSelected, selectOwner]);
+  }, [id, isChecked, selectOwner]);
 
   return (
-    <button
-      className={isSelected ? styles.SelectedComponent : styles.Component}
-      onClick={handleClick}
+    <Toggle
+      className={styles.Component}
+      isChecked={isChecked}
+      onChange={handleChange}
     >
       {displayName}
-    </button>
+    </Toggle>
   );
 }

src/devtools/views/Components/SearchInput.css

@@ -18,7 +18,7 @@
 .InputIcon {
   pointer-events: none;
   z-index: 2;
-  color: var(--color-dim);
+  color: var(--color-dimmer);
 }
 
 .IndexLabel {

src/devtools/views/DevTools.js

@@ -3,7 +3,7 @@
 // Reach styles need to come before any component styles.
 // This makes overridding the styles simpler.
 import '@reach/menu-button/styles.css';
-import '@reach/tooltip/styles.css';
+// TODO (tooltips) import '@reach/tooltip/styles.css';
 
 import React, { useEffect, useState } from 'react';
 import Store from '../store';

src/devtools/views/ReactLogo.css

@@ -2,5 +2,5 @@
   width: 1.75rem;
   height: 1.75rem;
   margin: 0 0.75rem 0 0.25rem;
-  color: var(--color-button);
+  color: var(--color-button-active);
 }

src/devtools/views/Settings/SettingsContext.js

@@ -205,9 +205,7 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
-  updateStyleHelper(theme, 'color-button-background-active', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
-  updateStyleHelper(theme, 'color-button-background-hover', documentElements);
   updateStyleHelper(theme, 'color-button', documentElements);
   updateStyleHelper(theme, 'color-button-active', documentElements);
   updateStyleHelper(theme, 'color-button-disabled', documentElements);

src/devtools/views/TabBar.css

@@ -45,7 +45,7 @@
 .IconSizeLarge,
 .IconSizeSmall {
   margin-right: 0.5rem;
-  color: var(--color-button);
+  color: var(--color-button-active);
 }
 
 .IconDisabled {

src/devtools/views/Toggle.css

@@ -1,6 +1,7 @@
 .ToggleDisabled,
 .ToggleOn,
 .ToggleOff {
+  background: var(--color-button-background);
   border: none;
   border-radius: 0.25rem;
   padding: 0;
@@ -20,13 +21,11 @@
   color: var(--color-button);
 }
 .ToggleOff:hover {
-  background: var(--color-button-background-hover);
   color: var(--color-button-hover);
 }
 
 .ToggleOn,
 .ToggleOn:active {
-  background: var(--color-button-background-active);
   color: var(--color-button-active);
   outline: none;
 }
@@ -39,7 +38,7 @@
 
 .ToggleOn:focus > .ToggleContent,
 .ToggleOff:focus > .ToggleContent {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+  background: var(--color-button-background-focus);
 }
 
 .ToggleDisabled {

src/devtools/views/Toggle.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { useCallback } from 'react';
-import Tooltip from '@reach/tooltip';
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
 
 type Props = {
   children: React$Node,
@@ -42,6 +42,7 @@ export default function Toggle({
       className={`${defaultClassName} ${className}`}
       disabled={isDisabled}
       onClick={handleClick}
+      title={title}
     >
       <span className={styles.ToggleContent} tabIndex={-1}>
         {children}
@@ -49,6 +50,7 @@ export default function Toggle({
     </button>
   );
 
+  /* TODO (tooltips)
   if (title) {
     toggle = (
       <Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -56,6 +58,7 @@ export default function Toggle({
       </Tooltip>
     );
   }
+  */
 
   return toggle;
 }

src/devtools/views/Tooltip.css

@@ -5,4 +5,8 @@
   font-size: 12px;
   background-color: var(--color-tooltip-background);
   color: var(--color-tooltip-text);
+
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+  position: relative;
 }

src/devtools/views/root.css

@@ -9,14 +9,12 @@
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-button-background: #ffffff;
-  --light-color-button-background-active: #ffffff;
   --light-color-button-background-focus: #ededed;
-  --light-color-button-background-hover: #ffffff;
   --light-color-button: #5f6673;
   --light-color-button-disabled: #cfd1d5;
   --light-color-button-active: #0088fa;
-  --light-color-button-focus: #333333;
-  --light-color-button-hover: #333333;
+  --light-color-button-focus: #23272f;
+  --light-color-button-hover: #23272f;
   --light-color-border: #eeeeee;
   --light-color-commit-did-not-render: #cfd1d5;
   --light-color-commit-gradient-0: #37afa9;
@@ -59,14 +57,12 @@
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-button-background: #282c34;
-  --dark-color-button-background-active: #3d424a;
   --dark-color-button-background-focus: #3d424a;
-  --dark-color-button-background-hover: #282c34;
   --dark-color-button: #afb3b9;
   --dark-color-button-active: #61dafb;
   --dark-color-button-disabled: #777d88;
   --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #cccccc;
+  --dark-color-button-hover: #ededed;
   --dark-color-border: #3d424a;
   --dark-color-commit-did-not-render: #777d88;
   --dark-color-commit-gradient-0: #37afa9;