From 93fb13940c03bf4b9a0bf58c1231aa9c3bb7f61b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 15 Jun 2022 12:20:06 +0700 Subject: [PATCH] rename --md to --mui --- .../CssVariablesCustomization.js | 6 +- .../css-variables-custom-theme.tsx | 6 +- .../src/styles/CssVarsProvider.test.js | 162 +++++++++--------- .../src/styles/experimental_extendTheme.js | 36 ++-- packages/mui-system/src/Box/Box.spec.tsx | 12 +- 5 files changed, 111 insertions(+), 111 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.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, }, })} />; ;