From 878e107609edddce2be6c6dd99740b70c65c2250 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 19 May 2022 16:26:00 +0700 Subject: [PATCH 01/37] AppBar --- .../pages/experiments/material-ui/app-bar.tsx | 101 ++++++++++++++++++ packages/mui-material/src/AppBar/AppBar.js | 18 ++-- .../src/styles/experimental_extendTheme.js | 17 +++ 3 files changed, 129 insertions(+), 7 deletions(-) create mode 100644 docs/pages/experiments/material-ui/app-bar.tsx diff --git a/docs/pages/experiments/material-ui/app-bar.tsx b/docs/pages/experiments/material-ui/app-bar.tsx new file mode 100644 index 00000000000000..a07cdf298427c7 --- /dev/null +++ b/docs/pages/experiments/material-ui/app-bar.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + useColorScheme, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import MenuIcon from '@mui/icons-material/Menu'; +import Container from '@mui/material/Container'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + News + + + + + + + + + + + News + + + + + + + + ); +} diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index 024d6734057454..56192e62baf39e 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -42,7 +42,7 @@ const AppBarRoot = styled(Paper, { flexShrink: 0, ...(ownerState.position === 'fixed' && { position: 'fixed', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -53,7 +53,7 @@ const AppBarRoot = styled(Paper, { }), ...(ownerState.position === 'absolute' && { position: 'absolute', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -61,7 +61,7 @@ const AppBarRoot = styled(Paper, { ...(ownerState.position === 'sticky' && { // ⚠️ sticky is not supported by IE11. position: 'sticky', - zIndex: theme.zIndex.appBar, + zIndex: (theme.vars || theme).zIndex.appBar, top: 0, left: 'auto', right: 0, @@ -73,15 +73,19 @@ const AppBarRoot = styled(Paper, { position: 'relative', }), ...(ownerState.color === 'default' && { - backgroundColor: backgroundColorDefault, - color: theme.palette.getContrastText(backgroundColorDefault), + backgroundColor: theme.vars + ? theme.vars.palette.AppBar?.defaultBgColor + : backgroundColorDefault, + color: theme.vars + ? theme.vars.palette.text.primary + : theme.palette.getContrastText(backgroundColorDefault), }), ...(ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && { - backgroundColor: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, + backgroundColor: (theme.vars || theme).palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].contrastText, }), ...(ownerState.color === 'inherit' && { color: 'inherit', diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 78a718bc712d49..f568e70fd53731 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -61,6 +61,23 @@ export default function extendTheme(options = {}, ...args) { palette.common.onBackground = palette.common.onBackground || '#000'; } + // assign component variables + if (!palette.AppBar) { + palette.AppBar = {}; + } + if (!palette.Chip) { + palette.Chip = {}; + } + if (key === 'dark') { + palette.AppBar.defaultBgColor = palette.AppBar.defaultBgColor || 'var(--md-palette-grey-900)'; + palette.Chip.defaultBorderColor = + palette.Chip.defaultBorderColor || 'var(--md-palette-grey-700)'; + } else { + palette.AppBar.defaultBgColor = palette.AppBar.defaultBgColor || 'var(--md-palette-grey-100)'; + palette.Chip.defaultBorderColor = + palette.Chip.defaultBorderColor || 'var(--md-palette-grey-400)'; + } + palette.common.backgroundChannel = colorChannel(palette.common.background); palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground); From 0f876ce9fc179e21914890902f6f8126e0cd7a0a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 19 May 2022 17:20:59 +0700 Subject: [PATCH 02/37] Chip --- docs/pages/experiments/material-ui/chip.tsx | 78 ++++++++++++ packages/mui-material/src/Chip/Chip.js | 125 ++++++++++++-------- 2 files changed, 155 insertions(+), 48 deletions(-) create mode 100644 docs/pages/experiments/material-ui/chip.tsx diff --git a/docs/pages/experiments/material-ui/chip.tsx b/docs/pages/experiments/material-ui/chip.tsx new file mode 100644 index 00000000000000..6b766aac733acd --- /dev/null +++ b/docs/pages/experiments/material-ui/chip.tsx @@ -0,0 +1,78 @@ +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 Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + + + {}} /> + {}} /> + + + + + + ); +} diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 314e955b786497..6caf0b12141b16 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -74,7 +74,8 @@ const ChipRoot = styled('div', { })( ({ theme, ownerState }) => { const deleteIconColor = alpha(theme.palette.text.primary, 0.26); - + const contrast4 = + theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300]; return { maxWidth: '100%', fontFamily: theme.typography.fontFamily, @@ -83,8 +84,8 @@ const ChipRoot = styled('div', { alignItems: 'center', justifyContent: 'center', height: 32, - color: theme.palette.text.primary, - backgroundColor: theme.palette.action.selected, + color: (theme.vars || theme).palette.text.primary, + backgroundColor: (theme.vars || theme).palette.action.selected, borderRadius: 32 / 2, whiteSpace: 'nowrap', transition: theme.transitions.create(['background-color', 'box-shadow']), @@ -98,7 +99,7 @@ const ChipRoot = styled('div', { verticalAlign: 'middle', boxSizing: 'border-box', [`&.${chipClasses.disabled}`]: { - opacity: theme.palette.action.disabledOpacity, + opacity: (theme.vars || theme).palette.action.disabledOpacity, pointerEvents: 'none', }, [`& .${chipClasses.avatar}`]: { @@ -106,16 +107,16 @@ const ChipRoot = styled('div', { marginRight: -6, width: 24, height: 24, - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.vars ? theme.vars.palette.grey.contrast4 : contrast4, fontSize: theme.typography.pxToRem(12), }, [`& .${chipClasses.avatarColorPrimary}`]: { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.dark, + color: (theme.vars || theme).palette.primary.contrastText, + backgroundColor: (theme.vars || theme).palette.primary.dark, }, [`& .${chipClasses.avatarColorSecondary}`]: { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.secondary.dark, + color: (theme.vars || theme).palette.secondary.contrastText, + backgroundColor: (theme.vars || theme).palette.secondary.dark, }, [`& .${chipClasses.avatarSmall}`]: { marginLeft: 4, @@ -125,7 +126,7 @@ const ChipRoot = styled('div', { fontSize: theme.typography.pxToRem(10), }, [`& .${chipClasses.icon}`]: { - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + color: theme.vars ? theme.vars.palette.grey.contrast4 : contrast4, marginLeft: 5, marginRight: -6, ...(ownerState.size === 'small' && { @@ -139,12 +140,16 @@ const ChipRoot = styled('div', { }, [`& .${chipClasses.deleteIcon}`]: { WebkitTapHighlightColor: 'transparent', - color: deleteIconColor, + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` + : deleteIconColor, fontSize: 22, cursor: 'pointer', margin: '0 5px 0 -6px', '&:hover': { - color: alpha(deleteIconColor, 0.4), + color: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` + : alpha(deleteIconColor, 0.4), }, ...(ownerState.size === 'small' && { fontSize: 16, @@ -152,9 +157,11 @@ const ChipRoot = styled('div', { marginLeft: -4, }), ...(ownerState.color !== 'default' && { - color: alpha(theme.palette[ownerState.color].contrastText, 0.7), + color: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].contrastText, 0.7), '&:hover, &:active': { - color: theme.palette[ownerState.color].contrastText, + color: (theme.vars || theme).palette[ownerState.color].contrastText, }, }), }, @@ -162,21 +169,25 @@ const ChipRoot = styled('div', { height: 24, }), ...(ownerState.color !== 'default' && { - backgroundColor: theme.palette[ownerState.color].main, - color: theme.palette[ownerState.color].contrastText, + backgroundColor: (theme.vars || theme).palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].contrastText, }), ...(ownerState.onDelete && { [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selected} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), }, }), ...(ownerState.onDelete && ownerState.color !== 'default' && { [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette[ownerState.color].dark, + backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, }, }), }; @@ -187,39 +198,49 @@ const ChipRoot = styled('div', { WebkitTapHighlightColor: 'transparent', cursor: 'pointer', '&:hover': { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selected} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selected} / calc(${ + theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity + }))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), }, '&:active': { - boxShadow: theme.shadows[1], + boxShadow: (theme.vars || theme).shadows[1], }, }), ...(ownerState.clickable && ownerState.color !== 'default' && { [`&:hover, &.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette[ownerState.color].dark, + backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, }, }), }), ({ theme, ownerState }) => ({ ...(ownerState.variant === 'outlined' && { backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] - }`, + border: theme.vars + ? `1px solid ${theme.vars.palette.Chip?.defaultBorderColor}` + : `1px solid ${ + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] + }`, [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: theme.palette.action.hover, + backgroundColor: (theme.vars || theme).palette.action.hover, }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: theme.palette.action.focus, + backgroundColor: (theme.vars || theme).palette.action.focus, }, [`& .${chipClasses.avatar}`]: { marginLeft: 4, @@ -242,24 +263,32 @@ const ChipRoot = styled('div', { }), ...(ownerState.variant === 'outlined' && ownerState.color !== 'default' && { - color: theme.palette[ownerState.color].main, - border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.7)}`, + color: (theme.vars || theme).palette[ownerState.color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].main, 0.7) + }`, [`&.${chipClasses.clickable}:hover`]: { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.palette[ownerState.color].mainChannel} / ${ + theme.palette.action.hoverOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), }, [`&.${chipClasses.focusVisible}`]: { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.focusOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.palette[ownerState.color].mainChannel} / ${ + theme.palette.action.focusOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity), }, [`& .${chipClasses.deleteIcon}`]: { - color: alpha(theme.palette[ownerState.color].main, 0.7), + color: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` + : alpha(theme.palette[ownerState.color].main, 0.7), '&:hover, &:active': { - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, }, }, }), From fd5022b78cc718eb70d3268429f5e68fb66619b6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 00:09:06 +0700 Subject: [PATCH 03/37] FilledInput --- .../experiments/material-ui/filled-input.tsx | 67 +++++++++++++++++++ .../src/FilledInput/FilledInput.js | 62 ++++++++++++----- .../src/styles/experimental_extendTheme.js | 43 +++++++----- 3 files changed, 138 insertions(+), 34 deletions(-) create mode 100644 docs/pages/experiments/material-ui/filled-input.tsx diff --git a/docs/pages/experiments/material-ui/filled-input.tsx b/docs/pages/experiments/material-ui/filled-input.tsx new file mode 100644 index 00000000000000..bba534b7eff9d3 --- /dev/null +++ b/docs/pages/experiments/material-ui/filled-input.tsx @@ -0,0 +1,67 @@ +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 FilledInput from '@mui/material/FilledInput'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + ); +} diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 05bc58705691c4..ab4f3a051f552c 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -44,31 +44,37 @@ const FilledInputRoot = styled(InputBaseRoot, { const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)'; + const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)'; + const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'; return { position: 'relative', - backgroundColor, - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shorter, easing: theme.transitions.easing.easeOut, }), '&:hover': { - backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)', + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBgColor : hoverBackground, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, }, }, [`&.${filledInputClasses.focused}`]: { - backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, }, [`&.${filledInputClasses.disabled}`]: { - backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)', + backgroundColor: theme.vars + ? theme.vars.palette.FilledInput.disabledBgColor + : disabledBackground, }, ...(!ownerState.disableUnderline && { '&:after': { - borderBottom: `2px solid ${theme.palette[ownerState.color || 'primary']?.main}`, + borderBottom: `2px solid ${ + (theme.vars || theme).palette[ownerState.color || 'primary']?.main + }`, left: 0, bottom: 0, // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 @@ -88,11 +94,15 @@ const FilledInputRoot = styled(InputBaseRoot, { transform: 'scaleX(1) translateX(0)', }, [`&.${filledInputClasses.error}:after`]: { - borderBottomColor: theme.palette.error.main, + borderBottomColor: (theme.vars || theme).palette.error.main, transform: 'scaleX(1)', // error is always underlined in red }, '&:before': { - borderBottom: `1px solid ${bottomLineColor}`, + borderBottom: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` + : bottomLineColor + }`, left: 0, bottom: 0, // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 @@ -105,7 +115,7 @@ const FilledInputRoot = styled(InputBaseRoot, { pointerEvents: 'none', // Transparent to the hover style. }, [`&:hover:not(.${filledInputClasses.disabled}):before`]: { - borderBottom: `1px solid ${theme.palette.text.primary}`, + borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`, }, [`&.${filledInputClasses.disabled}:before`]: { borderBottomStyle: 'dotted', @@ -140,13 +150,29 @@ const FilledInputInput = styled(InputBaseInput, { paddingRight: 12, paddingBottom: 8, paddingLeft: 12, - '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', - caretColor: theme.palette.mode === 'light' ? null : '#fff', - borderTopLeftRadius: 'inherit', - borderTopRightRadius: 'inherit', - }, + ...(!theme.vars && { + '&:-webkit-autofill': { + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', + borderTopLeftRadius: 'inherit', + borderTopRightRadius: 'inherit', + }, + }), + ...(theme.vars && { + '&:-webkit-autofill': { + borderTopLeftRadius: 'inherit', + borderTopRightRadius: 'inherit', + }, + // TODO: the attribute should come from theme utilities + '[data-mui-color-scheme="light"] &': { + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #266798 inset', + WebkitTextFillColor: '#fff', + caretColor: '#fff', + }, + }, + }), ...(ownerState.size === 'small' && { paddingTop: 21, paddingBottom: 4, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index f568e70fd53731..e0f9d65bfd5a62 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -11,6 +11,18 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => { return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`; }); +function assignNode(obj, keys) { + keys.forEach((k) => { + if (!obj[k]) { + obj[k] = {}; + } + }); +} + +function setColor(obj, key, defaultValue) { + obj[key] = obj[key] || defaultValue; +} + export default function extendTheme(options = {}, ...args) { const { colorSchemes: colorSchemesInput = {}, ...input } = options; @@ -54,28 +66,27 @@ export default function extendTheme(options = {}, ...args) { // attach black & white channels to common node if (key === 'dark') { - palette.common.background = palette.common.background || '#000'; - palette.common.onBackground = palette.common.onBackground || '#fff'; + setColor(palette.common, 'background', '#000'); + setColor(palette.common, 'onBackground', '#fff'); } else { - palette.common.background = palette.common.background || '#fff'; - palette.common.onBackground = palette.common.onBackground || '#000'; + setColor(palette.common, 'background', '#fff'); + setColor(palette.common, 'onBackground', '#000'); } // assign component variables - if (!palette.AppBar) { - palette.AppBar = {}; - } - if (!palette.Chip) { - palette.Chip = {}; - } + assignNode(palette, ['AppBar', 'Chip', 'FilledInput']); if (key === 'dark') { - palette.AppBar.defaultBgColor = palette.AppBar.defaultBgColor || 'var(--md-palette-grey-900)'; - palette.Chip.defaultBorderColor = - palette.Chip.defaultBorderColor || 'var(--md-palette-grey-700)'; + setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); + setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); + setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); + setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); + setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); } else { - palette.AppBar.defaultBgColor = palette.AppBar.defaultBgColor || 'var(--md-palette-grey-100)'; - palette.Chip.defaultBorderColor = - palette.Chip.defaultBorderColor || 'var(--md-palette-grey-400)'; + setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); + setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); + setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); + setColor(palette.FilledInput, 'hoverBgColor', 'rgba(0, 0, 0, 0.09)'); + setColor(palette.FilledInput, 'disabledBgColor', 'rgba(0, 0, 0, 0.12)'); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 6ce82c98b7e4a14570ee7e00c5dfc658b2b24274 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 00:36:20 +0700 Subject: [PATCH 04/37] LinearProgress --- .../material-ui/linear-progress.tsx | 72 +++++++++++++++++++ .../src/LinearProgress/LinearProgress.js | 11 ++- .../src/styles/experimental_extendTheme.js | 16 ++++- 3 files changed, 95 insertions(+), 4 deletions(-) create mode 100644 docs/pages/experiments/material-ui/linear-progress.tsx diff --git a/docs/pages/experiments/material-ui/linear-progress.tsx b/docs/pages/experiments/material-ui/linear-progress.tsx new file mode 100644 index 00000000000000..06de878cb9f957 --- /dev/null +++ b/docs/pages/experiments/material-ui/linear-progress.tsx @@ -0,0 +1,72 @@ +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 Stack from '@mui/material/Stack'; +import LinearProgress from '@mui/material/LinearProgress'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + + + + ); +} diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index f8efac8ec70642..7a35d0afca002b 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -90,6 +90,9 @@ const getColorShade = (theme, color) => { if (color === 'inherit') { return 'currentColor'; } + if (theme.vars) { + return theme.vars.palette.LinearProgress[`${color}BgColor`]; + } return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5); @@ -190,7 +193,9 @@ const LinearProgressBar1 = styled('span', { transition: 'transform 0.2s linear', transformOrigin: 'left', backgroundColor: - ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main, + ownerState.color === 'inherit' + ? 'currentColor' + : (theme.vars || theme).palette[ownerState.color].main, ...(ownerState.variant === 'determinate' && { transition: `transform .${TRANSITION_DURATION}s linear`, }), @@ -232,7 +237,9 @@ const LinearProgressBar2 = styled('span', { transformOrigin: 'left', ...(ownerState.variant !== 'buffer' && { backgroundColor: - ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main, + ownerState.color === 'inherit' + ? 'currentColor' + : (theme.vars || theme).palette[ownerState.color].main, }), ...(ownerState.color === 'inherit' && { opacity: 0.3, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index e0f9d65bfd5a62..9336d2a3988698 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,5 +1,5 @@ import { deepmerge } from '@mui/utils'; -import { colorChannel } from '@mui/system'; +import { colorChannel, darken, lighten } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import { getOverlayAlpha } from '../Paper/Paper'; @@ -74,19 +74,31 @@ export default function extendTheme(options = {}, ...args) { } // assign component variables - assignNode(palette, ['AppBar', 'Chip', 'FilledInput']); + assignNode(palette, ['AppBar', 'Chip', 'FilledInput', 'LinearProgress']); if (key === 'dark') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); + setColor(palette.LinearProgress, 'primaryBgColor', darken(palette.primary.main, 0.5)); + setColor(palette.LinearProgress, 'secondaryBgColor', darken(palette.secondary.main, 0.5)); + setColor(palette.LinearProgress, 'errorBgColor', darken(palette.error.main, 0.5)); + setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); + setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); + setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); setColor(palette.FilledInput, 'hoverBgColor', 'rgba(0, 0, 0, 0.09)'); setColor(palette.FilledInput, 'disabledBgColor', 'rgba(0, 0, 0, 0.12)'); + setColor(palette.LinearProgress, 'primaryBgColor', lighten(palette.primary.main, 0.62)); + setColor(palette.LinearProgress, 'secondaryBgColor', lighten(palette.secondary.main, 0.62)); + setColor(palette.LinearProgress, 'errorBgColor', lighten(palette.error.main, 0.62)); + setColor(palette.LinearProgress, 'infoBgColor', lighten(palette.info.main, 0.62)); + setColor(palette.LinearProgress, 'successBgColor', lighten(palette.success.main, 0.62)); + setColor(palette.LinearProgress, 'warningBgColor', lighten(palette.warning.main, 0.62)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From b64dcf6e25beacab171d7f5a38070562f7ec1cae Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 00:41:14 +0700 Subject: [PATCH 05/37] OutlinedInput --- .../experiments/material-ui/filled-input.tsx | 5 ++ .../src/OutlinedInput/OutlinedInput.js | 53 +++++++++++++------ 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/docs/pages/experiments/material-ui/filled-input.tsx b/docs/pages/experiments/material-ui/filled-input.tsx index bba534b7eff9d3..aea7c2457d8914 100644 --- a/docs/pages/experiments/material-ui/filled-input.tsx +++ b/docs/pages/experiments/material-ui/filled-input.tsx @@ -8,6 +8,7 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import FilledInput from '@mui/material/FilledInput'; +import OutlinedInput from '@mui/material/OutlinedInput'; import Moon from '@mui/icons-material/DarkMode'; import Sun from '@mui/icons-material/LightMode'; @@ -60,6 +61,10 @@ export default function CssVarsTemplate() { + + + + diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 11ea07a3d78777..f75afb1f4920f6 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -42,25 +42,27 @@ const OutlinedInputRoot = styled(InputBaseRoot, { theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; return { position: 'relative', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.text.primary, + borderColor: (theme.vars || theme).palette.text.primary, }, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor, + borderColor: theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : borderColor, }, }, [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette[ownerState.color].main, + borderColor: (theme.vars || theme).palette[ownerState.color].main, borderWidth: 2, }, [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.error.main, + borderColor: (theme.vars || theme).palette.error.main, }, [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: { - borderColor: theme.palette.action.disabled, + borderColor: (theme.vars || theme).palette.action.disabled, }, ...(ownerState.startAdornment && { paddingLeft: 14, @@ -81,9 +83,15 @@ const NotchedOutlineRoot = styled(NotchedOutline, { name: 'MuiOutlinedInput', slot: 'NotchedOutline', overridesResolver: (props, styles) => styles.notchedOutline, -})(({ theme }) => ({ - borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)', -})); +})(({ theme }) => { + const borderColor = + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'; + return { + borderColor: theme.vars + ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : borderColor, + }; +}); const OutlinedInputInput = styled(InputBaseInput, { name: 'MuiOutlinedInput', @@ -91,12 +99,27 @@ const OutlinedInputInput = styled(InputBaseInput, { overridesResolver: inputBaseInputOverridesResolver, })(({ theme, ownerState }) => ({ padding: '16.5px 14px', - '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', - WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', - caretColor: theme.palette.mode === 'light' ? null : '#fff', - borderRadius: 'inherit', - }, + ...(!theme.vars && { + '&:-webkit-autofill': { + WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff', + caretColor: theme.palette.mode === 'light' ? null : '#fff', + borderRadius: 'inherit', + }, + }), + ...(theme.vars && { + '&:-webkit-autofill': { + borderRadius: 'inherit', + }, + // TODO: the attribute should come from theme utilities + '[data-mui-color-scheme="light"] &': { + '&:-webkit-autofill': { + WebkitBoxShadow: '0 0 0 100px #266798 inset', + WebkitTextFillColor: '#fff', + caretColor: '#fff', + }, + }, + }), ...(ownerState.size === 'small' && { padding: '8.5px 14px', }), From e4d1ec706e28cefdbe81e487c211acaecc6ff31a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 00:48:05 +0700 Subject: [PATCH 06/37] Skeleton --- .../experiments/material-ui/skeleton.tsx | 69 +++++++++++++++++++ .../mui-material/src/Skeleton/Skeleton.js | 14 ++-- .../src/styles/experimental_extendTheme.js | 2 + 3 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 docs/pages/experiments/material-ui/skeleton.tsx diff --git a/docs/pages/experiments/material-ui/skeleton.tsx b/docs/pages/experiments/material-ui/skeleton.tsx new file mode 100644 index 00000000000000..73e471e10e1a26 --- /dev/null +++ b/docs/pages/experiments/material-ui/skeleton.tsx @@ -0,0 +1,69 @@ +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 Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + ); +} diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index 5bd6a7311e2345..a681010e4bb8cf 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -77,10 +77,9 @@ const SkeletonRoot = styled('span', { return { display: 'block', // Create a "on paper" color with sufficient contrast retaining the color - backgroundColor: alpha( - theme.palette.text.primary, - theme.palette.mode === 'light' ? 0.11 : 0.13, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.opacity.skeletonBg})` + : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), height: '1.2em', ...(ownerState.variant === 'text' && { marginTop: 0, @@ -129,7 +128,12 @@ const SkeletonRoot = styled('span', { &::after { animation: ${waveKeyframe} 1.6s linear 0.5s infinite; - background: linear-gradient(90deg, transparent, ${theme.palette.action.hover}, transparent); + background: linear-gradient( + 90deg, + transparent, + ${(theme.vars || theme).palette.action.hover}, + transparent + ); content: ''; position: absolute; transform: translateX(-100%); /* Avoid flash during server-side hydration */ diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 9336d2a3988698..800f34c2f331d9 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -44,6 +44,7 @@ export default function extendTheme(options = {}, ...args) { opacity: { placeholder: 0.42, inputTouchBottomLine: 0.42, + skeletonBg: 0.11, ...colorSchemesInput.light?.opacity, }, overlays: colorSchemesInput.light?.overlays || [], @@ -54,6 +55,7 @@ export default function extendTheme(options = {}, ...args) { opacity: { placeholder: 0.5, inputTouchBottomLine: 0.7, + skeletonBg: 0.13, ...colorSchemesInput.dark?.opacity, }, overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays, From 8eb3c254ee2efe6bfd315dc91b924c4d111c670e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 00:58:41 +0700 Subject: [PATCH 07/37] Slider --- docs/pages/experiments/material-ui/slider.tsx | 107 ++++++++++++++++++ packages/mui-material/src/Slider/Slider.js | 32 ++++-- .../src/styles/experimental_extendTheme.js | 14 ++- 3 files changed, 140 insertions(+), 13 deletions(-) create mode 100644 docs/pages/experiments/material-ui/slider.tsx diff --git a/docs/pages/experiments/material-ui/slider.tsx b/docs/pages/experiments/material-ui/slider.tsx new file mode 100644 index 00000000000000..4ebc37e1a707ef --- /dev/null +++ b/docs/pages/experiments/material-ui/slider.tsx @@ -0,0 +1,107 @@ +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 Slider from '@mui/material/Slider'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +export default function CssVarsTemplate() { + return ( + + + + + + + div': { + placeSelf: 'center', + }, + }} + > + + + + + + + + + + + ); +} diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 66d3a3eff49e5a..b2003deb8890ca 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -50,7 +50,7 @@ const SliderRoot = styled('span', { position: 'relative', cursor: 'pointer', touchAction: 'none', - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, WebkitTapHighlightColor: 'transparent', ...(ownerState.orientation === 'horizontal' && { height: 4, @@ -90,7 +90,7 @@ const SliderRoot = styled('span', { [`&.${sliderClasses.disabled}`]: { pointerEvents: 'none', cursor: 'default', - color: theme.palette.grey[400], + color: (theme.vars || theme).palette.grey[400], }, [`&.${sliderClasses.dragging}`]: { [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: { @@ -187,8 +187,8 @@ const SliderTrack = styled('span', { display: 'none', }), ...(ownerState.track === 'inverted' && { - backgroundColor: color, - borderColor: color, + backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, + borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color, }), }; }); @@ -249,7 +249,7 @@ const SliderThumb = styled('span', { borderRadius: 'inherit', width: '100%', height: '100%', - boxShadow: theme.shadows[2], + boxShadow: (theme.vars || theme).shadows[2], ...(ownerState.size === 'small' && { boxShadow: 'none', }), @@ -266,13 +266,21 @@ const SliderThumb = styled('span', { transform: 'translate(-50%, -50%)', }, [`&:hover, &.${sliderClasses.focusVisible}`]: { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[ownerState.color].main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` + : alpha(theme.palette[ownerState.color].main, 0.16) + }`, '@media (hover: none)': { boxShadow: 'none', }, }, [`&.${sliderClasses.active}`]: { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[ownerState.color].main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${ + theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` + : alpha(theme.palette[ownerState.color].main, 0.16) + }`, }, [`&.${sliderClasses.disabled}`]: { '&:hover': { @@ -313,9 +321,9 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, { transformOrigin: 'bottom center', transform: 'translateY(-100%) scale(0)', position: 'absolute', - backgroundColor: theme.palette.grey[600], + backgroundColor: (theme.vars || theme).palette.grey[600], borderRadius: 2, - color: theme.palette.common.white, + color: (theme.vars || theme).palette.common.white, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -369,7 +377,7 @@ const SliderMark = styled('span', { transform: 'translate(-50%, 1px)', }), ...(markActive && { - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || theme).palette.background.paper, opacity: 0.8, }), })); @@ -394,7 +402,7 @@ const SliderMarkLabel = styled('span', { overridesResolver: (props, styles) => styles.markLabel, })(({ theme, ownerState, markLabelActive }) => ({ ...theme.typography.body2, - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, position: 'absolute', whiteSpace: 'nowrap', ...(ownerState.orientation === 'horizontal' && { @@ -412,7 +420,7 @@ const SliderMarkLabel = styled('span', { }, }), ...(markLabelActive && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }), })); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 800f34c2f331d9..9e472e7f4cbbb4 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -76,7 +76,7 @@ export default function extendTheme(options = {}, ...args) { } // assign component variables - assignNode(palette, ['AppBar', 'Chip', 'FilledInput', 'LinearProgress']); + assignNode(palette, ['AppBar', 'Chip', 'FilledInput', 'LinearProgress', 'Slider']); if (key === 'dark') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -89,6 +89,12 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); + setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); + setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); + setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); + setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); + setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); + setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); @@ -101,6 +107,12 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBgColor', lighten(palette.info.main, 0.62)); setColor(palette.LinearProgress, 'successBgColor', lighten(palette.success.main, 0.62)); setColor(palette.LinearProgress, 'warningBgColor', lighten(palette.warning.main, 0.62)); + setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); + setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); + setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); + setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62)); + setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); + setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From df07e92ca26e5ce945bd7f0fde168f486101ea58 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 01:03:05 +0700 Subject: [PATCH 08/37] SnackbarContent --- .../src/SnackbarContent/SnackbarContent.js | 8 +++++--- .../src/styles/experimental_extendTheme.js | 13 +++++++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.js index b5679c4cb5f8aa..35b9b21e8fb095 100644 --- a/packages/mui-material/src/SnackbarContent/SnackbarContent.js +++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.js @@ -30,13 +30,15 @@ const SnackbarContentRoot = styled(Paper, { return { ...theme.typography.body2, - color: theme.palette.getContrastText(backgroundColor), - backgroundColor, + color: theme.vars + ? theme.vars.palette.text.primary + : theme.palette.getContrastText(backgroundColor), + backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bgColor : backgroundColor, display: 'flex', alignItems: 'center', flexWrap: 'wrap', padding: '6px 16px', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, flexGrow: 1, [theme.breakpoints.up('sm')]: { flexGrow: 'initial', diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 9e472e7f4cbbb4..2cca2551c89273 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,5 +1,5 @@ import { deepmerge } from '@mui/utils'; -import { colorChannel, darken, lighten } from '@mui/system'; +import { colorChannel, darken, lighten, emphasize } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import { getOverlayAlpha } from '../Paper/Paper'; @@ -76,7 +76,14 @@ export default function extendTheme(options = {}, ...args) { } // assign component variables - assignNode(palette, ['AppBar', 'Chip', 'FilledInput', 'LinearProgress', 'Slider']); + assignNode(palette, [ + 'AppBar', + 'Chip', + 'FilledInput', + 'LinearProgress', + 'Slider', + 'SnackbarContent', + ]); if (key === 'dark') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -95,6 +102,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); + setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.98)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); @@ -113,6 +121,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62)); setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); + setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.8)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 328d2bff8672cf72bc625af02efa50c08f8d5de7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 01:06:06 +0700 Subject: [PATCH 09/37] StepConnector --- .../src/StepConnector/StepConnector.js | 30 +++++++------ .../src/styles/experimental_extendTheme.js | 44 ++++++++++--------- 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index 34f4c204b735c1..b5a5e72b94064d 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -61,19 +61,23 @@ const StepConnectorLine = styled('span', { return [styles.line, styles[`line${capitalize(ownerState.orientation)}`]]; }, -})(({ ownerState, theme }) => ({ - display: 'block', - borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], - ...(ownerState.orientation === 'horizontal' && { - borderTopStyle: 'solid', - borderTopWidth: 1, - }), - ...(ownerState.orientation === 'vertical' && { - borderLeftStyle: 'solid', - borderLeftWidth: 1, - minHeight: 24, - }), -})); +})(({ ownerState, theme }) => { + const borderColor = + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]; + return { + display: 'block', + borderColor: theme.vars ? theme.vars.palette.StepConnector?.borderColor : borderColor, + ...(ownerState.orientation === 'horizontal' && { + borderTopStyle: 'solid', + borderTopWidth: 1, + }), + ...(ownerState.orientation === 'vertical' && { + borderLeftStyle: 'solid', + borderLeftWidth: 1, + minHeight: 24, + }), + }; +}); const StepConnector = React.forwardRef(function StepConnector(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiStepConnector' }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 2cca2551c89273..23081e9a741c00 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -83,27 +83,9 @@ export default function extendTheme(options = {}, ...args) { 'LinearProgress', 'Slider', 'SnackbarContent', + 'StepConnector', ]); - if (key === 'dark') { - setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); - setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); - setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); - setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); - setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); - setColor(palette.LinearProgress, 'primaryBgColor', darken(palette.primary.main, 0.5)); - setColor(palette.LinearProgress, 'secondaryBgColor', darken(palette.secondary.main, 0.5)); - setColor(palette.LinearProgress, 'errorBgColor', darken(palette.error.main, 0.5)); - setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); - setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); - setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); - setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); - setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); - setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); - setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); - setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); - setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); - setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.98)); - } else { + if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); @@ -122,6 +104,28 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.8)); + setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-400)'); + } else { + setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); + setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); + setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); + setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); + setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); + setColor(palette.LinearProgress, 'primaryBgColor', darken(palette.primary.main, 0.5)); + setColor(palette.LinearProgress, 'secondaryBgColor', darken(palette.secondary.main, 0.5)); + setColor(palette.LinearProgress, 'errorBgColor', darken(palette.error.main, 0.5)); + setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); + setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); + setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); + setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); + setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); + setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); + setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); + setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); + setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); + setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.98)); + setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); + setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-600)'); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 4f05cce5d104440b802b2afce2273f13f8edb975 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 01:08:14 +0700 Subject: [PATCH 10/37] StepContent --- packages/mui-material/src/StepContent/StepContent.js | 8 +++++--- .../mui-material/src/styles/experimental_extendTheme.js | 3 +++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 41b4e5ec7b039e..2b854dfc370c45 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -29,9 +29,11 @@ const StepContentRoot = styled('div', { marginLeft: 12, // half icon paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, - borderLeft: `1px solid ${ - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] - }`, + borderLeft: theme.vars + ? `1px solid ${theme.vars.palette.StepContent.borderColor}` + : `1px solid ${ + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] + }`, ...(ownerState.last && { borderLeft: 'none', }), diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 23081e9a741c00..9b3929fb7f8c9b 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -84,6 +84,7 @@ export default function extendTheme(options = {}, ...args) { 'Slider', 'SnackbarContent', 'StepConnector', + 'StepContent', ]); if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); @@ -105,6 +106,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.8)); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-400)'); + setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-400)'); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -126,6 +128,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.98)); setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-600)'); + setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-600)'); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 2da19e450ade8cc65256cf3e1ad48ccd0b24ff2c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 01:22:22 +0700 Subject: [PATCH 11/37] Switch --- packages/mui-material/src/Switch/Switch.js | 51 ++++++++++++------- .../src/styles/experimental_extendTheme.js | 29 +++++++++-- 2 files changed, 58 insertions(+), 22 deletions(-) diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index eab62c13cf6e13..fa016e850296d3 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -102,7 +102,9 @@ const SwitchSwitchBase = styled(SwitchBase, { top: 0, left: 0, zIndex: 1, // Render above the focus ripple. - color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300], + color: theme.vars + ? theme.vars.palette.Switch.defaultColor + : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`, transition: theme.transitions.create(['left', 'transform'], { duration: theme.transitions.duration.shortest, }), @@ -110,13 +112,17 @@ const SwitchSwitchBase = styled(SwitchBase, { transform: 'translateX(20px)', }, [`&.${switchClasses.disabled}`]: { - color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600], + color: theme.vars + ? theme.vars.palette.Switch.defaultDisabledColor + : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`, }, [`&.${switchClasses.checked} + .${switchClasses.track}`]: { opacity: 0.5, }, [`&.${switchClasses.disabled} + .${switchClasses.track}`]: { - opacity: theme.palette.mode === 'light' ? 0.12 : 0.2, + opacity: theme.vars + ? theme.vars.opacity.switchTrackDisabled + : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`, }, [`& .${switchClasses.input}`]: { left: '-100%', @@ -125,7 +131,9 @@ const SwitchSwitchBase = styled(SwitchBase, { }), ({ theme, ownerState }) => ({ '&:hover': { - backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { backgroundColor: 'transparent', @@ -133,25 +141,29 @@ const SwitchSwitchBase = styled(SwitchBase, { }, ...(ownerState.color !== 'default' && { [`&.${switchClasses.checked}`]: { - color: theme.palette[ownerState.color].main, + color: (theme.vars || theme).palette[ownerState.color].main, '&:hover': { - backgroundColor: alpha( - theme.palette[ownerState.color].main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.hoverOpacity + })` + : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), '@media (hover: none)': { backgroundColor: 'transparent', }, }, [`&.${switchClasses.disabled}`]: { - color: - theme.palette.mode === 'light' - ? lighten(theme.palette[ownerState.color].main, 0.62) - : darken(theme.palette[ownerState.color].main, 0.55), + color: theme.vars + ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] + : `${ + theme.palette.mode === 'light' + ? lighten(theme.palette[ownerState.color].main, 0.62) + : darken(theme.palette[ownerState.color].main, 0.55) + }`, }, }, [`&.${switchClasses.checked} + .${switchClasses.track}`]: { - backgroundColor: theme.palette[ownerState.color].main, + backgroundColor: (theme.vars || theme).palette[ownerState.color].main, }, }), }), @@ -169,9 +181,12 @@ const SwitchTrack = styled('span', { transition: theme.transitions.create(['opacity', 'background-color'], { duration: theme.transitions.duration.shortest, }), - backgroundColor: - theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white, - opacity: theme.palette.mode === 'light' ? 0.38 : 0.3, + backgroundColor: theme.vars + ? theme.vars.palette.common.onBackground + : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`, + opacity: theme.vars + ? theme.vars.opacity.switchTrack + : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`, })); const SwitchThumb = styled('span', { @@ -179,7 +194,7 @@ const SwitchThumb = styled('span', { slot: 'Thumb', overridesResolver: (props, styles) => styles.thumb, })(({ theme }) => ({ - boxShadow: theme.shadows[1], + boxShadow: (theme.vars || theme).shadows[1], backgroundColor: 'currentColor', width: 20, height: 20, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 9b3929fb7f8c9b..b3dbd36ec193e5 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -45,6 +45,8 @@ export default function extendTheme(options = {}, ...args) { placeholder: 0.42, inputTouchBottomLine: 0.42, skeletonBg: 0.11, + switchTrackDisabled: 0.12, + switchTrack: 0.38, ...colorSchemesInput.light?.opacity, }, overlays: colorSchemesInput.light?.overlays || [], @@ -56,6 +58,8 @@ export default function extendTheme(options = {}, ...args) { placeholder: 0.5, inputTouchBottomLine: 0.7, skeletonBg: 0.13, + switchTrackDisabled: 0.2, + switchTrack: 0.3, ...colorSchemesInput.dark?.opacity, }, overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays, @@ -67,12 +71,12 @@ export default function extendTheme(options = {}, ...args) { const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node - if (key === 'dark') { - setColor(palette.common, 'background', '#000'); - setColor(palette.common, 'onBackground', '#fff'); - } else { + if (key === 'light') { setColor(palette.common, 'background', '#fff'); setColor(palette.common, 'onBackground', '#000'); + } else { + setColor(palette.common, 'background', '#000'); + setColor(palette.common, 'onBackground', '#fff'); } // assign component variables @@ -85,6 +89,7 @@ export default function extendTheme(options = {}, ...args) { 'SnackbarContent', 'StepConnector', 'StepContent', + 'Switch', ]); if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); @@ -107,6 +112,14 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.8)); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-400)'); setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-400)'); + setColor(palette.Switch, 'defaultColor', 'var(--md-palette-common-white)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-100)'); + setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62)); + setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62)); + setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62)); + setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62)); + setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); + setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -129,6 +142,14 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-600)'); setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-600)'); + setColor(palette.Switch, 'defaultColor', 'var(--md-palette-grey-300)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-600)'); + setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55)); + setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55)); + setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55)); + setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55)); + setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); + setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 14b38dad9b37f3ca2a1fdb064ab722995957e09e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 01:26:28 +0700 Subject: [PATCH 12/37] TableCell --- packages/mui-material/src/TableCell/TableCell.js | 12 +++++++----- .../src/styles/experimental_extendTheme.js | 5 ++++- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js index ee9fb48fd973c7..64c0052d9293ad 100644 --- a/packages/mui-material/src/TableCell/TableCell.js +++ b/packages/mui-material/src/TableCell/TableCell.js @@ -48,7 +48,9 @@ const TableCellRoot = styled('td', { verticalAlign: 'inherit', // Workaround for a rendering bug with spanned columns in Chrome 62.0. // Removes the alpha (sets it to 1), and lightens or darkens the theme color. - borderBottom: `1px solid + borderBottom: theme.vars + ? `1px solid ${theme.vars.palette.TableCell.borderColor}` + : `1px solid ${ theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) @@ -57,15 +59,15 @@ const TableCellRoot = styled('td', { textAlign: 'left', padding: 16, ...(ownerState.variant === 'head' && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, lineHeight: theme.typography.pxToRem(24), fontWeight: theme.typography.fontWeightMedium, }), ...(ownerState.variant === 'body' && { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }), ...(ownerState.variant === 'footer' && { - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, lineHeight: theme.typography.pxToRem(21), fontSize: theme.typography.pxToRem(12), }), @@ -103,7 +105,7 @@ const TableCellRoot = styled('td', { position: 'sticky', top: 0, zIndex: 2, - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, }), })); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index b3dbd36ec193e5..043ea24bade8ae 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,5 +1,5 @@ import { deepmerge } from '@mui/utils'; -import { colorChannel, darken, lighten, emphasize } from '@mui/system'; +import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import { getOverlayAlpha } from '../Paper/Paper'; @@ -90,6 +90,7 @@ export default function extendTheme(options = {}, ...args) { 'StepConnector', 'StepContent', 'Switch', + 'TableCell', ]); if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); @@ -120,6 +121,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62)); setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); + setColor(palette.TableCell, 'borderColor', lighten(alpha(palette.divider, 1), 0.88)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -150,6 +152,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55)); setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); + setColor(palette.TableCell, 'borderColor', darken(alpha(palette.divider, 1), 0.68)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 626edc00bb9ab204a374fa3d0c32886e93f328ed Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 09:13:43 +0700 Subject: [PATCH 13/37] fix Chip --- packages/mui-material/src/Chip/Chip.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 6caf0b12141b16..4eace654947ed7 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -271,15 +271,15 @@ const ChipRoot = styled('div', { }`, [`&.${chipClasses.clickable}:hover`]: { backgroundColor: theme.vars - ? `rgba(${theme.palette[ownerState.color].mainChannel} / ${ - theme.palette.action.hoverOpacity + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.hoverOpacity })` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), }, [`&.${chipClasses.focusVisible}`]: { backgroundColor: theme.vars - ? `rgba(${theme.palette[ownerState.color].mainChannel} / ${ - theme.palette.action.focusOpacity + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ + theme.vars.palette.action.focusOpacity })` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity), }, From 621f8d52ce6b073c7240e0c796ca25a45a2258b3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 09:16:14 +0700 Subject: [PATCH 14/37] check table cell --- docs/pages/experiments/material-ui/table.tsx | 48 +++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/docs/pages/experiments/material-ui/table.tsx b/docs/pages/experiments/material-ui/table.tsx index 1304bb14e8f3d0..7fa8b8e8d47f52 100644 --- a/docs/pages/experiments/material-ui/table.tsx +++ b/docs/pages/experiments/material-ui/table.tsx @@ -10,7 +10,12 @@ import Container from '@mui/material/Container'; import Moon from '@mui/icons-material/DarkMode'; import Sun from '@mui/icons-material/LightMode'; import Table from '@mui/material/Table'; -import { TableBody, TableHead, TableRow } from '@mui/material'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -38,6 +43,18 @@ const ColorSchemePicker = () => { ); }; +function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Gingerbread', 356, 16.0, 49, 3.9), +]; + export default function CssVarsTemplate() { return ( @@ -89,6 +106,35 @@ export default function CssVarsTemplate() { + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map((row) => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+ From f7f5a994784a76445808d277fce15070375459a6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 09:24:33 +0700 Subject: [PATCH 15/37] add component tokens --- .../src/styles/createPalette.d.ts | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 342255f7943976..a04aacfbdb7742 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -129,6 +129,56 @@ export interface PaletteWithChannels { background: TypeBackground; getContrastText: (background: string) => string; augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor; + // component tokens + AppBar: { + defaultBgColor: string; + }; + Chip: { + defaultBorderColor: string; + }; + FilledInput: { + bgColor: string; + hoverBgColor: string; + disabledBgColor: string; + }; + LinearProgress: { + primaryBgColor: string; + secondaryBgColor: string; + errorBgColor: string; + infoBgColor: string; + successBgColor: string; + warningBgColor: string; + }; + Slider: { + primaryTrack: string; + secondaryTrack: string; + errorTrack: string; + infoTrack: string; + successTrack: string; + warningTrack: string; + }; + SnackbarContent: { + bgColor: string; + }; + StepConnector: { + borderColor: string; + }; + StepContent: { + borderColor: string; + }; + Switch: { + defaultColor: string; + defaultDisabledColor: string; + primaryDisabledColor: string; + secondaryDisabledColor: string; + errorDisabledColor: string; + infoDisabledColor: string; + successDisabledColor: string; + warningDisabledColor: string; + }; + TableCell: { + borderColor: string; + }; } export type PartialTypeObject = { [P in keyof TypeObject]?: Partial }; From 82286e56bd22b08ae0dbb5b0147e95f6a7f1f3c7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 20 May 2022 10:07:32 +0700 Subject: [PATCH 16/37] fix tests --- .../mui-material/src/styles/CssVarsProvider.test.js | 3 +++ .../src/styles/experimental_extendTheme.test.js | 10 ++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 70f8c64548c05a..7d26902fb40244 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -200,6 +200,9 @@ describe('[Material UI] CssVarsProvider', () => { JSON.stringify({ placeholder: 'var(--md-opacity-placeholder)', inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', + skeletonBg: 'var(--md-opacity-skeletonBg)', + switchTrackDisabled: 'var(--md-opacity-switchTrackDisabled)', + switchTrack: 'var(--md-opacity-switchTrack)', }), ); }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 117d04c98c5fe9..89b5343ab4913d 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -227,10 +227,16 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.light.opacity).to.deep.equal({ placeholder: 0.42, inputTouchBottomLine: 0.42, + skeletonBg: 0.11, + switchTrackDisabled: 0.12, + switchTrack: 0.38, }); expect(theme.colorSchemes.dark.opacity).to.deep.equal({ placeholder: 0.5, inputTouchBottomLine: 0.7, + skeletonBg: 0.13, + switchTrackDisabled: 0.2, + switchTrack: 0.3, }); }); @@ -249,11 +255,11 @@ describe('experimental_extendTheme', () => { }, }, }); - expect(theme.colorSchemes.light.opacity).to.deep.equal({ + expect(theme.colorSchemes.light.opacity).to.deep.include({ placeholder: 1, inputTouchBottomLine: 0.42, }); - expect(theme.colorSchemes.dark.opacity).to.deep.equal({ + expect(theme.colorSchemes.dark.opacity).to.deep.include({ placeholder: 0.2, inputTouchBottomLine: 0.7, }); From dd910d8f1334924469d2a27ff1833df8d0adadb8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 May 2022 07:38:27 +0700 Subject: [PATCH 17/37] fix Chip --- packages/mui-material/src/Chip/Chip.js | 12 ++++++------ .../src/styles/experimental_extendTheme.js | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 4eace654947ed7..52657c45450bcb 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -74,7 +74,7 @@ const ChipRoot = styled('div', { })( ({ theme, ownerState }) => { const deleteIconColor = alpha(theme.palette.text.primary, 0.26); - const contrast4 = + const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300]; return { maxWidth: '100%', @@ -107,7 +107,7 @@ const ChipRoot = styled('div', { marginRight: -6, width: 24, height: 24, - color: theme.vars ? theme.vars.palette.grey.contrast4 : contrast4, + color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor, fontSize: theme.typography.pxToRem(12), }, [`& .${chipClasses.avatarColorPrimary}`]: { @@ -126,7 +126,7 @@ const ChipRoot = styled('div', { fontSize: theme.typography.pxToRem(10), }, [`& .${chipClasses.icon}`]: { - color: theme.vars ? theme.vars.palette.grey.contrast4 : contrast4, + color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor, marginLeft: 5, marginRight: -6, ...(ownerState.size === 'small' && { @@ -175,7 +175,7 @@ const ChipRoot = styled('div', { ...(ownerState.onDelete && { [`&.${chipClasses.focusVisible}`]: { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selected} / calc(${ + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity }))` : alpha( @@ -199,7 +199,7 @@ const ChipRoot = styled('div', { cursor: 'pointer', '&:hover': { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selected} / calc(${ + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity }))` : alpha( @@ -209,7 +209,7 @@ const ChipRoot = styled('div', { }, [`&.${chipClasses.focusVisible}`]: { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selected} / calc(${ + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${ theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity }))` : alpha( diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 043ea24bade8ae..d081c08535f533 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -95,6 +95,8 @@ export default function extendTheme(options = {}, ...args) { if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-700)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-700)'); setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); setColor(palette.FilledInput, 'hoverBgColor', 'rgba(0, 0, 0, 0.09)'); setColor(palette.FilledInput, 'disabledBgColor', 'rgba(0, 0, 0, 0.12)'); @@ -125,6 +127,8 @@ export default function extendTheme(options = {}, ...args) { } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-300)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-300)'); setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); From 1c4216b8fb696e060007630b3b754c4b057e1eaf Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 May 2022 07:49:12 +0700 Subject: [PATCH 18/37] remove optional chaining --- packages/mui-material/src/AppBar/AppBar.js | 2 +- packages/mui-material/src/Chip/Chip.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index 56192e62baf39e..6480c03c9b0760 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -74,7 +74,7 @@ const AppBarRoot = styled(Paper, { }), ...(ownerState.color === 'default' && { backgroundColor: theme.vars - ? theme.vars.palette.AppBar?.defaultBgColor + ? theme.vars.palette.AppBar.defaultBgColor : backgroundColorDefault, color: theme.vars ? theme.vars.palette.text.primary diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 52657c45450bcb..85c1502b171856 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -232,7 +232,7 @@ const ChipRoot = styled('div', { ...(ownerState.variant === 'outlined' && { backgroundColor: 'transparent', border: theme.vars - ? `1px solid ${theme.vars.palette.Chip?.defaultBorderColor}` + ? `1px solid ${theme.vars.palette.Chip.defaultBorderColor}` : `1px solid ${ theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] }`, From 0b2e29b18ef758a0ee13b1abff4101194394c76a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 24 May 2022 07:50:09 +0700 Subject: [PATCH 19/37] move skeleton var to palette --- packages/mui-material/src/Skeleton/Skeleton.js | 2 +- packages/mui-material/src/styles/CssVarsProvider.test.js | 1 - packages/mui-material/src/styles/createPalette.d.ts | 2 ++ packages/mui-material/src/styles/experimental_extendTheme.js | 5 +++-- .../mui-material/src/styles/experimental_extendTheme.test.js | 2 -- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index a681010e4bb8cf..dfa577053acecc 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -78,7 +78,7 @@ const SkeletonRoot = styled('span', { display: 'block', // Create a "on paper" color with sufficient contrast retaining the color backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.opacity.skeletonBg})` + ? theme.vars.palette.Skeleton.bgColor : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), height: '1.2em', ...(ownerState.variant === 'text' && { diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 7d26902fb40244..843400846aa2f8 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -200,7 +200,6 @@ describe('[Material UI] CssVarsProvider', () => { JSON.stringify({ placeholder: 'var(--md-opacity-placeholder)', inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', - skeletonBg: 'var(--md-opacity-skeletonBg)', switchTrackDisabled: 'var(--md-opacity-switchTrackDisabled)', switchTrack: 'var(--md-opacity-switchTrack)', }), diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index a04aacfbdb7742..44a5ea9dca8d0e 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -135,6 +135,8 @@ export interface PaletteWithChannels { }; Chip: { defaultBorderColor: string; + defaultAvatarColor: string; + defaultIconColor: string; }; FilledInput: { bgColor: string; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index d081c08535f533..8959c72db8abd5 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -44,7 +44,6 @@ export default function extendTheme(options = {}, ...args) { opacity: { placeholder: 0.42, inputTouchBottomLine: 0.42, - skeletonBg: 0.11, switchTrackDisabled: 0.12, switchTrack: 0.38, ...colorSchemesInput.light?.opacity, @@ -57,7 +56,6 @@ export default function extendTheme(options = {}, ...args) { opacity: { placeholder: 0.5, inputTouchBottomLine: 0.7, - skeletonBg: 0.13, switchTrackDisabled: 0.2, switchTrack: 0.3, ...colorSchemesInput.dark?.opacity, @@ -85,6 +83,7 @@ export default function extendTheme(options = {}, ...args) { 'Chip', 'FilledInput', 'LinearProgress', + 'Skeleton', 'Slider', 'SnackbarContent', 'StepConnector', @@ -106,6 +105,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBgColor', lighten(palette.info.main, 0.62)); setColor(palette.LinearProgress, 'successBgColor', lighten(palette.success.main, 0.62)); setColor(palette.LinearProgress, 'warningBgColor', lighten(palette.warning.main, 0.62)); + setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.11)'); setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); @@ -138,6 +138,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); + setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.13)'); setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 89b5343ab4913d..f0045a6f0d7fe7 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -227,14 +227,12 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.light.opacity).to.deep.equal({ placeholder: 0.42, inputTouchBottomLine: 0.42, - skeletonBg: 0.11, switchTrackDisabled: 0.12, switchTrack: 0.38, }); expect(theme.colorSchemes.dark.opacity).to.deep.equal({ placeholder: 0.5, inputTouchBottomLine: 0.7, - skeletonBg: 0.13, switchTrackDisabled: 0.2, switchTrack: 0.3, }); From d024770153e7461d6943ee6accc6924f46df4e92 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 28 May 2022 08:40:50 +0700 Subject: [PATCH 20/37] use getColorSchemeSelector util --- packages/mui-material/src/FilledInput/FilledInput.js | 3 +-- packages/mui-material/src/OutlinedInput/OutlinedInput.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index ab4f3a051f552c..2e4ec134ebf7a9 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -164,8 +164,7 @@ const FilledInputInput = styled(InputBaseInput, { borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', }, - // TODO: the attribute should come from theme utilities - '[data-mui-color-scheme="light"] &': { + [theme.getColorSchemeSelector('dark')]: { '&:-webkit-autofill': { WebkitBoxShadow: '0 0 0 100px #266798 inset', WebkitTextFillColor: '#fff', diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index f75afb1f4920f6..1b4c9fcf574295 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -111,8 +111,7 @@ const OutlinedInputInput = styled(InputBaseInput, { '&:-webkit-autofill': { borderRadius: 'inherit', }, - // TODO: the attribute should come from theme utilities - '[data-mui-color-scheme="light"] &': { + [theme.getColorSchemeSelector('dark')]: { '&:-webkit-autofill': { WebkitBoxShadow: '0 0 0 100px #266798 inset', WebkitTextFillColor: '#fff', From 448d2b81a1c99c51fcc68ba23dd4ac29bf3ab35c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 10:34:26 +0700 Subject: [PATCH 21/37] replace grey.dark with Tooltip.bgColor --- packages/mui-material/src/Tooltip/Tooltip.js | 2 +- .../src/styles/experimental_extendTheme.js | 9 +++---- .../styles/experimental_extendTheme.test.js | 26 ------------------- 3 files changed, 4 insertions(+), 33 deletions(-) diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 88d7f7b00cbab8..5df8a8a288f538 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -119,7 +119,7 @@ const TooltipTooltip = styled('div', { }, })(({ theme, ownerState }) => ({ backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` + ? theme.vars.palette.Tooltip.bgColor : alpha(theme.palette.grey[700], 0.92), borderRadius: (theme.vars || theme).shape.borderRadius, color: (theme.vars || theme).palette.common.white, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 8959c72db8abd5..f59969f56f2f17 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -90,6 +90,7 @@ export default function extendTheme(options = {}, ...args) { 'StepContent', 'Switch', 'TableCell', + 'Tooltip', ]); if (key === 'light') { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); @@ -124,6 +125,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); setColor(palette.TableCell, 'borderColor', lighten(alpha(palette.divider, 1), 0.88)); + setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } else { setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); @@ -158,6 +160,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); setColor(palette.TableCell, 'borderColor', darken(alpha(palette.divider, 1), 0.68)); + setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } palette.common.backgroundChannel = colorChannel(palette.common.background); @@ -165,12 +168,6 @@ 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 f0045a6f0d7fe7..7b4c3d595b5fb2 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -83,36 +83,10 @@ describe('experimental_extendTheme', () => { 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'); - expect(theme.colorSchemes.dark.palette.action.activeChannel).to.equal('255 255 255'); expect(theme.colorSchemes.light.palette.action.activeChannel).to.equal('0 0 0'); }); - 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', () => { const theme = extendTheme({ colorSchemes: { From bd55bf4435b9e559168093a4d29c94b819451560 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 10:39:43 +0700 Subject: [PATCH 22/37] add selectedChannel token --- packages/mui-material/src/styles/CssVarsProvider.test.js | 1 + packages/mui-material/src/styles/experimental_extendTheme.js | 5 ++++- .../mui-material/src/styles/experimental_extendTheme.test.js | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 843400846aa2f8..a79f42d40df0fc 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -166,6 +166,7 @@ describe('[Material UI] CssVarsProvider', () => { focusOpacity: 'var(--md-palette-action-focusOpacity)', activatedOpacity: 'var(--md-palette-action-activatedOpacity)', activeChannel: 'var(--md-palette-action-activeChannel)', + selectedChannel: 'var(--md-palette-action-selectedChannel)', }), ); expect(screen.getByTestId('palette-common').textContent).to.equal( diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index f59969f56f2f17..6e38914c645465 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -193,10 +193,13 @@ export default function extendTheme(options = {}, ...args) { palette[color].secondaryChannel = colorChannel(colors.secondary); } - // Action colors: action.activeChannel + // Action colors: action.active, action.selected if (colors.active) { palette[color].activeChannel = colorChannel(colors.active); } + if (colors.selected) { + palette[color].selectedChannel = colorChannel(colors.selected); + } }); }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 7b4c3d595b5fb2..c598a20b1781e4 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -85,6 +85,9 @@ describe('experimental_extendTheme', () => { expect(theme.colorSchemes.dark.palette.action.activeChannel).to.equal('255 255 255'); expect(theme.colorSchemes.light.palette.action.activeChannel).to.equal('0 0 0'); + + expect(theme.colorSchemes.dark.palette.action.selectedChannel).to.equal('255 255 255'); + expect(theme.colorSchemes.light.palette.action.selectedChannel).to.equal('0 0 0'); }); it('should generate common background, onBackground channels', () => { From 49aa943c1babe51a6efd288026037bb8ca651d55 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 11:59:41 +0700 Subject: [PATCH 23/37] rename AppBar --- packages/mui-material/src/AppBar/AppBar.js | 4 +--- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index 6480c03c9b0760..a4f447f89af324 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -73,9 +73,7 @@ const AppBarRoot = styled(Paper, { position: 'relative', }), ...(ownerState.color === 'default' && { - backgroundColor: theme.vars - ? theme.vars.palette.AppBar.defaultBgColor - : backgroundColorDefault, + backgroundColor: theme.vars ? theme.vars.palette.AppBar.defaultBg : backgroundColorDefault, color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColorDefault), diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 6e38914c645465..8a79bc91cf3f90 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -93,7 +93,7 @@ export default function extendTheme(options = {}, ...args) { 'Tooltip', ]); if (key === 'light') { - setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-100)'); + setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-100)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-700)'); @@ -127,7 +127,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.TableCell, 'borderColor', lighten(alpha(palette.divider, 1), 0.88)); setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } else { - setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); + setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-300)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-300)'); From 309414f062adc541f29c5b444390e993bd3fff7e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:00:50 +0700 Subject: [PATCH 24/37] fix Chip naming --- packages/mui-material/src/Chip/Chip.js | 2 +- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 85c1502b171856..9596ec57b00fcc 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -232,7 +232,7 @@ const ChipRoot = styled('div', { ...(ownerState.variant === 'outlined' && { backgroundColor: 'transparent', border: theme.vars - ? `1px solid ${theme.vars.palette.Chip.defaultBorderColor}` + ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${ theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700] }`, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 8a79bc91cf3f90..8f625bc5a761de 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -94,7 +94,7 @@ export default function extendTheme(options = {}, ...args) { ]); if (key === 'light') { setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-100)'); - setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-400)'); + setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-400)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-700)'); setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); @@ -128,7 +128,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } else { setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-900)'); - setColor(palette.Chip, 'defaultBorderColor', 'var(--md-palette-grey-700)'); + setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-300)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-300)'); setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); From a2a3ba5965155231473fc0fc75fe2c4d0dd46a9d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:02:27 +0700 Subject: [PATCH 25/37] fix FilledInput nameing --- packages/mui-material/src/FilledInput/FilledInput.js | 12 +++++------- .../src/styles/experimental_extendTheme.js | 12 ++++++------ 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 2e4ec134ebf7a9..a772873cc6b478 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -48,7 +48,7 @@ const FilledInputRoot = styled(InputBaseRoot, { const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'; return { position: 'relative', - backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, borderTopRightRadius: (theme.vars || theme).shape.borderRadius, transition: theme.transitions.create('background-color', { @@ -56,19 +56,17 @@ const FilledInputRoot = styled(InputBaseRoot, { easing: theme.transitions.easing.easeOut, }), '&:hover': { - backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBgColor : hoverBackground, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, }, }, [`&.${filledInputClasses.focused}`]: { - backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bgColor : backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor, }, [`&.${filledInputClasses.disabled}`]: { - backgroundColor: theme.vars - ? theme.vars.palette.FilledInput.disabledBgColor - : disabledBackground, + backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground, }, ...(!ownerState.disableUnderline && { '&:after': { diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 8f625bc5a761de..180ed47620fe32 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -97,9 +97,9 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-400)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-700)'); - setColor(palette.FilledInput, 'bgColor', 'rgba(0, 0, 0, 0.06)'); - setColor(palette.FilledInput, 'hoverBgColor', 'rgba(0, 0, 0, 0.09)'); - setColor(palette.FilledInput, 'disabledBgColor', 'rgba(0, 0, 0, 0.12)'); + setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)'); + setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)'); + setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)'); setColor(palette.LinearProgress, 'primaryBgColor', lighten(palette.primary.main, 0.62)); setColor(palette.LinearProgress, 'secondaryBgColor', lighten(palette.secondary.main, 0.62)); setColor(palette.LinearProgress, 'errorBgColor', lighten(palette.error.main, 0.62)); @@ -131,9 +131,9 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-700)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-300)'); setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-300)'); - setColor(palette.FilledInput, 'bgColor', 'rgba(255, 255, 255, 0.09)'); - setColor(palette.FilledInput, 'hoverBgColor', 'rgba(255, 255, 255, 0.13)'); - setColor(palette.FilledInput, 'disabledBgColor', 'rgba(255, 255, 255, 0.12)'); + setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)'); + setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)'); + setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)'); setColor(palette.LinearProgress, 'primaryBgColor', darken(palette.primary.main, 0.5)); setColor(palette.LinearProgress, 'secondaryBgColor', darken(palette.secondary.main, 0.5)); setColor(palette.LinearProgress, 'errorBgColor', darken(palette.error.main, 0.5)); From 9c853edf0dc76b88f780816f80dd54ae016d9127 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:03:43 +0700 Subject: [PATCH 26/37] fix LinearProgress naming --- .../src/LinearProgress/LinearProgress.js | 2 +- .../src/styles/experimental_extendTheme.js | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index 7a35d0afca002b..76fb1a2b9ba151 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -91,7 +91,7 @@ const getColorShade = (theme, color) => { return 'currentColor'; } if (theme.vars) { - return theme.vars.palette.LinearProgress[`${color}BgColor`]; + return theme.vars.palette.LinearProgress[`${color}Bg`]; } return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 180ed47620fe32..ec426ea8ddb4bc 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -100,12 +100,12 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)'); setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)'); setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)'); - setColor(palette.LinearProgress, 'primaryBgColor', lighten(palette.primary.main, 0.62)); - setColor(palette.LinearProgress, 'secondaryBgColor', lighten(palette.secondary.main, 0.62)); - setColor(palette.LinearProgress, 'errorBgColor', lighten(palette.error.main, 0.62)); - setColor(palette.LinearProgress, 'infoBgColor', lighten(palette.info.main, 0.62)); - setColor(palette.LinearProgress, 'successBgColor', lighten(palette.success.main, 0.62)); - setColor(palette.LinearProgress, 'warningBgColor', lighten(palette.warning.main, 0.62)); + setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62)); + setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62)); + setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62)); + setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62)); + setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62)); + setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62)); setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.11)'); setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); @@ -134,12 +134,12 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)'); setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)'); setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)'); - setColor(palette.LinearProgress, 'primaryBgColor', darken(palette.primary.main, 0.5)); - setColor(palette.LinearProgress, 'secondaryBgColor', darken(palette.secondary.main, 0.5)); - setColor(palette.LinearProgress, 'errorBgColor', darken(palette.error.main, 0.5)); - setColor(palette.LinearProgress, 'infoBgColor', darken(palette.info.main, 0.5)); - setColor(palette.LinearProgress, 'successBgColor', darken(palette.success.main, 0.5)); - setColor(palette.LinearProgress, 'warningBgColor', darken(palette.warning.main, 0.5)); + setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5)); + setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5)); + setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5)); + setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5)); + setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5)); + setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5)); setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.13)'); setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); From f28084d4caa054faac20c13694e2a305d2660e79 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:04:35 +0700 Subject: [PATCH 27/37] fix Skeleton naming --- packages/mui-material/src/Skeleton/Skeleton.js | 2 +- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index dfa577053acecc..9228c7e066ef2a 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -78,7 +78,7 @@ const SkeletonRoot = styled('span', { display: 'block', // Create a "on paper" color with sufficient contrast retaining the color backgroundColor: theme.vars - ? theme.vars.palette.Skeleton.bgColor + ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), height: '1.2em', ...(ownerState.variant === 'text' && { diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index ec426ea8ddb4bc..5a2e8dd63330c3 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -106,7 +106,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62)); setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62)); setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62)); - setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.11)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--md-palette-text-primary) / 0.11)'); setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); @@ -140,7 +140,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5)); setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5)); setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5)); - setColor(palette.Skeleton, 'bgColor', 'rgba(var(--md-palette-text-primary) / 0.13)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--md-palette-text-primary) / 0.13)'); setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); From 6ae67eac2acd72c19572dc870ed4375ddc611afd Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:06:02 +0700 Subject: [PATCH 28/37] fix SnackbarContent naming --- packages/mui-material/src/SnackbarContent/SnackbarContent.js | 2 +- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.js b/packages/mui-material/src/SnackbarContent/SnackbarContent.js index 35b9b21e8fb095..d2526323b8120c 100644 --- a/packages/mui-material/src/SnackbarContent/SnackbarContent.js +++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.js @@ -33,7 +33,7 @@ const SnackbarContentRoot = styled(Paper, { color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor), - backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bgColor : backgroundColor, + backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor, display: 'flex', alignItems: 'center', flexWrap: 'wrap', diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 5a2e8dd63330c3..daf824026d285c 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -113,7 +113,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62)); setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); - setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.8)); + setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8)); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-400)'); setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-400)'); setColor(palette.Switch, 'defaultColor', 'var(--md-palette-common-white)'); @@ -147,7 +147,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5)); setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); - setColor(palette.SnackbarContent, 'bgColor', emphasize(palette.background.default, 0.98)); + setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98)); setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-600)'); setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-600)'); From 7aa842427e1cbf01b92c9473d328634709d8a5c8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:07:30 +0700 Subject: [PATCH 29/37] fix Step naming --- packages/mui-material/src/StepConnector/StepConnector.js | 2 +- packages/mui-material/src/StepContent/StepContent.js | 2 +- .../mui-material/src/styles/experimental_extendTheme.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/StepConnector/StepConnector.js b/packages/mui-material/src/StepConnector/StepConnector.js index b5a5e72b94064d..e849dba428e9f1 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.js +++ b/packages/mui-material/src/StepConnector/StepConnector.js @@ -66,7 +66,7 @@ const StepConnectorLine = styled('span', { theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]; return { display: 'block', - borderColor: theme.vars ? theme.vars.palette.StepConnector?.borderColor : borderColor, + borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor, ...(ownerState.orientation === 'horizontal' && { borderTopStyle: 'solid', borderTopWidth: 1, diff --git a/packages/mui-material/src/StepContent/StepContent.js b/packages/mui-material/src/StepContent/StepContent.js index 2b854dfc370c45..5d867ed0fc0fee 100644 --- a/packages/mui-material/src/StepContent/StepContent.js +++ b/packages/mui-material/src/StepContent/StepContent.js @@ -30,7 +30,7 @@ const StepContentRoot = styled('div', { paddingLeft: 8 + 12, // margin + half icon paddingRight: 8, borderLeft: theme.vars - ? `1px solid ${theme.vars.palette.StepContent.borderColor}` + ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${ theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] }`, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index daf824026d285c..2aa0f14d1e3bfe 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -114,8 +114,8 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8)); - setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-400)'); - setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-400)'); + setColor(palette.StepConnector, 'border', 'var(--md-palette-grey-400)'); + setColor(palette.StepContent, 'border', 'var(--md-palette-grey-400)'); setColor(palette.Switch, 'defaultColor', 'var(--md-palette-common-white)'); setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-100)'); setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62)); @@ -149,8 +149,8 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98)); setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); - setColor(palette.StepConnector, 'borderColor', 'var(--md-palette-grey-600)'); - setColor(palette.StepContent, 'borderColor', 'var(--md-palette-grey-600)'); + setColor(palette.StepConnector, 'border', 'var(--md-palette-grey-600)'); + setColor(palette.StepContent, 'border', 'var(--md-palette-grey-600)'); setColor(palette.Switch, 'defaultColor', 'var(--md-palette-grey-300)'); setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-600)'); setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55)); From 95bf84bd969a30ef5b539c100f16c3f881672ba3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:08:54 +0700 Subject: [PATCH 30/37] fix table cell naming --- packages/mui-material/src/TableCell/TableCell.js | 2 +- packages/mui-material/src/styles/experimental_extendTheme.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js index 64c0052d9293ad..0987a29d8852ef 100644 --- a/packages/mui-material/src/TableCell/TableCell.js +++ b/packages/mui-material/src/TableCell/TableCell.js @@ -49,7 +49,7 @@ const TableCellRoot = styled('td', { // Workaround for a rendering bug with spanned columns in Chrome 62.0. // Removes the alpha (sets it to 1), and lightens or darkens the theme color. borderBottom: theme.vars - ? `1px solid ${theme.vars.palette.TableCell.borderColor}` + ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid ${ theme.palette.mode === 'light' diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 2aa0f14d1e3bfe..8df5f84355906e 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -124,7 +124,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62)); setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); - setColor(palette.TableCell, 'borderColor', lighten(alpha(palette.divider, 1), 0.88)); + setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88)); setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } else { setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-900)'); @@ -148,7 +148,6 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98)); - setColor(palette.AppBar, 'defaultBgColor', 'var(--md-palette-grey-900)'); setColor(palette.StepConnector, 'border', 'var(--md-palette-grey-600)'); setColor(palette.StepContent, 'border', 'var(--md-palette-grey-600)'); setColor(palette.Switch, 'defaultColor', 'var(--md-palette-grey-300)'); @@ -159,7 +158,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55)); setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); - setColor(palette.TableCell, 'borderColor', darken(alpha(palette.divider, 1), 0.68)); + setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68)); setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); } From e5f75926b708a3583fe5e64ca38de8646ef2219c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:10:15 +0700 Subject: [PATCH 31/37] fix Tooltip naming --- packages/mui-material/src/Tooltip/Tooltip.js | 2 +- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 5df8a8a288f538..86129bd76aebd6 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -119,7 +119,7 @@ const TooltipTooltip = styled('div', { }, })(({ theme, ownerState }) => ({ backgroundColor: theme.vars - ? theme.vars.palette.Tooltip.bgColor + ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92), borderRadius: (theme.vars || theme).shape.borderRadius, color: (theme.vars || theme).palette.common.white, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 8df5f84355906e..7553c283677f35 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -125,7 +125,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62)); setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62)); setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88)); - setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); + setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } else { setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-900)'); setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-700)'); @@ -159,7 +159,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55)); setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55)); setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68)); - setColor(palette.Tooltip, 'bgColor', alpha(palette.grey[700], 0.92)); + setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } palette.common.backgroundChannel = colorChannel(palette.common.background); From 9f2d7cf50aa2a00945f6522dc407abfb1a192094 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:13:09 +0700 Subject: [PATCH 32/37] fix opacity placholder naming --- packages/mui-material/src/InputBase/InputBase.js | 4 ++-- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 5df9cf7a6b5a66..c3edc6ae0bbee2 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -135,7 +135,7 @@ export const InputBaseComponent = styled('input', { color: 'currentColor', ...(theme.vars ? { - opacity: theme.vars.opacity.placeholder, + opacity: theme.vars.opacity.inputPlaceholder, } : { opacity: light ? 0.42 : 0.5, @@ -151,7 +151,7 @@ export const InputBaseComponent = styled('input', { const placeholderVisible = theme.vars ? { - opacity: theme.vars.opacity.placeholder, + opacity: theme.vars.opacity.inputPlaceholder, } : { opacity: light ? 0.42 : 0.5, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 7553c283677f35..4d525d19b3117e 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -42,7 +42,7 @@ export default function extendTheme(options = {}, ...args) { ...colorSchemesInput.light, palette: lightPalette, opacity: { - placeholder: 0.42, + inputPlaceholder: 0.42, inputTouchBottomLine: 0.42, switchTrackDisabled: 0.12, switchTrack: 0.38, @@ -54,7 +54,7 @@ export default function extendTheme(options = {}, ...args) { ...colorSchemesInput.dark, palette: darkPalette, opacity: { - placeholder: 0.5, + inputPlaceholder: 0.5, inputTouchBottomLine: 0.7, switchTrackDisabled: 0.2, switchTrack: 0.3, From af6c851829c8655ed2a2d91cc601b220ed8303d8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:19:40 +0700 Subject: [PATCH 33/37] fix tests --- .../mui-material/src/styles/CssVarsProvider.test.js | 2 +- .../src/styles/experimental_extendTheme.test.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index a79f42d40df0fc..31288cf835b1e9 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -199,7 +199,7 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('opacity').textContent).to.equal( JSON.stringify({ - placeholder: 'var(--md-opacity-placeholder)', + inputPlaceholder: 'var(--md-opacity-inputPlaceholder)', inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', switchTrackDisabled: 'var(--md-opacity-switchTrackDisabled)', switchTrack: 'var(--md-opacity-switchTrack)', diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index c598a20b1781e4..a0c27dd65e8d13 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -202,13 +202,13 @@ describe('experimental_extendTheme', () => { it('should provide the default opacities', () => { const theme = extendTheme(); expect(theme.colorSchemes.light.opacity).to.deep.equal({ - placeholder: 0.42, + inputPlaceholder: 0.42, inputTouchBottomLine: 0.42, switchTrackDisabled: 0.12, switchTrack: 0.38, }); expect(theme.colorSchemes.dark.opacity).to.deep.equal({ - placeholder: 0.5, + inputPlaceholder: 0.5, inputTouchBottomLine: 0.7, switchTrackDisabled: 0.2, switchTrack: 0.3, @@ -220,22 +220,22 @@ describe('experimental_extendTheme', () => { colorSchemes: { light: { opacity: { - placeholder: 1, + inputPlaceholder: 1, }, }, dark: { opacity: { - placeholder: 0.2, + inputPlaceholder: 0.2, }, }, }, }); expect(theme.colorSchemes.light.opacity).to.deep.include({ - placeholder: 1, + inputPlaceholder: 1, inputTouchBottomLine: 0.42, }); expect(theme.colorSchemes.dark.opacity).to.deep.include({ - placeholder: 0.2, + inputPlaceholder: 0.2, inputTouchBottomLine: 0.7, }); }); From 989d1cae38ca7ace0c4abbd7477b5161232dbaf2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:20:06 +0700 Subject: [PATCH 34/37] rename --md to --mui --- .../CssVariablesCustomization.js | 6 +- .../css-variables-custom-theme.tsx | 6 +- .../src/styles/CssVarsProvider.js | 2 +- .../src/styles/CssVarsProvider.test.js | 162 +++++++++--------- .../src/styles/experimental_extendTheme.js | 36 ++-- packages/mui-system/src/Box/Box.spec.tsx | 12 +- 6 files changed, 112 insertions(+), 112 deletions(-) diff --git a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js b/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js index a66e39a6062202..35075805100766 100644 --- a/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js +++ b/docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js @@ -17,9 +17,9 @@ const CustomButton = styled(Button)(({ theme }) => ({ // Custom button using CSS variables const CssVarsCustomButton = styled(Button)({ - '--md-palette-primary-main': '#FF0000', - '--md-palette-primary-dark': '#8B0000', - '--md-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values + '--mui-palette-primary-main': '#FF0000', + '--mui-palette-primary-dark': '#8B0000', + '--mui-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values }); const useEnhancedEffect = diff --git a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx index 473fce9917b517..165c198fb21d07 100644 --- a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx +++ b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx @@ -15,9 +15,9 @@ 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', + '--mui-palette-primary-main': '#FF0000', + '--mui-palette-primary-mainChannel': '255 0 0', + '--mui-palette-primary-dark': '#8b0000', }; const ColorSchemePicker = () => { diff --git a/packages/mui-material/src/styles/CssVarsProvider.js b/packages/mui-material/src/styles/CssVarsProvider.js index 05da2901c7f5bd..b1708765bd6b89 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.js +++ b/packages/mui-material/src/styles/CssVarsProvider.js @@ -18,7 +18,7 @@ const { light: 'light', dark: 'dark', }, - prefix: 'md', + prefix: 'mui', resolveTheme: (theme) => { const newTheme = { ...theme, diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 31288cf835b1e9..a796f1b7daa8fb 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -62,121 +62,121 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('palette-primary').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-primary-main)', - light: 'var(--md-palette-primary-light)', - dark: 'var(--md-palette-primary-dark)', - contrastText: 'var(--md-palette-primary-contrastText)', - mainChannel: 'var(--md-palette-primary-mainChannel)', - lightChannel: 'var(--md-palette-primary-lightChannel)', - darkChannel: 'var(--md-palette-primary-darkChannel)', - contrastTextChannel: 'var(--md-palette-primary-contrastTextChannel)', + main: 'var(--mui-palette-primary-main)', + light: 'var(--mui-palette-primary-light)', + dark: 'var(--mui-palette-primary-dark)', + contrastText: 'var(--mui-palette-primary-contrastText)', + mainChannel: 'var(--mui-palette-primary-mainChannel)', + lightChannel: 'var(--mui-palette-primary-lightChannel)', + darkChannel: 'var(--mui-palette-primary-darkChannel)', + contrastTextChannel: 'var(--mui-palette-primary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-secondary').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-secondary-main)', - light: 'var(--md-palette-secondary-light)', - dark: 'var(--md-palette-secondary-dark)', - contrastText: 'var(--md-palette-secondary-contrastText)', - mainChannel: 'var(--md-palette-secondary-mainChannel)', - lightChannel: 'var(--md-palette-secondary-lightChannel)', - darkChannel: 'var(--md-palette-secondary-darkChannel)', - contrastTextChannel: 'var(--md-palette-secondary-contrastTextChannel)', + main: 'var(--mui-palette-secondary-main)', + light: 'var(--mui-palette-secondary-light)', + dark: 'var(--mui-palette-secondary-dark)', + contrastText: 'var(--mui-palette-secondary-contrastText)', + mainChannel: 'var(--mui-palette-secondary-mainChannel)', + lightChannel: 'var(--mui-palette-secondary-lightChannel)', + darkChannel: 'var(--mui-palette-secondary-darkChannel)', + contrastTextChannel: 'var(--mui-palette-secondary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-error').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-error-main)', - light: 'var(--md-palette-error-light)', - dark: 'var(--md-palette-error-dark)', - contrastText: 'var(--md-palette-error-contrastText)', - mainChannel: 'var(--md-palette-error-mainChannel)', - lightChannel: 'var(--md-palette-error-lightChannel)', - darkChannel: 'var(--md-palette-error-darkChannel)', - contrastTextChannel: 'var(--md-palette-error-contrastTextChannel)', + main: 'var(--mui-palette-error-main)', + light: 'var(--mui-palette-error-light)', + dark: 'var(--mui-palette-error-dark)', + contrastText: 'var(--mui-palette-error-contrastText)', + mainChannel: 'var(--mui-palette-error-mainChannel)', + lightChannel: 'var(--mui-palette-error-lightChannel)', + darkChannel: 'var(--mui-palette-error-darkChannel)', + contrastTextChannel: 'var(--mui-palette-error-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-warning').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-warning-main)', - light: 'var(--md-palette-warning-light)', - dark: 'var(--md-palette-warning-dark)', - contrastText: 'var(--md-palette-warning-contrastText)', - mainChannel: 'var(--md-palette-warning-mainChannel)', - lightChannel: 'var(--md-palette-warning-lightChannel)', - darkChannel: 'var(--md-palette-warning-darkChannel)', - contrastTextChannel: 'var(--md-palette-warning-contrastTextChannel)', + main: 'var(--mui-palette-warning-main)', + light: 'var(--mui-palette-warning-light)', + dark: 'var(--mui-palette-warning-dark)', + contrastText: 'var(--mui-palette-warning-contrastText)', + mainChannel: 'var(--mui-palette-warning-mainChannel)', + lightChannel: 'var(--mui-palette-warning-lightChannel)', + darkChannel: 'var(--mui-palette-warning-darkChannel)', + contrastTextChannel: 'var(--mui-palette-warning-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-info').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-info-main)', - light: 'var(--md-palette-info-light)', - dark: 'var(--md-palette-info-dark)', - contrastText: 'var(--md-palette-info-contrastText)', - mainChannel: 'var(--md-palette-info-mainChannel)', - lightChannel: 'var(--md-palette-info-lightChannel)', - darkChannel: 'var(--md-palette-info-darkChannel)', - contrastTextChannel: 'var(--md-palette-info-contrastTextChannel)', + main: 'var(--mui-palette-info-main)', + light: 'var(--mui-palette-info-light)', + dark: 'var(--mui-palette-info-dark)', + contrastText: 'var(--mui-palette-info-contrastText)', + mainChannel: 'var(--mui-palette-info-mainChannel)', + lightChannel: 'var(--mui-palette-info-lightChannel)', + darkChannel: 'var(--mui-palette-info-darkChannel)', + contrastTextChannel: 'var(--mui-palette-info-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-success').textContent).to.equal( JSON.stringify({ - main: 'var(--md-palette-success-main)', - light: 'var(--md-palette-success-light)', - dark: 'var(--md-palette-success-dark)', - contrastText: 'var(--md-palette-success-contrastText)', - mainChannel: 'var(--md-palette-success-mainChannel)', - lightChannel: 'var(--md-palette-success-lightChannel)', - darkChannel: 'var(--md-palette-success-darkChannel)', - contrastTextChannel: 'var(--md-palette-success-contrastTextChannel)', + main: 'var(--mui-palette-success-main)', + light: 'var(--mui-palette-success-light)', + dark: 'var(--mui-palette-success-dark)', + contrastText: 'var(--mui-palette-success-contrastText)', + mainChannel: 'var(--mui-palette-success-mainChannel)', + lightChannel: 'var(--mui-palette-success-lightChannel)', + darkChannel: 'var(--mui-palette-success-darkChannel)', + contrastTextChannel: 'var(--mui-palette-success-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-text').textContent).to.equal( JSON.stringify({ - primary: 'var(--md-palette-text-primary)', - secondary: 'var(--md-palette-text-secondary)', - disabled: 'var(--md-palette-text-disabled)', - primaryChannel: 'var(--md-palette-text-primaryChannel)', - secondaryChannel: 'var(--md-palette-text-secondaryChannel)', - icon: 'var(--md-palette-text-icon)', + primary: 'var(--mui-palette-text-primary)', + secondary: 'var(--mui-palette-text-secondary)', + disabled: 'var(--mui-palette-text-disabled)', + primaryChannel: 'var(--mui-palette-text-primaryChannel)', + secondaryChannel: 'var(--mui-palette-text-secondaryChannel)', + icon: 'var(--mui-palette-text-icon)', }), ); expect(screen.getByTestId('palette-divider').textContent).to.equal( - '"var(--md-palette-divider)"', + '"var(--mui-palette-divider)"', ); expect(screen.getByTestId('palette-background').textContent).to.equal( JSON.stringify({ - paper: 'var(--md-palette-background-paper)', - default: 'var(--md-palette-background-default)', + paper: 'var(--mui-palette-background-paper)', + default: 'var(--mui-palette-background-default)', }), ); expect(screen.getByTestId('palette-action').textContent).to.equal( JSON.stringify({ - active: 'var(--md-palette-action-active)', - hover: 'var(--md-palette-action-hover)', - hoverOpacity: 'var(--md-palette-action-hoverOpacity)', - selected: 'var(--md-palette-action-selected)', - selectedOpacity: 'var(--md-palette-action-selectedOpacity)', - disabled: 'var(--md-palette-action-disabled)', - disabledBackground: 'var(--md-palette-action-disabledBackground)', - disabledOpacity: 'var(--md-palette-action-disabledOpacity)', - focus: 'var(--md-palette-action-focus)', - focusOpacity: 'var(--md-palette-action-focusOpacity)', - activatedOpacity: 'var(--md-palette-action-activatedOpacity)', - activeChannel: 'var(--md-palette-action-activeChannel)', - selectedChannel: 'var(--md-palette-action-selectedChannel)', + active: 'var(--mui-palette-action-active)', + hover: 'var(--mui-palette-action-hover)', + hoverOpacity: 'var(--mui-palette-action-hoverOpacity)', + selected: 'var(--mui-palette-action-selected)', + selectedOpacity: 'var(--mui-palette-action-selectedOpacity)', + disabled: 'var(--mui-palette-action-disabled)', + disabledBackground: 'var(--mui-palette-action-disabledBackground)', + disabledOpacity: 'var(--mui-palette-action-disabledOpacity)', + focus: 'var(--mui-palette-action-focus)', + focusOpacity: 'var(--mui-palette-action-focusOpacity)', + activatedOpacity: 'var(--mui-palette-action-activatedOpacity)', + activeChannel: 'var(--mui-palette-action-activeChannel)', + selectedChannel: 'var(--mui-palette-action-selectedChannel)', }), ); expect(screen.getByTestId('palette-common').textContent).to.equal( JSON.stringify({ - black: 'var(--md-palette-common-black)', - white: 'var(--md-palette-common-white)', - background: 'var(--md-palette-common-background)', - onBackground: 'var(--md-palette-common-onBackground)', - backgroundChannel: 'var(--md-palette-common-backgroundChannel)', - onBackgroundChannel: 'var(--md-palette-common-onBackgroundChannel)', + black: 'var(--mui-palette-common-black)', + white: 'var(--mui-palette-common-white)', + background: 'var(--mui-palette-common-background)', + onBackground: 'var(--mui-palette-common-onBackground)', + backgroundChannel: 'var(--mui-palette-common-backgroundChannel)', + onBackgroundChannel: 'var(--mui-palette-common-onBackgroundChannel)', }), ); }); @@ -199,10 +199,10 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('opacity').textContent).to.equal( JSON.stringify({ - inputPlaceholder: 'var(--md-opacity-inputPlaceholder)', - inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', - switchTrackDisabled: 'var(--md-opacity-switchTrackDisabled)', - switchTrack: 'var(--md-opacity-switchTrack)', + inputPlaceholder: 'var(--mui-opacity-inputPlaceholder)', + inputTouchBottomLine: 'var(--mui-opacity-inputTouchBottomLine)', + switchTrackDisabled: 'var(--mui-opacity-switchTrackDisabled)', + switchTrack: 'var(--mui-opacity-switchTrack)', }), ); }); @@ -225,7 +225,7 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('shape').textContent).to.equal( JSON.stringify({ - borderRadius: 'var(--md-shape-borderRadius)', + borderRadius: 'var(--mui-shape-borderRadius)', }), ); }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 4d525d19b3117e..660e11b10aa090 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -93,10 +93,10 @@ export default function extendTheme(options = {}, ...args) { 'Tooltip', ]); if (key === 'light') { - setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-100)'); - setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-400)'); - setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-700)'); - setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-700)'); + setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)'); + setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)'); setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)'); setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)'); setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)'); @@ -106,7 +106,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62)); setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62)); setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62)); - setColor(palette.Skeleton, 'bg', 'rgba(var(--md-palette-text-primary) / 0.11)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primary) / 0.11)'); setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); @@ -114,10 +114,10 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62)); setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62)); setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8)); - setColor(palette.StepConnector, 'border', 'var(--md-palette-grey-400)'); - setColor(palette.StepContent, 'border', 'var(--md-palette-grey-400)'); - setColor(palette.Switch, 'defaultColor', 'var(--md-palette-common-white)'); - setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-100)'); + setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)'); + setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)'); + setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)'); setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62)); setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62)); setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62)); @@ -127,10 +127,10 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88)); setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } else { - setColor(palette.AppBar, 'defaultBg', 'var(--md-palette-grey-900)'); - setColor(palette.Chip, 'defaultBorder', 'var(--md-palette-grey-700)'); - setColor(palette.Chip, 'defaultAvatarColor', 'var(--md-palette-grey-300)'); - setColor(palette.Chip, 'defaultIconColor', 'var(--md-palette-grey-300)'); + setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)'); + setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)'); + setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)'); + setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)'); setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)'); setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)'); setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)'); @@ -140,7 +140,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5)); setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5)); setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5)); - setColor(palette.Skeleton, 'bg', 'rgba(var(--md-palette-text-primary) / 0.13)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primary) / 0.13)'); setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5)); @@ -148,10 +148,10 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5)); setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5)); setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98)); - setColor(palette.StepConnector, 'border', 'var(--md-palette-grey-600)'); - setColor(palette.StepContent, 'border', 'var(--md-palette-grey-600)'); - setColor(palette.Switch, 'defaultColor', 'var(--md-palette-grey-300)'); - setColor(palette.Switch, 'defaultDisabledColor', 'var(--md-palette-grey-600)'); + setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)'); + setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)'); + setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)'); + setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)'); setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55)); setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55)); setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55)); diff --git a/packages/mui-system/src/Box/Box.spec.tsx b/packages/mui-system/src/Box/Box.spec.tsx index 46c29e63048f81..4e81f4bd530ea4 100644 --- a/packages/mui-system/src/Box/Box.spec.tsx +++ b/packages/mui-system/src/Box/Box.spec.tsx @@ -56,22 +56,22 @@ function ThemeCallbackTest() { function CssVariablesWithNestedSelectors() { ({ - '--md-palette-primary-main': '#FF0000', + '--mui-palette-primary-main': '#FF0000', })} />; ({ - '--md-palette-primary-main': '#FF0000', + '--mui-palette-primary-main': '#FF0000', '&:hover': { backgroundColor: theme.palette.primary.main, - '--md-palette-primary-main': (t) => theme.palette.primary.main, - '--md-spacing': (t) => theme.shape.borderRadius, + '--mui-palette-primary-main': (t) => theme.palette.primary.main, + '--mui-spacing': (t) => theme.shape.borderRadius, }, })} />; ; Date: Thu, 16 Jun 2022 14:59:46 +0700 Subject: [PATCH 35/37] fix AppBar enableColorOnDark --- .../pages/experiments/material-ui/app-bar.tsx | 17 ++++ packages/mui-material/src/AppBar/AppBar.js | 77 +++++++++++++------ .../src/styles/experimental_extendTheme.js | 2 + 3 files changed, 74 insertions(+), 22 deletions(-) diff --git a/docs/pages/experiments/material-ui/app-bar.tsx b/docs/pages/experiments/material-ui/app-bar.tsx index a07cdf298427c7..428bb8e74872b9 100644 --- a/docs/pages/experiments/material-ui/app-bar.tsx +++ b/docs/pages/experiments/material-ui/app-bar.tsx @@ -94,6 +94,23 @@ export default function CssVarsTemplate() { + + + + + + + News + + + + diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index a4f447f89af324..f68b30d817521a 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -18,6 +18,10 @@ const useUtilityClasses = (ownerState) => { return composeClasses(slots, getAppBarUtilityClass, classes); }; +// var2 is the fallback. +// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))' +const joinVars = (var1, var2) => `${var1?.replace(')', '')}, ${var2})`; + const AppBarRoot = styled(Paper, { name: 'MuiAppBar', slot: 'Root', @@ -72,32 +76,61 @@ const AppBarRoot = styled(Paper, { ...(ownerState.position === 'relative' && { position: 'relative', }), - ...(ownerState.color === 'default' && { - backgroundColor: theme.vars ? theme.vars.palette.AppBar.defaultBg : backgroundColorDefault, - color: theme.vars - ? theme.vars.palette.text.primary - : theme.palette.getContrastText(backgroundColorDefault), - }), - ...(ownerState.color && - ownerState.color !== 'default' && - ownerState.color !== 'inherit' && - ownerState.color !== 'transparent' && { - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - color: (theme.vars || theme).palette[ownerState.color].contrastText, + ...(!theme.vars && { + ...(ownerState.color === 'default' && { + backgroundColor: backgroundColorDefault, + color: theme.palette.getContrastText(backgroundColorDefault), + }), + ...(ownerState.color && + ownerState.color !== 'default' && + ownerState.color !== 'inherit' && + ownerState.color !== 'transparent' && { + backgroundColor: theme.palette[ownerState.color].main, + color: theme.palette[ownerState.color].contrastText, + }), + ...(ownerState.color === 'inherit' && { + color: 'inherit', + }), + ...(theme.palette.mode === 'dark' && + !ownerState.enableColorOnDark && { + backgroundColor: null, + color: null, + }), + ...(ownerState.color === 'transparent' && { + backgroundColor: 'transparent', + color: 'inherit', + ...(theme.palette.mode === 'dark' && { + backgroundImage: 'none', + }), }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', }), - ...(theme.palette.mode === 'dark' && - !ownerState.enableColorOnDark && { - backgroundColor: null, - color: null, + ...(theme.vars && { + ...(ownerState.color === 'default' && { + '--AppBar-background': ownerState.enableColorOnDark + ? theme.vars.palette.AppBar.defaultBg + : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg), + '--AppBar-color': ownerState.enableColorOnDark + ? theme.vars.palette.text.primary + : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary), }), - ...(ownerState.color === 'transparent' && { - backgroundColor: 'transparent', - color: 'inherit', - ...(theme.palette.mode === 'dark' && { + ...(ownerState.color && + !ownerState.color.match(/^(default|inherit|transparent)$/) && { + '--AppBar-background': ownerState.enableColorOnDark + ? theme.vars.palette[ownerState.color].main + : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main), + '--AppBar-color': ownerState.enableColorOnDark + ? theme.vars.palette[ownerState.color].contrastText + : joinVars( + theme.vars.palette.AppBar.darkColor, + theme.vars.palette[ownerState.color].contrastText, + ), + }), + backgroundColor: 'var(--AppBar-background)', + color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)', + ...(ownerState.color === 'transparent' && { backgroundImage: 'none', + backgroundColor: 'transparent', + color: 'inherit', }), }), }; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 660e11b10aa090..15b6ea81dd6769 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -128,6 +128,8 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92)); } else { setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)'); + setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode + setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)'); setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)'); setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)'); From aca57187a8bd11b85f417e290b7f9e7ee5ee1403 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 16 Jun 2022 15:05:47 +0700 Subject: [PATCH 36/37] fix types --- .../src/styles/createPalette.d.ts | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 44a5ea9dca8d0e..aabaebbd075141 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -122,34 +122,36 @@ export interface PaletteWithChannels { info: PaletteColor & Channels; success: PaletteColor & Channels; grey: Color & { darkChannel: string }; - text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string }; + text: TypeText & { primaryChannel: string; secondaryChannel: string }; divider: TypeDivider; dividerChannel: TypeDivider; - action: TypeAction & { disabledChannel: string; activeChannel: string }; + action: TypeAction & { activeChannel: string; selectedChannel: string }; background: TypeBackground; getContrastText: (background: string) => string; augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor; // component tokens AppBar: { - defaultBgColor: string; + defaultBg: string; + darkBg: string; + darkColor: string; }; Chip: { - defaultBorderColor: string; + defaultBorder: string; defaultAvatarColor: string; defaultIconColor: string; }; FilledInput: { - bgColor: string; - hoverBgColor: string; - disabledBgColor: string; + bg: string; + hoverBg: string; + disabledBg: string; }; LinearProgress: { - primaryBgColor: string; - secondaryBgColor: string; - errorBgColor: string; - infoBgColor: string; - successBgColor: string; - warningBgColor: string; + primaryBg: string; + secondaryBg: string; + errorBg: string; + infoBg: string; + successBg: string; + warningBg: string; }; Slider: { primaryTrack: string; @@ -160,13 +162,13 @@ export interface PaletteWithChannels { warningTrack: string; }; SnackbarContent: { - bgColor: string; + bg: string; }; StepConnector: { - borderColor: string; + border: string; }; StepContent: { - borderColor: string; + border: string; }; Switch: { defaultColor: string; @@ -179,7 +181,10 @@ export interface PaletteWithChannels { warningDisabledColor: string; }; TableCell: { - borderColor: string; + border: string; + }; + Tooltip: { + bg: string; }; } From 44d1e3c96c9e4c668bcebbd3519279d39d53bd54 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 17 Jun 2022 15:22:45 +0700 Subject: [PATCH 37/37] Apply suggestions from code review Co-authored-by: Marija Najdova --- packages/mui-material/src/styles/experimental_extendTheme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 15b6ea81dd6769..d4d87c2e3a7bbc 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -106,7 +106,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62)); setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62)); setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62)); - setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primary) / 0.11)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)'); setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62)); setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62)); setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62)); @@ -142,7 +142,7 @@ export default function extendTheme(options = {}, ...args) { setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5)); setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5)); setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5)); - setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primary) / 0.13)'); + setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)'); setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5)); setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5)); setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));