From c4769db0ae61da6fc76e068b8b9b678a9aa1aa84 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 11:22:21 +0700 Subject: [PATCH 1/9] wip --- .../material-ui/src/styles/createPalette.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 4e05a42dc329f2..d4cbfd11ff8081 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -93,11 +93,6 @@ function addLightOrDark(intent, direction, shade, tonalOffset) { export default function createPalette(palette) { const { - primary = { - light: indigo[300], - main: indigo[500], - dark: indigo[700], - }, secondary = { light: pink.A200, main: pink.A400, @@ -129,6 +124,24 @@ export default function createPalette(palette) { ...other } = palette; + let primary = palette.primary; + if (!primary) { + if (mode === 'dark') { + primary = { + light: indigo[300], + main: indigo[500], + dark: indigo[700], + }; + } + if (mode === 'light') { + primary = { + light: indigo[300], + main: indigo[500], + dark: indigo[700], + }; + } + } + // Use the same logic as // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59 // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54 From cc490827af3ff9e9e44f2e239047c8a2b9edd281 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 14:46:30 +0700 Subject: [PATCH 2/9] new default color --- .../material-ui/src/styles/createPalette.js | 85 ++++++++++++------- 1 file changed, 53 insertions(+), 32 deletions(-) diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index d4cbfd11ff8081..8ec8a3b7d2433b 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -2,8 +2,8 @@ import { deepmerge } from '@material-ui/utils'; import MuiError from '@material-ui/utils/macros/MuiError.macro'; import common from '../colors/common'; import grey from '../colors/grey'; -import indigo from '../colors/indigo'; -import pink from '../colors/pink'; +import purple from '../colors/purple'; +import cyan from '../colors/cyan'; import red from '../colors/red'; import orange from '../colors/orange'; import blue from '../colors/blue'; @@ -91,27 +91,62 @@ function addLightOrDark(intent, direction, shade, tonalOffset) { } } -export default function createPalette(palette) { - const { - secondary = { - light: pink.A200, - main: pink.A400, - dark: pink.A700, - }, - error = { - light: red[300], +function getDefaultPrimary(mode = 'light') { + if (mode === 'dark') { + return { + main: blue[200], + light: blue[50], + dark: blue[400], + }; + } + return { + main: blue[700], + light: blue[400], + dark: blue[800], + }; +} + +function getDefaultSecondary(mode = 'light') { + if (mode === 'dark') { + return { + main: purple[200], + light: purple[50], + dark: purple[400], + }; + } + return { + main: purple[500], + light: purple[300], + dark: purple[700], + }; +} + +function getDefaultError(mode = 'light') { + if (mode === 'dark') { + return { main: red[500], + light: red[300], dark: red[700], - }, + }; + } + return { + main: red[700], + light: red[400], + dark: red[800], + }; +} + +export default function createPalette(palette) { + const { warning = { light: orange[300], main: orange[500], dark: orange[700], }, info = { - light: blue[300], - main: blue[500], - dark: blue[700], + light: cyan[300], + main: cyan[500], + dark: cyan[700], }, success = { light: green[300], @@ -124,23 +159,9 @@ export default function createPalette(palette) { ...other } = palette; - let primary = palette.primary; - if (!primary) { - if (mode === 'dark') { - primary = { - light: indigo[300], - main: indigo[500], - dark: indigo[700], - }; - } - if (mode === 'light') { - primary = { - light: indigo[300], - main: indigo[500], - dark: indigo[700], - }; - } - } + const primary = palette.primary || getDefaultPrimary(mode); + const secondary = palette.secondary || getDefaultSecondary(mode); + const error = palette.error || getDefaultError(mode); // Use the same logic as // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59 From 67ad326e5deb0e29d5809494a16e508972c79b57 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 15:19:54 +0700 Subject: [PATCH 3/9] remove hard coded color test --- packages/material-ui/src/FormLabel/FormLabel.test.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/FormLabel/FormLabel.test.js b/packages/material-ui/src/FormLabel/FormLabel.test.js index a8f525e5838be5..96a511211fdcfb 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.test.js +++ b/packages/material-ui/src/FormLabel/FormLabel.test.js @@ -160,20 +160,16 @@ describe('', () => { expect(container.firstChild).to.have.class(classes.colorSecondary); }); - it('should have the focused class and style', () => { - const { container, getByTestId } = render( - , - ); + it('should have the focused class', () => { + const { container } = render(); expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.focused); - expect(getByTestId('FormLabel')).toHaveComputedStyle({ color: 'rgb(245, 0, 87)' }); }); - it('should have the error class and style, even when focused', () => { - const { container, getByTestId } = render( + it('should have the error class, even when focused', () => { + const { container } = render( , ); expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.error); - expect(getByTestId('FormLabel')).toHaveComputedStyle({ color: 'rgb(244, 67, 54)' }); }); }); }); From ab584bcb0a8e128dc753ee88306f85abb2da7e6f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 15:32:54 +0700 Subject: [PATCH 4/9] add one more error log expect --- .../material-ui/src/styles/createPalette.test.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 6e4b13392c0a40..db1a4695a0a442 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import { deepOrange, indigo, pink } from '../colors'; +import { deepOrange, blue, purple, indigo } from '../colors'; import { darken, lighten } from './colorManipulator'; import createPalette, { dark, light } from './createPalette'; @@ -85,11 +85,11 @@ describe('createPalette()', () => { it('should create a dark palette', () => { const palette = createPalette({ mode: 'dark' }); - expect(palette.primary.main, 'should use indigo as the default primary color').to.equal( - indigo[500], + expect(palette.primary.main, 'should use blue as the default primary color').to.equal( + blue[200], ); - expect(palette.secondary.main, 'should use pink as the default secondary color').to.equal( - pink.A400, + 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); }); @@ -176,8 +176,9 @@ describe('createPalette()', () => { contrastThreshold: 0, })); }).toErrorDev([ - 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', - 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', + 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // warning palette + 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // info palette + 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', // success palette ]); expect(() => { From 56c106de835bb19a4186ec222276e80bb3ca1258 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 16:23:54 +0700 Subject: [PATCH 5/9] update primary dark mode --- packages/material-ui/src/colors/blue.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/colors/blue.js b/packages/material-ui/src/colors/blue.js index 1dfca4a9761da0..69dce63b183378 100644 --- a/packages/material-ui/src/colors/blue.js +++ b/packages/material-ui/src/colors/blue.js @@ -1,4 +1,5 @@ const blue = { + 0: '#115293', 50: '#e3f2fd', 100: '#bbdefb', 200: '#90caf9', From 7b279aba37b900e830d98f1198cb6d49687e3b4b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 2 Jun 2021 16:25:24 +0700 Subject: [PATCH 6/9] revert change --- packages/material-ui/src/colors/blue.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/colors/blue.js b/packages/material-ui/src/colors/blue.js index 69dce63b183378..1dfca4a9761da0 100644 --- a/packages/material-ui/src/colors/blue.js +++ b/packages/material-ui/src/colors/blue.js @@ -1,5 +1,4 @@ const blue = { - 0: '#115293', 50: '#e3f2fd', 100: '#bbdefb', 200: '#90caf9', From 0fbddad20c275ef93db14e24362397fbf02390ec Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 3 Jun 2021 10:04:51 +0700 Subject: [PATCH 7/9] use value from theme --- .../src/FormLabel/FormLabel.test.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/FormLabel/FormLabel.test.js b/packages/material-ui/src/FormLabel/FormLabel.test.js index 96a511211fdcfb..f2f93e30288b2d 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.test.js +++ b/packages/material-ui/src/FormLabel/FormLabel.test.js @@ -4,6 +4,8 @@ import { expect } from 'chai'; import { createMount, describeConformanceV5, act, createClientRender } from 'test/utils'; import FormLabel, { formLabelClasses as classes } from '@material-ui/core/FormLabel'; import FormControl, { useFormControl } from '@material-ui/core/FormControl'; +import { hexToRgb } from '@material-ui/core/styles'; +import defaultTheme from '../styles/defaultTheme'; describe('', () => { const render = createClientRender(); @@ -160,16 +162,24 @@ describe('', () => { expect(container.firstChild).to.have.class(classes.colorSecondary); }); - it('should have the focused class', () => { - const { container } = render(); + it('should have the focused class and style', () => { + const { container, getByTestId } = render( + , + ); expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.focused); + expect(getByTestId('FormLabel')).toHaveComputedStyle({ + color: hexToRgb(defaultTheme.palette.secondary.main), + }); }); - it('should have the error class, even when focused', () => { - const { container } = render( + it('should have the error class and style, even when focused', () => { + const { container, getByTestId } = render( , ); expect(container.querySelector(`.${classes.colorSecondary}`)).to.have.class(classes.error); + expect(getByTestId('FormLabel')).toHaveComputedStyle({ + color: hexToRgb(defaultTheme.palette.error.main), + }); }); }); }); From d7232547bbfa1109f675d86170c4a0c59584c5f8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 5 Jun 2021 09:33:39 +0700 Subject: [PATCH 8/9] fix code color --- docs/src/modules/components/MarkdownElement.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 259285ca7e4fe5..d708856836175a 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; -import { createTheme } from '@material-ui/core/styles'; +import { createTheme, alpha } from '@material-ui/core/styles'; const styles = (theme) => ({ root: { @@ -36,7 +36,9 @@ const styles = (theme) => ({ padding: '0 3px', color: theme.palette.text.primary, backgroundColor: - theme.palette.mode === 'light' ? 'rgba(255, 229, 100, 0.2)' : 'rgba(255, 229, 100, 0.2)', + theme.palette.mode === 'light' + ? 'rgba(255, 229, 100, 0.2)' + : alpha(theme.palette.primary.main, 0.08), fontSize: '.85em', borderRadius: 2, }, @@ -170,7 +172,8 @@ const styles = (theme) => ({ }, '& a, & a code': { // Style taken from the Link component - color: theme.palette.primary.main, + color: + theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.dark, textDecoration: 'none', '&:hover': { textDecoration: 'underline', From ffa7c77971e79663f232592f119d8439892905f1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 6 Jun 2021 20:53:52 +0700 Subject: [PATCH 9/9] target only `a code` --- docs/src/modules/components/MarkdownElement.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index d708856836175a..d5d4d91ca2bbd5 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; -import { createTheme, alpha } from '@material-ui/core/styles'; +import { createTheme, alpha, darken } from '@material-ui/core/styles'; const styles = (theme) => ({ root: { @@ -172,13 +172,18 @@ const styles = (theme) => ({ }, '& a, & a code': { // Style taken from the Link component - color: - theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.dark, + color: theme.palette.primary.main, textDecoration: 'none', '&:hover': { textDecoration: 'underline', }, }, + '& a code': { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary.main + : darken(theme.palette.primary.main, 0.04), + }, '& img, video': { maxWidth: '100%', },