From 25cee16b360ce19eafef3e8d8df772c65af81c7c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Jul 2022 09:27:26 +0700 Subject: [PATCH 001/125] create BrandingCssVarsProvider --- docs/src/BrandingCssVarsProvider.tsx | 185 +++++++++++++++++++++++++++ docs/src/modules/brandingTheme.ts | 81 ++++++------ 2 files changed, 229 insertions(+), 37 deletions(-) create mode 100644 docs/src/BrandingCssVarsProvider.tsx diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx new file mode 100644 index 00000000000000..8f34699ab20968 --- /dev/null +++ b/docs/src/BrandingCssVarsProvider.tsx @@ -0,0 +1,185 @@ +import * as React from 'react'; +import { + alpha, + Experimental_CssVarsProvider as CssVarsProvider, + experimental_extendTheme as extendTheme, + PaletteColorOptions, +} from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { NextNProgressBar } from 'docs/src/modules/components/AppFrame'; +import { blue, blueDark, grey, error, success, warning } from 'docs/src/modules/brandingTheme'; + +const systemFont = [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', +]; + +declare module '@mui/material/styles' { + interface TypeText { + display1: string; + display2: string; + h5: string; + } + + interface PaletteOptions { + primaryDark: PaletteColorOptions; + } +} + +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: blue, + primaryDark: blueDark, + common: { + black: '#1D1D1D', + }, + divider: grey[100], + text: { + primary: grey[900], + secondary: grey[700], + display2: 'var(--mui-palette-primaryDark-700)', + h5: 'var(--mui-palette-primary-main)', + }, + grey, + error, + success: { + ...success, + main: '#1AA251', // contrast 3.31:1 + }, + warning, + }, + }, + dark: { + palette: { + primary: { + ...blue, + main: blue[400], + }, + primaryDark: blueDark, + background: { + default: blueDark[800], + paper: blueDark[900], + }, + common: { + black: '#1D1D1D', + }, + divider: alpha(blue[100], 0.08), + text: { + primary: '#fff', + secondary: grey[400], + display1: 'var(--mui-palette-primaryDark-900)', + display2: 'var(--mui-palette-grey-100)', + h5: 'var(--mui-palette-primary-300)', + }, + grey, + error, + success: { + ...success, + main: '#1DB45A', // contrast 6.17:1 (blueDark.800) + }, + warning, + }, + }, + }, + shape: { + borderRadius: 10, + }, + spacing: 10, + typography: { + fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), + fontFamilyCode: ['Consolas', 'Menlo', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace'].join( + ',', + ), + fontFamilySystem: systemFont.join(','), + fontWeightSemiBold: 600, + fontWeightExtraBold: 800, + h1: { + fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','), + fontSize: 'clamp(2.625rem, 1.2857rem + 3.5714vw, 4rem)', + fontWeight: 800, + lineHeight: 78 / 70, + color: 'var(--mui-palette-text-display1)', + }, + h2: { + fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','), + fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)', + fontWeight: 800, + lineHeight: 44 / 36, + color: 'var(--mui-palette-text-display2)', + }, + h3: { + fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','), + fontSize: '2.25rem', // 36px + lineHeight: 44 / 36, + letterSpacing: 0.2, + }, + h4: { + fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','), + fontSize: '1.75rem', // 28px + lineHeight: 42 / 28, + letterSpacing: 0.2, + }, + h5: { + fontFamily: ['"PlusJakartaSans-Bold"', ...systemFont].join(','), + fontSize: '1.5rem', // 24px + lineHeight: 36 / 24, + letterSpacing: 0.1, + color: 'var(--mui-palette-text-h5)', + }, + h6: { + fontSize: '1.25rem', // 20px + lineHeight: 30 / 20, + }, + button: { + textTransform: 'initial', + fontWeight: 700, + letterSpacing: 0, + }, + subtitle1: { + fontSize: '1.125rem', // 18px + lineHeight: 24 / 18, + letterSpacing: 0, + fontWeight: 500, + }, + body1: { + fontSize: '1rem', // 16px + lineHeight: 24 / 16, + letterSpacing: 0, + }, + body2: { + fontSize: '0.875rem', // 14px + lineHeight: 21 / 14, + letterSpacing: 0, + }, + caption: { + display: 'inline-block', + fontSize: '0.75rem', // 12px + lineHeight: 18 / 12, + letterSpacing: 0, + fontWeight: 700, + }, + allVariants: { + scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', + }, + }, +}); + +export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + ); +} diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 34813ffe48fbb2..d432b70f106877 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -28,12 +28,14 @@ declare module '@mui/material/styles/createTypography' { fontWeightSemiBold?: number; fontWeightExtraBold?: number; fontFamilyCode?: string; + fontFamilySystem?: string; } interface Typography { fontWeightSemiBold: number; fontWeightExtraBold: number; fontFamilyCode: string; + fontFamilySystem: string; } } @@ -72,7 +74,7 @@ export const blueDark = { 800: '#001E3C', 900: '#0A1929', }; -const grey = { +export const grey = { 50: '#F3F6F9', 100: '#E7EBF0', 200: '#E0E3E7', @@ -84,6 +86,44 @@ const grey = { 800: '#2D3843', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text 900: '#1A2027', }; +export const error = { + 50: '#FFF0F1', + 100: '#FFDBDE', + 200: '#FFBDC2', + 300: '#FF99A2', + 400: '#FF7A86', + 500: '#FF505F', + main: '#EB0014', // contrast 4.63:1 + 600: '#EB0014', + 700: '#C70011', + 800: '#94000D', + 900: '#570007', +}; +export const success = { + 50: '#E9FBF0', + 100: '#C6F6D9', + 200: '#9AEFBC', + 300: '#6AE79C', + 400: '#3EE07F', + 500: '#21CC66', + 600: '#1DB45A', + 700: '#1AA251', + 800: '#178D46', + 900: '#0F5C2E', +}; +export const warning = { + 50: '#FFF9EB', + 100: '#FFF3C1', + 200: '#FFECA1', + 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text + 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text + main: '#DEA500', + 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text + 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text + 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text +}; // context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 const systemFont = [ @@ -141,50 +181,17 @@ export const getDesignTokens = (mode: 'light' | 'dark') => }, }), grey, - error: { - 50: '#FFF0F1', - 100: '#FFDBDE', - 200: '#FFBDC2', - 300: '#FF99A2', - 400: '#FF7A86', - 500: '#FF505F', - main: '#EB0014', // contrast 4.63:1 - 600: '#EB0014', - 700: '#C70011', - 800: '#94000D', - 900: '#570007', - }, + error, success: { - 50: '#E9FBF0', - 100: '#C6F6D9', - 200: '#9AEFBC', - 300: '#6AE79C', - 400: '#3EE07F', - 500: '#21CC66', - 600: '#1DB45A', + ...success, ...(mode === 'dark' && { main: '#1DB45A', // contrast 6.17:1 (blueDark.800) }), ...(mode === 'light' && { main: '#1AA251', // contrast 3.31:1 }), - 700: '#1AA251', - 800: '#178D46', - 900: '#0F5C2E', - }, - warning: { - 50: '#FFF9EB', - 100: '#FFF3C1', - 200: '#FFECA1', - 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text - 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text - main: '#DEA500', - 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text - 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text - 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text }, + warning, }, shape: { borderRadius: 10, From 048c82657a525ac77282a252fa225a9be7ed7c40 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Jul 2022 09:28:18 +0700 Subject: [PATCH 002/125] replace with Css vars --- docs/pages/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index b9e1c546591201..2f046b248c008f 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -12,13 +12,13 @@ import Testimonials from 'docs/src/components/home/Testimonials'; import Sponsors from 'docs/src/components/home/Sponsors'; import HeroEnd from 'docs/src/components/home/HeroEnd'; import AppFooter from 'docs/src/layouts/AppFooter'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import NewsletterToast from 'docs/src/components/home/NewsletterToast'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; export default function Home() { return ( - + - + ); } From f9faf82977520596a7bbc53dfcc05cb7a721b9fe Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Jul 2022 09:28:26 +0700 Subject: [PATCH 003/125] update task card --- docs/src/components/showcase/TaskCard.tsx | 208 ++++++++-------------- 1 file changed, 74 insertions(+), 134 deletions(-) diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx index 82dea1a7262304..2bf0e5c963abb4 100644 --- a/docs/src/components/showcase/TaskCard.tsx +++ b/docs/src/components/showcase/TaskCard.tsx @@ -1,151 +1,91 @@ import * as React from 'react'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Fade from '@mui/material/Fade'; -import LinearProgress from '@mui/material/LinearProgress'; +import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; import Typography from '@mui/material/Typography'; import CodeRounded from '@mui/icons-material/CodeRounded'; import ScheduleRounded from '@mui/icons-material/ScheduleRounded'; -declare module '@mui/material/Paper' { - interface PaperPropsVariantOverrides { - gradient: true; - } -} - -const primary = { - 50: '#F0F7FF', - 100: '#C2E0FF', - 200: '#80BFFF', - 300: '#66B2FF', - 400: '#3399FF', - main: '#007FFF', // contrast 3.83:1 - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B2', - 800: '#004C99', - 900: '#003A75', -}; - -const theme = createTheme({ - palette: { mode: 'dark', primary }, - shape: { - borderRadius: 10, - }, - spacing: 10, - typography: { - fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','), - h6: { - lineHeight: 1.2, - fontWeight: 700, - }, - }, - components: { - MuiPaper: { - variants: [ - { - props: { variant: 'gradient' }, - style: { - background: `linear-gradient(to right bottom, ${primary.main}, ${primary[700]} 120%)`, - boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)', - }, - }, - ], - }, - MuiAvatar: { - styleOverrides: { - root: { - border: '1px solid #fff', - }, - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: { - borderRadius: 10, - backgroundColor: 'rgba(255,255,255,0.12)', - }, - bar: { - borderRadius: 10, - backgroundColor: '#fff', - }, - }, - }, - }, -}); - export default function TaskCard() { return ( - - - - - - - March 25th - + + ({ + minWidth: 280, + maxWidth: 360, + minHeight: 280, + display: 'flex', + flexDirection: 'column', + p: 2.5, + background: `linear-gradient(to right bottom, ${theme.vars.palette.primary[500]}, ${theme.vars.palette.primary[700]} 120%)`, + })} + > + + + + March 25th + + + + + - - - - - - Check the docs for getting every component API + + Check the docs for getting every component API + + + + + + + Assigned to - - - - - - Assigned to - - - Michael Scott - - - - - - - 60% + + Michael Scott - - - + + + + + 60% + + + + ); } From 7ed9c4878edaf8547c8a5bb39cb1c436f0a4c2ab Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Jul 2022 11:02:13 +0700 Subject: [PATCH 004/125] add resolveTheme prop --- .../src/cssVars/createCssVarsProvider.d.ts | 14 +++++++------- .../src/cssVars/createCssVarsProvider.js | 16 ++++++++++++++-- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index af76711d05982e..adb21488736d5d 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -44,6 +44,13 @@ export interface CssVarsProviderConfig { * @default true */ enableColorScheme?: boolean; + /** + * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider. + * + * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate + * variants from those tokens. + */ + resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system. /** * A function to determine if the key, value should be attached as CSS Variable * `keys` is an array that represents the object path keys. @@ -117,13 +124,6 @@ export default function createCssVarsProvider( * } */ theme: any; - /** - * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider. - * - * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate - * variants from those tokens. - */ - resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system. }, ): CreateCssVarsProviderResult; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 6cb4de64258b46..6b3ec3b0e36cff 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -26,7 +26,7 @@ export default function createCssVarsProvider(options) { disableTransitionOnChange: designSystemTransitionOnChange = false, enableColorScheme: designSystemEnableColorScheme = true, shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar, - resolveTheme, + resolveTheme: designSystemResolveTheme, } = options; if ( @@ -65,6 +65,7 @@ export default function createCssVarsProvider(options) { colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement, colorSchemeSelector = ':root', shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar, + resolveTheme, }) { const hasMounted = React.useRef(false); @@ -215,6 +216,13 @@ export default function createCssVarsProvider(options) { }; }, []); + if (designSystemResolveTheme) { + theme = designSystemResolveTheme(theme); + } + if (resolveTheme) { + theme = resolveTheme(theme); + } + return ( - {children} + {children} ); } @@ -280,6 +288,10 @@ export default function createCssVarsProvider(options) { * The key in the local storage used to store current color scheme. */ modeStorageKey: PropTypes.string, + /** + * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider. + */ + resolveTheme: PropTypes.func, /** * A function to determine if the key, value should be attached as CSS Variable */ From 7c70d8336dbbebb3af4614646b50ad352fe76c43 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 7 Jul 2022 11:04:08 +0700 Subject: [PATCH 005/125] use CSS variables in Button theme --- docs/src/BrandingCssVarsProvider.tsx | 20 +++++- docs/src/modules/brandingTheme.ts | 92 ++++++++++++++++++++-------- 2 files changed, 85 insertions(+), 27 deletions(-) diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx index 8f34699ab20968..a6e0812d8dd430 100644 --- a/docs/src/BrandingCssVarsProvider.tsx +++ b/docs/src/BrandingCssVarsProvider.tsx @@ -4,10 +4,19 @@ import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme, PaletteColorOptions, + Theme, } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { NextNProgressBar } from 'docs/src/modules/components/AppFrame'; -import { blue, blueDark, grey, error, success, warning } from 'docs/src/modules/brandingTheme'; +import { + blue, + blueDark, + grey, + error, + success, + warning, + getThemedComponents, +} from 'docs/src/modules/brandingTheme'; const systemFont = [ '-apple-system', @@ -174,9 +183,16 @@ const theme = extendTheme({ }, }); +const resolveTheme = (parsedTheme: Theme) => { + return { + ...parsedTheme, + ...getThemedComponents(parsedTheme), + }; +}; + export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) { return ( - + {children} diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index d432b70f106877..9ad4db785cc73a 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1,4 +1,5 @@ import { deepmerge } from '@mui/utils'; +import type {} from '@mui/material/themeCssVarsAugmentation'; import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; @@ -308,7 +309,7 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen marginLeft: theme.spacing(-1), }, containedPrimary: { - backgroundColor: theme.palette.primary[500], + backgroundColor: (theme.vars || theme).palette.primary[500], color: '#fff', }, }, @@ -317,17 +318,32 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen // @ts-ignore internal repo module augmentation issue props: { variant: 'code' }, style: { - color: - theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800], border: '1px solid', - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[400] - : theme.palette.grey[300], - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[50], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[400] + : theme.palette.grey[800], + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[400] + : theme.palette.grey[300], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[50], + } + : { + color: theme.vars.palette.grey[800], + borderColor: theme.vars.palette.grey[300], + backgroundColor: theme.vars.palette.grey[50], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[400], + borderColor: theme.vars.palette.primaryDark[300], + backgroundColor: theme.vars.palette.primaryDark[700], + }, + }), fontFamily: theme.typography.fontFamilyCode, fontWeight: 400, fontSize: defaultTheme.typography.pxToRem(13), // 14px @@ -335,28 +351,54 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen letterSpacing: 0, WebkitFontSmoothing: 'subpixel-antialiased', '&:hover, &.Mui-focusVisible': { - borderColor: theme.palette.primary.main, - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[50], - '& .MuiButton-endIcon': { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary.main, - }, + borderColor: (theme.vars || theme).palette.primary.main, + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[50], + '& .MuiButton-endIcon': { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary.main, + }, + } + : { + backgroundColor: theme.vars.palette.primary[50], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[600], + }, + '& .MuiButton-endIcon': { + color: theme.vars.palette.primary.main, + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primary[300], + }, + }, + }), }, '& .MuiButton-startIcon': { - color: theme.palette.grey[400], + color: (theme.vars || theme).palette.grey[400], }, '& .MuiButton-endIcon': { display: 'inline-block', position: 'absolute', right: 0, marginRight: 10, - color: - theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[700], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[400] + : theme.palette.grey[700], + } + : { + color: theme.vars.palette.grey[400], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[700], + }, + }), }, }, }, From 9ae7cb5bc492f3a25ef8d554c99bff9ca3c4a73e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:22:57 +0700 Subject: [PATCH 006/125] add getInitColorSchemeScript to index --- docs/pages/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 2f046b248c008f..a009b389be3c5e 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Head from 'docs/src/modules/components/Head'; +import { getInitColorSchemeScript } from '@mui/material/styles'; import NoSsr from '@mui/material/NoSsr'; import Divider from '@mui/material/Divider'; import AppHeader from 'docs/src/layouts/AppHeader'; @@ -22,7 +23,9 @@ export default function Home() { + > + {getInitColorSchemeScript({ enableSystem: true })} + From 1ddc314716e246d8cd007c1353ee39780a42fd43 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:23:19 +0700 Subject: [PATCH 007/125] adjust ssr toggle mode --- .../src/components/header/ThemeModeToggle.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index daded92a48d0c0..abab686eed1e26 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/docs/src/components/header/ThemeModeToggle.tsx @@ -1,4 +1,6 @@ import * as React from 'react'; +import { useRouter } from 'next/router'; +import { useColorScheme } from '@mui/material/styles'; import IconButton from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; @@ -10,6 +12,35 @@ interface ThemeModeToggleProps { } export default function ThemeModeToggle(props: ThemeModeToggleProps) { + const router = useRouter(); + const [mounted, setMounted] = React.useState(false); + const { mode, setMode } = useColorScheme(); + React.useEffect(() => { + setMounted(true); + }, []); + if (router.pathname === '/') { + if (!mounted) { + return ; + } + return ( + + { + props.onChange(!props.checked); + setMode(mode === 'dark' ? 'light' : 'dark'); + }} + > + {mode === 'dark' ? ( + + ) : ( + + )} + + + ); + } return ( props.onChange(!props.checked)}> From 0e838bf58e8e4912e2ec90f6a3162f89f0aa8891 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:23:40 +0700 Subject: [PATCH 008/125] fix display1 color --- docs/src/BrandingCssVarsProvider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx index a6e0812d8dd430..24203e4e602f6f 100644 --- a/docs/src/BrandingCssVarsProvider.tsx +++ b/docs/src/BrandingCssVarsProvider.tsx @@ -56,6 +56,7 @@ const theme = extendTheme({ text: { primary: grey[900], secondary: grey[700], + display1: 'var(--mui-palette-primaryDark-900)', display2: 'var(--mui-palette-primaryDark-700)', h5: 'var(--mui-palette-primary-main)', }, @@ -86,7 +87,7 @@ const theme = extendTheme({ text: { primary: '#fff', secondary: grey[400], - display1: 'var(--mui-palette-primaryDark-900)', + display1: '#fff', display2: 'var(--mui-palette-grey-100)', h5: 'var(--mui-palette-primary-300)', }, From fdc2244303ffec112fa60053829ef4ca37719714 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:23:55 +0700 Subject: [PATCH 009/125] update IconButton branding theme --- docs/src/modules/brandingTheme.ts | 77 +++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 9ad4db785cc73a..7f9ab8cb915f87 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -2,6 +2,7 @@ import { deepmerge } from '@mui/utils'; import type {} from '@mui/material/themeCssVarsAugmentation'; import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; +import { colorChannel } from '@mui/system'; declare module '@mui/material/styles/createPalette' { interface ColorRange { @@ -373,7 +374,7 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen '& .MuiButton-endIcon': { color: theme.vars.palette.primary.main, [theme.getColorSchemeSelector('dark')]: { - backgroundColor: theme.vars.palette.primary[300], + color: theme.vars.palette.primary[300], }, }, }), @@ -408,10 +409,19 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen style: { fontSize: theme.typography.pxToRem(14), fontWeight: 700, - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + } + : { + color: theme.vars.palette.primary[600], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.primary[300], + }, + }), mb: 1, '& svg': { ml: -0.5, @@ -427,26 +437,45 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen style: { height: 34, width: 34, - border: `1px solid ${ - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200] - }`, + border: `1px solid`, + ...(!theme.vars + ? { + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[500], + '&:hover': { + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[300], + background: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + } + : { + borderColor: theme.vars.palette.grey[200], + color: theme.vars.palette.primary[500], + [theme.getColorSchemeSelector('dark')]: { + borderColor: theme.vars.palette.grey[700], + color: theme.vars.palette.primary[300], + }, + '&:hover': { + borderColor: theme.vars.palette.grey[300], + background: theme.vars.palette.grey[50], + [theme.getColorSchemeSelector('dark')]: { + borderColor: theme.vars.palette.primaryDark[600], + background: alpha(theme.palette.primaryDark[700], 0.4), + }, + }, + }), borderRadius: theme.shape.borderRadius, - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[500], - '&:hover': { - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.grey[300], - background: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, }, }, ], From 69809150d3b354dcc30457777a1475f1ad3e5a38 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:29:32 +0700 Subject: [PATCH 010/125] update Menu branding theme --- docs/src/modules/brandingTheme.ts | 84 ++++++++++++++++++++----------- 1 file changed, 54 insertions(+), 30 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 7f9ab8cb915f87..b458d1f754b8c2 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -2,7 +2,6 @@ import { deepmerge } from '@mui/utils'; import type {} from '@mui/material/themeCssVarsAugmentation'; import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; -import { colorChannel } from '@mui/system'; declare module '@mui/material/styles/createPalette' { interface ColorRange { @@ -484,42 +483,67 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen styleOverrides: { paper: { minWidth: 160, - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, backgroundImage: 'none', - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[900] - : theme.palette.background.paper, - border: `1px solid ${ - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200] - }`, + border: '1px solid', + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[900] + : theme.palette.background.paper, + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200], + } + : { + backgroundColor: theme.vars.palette.background.paper, + borderColor: theme.vars.palette.grey[200], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[900], + borderColor: theme.vars.palette.primaryDark[700], + }, + }), '& .MuiMenuItem-root': { fontSize: theme.typography.pxToRem(14), fontWeight: 500, - '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], - }, - '&:focus': { - backgroundColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], + '&:hover, &:focus': { + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + } + : { + backgroundColor: theme.vars.palette.grey[50], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + }, + }), }, '&.Mui-selected': { fontWeight: 500, - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : alpha(theme.palette.primary[100], 0.6), + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : alpha(theme.palette.primary[100], 0.6), + } + : { + color: theme.vars.palette.primary[600], + backgroundColor: alpha(theme.palette.primary[100], 0.6), + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.primary[300], + backgroundColor: theme.vars.palette.primaryDark[700], + }, + }), }, }, }, From ca828461fdfb1d06c9a030c117a2988aa323bb3f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:31:20 +0700 Subject: [PATCH 011/125] update Popover branding theme --- docs/src/modules/brandingTheme.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index b458d1f754b8c2..e917af2db66c2a 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -552,9 +552,20 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen MuiPopover: { styleOverrides: { paper: { - boxShadow: `0px 4px 20px ${ - theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)' - }`, + ...(!theme.vars + ? { + boxShadow: `0px 4px 20px ${ + theme.palette.mode === 'dark' + ? 'rgba(0, 0, 0, 0.5)' + : 'rgba(170, 180, 190, 0.3)' + }`, + } + : { + boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`, + [theme.getColorSchemeSelector('dark')]: { + boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`, + }, + }), }, }, }, From 46b015f8acc317af234c02c77d224bc07b3cc11b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:34:25 +0700 Subject: [PATCH 012/125] update Divider, Link brandingTheme --- docs/src/modules/brandingTheme.ts | 52 ++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index e917af2db66c2a..36afff9c9bedee 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -582,10 +582,19 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen MuiDivider: { styleOverrides: { root: { - borderColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primary[100], 0.08) - : theme.palette.grey[100], + ...(!theme.vars + ? { + borderColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primary[100], 0.08) + : theme.palette.grey[100], + } + : { + borderColor: theme.vars.palette.grey[100], + [theme.getColorSchemeSelector('dark')]: { + borderColor: alpha(theme.palette.primary[100], 0.08), + }, + }), }, }, }, @@ -595,19 +604,34 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen }, styleOverrides: { root: { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[300] + : theme.palette.primary[600], + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[200] + : theme.palette.primary[700], + }, + } + : { + color: theme.vars.palette.primary[600], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.primary[300], + }, + '&:hover': { + color: theme.vars.palette.primary[700], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.primary[200], + }, + }, + }), fontWeight: 700, display: 'inline-flex', alignItems: 'center', - '&:hover': { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[200] - : theme.palette.primary[700], - }, '&.MuiTypography-body1 > svg': { marginTop: 2, }, From 0f513052d634472af4a36561bad5c4bd3737bfd4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:48:01 +0700 Subject: [PATCH 013/125] update Chip, TableCell, ToggleButtonGroup branding theme --- docs/src/modules/brandingTheme.ts | 201 ++++++++++++++++++++++-------- 1 file changed, 147 insertions(+), 54 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 36afff9c9bedee..a6df1d0e41a294 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -647,78 +647,162 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen fontWeight: 500, ...(variant === 'outlined' && color === 'default' && { - color: - theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[300] + : theme.palette.grey[900], + borderColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.grey[100], 0.1) + : theme.palette.grey[200], + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[300] + : theme.palette.grey[900], + }, + } + : { + color: theme.vars.palette.grey[900], + borderColor: theme.vars.palette.grey[200], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[300], + borderColor: alpha(theme.palette.grey[100], 0.1), + }, + '&:hover': { + color: theme.vars.palette.grey[900], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[300], + }, + }, + }), backgroundColor: 'transparent', - borderColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.grey[100], 0.1) - : theme.palette.grey[200], - '&:hover': { - color: - theme.palette.mode === 'dark' - ? theme.palette.grey[300] - : theme.palette.grey[900], - }, }), ...(variant === 'outlined' && color === 'primary' && { '&:hover': { - color: theme.palette.primary[500], + color: (theme.vars || theme).palette.primary[500], }, }), ...(variant === 'filled' && color === 'default' && { border: '1px solid transparent', - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], - backgroundColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[500], 0.8) - : alpha(theme.palette.primary[100], 0.5), - '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[100], - }, + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[500], 0.8) + : alpha(theme.palette.primary[100], 0.5), + '&:hover': { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + }, + } + : { + color: theme.vars.palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.5), + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), + }, + '&:hover': { + backgroundColor: theme.vars.palette.primary[100], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[600], + }, + }, + }), }), // for labelling product in the search // @ts-ignore internal repo module augmentation issue ...(variant === 'light' && { ...(color === 'default' && { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[200] - : theme.palette.primary[700], - backgroundColor: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.5) - : alpha(theme.palette.primary[100], 0.3), + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.primary[200] + : theme.palette.primary[700], + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.5) + : alpha(theme.palette.primary[100], 0.3), + } + : { + color: theme.vars.palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.3), + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.primary[200], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + }, + }), }), ...(color === 'warning' && { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.warning[900], - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.warning[900] - : theme.palette.warning[100], + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.warning[900], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.warning[900] + : theme.palette.warning[100], + } + : { + color: theme.vars.palette.warning[900], + backgroundColor: theme.vars.palette.warning[100], + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + backgroundColor: theme.vars.palette.warning[900], + }, + }), }), ...(color === 'success' && { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.success[900], - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.success[900] - : theme.palette.success[100], + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.success[900], + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.success[900] + : theme.palette.success[100], + } + : { + color: theme.vars.palette.success[900], + backgroundColor: theme.vars.palette.success[100], + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + backgroundColor: theme.vars.palette.success[900], + }, + }), }), }), }), deleteIcon: { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], - '&:hover': { - color: - theme.palette.mode === 'dark' - ? theme.palette.grey[100] - : theme.palette.primary[900], - }, + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700], + '&:hover': { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[100] + : theme.palette.primary[900], + }, + } + : { + color: theme.vars.palette.primary[700], + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + }, + '&:hover': { + color: theme.vars.palette.primary[900], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[100], + }, + }, + }), }, }, }, @@ -815,22 +899,31 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen styleOverrides: { root: { padding: theme.spacing(1, 2), - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, }, head: { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, fontWeight: 700, }, body: { - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, }, }, }, MuiToggleButtonGroup: { styleOverrides: { root: { - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff', + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff', + } + : { + backgroundColor: '#fff', + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[900], + }, + }), }, }, }, From 6221a07627820b9427eecb8ec058a37087d4c706 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:52:10 +0700 Subject: [PATCH 014/125] update ToggleButton branding theme --- docs/src/modules/brandingTheme.ts | 73 +++++++++++++++++++++++-------- 1 file changed, 54 insertions(+), 19 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index a6df1d0e41a294..ad3cc923e0843f 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -932,27 +932,62 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen root: { textTransform: 'none', fontWeight: 500, - color: - theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[500] - : theme.palette.grey[200], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[300] + : theme.palette.grey[700], + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.grey[200], + } + : { + color: theme.vars.palette.grey[700], + borderColor: theme.vars.palette.grey[200], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[300], + borderColor: theme.vars.palette.primaryDark[500], + }, + }), '&.Mui-selected': { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], - borderColor: - theme.palette.mode === 'dark' - ? `${theme.palette.primary[700]} !important` - : `${theme.palette.primary[500]} !important`, - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.primary[50], + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], + borderColor: + theme.palette.mode === 'dark' + ? `${theme.palette.primary[700]} !important` + : `${theme.palette.primary[500]} !important`, + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.primary[50], + } + : { + color: theme.vars.palette.primary[500], + borderColor: `${theme.vars.palette.primary[500]} !important`, + backgroundColor: theme.vars.palette.primary[50], + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + borderColor: `${theme.vars.palette.primary[700]} !important`, + backgroundColor: theme.vars.palette.primaryDark[700], + }, + }), '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[100], + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + } + : { + backgroundColor: theme.vars.palette.primary[100], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[600], + }, + }), }, }, }, From 3307249d8ff0653e3c40ec1ccab37aefbbbe5f01 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:56:44 +0700 Subject: [PATCH 015/125] update Switch, Pagination branding theme --- docs/src/modules/brandingTheme.ts | 88 +++++++++++++++++++++++-------- 1 file changed, 67 insertions(+), 21 deletions(-) diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index ad3cc923e0843f..f067f89fb8c4ca 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1025,8 +1025,19 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen track: { opacity: 1, borderRadius: 32, - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400], + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.grey[800] + : theme.palette.grey[400], + } + : { + backgroundColor: theme.vars.palette.grey[400], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.grey[800], + }, + }), }, thumb: { flexShrink: 0, @@ -1040,27 +1051,62 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen root: { textTransform: 'none', fontWeight: 700, - color: - theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700], - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[500] - : theme.palette.grey[200], + ...(!theme.vars + ? { + color: + theme.palette.mode === 'dark' + ? theme.palette.grey[300] + : theme.palette.grey[700], + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.grey[200], + } + : { + color: theme.vars.palette.grey[700], + borderColor: theme.vars.palette.grey[200], + [theme.getColorSchemeSelector('dark')]: { + color: theme.vars.palette.grey[300], + borderColor: theme.vars.palette.primaryDark[500], + }, + }), '&.Mui-selected': { - color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], - borderColor: - theme.palette.mode === 'dark' - ? `${theme.palette.primary[700]} !important` - : `${theme.palette.primary[500]} !important`, - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.primary[50], + ...(!theme.vars + ? { + color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500], + borderColor: + theme.palette.mode === 'dark' + ? `${theme.palette.primary[700]} !important` + : `${theme.palette.primary[500]} !important`, + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.primary[50], + } + : { + color: theme.vars.palette.primary[500], + borderColor: `${theme.vars.palette.primary[500]} !important`, + backgroundColor: theme.vars.palette.primary[50], + [theme.getColorSchemeSelector('dark')]: { + color: '#fff', + borderColor: `${theme.vars.palette.primary[700]} !important`, + backgroundColor: theme.vars.palette.primaryDark[700], + }, + }), '&:hover': { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.primary[100], + ...(!theme.vars + ? { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.primary[100], + } + : { + backgroundColor: theme.vars.palette.primary[100], + [theme.getColorSchemeSelector('dark')]: { + backgroundColor: theme.vars.palette.primaryDark[600], + }, + }), }, }, }, From 84d9e395ebc46b4d48df6644d086deab31c9a3c9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 14 Jul 2022 22:58:01 +0700 Subject: [PATCH 016/125] add getMuiInitColorSchemeScript to _document --- docs/pages/_document.js | 2 ++ docs/pages/index.tsx | 5 +---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 57ab2035eadc04..23e714c7d5eb10 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -8,6 +8,7 @@ import createEmotionCache from 'docs/src/createEmotionCache'; import { getMetaThemeColor } from 'docs/src/modules/brandingTheme'; import GlobalStyles from '@mui/material/GlobalStyles'; import { getInitColorSchemeScript } from '@mui/joy/styles'; +import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles'; // You can find a benchmark of the available CSS minifiers under // https://github.com/GoalSmashers/css-minification-benchmark @@ -143,6 +144,7 @@ export default class MyDocument extends Document { {getInitColorSchemeScript({ enableSystem: true })} + {getMuiInitColorSchemeScript({ enableSystem: true })}