diff --git a/.circleci/config.yml b/.circleci/config.yml index cc2146f491b0ab..17df4cae576312 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -299,6 +299,12 @@ jobs: command: | pnpm docs:link-check git add -A && git diff --exit-code --staged + - run: + name: Update the templates shared themes + command: pnpm template:update-theme + - run: + name: '`pnpm template:update-theme` changes committed?' + command: git add -A && git diff --exit-code --staged test_types: <<: *default-job resource_class: 'medium+' diff --git a/benchmark/server/scenarios/server.js b/benchmark/server/scenarios/server.js index 8ea191f4827239..45596098363e08 100644 --- a/benchmark/server/scenarios/server.js +++ b/benchmark/server/scenarios/server.js @@ -11,7 +11,6 @@ import { createGenerateClassName, } from '@mui/styles'; import { green, red } from '@mui/material/colors'; -import Pricing from 'docs/data/material/getting-started/templates/pricing/Pricing'; import { spacing, palette, unstable_styleFunctionSx as styleFunction } from '@mui/system'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; @@ -42,23 +41,6 @@ const theme = createTheme({ }, }); -function renderPricing(req, res) { - const sheetsRegistry = new SheetsRegistry(); - const html = ReactDOMServer.renderToString( - - - - - , - ); - const css = sheetsRegistry.toString(); - res.send(renderFullPage(html, css)); -} - function renderBox(req, res) { const sheetsRegistry = new SheetsRegistry(); const html = ReactDOMServer.renderToString( @@ -156,7 +138,6 @@ function renderSystem(req, res) { } const app = express(); -app.get('/', renderPricing); app.get('/spacing', renderSpacing); app.get('/palette', renderPalette); app.get('/system', renderSystem); diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index 3353c895fe0ca0..3080d885ee7221 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -65,11 +65,26 @@ export default function Blog() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const blogTheme = createTheme(getBlogTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; - const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); }; diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx index ce99a45a259045..236fa49af550ee 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.tsx +++ b/docs/data/material/getting-started/templates/blog/Blog.tsx @@ -65,11 +65,26 @@ export default function Blog() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const blogTheme = createTheme(getBlogTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; - const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); }; diff --git a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js index 9c2f459e5b5e2d..a6551c5b9fae83 100644 --- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js +++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; +import { alpha, styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; @@ -24,7 +24,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({ backdropFilter: 'blur(24px)', border: '1px solid', borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.default, + backgroundColor: alpha(theme.palette.background.default, 0.4), boxShadow: theme.shadows[1], padding: '8px 12px', })); diff --git a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx index f029de60dff1b4..09097f96003005 100644 --- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx +++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PaletteMode, styled } from '@mui/material/styles'; +import { PaletteMode, alpha, styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; @@ -23,7 +23,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({ backdropFilter: 'blur(24px)', border: '1px solid', borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.default, + backgroundColor: alpha(theme.palette.background.default, 0.4), boxShadow: theme.shadows[1], padding: '8px 12px', })); diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.js b/docs/data/material/getting-started/templates/blog/components/MainContent.js index 8a9d88fe3d938b..021d63fd096793 100644 --- a/docs/data/material/getting-started/templates/blog/components/MainContent.js +++ b/docs/data/material/getting-started/templates/blog/components/MainContent.js @@ -207,10 +207,11 @@ export default function MainContent() { gap: 4, }} > - - + + - - + + ({ - color: theme.palette.text.primary, - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - width: 'fit-content', - '&::before': { - content: '""', - position: 'absolute', - width: '100%', - height: '1px', - bottom: 0, - left: 0, - backgroundColor: theme.palette.text.secondary, - opacity: 0.3, - transition: 'width 0.3s ease, opacity 0.3s ease', + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, }, - '&:hover::before': { - width: 0, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, }, }), }, }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, MuiChip: { defaultProps: { size: 'small', @@ -47,7 +95,6 @@ export const otherComponentsCustomizations = { border: '1px solid', borderRadius: '999px', [`& .${chipClasses.label}`]: { - padding: '0 4px', fontWeight: 600, }, variants: [ @@ -133,24 +180,23 @@ export const otherComponentsCustomizations = { [`& .${chipClasses.label}`]: { fontSize: theme.typography.caption.fontSize, }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, }, }, ], }), }, }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, MuiTablePagination: { styleOverrides: { actions: { @@ -184,27 +230,4 @@ export const otherComponentsCustomizations = { }, }, }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - '&.Mui-selected': { - color: 'white', - backgroundColor: theme.palette.grey[900], - }, - ...theme.applyStyles('dark', { - '&.Mui-selected': { - color: 'black', - backgroundColor: theme.palette.grey[50], - }, - }), - }), - }, - }, }; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/index.js b/docs/data/material/getting-started/templates/blog/theme/customizations/index.js index 99be77b3bd14ce..91a4485333d139 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/index.js +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/index.js @@ -1,5 +1,5 @@ -export { buttonsCustomizations } from './buttons'; export { inputsCustomizations } from './inputs'; -export { layoutComponentsCustomizations } from './layoutComponents'; -export { menuComponentsCustomizations } from './menus'; -export { otherComponentsCustomizations } from './others'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts b/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts index 99be77b3bd14ce..91a4485333d139 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts @@ -1,5 +1,5 @@ -export { buttonsCustomizations } from './buttons'; export { inputsCustomizations } from './inputs'; -export { layoutComponentsCustomizations } from './layoutComponents'; -export { menuComponentsCustomizations } from './menus'; -export { otherComponentsCustomizations } from './others'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js index 6d991b90bdd4b0..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js @@ -1,6 +1,9 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; @@ -8,6 +11,304 @@ import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ export const inputsCustomizations = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, MuiCheckbox: { defaultProps: { disableRipple: true, @@ -66,6 +367,12 @@ export const inputsCustomizations = { root: { border: 'none', }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, }, }, MuiOutlinedInput: { @@ -74,9 +381,11 @@ export const inputsCustomizations = { padding: 0, }, root: ({ theme }) => ({ + padding: '8px 12px', color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -96,8 +405,7 @@ export const inputsCustomizations = { size: 'small', }, style: { - height: '2rem', - padding: '0 0.5rem', + height: '2.25rem', }, }, { @@ -125,4 +433,12 @@ export const inputsCustomizations = { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx index f20064124472b8..4be4c18628e16e 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { Components, alpha, Theme } from '@mui/material/styles'; +import { alpha, Theme, Components } from '@mui/material/styles'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; @@ -8,6 +11,305 @@ import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, MuiCheckbox: { defaultProps: { disableRipple: true, @@ -66,6 +368,12 @@ export const inputsCustomizations: Components = { root: { border: 'none', }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, }, }, MuiOutlinedInput: { @@ -74,9 +382,11 @@ export const inputsCustomizations: Components = { padding: 0, }, root: ({ theme }) => ({ + padding: '8px 12px', color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -96,8 +406,7 @@ export const inputsCustomizations: Components = { size: 'small', }, style: { - height: '2rem', - padding: '0 0.5rem', + height: '2.25rem', }, }, { @@ -125,4 +434,12 @@ export const inputsCustomizations: Components = { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.js b/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.js deleted file mode 100644 index 09525b248404b6..00000000000000 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.js +++ /dev/null @@ -1,51 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const layoutComponentsCustomizations = { - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.ts b/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.ts deleted file mode 100644 index d34cf7dbae6f27..00000000000000 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/layoutComponents.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Components, alpha, Theme } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const layoutComponentsCustomizations: Components = { - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js similarity index 52% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js rename to docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js index 1c8394cfadb7f1..ded180025db59e 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js @@ -1,95 +1,16 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; + import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { dividerClasses } from '@mui/material/Divider'; -import { listItemButtonClasses } from '@mui/material/ListItemButton'; import { menuItemClasses } from '@mui/material/MenuItem'; import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray } from '../themePrimitives'; +import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const menuComponentsCustomizations = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - [`&.${listItemButtonClasses.selected}`]: { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, +export const navigationCustomizations = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ @@ -178,16 +99,6 @@ export const menuComponentsCustomizations = { display: 'none', }, }), - variants: [ - { - props: { - variant: 'standard', - }, - style: { - paddingLeft: 12, - }, - }, - ], }), select: ({ theme }) => ({ display: 'flex', @@ -202,4 +113,166 @@ export const menuComponentsCustomizations = { }), }, }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx similarity index 51% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx rename to docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx index 4d2e1d8a15aad6..f6b92e573f6316 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx @@ -1,95 +1,16 @@ import * as React from 'react'; -import { Components, Theme, alpha } from '@mui/material/styles'; -import { SvgIconProps, svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { dividerClasses } from '@mui/material/Divider'; -import { listItemButtonClasses } from '@mui/material/ListItemButton'; import { menuItemClasses } from '@mui/material/MenuItem'; import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray } from '../themePrimitives'; +import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const menuComponentsCustomizations: Components = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - [`&.${listItemButtonClasses.selected}`]: { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, +export const navigationCustomizations: Components = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ @@ -179,16 +100,6 @@ export const menuComponentsCustomizations: Components = { display: 'none', }, }), - variants: [ - { - props: { - variant: 'standard', - }, - style: { - paddingLeft: 12, - }, - }, - ], }), select: ({ theme }) => ({ display: 'flex', @@ -203,4 +114,166 @@ export const menuComponentsCustomizations: Components = { }), }, }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js index c7bad608bb0d40..e4e8db96472be7 100644 --- a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js +++ b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js @@ -1,21 +1,21 @@ import { getDesignTokens } from './themePrimitives'; import { - buttonsCustomizations, inputsCustomizations, - layoutComponentsCustomizations, - menuComponentsCustomizations, - otherComponentsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, } from './customizations'; export default function getBlogTheme(mode) { return { ...getDesignTokens(mode), components: { - ...buttonsCustomizations, ...inputsCustomizations, - ...layoutComponentsCustomizations, - ...menuComponentsCustomizations, - ...otherComponentsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, }, }; } diff --git a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx index ffebb2a9b65555..24392644251b1b 100644 --- a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx +++ b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx @@ -2,22 +2,22 @@ import type {} from '@mui/material/themeCssVarsAugmentation'; import { ThemeOptions, PaletteMode } from '@mui/material/styles'; import { getDesignTokens } from './themePrimitives'; import { - buttonsCustomizations, inputsCustomizations, - layoutComponentsCustomizations, - menuComponentsCustomizations, - otherComponentsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, } from './customizations'; export default function getBlogTheme(mode: PaletteMode): ThemeOptions { return { ...getDesignTokens(mode), components: { - ...buttonsCustomizations, ...inputsCustomizations, - ...layoutComponentsCustomizations, - ...menuComponentsCustomizations, - ...otherComponentsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, }, }; } diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts index b580d9b5c51a94..09df769bb6687d 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { PaletteMode, createTheme, alpha, Shadows } from '@mui/material/styles'; +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { diff --git a/docs/data/material/getting-started/templates/checkout/AddressForm.js b/docs/data/material/getting-started/templates/checkout/AddressForm.js index 07858cc4647161..2ba372be16e954 100644 --- a/docs/data/material/getting-started/templates/checkout/AddressForm.js +++ b/docs/data/material/getting-started/templates/checkout/AddressForm.js @@ -3,7 +3,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import OutlinedInput from '@mui/material/OutlinedInput'; import { styled } from '@mui/system'; @@ -15,7 +15,7 @@ const FormGrid = styled(Grid)(() => ({ export default function AddressForm() { return ( - + First name @@ -26,9 +26,10 @@ export default function AddressForm() { placeholder="John" autoComplete="first name" required + size="small" /> - + Last name @@ -39,9 +40,10 @@ export default function AddressForm() { placeholder="Snow" autoComplete="last name" required + size="small" /> - + Address line 1 @@ -52,9 +54,10 @@ export default function AddressForm() { placeholder="Street name and number" autoComplete="shipping address-line1" required + size="small" /> - + Address line 2 - + City @@ -76,9 +80,10 @@ export default function AddressForm() { placeholder="New York" autoComplete="City" required + size="small" /> - + State @@ -89,9 +94,10 @@ export default function AddressForm() { placeholder="NY" autoComplete="State" required + size="small" /> - + Zip / Postal code @@ -102,9 +108,10 @@ export default function AddressForm() { placeholder="12345" autoComplete="shipping postal-code" required + size="small" /> - + Country @@ -115,9 +122,10 @@ export default function AddressForm() { placeholder="United States" autoComplete="shipping country" required + size="small" /> - + } label="Use this address for payment details" diff --git a/docs/data/material/getting-started/templates/checkout/AddressForm.tsx b/docs/data/material/getting-started/templates/checkout/AddressForm.tsx index 07858cc4647161..2ba372be16e954 100644 --- a/docs/data/material/getting-started/templates/checkout/AddressForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/AddressForm.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import OutlinedInput from '@mui/material/OutlinedInput'; import { styled } from '@mui/system'; @@ -15,7 +15,7 @@ const FormGrid = styled(Grid)(() => ({ export default function AddressForm() { return ( - + First name @@ -26,9 +26,10 @@ export default function AddressForm() { placeholder="John" autoComplete="first name" required + size="small" /> - + Last name @@ -39,9 +40,10 @@ export default function AddressForm() { placeholder="Snow" autoComplete="last name" required + size="small" /> - + Address line 1 @@ -52,9 +54,10 @@ export default function AddressForm() { placeholder="Street name and number" autoComplete="shipping address-line1" required + size="small" /> - + Address line 2 - + City @@ -76,9 +80,10 @@ export default function AddressForm() { placeholder="New York" autoComplete="City" required + size="small" /> - + State @@ -89,9 +94,10 @@ export default function AddressForm() { placeholder="NY" autoComplete="State" required + size="small" /> - + Zip / Postal code @@ -102,9 +108,10 @@ export default function AddressForm() { placeholder="12345" autoComplete="shipping postal-code" required + size="small" /> - + Country @@ -115,9 +122,10 @@ export default function AddressForm() { placeholder="United States" autoComplete="shipping country" required + size="small" /> - + } label="Use this address for payment details" diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index b847651c5a246b..167615fc6a807d 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -23,7 +23,7 @@ import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import AddressForm from './AddressForm'; -import getCheckoutTheme from './getCheckoutTheme'; +import getCheckoutTheme from './theme/getCheckoutTheme'; import Info from './Info'; import InfoMobile from './InfoMobile'; import PaymentForm from './PaymentForm'; @@ -94,8 +94,25 @@ export default function Checkout() { const checkoutTheme = createTheme(getCheckoutTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); const [activeStep, setActiveStep] = React.useState(0); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx index 46674e4afaee1e..f5b197354e2383 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx +++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx @@ -22,7 +22,7 @@ import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import AddressForm from './AddressForm'; -import getCheckoutTheme from './getCheckoutTheme'; +import getCheckoutTheme from './theme/getCheckoutTheme'; import Info from './Info'; import InfoMobile from './InfoMobile'; import PaymentForm from './PaymentForm'; @@ -93,8 +93,25 @@ export default function Checkout() { const checkoutTheme = createTheme(getCheckoutTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); const [activeStep, setActiveStep] = React.useState(0); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/PaymentForm.js index 4954a927f19c6d..0db7abdcf8fcbf 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.js +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.js @@ -45,7 +45,6 @@ const Card = styled(MuiCard)(({ theme }) => ({ { props: ({ selected }) => selected, style: { - backgroundColor: theme.palette.action.selected, borderColor: theme.palette.primary.light, ...theme.applyStyles('dark', { borderColor: theme.palette.primary.dark, @@ -62,11 +61,11 @@ const PaymentContainer = styled('div')(({ theme }) => ({ width: '100%', height: 375, padding: theme.spacing(3), - borderRadius: '20px', + borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`, border: '1px solid ', borderColor: theme.palette.divider, background: - 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)', + 'linear-gradient(to bottom right, hsla(220, 35%, 97%, 0.3) 25%, hsla(220, 20%, 88%, 0.3) 100%)', boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', [theme.breakpoints.up('xs')]: { height: 300, @@ -76,7 +75,8 @@ const PaymentContainer = styled('div')(({ theme }) => ({ }, ...theme.applyStyles('dark', { background: - 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + 'linear-gradient(to right bottom, hsla(220, 30%, 6%, 0.2) 25%, hsla(220, 20%, 25%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsl(220, 35%, 0%)', }), })); @@ -227,6 +227,7 @@ export default function PaymentForm() { autoComplete="card-number" placeholder="0000 0000 0000 0000" required + size="small" value={cardNumber} onChange={handleCardNumberChange} /> @@ -240,6 +241,7 @@ export default function PaymentForm() { autoComplete="CVV" placeholder="123" required + size="small" value={cvv} onChange={handleCvvChange} /> @@ -255,6 +257,7 @@ export default function PaymentForm() { autoComplete="card-name" placeholder="John Smith" required + size="small" /> @@ -266,6 +269,7 @@ export default function PaymentForm() { autoComplete="card-expiration" placeholder="MM/YY" required + size="small" value={expirationDate} onChange={handleExpirationDateChange} /> diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx index b549b0f677dda6..0072be5802ded0 100644 --- a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx @@ -45,7 +45,6 @@ const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme }) => ({ { props: ({ selected }) => selected, style: { - backgroundColor: theme.palette.action.selected, borderColor: theme.palette.primary.light, ...theme.applyStyles('dark', { borderColor: theme.palette.primary.dark, @@ -62,11 +61,11 @@ const PaymentContainer = styled('div')(({ theme }) => ({ width: '100%', height: 375, padding: theme.spacing(3), - borderRadius: '20px', + borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`, border: '1px solid ', borderColor: theme.palette.divider, background: - 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.3) 25%, hsla(210, 100%, 90%, 0.3) 100%)', + 'linear-gradient(to bottom right, hsla(220, 35%, 97%, 0.3) 25%, hsla(220, 20%, 88%, 0.3) 100%)', boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)', [theme.breakpoints.up('xs')]: { height: 300, @@ -76,7 +75,8 @@ const PaymentContainer = styled('div')(({ theme }) => ({ }, ...theme.applyStyles('dark', { background: - 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)', + 'linear-gradient(to right bottom, hsla(220, 30%, 6%, 0.2) 25%, hsla(220, 20%, 25%, 0.2) 100%)', + boxShadow: '0px 4px 8px hsl(220, 35%, 0%)', }), })); @@ -229,6 +229,7 @@ export default function PaymentForm() { autoComplete="card-number" placeholder="0000 0000 0000 0000" required + size="small" value={cardNumber} onChange={handleCardNumberChange} /> @@ -242,6 +243,7 @@ export default function PaymentForm() { autoComplete="CVV" placeholder="123" required + size="small" value={cvv} onChange={handleCvvChange} /> @@ -257,6 +259,7 @@ export default function PaymentForm() { autoComplete="card-name" placeholder="John Smith" required + size="small" /> @@ -268,6 +271,7 @@ export default function PaymentForm() { autoComplete="card-expiration" placeholder="MM/YY" required + size="small" value={expirationDate} onChange={handleExpirationDateChange} /> diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js deleted file mode 100644 index e9588f9f73d94a..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.js +++ /dev/null @@ -1,778 +0,0 @@ -import * as React from 'react'; - -import { createTheme, alpha } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getCheckoutTheme(mode) { - return { - ...getDesignTokens(mode), - components: { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: theme.palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: '1px solid', - borderColor: theme.palette.divider, - flex: 1, - borderRadius: '99px', - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: 'transparent', - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: '50%', - '& text': { - display: 'none', - }, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.main, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.main, - }, - ...theme.applyStyles('dark', { - border: `1px solid ${gray[700]}`, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.light, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.6, - ...theme.applyStyles('dark', { opacity: 0.5 }), - }, - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx deleted file mode 100644 index ac2e97b6afc539..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/getCheckoutTheme.tsx +++ /dev/null @@ -1,795 +0,0 @@ -import * as React from 'react'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { createTheme, ThemeOptions, alpha, PaletteMode } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} -} - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - components: { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: theme.palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: '1px solid', - borderColor: theme.palette.divider, - flex: 1, - borderRadius: '99px', - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: 'transparent', - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: '50%', - '& text': { - display: 'none', - }, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.main, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.main, - }, - ...theme.applyStyles('dark', { - border: `1px solid ${gray[700]}`, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.light, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.6, - ...theme.applyStyles('dark', { opacity: 0.5 }), - }, - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/others.ts b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js similarity index 62% rename from docs/data/material/getting-started/templates/blog/theme/customizations/others.ts rename to docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js index 0eba1568ddee65..cf04322a9a6056 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/others.ts +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js @@ -1,43 +1,91 @@ -import { Components, Theme, alpha } from '@mui/material/styles'; +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { chipClasses } from '@mui/material/Chip'; import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, brand, green } from '../themePrimitives'; +import { gray, red, green } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const otherComponentsCustomizations: Components = { - MuiLink: { - defaultProps: { - underline: 'none', +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, }, + }, + MuiListItem: { styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.text.primary, - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - width: 'fit-content', - '&::before': { - content: '""', - position: 'absolute', - width: '100%', - height: '1px', - bottom: 0, - left: 0, - backgroundColor: theme.palette.text.secondary, - opacity: 0.3, - transition: 'width 0.3s ease, opacity 0.3s ease', + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, }, - '&:hover::before': { - width: 0, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, }, }), }, }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, MuiChip: { defaultProps: { size: 'small', @@ -47,7 +95,6 @@ export const otherComponentsCustomizations: Components = { border: '1px solid', borderRadius: '999px', [`& .${chipClasses.label}`]: { - padding: '0 4px', fontWeight: 600, }, variants: [ @@ -133,24 +180,23 @@ export const otherComponentsCustomizations: Components = { [`& .${chipClasses.label}`]: { fontSize: theme.typography.caption.fontSize, }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, }, }, ], }), }, }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, MuiTablePagination: { styleOverrides: { actions: { @@ -184,27 +230,4 @@ export const otherComponentsCustomizations: Components = { }, }, }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - '&.Mui-selected': { - color: 'white', - backgroundColor: theme.palette.grey[900], - }, - ...theme.applyStyles('dark', { - '&.Mui-selected': { - color: 'black', - backgroundColor: theme.palette.grey[50], - }, - }), - }), - }, - }, }; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/buttons.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js similarity index 70% rename from docs/data/material/getting-started/templates/blog/theme/customizations/buttons.js rename to docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js index 1b29fd59cf8a43..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/buttons.js +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js @@ -1,12 +1,16 @@ +import * as React from 'react'; import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { svgIconClasses } from '@mui/material/SvgIcon'; import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import { tabClasses } from '@mui/material/Tab'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const buttonsCustomizations = { +export const inputsCustomizations = { MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -35,8 +39,8 @@ export const buttonsCustomizations = { size: 'small', }, style: { - height: '2rem', // 32px - padding: '0 0.5rem', + height: '2.25rem', + padding: '8px 12px', }, }, { @@ -56,7 +60,7 @@ export const buttonsCustomizations = { color: 'white', backgroundColor: gray[900], backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, border: `1px solid ${gray[700]}`, '&:hover': { backgroundImage: 'none', @@ -70,9 +74,8 @@ export const buttonsCustomizations = { color: 'black', backgroundColor: gray[50], backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: - 'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, '&:hover': { backgroundImage: 'none', backgroundColor: gray[300], @@ -253,8 +256,8 @@ export const buttonsCustomizations = { size: 'small', }, style: { - width: '2rem', - height: '2rem', + width: '2.25rem', + height: '2.25rem', padding: '0.25rem', [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, }, @@ -306,48 +309,136 @@ export const buttonsCustomizations = { }), }, }, - MuiTabs: { + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, }), }), }, }, - MuiTab: { + MuiInputBase: { styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, + padding: '8px 12px', + color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], }, - [`&.${tabClasses.selected}`]: { - color: gray[900], + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], }, ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], + '&:hover': { + borderColor: gray[500], }, - [`&.${tabClasses.selected}`]: { - color: '#fff', + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], }), }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js similarity index 51% rename from docs/data/material/getting-started/templates/blog/theme/customizations/menus.js rename to docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js index ffd022a1ae476c..ded180025db59e 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.js +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js @@ -1,95 +1,16 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; + import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { dividerClasses } from '@mui/material/Divider'; -import { listItemButtonClasses } from '@mui/material/ListItemButton'; import { menuItemClasses } from '@mui/material/MenuItem'; import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray } from '../themePrimitives'; +import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const menuComponentsCustomizations = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - [`&.${listItemButtonClasses.selected}`]: { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, +export const navigationCustomizations = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ @@ -192,4 +113,166 @@ export const menuComponentsCustomizations = { }), }, }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx similarity index 50% rename from docs/data/material/getting-started/templates/blog/theme/customizations/menus.tsx rename to docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx index 391c849ff6e644..f6b92e573f6316 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/menus.tsx +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx @@ -1,95 +1,16 @@ import * as React from 'react'; -import { Components, Theme, alpha } from '@mui/material/styles'; -import { svgIconClasses, SvgIconProps } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { dividerClasses } from '@mui/material/Divider'; -import { listItemButtonClasses } from '@mui/material/ListItemButton'; import { menuItemClasses } from '@mui/material/MenuItem'; import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray } from '../themePrimitives'; +import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const menuComponentsCustomizations: Components = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - [`&.${listItemButtonClasses.selected}`]: { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - [`&.${listItemButtonClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, +export const navigationCustomizations: Components = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ @@ -193,4 +114,166 @@ export const menuComponentsCustomizations: Components = { }), }, }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js new file mode 100644 index 00000000000000..8efec7f816aa4e --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js @@ -0,0 +1,21 @@ +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getCheckoutTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx new file mode 100644 index 00000000000000..a588594a0d2166 --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx @@ -0,0 +1,23 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, PaletteMode } from '@mui/material/styles'; +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js index e03fad94100626..9a69a9832f5454 100644 --- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js +++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js @@ -15,9 +15,25 @@ export default function Dashboard() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const dashboardTheme = createTheme(getDashboardTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx index 5086b96b7cf5ac..226029e6c84cb6 100644 --- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx +++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx @@ -20,9 +20,25 @@ export default function Dashboard() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const dashboardTheme = createTheme(getDashboardTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js similarity index 61% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js rename to docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js index 11a563dbc75a2c..cf04322a9a6056 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js @@ -1,46 +1,91 @@ import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { chipClasses } from '@mui/material/Chip'; import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, brand, green } from '../themePrimitives'; +import { gray, red, green } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const otherComponentsCustomizations = { - MuiLink: { - defaultProps: { - underline: 'none', +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, }, + }, + MuiListItem: { styleOverrides: { root: ({ theme }) => ({ - color: brand[600], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, }, - '&:hover::before': { - width: '100%', - opacity: 1, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, }, - ...theme.applyStyles('dark', { - color: brand[200], - }), }), }, }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, MuiChip: { defaultProps: { size: 'small', @@ -50,7 +95,6 @@ export const otherComponentsCustomizations = { border: '1px solid', borderRadius: '999px', [`& .${chipClasses.label}`]: { - padding: '0 4px', fontWeight: 600, }, variants: [ @@ -136,24 +180,23 @@ export const otherComponentsCustomizations = { [`& .${chipClasses.label}`]: { fontSize: theme.typography.caption.fontSize, }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, }, }, ], }), }, }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, MuiTablePagination: { styleOverrides: { actions: { @@ -187,11 +230,4 @@ export const otherComponentsCustomizations = { }, }, }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, }; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js index 7721f6a88f43fb..9736c27eeb6213 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js @@ -1,9 +1,9 @@ -export { buttonsCustomizations } from './buttons'; export { chartsCustomizations } from './charts'; export { dataGridCustomizations } from './dataGrid'; export { datePickersCustomizations } from './datePickers'; export { treeViewCustomizations } from './treeView'; export { inputsCustomizations } from './inputs'; -export { layoutComponentsCustomizations } from './layoutComponents'; -export { menuComponentsCustomizations } from './menus'; -export { otherComponentsCustomizations } from './others'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts index 7721f6a88f43fb..9736c27eeb6213 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts @@ -1,9 +1,9 @@ -export { buttonsCustomizations } from './buttons'; export { chartsCustomizations } from './charts'; export { dataGridCustomizations } from './dataGrid'; export { datePickersCustomizations } from './datePickers'; export { treeViewCustomizations } from './treeView'; export { inputsCustomizations } from './inputs'; -export { layoutComponentsCustomizations } from './layoutComponents'; -export { menuComponentsCustomizations } from './menus'; -export { otherComponentsCustomizations } from './others'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js index 91eeb65f790554..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js @@ -1,7 +1,9 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; -import { inputBaseClasses } from '@mui/material/InputBase'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; @@ -9,6 +11,304 @@ import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ export const inputsCustomizations = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, MuiCheckbox: { defaultProps: { disableRipple: true, @@ -64,34 +364,28 @@ export const inputsCustomizations = { }, MuiInputBase: { styleOverrides: { - root: ({ theme }) => ({ + root: { border: 'none', - borderRadius: theme.shape.borderRadius, - [`&.${inputBaseClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], }, - }), - }, - }, - MuiInputLabel: { - styleOverrides: { - root: { - variants: [ - { - props: { variant: 'outlined' }, - style: { transform: 'scale(0.75)', position: 'unset' }, - }, - ], }, }, }, MuiOutlinedInput: { styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ + padding: '8px 12px', color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -111,8 +405,7 @@ export const inputsCustomizations = { size: 'small', }, style: { - height: '2rem', - padding: '0 0.5rem', + height: '2.25rem', }, }, { @@ -140,4 +433,12 @@ export const inputsCustomizations = { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx index 5be466f4bae9f5..4be4c18628e16e 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Components, alpha, Theme } from '@mui/material/styles'; -import { inputBaseClasses } from '@mui/material/InputBase'; +import { alpha, Theme, Components } from '@mui/material/styles'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; @@ -9,6 +11,305 @@ import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, MuiCheckbox: { defaultProps: { disableRipple: true, @@ -64,34 +365,28 @@ export const inputsCustomizations: Components = { }, MuiInputBase: { styleOverrides: { - root: ({ theme }) => ({ + root: { border: 'none', - borderRadius: theme.shape.borderRadius, - [`&.${inputBaseClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], }, - }), - }, - }, - MuiInputLabel: { - styleOverrides: { - root: { - variants: [ - { - props: { variant: 'outlined' }, - style: { transform: 'scale(0.75)', position: 'unset' }, - }, - ], }, }, }, MuiOutlinedInput: { styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ + padding: '8px 12px', color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -111,8 +406,7 @@ export const inputsCustomizations: Components = { size: 'small', }, style: { - height: '2rem', - padding: '0 0.5rem', + height: '2.25rem', }, }, { @@ -140,4 +434,12 @@ export const inputsCustomizations: Components = { }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js deleted file mode 100644 index 1e3a4cc274c6ef..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js +++ /dev/null @@ -1,46 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const layoutComponentsCustomizations = { - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts deleted file mode 100644 index 6797e3df09825b..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Components, alpha, Theme } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const layoutComponentsCustomizations: Components = { - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js index 7c8344864b413d..48ccb3e42265bf 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js @@ -1,29 +1,30 @@ import { getDesignTokens } from './themePrimitives'; import { - buttonsCustomizations, chartsCustomizations, dataGridCustomizations, datePickersCustomizations, treeViewCustomizations, inputsCustomizations, - layoutComponentsCustomizations, - menuComponentsCustomizations, - otherComponentsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, } from './customizations'; export default function getDashboardTheme(mode) { return { ...getDesignTokens(mode), components: { - ...buttonsCustomizations, ...chartsCustomizations, ...dataGridCustomizations, ...datePickersCustomizations, ...treeViewCustomizations, ...inputsCustomizations, - ...layoutComponentsCustomizations, - ...menuComponentsCustomizations, - ...otherComponentsCustomizations, + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, }, }; } diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx index e84b3524c44151..ab79503b6c2ced 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx +++ b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx @@ -6,30 +6,31 @@ import type {} from '@mui/x-data-grid/themeAugmentation'; import type {} from '@mui/x-tree-view/themeAugmentation'; import { getDesignTokens } from './themePrimitives'; import { - buttonsCustomizations, chartsCustomizations, dataGridCustomizations, datePickersCustomizations, treeViewCustomizations, inputsCustomizations, - layoutComponentsCustomizations, - menuComponentsCustomizations, - otherComponentsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, } from './customizations'; export default function getDashboardTheme(mode: PaletteMode): ThemeOptions { return { ...getDesignTokens(mode), components: { - ...buttonsCustomizations, ...chartsCustomizations, ...dataGridCustomizations, ...datePickersCustomizations, ...treeViewCustomizations, ...inputsCustomizations, - ...layoutComponentsCustomizations, - ...menuComponentsCustomizations, - ...otherComponentsCustomizations, + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, }, }; } diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index b580d9b5c51a94..09df769bb6687d 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { PaletteMode, createTheme, alpha, Shadows } from '@mui/material/styles'; +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js index b0a56b1b8e7fe5..92ec891210a70c 100644 --- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js +++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js @@ -16,7 +16,7 @@ import Features from './components/Features'; import Testimonials from './components/Testimonials'; import FAQ from './components/FAQ'; import Footer from './components/Footer'; -import getMPTheme from './getMPTheme'; +import getMPTheme from './theme/getMPTheme'; function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( @@ -68,8 +68,25 @@ export default function MarketingPage() { const MPTheme = createTheme(getMPTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { @@ -81,7 +98,7 @@ export default function MarketingPage() { - +
@@ -94,7 +111,7 @@ export default function MarketingPage() {
- +
{ + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { @@ -81,7 +98,7 @@ export default function MarketingPage() { - +
@@ -94,7 +111,7 @@ export default function MarketingPage() {
- +
({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexShrink: 0, + borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`, + backdropFilter: 'blur(24px)', + border: '1px solid', + borderColor: theme.palette.divider, + backgroundColor: alpha(theme.palette.background.default, 0.4), + boxShadow: theme.shadows[1], + padding: '8px 12px', +})); + function AppAppBar({ mode, toggleColorMode }) { const [open, setOpen] = React.useState(false); @@ -23,112 +36,54 @@ function AppAppBar({ mode, toggleColorMode }) { setOpen(newOpen); }; - const scrollToSection = (sectionId) => { - const sectionElement = document.getElementById(sectionId); - const offset = 128; - if (sectionElement) { - const targetScroll = sectionElement.offsetTop - offset; - sectionElement.scrollIntoView({ behavior: 'smooth' }); - window.scrollTo({ - top: targetScroll, - behavior: 'smooth', - }); - setOpen(false); - } - }; - return ( - ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderRadius: '999px', - backdropFilter: 'blur(24px)', - maxHeight: 40, - border: '1px solid', - borderColor: 'divider', - bgcolor: 'hsla(220, 60%, 99%, 0.6)', - boxShadow: - '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)', - ...theme.applyStyles('dark', { - bgcolor: 'hsla(220, 0%, 0%, 0.7)', - boxShadow: - '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)', - }), - })} - > + - - - - - + - + @@ -149,19 +104,12 @@ function AppAppBar({ mode, toggleColorMode }) { - scrollToSection('features')}> - Features - - scrollToSection('testimonials')}> - Testimonials - - scrollToSection('highlights')}> - Highlights - - scrollToSection('pricing')}> - Pricing - - scrollToSection('faq')}>FAQ + Features + Testimonials + Highlights + Pricing + FAQ + Blog - - - - + - + @@ -153,19 +108,12 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) { - scrollToSection('features')}> - Features - - scrollToSection('testimonials')}> - Testimonials - - scrollToSection('highlights')}> - Highlights - - scrollToSection('pricing')}> - Pricing - - scrollToSection('faq')}>FAQ + Features + Testimonials + Highlights + Pricing + FAQ + Blog @@ -185,6 +191,7 @@ export default function Footer() { > {'Copyright © '} - Sitemark  + + Sitemark + +   {new Date().getFullYear()} ); @@ -81,8 +81,14 @@ export default function Footer() { 'aria-label': 'Enter your email address', }, }} + sx={{ width: '250px' }} /> - @@ -185,6 +191,7 @@ export default function Footer() { > ({ height: 400, marginTop: theme.spacing(8), borderRadius: theme.shape.borderRadius, - outline: '1px solid', + outline: '6px solid', + outlineColor: 'hsla(220, 25%, 80%, 0.2)', + border: '1px solid', + borderColor: theme.palette.grey[200], boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)', - backgroundImage: `url(${'/static/images/templates/templates-images/hero-light.png'})`, - outlineColor: 'hsla(220, 25%, 80%, 0.5)', + backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard.jpg'})`, backgroundSize: 'cover', [theme.breakpoints.up('sm')]: { marginTop: theme.spacing(10), @@ -28,8 +30,9 @@ const StyledBox = styled('div')(({ theme }) => ({ }, ...theme.applyStyles('dark', { boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - backgroundImage: `url(${'/static/images/templates/templates-images/hero-dark.png'})`, - outlineColor: 'hsla(210, 100%, 80%, 0.1)', + backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg'})`, + outlineColor: 'hsla(220, 20%, 42%, 0.1)', + borderColor: theme.palette.grey[700], }), })); @@ -101,7 +104,7 @@ export default function Hero() { direction={{ xs: 'column', sm: 'row' }} spacing={1} useFlexGap - sx={{ pt: 2, width: { xs: '100%', sm: 'auto' } }} + sx={{ pt: 2, width: { xs: '100%', sm: '350px' } }} > Email @@ -113,6 +116,7 @@ export default function Hero() { variant="outlined" aria-label="Enter your email address" placeholder="Your email address" + fullWidth slotProps={{ htmlInput: { autoComplete: 'off', @@ -120,11 +124,20 @@ export default function Hero() { }, }} /> - - + By clicking "Start now" you agree to our  Terms & Conditions diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx index 44fe150f745bb9..36404065efbcc0 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx @@ -17,10 +17,12 @@ const StyledBox = styled('div')(({ theme }) => ({ height: 400, marginTop: theme.spacing(8), borderRadius: theme.shape.borderRadius, - outline: '1px solid', + outline: '6px solid', + outlineColor: 'hsla(220, 25%, 80%, 0.2)', + border: '1px solid', + borderColor: theme.palette.grey[200], boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)', - backgroundImage: `url(${'/static/images/templates/templates-images/hero-light.png'})`, - outlineColor: 'hsla(220, 25%, 80%, 0.5)', + backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard.jpg'})`, backgroundSize: 'cover', [theme.breakpoints.up('sm')]: { marginTop: theme.spacing(10), @@ -28,8 +30,9 @@ const StyledBox = styled('div')(({ theme }) => ({ }, ...theme.applyStyles('dark', { boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)', - backgroundImage: `url(${'/static/images/templates/templates-images/hero-dark.png'})`, - outlineColor: 'hsla(210, 100%, 80%, 0.1)', + backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg'})`, + outlineColor: 'hsla(220, 20%, 42%, 0.1)', + borderColor: theme.palette.grey[700], }), })); @@ -101,7 +104,7 @@ export default function Hero() { direction={{ xs: 'column', sm: 'row' }} spacing={1} useFlexGap - sx={{ pt: 2, width: { xs: '100%', sm: 'auto' } }} + sx={{ pt: 2, width: { xs: '100%', sm: '350px' } }} > Email @@ -113,6 +116,7 @@ export default function Hero() { variant="outlined" aria-label="Enter your email address" placeholder="Your email address" + fullWidth slotProps={{ htmlInput: { autoComplete: 'off', @@ -120,11 +124,20 @@ export default function Hero() { }, }} /> - - + By clicking "Start now" you agree to our  Terms & Conditions diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js index db65a74bb3d525..26400a79fe68c7 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded'; @@ -59,7 +59,7 @@ export default function Highlights() { pt: { xs: 4, sm: 12 }, pb: { xs: 8, sm: 16 }, color: 'white', - bgcolor: 'hsl(220, 30%, 2%)', + bgcolor: 'grey.900', }} > - + Highlights @@ -86,9 +86,9 @@ export default function Highlights() { precision in every detail. - + {items.map((item, index) => ( - + {item.icon} diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx index db65a74bb3d525..26400a79fe68c7 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded'; @@ -59,7 +59,7 @@ export default function Highlights() { pt: { xs: 4, sm: 12 }, pb: { xs: 8, sm: 16 }, color: 'white', - bgcolor: 'hsl(220, 30%, 2%)', + bgcolor: 'grey.900', }} > - + Highlights @@ -86,9 +86,9 @@ export default function Highlights() { precision in every detail. - + {items.map((item, index) => ( - + {item.icon} diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js index a269629e4fa7b0..f62f424b477fa6 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js @@ -7,7 +7,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; @@ -25,6 +25,7 @@ const tiers = [ ], buttonText: 'Sign up for free', buttonVariant: 'outlined', + buttonColor: 'primary', }, { title: 'Professional', @@ -40,6 +41,7 @@ const tiers = [ ], buttonText: 'Start now', buttonVariant: 'contained', + buttonColor: 'secondary', }, { title: 'Enterprise', @@ -52,6 +54,7 @@ const tiers = [ ], buttonText: 'Contact us', buttonVariant: 'outlined', + buttonColor: 'primary', }, ]; @@ -75,7 +78,12 @@ export default function Pricing() { textAlign: { sm: 'left', md: 'center' }, }} > - + Pricing @@ -88,15 +96,12 @@ export default function Pricing() { {tiers.map((tier) => ( ({ border: 'none', background: - 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))', - boxShadow: `0 8px 12px hsla(210, 98%, 42%, 0.2)`, + 'radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))', + boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`, ...theme.applyStyles('dark', { + background: + 'radial-gradient(circle at 50% 0%, hsl(220, 20%, 20%), hsl(220, 30%, 16%))', boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`, }), })), @@ -137,21 +144,7 @@ export default function Pricing() { {tier.title} {tier.title === 'Professional' && ( - } - label={tier.subheader} - size="small" - sx={{ - borderColor: 'hsla(220, 60%, 99%, 0.3)', - backgroundColor: 'hsla(220, 60%, 99%, 0.1)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - '& .MuiChip-icon': { - color: 'primary.light', - }, - }} - /> + } label={tier.subheader} /> )} - diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx index 894e0f1e187bb8..b4aacef789f57e 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx @@ -7,7 +7,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; @@ -25,6 +25,7 @@ const tiers = [ ], buttonText: 'Sign up for free', buttonVariant: 'outlined', + buttonColor: 'primary', }, { title: 'Professional', @@ -40,6 +41,7 @@ const tiers = [ ], buttonText: 'Start now', buttonVariant: 'contained', + buttonColor: 'secondary', }, { title: 'Enterprise', @@ -52,6 +54,7 @@ const tiers = [ ], buttonText: 'Contact us', buttonVariant: 'outlined', + buttonColor: 'primary', }, ]; @@ -75,7 +78,12 @@ export default function Pricing() { textAlign: { sm: 'left', md: 'center' }, }} > - + Pricing @@ -88,15 +96,12 @@ export default function Pricing() { {tiers.map((tier) => ( ({ border: 'none', background: - 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))', - boxShadow: `0 8px 12px hsla(210, 98%, 42%, 0.2)`, + 'radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))', + boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`, ...theme.applyStyles('dark', { + background: + 'radial-gradient(circle at 50% 0%, hsl(220, 20%, 20%), hsl(220, 30%, 16%))', boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`, }), })), @@ -137,21 +144,7 @@ export default function Pricing() { {tier.title} {tier.title === 'Professional' && ( - } - label={tier.subheader} - size="small" - sx={{ - borderColor: 'hsla(220, 60%, 99%, 0.3)', - backgroundColor: 'hsla(220, 60%, 99%, 0.1)', - '& .MuiChip-label': { - color: 'hsl(0, 0%, 100%)', - }, - '& .MuiChip-icon': { - color: 'primary.light', - }, - }} - /> + } label={tier.subheader} /> )} {tier.buttonText} diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js index 2741de948dbe6d..a599e2c85527fe 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js @@ -6,7 +6,7 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import { useTheme } from '@mui/system'; const userTestimonials = [ @@ -100,7 +100,12 @@ export default function Testimonials() { textAlign: { sm: 'left', md: 'center' }, }} > - + Testimonials @@ -111,18 +116,22 @@ export default function Testimonials() { {userTestimonials.map((testimonial, index) => ( - + - + {testimonial.testimonial} @@ -131,7 +140,6 @@ export default function Testimonials() { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - pr: 2, }} > - + Testimonials @@ -111,18 +116,22 @@ export default function Testimonials() { {userTestimonials.map((testimonial, index) => ( - + - + {testimonial.testimonial} @@ -131,7 +140,6 @@ export default function Testimonials() { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - pr: 2, }} > ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['Inter', 'sans-serif'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getMPTheme(mode) { - return { - ...getDesignTokens(mode), - components: { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 8, - overflow: 'clip', - backgroundColor: 'hsl(0, 0%, 100%)', - border: '1px solid', - borderColor: gray[100], - ':before': { - backgroundColor: 'transparent', - }, - '&:first-of-type': { - borderTopLeftRadius: 10, - borderTopRightRadius: 10, - }, - '&:last-of-type': { - borderBottomLeftRadius: 10, - borderBottomRightRadius: 10, - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[900], - borderColor: gray[800], - }), - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[100] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiChip: { - styleOverrides: { - root: ({ theme }) => ({ - py: 1.5, - px: 0.5, - border: '1px solid', - borderColor: brand[100], - fontWeight: 600, - backgroundColor: brand[50], - '&:hover': { - backgroundColor: brand[500], - }, - '&:focus-visible': { - borderColor: brand[300], - backgroundColor: brand[200], - }, - '& .MuiChip-label': { - color: brand[500], - }, - '& .MuiChip-icon': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - borderColor: `${alpha(brand[500], 0.2)}`, - backgroundColor: `${alpha(brand[900], 0.5)}`, - '&:hover': { - backgroundColor: brand[600], - }, - '&:focus-visible': { - borderColor: brand[500], - backgroundColor: brand[800], - }, - '& .MuiChip-label': { - color: brand[200], - }, - '& .MuiChip-icon': { - color: brand[200], - }, - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - paddingRight: 6, - paddingLeft: 6, - color: gray[700], - fontSize: '0.875rem', - fontWeight: 500, - borderRadius: theme.shape.borderRadius, - ...theme.applyStyles('dark', { - color: gray[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiSwitch: { - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: 'border-box', - width: 36, - height: 24, - padding: 0, - transition: 'background-color 100ms ease-in', - '&:hover': { - '& .MuiSwitch-track': { - backgroundColor: brand[600], - }, - }, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(13px)', - }, - }, - '& .MuiSwitch-track': { - borderRadius: 50, - }, - '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', - backgroundColor: 'hsl(0, 0%, 100%)', - width: 16, - height: 16, - margin: 2, - }, - ...theme.applyStyles('dark', { - width: 36, - height: 24, - padding: 0, - transition: 'background-color 100ms ease-in', - '&:hover': { - '& .MuiSwitch-track': { - backgroundColor: brand[600], - }, - }, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(13px)', - }, - }, - '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', - backgroundColor: 'hsl(0, 0%, 100%)', - width: 16, - height: 16, - margin: 2, - }, - }), - }), - switchBase: { - height: 24, - width: 24, - padding: 0, - color: 'hsl(0, 0%, 100%)', - '&.Mui-checked + .MuiSwitch-track': { - opacity: 1, - }, - }, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx b/docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx deleted file mode 100644 index c63ec500deae3b..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/getMPTheme.tsx +++ /dev/null @@ -1,831 +0,0 @@ -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { createTheme, ThemeOptions, alpha, PaletteMode } from '@mui/material/styles'; - -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} -} - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['Inter', 'sans-serif'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getMPTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - components: { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 8, - overflow: 'clip', - backgroundColor: 'hsl(0, 0%, 100%)', - border: '1px solid', - borderColor: gray[100], - ':before': { - backgroundColor: 'transparent', - }, - '&:first-of-type': { - borderTopLeftRadius: 10, - borderTopRightRadius: 10, - }, - '&:last-of-type': { - borderBottomLeftRadius: 10, - borderBottomRightRadius: 10, - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[900], - borderColor: gray[800], - }), - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[100] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiChip: { - styleOverrides: { - root: ({ theme }) => ({ - py: 1.5, - px: 0.5, - border: '1px solid', - borderColor: brand[100], - fontWeight: 600, - backgroundColor: brand[50], - '&:hover': { - backgroundColor: brand[500], - }, - '&:focus-visible': { - borderColor: brand[300], - backgroundColor: brand[200], - }, - '& .MuiChip-label': { - color: brand[500], - }, - '& .MuiChip-icon': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - borderColor: `${alpha(brand[500], 0.2)}`, - backgroundColor: `${alpha(brand[900], 0.5)}`, - '&:hover': { - backgroundColor: brand[600], - }, - '&:focus-visible': { - borderColor: brand[500], - backgroundColor: brand[800], - }, - '& .MuiChip-label': { - color: brand[200], - }, - '& .MuiChip-icon': { - color: brand[200], - }, - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - paddingRight: 6, - paddingLeft: 6, - color: gray[700], - fontSize: '0.875rem', - fontWeight: 500, - borderRadius: theme.shape.borderRadius, - ...theme.applyStyles('dark', { - color: gray[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiSwitch: { - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: 'border-box', - width: 36, - height: 24, - padding: 0, - transition: 'background-color 100ms ease-in', - '&:hover': { - '& .MuiSwitch-track': { - backgroundColor: brand[600], - }, - }, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(13px)', - }, - }, - '& .MuiSwitch-track': { - borderRadius: 50, - }, - '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', - backgroundColor: 'hsl(0, 0%, 100%)', - width: 16, - height: 16, - margin: 2, - }, - ...theme.applyStyles('dark', { - width: 36, - height: 24, - padding: 0, - transition: 'background-color 100ms ease-in', - '&:hover': { - '& .MuiSwitch-track': { - backgroundColor: brand[600], - }, - }, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(13px)', - }, - }, - '& .MuiSwitch-thumb': { - boxShadow: '0 0 2px 2px hsla(220, 0%, 0%, 0.2)', - backgroundColor: 'hsl(0, 0%, 100%)', - width: 16, - height: 16, - margin: 2, - }, - }), - }), - switchBase: { - height: 24, - width: 24, - padding: 0, - color: 'hsl(0, 0%, 100%)', - '&.Mui-checked + .MuiSwitch-track': { - opacity: 1, - }, - }, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js similarity index 61% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts rename to docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js index 328ab0100d3884..cf04322a9a6056 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js @@ -1,46 +1,91 @@ -import { Components, Theme, alpha } from '@mui/material/styles'; +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; import { chipClasses } from '@mui/material/Chip'; import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, brand, green } from '../themePrimitives'; +import { gray, red, green } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const otherComponentsCustomizations: Components = { - MuiLink: { - defaultProps: { - underline: 'none', +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, }, + }, + MuiListItem: { styleOverrides: { root: ({ theme }) => ({ - color: brand[600], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, }, - '&:hover::before': { - width: '100%', - opacity: 1, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, }, - ...theme.applyStyles('dark', { - color: brand[200], - }), }), }, }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, MuiChip: { defaultProps: { size: 'small', @@ -50,7 +95,6 @@ export const otherComponentsCustomizations: Components = { border: '1px solid', borderRadius: '999px', [`& .${chipClasses.label}`]: { - padding: '0 4px', fontWeight: 600, }, variants: [ @@ -136,24 +180,23 @@ export const otherComponentsCustomizations: Components = { [`& .${chipClasses.label}`]: { fontSize: theme.typography.caption.fontSize, }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, }, }, ], }), }, }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, MuiTablePagination: { styleOverrides: { actions: { @@ -187,11 +230,4 @@ export const otherComponentsCustomizations: Components = { }, }, }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, }; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js similarity index 70% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js rename to docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js index 1b29fd59cf8a43..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js @@ -1,12 +1,16 @@ +import * as React from 'react'; import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { svgIconClasses } from '@mui/material/SvgIcon'; import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import { tabClasses } from '@mui/material/Tab'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const buttonsCustomizations = { +export const inputsCustomizations = { MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -35,8 +39,8 @@ export const buttonsCustomizations = { size: 'small', }, style: { - height: '2rem', // 32px - padding: '0 0.5rem', + height: '2.25rem', + padding: '8px 12px', }, }, { @@ -56,7 +60,7 @@ export const buttonsCustomizations = { color: 'white', backgroundColor: gray[900], backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, border: `1px solid ${gray[700]}`, '&:hover': { backgroundImage: 'none', @@ -70,9 +74,8 @@ export const buttonsCustomizations = { color: 'black', backgroundColor: gray[50], backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: - 'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, '&:hover': { backgroundImage: 'none', backgroundColor: gray[300], @@ -253,8 +256,8 @@ export const buttonsCustomizations = { size: 'small', }, style: { - width: '2rem', - height: '2rem', + width: '2.25rem', + height: '2.25rem', padding: '0.25rem', [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, }, @@ -306,48 +309,136 @@ export const buttonsCustomizations = { }), }, }, - MuiTabs: { + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, }), }), }, }, - MuiTab: { + MuiInputBase: { styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, + padding: '8px 12px', + color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], }, - [`&.${tabClasses.selected}`]: { - color: gray[900], + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], }, ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], + '&:hover': { + borderColor: gray[500], }, - [`&.${tabClasses.selected}`]: { - color: '#fff', + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], }), }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js new file mode 100644 index 00000000000000..c2bf15e33b25c0 --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js @@ -0,0 +1,21 @@ +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getMPTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx new file mode 100644 index 00000000000000..6341880c061bbf --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx @@ -0,0 +1,23 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, PaletteMode } from '@mui/material/styles'; +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getMPTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/data/material/getting-started/templates/pricing/Pricing.js b/docs/data/material/getting-started/templates/pricing/Pricing.js deleted file mode 100644 index cbe22db15da8c0..00000000000000 --- a/docs/data/material/getting-started/templates/pricing/Pricing.js +++ /dev/null @@ -1,282 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardHeader from '@mui/material/CardHeader'; -import CssBaseline from '@mui/material/CssBaseline'; -import Grid from '@mui/material/Grid'; -import StarIcon from '@mui/icons-material/StarBorder'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Link from '@mui/material/Link'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import Container from '@mui/material/Container'; - -function Copyright(props) { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} - -const tiers = [ - { - title: 'Free', - price: '0', - description: [ - '10 users included', - '2 GB of storage', - 'Help center access', - 'Email support', - ], - buttonText: 'Sign up for free', - buttonVariant: 'outlined', - }, - { - title: 'Pro', - subheader: 'Most popular', - price: '15', - description: [ - '20 users included', - '10 GB of storage', - 'Help center access', - 'Priority email support', - ], - buttonText: 'Get started', - buttonVariant: 'contained', - }, - { - title: 'Enterprise', - price: '30', - description: [ - '50 users included', - '30 GB of storage', - 'Help center access', - 'Phone & email support', - ], - buttonText: 'Contact us', - buttonVariant: 'outlined', - }, -]; - -const footers = [ - { - title: 'Company', - description: ['Team', 'History', 'Contact us', 'Locations'], - }, - { - title: 'Features', - description: [ - 'Cool stuff', - 'Random feature', - 'Team feature', - 'Developer stuff', - 'Another one', - ], - }, - { - title: 'Resources', - description: ['Resource', 'Resource name', 'Another resource', 'Final resource'], - }, - { - title: 'Legal', - description: ['Privacy policy', 'Terms of use'], - }, -]; - -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - -export default function Pricing() { - return ( - - - - ({ borderBottom: `1px solid ${theme.palette.divider}` })} - > - - - Company name - - - - - - {/* Hero unit */} - - - Pricing - - - Quickly build an effective pricing table for your potential customers with - this layout. It's built with default MUI components with little - customization. - - - {/* End hero unit */} - - - {tiers.map((tier) => ( - // Enterprise card is full width at sm breakpoint - - - : null} - subheaderTypographyProps={{ - align: 'center', - }} - sx={(theme) => ({ - backgroundColor: theme.palette.grey[200], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[700], - }), - })} - /> - - - - ${tier.price} - - - /mo - - -
    - {tier.description.map((line) => ( - - {line} - - ))} -
- - - - - - - ))} - - - {/* Footer */} - ({ - borderTop: `1px solid ${theme.palette.divider}`, - mt: 8, - py: [3, 6], - })} - > - - {footers.map((footer) => ( - - - {footer.title} - -
    - {footer.description.map((item) => ( -
  • - - {item} - -
    • - ))} -
- - ))} - - - - {/* End footer */} - - ); -} diff --git a/docs/data/material/getting-started/templates/pricing/Pricing.tsx b/docs/data/material/getting-started/templates/pricing/Pricing.tsx deleted file mode 100644 index f331b1065cf8dc..00000000000000 --- a/docs/data/material/getting-started/templates/pricing/Pricing.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardHeader from '@mui/material/CardHeader'; -import CssBaseline from '@mui/material/CssBaseline'; -import Grid from '@mui/material/Grid'; -import StarIcon from '@mui/icons-material/StarBorder'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Link from '@mui/material/Link'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import Container from '@mui/material/Container'; - -function Copyright(props: any) { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ); -} - -const tiers = [ - { - title: 'Free', - price: '0', - description: [ - '10 users included', - '2 GB of storage', - 'Help center access', - 'Email support', - ], - buttonText: 'Sign up for free', - buttonVariant: 'outlined', - }, - { - title: 'Pro', - subheader: 'Most popular', - price: '15', - description: [ - '20 users included', - '10 GB of storage', - 'Help center access', - 'Priority email support', - ], - buttonText: 'Get started', - buttonVariant: 'contained', - }, - { - title: 'Enterprise', - price: '30', - description: [ - '50 users included', - '30 GB of storage', - 'Help center access', - 'Phone & email support', - ], - buttonText: 'Contact us', - buttonVariant: 'outlined', - }, -]; -const footers = [ - { - title: 'Company', - description: ['Team', 'History', 'Contact us', 'Locations'], - }, - { - title: 'Features', - description: [ - 'Cool stuff', - 'Random feature', - 'Team feature', - 'Developer stuff', - 'Another one', - ], - }, - { - title: 'Resources', - description: ['Resource', 'Resource name', 'Another resource', 'Final resource'], - }, - { - title: 'Legal', - description: ['Privacy policy', 'Terms of use'], - }, -]; - -// TODO remove, this demo shouldn't need to reset the theme. -const defaultTheme = createTheme(); - -export default function Pricing() { - return ( - - - - ({ borderBottom: `1px solid ${theme.palette.divider}` })} - > - - - Company name - - - - - - {/* Hero unit */} - - - Pricing - - - Quickly build an effective pricing table for your potential customers with - this layout. It's built with default MUI components with little - customization. - - - {/* End hero unit */} - - - {tiers.map((tier) => ( - // Enterprise card is full width at sm breakpoint - - - : null} - subheaderTypographyProps={{ - align: 'center', - }} - sx={(theme) => ({ - backgroundColor: theme.palette.grey[200], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[700], - }), - })} - /> - - - - ${tier.price} - - - /mo - - -
    - {tier.description.map((line) => ( - - {line} - - ))} -
- - - - - - - ))} - - - {/* Footer */} - ({ - borderTop: `1px solid ${theme.palette.divider}`, - mt: 8, - py: [3, 6], - })} - > - - {footers.map((footer) => ( - - - {footer.title} - -
    - {footer.description.map((item) => ( -
  • - - {item} - -
    • - ))} -
- - ))} - - - - {/* End footer */} - - ); -} diff --git a/docs/data/material/getting-started/templates/pricing/README.md b/docs/data/material/getting-started/templates/pricing/README.md deleted file mode 100644 index e5b41bad100a87..00000000000000 --- a/docs/data/material/getting-started/templates/pricing/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Pricing template - -## Usage - - - -1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/next/examples). -2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react. -3. Import and use the `Pricing` component. - -## Demo - - - -View the demo at https://next.mui.com/material-ui/getting-started/templates/pricing/. diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js new file mode 100644 index 00000000000000..cf04322a9a6056 --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js @@ -0,0 +1,233 @@ +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/buttons.ts b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js similarity index 69% rename from docs/data/material/getting-started/templates/blog/theme/customizations/buttons.ts rename to docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js index 38f09916fb049c..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/blog/theme/customizations/buttons.ts +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js @@ -1,12 +1,16 @@ -import { Components, alpha, Theme } from '@mui/material/styles'; +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { svgIconClasses } from '@mui/material/SvgIcon'; import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import { tabClasses } from '@mui/material/Tab'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const buttonsCustomizations: Components = { +export const inputsCustomizations = { MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -35,8 +39,8 @@ export const buttonsCustomizations: Components = { size: 'small', }, style: { - height: '2rem', // 32px - padding: '0 0.5rem', + height: '2.25rem', + padding: '8px 12px', }, }, { @@ -56,7 +60,7 @@ export const buttonsCustomizations: Components = { color: 'white', backgroundColor: gray[900], backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, border: `1px solid ${gray[700]}`, '&:hover': { backgroundImage: 'none', @@ -70,8 +74,8 @@ export const buttonsCustomizations: Components = { color: 'black', backgroundColor: gray[50], backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: 'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, '&:hover': { backgroundImage: 'none', backgroundColor: gray[300], @@ -123,7 +127,6 @@ export const buttonsCustomizations: Components = { ...theme.applyStyles('dark', { backgroundColor: gray[800], borderColor: gray[700], - '&:hover': { backgroundColor: gray[900], borderColor: gray[600], @@ -253,8 +256,8 @@ export const buttonsCustomizations: Components = { size: 'small', }, style: { - width: '2rem', - height: '2rem', + width: '2.25rem', + height: '2.25rem', padding: '0.25rem', [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, }, @@ -306,48 +309,136 @@ export const buttonsCustomizations: Components = { }), }, }, - MuiTabs: { + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, }), }), }, }, - MuiTab: { + MuiInputBase: { styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, + padding: '8px 12px', + color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], }, - [`&.${tabClasses.selected}`]: { - color: gray[900], + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], }, ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], + '&:hover': { + borderColor: gray[500], }, - [`&.${tabClasses.selected}`]: { - color: '#fff', + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], }), }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js index c5d0afdc6a674b..57d293c0490a54 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js @@ -20,18 +20,17 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), width: '450px', }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -87,7 +86,7 @@ export default function SignInCard() { }; return ( - + @@ -157,9 +156,18 @@ export default function SignInCard() { - - Don't have an account? Sign up - + + Don't have an account?{' '} + + + Sign up + + + or @@ -167,7 +175,6 @@ export default function SignInCard() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Google')} startIcon={} > @@ -177,7 +184,6 @@ export default function SignInCard() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx index 1c37fd72d7d6fe..d4ad50ec2f2323 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx @@ -20,18 +20,17 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), width: '450px', }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -87,7 +86,7 @@ export default function SignInCard() { }; return ( - + @@ -157,9 +156,18 @@ export default function SignInCard() { - - Don't have an account? Sign up - + + Don't have an account?{' '} + + + Sign up + + + or @@ -167,7 +175,6 @@ export default function SignInCard() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Google')} startIcon={} > @@ -177,7 +184,6 @@ export default function SignInCard() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js index 1672577cc1e9de..f293d336edad40 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js @@ -11,7 +11,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; -import getSignInSideTheme from './getSignInSideTheme'; +import getSignInSideTheme from './theme/getSignInSideTheme'; import ToggleColorMode from './ToggleColorMode'; import SignInCard from './SignInCard'; import Content from './Content'; @@ -65,9 +65,25 @@ export default function SignInSide() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const defaultTheme = createTheme({ palette: { mode } }); const SignInSideTheme = createTheme(getSignInSideTheme(mode)); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx index 157e124a8e0bcb..651af2589a0354 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx @@ -10,7 +10,7 @@ import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; -import getSignInSideTheme from './getSignInSideTheme'; +import getSignInSideTheme from './theme/getSignInSideTheme'; import ToggleColorMode from './ToggleColorMode'; import SignInCard from './SignInCard'; import Content from './Content'; @@ -65,9 +65,25 @@ export default function SignInSide() { const [showCustomTheme, setShowCustomTheme] = React.useState(true); const defaultTheme = createTheme({ palette: { mode } }); const SignInSideTheme = createTheme(getSignInSideTheme(mode)); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js deleted file mode 100644 index 406f3df6e4fe32..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.js +++ /dev/null @@ -1,703 +0,0 @@ -import * as React from 'react'; - -import { createTheme, alpha } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getSignInSideTheme(mode) { - return { - ...getDesignTokens(mode), - components: { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - backgroundColor: alpha(gray[100], 0.4), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx deleted file mode 100644 index b2fa8b1d37d5c6..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/getSignInSideTheme.tsx +++ /dev/null @@ -1,720 +0,0 @@ -import * as React from 'react'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { createTheme, ThemeOptions, alpha, PaletteMode } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} -} - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - components: { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.3)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${gray[200]}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - backgroundColor: alpha(gray[100], 0.4), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js new file mode 100644 index 00000000000000..cf04322a9a6056 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js @@ -0,0 +1,233 @@ +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js similarity index 69% rename from docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts rename to docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js index 38f09916fb049c..12cea77491064a 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js @@ -1,12 +1,16 @@ -import { Components, alpha, Theme } from '@mui/material/styles'; +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { svgIconClasses } from '@mui/material/SvgIcon'; import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import { tabClasses } from '@mui/material/Tab'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; import { gray, brand } from '../themePrimitives'; /* eslint-disable import/prefer-default-export */ -export const buttonsCustomizations: Components = { +export const inputsCustomizations = { MuiButtonBase: { defaultProps: { disableTouchRipple: true, @@ -35,8 +39,8 @@ export const buttonsCustomizations: Components = { size: 'small', }, style: { - height: '2rem', // 32px - padding: '0 0.5rem', + height: '2.25rem', + padding: '8px 12px', }, }, { @@ -56,7 +60,7 @@ export const buttonsCustomizations: Components = { color: 'white', backgroundColor: gray[900], backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, border: `1px solid ${gray[700]}`, '&:hover': { backgroundImage: 'none', @@ -70,8 +74,8 @@ export const buttonsCustomizations: Components = { color: 'black', backgroundColor: gray[50], backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: 'inset 0 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, '&:hover': { backgroundImage: 'none', backgroundColor: gray[300], @@ -123,7 +127,6 @@ export const buttonsCustomizations: Components = { ...theme.applyStyles('dark', { backgroundColor: gray[800], borderColor: gray[700], - '&:hover': { backgroundColor: gray[900], borderColor: gray[600], @@ -253,8 +256,8 @@ export const buttonsCustomizations: Components = { size: 'small', }, style: { - width: '2rem', - height: '2rem', + width: '2.25rem', + height: '2.25rem', padding: '0.25rem', [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, }, @@ -306,48 +309,136 @@ export const buttonsCustomizations: Components = { }), }, }, - MuiTabs: { + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, }), }), }, }, - MuiTab: { + MuiInputBase: { styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, + padding: '8px 12px', + color: theme.palette.text.primary, borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], }, - [`&.${tabClasses.selected}`]: { - color: gray[900], + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], }, ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], + '&:hover': { + borderColor: gray[500], }, - [`&.${tabClasses.selected}`]: { - color: '#fff', + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], }), }), }, }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, }; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js new file mode 100644 index 00000000000000..c149525eed0033 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js @@ -0,0 +1,21 @@ +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignInSideTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx new file mode 100644 index 00000000000000..0b2ecfc4b15903 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx @@ -0,0 +1,23 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, PaletteMode } from '@mui/material/styles'; +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index fc49401bc99790..685c79925e6033 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -21,7 +21,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; import ForgotPassword from './ForgotPassword'; -import getSignInTheme from './getSignInTheme'; +import getSignInTheme from './theme/getSignInTheme'; import ToggleColorMode from './ToggleColorMode'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; @@ -73,18 +73,17 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), width: '450px', }, boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -100,7 +99,7 @@ const SignInContainer = styled(Stack)(({ theme }) => ({ }, ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), })); @@ -115,8 +114,25 @@ export default function SignIn() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [open, setOpen] = React.useState(false); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { @@ -200,7 +216,7 @@ export default function SignIn() { p: 2, }} > - + Sign in - - Don't have an account? Sign up - + + Don't have an account?{' '} + + + Sign up + + + or @@ -292,7 +313,6 @@ export default function SignIn() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Google')} startIcon={} > @@ -302,7 +322,6 @@ export default function SignIn() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx index 2962e9485c7675..6bf8c3861e58fe 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -25,7 +25,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; import ForgotPassword from './ForgotPassword'; -import getSignInTheme from './getSignInTheme'; +import getSignInTheme from './theme/getSignInTheme'; import ToggleColorMode from './ToggleColorMode'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; @@ -78,18 +78,17 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), width: '450px', }, boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -105,7 +104,7 @@ const SignInContainer = styled(Stack)(({ theme }) => ({ }, ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), })); @@ -120,8 +119,25 @@ export default function SignIn() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [open, setOpen] = React.useState(false); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; const toggleCustomTheme = () => { @@ -205,7 +221,7 @@ export default function SignIn() { p: 2, }} > - + Sign in - - Don't have an account? Sign up - + + Don't have an account?{' '} + + + Sign up + + + or @@ -297,7 +318,6 @@ export default function SignIn() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Google')} startIcon={} > @@ -307,7 +327,6 @@ export default function SignIn() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign in with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js deleted file mode 100644 index e0a4984d4885d5..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.js +++ /dev/null @@ -1,702 +0,0 @@ -import * as React from 'react'; - -import { createTheme, alpha } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getSignInTheme(mode) { - return { - ...getDesignTokens(mode), - components: { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.1)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.2)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - backgroundColor: alpha(gray[100], 0.4), - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx deleted file mode 100644 index 608bdd505f20d3..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/getSignInTheme.tsx +++ /dev/null @@ -1,719 +0,0 @@ -import * as React from 'react'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { createTheme, ThemeOptions, alpha, PaletteMode } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; - -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} -} - -const customTheme = createTheme(); - -export const brand = { - 50: 'hsl(210, 100%, 97%)', - 100: 'hsl(210, 100%, 90%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 60%, 99%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 20%)', - 800: 'hsl(0, 95%, 16%)', - 900: 'hsl(0, 93%, 12%)', -}; - -const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[500], - dark: brand[800], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[100], - light: brand[300], - main: brand[400], - dark: brand[800], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), - background: { - default: 'hsl(0, 0%, 100%)', - paper: gray[100], - ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }), - }, - text: { - primary: gray[800], - secondary: gray[600], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - selected: `${alpha(brand[200], 0.2)}`, - ...(mode === 'dark' && { - selected: alpha(brand[800], 0.2), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(60), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(42), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 500, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(16), - }, - body1: { - fontSize: customTheme.typography.pxToRem(15), - fontWeight: 400, - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 12, - }, -}); - -export default function getSignInTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - components: { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: { - boxSizing: 'border-box', - transition: 'all 100ms ease', - '&:focus-visible': { - outline: `3px solid ${alpha(brand[400], 0.5)}`, - outlineOffset: '2px', - }, - }, - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', // 32px - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`, - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: brand[700], - backgroundColor: alpha(brand[300], 0.1), - borderColor: alpha(brand[200], 0.8), - boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`, - '&:hover': { - backgroundColor: alpha(brand[300], 0.2), - borderColor: alpha(brand[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[300], 0.3), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: brand[200], - backgroundColor: alpha(brand[600], 0.1), - borderColor: alpha(brand[600], 0.6), - boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(brand[700], 0.2), - borderColor: alpha(brand[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(brand[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - backgroundColor: alpha(gray[300], 0.1), - borderColor: alpha(gray[300], 0.5), - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - borderColor: alpha(gray[300], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[300], 0.4), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`, - backgroundImage: 'none', - }, - ...theme.applyStyles('dark', { - color: gray[300], - backgroundColor: alpha(gray[600], 0.1), - borderColor: alpha(gray[700], 0.5), - boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`, - '&:hover': { - backgroundColor: alpha(gray[700], 0.2), - borderColor: alpha(gray[700], 0.5), - boxShadow: 'none', - }, - '&:active': { - backgroundColor: alpha(gray[800], 0.2), - boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`, - backgroundImage: 'none', - }, - }), - }, - }, - { - props: { - color: 'primary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[700], 0.3), - }, - }), - }, - }, - { - props: { - color: 'info', - variant: 'text', - }, - style: { - color: gray[700], - '&:hover': { - backgroundColor: alpha(gray[300], 0.3), - }, - ...theme.applyStyles('dark', { - color: gray[200], - '&:hover': { - backgroundColor: alpha(gray[700], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${alpha(gray[200], 0.1)}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: alpha(gray[800], 0.6), - border: `1px solid ${alpha(gray[700], 0.2)}`, - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${alpha(gray[200], 0.5)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`, - ...theme.applyStyles('dark', { - border: `1px solid ${alpha(gray[700], 0.4)}`, - boxShadow: 'none', - background: `linear-gradient(to bottom, ${gray[900]}, ${alpha( - gray[800], - 0.5, - )})`, - }), - }, - }, - ], - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - backgroundColor: alpha(gray[100], 0.4), - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: `${alpha(gray[200], 0.8)}`, - ...theme.applyStyles('dark', { - borderColor: `${alpha(gray[700], 0.4)}`, - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - color: brand[500], - '&:hover': { - backgroundColor: alpha(brand[300], 0.3), - borderColor: brand[200], - }, - ...theme.applyStyles('dark', { - color: brand[200], - '&:hover': { - backgroundColor: alpha(brand[600], 0.3), - borderColor: brand[700], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - width: '2rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - width: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[700], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: '100%', - opacity: 1, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - ...theme.applyStyles('dark', { - color: brand[200], - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - border: 'none', - }, - input: { - paddingLeft: 10, - }, - root: ({ theme }) => ({ - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`, - maxHeight: '4px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - boxSizing: 'border-box', - flexGrow: 1, - height: '40px', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset', - transition: 'border-color 120ms ease-in', - backgroundColor: alpha(gray[100], 0.4), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - 'input:-webkit-autofill': { - WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`, - maxHeight: '6px', - borderRadius: '8px', - }, - '& .MuiInputBase-input': { - fontSize: '1rem', - '&::placeholder': { - opacity: 1, - color: gray[500], - }, - }, - borderColor: alpha(gray[700], 0.5), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - transition: 'border-color 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focused': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - variants: [ - { - props: { - color: 'error', - }, - style: { - borderColor: red[200], - color: red[500], - '& + .MuiFormHelperText-root': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[700], - color: red[300], - '& + .MuiFormHelperText-root': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiStack: { - defaultProps: { - useFlexGap: true, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-selected': { - color: 'hsl(0, 0%, 100%)', - }, - boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: theme.shape.borderRadius, - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js new file mode 100644 index 00000000000000..cf04322a9a6056 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js @@ -0,0 +1,233 @@ +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js new file mode 100644 index 00000000000000..12cea77491064a --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js new file mode 100644 index 00000000000000..0e7b709b13affd --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js @@ -0,0 +1,21 @@ +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignInTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx new file mode 100644 index 00000000000000..5354fc57af3932 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx @@ -0,0 +1,23 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, PaletteMode } from '@mui/material/styles'; +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignInTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js index 7692e11590e156..fa45753bbd4f46 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -20,7 +20,7 @@ import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import getSignUpTheme from './getSignUpTheme'; +import getSignUpTheme from './theme/getSignUpTheme'; import ToggleColorMode from './ToggleColorMode'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; @@ -72,18 +72,18 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', [theme.breakpoints.up('sm')]: { padding: theme.spacing(4), width: '450px', }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -99,7 +99,7 @@ const SignUpContainer = styled(Stack)(({ theme }) => ({ }, ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), })); @@ -114,6 +114,30 @@ export default function SignUp() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [nameError, setNameError] = React.useState(false); const [nameErrorMessage, setNameErrorMessage] = React.useState(''); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode'); + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + + const toggleColorMode = () => { + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; const validateInputs = () => { const email = document.getElementById('email'); @@ -152,14 +176,6 @@ export default function SignUp() { return isValid; }; - const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; - const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); @@ -204,7 +220,7 @@ export default function SignUp() { p: 2, }} > - + Sign up - - Already have an account? Sign in - + + Already have an account?{' '} + + + Sign in + + + or @@ -291,7 +312,6 @@ export default function SignUp() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign up with Google')} startIcon={} > @@ -301,7 +321,6 @@ export default function SignUp() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign up with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx index 63d92b7d7245e3..4b86d512ab5aad 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -24,7 +24,7 @@ import { import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import getSignUpTheme from './getSignUpTheme'; +import getSignUpTheme from './theme/getSignUpTheme'; import ToggleColorMode from './ToggleColorMode'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; @@ -77,18 +77,18 @@ const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - gap: theme.spacing(4), width: '100%', - padding: theme.spacing(2), + padding: theme.spacing(4), + gap: theme.spacing(2), boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', [theme.breakpoints.up('sm')]: { padding: theme.spacing(4), width: '450px', }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px', + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', }), })); @@ -104,7 +104,7 @@ const SignUpContainer = styled(Stack)(({ theme }) => ({ }, ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), })); @@ -119,6 +119,30 @@ export default function SignUp() { const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [nameError, setNameError] = React.useState(false); const [nameErrorMessage, setNameErrorMessage] = React.useState(''); + // This code only runs on the client side, to determine the system color preference + React.useEffect(() => { + // Check if there is a preferred mode in localStorage + const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; + if (savedMode) { + setMode(savedMode); + } else { + // If no preference is found, it uses system preference + const systemPrefersDark = window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches; + setMode(systemPrefersDark ? 'dark' : 'light'); + } + }, []); + + const toggleColorMode = () => { + const newMode = mode === 'dark' ? 'light' : 'dark'; + setMode(newMode); + localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage + }; + + const toggleCustomTheme = () => { + setShowCustomTheme((prev) => !prev); + }; const validateInputs = () => { const email = document.getElementById('email') as HTMLInputElement; @@ -157,14 +181,6 @@ export default function SignUp() { return isValid; }; - const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; - const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); @@ -209,7 +225,7 @@ export default function SignUp() { p: 2, }} > - + Sign up - - Already have an account? Sign in - + + Already have an account?{' '} + + + Sign in + + + or @@ -296,7 +317,6 @@ export default function SignUp() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign up with Google')} startIcon={} > @@ -306,7 +326,6 @@ export default function SignUp() { type="submit" fullWidth variant="outlined" - color="secondary" onClick={() => alert('Sign up with Facebook')} startIcon={} > diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js new file mode 100644 index 00000000000000..cf04322a9a6056 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js @@ -0,0 +1,233 @@ +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx new file mode 100644 index 00000000000000..c93ccbfbcabf85 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx @@ -0,0 +1,233 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataDisplayCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + '&.Mui-selected': { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + '&:focus-visible': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + '&:focus-visible': { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + fontWeight: 600, + }, + variants: [ + { + props: { + color: 'default', + }, + style: { + borderColor: gray[200], + backgroundColor: gray[100], + [`& .${chipClasses.label}`]: { + color: gray[500], + }, + [`& .${chipClasses.icon}`]: { + color: gray[500], + }, + ...theme.applyStyles('dark', { + borderColor: gray[700], + backgroundColor: gray[800], + [`& .${chipClasses.label}`]: { + color: gray[300], + }, + [`& .${chipClasses.icon}`]: { + color: gray[300], + }, + }), + }, + }, + { + props: { + color: 'success', + }, + style: { + borderColor: green[200], + backgroundColor: green[50], + [`& .${chipClasses.label}`]: { + color: green[500], + }, + [`& .${chipClasses.icon}`]: { + color: green[500], + }, + ...theme.applyStyles('dark', { + borderColor: green[800], + backgroundColor: green[900], + [`& .${chipClasses.label}`]: { + color: green[300], + }, + [`& .${chipClasses.icon}`]: { + color: green[300], + }, + }), + }, + }, + { + props: { + color: 'error', + }, + style: { + borderColor: red[100], + backgroundColor: red[50], + [`& .${chipClasses.label}`]: { + color: red[500], + }, + [`& .${chipClasses.icon}`]: { + color: red[500], + }, + ...theme.applyStyles('dark', { + borderColor: red[800], + backgroundColor: red[900], + [`& .${chipClasses.label}`]: { + color: red[200], + }, + [`& .${chipClasses.icon}`]: { + color: red[300], + }, + }), + }, + }, + { + props: { size: 'small' }, + style: { + maxHeight: 20, + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + [`& .${svgIconClasses.root}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + { + props: { size: 'medium' }, + style: { + [`& .${chipClasses.label}`]: { + fontSize: theme.typography.caption.fontSize, + }, + }, + }, + ], + }), + }, + }, + MuiTablePagination: { + styleOverrides: { + actions: { + display: 'flex', + gap: 8, + marginRight: 6, + [`& .${iconButtonClasses.root}`]: { + minWidth: 0, + width: 36, + height: 36, + }, + }, + }, + }, + MuiIcon: { + defaultProps: { + fontSize: 'small', + }, + styleOverrides: { + root: { + variants: [ + { + props: { + fontSize: 'small', + }, + style: { + fontSize: '1rem', + }, + }, + ], + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js new file mode 100644 index 00000000000000..d521ecbd350128 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx new file mode 100644 index 00000000000000..aaf00001b522ca --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx @@ -0,0 +1,46 @@ +import { Theme, alpha, Components } from '@mui/material/styles'; +import { gray, orange } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const feedbackCustomizations: Components = { + MuiAlert: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 10, + backgroundColor: orange[100], + color: theme.palette.text.primary, + border: `1px solid ${alpha(orange[300], 0.5)}`, + '& .MuiAlert-icon': { + color: orange[500], + }, + ...theme.applyStyles('dark', { + backgroundColor: `${alpha(orange[900], 0.5)}`, + border: `1px solid ${alpha(orange[800], 0.5)}`, + }), + }), + }, + }, + MuiDialog: { + styleOverrides: { + root: ({ theme }) => ({ + '& .MuiDialog-paper': { + borderRadius: '10px', + border: '1px solid', + borderColor: theme.palette.divider, + }, + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts new file mode 100644 index 00000000000000..91a4485333d139 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts @@ -0,0 +1,5 @@ +export { inputsCustomizations } from './inputs'; +export { dataDisplayCustomizations } from './dataDisplay'; +export { feedbackCustomizations } from './feedback'; +export { navigationCustomizations } from './navigation'; +export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js new file mode 100644 index 00000000000000..12cea77491064a --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..4be4c18628e16e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx @@ -0,0 +1,445 @@ +import * as React from 'react'; +import { alpha, Theme, Components } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const inputsCustomizations: Components = { + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + boxSizing: 'border-box', + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + padding: '8px 12px', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', // 40px + }, + }, + { + props: { + color: 'primary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: gray[900], + backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, + boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, + border: `1px solid ${gray[700]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[800], + }, + ...theme.applyStyles('dark', { + color: 'black', + backgroundColor: gray[50], + backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, + boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', + border: `1px solid ${gray[50]}`, + '&:hover': { + backgroundImage: 'none', + backgroundColor: gray[300], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: gray[400], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'contained', + }, + style: { + color: 'white', + backgroundColor: brand[300], + backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, + boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, + border: `1px solid ${brand[500]}`, + '&:hover': { + backgroundColor: brand[700], + boxShadow: 'none', + }, + '&:active': { + backgroundColor: brand[700], + backgroundImage: 'none', + }, + }, + }, + { + props: { + variant: 'outlined', + }, + style: { + color: theme.palette.text.primary, + border: '1px solid', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'outlined', + }, + style: { + color: brand[700], + border: '1px solid', + borderColor: brand[200], + backgroundColor: brand[50], + '&:hover': { + backgroundColor: brand[100], + borderColor: brand[400], + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[50], + border: '1px solid', + borderColor: brand[900], + backgroundColor: alpha(brand[900], 0.3), + '&:hover': { + borderColor: brand[700], + backgroundColor: alpha(brand[900], 0.6), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.5), + }, + }), + }, + }, + { + props: { + variant: 'text', + }, + style: { + color: gray[600], + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[700], + }, + '&:active': { + backgroundColor: alpha(gray[700], 0.7), + }, + }), + }, + }, + { + props: { + color: 'secondary', + variant: 'text', + }, + style: { + color: brand[700], + '&:hover': { + backgroundColor: alpha(brand[100], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[200], 0.7), + }, + ...theme.applyStyles('dark', { + color: brand[100], + '&:hover': { + backgroundColor: alpha(brand[900], 0.5), + }, + '&:active': { + backgroundColor: alpha(brand[900], 0.3), + }, + }), + }, + }, + ], + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: ({ theme }) => ({ + boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + textTransform: 'none', + fontWeight: theme.typography.fontWeightMedium, + letterSpacing: 0, + color: theme.palette.text.primary, + border: '1px solid ', + borderColor: gray[200], + backgroundColor: alpha(gray[50], 0.3), + '&:hover': { + backgroundColor: gray[100], + borderColor: gray[300], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + borderColor: gray[700], + '&:hover': { + backgroundColor: gray[900], + borderColor: gray[600], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + width: '2.25rem', + height: '2.25rem', + padding: '0.25rem', + [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, + }, + }, + { + props: { + size: 'medium', + }, + style: { + width: '2.5rem', + height: '2.5rem', + }, + }, + ], + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: '10px', + boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, + [`& .${toggleButtonGroupClasses.selected}`]: { + color: brand[500], + }, + ...theme.applyStyles('dark', { + [`& .${toggleButtonGroupClasses.selected}`]: { + color: '#fff', + }, + boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '12px 16px', + textTransform: 'none', + borderRadius: '10px', + fontWeight: 500, + ...theme.applyStyles('dark', { + color: gray[400], + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', + [`&.${toggleButtonClasses.selected}`]: { + color: brand[300], + }, + }), + }), + }, + }, + MuiCheckbox: { + defaultProps: { + disableRipple: true, + icon: ( + + ), + checkedIcon: , + indeterminateIcon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + margin: 10, + height: 16, + width: 16, + borderRadius: 5, + border: '1px solid ', + borderColor: alpha(gray[300], 0.8), + boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', + backgroundColor: alpha(gray[100], 0.4), + transition: 'border-color, background-color, 120ms ease-in', + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + borderColor: brand[400], + }, + '&.Mui-checked': { + color: 'white', + backgroundColor: brand[500], + borderColor: brand[500], + boxShadow: `none`, + '&:hover': { + backgroundColor: brand[600], + }, + }, + ...theme.applyStyles('dark', { + borderColor: alpha(gray[700], 0.8), + boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', + backgroundColor: alpha(gray[900], 0.8), + '&:hover': { + borderColor: brand[300], + }, + '&.Mui-focusVisible': { + borderColor: brand[400], + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }), + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + border: 'none', + }, + input: { + '&::placeholder': { + opacity: 0.7, + color: gray[500], + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + input: { + padding: 0, + }, + root: ({ theme }) => ({ + padding: '8px 12px', + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundColor: theme.palette.background.default, + transition: 'border 120ms ease-in', + '&:hover': { + borderColor: gray[400], + }, + [`&.${outlinedInputClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + ...theme.applyStyles('dark', { + '&:hover': { + borderColor: gray[500], + }, + }), + variants: [ + { + props: { + size: 'small', + }, + style: { + height: '2.25rem', + }, + }, + { + props: { + size: 'medium', + }, + style: { + height: '2.5rem', + }, + }, + ], + }), + notchedOutline: { + border: 'none', + }, + }, + }, + MuiInputAdornment: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiFormLabel: { + styleOverrides: { + root: ({ theme }) => ({ + typography: theme.typography.caption, + marginBottom: 8, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js new file mode 100644 index 00000000000000..ded180025db59e --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js @@ -0,0 +1,278 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; + +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx new file mode 100644 index 00000000000000..f6b92e573f6316 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx @@ -0,0 +1,279 @@ +import * as React from 'react'; +import { Theme, alpha, Components } from '@mui/material/styles'; +import { SvgIconProps } from '@mui/material/SvgIcon'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import { tabClasses } from '@mui/material/Tab'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const navigationCustomizations: Components = { + MuiMenuItem: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: '6px 8px', + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + [`&.${menuItemClasses.selected}`]: { + [`&.${menuItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + }), + }, + }, + MuiMenu: { + styleOverrides: { + list: { + gap: '0px', + [`&.${dividerClasses.root}`]: { + margin: '0 -8px', + }, + }, + paper: ({ theme }) => ({ + marginTop: '4px', + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + backgroundImage: 'none', + background: 'hsl(0, 0%, 100%)', + boxShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + [`& .${buttonBaseClasses.root}`]: { + '&.Mui-selected': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + }, + ...theme.applyStyles('dark', { + background: gray[900], + boxShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }), + }), + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: React.forwardRef((props, ref) => ( + + )), + }, + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: gray[200], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, + '&:hover': { + borderColor: gray[300], + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[400], + }, + '&:before, &:after': { + display: 'none', + }, + + ...theme.applyStyles('dark', { + borderRadius: theme.shape.borderRadius, + borderColor: gray[700], + backgroundColor: theme.palette.background.paper, + boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, + '&:hover': { + borderColor: alpha(gray[700], 0.7), + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + [`&.${selectClasses.focused}`]: { + outlineOffset: 0, + borderColor: gray[900], + }, + '&:before, &:after': { + display: 'none', + }, + }), + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + width: 'fit-content', + '&::before': { + content: '""', + position: 'absolute', + width: '100%', + height: '1px', + bottom: 0, + left: 0, + backgroundColor: theme.palette.text.secondary, + opacity: 0.3, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&:hover::before': { + width: 0, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '4px', + borderRadius: '2px', + }, + }), + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => ({ + '&.Mui-selected': { + color: 'white', + backgroundColor: theme.palette.grey[900], + }, + ...theme.applyStyles('dark', { + '&.Mui-selected': { + color: 'black', + backgroundColor: theme.palette.grey[50], + }, + }), + }), + }, + }, + MuiTabs: { + styleOverrides: { + root: { minHeight: 'fit-content' }, + indicator: ({ theme }) => ({ + backgroundColor: theme.palette.grey[800], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[200], + }), + }), + }, + }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + padding: '6px 8px', + marginBottom: '8px', + textTransform: 'none', + minWidth: 'fit-content', + minHeight: 'fit-content', + color: theme.palette.text.secondary, + borderRadius: theme.shape.borderRadius, + border: '1px solid', + borderColor: 'transparent', + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[100], + borderColor: gray[200], + }, + [`&.${tabClasses.selected}`]: { + color: gray[900], + }, + ...theme.applyStyles('dark', { + ':hover': { + color: theme.palette.text.primary, + backgroundColor: gray[800], + borderColor: gray[700], + }, + [`&.${tabClasses.selected}`]: { + color: '#fff', + }, + }), + }), + }, + }, + MuiStepConnector: { + styleOverrides: { + line: ({ theme }) => ({ + borderTop: '1px solid', + borderColor: theme.palette.divider, + flex: 1, + borderRadius: '99px', + }), + }, + }, + MuiStepIcon: { + styleOverrides: { + root: ({ theme }) => ({ + color: 'transparent', + border: `1px solid ${gray[400]}`, + width: 12, + height: 12, + borderRadius: '50%', + '& text': { + display: 'none', + }, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.main, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.main, + }, + ...theme.applyStyles('dark', { + border: `1px solid ${gray[700]}`, + '&.Mui-active': { + border: 'none', + color: theme.palette.primary.light, + }, + '&.Mui-completed': { + border: 'none', + color: theme.palette.success.light, + }, + }), + variants: [ + { + props: { completed: true }, + style: { + width: 12, + height: 12, + }, + }, + ], + }), + }, + }, + MuiStepLabel: { + styleOverrides: { + label: ({ theme }) => ({ + '&.Mui-completed': { + opacity: 0.6, + ...theme.applyStyles('dark', { opacity: 0.5 }), + }, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js new file mode 100644 index 00000000000000..ff4a53884964ae --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js @@ -0,0 +1,113 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts new file mode 100644 index 00000000000000..5bcdfc5c055b0f --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts @@ -0,0 +1,113 @@ +import { alpha, Theme, Components } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const surfacesCustomizations: Components = { + MuiAccordion: { + defaultProps: { + elevation: 0, + disableGutters: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + padding: 4, + overflow: 'clip', + backgroundColor: theme.palette.background.default, + border: '1px solid', + borderColor: theme.palette.divider, + ':before': { + backgroundColor: 'transparent', + }, + '&:not(:last-of-type)': { + borderBottom: 'none', + }, + '&:first-of-type': { + borderTopLeftRadius: theme.shape.borderRadius, + borderTopRightRadius: theme.shape.borderRadius, + }, + '&:last-of-type': { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }), + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: ({ theme }) => ({ + border: 'none', + borderRadius: 8, + '&:hover': { backgroundColor: gray[50] }, + '&:focus-visible': { backgroundColor: 'transparent' }, + ...theme.applyStyles('dark', { + '&:hover': { backgroundColor: gray[800] }, + }), + }), + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { mb: 20, border: 'none' }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + }, + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + gap: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, + MuiCardHeader: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js new file mode 100644 index 00000000000000..6627b67ee89925 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js @@ -0,0 +1,21 @@ +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignUpTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx new file mode 100644 index 00000000000000..514832b3c073b4 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx @@ -0,0 +1,23 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions, PaletteMode } from '@mui/material/styles'; +import { getDesignTokens } from './themePrimitives'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; + +export default function getSignUpTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js new file mode 100644 index 00000000000000..1894b11b326f0c --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js @@ -0,0 +1,209 @@ +import { createTheme, alpha } from '@mui/material/styles'; + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], +}); diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts new file mode 100644 index 00000000000000..09df769bb6687d --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts @@ -0,0 +1,231 @@ +import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const customTheme = createTheme(); + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +export const getDesignTokens = (mode: PaletteMode) => ({ + palette: { + mode, + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: customTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: customTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: customTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: customTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: customTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: customTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: customTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: customTheme.typography.pxToRem(14), + }, + body2: { + fontSize: customTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: customTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, +}); diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg index 2ef4cdd429c3d3..62fd9db3c92b60 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg index fc42564b74d55f..bba067f86d4906 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg index 2f6765027b9c11..6a14e67b7bbf26 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg index 8602c69d5463b6..f49424c7c73327 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg index 2b2380b1f94ace..4e809be9826782 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg index 2b85f45aeb613d..b4b64f6156701c 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg index 0191119f5054c2..1c6fe4fdb4c453 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg index 623b252da4fc8b..ecc95bd917533f 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg index 683712b7317051..761e24d77d5042 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg index 597768414978bf..a13cd0e467915d 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg index 8c8bad019e3878..55325c7ae6ab3d 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg index 1572006c64210a..7cd07d4c4851d2 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg index 4420e2f0a77c4f..42dd3d63bdcbcb 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg index c7de8e48de8df1..5a096aaf7628d4 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg index a6d2506368b66e..e639c741352a90 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg index b39a9bea96c145..98e3b054a18541 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg index 32e52308f4b763..0160fbc8c5efb6 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg index 46c24502ce84b6..53d42405ed3104 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg index 8cad4eaceabf39..31b7090a361a7b 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg index 0600910613ffda..68f6f2ee0ea3de 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg index f2919a2cb4c747..4c877cca9f5568 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg index 1d86d5a5ebd1e9..918d715d168c71 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg index 23d1c50d996ae7..8169d1ca80f55e 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg index 157c97b792edb1..75b8d87dcac320 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg index 2d309028199121..14eb47fda61913 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg index 8eed7dc49c676a..eb5f07a068ac88 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ diff --git a/docs/scripts/updateTemplatesTheme.ts b/docs/scripts/updateTemplatesTheme.ts new file mode 100644 index 00000000000000..9e6e4d27ca4b77 --- /dev/null +++ b/docs/scripts/updateTemplatesTheme.ts @@ -0,0 +1,55 @@ +/* eslint-disable no-console */ +import fs from 'fs/promises'; + +/** + * README + * + * Description: + * + * This script copies the theme files from `docs/data/material/getting-started/templates/shared-theme` to each template's theme folder. + * All other files should be managed in each template's theme folder, as are assumed to be unique. + * To add a shared theme file, add it to the `shared-theme` folder and run this script. + * To update a shared theme file, update it in the `shared-theme` folder and run this script. + * + * Usage: + * + * From the root of the project, run `pnpm template:update-theme` + */ + +const THEME_SOURCE_FILES_PATH = 'docs/data/material/getting-started/templates/shared-theme'; +const TEMPLATES_PATH = 'docs/data/material/getting-started/templates'; +const TEMPLATES = [ + 'blog', + 'checkout', + 'dashboard', + 'marketing-page', + 'sign-in', + 'sign-in-side', + 'sign-up', +]; + +async function traversePath(path: string, relativePath = '') { + return fs.readdir(path, { withFileTypes: true }).then((subpaths) => { + subpaths.forEach((subpath) => { + const sourcePath = `${subpath.parentPath}/${subpath.name}`; + if (subpath.isDirectory()) { + traversePath(sourcePath, `${relativePath ? `${relativePath}/` : ''}${subpath.name}`); + } else { + TEMPLATES.forEach((template) => { + const targetPath = `${TEMPLATES_PATH}/${template}/theme/${relativePath}/${subpath.name}`; + fs.copyFile(sourcePath, targetPath); + }); + } + }); + }); +} + +(() => { + traversePath(THEME_SOURCE_FILES_PATH) + .then(() => { + console.log('Successfully updated theme files'); + }) + .catch((error) => { + console.error('Error while updating theme files:', error); + }); +})(); diff --git a/package.json b/package.json index 28009ef87681b7..789734dd40ad94 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern", "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts", "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots", + "template:update-theme": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/updateTemplatesTheme", "install:codesandbox": "pnpm install --no-frozen-lockfile", "jsonlint": "node ./scripts/jsonlint.mjs", "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", diff --git a/test/regressions/index.js b/test/regressions/index.js index c919e6c39513be..4efc6787e92df1 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -33,31 +33,21 @@ importRegressionFixtures.keys().forEach((path) => { }, []); const blacklist = [ - // The following components are tested by docs-getting-started-templates-blog-components/MainGrid.png - 'docs-getting-started-templates-blog-theme-customizations/buttons.png', - 'docs-getting-started-templates-blog-theme-customizations/buttons.png', - 'docs-getting-started-templates-blog-theme-customizations/index.png', - 'docs-getting-started-templates-blog-theme-customizations/inputs.png', - 'docs-getting-started-templates-blog-theme-customizations/layoutComponents.png', - 'docs-getting-started-templates-blog-theme-customizations/menus.png', - 'docs-getting-started-templates-blog-theme-customizations/others.png', + // Blog Components 'docs-getting-started-templates-blog/Blog.png', 'docs-getting-started-templates-blog-components/AppAppbar.png', 'docs-getting-started-templates-blog-components/Footer.png', 'docs-getting-started-templates-blog-components/Latest.png', 'docs-getting-started-templates-blog-components/SitemarkIcon.png', 'docs-getting-started-templates-blog-components/ToggleColorMode.png', - // The following components are tested by docs-getting-started-templates-dashboard-components/MainGrid.png - 'docs-getting-started-templates-dashboard-theme-customizations/buttons.png', - 'docs-getting-started-templates-dashboard-theme-customizations/charts.png', - 'docs-getting-started-templates-dashboard-theme-customizations/dataGrid.png', - 'docs-getting-started-templates-dashboard-theme-customizations/datePickers.png', - 'docs-getting-started-templates-dashboard-theme-customizations/index.png', - 'docs-getting-started-templates-dashboard-theme-customizations/inputs.png', - 'docs-getting-started-templates-dashboard-theme-customizations/layoutComponents.png', - 'docs-getting-started-templates-dashboard-theme-customizations/menus.png', - 'docs-getting-started-templates-dashboard-theme-customizations/others.png', - 'docs-getting-started-templates-dashboard-theme-customizations/treeView.png', + // Blog Theme Customizations + 'docs-getting-started-templates-blog-theme-customizations/buttons.png', + 'docs-getting-started-templates-blog-theme-customizations/index.png', + 'docs-getting-started-templates-blog-theme-customizations/inputs.png', + 'docs-getting-started-templates-blog-theme-customizations/layoutComponents.png', + 'docs-getting-started-templates-blog-theme-customizations/menus.png', + 'docs-getting-started-templates-blog-theme-customizations/others.png', + // Dashboard template components and theme customizations 'docs-getting-started-templates-dashboard/Dashboard.png', 'docs-getting-started-templates-dashboard-components/ChartUserByCountry.png', 'docs-getting-started-templates-dashboard-components/CustomDatePicker.png', @@ -72,17 +62,36 @@ const blacklist = [ 'docs-getting-started-templates-dashboard-components/SessionsChart.png', 'docs-getting-started-templates-dashboard-components/Search.png', 'docs-getting-started-templates-dashboard-components/ToggleColorMode.png', - 'docs-getting-started-templates-dashboard-internals-components', // No public components - 'docs-getting-started-templates-dashboard-components/SideMenuMobile.png', // No public components - 'docs-getting-started-templates-dashboard-components/PageViewsBarChart.png', // No public components - 'docs-getting-started-templates-dashboard-components/StatCard.png', // No public components - 'docs-getting-started-templates-sign-in-side/CustomIcons.png', // Theme file - 'docs-getting-started-templates-sign-in/CustomIcons.png', // Theme file - 'docs-getting-started-templates-sign-up/CustomIcons.png', // Theme file - 'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png', // Theme file - 'docs-getting-started-templates-sign-up/getSignUpTheme.png', // Theme file - 'docs-getting-started-templates-checkout/getCheckoutTheme.png', // Theme file - 'docs-getting-started-templates-marketing-page/getMPTheme.png', // Theme file + 'docs-getting-started-templates-dashboard-components/SideMenuMobile.png', + 'docs-getting-started-templates-dashboard-components/PageViewsBarChart.png', + 'docs-getting-started-templates-dashboard-components/StatCard.png', + 'docs-getting-started-templates-dashboard-theme-customizations/buttons.png', + 'docs-getting-started-templates-dashboard-theme-customizations/charts.png', + 'docs-getting-started-templates-dashboard-theme-customizations/dataGrid.png', + 'docs-getting-started-templates-dashboard-theme-customizations/datePickers.png', + 'docs-getting-started-templates-dashboard-theme-customizations/index.png', + 'docs-getting-started-templates-dashboard-theme-customizations/inputs.png', + 'docs-getting-started-templates-dashboard-theme-customizations/layoutComponents.png', + 'docs-getting-started-templates-dashboard-theme-customizations/menus.png', + 'docs-getting-started-templates-dashboard-theme-customizations/others.png', + 'docs-getting-started-templates-dashboard-theme-customizations/treeView.png', + 'docs-getting-started-templates-dashboard-internals-components/CustomIcons.png', + // Sign-In/Sign-Up Theme Customizations + 'docs-getting-started-templates-sign-in-side-theme-customizations/index.png', + 'docs-getting-started-templates-sign-in-side/CustomIcons.png', + 'docs-getting-started-templates-sign-in-theme-customizations/index.png', + 'docs-getting-started-templates-sign-in/CustomIcons.png', + 'docs-getting-started-templates-sign-up-theme-customizations/index.png', + 'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png', + 'docs-getting-started-templates-sign-up/CustomIcons.png', + 'docs-getting-started-templates-sign-up/getSignUpTheme.png', + // Checkout Theme Customizations + 'docs-getting-started-templates-checkout-theme-customizations/index.png', + 'docs-getting-started-templates-checkout/getCheckoutTheme.png', + // Marketing Page Theme Customizations + 'docs-getting-started-templates-marketing-page/getMPTheme.png', + 'docs-getting-started-templates-marketing-page/MarketingPage.png', + 'docs-getting-started-templates-marketing-page-theme-customizations/index.png', 'docs-joy-getting-started-templates/TemplateCollection.png', // No public components 'docs-joy-core-features-automatic-adjustment/ListThemes.png', // No public components 'docs-joy-tools/PaletteThemeViewer.png', // No need for theme tokens @@ -193,17 +202,6 @@ const blacklist = [ 'docs-discover-more-languages', // No public components 'docs-discover-more-showcase', // No public components 'docs-discover-more-team', // No public components - 'docs-getting-started-templates-marketing-page/MarketingPage.png', // Flaky image loading - 'docs-getting-started-templates-blog', // Flaky random images - 'docs-getting-started-templates-checkout/AddressForm.png', // Already tested in docs-getting-started-templates-checkout/Checkout - 'docs-getting-started-templates-checkout/PaymentForm.png', // Already tested in docs-getting-started-templates-checkout/Checkout - 'docs-getting-started-templates-checkout/Review.png', // Already tested in docs-getting-started-templates-checkout/Checkout - 'docs-getting-started-templates-dashboard/Chart.png', // Already tested in docs-getting-started-templates-dashboard/Dashboard - 'docs-getting-started-templates-dashboard/Deposits.png', // Already tested in docs-getting-started-templates-dashboard/Dashboard - 'docs-getting-started-templates-dashboard/listItems.png', // nothing to test - 'docs-getting-started-templates-dashboard/Orders.png', // Already tested in docs-getting-started-templates-dashboard/Dashboard - 'docs-getting-started-templates-dashboard/Title.png', // Already tested in docs-getting-started-templates-dashboard/Dashboard - 'docs-getting-started-templates-sign-in-side/SignInSide.png', // Flaky 'docs-getting-started-templates', // No public components 'docs-getting-started-usage/Usage.png', // No public components 'docs-getting-started-supported-components/MaterialUIComponents.png', // No public components