Skip to content

Commit

Permalink
[material-ui] Make the palette always return new light and dark object (
Browse files Browse the repository at this point in the history 
#44059)
  • Loading branch information
@siriwatknp
siriwatknp authored Oct 10, 2024
1 parent abddf2a commit 66dfe8b
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 66 deletions.
138 changes: 73 additions & 65 deletions packages/mui-material/src/styles/createPalette.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,71 +9,79 @@ import blue from '../colors/blue';
import lightBlue from '../colors/lightBlue';
import green from '../colors/green';

export const light = {
// The colors used to style the text.
text: {
// The most important text.
primary: 'rgba(0, 0, 0, 0.87)',
// Secondary text.
secondary: 'rgba(0, 0, 0, 0.6)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
},
// The color used to divide different elements.
divider: 'rgba(0, 0, 0, 0.12)',
// The background colors used to style the surfaces.
// Consistency between these values is important.
background: {
paper: common.white,
default: common.white,
},
// The colors used to style the action elements.
action: {
// The color of an active action like an icon button.
active: 'rgba(0, 0, 0, 0.54)',
// The color of an hovered action.
hover: 'rgba(0, 0, 0, 0.04)',
hoverOpacity: 0.04,
// The color of a selected action.
selected: 'rgba(0, 0, 0, 0.08)',
selectedOpacity: 0.08,
// The color of a disabled action.
disabled: 'rgba(0, 0, 0, 0.26)',
// The background color of a disabled action.
disabledBackground: 'rgba(0, 0, 0, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(0, 0, 0, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.12,
},
};
function getLight() {
return {
// The colors used to style the text.
text: {
// The most important text.
primary: 'rgba(0, 0, 0, 0.87)',
// Secondary text.
secondary: 'rgba(0, 0, 0, 0.6)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
},
// The color used to divide different elements.
divider: 'rgba(0, 0, 0, 0.12)',
// The background colors used to style the surfaces.
// Consistency between these values is important.
background: {
paper: common.white,
default: common.white,
},
// The colors used to style the action elements.
action: {
// The color of an active action like an icon button.
active: 'rgba(0, 0, 0, 0.54)',
// The color of an hovered action.
hover: 'rgba(0, 0, 0, 0.04)',
hoverOpacity: 0.04,
// The color of a selected action.
selected: 'rgba(0, 0, 0, 0.08)',
selectedOpacity: 0.08,
// The color of a disabled action.
disabled: 'rgba(0, 0, 0, 0.26)',
// The background color of a disabled action.
disabledBackground: 'rgba(0, 0, 0, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(0, 0, 0, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.12,
},
};
}

export const light = getLight();

function getDark() {
return {
text: {
primary: common.white,
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.5)',
icon: 'rgba(255, 255, 255, 0.5)',
},
divider: 'rgba(255, 255, 255, 0.12)',
background: {
paper: '#121212',
default: '#121212',
},
action: {
active: common.white,
hover: 'rgba(255, 255, 255, 0.08)',
hoverOpacity: 0.08,
selected: 'rgba(255, 255, 255, 0.16)',
selectedOpacity: 0.16,
disabled: 'rgba(255, 255, 255, 0.3)',
disabledBackground: 'rgba(255, 255, 255, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(255, 255, 255, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.24,
},
};
}

export const dark = {
text: {
primary: common.white,
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.5)',
icon: 'rgba(255, 255, 255, 0.5)',
},
divider: 'rgba(255, 255, 255, 0.12)',
background: {
paper: '#121212',
default: '#121212',
},
action: {
active: common.white,
hover: 'rgba(255, 255, 255, 0.08)',
hoverOpacity: 0.08,
selected: 'rgba(255, 255, 255, 0.16)',
selectedOpacity: 0.16,
disabled: 'rgba(255, 255, 255, 0.3)',
disabledBackground: 'rgba(255, 255, 255, 0.12)',
disabledOpacity: 0.38,
focus: 'rgba(255, 255, 255, 0.12)',
focusOpacity: 0.12,
activatedOpacity: 0.24,
},
};
export const dark = getDark();

function addLightOrDark(intent, direction, shade, tonalOffset) {
const tonalOffsetLight = tonalOffset.light || tonalOffset;
Expand Down Expand Up @@ -256,7 +264,7 @@ export default function createPalette(palette) {
return color;
};

const modes = { dark, light };
const modes = { dark: getDark(), light: getLight() };

if (process.env.NODE_ENV !== 'production') {
if (!modes[mode]) {
Expand Down
15 changes: 14 additions & 1 deletion packages/mui-material/src/styles/createPalette.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,20 @@ describe('createPalette()', () => {
expect(palette.secondary.main, 'should use purple as the default secondary color').to.equal(
purple[200],
);
expect(palette.text, 'should use dark theme text').to.equal(dark.text);
expect(palette.text, 'should use dark theme text').to.deep.equal(dark.text);
});

it('should create independent object', () => {
const palette1 = createPalette({});
const palette2 = createPalette({});

expect(palette1.background.default).to.equal('#fff');
expect(palette2.background.default).to.equal('#fff');

palette1.background.default = '#000';

expect(palette1.background.default).to.equal('#000');
expect(palette2.background.default).to.equal('#fff');
});

describe('augmentColor', () => {
Expand Down
38 changes: 38 additions & 0 deletions packages/mui-material/src/styles/createTheme.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,4 +523,42 @@ describe('createTheme', () => {
);
}
});

it('should create a new object', () => {
const defaultTheme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-mui-color-scheme',
},
colorSchemes: { dark: true },
});

expect(
defaultTheme.generateStyleSheets()[2]['[data-mui-color-scheme="dark"]'][
'--mui-palette-background-defaultChannel'
],
).to.equal('18 18 18');

const theme = createTheme({
cssVariables: {
colorSchemeSelector: 'data-mui-color-scheme',
cssVarPrefix: 'template',
},
colorSchemes: {
dark: {
palette: {
background: {
default: 'hsl(220, 35%, 3%)',
paper: 'hsl(220, 30%, 7%)',
},
},
},
},
});

expect(
theme.generateStyleSheets()[2]['[data-mui-color-scheme="dark"]'][
'--template-palette-background-defaultChannel'
],
).to.equal('5 7 10');
});
});

0 comments on commit 66dfe8b

Please sign in to comment.