Skip to content

Commit

Permalink
rename --md to --mui
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp committed Jun 15, 2022
1 parent af6c851 commit 93fb139
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 111 deletions.
6 changes: 3 additions & 3 deletions docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js
View file
Expand Up @@ -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 =
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
View file
Expand Up @@ -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 = () => {
Expand Down
162 changes: 81 additions & 81 deletions packages/mui-material/src/styles/CssVarsProvider.test.js
View file
Expand Up @@ -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)',
}),
);
});
Expand All @@ -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)',
}),
);
});
Expand All @@ -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)',
}),
);
});
Expand Down
36 changes: 18 additions & 18 deletions packages/mui-material/src/styles/experimental_extendTheme.js
View file
Expand Up @@ -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)');
Expand All @@ -106,18 +106,18 @@ 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));
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, '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));
Expand All @@ -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)');
Expand All @@ -140,18 +140,18 @@ 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));
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, '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));
Expand Down
12 changes: 6 additions & 6 deletions packages/mui-system/src/Box/Box.spec.tsx
View file
Expand Up @@ -56,30 +56,30 @@ function ThemeCallbackTest() {
function CssVariablesWithNestedSelectors() {
<Box
sx={(theme) => ({
'--md-palette-primary-main': '#FF0000',
'--mui-palette-primary-main': '#FF0000',
})}
/>;
<Box
sx={(theme) => ({
'--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,
},
})}
/>;
<Box
sx={{
'--md-palette-primary-main': '#FF0000',
'--mui-palette-primary-main': '#FF0000',
'&:hover': {
backgroundColor: '#EE0000',
},
}}
/>;
<Box
sx={{
'--md-palette-primary-main': '#FF0000',
'--mui-palette-primary-main': '#FF0000',
'& .foo-bar': {
backgroundColor: '#EE0000',
},
Expand Down

0 comments on commit 93fb139

Please sign in to comment.