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 8139ac8db30edc..473fce9917b517 100644 --- a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx +++ b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx @@ -9,8 +9,17 @@ import Sun from '@mui/icons-material/LightMode'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import Box from '@mui/material/Box'; +import Input from '@mui/material/Input'; import { teal, deepOrange, orange, cyan } from '@mui/material/colors'; +const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success']; + +const overrideCssVariables = { + '--md-palette-primary-main': '#FF0000', + '--md-palette-primary-mainChannel': '255 0 0', + '--md-palette-primary-dark': '#8b0000', +}; + const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); const [mounted, setMounted] = React.useState(false); @@ -62,131 +71,55 @@ export default function Page() { + {COLORS.map((color: any) => ( + + + + + + ))} + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {COLORS.map((color: any) => ( + + + + + + ))} + + + :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > + {COLORS.map((color: any) => ( + + ))} + diff --git a/docs/pages/experiments/material-ui/css-variables.tsx b/docs/pages/experiments/material-ui/css-variables.tsx index c91ca0b73edefb..a258c8053108f7 100644 --- a/docs/pages/experiments/material-ui/css-variables.tsx +++ b/docs/pages/experiments/material-ui/css-variables.tsx @@ -7,6 +7,9 @@ import Moon from '@mui/icons-material/DarkMode'; import Sun from '@mui/icons-material/LightMode'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; +import Input from '@mui/material/Input'; + +const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success']; const ColorSchemePicker = () => { const { mode, setMode } = useColorScheme(); @@ -41,55 +44,33 @@ export default function Page() { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + {COLORS.map((color: any) => ( + + + + + + ))} + + + + :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > + {COLORS.map((color: any) => ( + + ))} diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 7ee626582a4792..ccec45f3f3255a 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -43,7 +43,10 @@ const InputRoot = styled(InputBaseRoot, { }, })(({ theme, ownerState }) => { const light = theme.palette.mode === 'light'; - const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; + let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; + if (theme.vars) { + bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`; + } return { position: 'relative', ...(ownerState.formControl && { @@ -53,7 +56,7 @@ const InputRoot = styled(InputBaseRoot, { }), ...(!ownerState.disableUnderline && { '&:after': { - borderBottom: `2px solid ${theme.palette[ownerState.color].main}`, + borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`, left: 0, bottom: 0, // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 @@ -73,7 +76,7 @@ const InputRoot = styled(InputBaseRoot, { transform: 'scaleX(1) translateX(0)', }, [`&.${inputClasses.error}:after`]: { - borderBottomColor: theme.palette.error.main, + borderBottomColor: (theme.vars || theme).palette.error.main, transform: 'scaleX(1)', // error is always underlined in red }, '&:before': { @@ -90,7 +93,7 @@ const InputRoot = styled(InputBaseRoot, { pointerEvents: 'none', // Transparent to the hover style. }, [`&:hover:not(.${inputClasses.disabled}):before`]: { - borderBottom: `2px solid ${theme.palette.text.primary}`, + borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`, // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { borderBottom: `1px solid ${bottomLineColor}`, diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 59580d84921e13..5df9cf7a6b5a66 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -103,7 +103,7 @@ export const InputBaseRoot = styled('div', { overridesResolver: rootOverridesResolver, })(({ theme, ownerState }) => ({ ...theme.typography.body1, - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, lineHeight: '1.4375em', // 23px boxSizing: 'border-box', // Prevent padding issue with fullWidth. position: 'relative', @@ -111,7 +111,7 @@ export const InputBaseRoot = styled('div', { display: 'inline-flex', alignItems: 'center', [`&.${inputBaseClasses.disabled}`]: { - color: theme.palette.text.disabled, + color: (theme.vars || theme).palette.text.disabled, cursor: 'default', }, ...(ownerState.multiline && { @@ -133,7 +133,13 @@ export const InputBaseComponent = styled('input', { const light = theme.palette.mode === 'light'; const placeholder = { color: 'currentColor', - opacity: light ? 0.42 : 0.5, + ...(theme.vars + ? { + opacity: theme.vars.opacity.placeholder, + } + : { + opacity: light ? 0.42 : 0.5, + }), transition: theme.transitions.create('opacity', { duration: theme.transitions.duration.shorter, }), @@ -143,9 +149,13 @@ export const InputBaseComponent = styled('input', { opacity: '0 !important', }; - const placeholderVisible = { - opacity: light ? 0.42 : 0.5, - }; + const placeholderVisible = theme.vars + ? { + opacity: theme.vars.opacity.placeholder, + } + : { + opacity: light ? 0.42 : 0.5, + }; return { font: 'inherit', @@ -192,7 +202,7 @@ export const InputBaseComponent = styled('input', { }, [`&.${inputBaseClasses.disabled}`]: { opacity: 1, // Reset iOS opacity - WebkitTextFillColor: theme.palette.text.disabled, // Fix opacity Safari bug + WebkitTextFillColor: (theme.vars || theme).palette.text.disabled, // Fix opacity Safari bug }, '&:-webkit-autofill': { animationDuration: '5000s', diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js index 840c038afe19c2..20284eb60f579f 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.test.js +++ b/packages/mui-material/src/styles/CssVarsProvider.test.js @@ -48,6 +48,7 @@ describe('[Material UI] CssVarsProvider', () => {
{JSON.stringify(theme.vars.palette.divider)}
{JSON.stringify(theme.vars.palette.action)}
+
{JSON.stringify(theme.vars.palette.common)}
); }; @@ -67,6 +68,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-primary-mainChannel)', lightChannel: 'var(--md-palette-primary-lightChannel)', darkChannel: 'var(--md-palette-primary-darkChannel)', + contrastTextChannel: 'var(--md-palette-primary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-secondary').textContent).to.equal( @@ -78,6 +80,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-secondary-mainChannel)', lightChannel: 'var(--md-palette-secondary-lightChannel)', darkChannel: 'var(--md-palette-secondary-darkChannel)', + contrastTextChannel: 'var(--md-palette-secondary-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-error').textContent).to.equal( @@ -89,6 +92,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-error-mainChannel)', lightChannel: 'var(--md-palette-error-lightChannel)', darkChannel: 'var(--md-palette-error-darkChannel)', + contrastTextChannel: 'var(--md-palette-error-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-warning').textContent).to.equal( @@ -100,6 +104,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-warning-mainChannel)', lightChannel: 'var(--md-palette-warning-lightChannel)', darkChannel: 'var(--md-palette-warning-darkChannel)', + contrastTextChannel: 'var(--md-palette-warning-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-info').textContent).to.equal( @@ -111,6 +116,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-info-mainChannel)', lightChannel: 'var(--md-palette-info-lightChannel)', darkChannel: 'var(--md-palette-info-darkChannel)', + contrastTextChannel: 'var(--md-palette-info-contrastTextChannel)', }), ); expect(screen.getByTestId('palette-success').textContent).to.equal( @@ -122,6 +128,7 @@ describe('[Material UI] CssVarsProvider', () => { mainChannel: 'var(--md-palette-success-mainChannel)', lightChannel: 'var(--md-palette-success-lightChannel)', darkChannel: 'var(--md-palette-success-darkChannel)', + contrastTextChannel: 'var(--md-palette-success-contrastTextChannel)', }), ); @@ -132,7 +139,6 @@ describe('[Material UI] CssVarsProvider', () => { disabled: 'var(--md-palette-text-disabled)', primaryChannel: 'var(--md-palette-text-primaryChannel)', secondaryChannel: 'var(--md-palette-text-secondaryChannel)', - disabledChannel: 'var(--md-palette-text-disabledChannel)', icon: 'var(--md-palette-text-icon)', }), ); @@ -158,7 +164,16 @@ describe('[Material UI] CssVarsProvider', () => { focus: 'var(--md-palette-action-focus)', focusOpacity: 'var(--md-palette-action-focusOpacity)', activatedOpacity: 'var(--md-palette-action-activatedOpacity)', - disabledChannel: 'var(--md-palette-action-disabledChannel)', + }), + ); + 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)', }), ); }); @@ -181,11 +196,8 @@ describe('[Material UI] CssVarsProvider', () => { expect(screen.getByTestId('opacity').textContent).to.equal( JSON.stringify({ - active: 'var(--md-opacity-active)', - hover: 'var(--md-opacity-hover)', - selected: 'var(--md-opacity-selected)', - disabled: 'var(--md-opacity-disabled)', - focus: 'var(--md-opacity-focus)', + placeholder: 'var(--md-opacity-placeholder)', + inputTouchBottomLine: 'var(--md-opacity-inputTouchBottomLine)', }), ); }); diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts index 95b4a45df13970..03b29c06371dde 100644 --- a/packages/mui-material/src/styles/createPalette.d.ts +++ b/packages/mui-material/src/styles/createPalette.d.ts @@ -102,10 +102,16 @@ export interface Channels { mainChannel: string; lightChannel: string; darkChannel: string; + contrastTextChannel: string; } export interface PaletteWithChannels { - common: CommonColors; + common: CommonColors & { + background: string; + onBackground: string; + backgroundChannel: string; + onBackgroundChannel: string; + }; mode: PaletteMode; contrastThreshold: number; tonalOffset: PaletteTonalOffset; diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js index a36f716d733aa0..775ee2e55d14e0 100644 --- a/packages/mui-material/src/styles/createPalette.js +++ b/packages/mui-material/src/styles/createPalette.js @@ -272,7 +272,7 @@ export default function createPalette(palette) { const paletteOutput = deepmerge( { // A collection of common colors. - common, + common: { ...common }, // prevent mutable object. // The palette mode, can be light or dark. mode, // The colors used to represent primary interface elements for a user. diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index 129d9772311670..9c456311689180 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -34,41 +34,38 @@ export type ExtendedColorScheme = OverridableStringUnion { mixins?: MixinsOptions; components?: Components; - // palette?: PaletteOptions; - colorSchemes?: Record; + colorSchemes?: Record< + SupportedColorScheme, + { + palette?: PaletteOptions; + opacity?: Partial; + } + >; shadows?: Shadows; transitions?: TransitionsOptions; typography?: TypographyOptions | ((palette: Palette) => TypographyOptions); zIndex?: ZIndexOptions; unstable_strictMode?: boolean; - opacity?: { - active?: number; - hover?: number; - selected?: number; - disabled?: number; - focus?: number; - }; } interface BaseTheme extends SystemTheme { mixins: Mixins; palette: Palette; + opacity: Opacity; shadows: Shadows; transitions: Transitions; typography: Typography; zIndex: ZIndex; unstable_strictMode?: boolean; colorSchemes: Record; - opacity: { - active: number; - hover: number; - selected: number; - disabled: number; - focus: number; - }; } // shut off automatic exporting for the `BaseTheme` above diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index f30c36e74fe0e8..d2b8636727c9de 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -1,21 +1,11 @@ import { deepmerge } from '@mui/utils'; import { colorChannel } from '@mui/system'; import createThemeWithoutVars from './createTheme'; -import createPalette from './createPalette'; -export const defaultOpacity = { - active: 0.54, - hover: 0.04, - selected: 0.08, - disabled: 0.26, - focus: 0.12, -}; +export default function extendTheme(options = {}, ...args) { + const { colorSchemes: colorSchemesInput = {}, ...input } = options; -function createTheme(options = {}, ...args) { - const { colorSchemes: colorSchemesInput = {}, opacity: opacityInput = {}, ...input } = options; - - // eslint-disable-next-line prefer-const - let { palette: lightPalette, ...muiTheme } = createThemeWithoutVars({ + const { palette: lightPalette, ...muiTheme } = createThemeWithoutVars({ ...input, ...(colorSchemesInput.light && { palette: colorSchemesInput.light?.palette }), }); @@ -23,17 +13,50 @@ function createTheme(options = {}, ...args) { palette: { mode: 'dark', ...colorSchemesInput.dark?.palette }, }); - colorSchemesInput.light = { palette: lightPalette }; - colorSchemesInput.dark = { palette: darkPalette }; + let theme = { + ...muiTheme, + colorSchemes: { + ...colorSchemesInput, + light: { + ...colorSchemesInput.light, + palette: lightPalette, + opacity: { + placeholder: 0.42, + inputTouchBottomLine: 0.42, + ...colorSchemesInput.light?.opacity, + }, + }, + dark: { + ...colorSchemesInput.dark, + palette: darkPalette, + opacity: { + placeholder: 0.5, + inputTouchBottomLine: 0.7, + ...colorSchemesInput.dark?.opacity, + }, + }, + }, + }; - const colorSchemes = {}; + Object.keys(theme.colorSchemes).forEach((key) => { + const palette = theme.colorSchemes[key].palette; - Object.keys(colorSchemesInput).forEach((key) => { - const palette = createPalette(colorSchemesInput[key].palette); + // attach black & white channels to common node + if (key === 'dark') { + palette.common.background = palette.common.background || '#000'; + palette.common.onBackground = palette.common.onBackground || '#fff'; + // console.log(palette.common); + } else { + palette.common.background = palette.common.background || '#fff'; + palette.common.onBackground = palette.common.onBackground || '#000'; + } + palette.common.backgroundChannel = colorChannel(palette.common.background); + palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground); Object.keys(palette).forEach((color) => { const colors = palette[color]; + // Color palettes: primary, secondary, error, info, success, and warning if (colors.main) { palette[color].mainChannel = colorChannel(colors.main); } @@ -43,31 +66,21 @@ function createTheme(options = {}, ...args) { if (colors.dark) { palette[color].darkChannel = colorChannel(colors.dark); } + if (colors.contrastText) { + palette[color].contrastTextChannel = colorChannel(colors.contrastText); + } + + // Text colors: text.primary, text.secondary if (colors.primary) { palette[color].primaryChannel = colorChannel(colors.primary); } if (colors.secondary) { palette[color].secondaryChannel = colorChannel(colors.secondary); } - if (colors.disabled) { - palette[color].disabledChannel = colorChannel(colors.disabled); - } }); - - colorSchemes[key] = { palette }; }); - const opacity = { - ...defaultOpacity, - ...opacityInput, - }; - - muiTheme.colorSchemes = colorSchemes; - muiTheme.opacity = opacity; + theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme); - muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); - - return muiTheme; + return theme; } - -export default createTheme; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 6d05fa2ddd1436..79eb7f1f03e602 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -4,7 +4,7 @@ import { createRenderer } from 'test/utils'; import Button from '@mui/material/Button'; import { Experimental_CssVarsProvider as CssVarsProvider, - experimental_extendTheme as createTheme, + experimental_extendTheme as extendTheme, } from '@mui/material/styles'; import { deepOrange, green } from '@mui/material/colors'; @@ -34,13 +34,13 @@ describe('experimental_extendTheme', () => { }); it('should have a colorSchemes', () => { - const theme = createTheme(); - expect(typeof createTheme).to.equal('function'); + const theme = extendTheme(); + expect(typeof extendTheme).to.equal('function'); expect(typeof theme.colorSchemes).to.equal('object'); }); it('should have the custom color schemes', () => { - const theme = createTheme({ + const theme = extendTheme({ colorSchemes: { light: { palette: { primary: { main: deepOrange[500] }, secondary: { main: green.A400 } }, @@ -52,36 +52,66 @@ describe('experimental_extendTheme', () => { }); it('should generate color channels', () => { - const theme = createTheme(); + const theme = extendTheme(); expect(theme.colorSchemes.dark.palette.primary.mainChannel).to.equal('144 202 249'); expect(theme.colorSchemes.dark.palette.primary.darkChannel).to.equal('66 165 245'); expect(theme.colorSchemes.dark.palette.primary.lightChannel).to.equal('227 242 253'); + expect(theme.colorSchemes.dark.palette.primary.contrastTextChannel).to.equal('0 0 0'); expect(theme.colorSchemes.light.palette.primary.mainChannel).to.equal('25 118 210'); expect(theme.colorSchemes.light.palette.primary.darkChannel).to.equal('21 101 192'); expect(theme.colorSchemes.light.palette.primary.lightChannel).to.equal('66 165 245'); + expect(theme.colorSchemes.light.palette.primary.contrastTextChannel).to.equal('255 255 255'); expect(theme.colorSchemes.dark.palette.secondary.mainChannel).to.equal('206 147 216'); expect(theme.colorSchemes.dark.palette.secondary.darkChannel).to.equal('171 71 188'); expect(theme.colorSchemes.dark.palette.secondary.lightChannel).to.equal('243 229 245'); + expect(theme.colorSchemes.dark.palette.secondary.contrastTextChannel).to.equal('0 0 0'); expect(theme.colorSchemes.light.palette.secondary.mainChannel).to.equal('156 39 176'); expect(theme.colorSchemes.light.palette.secondary.darkChannel).to.equal('123 31 162'); expect(theme.colorSchemes.light.palette.secondary.lightChannel).to.equal('186 104 200'); + expect(theme.colorSchemes.light.palette.secondary.contrastTextChannel).to.equal('255 255 255'); expect(theme.colorSchemes.dark.palette.text.primaryChannel).to.equal('255 255 255'); expect(theme.colorSchemes.dark.palette.text.secondaryChannel).to.equal('255 255 255'); - expect(theme.colorSchemes.dark.palette.text.disabledChannel).to.equal('255 255 255'); - expect(theme.colorSchemes.dark.palette.action.disabledChannel).to.equal('255 255 255'); expect(theme.colorSchemes.light.palette.text.primaryChannel).to.equal('0 0 0'); expect(theme.colorSchemes.light.palette.text.secondaryChannel).to.equal('0 0 0'); - expect(theme.colorSchemes.light.palette.text.disabledChannel).to.equal('0 0 0'); - expect(theme.colorSchemes.light.palette.action.disabledChannel).to.equal('0 0 0'); + }); + + it('should generate common background, onBackground channels', () => { + const theme = extendTheme({ + colorSchemes: { + dark: { + palette: { + common: { + onBackground: '#f9f9f9', // this should not be overridden + }, + }, + }, + light: { + palette: { + common: { + background: '#f9f9f9', + }, + }, + }, + }, + }); + expect(theme.colorSchemes.light.palette.common.background).to.equal('#f9f9f9'); + expect(theme.colorSchemes.light.palette.common.backgroundChannel).to.equal('249 249 249'); + expect(theme.colorSchemes.light.palette.common.onBackground).to.equal('#000'); + expect(theme.colorSchemes.light.palette.common.onBackgroundChannel).to.equal('0 0 0'); + + expect(theme.colorSchemes.dark.palette.common.background).to.equal('#000'); + expect(theme.colorSchemes.dark.palette.common.backgroundChannel).to.equal('0 0 0'); + expect(theme.colorSchemes.dark.palette.common.onBackground).to.equal('#f9f9f9'); + expect(theme.colorSchemes.dark.palette.common.onBackgroundChannel).to.equal('249 249 249'); }); it('should generate color channels for custom colors', () => { - const theme = createTheme({ + const theme = extendTheme({ colorSchemes: { light: { palette: { primary: { main: deepOrange[500] }, secondary: { main: green.A400 } }, @@ -94,7 +124,7 @@ describe('experimental_extendTheme', () => { describe('transitions', () => { it('[`easing`]: should provide the default values', () => { - const theme = createTheme(); + const theme = extendTheme(); expect(theme.transitions.easing.easeInOut).to.equal('cubic-bezier(0.4, 0, 0.2, 1)'); expect(theme.transitions.easing.easeOut).to.equal('cubic-bezier(0.0, 0, 0.2, 1)'); expect(theme.transitions.easing.easeIn).to.equal('cubic-bezier(0.4, 0, 1, 1)'); @@ -102,7 +132,7 @@ describe('experimental_extendTheme', () => { }); it('[`duration`]: should provide the default values', () => { - const theme = createTheme(); + const theme = extendTheme(); expect(theme.transitions.duration.shortest).to.equal(150); expect(theme.transitions.duration.shorter).to.equal(200); expect(theme.transitions.duration.short).to.equal(250); @@ -113,7 +143,7 @@ describe('experimental_extendTheme', () => { }); it('[`easing`]: should provide the custom values', () => { - const theme = createTheme({ + const theme = extendTheme({ transitions: { easing: { easeInOut: 'cubic-bezier(1, 1, 1, 1)', @@ -130,7 +160,7 @@ describe('experimental_extendTheme', () => { }); it('[`duration`]: should provide the custom values', () => { - const theme = createTheme({ + const theme = extendTheme({ transitions: { duration: { shortest: 1, @@ -153,42 +183,53 @@ describe('experimental_extendTheme', () => { }); it('should allow providing a partial structure', () => { - const theme = createTheme({ transitions: { duration: { shortest: 150 } } }); + const theme = extendTheme({ transitions: { duration: { shortest: 150 } } }); expect(theme.transitions.duration.shorter).not.to.equal(undefined); }); }); describe('opacity', () => { it('should provide the default opacities', () => { - const theme = createTheme(); - expect(theme.opacity).to.deep.equal({ - active: 0.54, - hover: 0.04, - selected: 0.08, - disabled: 0.26, - focus: 0.12, + const theme = extendTheme(); + expect(theme.colorSchemes.light.opacity).to.deep.equal({ + placeholder: 0.42, + inputTouchBottomLine: 0.42, + }); + expect(theme.colorSchemes.dark.opacity).to.deep.equal({ + placeholder: 0.5, + inputTouchBottomLine: 0.7, }); }); it('should allow overriding of the default opacities', () => { - const theme = createTheme({ - opacity: { - active: 0.4, + const theme = extendTheme({ + colorSchemes: { + light: { + opacity: { + placeholder: 1, + }, + }, + dark: { + opacity: { + placeholder: 0.2, + }, + }, }, }); - expect(theme.opacity).to.deep.equal({ - active: 0.4, - hover: 0.04, - selected: 0.08, - disabled: 0.26, - focus: 0.12, + expect(theme.colorSchemes.light.opacity).to.deep.equal({ + placeholder: 1, + inputTouchBottomLine: 0.42, + }); + expect(theme.colorSchemes.dark.opacity).to.deep.equal({ + placeholder: 0.2, + inputTouchBottomLine: 0.7, }); }); }); describe('shadows', () => { it('should provide the default array', () => { - const theme = createTheme(); + const theme = extendTheme(); expect(theme.shadows[2]).to.equal( '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', ); @@ -222,7 +263,7 @@ describe('experimental_extendTheme', () => { 11, 11, ]; - const theme = createTheme({ shadows }); + const theme = extendTheme({ shadows }); expect(theme.shadows).to.equal(shadows); }); }); @@ -247,7 +288,7 @@ describe('experimental_extendTheme', () => { }, }, }; - const theme = createTheme({ components }); + const theme = extendTheme({ components }); expect(theme.components).to.deep.equal(components); }); }); @@ -257,20 +298,20 @@ describe('experimental_extendTheme', () => { let theme; expect(() => { - theme = createTheme({ + theme = extendTheme({ components: { Button: { styleOverrides: { disabled: { color: 'blue' } } } }, }); }).not.toErrorDev(); expect(Object.keys(theme.components.Button.styleOverrides.disabled).length).to.equal(1); expect(() => { - theme = createTheme({ + theme = extendTheme({ components: { MuiButton: { styleOverrides: { root: { color: 'blue' } } } }, }); }).not.toErrorDev(); expect(() => { - theme = createTheme({ + theme = extendTheme({ components: { MuiButton: { styleOverrides: { disabled: { color: 'blue' } } } }, }); }).toErrorDev( @@ -281,19 +322,19 @@ describe('experimental_extendTheme', () => { }); it('shallow merges multiple arguments', () => { - const theme = createTheme({ foo: 'I am foo' }, { bar: 'I am bar' }); + const theme = extendTheme({ foo: 'I am foo' }, { bar: 'I am bar' }); expect(theme.foo).to.equal('I am foo'); expect(theme.bar).to.equal('I am bar'); }); it('deep merges multiple arguments', () => { - const theme = createTheme({ custom: { foo: 'I am foo' } }, { custom: { bar: 'I am bar' } }); + const theme = extendTheme({ custom: { foo: 'I am foo' } }, { custom: { bar: 'I am bar' } }); expect(theme.custom.foo).to.equal('I am foo'); expect(theme.custom.bar).to.equal('I am bar'); }); it('allows callbacks using theme in variants', () => { - const theme = createTheme({ + const theme = extendTheme({ typography: { fontFamily: 'cursive', },