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.

Sign up for GitHub

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

Jump to bottom

[Input] Support CSS variables #32128

Merged
merged 13 commits into from
May 3, 2022
Merged

[Input] Support CSS variables #32128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3241a34
input support css variables
ivan-ngchakming Apr 3, 2022
c7bd9ed
fix: better layout
ivan-ngchakming Apr 3, 2022
733893e
fix: remove `inherit` color from demo
ivan-ngchakming Apr 3, 2022
765f92f
fix: typing in demo
ivan-ngchakming Apr 3, 2022
2e099a3
Merge branch 'master' of https://github.com/mui/material-ui into inpu…
siriwatknp Apr 27, 2022
14efb87
add necessary tokens
siriwatknp Apr 27, 2022
5be8d9f
use added variables
siriwatknp Apr 27, 2022
a8ce5c4
rename to invertChannel
siriwatknp Apr 27, 2022
ae39e32
fix tests
siriwatknp Apr 27, 2022
afc68a2
adjust color channels
siriwatknp Apr 29, 2022
10b3515
fix tests
siriwatknp Apr 29, 2022
9d27965
use common channels
siriwatknp May 3, 2022
0c88491
update types
siriwatknp May 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
167 changes: 50 additions & 117 deletions docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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';
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,
}),
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