From 5c7305b291cb01a3833de94648a7b044cf2415c2 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Fri, 13 Dec 2019 08:09:16 -0500 Subject: [PATCH 01/13] Added warning, success and info colors to the palette --- .../material-ui/src/styles/createPalette.d.ts | 6 + .../material-ui/src/styles/createPalette.js | 24 ++ .../src/styles/createPalette.test.js | 225 +++++++++++++++++- 3 files changed, 254 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/createPalette.d.ts b/packages/material-ui/src/styles/createPalette.d.ts index d7e31533cfcb8e..762a52fa061214 100644 --- a/packages/material-ui/src/styles/createPalette.d.ts +++ b/packages/material-ui/src/styles/createPalette.d.ts @@ -60,6 +60,9 @@ export interface Palette { primary: PaletteColor; secondary: PaletteColor; error: PaletteColor; + warning: PaletteColor; + info: PaletteColor; + success: PaletteColor; grey: Color; text: TypeText; divider: TypeDivider; @@ -83,6 +86,9 @@ export interface PaletteOptions { primary?: PaletteColorOptions; secondary?: PaletteColorOptions; error?: PaletteColorOptions; + warning?: PaletteColorOptions; + info?: PaletteColorOptions; + success?: PaletteColorOptions; type?: PaletteType; tonalOffset?: number; contrastThreshold?: number; diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 4df6b5efc34c73..e1b79aa9a623aa 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -4,6 +4,9 @@ import grey from '../colors/grey'; import indigo from '../colors/indigo'; import pink from '../colors/pink'; import red from '../colors/red'; +import yellow from '../colors/yellow'; +import lightBlue from '../colors/lightBlue'; +import green from '../colors/green'; import { darken, getContrastRatio, lighten } from './colorManipulator'; export const light = { @@ -94,6 +97,21 @@ export default function createPalette(palette) { main: red[500], dark: red[700], }, + warning = { + light: yellow[300], + main: yellow[500], + dark: yellow[700], + }, + info = { + light: lightBlue[300], + main: lightBlue[500], + dark: lightBlue[700], + }, + success = { + light: green[300], + main: green[500], + dark: green[700], + }, type = 'light', contrastThreshold = 3, tonalOffset = 0.2, @@ -177,6 +195,12 @@ export default function createPalette(palette) { secondary: augmentColor(secondary, 'A400', 'A200', 'A700'), // The colors used to represent interface elements that the user should be made aware of. error: augmentColor(error), + // The colors used to represent important info that may have negative consequences and user should be aware of. + warning: augmentColor(warning), + // The colors used to present important information without context. + info: augmentColor(info), + // The colors used to indicate successful action. + success: augmentColor(success), // The grey colors. grey, // Used by `getContrastText()` to maximize the contrast between the background and diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 1ce229b05126f9..b99c9693bd0e25 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -1,6 +1,16 @@ import { assert } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -import { deepOrange, green, indigo, pink, red } from '../colors'; +import { + blue, + deepOrange, + green, + indigo, + lightBlue, + lightGreen, + pink, + red, + yellow, +} from '../colors'; import { darken, lighten } from './colorManipulator'; import createPalette, { dark, light } from './createPalette'; @@ -70,6 +80,51 @@ describe('createPalette()', () => { red[700], 'should use red[700] as the default error dark color', ); + assert.strictEqual( + palette.warning.main, + yellow[500], + 'should use yellow[500] as the default warning main color', + ); + assert.strictEqual( + palette.warning.light, + yellow[300], + 'should use yellow[300] as the default warning light color', + ); + assert.strictEqual( + palette.warning.dark, + yellow[700], + 'should use yellow[700] as the default warning dark color', + ); + assert.strictEqual( + palette.info.main, + lightBlue[500], + 'should use lightBlue[500] as the default info main color', + ); + assert.strictEqual( + palette.info.light, + lightBlue[300], + 'should use lightBlue[300] as the default info light color', + ); + assert.strictEqual( + palette.info.dark, + lightBlue[700], + 'should use lightBlue[700] as the default info dark color', + ); + assert.strictEqual( + palette.success.main, + green[500], + 'should use green[500] as the default success main color', + ); + assert.strictEqual( + palette.success.light, + green[300], + 'should use green[300] as the default success light color', + ); + assert.strictEqual( + palette.success.dark, + green[700], + 'should use green[700] as the default success dark color', + ); assert.strictEqual( palette.text, light.text, @@ -151,6 +206,24 @@ describe('createPalette()', () => { dark: pink[700], contrastText: '#00ff00', }, + warning: { + main: red[500], + light: red[300], + dark: red[700], + contrastText: '#0000ff', + }, + info: { + main: blue[500], + light: blue[300], + dark: blue[700], + contrastText: '#ff0000', + }, + success: { + main: lightGreen[500], + light: lightGreen[300], + dark: lightGreen[700], + contrastText: '#ff00ff', + }, }); assert.strictEqual( palette.primary.main, @@ -212,6 +285,58 @@ describe('createPalette()', () => { '#00ff00', 'should use #00ff00 as the error contrastText color', ); + assert.strictEqual( + palette.warning.main, + red[500], + 'should use red[500] as the warning main color', + ); + assert.strictEqual( + palette.warning.light, + red[300], + 'should use red[300] as the warning light color', + ); + assert.strictEqual( + palette.warning.dark, + red[700], + 'should use red[700] as the warning dark color', + ); + assert.strictEqual( + palette.warning.contrastText, + '#0000ff', + 'should use #0000ff as the warning contrastText color', + ); + assert.strictEqual(palette.info.main, blue[500], 'should use blue[500] as the info main color'); + assert.strictEqual( + palette.info.light, + blue[300], + 'should use blue[300] as the info light color', + ); + assert.strictEqual(palette.info.dark, blue[700], 'should use blue[700] as the info dark color'); + assert.strictEqual( + palette.info.contrastText, + '#ff0000', + 'should use #ff0000 as the info contrastText color', + ); + assert.strictEqual( + palette.success.main, + lightGreen[500], + 'should use lightGreen[500] as the success main color', + ); + assert.strictEqual( + palette.success.light, + lightGreen[300], + 'should use lightGreen[300] as the success light color', + ); + assert.strictEqual( + palette.success.dark, + lightGreen[700], + 'should use lightGreen[700] as the success dark color', + ); + assert.strictEqual( + palette.success.contrastText, + '#ff00ff', + 'should use #ff00ff as the success contrastText color', + ); assert.strictEqual(palette.text, light.text, 'should use light theme text'); }); @@ -220,6 +345,9 @@ describe('createPalette()', () => { primary: { main: deepOrange[500] }, secondary: { main: green.A400 }, error: { main: pink[500] }, + warning: { main: red[500] }, + info: { main: blue[500] }, + success: { main: lightGreen[500] }, }; const palette = createPalette(paletteOptions); assert.deepEqual( @@ -228,6 +356,9 @@ describe('createPalette()', () => { primary: { main: deepOrange[500] }, secondary: { main: green.A400 }, error: { main: pink[500] }, + warning: { main: red[500] }, + info: { main: blue[500] }, + success: { main: lightGreen[500] }, }, 'should not mutate createPalette argument', ); @@ -276,6 +407,47 @@ describe('createPalette()', () => { darken(pink[500], 0.3), 'should use darken(pink[500], 0.3) as the error dark color', ); + assert.strictEqual( + palette.warning.main, + red[500], + 'should use red[500] as the warning main color', + ); + assert.strictEqual( + palette.warning.light, + lighten(red[500], 0.2), + 'should use lighten(red[500], 0.2) as the warning light color', + ); + assert.strictEqual( + palette.warning.dark, + darken(red[500], 0.3), + 'should use darken(red[500], 0.3) as the warning dark color', + ); + assert.strictEqual(palette.info.main, blue[500], 'should use blue[500] as the info main color'); + assert.strictEqual( + palette.info.light, + lighten(blue[500], 0.2), + 'should use lighten(blue[500], 0.2) as the info light color', + ); + assert.strictEqual( + palette.info.dark, + darken(blue[500], 0.3), + 'should use darken(blue[500], 0.3) as the info dark color', + ); + assert.strictEqual( + palette.success.main, + lightGreen[500], + 'should use lightGreen[500] as the success main color', + ); + assert.strictEqual( + palette.success.light, + lighten(lightGreen[500], 0.2), + 'should use lighten(lightGreen[500], 0.2) as the success light color', + ); + assert.strictEqual( + palette.success.dark, + darken(lightGreen[500], 0.3), + 'should use darken(lightGreen[500], 0.3) as the success dark color', + ); }); it('should calculate light and dark colors using the provided tonalOffset', () => { @@ -283,6 +455,9 @@ describe('createPalette()', () => { primary: { main: deepOrange[500] }, secondary: { main: green.A400 }, error: { main: red[500] }, + warning: { main: yellow[500] }, + info: { main: lightBlue[500] }, + success: { main: green[500] }, tonalOffset: 0.1, }); // primary @@ -329,6 +504,54 @@ describe('createPalette()', () => { darken(red[500], 0.15), 'should use darken(red[500], 0.1) as the error dark color', ); + // warning + assert.strictEqual( + palette.warning.main, + yellow[500], + 'should use yellow[500] as the warning main color', + ); + assert.strictEqual( + palette.warning.light, + lighten(yellow[500], 0.1), + 'should use lighten(yellow[500], 0.1) as the warning light color', + ); + assert.strictEqual( + palette.warning.dark, + darken(yellow[500], 0.15), + 'should use darken(yellow[500], 0.1) as the warning dark color', + ); + // info + assert.strictEqual( + palette.info.main, + lightBlue[500], + 'should use lightBlue[500] as the info main color', + ); + assert.strictEqual( + palette.info.light, + lighten(lightBlue[500], 0.1), + 'should use lighten(lightBlue[500], 0.1) as the info light color', + ); + assert.strictEqual( + palette.info.dark, + darken(lightBlue[500], 0.15), + 'should use darken(lightBlue[500], 0.1) as the info dark color', + ); + // success + assert.strictEqual( + palette.success.main, + green[500], + 'should use green[500] as the success main color', + ); + assert.strictEqual( + palette.success.light, + lighten(green[500], 0.1), + 'should use lighten(green[500], 0.1) as the success light color', + ); + assert.strictEqual( + palette.success.dark, + darken(green[500], 0.15), + 'should use darken(green[500], 0.1) as the success dark color', + ); }); it('should calculate contrastText using the provided contrastThreshold', () => { From 618623fd99da2182a909290ae3b88db4265575c3 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Mon, 16 Dec 2019 19:11:08 -0500 Subject: [PATCH 02/13] Refactoring unit tests for createPalette --- .../src/styles/createPalette.test.js | 244 +++++++----------- 1 file changed, 94 insertions(+), 150 deletions(-) diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index b99c9693bd0e25..04bead17213d6b 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -24,111 +24,50 @@ describe('createPalette()', () => { }); it('should create a material design palette according to spec', () => { - const palette = createPalette({}); - assert.strictEqual( - palette.primary.main, - indigo[500], - 'should use indigo[500] as the default primary main color', - ); - assert.strictEqual( - palette.primary.light, - indigo[300], - 'should use indigo[300] as the default primary light color', - ); - assert.strictEqual( - palette.primary.dark, - indigo[700], - 'should use indigo[700] as the default primary dark color', - ); - assert.strictEqual( - palette.primary.contrastText, - dark.text.primary, - 'should use dark.text.primary as the default primary contrastText color', - ); - assert.strictEqual( - palette.secondary.main, - pink.A400, - 'should use pink.A400 as the default secondary main color', - ); - assert.strictEqual( - palette.secondary.light, - pink.A200, - 'should use pink.A200 as the default secondary light color', - ); - assert.strictEqual( - palette.secondary.dark, - pink.A700, - 'should use pink.A700 as the default secondary dark color', - ); - assert.strictEqual( - palette.secondary.contrastText, - dark.text.primary, - 'should use dark.text.primary as the default secondary contrastText color', - ); - assert.strictEqual( - palette.error.main, - red[500], - 'should use red[500] as the default error main color', - ); - assert.strictEqual( - palette.error.light, - red[300], - 'should use red[300] as the default error light color', - ); - assert.strictEqual( - palette.error.dark, - red[700], - 'should use red[700] as the default error dark color', - ); - assert.strictEqual( - palette.warning.main, - yellow[500], - 'should use yellow[500] as the default warning main color', - ); - assert.strictEqual( - palette.warning.light, - yellow[300], - 'should use yellow[300] as the default warning light color', - ); - assert.strictEqual( - palette.warning.dark, - yellow[700], - 'should use yellow[700] as the default warning dark color', - ); - assert.strictEqual( - palette.info.main, - lightBlue[500], - 'should use lightBlue[500] as the default info main color', - ); - assert.strictEqual( - palette.info.light, - lightBlue[300], - 'should use lightBlue[300] as the default info light color', - ); - assert.strictEqual( - palette.info.dark, - lightBlue[700], - 'should use lightBlue[700] as the default info dark color', - ); - assert.strictEqual( - palette.success.main, - green[500], - 'should use green[500] as the default success main color', - ); - assert.strictEqual( - palette.success.light, - green[300], - 'should use green[300] as the default success light color', - ); - assert.strictEqual( - palette.success.dark, - green[700], - 'should use green[700] as the default success dark color', - ); - assert.strictEqual( - palette.text, - light.text, - 'should use light theme text for a light theme by default', + const { primary, secondary, error, warning, info, success } = createPalette({}); + const spec = { + primary: { + main: indigo[500], + light: indigo[300], + dark: indigo[700], + contrastText: dark.text.primary, + }, + secondary: { + main: pink.A400, + light: pink.A200, + dark: pink.A700, + contrastText: dark.text.primary, + }, + error: { + main: red[500], + light: red[300], + dark: red[700], + contrastText: dark.text.primary, + }, + warning: { + main: yellow[500], + light: yellow[300], + dark: yellow[700], + contrastText: light.text.primary, + }, + info: { + main: lightBlue[500], + light: lightBlue[300], + dark: lightBlue[700], + contrastText: light.text.primary, + }, + success: { + main: green[500], + light: green[300], + dark: green[700], + contrastText: light.text.primary, + }, + }; + + assert.deepStrictEqual( + { primary, secondary, error, warning, info, success }, + spec, + 'default colors should conform to spec', ); }); @@ -137,52 +76,57 @@ describe('createPalette()', () => { primary: deepOrange, secondary: green, error: pink, + info: blue, + warning: red, + success: lightGreen, + }); + const spec = { + primary: { + main: deepOrange[500], + light: deepOrange[300], + dark: deepOrange[700], + contrastText: dark.text.primary, + }, + secondary: { + main: green.A400, + light: green.A200, + dark: green.A700, + contrastText: light.text.primary, + }, + error: { + main: pink[500], + light: pink[300], + dark: pink[700], + contrastText: dark.text.primary, + }, + warning: { + main: red[500], + light: red[300], + dark: red[700], + contrastText: dark.text.primary, + }, + info: { + main: blue[500], + light: blue[300], + dark: blue[700], + contrastText: dark.text.primary, + }, + success: { + main: lightGreen[500], + light: lightGreen[300], + dark: lightGreen[700], + contrastText: light.text.primary, + }, + }; + Object.keys(spec).forEach(color => { + Object.keys(spec[color]).forEach(tint => { + assert.strictEqual( + palette[color][tint], + spec[color][tint], + `color ${color}.${tint} should be ${spec[color][tint]}`, + ); + }); }); - assert.strictEqual( - palette.primary.main, - deepOrange[500], - 'should use deepOrange[500] as the primary main color', - ); - assert.strictEqual( - palette.primary.light, - deepOrange[300], - 'should use deepOrange[300] as the primary light color', - ); - assert.strictEqual( - palette.primary.dark, - deepOrange[700], - 'should use deepOrange[700] as the primary dark color', - ); - assert.strictEqual( - palette.secondary.main, - green.A400, - 'should use green.A400 as the secondary main color', - ); - assert.strictEqual( - palette.secondary.light, - green.A200, - 'should use green.A200 as the secondary light color', - ); - assert.strictEqual( - palette.secondary.dark, - green.A700, - 'should use green.A700 as the secondary dark color', - ); - assert.strictEqual( - palette.error.main, - pink[500], - 'should use pink[500] as the error main color', - ); - assert.strictEqual( - palette.error.light, - pink[300], - 'should use pink[300] as the error light color', - ); - assert.strictEqual( - palette.error.dark, - pink[700], - 'should use pink[700] as the error dark color', - ); assert.strictEqual(palette.text, light.text, 'should use light theme text'); }); From 7373dd6a552de8fb6886d2525c8b4bbcd0c85f7a Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Tue, 17 Dec 2019 13:38:45 -0500 Subject: [PATCH 03/13] Added new colors to the @material-ui/system docs --- docs/src/pages/system/palette/BackgroundColor.js | 9 +++++++++ docs/src/pages/system/palette/BackgroundColor.tsx | 9 +++++++++ docs/src/pages/system/palette/Color.js | 3 +++ docs/src/pages/system/palette/Color.tsx | 3 +++ docs/src/pages/system/palette/palette.md | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js index b0a7a6dccda761..eedff8cb18acce 100644 --- a/docs/src/pages/system/palette/BackgroundColor.js +++ b/docs/src/pages/system/palette/BackgroundColor.js @@ -14,6 +14,15 @@ export default function Background() { error.main + + warning.main + + + info.main + + + success.main + text.primary diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx index b0a7a6dccda761..eedff8cb18acce 100644 --- a/docs/src/pages/system/palette/BackgroundColor.tsx +++ b/docs/src/pages/system/palette/BackgroundColor.tsx @@ -14,6 +14,15 @@ export default function Background() { error.main + + warning.main + + + info.main + + + success.main + text.primary diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js index 6b86c52c8a8aad..92bc186fea95ac 100644 --- a/docs/src/pages/system/palette/Color.js +++ b/docs/src/pages/system/palette/Color.js @@ -8,6 +8,9 @@ export default function Color() { primary.main secondary.main error.main + warning.main + info.main + success.main text.primary text.secondary text.disabled diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx index 6b86c52c8a8aad..92bc186fea95ac 100644 --- a/docs/src/pages/system/palette/Color.tsx +++ b/docs/src/pages/system/palette/Color.tsx @@ -8,6 +8,9 @@ export default function Color() { primary.main secondary.main error.main + warning.main + info.main + success.main text.primary text.secondary text.disabled diff --git a/docs/src/pages/system/palette/palette.md b/docs/src/pages/system/palette/palette.md index 056870e6988bf7..0c10417c42e7e1 100644 --- a/docs/src/pages/system/palette/palette.md +++ b/docs/src/pages/system/palette/palette.md @@ -10,6 +10,9 @@ … … … +… +… +… … … … @@ -24,6 +27,9 @@ … … … +… +… +… … … … From 1574cd1d50dc63cacf5da6fbfb263439be259af7 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Tue, 17 Dec 2019 13:55:57 -0500 Subject: [PATCH 04/13] Added new colors to the @material-ui/core docs --- .../pages/customization/palette/palette.md | 36 +++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index 08f848afa2a21d..910eeee44d5c24 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -11,6 +11,9 @@ The theme exposes the following color intentions: - primary - used to represent primary interface elements for a user. - secondary - used to represent secondary interface elements for a user. - error - used to represent interface elements that the user should be made aware of. +- warning - used to represent potentially dangerous actions or important messages. +- info - used to present information to the user that is neutral and not necessarily important. +- success - used to indicate a successful completion of an action that user triggered. The default palette uses the shades prefixed with `A` (`A200`, etc.) for the secondary intention, and the un-prefixed shades for the other intentions. @@ -22,8 +25,11 @@ If you want to learn more about color, you can check out [the color section](/cu You may override the default palette values by including a `palette` object as part of your theme. If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.palette.primary), -[`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary) or -[`palette.error`](/customization/default-theme/?expend-path=$.palette.error) +[`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary), +[`palette.error`](/customization/default-theme/?expend-path=$.palette.error), +[`palette.warning`](/customization/default-theme/?expend-path=$.palette.warning), +[`palette.info`](/customization/default-theme/?expend-path=$.palette.info) or +[`palette.successs`](/customization/default-theme/?expend-path=$.palette.successs) 'intention' objects are provided, they will replace the defaults. The intention value can either be a [color](/customization/color/) object, or an object with one or more of the keys specified by the following TypeScript interface: @@ -76,6 +82,24 @@ palette: { dark: palette.error[700], contrastText: getContrastText(palette.error[500]), }, + warning: { + light: palette.warning[300], + main: palette.warning[500], + dark: palette.warning[700], + contrastText: getContrastText(palette.warning[500]), + }, + info: { + light: palette.info[300], + main: palette.info[500], + dark: palette.info[700], + contrastText: getContrastText(palette.info[500]), + }, + success: { + light: palette.success[300], + main: palette.success[500], + dark: palette.success[700], + contrastText: getContrastText(palette.success[500]), + }, }, ``` @@ -86,6 +110,9 @@ import { createMuiTheme } from '@material-ui/core/styles'; import indigo from '@material-ui/core/colors/indigo'; import pink from '@material-ui/core/colors/pink'; import red from '@material-ui/core/colors/red'; +import amber from '@material-ui/core/colors/amber'; +import blueGrey from '@material-ui/core/colors/blueGrey'; +import lightGreen from '@material-ui/core/colors/lightGreen'; // All the following keys are optional, as default values are provided. const theme = createMuiTheme({ @@ -93,6 +120,9 @@ const theme = createMuiTheme({ primary: indigo, secondary: pink, error: red, + warning: amber, + info: blueGrey, + success: lightGreen, // Used by `getContrastText()` to maximize the contrast between the background and // the text. contrastThreshold: 3, @@ -126,7 +156,7 @@ const theme = createMuiTheme({ // dark: will be calculated from palette.secondary.main, contrastText: '#ffcc00', }, - // error: will use the default color + // error, warning, info, success: will use the default color }, }); ``` From 0fc92d5325eb90bcc6799cc34758ac125d0f85a1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 19 Dec 2019 00:11:38 +0100 Subject: [PATCH 05/13] change colors Use the same colors as - https://vuetifyjs.com/en/components/alerts#type - https://material-ui.com/components/snackbars/#customized-snackbars - https://github.com/iamhosseindhv/notistack/blob/e0b8a4b61740ec04eeceae774d3f57bdb338366e/src/SnackbarItem/SnackbarItem.styles.js --- .../pages/customization/palette/DarkTheme.js | 53 ++++++----- .../pages/customization/palette/DarkTheme.tsx | 62 ++++++++----- .../pages/customization/palette/palette.md | 25 +++--- .../pages/system/palette/BackgroundColor.js | 88 ++++++++++++------- .../pages/system/palette/BackgroundColor.tsx | 88 ++++++++++++------- .../material-ui/src/styles/createPalette.js | 16 ++-- 6 files changed, 194 insertions(+), 138 deletions(-) diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 474d186af4cf1b..82454f61687398 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -1,34 +1,34 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles'; -function WithTheme() { - const theme = useTheme(); - const primaryText = theme.palette.text.primary; - const primaryColor = theme.palette.primary.main; +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(3), + textAlign: 'center', + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + }, +})); - const styles = { - primaryText: { - backgroundColor: theme.palette.background.default, - padding: theme.spacing(1, 2), - color: primaryText, - }, - primaryColor: { - backgroundColor: primaryColor, - padding: theme.spacing(1, 2), - color: theme.palette.common.white, - }, - }; +function Demo() { + const classes = useStyles(); + const theme = useTheme(); return ( -
- {`Primary color ${primaryColor}`} - {`Primary text ${primaryText}`} +
+ {`${theme.palette.type} theme`}
); } -const theme = createMuiTheme({ +const lightTheme = createMuiTheme({ + palette: { + type: 'light', + }, +}); + +const darkTheme = createMuiTheme({ palette: { type: 'dark', // Switching the dark mode on is a single property value change. }, @@ -36,8 +36,13 @@ const theme = createMuiTheme({ export default function DarkTheme() { return ( - - - +
+ + + + + + +
); } diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx index 474d186af4cf1b..fe01ac5bae1536 100644 --- a/docs/src/pages/customization/palette/DarkTheme.tsx +++ b/docs/src/pages/customization/palette/DarkTheme.tsx @@ -1,34 +1,45 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { useTheme, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { + createStyles, + makeStyles, + ThemeProvider, + useTheme, + createMuiTheme, + Theme, +} from '@material-ui/core/styles'; -function WithTheme() { - const theme = useTheme(); - const primaryText = theme.palette.text.primary; - const primaryColor = theme.palette.primary.main; - - const styles = { - primaryText: { +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + padding: theme.spacing(3), + textAlign: 'center', backgroundColor: theme.palette.background.default, - padding: theme.spacing(1, 2), - color: primaryText, - }, - primaryColor: { - backgroundColor: primaryColor, - padding: theme.spacing(1, 2), - color: theme.palette.common.white, + color: theme.palette.text.primary, }, - }; + }), +); + +function Demo() { + const classes = useStyles(); + const theme = useTheme(); return ( -
- {`Primary color ${primaryColor}`} - {`Primary text ${primaryText}`} +
+ + {`${theme.palette.type} theme`} +
); } -const theme = createMuiTheme({ +const lightTheme = createMuiTheme({ + palette: { + type: 'light', + }, +}); + +const darkTheme = createMuiTheme({ palette: { type: 'dark', // Switching the dark mode on is a single property value change. }, @@ -36,8 +47,13 @@ const theme = createMuiTheme({ export default function DarkTheme() { return ( - - - +
+ + + + + + +
); } diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index 910eeee44d5c24..d4c1fe1c33e79f 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -26,7 +26,7 @@ You may override the default palette values by including a `palette` object as p If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.palette.primary), [`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary), -[`palette.error`](/customization/default-theme/?expend-path=$.palette.error), +[`palette.error`](/customization/default-theme/?expend-path=$.palette.error), [`palette.warning`](/customization/default-theme/?expend-path=$.palette.warning), [`palette.info`](/customization/default-theme/?expend-path=$.palette.info) or [`palette.successs`](/customization/default-theme/?expend-path=$.palette.successs) @@ -111,8 +111,8 @@ import indigo from '@material-ui/core/colors/indigo'; import pink from '@material-ui/core/colors/pink'; import red from '@material-ui/core/colors/red'; import amber from '@material-ui/core/colors/amber'; -import blueGrey from '@material-ui/core/colors/blueGrey'; -import lightGreen from '@material-ui/core/colors/lightGreen'; +import blue from '@material-ui/core/colors/blue'; +import green from '@material-ui/core/colors/green'; // All the following keys are optional, as default values are provided. const theme = createMuiTheme({ @@ -121,8 +121,8 @@ const theme = createMuiTheme({ secondary: pink, error: red, warning: amber, - info: blueGrey, - success: lightGreen, + info: blue, + success: green, // Used by `getContrastText()` to maximize the contrast between the background and // the text. contrastThreshold: 3, @@ -185,27 +185,22 @@ Note that `contrastThreshold` follows a non-linear curve. Need inspiration? The Material Design team has built an awesome [palette configuration tool](/customization/color/#color-tool) to help you. -## Type (light /dark theme) +## Dark theme Material-UI comes with two theme variants, light (the default) and dark. -You can make the theme dark by setting `type` to `dark`. -While it's only a single property value change, internally it modifies the value of the following keys: - -- `palette.text` -- `palette.divider` -- `palette.background` -- `palette.action` +You can make the theme dark by setting `type: 'dark'`. +While it's only a single property value change, internally it modifies the palette. ```js -const theme = createMuiTheme({ +const darkTheme = createMuiTheme({ palette: { type: 'dark', }, }); ``` -{{"demo": "pages/customization/palette/DarkTheme.js"}} +{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline"}} ### User preference diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js index eedff8cb18acce..8fb08e68943624 100644 --- a/docs/src/pages/system/palette/BackgroundColor.js +++ b/docs/src/pages/system/palette/BackgroundColor.js @@ -1,40 +1,60 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; -export default function Background() { +export default function BackgroundColor() { return ( - - - primary.main - - - secondary.main - - - error.main - - - warning.main - - - info.main - - - success.main - - - text.primary - - - text.secondary - - - text.disabled - - - text.hint - - + + + + primary.main + + + + + secondary.main + + + + + error.main + + + + + warning.main + + + + + info.main + + + + + success.main + + + + + text.primary + + + + + text.secondary + + + + + text.disabled + + + + + text.hint + + + ); } diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx index eedff8cb18acce..8fb08e68943624 100644 --- a/docs/src/pages/system/palette/BackgroundColor.tsx +++ b/docs/src/pages/system/palette/BackgroundColor.tsx @@ -1,40 +1,60 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; -export default function Background() { +export default function BackgroundColor() { return ( - - - primary.main - - - secondary.main - - - error.main - - - warning.main - - - info.main - - - success.main - - - text.primary - - - text.secondary - - - text.disabled - - - text.hint - - + + + + primary.main + + + + + secondary.main + + + + + error.main + + + + + warning.main + + + + + info.main + + + + + success.main + + + + + text.primary + + + + + text.secondary + + + + + text.disabled + + + + + text.hint + + + ); } diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index e1b79aa9a623aa..3506cf2210dd14 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -4,8 +4,8 @@ import grey from '../colors/grey'; import indigo from '../colors/indigo'; import pink from '../colors/pink'; import red from '../colors/red'; -import yellow from '../colors/yellow'; -import lightBlue from '../colors/lightBlue'; +import amber from '../colors/amber'; +import blue from '../colors/blue'; import green from '../colors/green'; import { darken, getContrastRatio, lighten } from './colorManipulator'; @@ -98,14 +98,14 @@ export default function createPalette(palette) { dark: red[700], }, warning = { - light: yellow[300], - main: yellow[500], - dark: yellow[700], + light: amber[300], + main: amber[500], + dark: amber[700], }, info = { - light: lightBlue[300], - main: lightBlue[500], - dark: lightBlue[700], + light: blue[300], + main: blue[500], + dark: blue[700], }, success = { light: green[300], From 5ca108adf7743a9cc2e9f7d9751d8d772edc4eb2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 19 Dec 2019 12:06:40 +0100 Subject: [PATCH 06/13] fix external links --- docs/src/pages/customization/color/color.md | 4 +- .../default-theme/DefaultTheme.js | 19 ++- .../pages/customization/palette/DarkTheme.tsx | 6 +- .../pages/customization/palette/Intentions.js | 93 ++++++++++++++ .../customization/palette/Intentions.tsx | 95 ++++++++++++++ .../pages/customization/palette/Palette.js | 10 +- .../pages/customization/palette/Palette.tsx | 10 +- .../pages/customization/palette/palette.md | 120 ++++-------------- .../material-ui/src/styles/createPalette.js | 4 +- 9 files changed, 244 insertions(+), 117 deletions(-) create mode 100644 docs/src/pages/customization/palette/Intentions.js create mode 100644 docs/src/pages/customization/palette/Intentions.tsx diff --git a/docs/src/pages/customization/color/color.md b/docs/src/pages/customization/color/color.md index 239915b91f0829..feabd022f5140c 100644 --- a/docs/src/pages/customization/color/color.md +++ b/docs/src/pages/customization/color/color.md @@ -45,7 +45,7 @@ import HUE from '@material-ui/core/colors/HUE'; const color = HUE[SHADE]; ``` -{{"demo": "pages/customization/color/Color.js", "hideHeader": true}} +{{"demo": "pages/customization/color/Color.js", "hideHeader": true, "bg": "inline"}} ## Color tool @@ -53,7 +53,7 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields. -{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}} +{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true, "bg": true}} The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`ThemeProvider`](/customization/theming/#theme-provider)): diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js index 5eb5df3e119d2d..8f2bc896d7be00 100644 --- a/docs/src/pages/customization/default-theme/DefaultTheme.js +++ b/docs/src/pages/customization/default-theme/DefaultTheme.js @@ -228,11 +228,14 @@ function DefaultTheme(props) { } setExpandPaths( - expandPath.split('.').reduce((acc, path) => { - const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : ''; - acc.push(last + path); - return acc; - }, []), + expandPath + .replace('$.', '') + .split('.') + .reduce((acc, path) => { + const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : ''; + acc.push(last + path); + return acc; + }, []), ); }, []); @@ -256,11 +259,7 @@ function DefaultTheme(props) { checked={checked} onChange={(event, newChecked) => { setChecked(newChecked); - if (newChecked) { - setExpandPaths(allNodeIds); - } else { - setExpandPaths([]); - } + setExpandPaths(newChecked ? allNodeIds : []); }} /> } diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx index fe01ac5bae1536..87db0ac5e79b7a 100644 --- a/docs/src/pages/customization/palette/DarkTheme.tsx +++ b/docs/src/pages/customization/palette/DarkTheme.tsx @@ -26,9 +26,7 @@ function Demo() { return (
- - {`${theme.palette.type} theme`} - + {`${theme.palette.type} theme`}
); } @@ -47,7 +45,7 @@ const darkTheme = createMuiTheme({ export default function DarkTheme() { return ( -
+
diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js new file mode 100644 index 00000000000000..696f6517568276 --- /dev/null +++ b/docs/src/pages/customization/palette/Intentions.js @@ -0,0 +1,93 @@ +import React from 'react'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + }, + group: { + marginTop: theme.spacing(3), + }, + color: { + display: 'flex', + alignItems: 'center', + '& div:first-of-type': { + width: theme.spacing(6), + height: theme.spacing(6), + marginRight: theme.spacing(1), + borderRadius: theme.shape.borderRadius, + }, + }, +})); + +export default function Intentions() { + const classes = useStyles(); + const theme = useTheme(); + + const item = (color, name) => ( + +
+
+ {name} + + {rgbToHex(color)} + +
+ + ); + + return ( +
+ + Primary + + + {item(theme.palette.primary.light, 'light')} + {item(theme.palette.primary.main, 'main')} + {item(theme.palette.primary.dark, 'dark')} + + + Secondary + + + {item(theme.palette.secondary.light, 'light')} + {item(theme.palette.secondary.main, 'main')} + {item(theme.palette.secondary.dark, 'dark')} + + + Error + + + {item(theme.palette.error.light, 'light')} + {item(theme.palette.error.main, 'main')} + {item(theme.palette.error.dark, 'dark')} + + + Warning + + + {item(theme.palette.warning.light, 'light')} + {item(theme.palette.warning.main, 'main')} + {item(theme.palette.warning.dark, 'dark')} + + + Info + + + {item(theme.palette.info.light, 'light')} + {item(theme.palette.info.main, 'main')} + {item(theme.palette.info.dark, 'dark')} + + + Success + + + {item(theme.palette.success.light, 'light')} + {item(theme.palette.success.main, 'main')} + {item(theme.palette.success.dark, 'dark')} + +
+ ); +} diff --git a/docs/src/pages/customization/palette/Intentions.tsx b/docs/src/pages/customization/palette/Intentions.tsx new file mode 100644 index 00000000000000..19eb8666a5f73f --- /dev/null +++ b/docs/src/pages/customization/palette/Intentions.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import Grid from '@material-ui/core/Grid'; +import Typography from '@material-ui/core/Typography'; +import { createStyles, makeStyles, Theme, useTheme, rgbToHex } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + group: { + marginTop: theme.spacing(3), + }, + color: { + display: 'flex', + alignItems: 'center', + '& div:first-of-type': { + width: theme.spacing(6), + height: theme.spacing(6), + marginRight: theme.spacing(1), + borderRadius: theme.shape.borderRadius, + }, + }, + }), +); + +export default function Intentions() { + const classes = useStyles(); + const theme = useTheme(); + + const item = (color: string, name: string) => ( + +
+
+ {name} + + {rgbToHex(color)} + +
+ + ); + + return ( +
+ + Primary + + + {item(theme.palette.primary.light, 'light')} + {item(theme.palette.primary.main, 'main')} + {item(theme.palette.primary.dark, 'dark')} + + + Secondary + + + {item(theme.palette.secondary.light, 'light')} + {item(theme.palette.secondary.main, 'main')} + {item(theme.palette.secondary.dark, 'dark')} + + + Error + + + {item(theme.palette.error.light, 'light')} + {item(theme.palette.error.main, 'main')} + {item(theme.palette.error.dark, 'dark')} + + + Warning + + + {item(theme.palette.warning.light, 'light')} + {item(theme.palette.warning.main, 'main')} + {item(theme.palette.warning.dark, 'dark')} + + + Info + + + {item(theme.palette.info.light, 'light')} + {item(theme.palette.info.main, 'main')} + {item(theme.palette.info.dark, 'dark')} + + + Success + + + {item(theme.palette.success.light, 'light')} + {item(theme.palette.success.main, 'main')} + {item(theme.palette.success.dark, 'dark')} + +
+ ); +} diff --git a/docs/src/pages/customization/palette/Palette.js b/docs/src/pages/customization/palette/Palette.js index 9c119a769c9c1b..07e348fb908c3f 100644 --- a/docs/src/pages/customization/palette/Palette.js +++ b/docs/src/pages/customization/palette/Palette.js @@ -6,8 +6,14 @@ import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ palette: { - primary: { main: purple[500] }, // Purple and green play nicely together. - secondary: { main: '#11cb5f' }, // This is just green.A700 as hex. + primary: { + // Purple and green play nicely together. + main: purple[500], + }, + secondary: { + // This is green.A700 as hex. + main: '#11cb5f', + }, }, }); diff --git a/docs/src/pages/customization/palette/Palette.tsx b/docs/src/pages/customization/palette/Palette.tsx index 9c119a769c9c1b..728c499d3c7387 100644 --- a/docs/src/pages/customization/palette/Palette.tsx +++ b/docs/src/pages/customization/palette/Palette.tsx @@ -6,8 +6,14 @@ import Button from '@material-ui/core/Button'; const theme = createMuiTheme({ palette: { - primary: { main: purple[500] }, // Purple and green play nicely together. - secondary: { main: '#11cb5f' }, // This is just green.A700 as hex. + primary: { + // Purple and green play nicely together. + main: purple[500] + }, + secondary: { + // This is green.A700 as hex. + main: '#11cb5f' + }, }, }); diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index d4c1fe1c33e79f..2d97334115143a 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -5,7 +5,6 @@ ## Intentions A color intention is a mapping of a palette to a given intention within your application. - The theme exposes the following color intentions: - primary - used to represent primary interface elements for a user. @@ -20,9 +19,11 @@ and the un-prefixed shades for the other intentions. If you want to learn more about color, you can check out [the color section](/customization/color/). -## Custom palette +{{"demo": "pages/customization/palette/Intentions.js", "bg": "inline"}} + +### Customization -You may override the default palette values by including a `palette` object as part of your theme. +You may override the default palette values by including a palette object as part of your theme. If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.palette.primary), [`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary), @@ -59,81 +60,6 @@ const theme = createMuiTheme({ }); ``` -If the intention key receives a color object as in the example above, -the following mapping is used to populate the required keys: - -```js -palette: { - primary: { - light: palette.primary[300], - main: palette.primary[500], - dark: palette.primary[700], - contrastText: getContrastText(palette.primary[500]), - }, - secondary: { - light: palette.secondary.A200, - main: palette.secondary.A400, - dark: palette.secondary.A700, - contrastText: getContrastText(palette.secondary.A400), - }, - error: { - light: palette.error[300], - main: palette.error[500], - dark: palette.error[700], - contrastText: getContrastText(palette.error[500]), - }, - warning: { - light: palette.warning[300], - main: palette.warning[500], - dark: palette.warning[700], - contrastText: getContrastText(palette.warning[500]), - }, - info: { - light: palette.info[300], - main: palette.info[500], - dark: palette.info[700], - contrastText: getContrastText(palette.info[500]), - }, - success: { - light: palette.success[300], - main: palette.success[500], - dark: palette.success[700], - contrastText: getContrastText(palette.success[500]), - }, -}, -``` - -This example illustrates how you could recreate the default palette values: - -```js -import { createMuiTheme } from '@material-ui/core/styles'; -import indigo from '@material-ui/core/colors/indigo'; -import pink from '@material-ui/core/colors/pink'; -import red from '@material-ui/core/colors/red'; -import amber from '@material-ui/core/colors/amber'; -import blue from '@material-ui/core/colors/blue'; -import green from '@material-ui/core/colors/green'; - -// All the following keys are optional, as default values are provided. -const theme = createMuiTheme({ - palette: { - primary: indigo, - secondary: pink, - error: red, - warning: amber, - info: blue, - success: green, - // Used by `getContrastText()` to maximize the contrast between the background and - // the text. - contrastThreshold: 3, - // Used to shift a color's luminance by approximately - // two indexes within its tonal palette. - // E.g., shift from Red 500 to Red 300 or Red 700. - tonalOffset: 0.2, - }, -}); -``` - **Providing the colors directly** If you wish to provide more customized colors, you can either create your own color object, @@ -156,28 +82,33 @@ const theme = createMuiTheme({ // dark: will be calculated from palette.secondary.main, contrastText: '#ffcc00', }, - // error, warning, info, success: will use the default color + // Used by `getContrastText()` to maximize the contrast between + // the background and the text. + contrastThreshold = 3, + // Used by the functions below to shift a color's luminance by approximately + // two indexes within its tonal palette. + // E.g., shift from Red 500 to Red 300 or Red 700. + tonalOffset: 0.2, }, }); ``` As in the example above, if the intention object contains custom colors using any of the -`main`, `light`, `dark` or `contrastText` keys, these map as follows: - -- If the `dark` and / or `light` keys are omitted, their value(s) will be calculated from `main`, -according to the `tonalOffset` value. +"main", "light", "dark" or "contrastText" keys, these map as follows: -- If `contrastText` is omitted, its value will be calculated to contrast with `main`, -according to the`contrastThreshold` value. +- If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main", +according to the "tonalOffset" value. +- If "contrastText" is omitted, its value will be calculated to contrast with "main", +according to the"contrastThreshold" value. -Both the `tonalOffset` and `contrastThreshold` values may be customized as needed. -A higher value for `tonalOffset` will make calculated values for `light` lighter, and `dark` darker. -A higher value for `contrastThreshold` increases the point at which a background color is considered -light, and given a dark `contrastText`. +Both the "tonalOffset" and "contrastThreshold" values may be customized as needed. +A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker. +A higher value for "contrastThreshold" increases the point at which a background color is considered +light, and given a dark "contrastText". -Note that `contrastThreshold` follows a non-linear curve. +Note that "contrastThreshold" follows a non-linear curve. -## Example +### Example {{"demo": "pages/customization/palette/Palette.js"}} @@ -185,10 +116,9 @@ Note that `contrastThreshold` follows a non-linear curve. Need inspiration? The Material Design team has built an awesome [palette configuration tool](/customization/color/#color-tool) to help you. -## Dark theme - -Material-UI comes with two theme variants, light (the default) and dark. +## Dark mode +Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting `type: 'dark'`. While it's only a single property value change, internally it modifies the palette. @@ -200,7 +130,7 @@ const darkTheme = createMuiTheme({ }); ``` -{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline"}} +{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "defaultCodeOpen": false}} ### User preference diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 3506cf2210dd14..268f2a860d6042 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -203,8 +203,8 @@ export default function createPalette(palette) { success: augmentColor(success), // The grey colors. grey, - // Used by `getContrastText()` to maximize the contrast between the background and - // the text. + // Used by `getContrastText()` to maximize the contrast between + // the background and the text. contrastThreshold, // Take a background color and return the color of the text to maximize the contrast. getContrastText, From 9139a0d40f59b7a8b79d0c84217307b4c893fd25 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 19 Dec 2019 14:21:37 +0100 Subject: [PATCH 07/13] use expect over assert --- .../customization/palette/Intentions.tsx | 1 + .../pages/customization/palette/Palette.tsx | 4 +- .../premium-themes/onepirate/modules/theme.js | 1 + .../src/styles/createPalette.test.js | 581 ++---------------- 4 files changed, 67 insertions(+), 520 deletions(-) diff --git a/docs/src/pages/customization/palette/Intentions.tsx b/docs/src/pages/customization/palette/Intentions.tsx index 19eb8666a5f73f..8e2a203a3fa426 100644 --- a/docs/src/pages/customization/palette/Intentions.tsx +++ b/docs/src/pages/customization/palette/Intentions.tsx @@ -7,6 +7,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100%', + maxWidth: 600, }, group: { marginTop: theme.spacing(3), diff --git a/docs/src/pages/customization/palette/Palette.tsx b/docs/src/pages/customization/palette/Palette.tsx index 728c499d3c7387..07e348fb908c3f 100644 --- a/docs/src/pages/customization/palette/Palette.tsx +++ b/docs/src/pages/customization/palette/Palette.tsx @@ -8,11 +8,11 @@ const theme = createMuiTheme({ palette: { primary: { // Purple and green play nicely together. - main: purple[500] + main: purple[500], }, secondary: { // This is green.A700 as hex. - main: '#11cb5f' + main: '#11cb5f', }, }, }); diff --git a/docs/src/pages/premium-themes/onepirate/modules/theme.js b/docs/src/pages/premium-themes/onepirate/modules/theme.js index 786a529836741f..8800950bd73ca9 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/theme.js +++ b/docs/src/pages/premium-themes/onepirate/modules/theme.js @@ -24,6 +24,7 @@ const rawTheme = createMuiTheme({ }, success: { xLight: green[50], + main: green[500], dark: green[700], }, }, diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 04bead17213d6b..04a31f98c9c403 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -1,4 +1,4 @@ -import { assert } from 'chai'; +import { expect } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import { blue, @@ -23,579 +23,125 @@ describe('createPalette()', () => { consoleErrorMock.reset(); }); - it('should create a material design palette according to spec', () => { - const { primary, secondary, error, warning, info, success } = createPalette({}); - const spec = { - primary: { - main: indigo[500], - light: indigo[300], - dark: indigo[700], - contrastText: dark.text.primary, - }, - secondary: { - main: pink.A400, - light: pink.A200, - dark: pink.A700, - contrastText: dark.text.primary, - }, - error: { - main: red[500], - light: red[300], - dark: red[700], - contrastText: dark.text.primary, - }, - warning: { - main: yellow[500], - light: yellow[300], - dark: yellow[700], - contrastText: light.text.primary, - }, - info: { - main: lightBlue[500], - light: lightBlue[300], - dark: lightBlue[700], - contrastText: light.text.primary, - }, - success: { - main: green[500], - light: green[300], - dark: green[700], - contrastText: light.text.primary, - }, - }; - - assert.deepStrictEqual( - { primary, secondary, error, warning, info, success }, - spec, - 'default colors should conform to spec', - ); - }); - - it('should create a palette with Material colors', () => { + it('should create a palette with a rich color object', () => { const palette = createPalette({ primary: deepOrange, - secondary: green, - error: pink, - info: blue, - warning: red, - success: lightGreen, }); - const spec = { - primary: { - main: deepOrange[500], - light: deepOrange[300], - dark: deepOrange[700], - contrastText: dark.text.primary, - }, - secondary: { - main: green.A400, - light: green.A200, - dark: green.A700, - contrastText: light.text.primary, - }, - error: { - main: pink[500], - light: pink[300], - dark: pink[700], - contrastText: dark.text.primary, - }, - warning: { - main: red[500], - light: red[300], - dark: red[700], - contrastText: dark.text.primary, - }, - info: { - main: blue[500], - light: blue[300], - dark: blue[700], - contrastText: dark.text.primary, - }, - success: { - main: lightGreen[500], - light: lightGreen[300], - dark: lightGreen[700], - contrastText: light.text.primary, - }, - }; - Object.keys(spec).forEach(color => { - Object.keys(spec[color]).forEach(tint => { - assert.strictEqual( - palette[color][tint], - spec[color][tint], - `color ${color}.${tint} should be ${spec[color][tint]}`, - ); - }); + + expect(palette.primary).to.deep.include({ + light: deepOrange[300], + main: deepOrange[500], + dark: deepOrange[700], + contrastText: dark.text.primary, }); - assert.strictEqual(palette.text, light.text, 'should use light theme text'); }); it('should create a palette with custom colors', () => { const palette = createPalette({ primary: { - main: deepOrange[500], light: deepOrange[300], + main: deepOrange[500], dark: deepOrange[700], contrastText: '#ffffff', }, - secondary: { - main: green.A400, - light: green.A200, - dark: green.A700, - contrastText: '#000000', - }, - error: { - main: pink[500], - light: pink[300], - dark: pink[700], - contrastText: '#00ff00', - }, - warning: { - main: red[500], - light: red[300], - dark: red[700], - contrastText: '#0000ff', - }, - info: { - main: blue[500], - light: blue[300], - dark: blue[700], - contrastText: '#ff0000', - }, - success: { - main: lightGreen[500], - light: lightGreen[300], - dark: lightGreen[700], - contrastText: '#ff00ff', - }, }); - assert.strictEqual( - palette.primary.main, - deepOrange[500], - 'should use deepOrange[500] as the primary main color', - ); - assert.strictEqual( - palette.primary.light, - deepOrange[300], - 'should use deepOrange[300] as the primary light color', - ); - assert.strictEqual( - palette.primary.dark, - deepOrange[700], - 'should use deepOrange[700] as the primary dark color', - ); - assert.strictEqual( - palette.primary.contrastText, - '#ffffff', - 'should use #ffffff as the secondary contrastText color', - ); - assert.strictEqual( - palette.secondary.main, - green.A400, - 'should use green.A400 as the secondary main color', - ); - assert.strictEqual( - palette.secondary.light, - green.A200, - 'should use green.A200 as the secondary light color', - ); - assert.strictEqual( - palette.secondary.dark, - green.A700, - 'should use green.A700 as the secondary dark color', - ); - assert.strictEqual( - palette.secondary.contrastText, - '#000000', - 'should use #000000 as the secondary contrastText color', - ); - assert.strictEqual( - palette.error.main, - pink[500], - 'should use pink[500] as the error main color', - ); - assert.strictEqual( - palette.error.light, - pink[300], - 'should use pink[300] as the error light color', - ); - assert.strictEqual( - palette.error.dark, - pink[700], - 'should use pink[700] as the error dark color', - ); - assert.strictEqual( - palette.error.contrastText, - '#00ff00', - 'should use #00ff00 as the error contrastText color', - ); - assert.strictEqual( - palette.warning.main, - red[500], - 'should use red[500] as the warning main color', - ); - assert.strictEqual( - palette.warning.light, - red[300], - 'should use red[300] as the warning light color', - ); - assert.strictEqual( - palette.warning.dark, - red[700], - 'should use red[700] as the warning dark color', - ); - assert.strictEqual( - palette.warning.contrastText, - '#0000ff', - 'should use #0000ff as the warning contrastText color', - ); - assert.strictEqual(palette.info.main, blue[500], 'should use blue[500] as the info main color'); - assert.strictEqual( - palette.info.light, - blue[300], - 'should use blue[300] as the info light color', - ); - assert.strictEqual(palette.info.dark, blue[700], 'should use blue[700] as the info dark color'); - assert.strictEqual( - palette.info.contrastText, - '#ff0000', - 'should use #ff0000 as the info contrastText color', - ); - assert.strictEqual( - palette.success.main, - lightGreen[500], - 'should use lightGreen[500] as the success main color', - ); - assert.strictEqual( - palette.success.light, - lightGreen[300], - 'should use lightGreen[300] as the success light color', - ); - assert.strictEqual( - palette.success.dark, - lightGreen[700], - 'should use lightGreen[700] as the success dark color', - ); - assert.strictEqual( - palette.success.contrastText, - '#ff00ff', - 'should use #ff00ff as the success contrastText color', - ); - assert.strictEqual(palette.text, light.text, 'should use light theme text'); + + expect(palette.primary.main).to.equal(deepOrange[500]); }); it('should calculate light and dark colors if not provided', () => { - const paletteOptions = { + const palette = createPalette({ primary: { main: deepOrange[500] }, - secondary: { main: green.A400 }, - error: { main: pink[500] }, - warning: { main: red[500] }, - info: { main: blue[500] }, - success: { main: lightGreen[500] }, - }; - const palette = createPalette(paletteOptions); - assert.deepEqual( - paletteOptions, - { - primary: { main: deepOrange[500] }, - secondary: { main: green.A400 }, - error: { main: pink[500] }, - warning: { main: red[500] }, - info: { main: blue[500] }, - success: { main: lightGreen[500] }, - }, - 'should not mutate createPalette argument', - ); - assert.strictEqual( - palette.primary.main, - deepOrange[500], - 'should use deepOrange[500] as the primary main color', - ); - assert.strictEqual( - palette.primary.light, - lighten(deepOrange[500], 0.2), - 'should use lighten(deepOrange[500], 0.2) as the primary light color', - ); - assert.strictEqual( - palette.primary.dark, - darken(deepOrange[500], 0.3), - 'should use darken(deepOrange[500], 0.3) as the primary dark color', - ); - assert.strictEqual( - palette.secondary.main, - green.A400, - 'should use green.A400 as the secondary main color', - ); - assert.strictEqual( - palette.secondary.light, - lighten(green.A400, 0.2), - 'should use lighten(green.A400, 0.2) as the secondary light color', - ); - assert.strictEqual( - palette.secondary.dark, - darken(green.A400, 0.3), - 'should use darken(green.A400, 0.3) as the secondary dark color', - ); - assert.strictEqual( - palette.error.main, - pink[500], - 'should use pink[500] as the error main color', - ); - assert.strictEqual( - palette.error.light, - lighten(pink[500], 0.2), - 'should use lighten(pink[500], 0.2) as the error light color', - ); - assert.strictEqual( - palette.error.dark, - darken(pink[500], 0.3), - 'should use darken(pink[500], 0.3) as the error dark color', - ); - assert.strictEqual( - palette.warning.main, - red[500], - 'should use red[500] as the warning main color', - ); - assert.strictEqual( - palette.warning.light, - lighten(red[500], 0.2), - 'should use lighten(red[500], 0.2) as the warning light color', - ); - assert.strictEqual( - palette.warning.dark, - darken(red[500], 0.3), - 'should use darken(red[500], 0.3) as the warning dark color', - ); - assert.strictEqual(palette.info.main, blue[500], 'should use blue[500] as the info main color'); - assert.strictEqual( - palette.info.light, - lighten(blue[500], 0.2), - 'should use lighten(blue[500], 0.2) as the info light color', - ); - assert.strictEqual( - palette.info.dark, - darken(blue[500], 0.3), - 'should use darken(blue[500], 0.3) as the info dark color', - ); - assert.strictEqual( - palette.success.main, - lightGreen[500], - 'should use lightGreen[500] as the success main color', - ); - assert.strictEqual( - palette.success.light, - lighten(lightGreen[500], 0.2), - 'should use lighten(lightGreen[500], 0.2) as the success light color', - ); - assert.strictEqual( - palette.success.dark, - darken(lightGreen[500], 0.3), - 'should use darken(lightGreen[500], 0.3) as the success dark color', - ); + }); + + expect(palette.primary).to.deep.include({ + main: deepOrange[500], + light: lighten(deepOrange[500], 0.2), + dark: darken(deepOrange[500], 0.3), + }); }); it('should calculate light and dark colors using the provided tonalOffset', () => { const palette = createPalette({ primary: { main: deepOrange[500] }, - secondary: { main: green.A400 }, - error: { main: red[500] }, - warning: { main: yellow[500] }, - info: { main: lightBlue[500] }, - success: { main: green[500] }, tonalOffset: 0.1, }); - // primary - assert.strictEqual( - palette.primary.main, - deepOrange[500], - 'should use deepOrange[500] as the primary main color', - ); - assert.strictEqual( - palette.primary.light, - lighten(deepOrange[500], 0.1), - 'should use lighten(deepOrange[500], 0.1) as the primary light color', - ); - assert.strictEqual( - palette.primary.dark, - darken(deepOrange[500], 0.15), - 'should use darken(deepOrange[500], 0.1) as the primary dark color', - ); - // secondary - assert.strictEqual( - palette.secondary.main, - green.A400, - 'should use green.A400 as the secondary main color', - ); - assert.strictEqual( - palette.secondary.light, - lighten(green.A400, 0.1), - 'should use lighten(green.A400, 0.1) as the secondary light color', - ); - assert.strictEqual( - palette.secondary.dark, - darken(green.A400, 0.15), - 'should use darken(green.A400, 0.1) as the secondary dark color', - ); - // error - assert.strictEqual(palette.error.main, red[500], 'should use red[500] as the error main color'); - assert.strictEqual( - palette.error.light, - lighten(red[500], 0.1), - 'should use lighten(red[500], 0.1) as the error light color', - ); - assert.strictEqual( - palette.error.dark, - darken(red[500], 0.15), - 'should use darken(red[500], 0.1) as the error dark color', - ); - // warning - assert.strictEqual( - palette.warning.main, - yellow[500], - 'should use yellow[500] as the warning main color', - ); - assert.strictEqual( - palette.warning.light, - lighten(yellow[500], 0.1), - 'should use lighten(yellow[500], 0.1) as the warning light color', - ); - assert.strictEqual( - palette.warning.dark, - darken(yellow[500], 0.15), - 'should use darken(yellow[500], 0.1) as the warning dark color', - ); - // info - assert.strictEqual( - palette.info.main, - lightBlue[500], - 'should use lightBlue[500] as the info main color', - ); - assert.strictEqual( - palette.info.light, - lighten(lightBlue[500], 0.1), - 'should use lighten(lightBlue[500], 0.1) as the info light color', - ); - assert.strictEqual( - palette.info.dark, - darken(lightBlue[500], 0.15), - 'should use darken(lightBlue[500], 0.1) as the info dark color', - ); - // success - assert.strictEqual( - palette.success.main, - green[500], - 'should use green[500] as the success main color', - ); - assert.strictEqual( - palette.success.light, - lighten(green[500], 0.1), - 'should use lighten(green[500], 0.1) as the success light color', - ); - assert.strictEqual( - palette.success.dark, - darken(green[500], 0.15), - 'should use darken(green[500], 0.1) as the success dark color', - ); + + expect(palette.primary).to.deep.include({ + main: deepOrange[500], + light: lighten(deepOrange[500], 0.1), + dark: darken(deepOrange[500], 0.15), + }); }); it('should calculate contrastText using the provided contrastThreshold', () => { const palette = createPalette({ contrastThreshold: 7 }); - assert.strictEqual( + expect( palette.primary.contrastText, - light.text.primary, 'should use dark.text.primary as the default primary contrastText color', - ); - assert.strictEqual( + ).to.equal(light.text.primary); + expect( palette.secondary.contrastText, - light.text.primary, 'should use dark.text.primary as the default secondary contrastText color', - ); + ).to.equal(light.text.primary); }); it('should create a dark palette', () => { const palette = createPalette({ type: 'dark' }); - assert.strictEqual( - palette.primary.main, + expect(palette.primary.main, 'should use indigo as the default primary color').to.equal( indigo[500], - 'should use indigo as the default primary color', ); - assert.strictEqual( - palette.secondary.main, + expect(palette.secondary.main, 'should use pink as the default secondary color').to.equal( pink.A400, - 'should use pink as the default secondary color', ); - assert.strictEqual(palette.text, dark.text, 'should use dark theme text'); - assert.strictEqual(consoleErrorMock.callCount(), 0); + expect(palette.text, 'should use dark theme text').to.equal(dark.text); + expect(consoleErrorMock.callCount()).to.equal(0); }); it('logs an error when an invalid type is specified', () => { createPalette({ type: 'foo' }); - assert.strictEqual(consoleErrorMock.callCount(), 1); - assert.match( - consoleErrorMock.args()[0][0], + expect(consoleErrorMock.callCount()).to.equal(1); + expect(consoleErrorMock.args()[0][0]).to.match( /Material-UI: the palette type `foo` is not supported/, ); }); + describe('augmentColor', () => { const palette = createPalette({}); it('should throw when the input is invalid', () => { - assert.throws(() => { + expect(() => { palette.augmentColor({}); - }, /The color object needs to have a/); + }).to.throw(/The color object needs to have a/); }); it('should accept a color', () => { - const color1 = palette.augmentColor({ ...indigo }); - assert.deepEqual( - { - main: color1.main, - light: color1.light, - dark: color1.dark, - contrastText: color1.contrastText, - }, - { - dark: '#303f9f', - light: '#7986cb', - main: '#3f51b5', - contrastText: '#fff', - }, - ); - const color2 = palette.augmentColor({ ...indigo }, 400, 200, 600); - assert.deepEqual( - { - light: color2.light, - main: color2.main, - dark: color2.dark, - contrastText: color2.contrastText, - }, - { - light: '#9fa8da', - main: '#5c6bc0', - dark: '#3949ab', - contrastText: '#fff', - }, - ); + const color1 = palette.augmentColor(indigo); + expect(color1).to.deep.include({ + dark: '#303f9f', + light: '#7986cb', + main: '#3f51b5', + contrastText: '#fff', + }); + const color2 = palette.augmentColor(indigo, 400, 200, 600); + expect(color2).to.deep.include({ + light: '#9fa8da', + main: '#5c6bc0', + dark: '#3949ab', + contrastText: '#fff', + }); }); it('should accept a partial palette color', () => { const color = palette.augmentColor({ main: indigo[500], }); - assert.deepEqual( - { - light: color.light, - main: color.main, - dark: color.dark, - contrastText: color.contrastText, - }, - { - light: 'rgb(101, 115, 195)', - main: '#3f51b5', - dark: 'rgb(44, 56, 126)', - contrastText: '#fff', - }, - ); + expect(color).to.deep.include({ + light: 'rgb(101, 115, 195)', + main: '#3f51b5', + dark: 'rgb(44, 56, 126)', + contrastText: '#fff', + }); }); }); @@ -611,7 +157,7 @@ describe('createPalette()', () => { ].forEach(testEntry => { const [argument, errorMessage] = testEntry; - assert.throws(() => getContrastText(argument), errorMessage); + expect(() => getContrastText(argument), errorMessage).to.throw(); }); }); @@ -622,9 +168,8 @@ describe('createPalette()', () => { getContrastText('#fefefe'); - assert.strictEqual(consoleErrorMock.callCount(), 1); - assert.include( - consoleErrorMock.args()[0][0], + expect(consoleErrorMock.callCount()).to.equal(3); + expect(consoleErrorMock.args()[0][0]).to.include( 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', ); }); @@ -633,7 +178,7 @@ describe('createPalette()', () => { it('should create a palette with unique object references', () => { const redPalette = createPalette({ background: { paper: 'red' } }); const bluePalette = createPalette({ background: { paper: 'blue' } }); - assert.notStrictEqual(redPalette, bluePalette); - assert.notStrictEqual(redPalette.background, bluePalette.background); + expect(redPalette).to.not.equal(bluePalette); + expect(redPalette.background).to.not.equal(bluePalette.background); }); }); From f5e93b7db586ba91df74f5cadd407f03394eece2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 19 Dec 2019 15:54:55 +0100 Subject: [PATCH 08/13] fix build --- docs/src/pages/customization/palette/Intentions.js | 1 + .../material-ui/src/styles/createPalette.test.js | 12 +----------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js index 696f6517568276..55686fb308f16c 100644 --- a/docs/src/pages/customization/palette/Intentions.js +++ b/docs/src/pages/customization/palette/Intentions.js @@ -6,6 +6,7 @@ import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ root: { width: '100%', + maxWidth: 600, }, group: { marginTop: theme.spacing(3), diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 04a31f98c9c403..df9857bd5cc867 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -1,16 +1,6 @@ import { expect } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -import { - blue, - deepOrange, - green, - indigo, - lightBlue, - lightGreen, - pink, - red, - yellow, -} from '../colors'; +import { deepOrange, indigo, pink } from '../colors'; import { darken, lighten } from './colorManipulator'; import createPalette, { dark, light } from './createPalette'; From 2d8c31a8788e64596207938bdac62cbaf4a4643f Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Fri, 20 Dec 2019 15:12:32 +0000 Subject: [PATCH 09/13] Update code comments --- docs/src/pages/customization/palette/DarkTheme.js | 4 +++- docs/src/pages/customization/palette/DarkTheme.tsx | 4 +++- packages/material-ui/src/styles/createPalette.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 82454f61687398..016f871c29a8dd 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -24,13 +24,15 @@ function Demo() { const lightTheme = createMuiTheme({ palette: { + // This is the default, so only included for comparison. type: 'light', }, }); const darkTheme = createMuiTheme({ palette: { - type: 'dark', // Switching the dark mode on is a single property value change. + // Switching the dark mode on is a single property value change. + type: 'dark', }, }); diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx index 87db0ac5e79b7a..dd6567535372bf 100644 --- a/docs/src/pages/customization/palette/DarkTheme.tsx +++ b/docs/src/pages/customization/palette/DarkTheme.tsx @@ -33,13 +33,15 @@ function Demo() { const lightTheme = createMuiTheme({ palette: { + // This is the default, so only included for comparison. type: 'light', }, }); const darkTheme = createMuiTheme({ palette: { - type: 'dark', // Switching the dark mode on is a single property value change. + // Switching the dark mode on is a single property value change. + type: 'dark', }, }); diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 268f2a860d6042..d5d2781bd9b92b 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -206,7 +206,7 @@ export default function createPalette(palette) { // Used by `getContrastText()` to maximize the contrast between // the background and the text. contrastThreshold, - // Take a background color and return the color of the text to maximize the contrast. + // Takes a background color and returns the text color that maximizes the contrast. getContrastText, // Generate a rich color object. augmentColor, From 82a3f482aab0f6e1f2a895019c8b2e7083f0c2a5 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Fri, 20 Dec 2019 17:18:41 -0500 Subject: [PATCH 10/13] Bringing code comments to consistency --- packages/material-ui/src/styles/createPalette.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index d5d2781bd9b92b..a4d0c439c516ac 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -195,11 +195,11 @@ export default function createPalette(palette) { secondary: augmentColor(secondary, 'A400', 'A200', 'A700'), // The colors used to represent interface elements that the user should be made aware of. error: augmentColor(error), - // The colors used to represent important info that may have negative consequences and user should be aware of. + // The colors used to represent potentially dangerous actions or important messages. warning: augmentColor(warning), - // The colors used to present important information without context. + // The colors used to present information to the user that is neutral and not necessarily important. info: augmentColor(info), - // The colors used to indicate successful action. + // The colors used to indicate a successful completion of an action that user triggered. success: augmentColor(success), // The grey colors. grey, From 90a6829a9a09ca00ab2c8a832294ba175ef8a32c Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Fri, 20 Dec 2019 18:04:02 -0500 Subject: [PATCH 11/13] Update docs/src/pages/customization/palette/palette.md Co-Authored-By: Matt --- docs/src/pages/customization/palette/palette.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index 2d97334115143a..b48c70c2769fba 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -12,7 +12,7 @@ The theme exposes the following color intentions: - error - used to represent interface elements that the user should be made aware of. - warning - used to represent potentially dangerous actions or important messages. - info - used to present information to the user that is neutral and not necessarily important. -- success - used to indicate a successful completion of an action that user triggered. +- success - used to indicate the successful completion of an action that user triggered. The default palette uses the shades prefixed with `A` (`A200`, etc.) for the secondary intention, and the un-prefixed shades for the other intentions. From b1afe330ec09c6dc95b9c166f14cad0e98be1b8d Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Fri, 20 Dec 2019 18:04:10 -0500 Subject: [PATCH 12/13] Update packages/material-ui/src/styles/createPalette.js Co-Authored-By: Matt --- packages/material-ui/src/styles/createPalette.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index a4d0c439c516ac..bbcb4cfaeb41bd 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -199,7 +199,7 @@ export default function createPalette(palette) { warning: augmentColor(warning), // The colors used to present information to the user that is neutral and not necessarily important. info: augmentColor(info), - // The colors used to indicate a successful completion of an action that user triggered. + // The colors used to indicate the successful completion of an action that user triggered. success: augmentColor(success), // The grey colors. grey, From 727efb460b82bc2f60de8800f2d675401b5c671d Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Fri, 20 Dec 2019 18:14:05 -0500 Subject: [PATCH 13/13] Update docs/src/pages/customization/palette/palette.md Co-Authored-By: Matt --- docs/src/pages/customization/palette/palette.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md index b48c70c2769fba..806d608c966f4d 100644 --- a/docs/src/pages/customization/palette/palette.md +++ b/docs/src/pages/customization/palette/palette.md @@ -120,7 +120,7 @@ Need inspiration? The Material Design team has built an awesome [palette configu Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting `type: 'dark'`. -While it's only a single property value change, internally it modifies the palette. +While it's only a single property value change, internally it modifies several palette values. ```js const darkTheme = createMuiTheme({