From 6a69cf5d1bc31b9603c341f2e248ec6988932ae7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Sep 2024 17:11:15 +0700 Subject: [PATCH 01/32] update checkout template --- .../templates/checkout/Checkout.js | 388 +++++++-------- .../templates/checkout/Checkout.tsx | 388 +++++++-------- .../templates/checkout/TemplateFrame.js | 113 ----- .../templates/checkout/TemplateFrame.tsx | 115 ----- .../checkout/components/ToggleColorMode.js | 32 -- .../checkout/components/ToggleColorMode.tsx | 34 -- .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../checkout/theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../checkout/theme/customizations/index.js | 5 - .../checkout/theme/customizations/index.ts | 5 - .../checkout/theme/customizations/inputs.js | 444 ----------------- .../checkout/theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../checkout/theme/customizations/surfaces.js | 113 ----- .../checkout/theme/customizations/surfaces.ts | 113 ----- .../checkout/theme/getCheckoutTheme.js | 21 - .../checkout/theme/getCheckoutTheme.tsx | 23 - .../checkout/theme/themePrimitives.js | 216 --------- .../checkout/theme/themePrimitives.ts | 235 --------- .../getting-started/templates/checkout.js | 5 +- 23 files changed, 356 insertions(+), 3454 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/checkout/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index 1a13003a99aadc..9afb42b22f037a 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -10,17 +10,15 @@ import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import Stepper from '@mui/material/Stepper'; import Typography from '@mui/material/Typography'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import AddressForm from './components/AddressForm'; -import getCheckoutTheme from './theme/getCheckoutTheme'; import Info from './components/Info'; import InfoMobile from './components/InfoMobile'; import PaymentForm from './components/PaymentForm'; import Review from './components/Review'; import SitemarkIcon from './components/SitemarkIcon'; -import TemplateFrame from './TemplateFrame'; +import AppTheme from '../shared-theme/AppTheme'; const steps = ['Shipping address', 'Payment details', 'Review your order']; function getStepContent(step) { @@ -35,35 +33,8 @@ function getStepContent(step) { throw new Error('Unknown step'); } } -export default function Checkout() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const checkoutTheme = createTheme(getCheckoutTheme(mode)); - const defaultTheme = createTheme({ palette: { mode } }); +export default function Checkout(props) { 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; const handleNext = () => { setActiveStep(activeStep + 1); }; @@ -71,216 +42,209 @@ export default function Checkout() { setActiveStep(activeStep - 1); }; return ( - - - - - + + + + + - - - = 2 ? '$144.97' : '$134.98'} /> - - - = 2 ? '$144.97' : '$134.98'} /> + + + + - - - {steps.map((label) => ( - - {label} - - ))} - - - - - -
- - Selected products - - - {activeStep >= 2 ? '$144.97' : '$134.98'} - -
- = 2 ? '$144.97' : '$134.98'} /> - - - {steps.map((label) => ( - - {label} - + {label} ))} - {activeStep === steps.length ? ( - - 📦 - Thank you for your order! - - Your order number is -  #140396. We have emailed your order - confirmation and will update you once its shipped. - - - - ) : ( - - {getStepContent(activeStep)} - + + + +
+ + Selected products + + + {activeStep >= 2 ? '$144.97' : '$134.98'} + +
+ = 2 ? '$144.97' : '$134.98'} /> + + + + + {steps.map((label) => ( + + - {activeStep !== 0 && ( - - )} - {activeStep !== 0 && ( - - )} + {label} + + + ))} + + {activeStep === steps.length ? ( + + 📦 + Thank you for your order! + + Your order number is +  #140396. We have emailed your order + confirmation and will update you once its shipped. + + + + ) : ( + + {getStepContent(activeStep)} + + {activeStep !== 0 && ( - - - )} - - + )} + {activeStep !== 0 && ( + + )} + + + + )} + - - + + ); } diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx index a50a6a9caaa719..4d5b6310fe1aa5 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx +++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx @@ -10,17 +10,15 @@ import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import Stepper from '@mui/material/Stepper'; import Typography from '@mui/material/Typography'; -import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles'; import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import AddressForm from './components/AddressForm'; -import getCheckoutTheme from './theme/getCheckoutTheme'; import Info from './components/Info'; import InfoMobile from './components/InfoMobile'; import PaymentForm from './components/PaymentForm'; import Review from './components/Review'; import SitemarkIcon from './components/SitemarkIcon'; -import TemplateFrame from './TemplateFrame'; +import AppTheme from '../shared-theme/AppTheme'; const steps = ['Shipping address', 'Payment details', 'Review your order']; function getStepContent(step: number) { @@ -35,35 +33,8 @@ function getStepContent(step: number) { throw new Error('Unknown step'); } } -export default function Checkout() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const checkoutTheme = createTheme(getCheckoutTheme(mode)); - const defaultTheme = createTheme({ palette: { mode } }); +export default function Checkout(props: { disableCustomTheme?: boolean }) { 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; const handleNext = () => { setActiveStep(activeStep + 1); }; @@ -71,217 +42,210 @@ export default function Checkout() { setActiveStep(activeStep - 1); }; return ( - - - + + - - + + + - - - = 2 ? '$144.97' : '$134.98'} /> - - - = 2 ? '$144.97' : '$134.98'} /> + + + + - - - {steps.map((label) => ( - - {label} - - ))} - - - - - -
- - Selected products - - - {activeStep >= 2 ? '$144.97' : '$134.98'} - -
- = 2 ? '$144.97' : '$134.98'} /> - - - {steps.map((label) => ( - - {label} - + {label} ))} - {activeStep === steps.length ? ( - - 📦 - Thank you for your order! - - Your order number is -  #140396. We have emailed your order - confirmation and will update you once its shipped. - - - - ) : ( - - {getStepContent(activeStep)} - + + + +
+ + Selected products + + + {activeStep >= 2 ? '$144.97' : '$134.98'} + +
+ = 2 ? '$144.97' : '$134.98'} /> + + + + + {steps.map((label) => ( + + - {activeStep !== 0 && ( - - )} - {activeStep !== 0 && ( - - )} + {label} + + + ))} + + {activeStep === steps.length ? ( + + 📦 + Thank you for your order! + + Your order number is +  #140396. We have emailed your order + confirmation and will update you once its shipped. + + + + ) : ( + + {getStepContent(activeStep)} + + {activeStep !== 0 && ( - - - )} - - + )} + {activeStep !== 0 && ( + + )} + + + + )} + - - + + ); } diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js deleted file mode 100644 index 6f1b11ec4dff4a..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './components/ToggleColorMode'; -import getCheckoutTheme from './theme/getCheckoutTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}) { - const handleChange = (event) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const checkoutTheme = createTheme(getCheckoutTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} - -TemplateFrame.propTypes = { - children: PropTypes.node, - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - showCustomTheme: PropTypes.bool.isRequired, - toggleColorMode: PropTypes.func.isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - -export default TemplateFrame; diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx deleted file mode 100644 index 82a7e99505c3f0..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { - createTheme, - ThemeProvider, - PaletteMode, - styled, -} from '@mui/material/styles'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './components/ToggleColorMode'; -import getCheckoutTheme from './theme/getCheckoutTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -interface TemplateFrameProps { - showCustomTheme: boolean; - toggleCustomTheme: (theme: boolean) => void; - mode: PaletteMode; - toggleColorMode: () => void; - children: React.ReactNode; -} - -export default function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}: TemplateFrameProps) { - const handleChange = (event: SelectChangeEvent) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const checkoutTheme = createTheme(getCheckoutTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} diff --git a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js deleted file mode 100644 index f81783268a2c52..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; - -import IconButton from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -function ToggleColorMode({ mode, toggleColorMode, ...props }) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} - -ToggleColorMode.propTypes = { - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - toggleColorMode: PropTypes.func.isRequired, -}; - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx deleted file mode 100644 index bbeb12f1f1e6ca..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { PaletteMode } from '@mui/material/styles'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -interface ToggleColorModeProps extends IconButtonProps { - mode: PaletteMode; - toggleColorMode: () => void; -} - -export default function ToggleColorMode({ - mode, - toggleColorMode, - ...props -}: ToggleColorModeProps) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js deleted file mode 100644 index cf04322a9a6056..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js +++ /dev/null @@ -1,233 +0,0 @@ -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/checkout/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx deleted file mode 100644 index c93ccbfbcabf85..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index d521ecbd350128..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index aaf00001b522ca..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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/inputs.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js deleted file mode 100644 index 12cea77491064a..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js +++ /dev/null @@ -1,444 +0,0 @@ -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/checkout/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx deleted file mode 100644 index 4be4c18628e16e..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx +++ /dev/null @@ -1,445 +0,0 @@ -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/checkout/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js deleted file mode 100644 index ded180025db59e..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js +++ /dev/null @@ -1,278 +0,0 @@ -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/checkout/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx deleted file mode 100644 index f6b92e573f6316..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -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/checkout/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js deleted file mode 100644 index ff4a53884964ae..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 5bcdfc5c055b0f..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 8efec7f816aa4e..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index a588594a0d2166..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index 625400640eef43..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js +++ /dev/null @@ -1,216 +0,0 @@ -import { createTheme, alpha } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts deleted file mode 100644 index 41b517b5294fad..00000000000000 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } 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 defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/pages/material-ui/getting-started/templates/checkout.js b/docs/pages/material-ui/getting-started/templates/checkout.js index a1c8f9a169fafa..8e6e875a3d1f09 100644 --- a/docs/pages/material-ui/getting-started/templates/checkout.js +++ b/docs/pages/material-ui/getting-started/templates/checkout.js @@ -1,11 +1,14 @@ import * as React from 'react'; import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; import Checkout from 'docs/data/material/getting-started/templates/checkout/Checkout'; export default function Page() { return ( - + + + ); } From 273cb024a8950c7728b582fe602ccbd483189b59 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Sep 2024 17:17:12 +0700 Subject: [PATCH 02/32] update marketing page --- .../templates/marketing-page/MarketingPage.js | 81 +--- .../marketing-page/MarketingPage.tsx | 81 +--- .../templates/marketing-page/TemplateFrame.js | 113 ----- .../marketing-page/TemplateFrame.tsx | 115 ----- .../marketing-page/components/AppAppBar.js | 8 +- .../marketing-page/components/AppAppBar.tsx | 8 +- .../components/ToggleColorMode.js | 32 -- .../components/ToggleColorMode.tsx | 33 -- .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../theme/customizations/index.js | 5 - .../theme/customizations/index.ts | 5 - .../theme/customizations/inputs.js | 444 ----------------- .../theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../theme/customizations/surfaces.js | 113 ----- .../theme/customizations/surfaces.ts | 113 ----- .../marketing-page/theme/getMPTheme.js | 21 - .../marketing-page/theme/getMPTheme.tsx | 23 - .../marketing-page/theme/themePrimitives.js | 216 --------- .../marketing-page/theme/themePrimitives.ts | 235 --------- .../templates/marketing-page.js | 5 +- 25 files changed, 60 insertions(+), 3151 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts 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 4017861b3a17f9..e0aa696c336047 100644 --- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js +++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js @@ -1,5 +1,4 @@ import * as React from 'react'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import Divider from '@mui/material/Divider'; import AppAppBar from './components/AppAppBar'; @@ -11,66 +10,28 @@ import Features from './components/Features'; import Testimonials from './components/Testimonials'; import FAQ from './components/FAQ'; import Footer from './components/Footer'; -import getMPTheme from './theme/getMPTheme'; -import TemplateFrame from './TemplateFrame'; - -export default function MarketingPage() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; +import AppTheme from '../shared-theme/AppTheme'; +export default function MarketingPage(props) { return ( - - - - - -
- - - - - - - - - - - -
-
- - + + + + +
+ + + + + + + + + + + +
+
+ ); } diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx index ba44db4f49fe37..fd2ad995e7cf28 100644 --- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { PaletteMode, ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import Divider from '@mui/material/Divider'; import AppAppBar from './components/AppAppBar'; @@ -11,67 +10,29 @@ import Features from './components/Features'; import Testimonials from './components/Testimonials'; import FAQ from './components/FAQ'; import Footer from './components/Footer'; -import getMPTheme from './theme/getMPTheme'; -import TemplateFrame from './TemplateFrame'; - -export default function MarketingPage() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - 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') 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); - }; +import AppTheme from '../shared-theme/AppTheme'; +export default function MarketingPage(props: { disableCustomTheme?: boolean }) { return ( - - - + + - - -
- - - - - - - - - - - -
-
- - + + +
+ + + + + + + + + + + +
+
+ ); } diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js deleted file mode 100644 index 445336568e8c0a..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './components/ToggleColorMode'; -import getMPTheme from './theme/getMPTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}) { - const handleChange = (event) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const MPTheme = createTheme(getMPTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} - -TemplateFrame.propTypes = { - children: PropTypes.node, - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - showCustomTheme: PropTypes.bool.isRequired, - toggleColorMode: PropTypes.func.isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - -export default TemplateFrame; diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx deleted file mode 100644 index 580ce16c15fd9e..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { - createTheme, - ThemeProvider, - PaletteMode, - styled, -} from '@mui/material/styles'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './components/ToggleColorMode'; -import getMPTheme from './theme/getMPTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -interface TemplateFrameProps { - showCustomTheme: boolean; - toggleCustomTheme: (theme: boolean) => void; - mode: PaletteMode; - toggleColorMode: () => void; - children: React.ReactNode; -} - -export default function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}: TemplateFrameProps) { - const handleChange = (event: SelectChangeEvent) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const MPTheme = createTheme(getMPTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} diff --git a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js index e8e5e13cd7e34f..993507702b1fd4 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js @@ -37,7 +37,13 @@ export default function AppAppBar() { return ( diff --git a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx index 06e0072f848060..dd122332f20e97 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx @@ -37,7 +37,13 @@ export default function AppAppBar() { return ( diff --git a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js deleted file mode 100644 index 27779e7809b43d..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; - -import IconButton from '@mui/material/IconButton'; - -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; - -function ToggleColorMode({ mode, toggleColorMode, ...props }) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} - -ToggleColorMode.propTypes = { - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - toggleColorMode: PropTypes.func.isRequired, -}; - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx deleted file mode 100644 index f3807c60b9eb35..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { PaletteMode } from '@mui/material/styles'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; - -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; - -interface ToggleColorModeProps extends IconButtonProps { - mode: PaletteMode; - toggleColorMode: () => void; -} - -export default function ToggleColorMode({ - mode, - toggleColorMode, - ...props -}: ToggleColorModeProps) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js deleted file mode 100644 index cf04322a9a6056..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js +++ /dev/null @@ -1,233 +0,0 @@ -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/marketing-page/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx deleted file mode 100644 index c93ccbfbcabf85..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index d521ecbd350128..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index aaf00001b522ca..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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/inputs.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js deleted file mode 100644 index 12cea77491064a..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js +++ /dev/null @@ -1,444 +0,0 @@ -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/marketing-page/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx deleted file mode 100644 index 4be4c18628e16e..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx +++ /dev/null @@ -1,445 +0,0 @@ -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 deleted file mode 100644 index ded180025db59e..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js +++ /dev/null @@ -1,278 +0,0 @@ -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 deleted file mode 100644 index f6b92e573f6316..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -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 deleted file mode 100644 index ff4a53884964ae..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 5bcdfc5c055b0f..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index c2bf15e33b25c0..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index 6341880c061bbf..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index 625400640eef43..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js +++ /dev/null @@ -1,216 +0,0 @@ -import { createTheme, alpha } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; 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 deleted file mode 100644 index 41b517b5294fad..00000000000000 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } 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 defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/pages/material-ui/getting-started/templates/marketing-page.js b/docs/pages/material-ui/getting-started/templates/marketing-page.js index 177ec35e9d9f88..13506930d64126 100644 --- a/docs/pages/material-ui/getting-started/templates/marketing-page.js +++ b/docs/pages/material-ui/getting-started/templates/marketing-page.js @@ -1,11 +1,14 @@ import * as React from 'react'; import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; import MarketingPage from 'docs/data/material/getting-started/templates/marketing-page/MarketingPage'; export default function Page() { return ( - + + + ); } From 9a709c2cceadb48ddcda5d8bb91f0f043a9818af Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Sep 2024 17:28:06 +0700 Subject: [PATCH 03/32] update sign-in-side template --- .../templates/sign-in-side/SignInSide.js | 110 ++--- .../templates/sign-in-side/SignInSide.tsx | 110 ++--- .../templates/sign-in-side/TemplateFrame.js | 113 ----- .../templates/sign-in-side/TemplateFrame.tsx | 115 ----- .../templates/sign-in-side/ToggleColorMode.js | 32 -- .../sign-in-side/ToggleColorMode.tsx | 34 -- .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../theme/customizations/index.js | 5 - .../theme/customizations/index.ts | 5 - .../theme/customizations/inputs.js | 444 ----------------- .../theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../theme/customizations/surfaces.js | 113 ----- .../theme/customizations/surfaces.ts | 113 ----- .../sign-in-side/theme/getSignInSideTheme.js | 21 - .../sign-in-side/theme/getSignInSideTheme.tsx | 23 - .../sign-in-side/theme/themePrimitives.js | 216 --------- .../sign-in-side/theme/themePrimitives.ts | 235 --------- .../getting-started/templates/sign-in-side.js | 5 +- 23 files changed, 86 insertions(+), 3168 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts 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 e905157adc4a27..4e638d0cef1a69 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 @@ -1,84 +1,56 @@ import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Stack from '@mui/material/Stack'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import getSignInSideTheme from './theme/getSignInSideTheme'; import SignInCard from './SignInCard'; import Content from './Content'; -import TemplateFrame from './TemplateFrame'; - -export default function SignInSide() { - const [mode, setMode] = React.useState('light'); - 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; +import AppTheme from '../shared-theme/AppTheme'; +import ColorModeSelect from '../shared-theme/ColorModeSelect'; +export default function SignInSide(props) { return ( - - - - ({ + + + + ({ + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, backgroundImage: - 'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', - backgroundSize: 'cover', + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), - }), - ]} + }, + }), + ]} + > + - - - - + + - - + + ); } 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 ed202630073b53..3500d33c696600 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 @@ -1,84 +1,56 @@ import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Stack from '@mui/material/Stack'; -import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles'; -import getSignInSideTheme from './theme/getSignInSideTheme'; import SignInCard from './SignInCard'; import Content from './Content'; -import TemplateFrame from './TemplateFrame'; - -export default function SignInSide() { - const [mode, setMode] = React.useState('light'); - 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; +import AppTheme from '../shared-theme/AppTheme'; +import ColorModeSelect from '../shared-theme/ColorModeSelect'; +export default function SignInSide(props: { disableCustomTheme?: boolean }) { return ( - - - - ({ + + + + ({ + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, backgroundImage: - 'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', - backgroundSize: 'cover', + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', ...theme.applyStyles('dark', { backgroundImage: - 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', }), - }), - ]} + }, + }), + ]} + > + - - - - + + - - + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js deleted file mode 100644 index 8a352720511cfd..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignInSideTheme from './theme/getSignInSideTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}) { - const handleChange = (event) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signInSideTheme = createTheme(getSignInSideTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} - -TemplateFrame.propTypes = { - children: PropTypes.node, - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - showCustomTheme: PropTypes.bool.isRequired, - toggleColorMode: PropTypes.func.isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - -export default TemplateFrame; diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx deleted file mode 100644 index 248480242da1f3..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { - createTheme, - ThemeProvider, - PaletteMode, - styled, -} from '@mui/material/styles'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignInSideTheme from './theme/getSignInSideTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -interface TemplateFrameProps { - showCustomTheme: boolean; - toggleCustomTheme: (theme: boolean) => void; - mode: PaletteMode; - toggleColorMode: () => void; - children: React.ReactNode; -} - -export default function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}: TemplateFrameProps) { - const handleChange = (event: SelectChangeEvent) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signInSideTheme = createTheme(getSignInSideTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js deleted file mode 100644 index f578f75b2d92a6..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; - -import IconButton from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -function ToggleColorMode({ mode, toggleColorMode, ...props }) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} - -ToggleColorMode.propTypes = { - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - toggleColorMode: PropTypes.func.isRequired, -}; - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx deleted file mode 100644 index 1de6afce2933ac..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { PaletteMode } from '@mui/material/styles'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -interface ToggleColorModeProps extends IconButtonProps { - mode: PaletteMode; - toggleColorMode: () => void; -} - -export default function ToggleColorMode({ - mode, - toggleColorMode, - ...props -}: ToggleColorModeProps) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} 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 deleted file mode 100644 index cf04322a9a6056..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index c93ccbfbcabf85..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index d521ecbd350128..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index aaf00001b522ca..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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/inputs.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js deleted file mode 100644 index 12cea77491064a..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js +++ /dev/null @@ -1,444 +0,0 @@ -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-side/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx deleted file mode 100644 index 4be4c18628e16e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx +++ /dev/null @@ -1,445 +0,0 @@ -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 deleted file mode 100644 index ded180025db59e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js +++ /dev/null @@ -1,278 +0,0 @@ -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 deleted file mode 100644 index f6b92e573f6316..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -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 deleted file mode 100644 index ff4a53884964ae..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 5bcdfc5c055b0f..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index c149525eed0033..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index 0b2ecfc4b15903..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index 625400640eef43..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js +++ /dev/null @@ -1,216 +0,0 @@ -import { createTheme, alpha } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; 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 deleted file mode 100644 index 41b517b5294fad..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } 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 defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/pages/material-ui/getting-started/templates/sign-in-side.js b/docs/pages/material-ui/getting-started/templates/sign-in-side.js index 0b3ab23983f969..394e7680b68162 100644 --- a/docs/pages/material-ui/getting-started/templates/sign-in-side.js +++ b/docs/pages/material-ui/getting-started/templates/sign-in-side.js @@ -1,11 +1,14 @@ import * as React from 'react'; import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; import SignInSide from 'docs/data/material/getting-started/templates/sign-in-side/SignInSide'; export default function Page() { return ( - + + + ); } From 43b36e7d7c077a11e1581f598af455b6219178aa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Sep 2024 17:38:35 +0700 Subject: [PATCH 04/32] update sign-up --- .../templates/sign-up/SignUp.js | 297 ++++---- .../templates/sign-up/SignUp.tsx | 303 ++++---- .../templates/sign-up/TemplateFrame.js | 113 --- .../templates/sign-up/TemplateFrame.tsx | 115 --- .../templates/sign-up/ToggleColorMode.js | 32 - .../templates/sign-up/ToggleColorMode.tsx | 34 - .../templates/sign-up/getSignUpTheme.js | 703 ----------------- .../templates/sign-up/getSignUpTheme.tsx | 720 ------------------ .../theme/customizations/dataDisplay.js | 233 ------ .../theme/customizations/dataDisplay.tsx | 233 ------ .../sign-up/theme/customizations/feedback.js | 46 -- .../sign-up/theme/customizations/feedback.tsx | 46 -- .../sign-up/theme/customizations/index.js | 5 - .../sign-up/theme/customizations/index.ts | 5 - .../sign-up/theme/customizations/inputs.js | 444 ----------- .../sign-up/theme/customizations/inputs.tsx | 445 ----------- .../theme/customizations/navigation.js | 278 ------- .../theme/customizations/navigation.tsx | 279 ------- .../sign-up/theme/customizations/surfaces.js | 113 --- .../sign-up/theme/customizations/surfaces.ts | 113 --- .../templates/sign-up/theme/getSignUpTheme.js | 21 - .../sign-up/theme/getSignUpTheme.tsx | 23 - .../sign-up/theme/themePrimitives.js | 216 ------ .../sign-up/theme/themePrimitives.ts | 235 ------ .../getting-started/templates/sign-up.js | 5 +- 25 files changed, 266 insertions(+), 4791 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/sign-up/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts 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 dd1d788aab5982..d80048d1112623 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -12,10 +12,10 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import MuiCard from '@mui/material/Card'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import getSignUpTheme from './theme/getSignUpTheme'; +import { styled } from '@mui/material/styles'; +import AppTheme from '../shared-theme/AppTheme'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; -import TemplateFrame from './TemplateFrame'; +import ColorModeSelect from '../shared-theme/ColorModeSelect'; const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', @@ -37,52 +37,31 @@ const Card = styled(MuiCard)(({ theme }) => ({ })); const SignUpContainer = styled(Stack)(({ theme }) => ({ - height: '100%', - padding: 4, - backgroundImage: - 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', - backgroundRepeat: 'no-repeat', - ...theme.applyStyles('dark', { + padding: 20, + marginTop: '10vh', + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', - }), + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', + ...theme.applyStyles('dark', { + backgroundImage: + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + }), + }, })); -export default function SignUp() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const defaultTheme = createTheme({ palette: { mode } }); - const SignUpTheme = createTheme(getSignUpTheme(mode)); +export default function SignUp(props) { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); const [passwordError, setPasswordError] = React.useState(false); 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'); @@ -133,133 +112,119 @@ export default function SignUp() { }; return ( - - - - - + + + + + + - - - - Sign up - - - - Full name - - - - Email - - - - Password - - - } - label="I want to receive updates via email." - /> - - - Already have an account?{' '} - - - Sign in - - - - - - or - - - - + + Already have an account?{' '} + + - Sign up with Facebook - - - - - - - + Sign in + + + + + + or + + + + + + + + ); } 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 ce73b97e4438c2..a391dfb645a8d7 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -12,15 +12,10 @@ import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import MuiCard from '@mui/material/Card'; -import { - createTheme, - ThemeProvider, - styled, - PaletteMode, -} from '@mui/material/styles'; -import getSignUpTheme from './theme/getSignUpTheme'; +import { styled } from '@mui/material/styles'; +import AppTheme from '../shared-theme/AppTheme'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; -import TemplateFrame from './TemplateFrame'; +import ColorModeSelect from '../shared-theme/ColorModeSelect'; const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', @@ -42,52 +37,31 @@ const Card = styled(MuiCard)(({ theme }) => ({ })); const SignUpContainer = styled(Stack)(({ theme }) => ({ - height: '100%', - padding: 4, - backgroundImage: - 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', - backgroundRepeat: 'no-repeat', - ...theme.applyStyles('dark', { + padding: 20, + marginTop: '10vh', + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', - }), + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', + ...theme.applyStyles('dark', { + backgroundImage: + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + }), + }, })); -export default function SignUp() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const defaultTheme = createTheme({ palette: { mode } }); - const SignUpTheme = createTheme(getSignUpTheme(mode)); +export default function SignUp(props: { disableCustomTheme?: boolean }) { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); const [passwordError, setPasswordError] = React.useState(false); 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; @@ -138,134 +112,119 @@ export default function SignUp() { }; return ( - - - - - - + + + + + + - - - - Sign up - - - - Full name - - - - Email - - - - Password - - - } - label="I want to receive updates via email." - /> - - - Already have an account?{' '} - - - Sign in - - - - - - or - - - - + + Already have an account?{' '} + + - Sign up with Facebook - - - - - - - + Sign in + + + + + + or + + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js deleted file mode 100644 index 900462b107d3ee..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignUpTheme from './theme/getSignUpTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}) { - const handleChange = (event) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signUpTheme = createTheme(getSignUpTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} - -TemplateFrame.propTypes = { - children: PropTypes.node, - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - showCustomTheme: PropTypes.bool.isRequired, - toggleColorMode: PropTypes.func.isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - -export default TemplateFrame; diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx deleted file mode 100644 index 15f6cf5962ce06..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { - createTheme, - ThemeProvider, - PaletteMode, - styled, -} from '@mui/material/styles'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignUpTheme from './theme/getSignUpTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -interface TemplateFrameProps { - showCustomTheme: boolean; - toggleCustomTheme: (theme: boolean) => void; - mode: PaletteMode; - toggleColorMode: () => void; - children: React.ReactNode; -} - -export default function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}: TemplateFrameProps) { - const handleChange = (event: SelectChangeEvent) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signUpTheme = createTheme(getSignUpTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js deleted file mode 100644 index f578f75b2d92a6..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; - -import IconButton from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -function ToggleColorMode({ mode, toggleColorMode, ...props }) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} - -ToggleColorMode.propTypes = { - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - toggleColorMode: PropTypes.func.isRequired, -}; - -export default ToggleColorMode; diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx deleted file mode 100644 index 1de6afce2933ac..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { PaletteMode } from '@mui/material/styles'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; - -import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded'; -import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded'; - -interface ToggleColorModeProps extends IconButtonProps { - mode: PaletteMode; - toggleColorMode: () => void; -} - -export default function ToggleColorMode({ - mode, - toggleColorMode, - ...props -}: ToggleColorModeProps) { - return ( - - {mode === 'dark' ? ( - - ) : ( - - )} - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js deleted file mode 100644 index 515951fceaa92d..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.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 getSignUpTheme(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: gray[400], - }, - '&.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-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx deleted file mode 100644 index 76dfd82ed61569..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.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 getSignUpTheme(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: gray[400], - }, - '&.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-up/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js deleted file mode 100644 index cf04322a9a6056..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index c93ccbfbcabf85..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,233 +0,0 @@ -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 deleted file mode 100644 index d521ecbd350128..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index aaf00001b522ca..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 12cea77491064a..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js +++ /dev/null @@ -1,444 +0,0 @@ -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 deleted file mode 100644 index 4be4c18628e16e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx +++ /dev/null @@ -1,445 +0,0 @@ -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 deleted file mode 100644 index ded180025db59e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js +++ /dev/null @@ -1,278 +0,0 @@ -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 deleted file mode 100644 index f6b92e573f6316..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -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 deleted file mode 100644 index ff4a53884964ae..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 5bcdfc5c055b0f..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -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 deleted file mode 100644 index 6627b67ee89925..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -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 deleted file mode 100644 index 514832b3c073b4..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index 625400640eef43..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js +++ /dev/null @@ -1,216 +0,0 @@ -import { createTheme, alpha } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; 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 deleted file mode 100644 index 41b517b5294fad..00000000000000 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } 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 defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -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) => { - customShadows[1] = - 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'; - - return { - 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: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/pages/material-ui/getting-started/templates/sign-up.js b/docs/pages/material-ui/getting-started/templates/sign-up.js index e5342491136302..10ce454fd09f86 100644 --- a/docs/pages/material-ui/getting-started/templates/sign-up.js +++ b/docs/pages/material-ui/getting-started/templates/sign-up.js @@ -1,11 +1,14 @@ import * as React from 'react'; import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; import SignUp from 'docs/data/material/getting-started/templates/sign-up/SignUp'; export default function Page() { return ( - + + + ); } From 4c28a7fe72a1ea9368bda77bb4d004f1cb6acad9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 11 Sep 2024 17:44:01 +0700 Subject: [PATCH 05/32] update blog --- .../getting-started/templates/blog/Blog.js | 69 +-- .../getting-started/templates/blog/Blog.tsx | 69 +-- .../templates/blog/TemplateFrame.js | 113 ----- .../templates/blog/TemplateFrame.tsx | 115 ----- .../templates/blog/components/AppAppBar.js | 7 +- .../templates/blog/components/AppAppBar.tsx | 7 +- .../blog/components/ToggleColorMode.js | 31 -- .../blog/components/ToggleColorMode.tsx | 32 -- .../blog/theme/customizations/dataDisplay.js | 233 --------- .../blog/theme/customizations/dataDisplay.tsx | 233 --------- .../blog/theme/customizations/feedback.js | 46 -- .../blog/theme/customizations/feedback.tsx | 46 -- .../blog/theme/customizations/index.js | 5 - .../blog/theme/customizations/index.ts | 5 - .../blog/theme/customizations/inputs.js | 444 ----------------- .../blog/theme/customizations/inputs.tsx | 445 ------------------ .../blog/theme/customizations/navigation.js | 278 ----------- .../blog/theme/customizations/navigation.tsx | 279 ----------- .../blog/theme/customizations/surfaces.js | 113 ----- .../blog/theme/customizations/surfaces.ts | 113 ----- .../templates/blog/theme/getBlogTheme.js | 21 - .../templates/blog/theme/getBlogTheme.tsx | 23 - .../templates/blog/theme/themePrimitives.js | 216 --------- .../templates/blog/theme/themePrimitives.ts | 235 --------- .../dashboard/components/ToggleColorMode.js | 30 -- .../dashboard/components/ToggleColorMode.tsx | 31 -- .../getting-started/templates/blog.js | 5 +- 27 files changed, 46 insertions(+), 3198 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/blog/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/blog/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/blog/components/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/blog/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts delete mode 100644 docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index a83c67b23ce951..ccfd8ecf8d7e83 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -1,65 +1,26 @@ import * as React from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; import AppAppBar from './components/AppAppBar'; import MainContent from './components/MainContent'; import Latest from './components/Latest'; import Footer from './components/Footer'; -import TemplateFrame from './TemplateFrame'; - -import getBlogTheme from './theme/getBlogTheme'; - -export default function Blog() { - const [mode, setMode] = React.useState('light'); - 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 = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; +import AppTheme from '../shared-theme/AppTheme'; +export default function Blog(props) { return ( - - - - - - - - -