Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Input] Support CSS variables #32128

Merged
merged 13 commits into from
May 3, 2022
167 changes: 50 additions & 117 deletions docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
Original file line number Diff line number Diff line change
@@ -9,8 +9,17 @@ import Sun from '@mui/icons-material/LightMode';
import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';
import { teal, deepOrange, orange, cyan } from '@mui/material/colors';

const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success'];

const overrideCssVariables = {
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
'--md-palette-primary-dark': '#8b0000',
};

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
@@ -62,131 +71,55 @@ export default function Page() {
<Box sx={{ pb: 4 }}>
<ColorSchemePicker />
</Box>
{COLORS.map((color: any) => (
<Box key={`button-${color}`} sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color={color} variant="contained">
Text
</Button>
<Button color={color} variant="outlined">
Text
</Button>
<Button color={color}>Text</Button>
</Box>
))}

<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="inherit" variant="contained">
Text
</Button>
<Button color="inherit" variant="outlined">
Text
</Button>
<Button color="inherit">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button variant="contained">Text</Button>
<Button variant="outlined">Text</Button>
<Button>Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="secondary" variant="contained">
Text
</Button>
<Button color="secondary" variant="outlined">
Text
</Button>
<Button color="secondary">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="error" variant="contained">
Text
</Button>
<Button color="error" variant="outlined">
Text
</Button>
<Button color="error">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="info" variant="contained">
Text
</Button>
<Button color="info" variant="outlined">
Text
</Button>
<Button color="info">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="warning" variant="contained">
Text
</Button>
<Button color="warning" variant="outlined">
Text
</Button>
<Button color="warning">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="success" variant="contained">
Text
</Button>
<Button color="success" variant="outlined">
Text
</Button>
<Button color="success">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
'--md-palette-primary-dark': '#8b0000',
}}
variant="contained"
>
<Button sx={overrideCssVariables} variant="contained">
Text
</Button>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
}}
variant="outlined"
>
Text
</Button>
<Button
sx={{
'--md-palette-primary-main': '#FF0000',
'--md-palette-primary-mainChannel': '255 0 0',
}}
>
<Button sx={overrideCssVariables} variant="outlined">
Text
</Button>
<Button sx={overrideCssVariables}>Text</Button>
</Box>
</Box>

<Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip variant="filled" label="Text" />
<Chip variant="outlined" label="Text" />
<Chip variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="primary" variant="filled" label="Text" />
<Chip color="primary" variant="outlined" label="Text" />
<Chip color="primary" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="secondary" variant="filled" label="Text" />
<Chip color="secondary" variant="outlined" label="Text" />
<Chip color="secondary" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="error" variant="filled" label="Text" />
<Chip color="error" variant="outlined" label="Text" />
<Chip color="error" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="info" variant="filled" label="Text" />
<Chip color="info" variant="outlined" label="Text" />
<Chip color="info" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="warning" variant="filled" label="Text" />
<Chip color="warning" variant="outlined" label="Text" />
<Chip color="warning" variant="notification" label="Text" />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color="success" variant="filled" label="Text" />
<Chip color="success" variant="outlined" label="Text" />
<Chip color="success" variant="notification" label="Text" />
</Box>
{COLORS.map((color: any) => (
<Box key={`chip-${color}`} sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Chip color={color} variant="filled" label="Text" />
<Chip color={color} variant="outlined" label="Text" />
<Chip color={color} variant="notification" label="Text" />
</Box>
))}
</Box>

<Box
component="form"
sx={{
mb: 1,
py: 5,
maxWidth: { md: 1152, xl: 1536 },
mx: 'auto',
'& > :not(style)': { m: 1 },
}}
noValidate
autoComplete="off"
>
{COLORS.map((color: any) => (
<Input key={`input-${color}`} color={color} placeholder={color} />
))}
<Input sx={overrideCssVariables} placeholder="custom" />
</Box>
</Box>
</CssVarsProvider>
79 changes: 30 additions & 49 deletions docs/pages/experiments/material-ui/css-variables.tsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@ import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';

const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success'];

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
@@ -41,55 +44,33 @@ export default function Page() {
<Box sx={{ pb: 4 }}>
<ColorSchemePicker />
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button variant="contained">Text</Button>
<Button variant="outlined">Text</Button>
<Button>Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="secondary" variant="contained">
Text
</Button>
<Button color="secondary" variant="outlined">
Text
</Button>
<Button color="secondary">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="error" variant="contained">
Text
</Button>
<Button color="error" variant="outlined">
Text
</Button>
<Button color="error">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="info" variant="contained">
Text
</Button>
<Button color="info" variant="outlined">
Text
</Button>
<Button color="info">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="warning" variant="contained">
Text
</Button>
<Button color="warning" variant="outlined">
Text
</Button>
<Button color="warning">Text</Button>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color="success" variant="contained">
Text
</Button>
<Button color="success" variant="outlined">
Text
</Button>
<Button color="success">Text</Button>

{COLORS.map((color: any) => (
<Box key={`button-${color}`} sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<Button color={color} variant="contained">
Text
</Button>
<Button color={color} variant="outlined">
Text
</Button>
<Button>Text</Button>
</Box>
))}
</Box>

<Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
<Box
component="form"
sx={{
mb: 1,
'& > :not(style)': { m: 1 },
}}
noValidate
autoComplete="off"
>
{COLORS.map((color: any) => (
<Input key={`input-${color}`} color={color} placeholder={color} />
))}
</Box>
</Box>
</CssVarsProvider>
11 changes: 7 additions & 4 deletions packages/mui-material/src/Input/Input.js
Original file line number Diff line number Diff line change
@@ -43,7 +43,10 @@ const InputRoot = styled(InputBaseRoot, {
},
})(({ theme, ownerState }) => {
const light = theme.palette.mode === 'light';
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
if (theme.vars) {
bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
}
return {
position: 'relative',
...(ownerState.formControl && {
@@ -53,7 +56,7 @@ const InputRoot = styled(InputBaseRoot, {
}),
...(!ownerState.disableUnderline && {
'&:after': {
borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -73,7 +76,7 @@ const InputRoot = styled(InputBaseRoot, {
transform: 'scaleX(1) translateX(0)',
},
[`&.${inputClasses.error}:after`]: {
borderBottomColor: theme.palette.error.main,
borderBottomColor: (theme.vars || theme).palette.error.main,
transform: 'scaleX(1)', // error is always underlined in red
},
'&:before': {
@@ -90,7 +93,7 @@ const InputRoot = styled(InputBaseRoot, {
pointerEvents: 'none', // Transparent to the hover style.
},
[`&:hover:not(.${inputClasses.disabled}):before`]: {
borderBottom: `2px solid ${theme.palette.text.primary}`,
borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderBottom: `1px solid ${bottomLineColor}`,
24 changes: 17 additions & 7 deletions packages/mui-material/src/InputBase/InputBase.js
Original file line number Diff line number Diff line change
@@ -103,15 +103,15 @@ export const InputBaseRoot = styled('div', {
overridesResolver: rootOverridesResolver,
})(({ theme, ownerState }) => ({
...theme.typography.body1,
color: theme.palette.text.primary,
color: (theme.vars || theme).palette.text.primary,
lineHeight: '1.4375em', // 23px
boxSizing: 'border-box', // Prevent padding issue with fullWidth.
position: 'relative',
cursor: 'text',
display: 'inline-flex',
alignItems: 'center',
[`&.${inputBaseClasses.disabled}`]: {
color: theme.palette.text.disabled,
color: (theme.vars || theme).palette.text.disabled,
cursor: 'default',
},
...(ownerState.multiline && {
@@ -133,7 +133,13 @@ export const InputBaseComponent = styled('input', {
const light = theme.palette.mode === 'light';
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
const placeholder = {
color: 'currentColor',
opacity: light ? 0.42 : 0.5,
...(theme.vars
? {
opacity: theme.vars.opacity.placeholder,
}
: {
opacity: light ? 0.42 : 0.5,
}),
transition: theme.transitions.create('opacity', {
duration: theme.transitions.duration.shorter,
}),
@@ -143,9 +149,13 @@ export const InputBaseComponent = styled('input', {
opacity: '0 !important',
};

const placeholderVisible = {
opacity: light ? 0.42 : 0.5,
};
const placeholderVisible = theme.vars
? {
opacity: theme.vars.opacity.placeholder,
}
: {
opacity: light ? 0.42 : 0.5,
};

return {
font: 'inherit',
@@ -192,7 +202,7 @@ export const InputBaseComponent = styled('input', {
},
[`&.${inputBaseClasses.disabled}`]: {
opacity: 1, // Reset iOS opacity
WebkitTextFillColor: theme.palette.text.disabled, // Fix opacity Safari bug
WebkitTextFillColor: (theme.vars || theme).palette.text.disabled, // Fix opacity Safari bug
},
'&:-webkit-autofill': {
animationDuration: '5000s',
Loading