Skip to content

Commit

Permalink
[Input] Support CSS variables (#32128)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivan-ngchakming
ivan-ngchakming committed May 3, 2022
1 parent ef2e45c commit 0956b91
Show file tree
Hide file tree
Showing 10 changed files with 273 additions and 277 deletions.
167 changes: 50 additions & 117 deletions docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
79 changes: 30 additions & 49 deletions docs/pages/experiments/material-ui/css-variables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 7 additions & 4 deletions packages/mui-material/src/Input/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && {
Expand All @@ -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
Expand All @@ -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': {
Expand All @@ -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}`,
Expand Down
24 changes: 17 additions & 7 deletions packages/mui-material/src/InputBase/InputBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && {
Expand All @@ -133,7 +133,13 @@ export const InputBaseComponent = styled('input', {
const light = theme.palette.mode === 'light';
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,
}),
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit 0956b91

Please sign in to comment.