fix(devtools): expose css vars to reach-ui portal components (facebook#22716)

Author: jyash97

packages/react-devtools-shared/src/devtools/views/Button.js

@@ -8,10 +8,9 @@
  */
 
 import * as React from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -35,11 +34,7 @@ export default function Button({
   );
 
   if (title) {
-    button = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {button}
-      </Tooltip>
-    );
+    button = <Tooltip label={title}>{button}</Tooltip>;
   }
 
   return button;

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js

@@ -16,8 +16,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import Tooltip from '@reach/tooltip';
-import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
@@ -26,6 +24,13 @@ import {OwnersListContext} from './OwnersListContext';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {useIsOverflowing} from '../hooks';
 import {StoreContext} from '../context';
+import Tooltip from '../Components/reach-ui/tooltip';
+import {
+  Menu,
+  MenuList,
+  MenuButton,
+  MenuItem,
+} from '../Components/reach-ui/menu-button';
 
 import type {SerializedElement} from './types';
 

packages/react-devtools-shared/src/devtools/views/Tooltip.css renamed to packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {
+  Menu,
+  MenuList as ReachMenuList,
+  MenuButton,
+  MenuItem,
+} from '@reach/menu-button';
+import useThemeStyles from '../../useThemeStyles';
+
+const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachMenuList style={style} {...props}>
+      {children}
+    </ReachMenuList>
+  );
+};
+
+export {MenuItem, MenuButton, MenuList, Menu};

packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import ReachTooltip from '@reach/tooltip';
+import tooltipStyles from './Tooltip.css';
+import useThemeStyles from '../../useThemeStyles';
+
+const Tooltip = ({
+  children,
+  className = '',
+  ...props
+}: {
+  children: React$Node,
+  className: string,
+  ...
+}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachTooltip
+      className={`${tooltipStyles.Tooltip} ${className}`}
+      style={style}
+      {...props}>
+      {children}
+    </ReachTooltip>
+  );
+};
+
+export default Tooltip;

packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js

@@ -248,28 +248,6 @@ function SettingsContextController({
   );
 }
 
-function setStyleVariable(
-  name: string,
-  value: string,
-  documentElements: DocumentElements,
-) {
-  documentElements.forEach(documentElement =>
-    documentElement.style.setProperty(name, value),
-  );
-}
-
-function updateStyleHelper(
-  themeKey: string,
-  style: string,
-  documentElements: DocumentElements,
-) {
-  setStyleVariable(
-    `--${style}`,
-    `var(--${themeKey}-${style})`,
-    documentElements,
-  );
-}
-
 export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
@@ -296,12 +274,6 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
-
-  // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
-  // Because Portals render in a different DOM subtree, these variables don't propagate.
-  // So we need to also set @reach/tooltip specific styles on the root.
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -9,11 +9,10 @@
 
 import * as React from 'react';
 import {Fragment, useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
@@ -127,7 +126,7 @@ export default function TabBar({
 
         if (title) {
           button = (
-            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
+            <Tooltip key={id} label={title}>
               {button}
             </Tooltip>
           );

packages/react-devtools-shared/src/devtools/views/TabBar.js

@@ -8,22 +8,18 @@
  */
 
 import * as React from 'react';
-import {useContext, useMemo} from 'react';
-import {SettingsContext} from './Settings/SettingsContext';
-import {THEME_STYLES} from '../../constants';
+import useThemeStyles from './useThemeStyles';
 
 export default function ThemeProvider({children}: {|children: React$Node|}) {
-  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+  const themeStyle = useThemeStyles();
 
-  const style = useMemo(
-    () => ({
+  const style = React.useMemo(() => {
+    return {
+      ...themeStyle,
       width: '100%',
       height: '100%',
-      ...THEME_STYLES[displayDensity],
-      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
-    }),
-    [theme, browserTheme, displayDensity],
-  );
+    };
+  }, [themeStyle]);
 
   return <div style={style}>{children}</div>;
 }

packages/react-devtools-shared/src/devtools/views/ThemeProvider.js

@@ -9,10 +9,9 @@
 
 import * as React from 'react';
 import {useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -58,11 +57,7 @@ export default function Toggle({
   );
 
   if (title) {
-    toggle = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {toggle}
-      </Tooltip>
-    );
+    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
   }
 
   return toggle;

packages/react-devtools-shared/src/devtools/views/Toggle.js

@@ -1,36 +1,10 @@
 :root {
-  /**
-   * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
-   * They are repeated here because they're used by e.g. tooltips or context menus
-   * which get rendered outside of the DOM subtree (where normal theme/styles are written).
-   */
-
-  /* Light theme */
-  --light-color-scroll-thumb: #c2c2c2;
-  --light-color-scroll-track: #fafafa;
-  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
-  --light-color-tooltip-text: #ffffff;
-
-  /* Dark theme */
-  --dark-color-scroll-thumb: #afb3b9;
-  --dark-color-scroll-track: #313640;
-  --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
-  --dark-color-tooltip-text: #000000;
-
   /* Font smoothing */
   --font-smoothing: auto;
 
-  /* Compact density */
-  --compact-line-height-data: 18px;
-  --compact-root-font-size: 16px;
-
-  /* Comfortable density */
-  --comfortable-line-height-data: 22px;
-  --comfortable-root-font-size: 20px;
-
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
+}

packages/react-devtools-shared/src/devtools/views/root.css

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../../constants';
+
+const useThemeStyles = () => {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return style;
+};
+
+export default useThemeStyles;