From 97427f0ca0ef29fd5f942080c959f6827ccb641f Mon Sep 17 00:00:00 2001 From: gin1314 Date: Thu, 5 May 2022 16:49:05 +0800 Subject: [PATCH] [Tooltip] Add support for CSS variables (#32594) --- .../pages/experiments/material-ui/tooltip.tsx | 92 +++++++++++++++++++ packages/mui-material/src/Tooltip/Tooltip.js | 14 ++- .../src/styles/createPalette.d.ts | 2 +- .../src/styles/experimental_extendTheme.js | 7 +- .../styles/experimental_extendTheme.test.js | 26 ++++++ 5 files changed, 134 insertions(+), 7 deletions(-) create mode 100644 docs/pages/experiments/material-ui/tooltip.tsx diff --git a/docs/pages/experiments/material-ui/tooltip.tsx b/docs/pages/experiments/material-ui/tooltip.tsx new file mode 100644 index 00000000000000..c9308c41b65992 --- /dev/null +++ b/docs/pages/experiments/material-ui/tooltip.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; +import Tooltip from '@mui/material/Tooltip'; +import IconButton from '@mui/material/IconButton'; +import DeleteIcon from '@mui/icons-material/Delete'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function TooltipCssVars() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 2c704af8aad335..88d7f7b00cbab8 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -52,7 +52,7 @@ const TooltipPopper = styled(Popper, { ]; }, })(({ theme, ownerState, open }) => ({ - zIndex: theme.zIndex.tooltip, + zIndex: (theme.vars || theme).zIndex.tooltip, pointerEvents: 'none', // disable jss-rtl plugin ...(!ownerState.disableInteractive && { pointerEvents: 'auto', @@ -118,9 +118,11 @@ const TooltipTooltip = styled('div', { ]; }, })(({ theme, ownerState }) => ({ - backgroundColor: alpha(theme.palette.grey[700], 0.92), - borderRadius: theme.shape.borderRadius, - color: theme.palette.common.white, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` + : alpha(theme.palette.grey[700], 0.92), + borderRadius: (theme.vars || theme).shape.borderRadius, + color: (theme.vars || theme).palette.common.white, fontFamily: theme.typography.fontFamily, padding: '4px 8px', fontSize: theme.typography.pxToRem(11), @@ -196,7 +198,9 @@ const TooltipArrow = styled('span', { width: '1em', height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */, boxSizing: 'border-box', - color: alpha(theme.palette.grey[700], 0.9), + color: theme.vars + ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` + : alpha(theme.palette.grey[700], 0.9), '&::before': { content: '""', margin: 'auto', diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 991e45ad86319b..7a391a74ad962c 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -121,7 +121,7 @@ export interface PaletteWithChannels { warning: PaletteColor & Channels; info: PaletteColor & Channels; success: PaletteColor & Channels; - grey: Color; + grey: Color & { darkChannel: string }; text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string }; divider: TypeDivider; dividerChannel: TypeDivider; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index dd4b34a567b66a..8d0b22edcddd8c 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -45,7 +45,6 @@ export default function extendTheme(options = {}, ...args) { if (key === 'dark') { palette.common.background = palette.common.background || '#000'; palette.common.onBackground = palette.common.onBackground || '#fff'; - // console.log(palette.common); } else { palette.common.background = palette.common.background || '#fff'; palette.common.onBackground = palette.common.onBackground || '#000'; @@ -56,6 +55,12 @@ export default function extendTheme(options = {}, ...args) { palette.dividerChannel = colorChannel(palette.divider); + // special token for Tooltip + // TODO: consider adding `main`, and `light` to palette.grey to make it consistent. + if (!palette.grey.dark) { + palette.grey.dark = palette.grey[700]; + } + Object.keys(palette).forEach((color) => { const colors = palette[color]; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 15ff1aa2869073..74b4326c58617c 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -82,6 +82,32 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.dark.palette.dividerChannel).to.equal('255 255 255'); expect(theme.colorSchemes.light.palette.dividerChannel).to.equal('0 0 0'); + + expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('97 97 97'); + expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('97 97 97'); + }); + + it('should change grey darkChannel', () => { + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + grey: { + dark: '#888', + }, + }, + }, + dark: { + palette: { + grey: { + dark: '#999', + }, + }, + }, + }, + }); + expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('136 136 136'); + expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('153 153 153'); }); it('should generate common background, onBackground channels', () => {