forked from facebook/react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(devtools): expose css vars to reach-ui portal components (faceboo…
- Loading branch information
Showing
11 changed files
with
112 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
28 changes: 28 additions & 0 deletions
28
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}; |
35 changes: 35 additions & 0 deletions
35
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
28 changes: 28 additions & 0 deletions
28
packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |