diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js index c311599af0a6dd..1f3cbe48974c95 100644 --- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js +++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js @@ -1,15 +1,15 @@ import * as React from 'react'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider, alpha } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; -import getDashboardTheme from './getDashboardTheme'; +import Stack from '@mui/material/Stack'; +import getDashboardTheme from './theme/getDashboardTheme'; import ToggleCustomTheme from './internals/components/ToggleCustomTheme'; -import Copyright from './internals/components/Copyright'; import Navbar from './components/Navbar'; import Header from './components/Header'; import MainGrid from './components/MainGrid'; +import SideMenu from './components/SideMenu'; export default function Dashboard() { const [mode, setMode] = React.useState('light'); @@ -29,30 +29,32 @@ export default function Dashboard() { + + {/* Main content */} ({ + position: { sm: 'relative', md: '' }, + top: { sm: '48px', md: '0' }, + height: { sm: 'calc(100vh - 48px)', md: '100vh' }, flexGrow: 1, - height: '100vh', + pt: 2, + backgroundColor: alpha(theme.palette.background.default, 1), overflow: 'auto', - }} + })} > - {/* Main content */} - -
+
- - + ('light'); @@ -29,30 +29,32 @@ export default function Dashboard() { + + {/* Main content */} ({ + position: { sm: 'relative', md: '' }, + top: { sm: '48px', md: '0' }, + height: { sm: 'calc(100vh - 48px)', md: '100vh' }, flexGrow: 1, - height: '100vh', + pt: 2, + backgroundColor: alpha(theme.palette.background.default, 1), overflow: 'auto', - }} + })} > - {/* Main content */} - -
+
- - + + + + + Plan about to expire + + + Enjoy 10% off when renewing your plan today. + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx new file mode 100644 index 00000000000000..2c14137a7d5f98 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; + +export default function CardAlert() { + return ( + + + + + Plan about to expire + + + Enjoy 10% off when renewing your plan today. + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js index 5f336f0ad5cb8e..19c5f7524cadc5 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js +++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js @@ -112,15 +112,18 @@ PieCenterLabel.propTypes = { }; const colors = [ - 'hsl(220, 25%, 65%)', - 'hsl(220, 25%, 45%)', - 'hsl(220, 25%, 30%)', - 'hsl(220, 25%, 20%)', + 'hsl(220, 20%, 65%)', + 'hsl(220, 20%, 42%)', + 'hsl(220, 20%, 35%)', + 'hsl(220, 20%, 25%)', ]; export default function ChartUserByCountry() { return ( - + Users by country @@ -177,6 +180,7 @@ export default function ChartUserByCountry() { + Users by country @@ -180,6 +183,7 @@ export default function ChartUserByCountry() { ); } diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx index e2a10335890dd7..46bb257a5b19ca 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx @@ -5,6 +5,7 @@ import { columns, rows } from '../internals/data/gridData'; export default function CustomizedDataGrid() { return ( ); } diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js index d8827b124e4316..5290f66242cc41 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js +++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js @@ -200,10 +200,12 @@ export default function CustomizedTreeView() { return ( - Product tree + + Product tree + - Product tree + + Product tree + - - - Dashboard - - - Real-time analytics to improve user engagement and guide strategy. - - - + + + + + + ); } + +Header.propTypes = { + mode: PropTypes.oneOf(['dark', 'light']).isRequired, + toggleColorMode: PropTypes.func.isRequired, +}; + +export default Header; diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx index 109b3fb47602f5..b5c2a9320a24f0 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx @@ -1,31 +1,44 @@ import * as React from 'react'; +import { PaletteMode } from '@mui/material'; import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import Search from './Search'; +import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; import CustomDatePicker from './CustomDatePicker'; +import NavbarBreadcrumbs from './NavbarBreadcrumbs'; +import ToggleColorMode from './ToggleColorMode'; +import MenuButton from './MenuButton'; + +import Search from './Search'; -export default function Header() { +interface HeaderProps { + mode: PaletteMode; + toggleColorMode: () => void; +} + +export default function Header({ mode, toggleColorMode }: HeaderProps) { return ( - - - Dashboard - - - Real-time analytics to improve user engagement and guide strategy. - - - + + + + + + ); diff --git a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js index 1db7e6a9ef73f0..02c6a676ce6ce0 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js +++ b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.js @@ -1,30 +1,21 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import MuiCard from '@mui/material/Card'; +import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded'; - -const Card = styled(MuiCard)(({ theme }) => ({ - border: '1px solid', - boxShadow: 'none', - borderColor: theme.palette.primary.light, - background: 'hsl(210, 100%, 98%)', - color: theme.palette.grey[900], - ...theme.applyStyles('dark', { - borderColor: theme.palette.primary.dark, - background: 'hsla(210, 100%, 15%, 0.25)', - color: theme.palette.grey[200], - }), -})); +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@mui/material/styles'; export default function HighlightedCard() { + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); + return ( - + diff --git a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx index 1db7e6a9ef73f0..02c6a676ce6ce0 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/HighlightedCard.tsx @@ -1,30 +1,21 @@ import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import MuiCard from '@mui/material/Card'; +import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded'; - -const Card = styled(MuiCard)(({ theme }) => ({ - border: '1px solid', - boxShadow: 'none', - borderColor: theme.palette.primary.light, - background: 'hsl(210, 100%, 98%)', - color: theme.palette.grey[900], - ...theme.applyStyles('dark', { - borderColor: theme.palette.primary.dark, - background: 'hsla(210, 100%, 15%, 0.25)', - color: theme.palette.grey[200], - }), -})); +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@mui/material/styles'; export default function HighlightedCard() { + const theme = useTheme(); + const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); + return ( - + diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js index bf5a89b69e45d8..df3148d7fbb465 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js @@ -1,12 +1,15 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Copyright from '../internals/components/Copyright'; import ChartUserByCountry from './ChartUserByCountry'; import CustomizedTreeView from './CustomizedTreeView'; import CustomizedDataGrid from './CustomizedDataGrid'; import HighlightedCard from './HighlightedCard'; import PageViewsBarChart from './PageViewsBarChart'; -import PageViewsChart from './PageViewsChart'; +import SessionsChart from './SessionsChart'; import StatCard from './StatCard'; const data = [ @@ -15,65 +18,76 @@ const data = [ value: '14k', interval: 'Last 30 days', trend: 'up', - data: [2, 4, 3, 5, 7, 6, 8, 10], + data: [ + 200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340, 380, + 360, 400, 380, 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920, + ], }, { title: 'Conversions', value: '325', interval: 'Last 30 days', trend: 'down', - data: [10, 7, 6, 8, 5, 4, 4, 2], + data: [ + 1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600, 820, + 780, 800, 760, 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300, 220, + ], }, { title: 'Event count', value: '200k', interval: 'Last 30 days', trend: 'neutral', - data: [5, 4, 6, 3, 4, 3, 7, 6], - }, - { - title: 'Engagements', - value: '30k', - interval: 'Last 30 days', - trend: 'up', - data: [2, 4, 3, 4, 5, 4, 7, 8], + data: [ + 500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510, 530, + 520, 410, 530, 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510, + ], }, ]; export default function MainGrid() { return ( - + {/* cards */} - + + Overview + + theme.spacing(2) }} + > {data.map((card, index) => ( - + ))} - + + + + + + + - - - - - - - + + Details + + + + - - + + - + + ); } diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx index 960e7ac5613dfa..67ef806c5b8819 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx @@ -1,12 +1,15 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import Copyright from '../internals/components/Copyright'; import ChartUserByCountry from './ChartUserByCountry'; import CustomizedTreeView from './CustomizedTreeView'; import CustomizedDataGrid from './CustomizedDataGrid'; import HighlightedCard from './HighlightedCard'; import PageViewsBarChart from './PageViewsBarChart'; -import PageViewsChart from './PageViewsChart'; +import SessionsChart from './SessionsChart'; import StatCard, { StatCardProps } from './StatCard'; const data: StatCardProps[] = [ @@ -15,65 +18,76 @@ const data: StatCardProps[] = [ value: '14k', interval: 'Last 30 days', trend: 'up', - data: [2, 4, 3, 5, 7, 6, 8, 10], + data: [ + 200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340, 380, + 360, 400, 380, 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920, + ], }, { title: 'Conversions', value: '325', interval: 'Last 30 days', trend: 'down', - data: [10, 7, 6, 8, 5, 4, 4, 2], + data: [ + 1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600, 820, + 780, 800, 760, 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300, 220, + ], }, { title: 'Event count', value: '200k', interval: 'Last 30 days', trend: 'neutral', - data: [5, 4, 6, 3, 4, 3, 7, 6], - }, - { - title: 'Engagements', - value: '30k', - interval: 'Last 30 days', - trend: 'up', - data: [2, 4, 3, 4, 5, 4, 7, 8], + data: [ + 500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510, 530, + 520, 410, 530, 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510, + ], }, ]; export default function MainGrid() { return ( - + {/* cards */} - + + Overview + + theme.spacing(2) }} + > {data.map((card, index) => ( - + ))} - + + + + + + + - - - - - - - + + Details + + + + - - + + - + + ); } diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js index efa3322b6cd250..2ca155536bb142 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js +++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Badge from '@mui/material/Badge'; +import Badge, { badgeClasses } from '@mui/material/Badge'; import IconButton from '@mui/material/IconButton'; function MenuButton({ showBadge = false, ...props }) { @@ -9,7 +9,7 @@ function MenuButton({ showBadge = false, ...props }) { color="error" variant="dot" invisible={!showBadge} - sx={{ '& .MuiBadge-badge': { right: 2, top: 2 } }} + sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }} > diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx index ab6199b2e459aa..e938d6fa5ce12a 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Badge from '@mui/material/Badge'; +import Badge, { badgeClasses } from '@mui/material/Badge'; import IconButton, { IconButtonProps } from '@mui/material/IconButton'; export interface MenuButtonProps extends IconButtonProps { @@ -15,7 +15,7 @@ export default function MenuButton({ color="error" variant="dot" invisible={!showBadge} - sx={{ '& .MuiBadge-badge': { right: 2, top: 2 } }} + sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }} > diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js new file mode 100644 index 00000000000000..5cf1806a13390c --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js @@ -0,0 +1,55 @@ +import * as React from 'react'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Stack from '@mui/material/Stack'; +import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; +import AnalyticsRoundedIcon from '@mui/icons-material/AnalyticsRounded'; +import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded'; +import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded'; +import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded'; +import InfoRoundedIcon from '@mui/icons-material/InfoRounded'; +import HelpRoundedIcon from '@mui/icons-material/HelpRounded'; + +const mainListItems = [ + { text: 'Home', icon: }, + { text: 'Analytics', icon: }, + { text: 'Clients', icon: }, + { text: 'Tasks', icon: }, +]; + +const secondaryListItems = [ + { text: 'Settings', icon: }, + { text: 'About', icon: }, + { text: 'Feedback', icon: }, +]; + +export default function MenuContent() { + return ( + + + {mainListItems.map((item, index) => ( + + + {item.icon} + + + + ))} + + + + {secondaryListItems.map((item, index) => ( + + + {item.icon} + + + + ))} + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx new file mode 100644 index 00000000000000..5cf1806a13390c --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Stack from '@mui/material/Stack'; +import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; +import AnalyticsRoundedIcon from '@mui/icons-material/AnalyticsRounded'; +import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded'; +import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded'; +import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded'; +import InfoRoundedIcon from '@mui/icons-material/InfoRounded'; +import HelpRoundedIcon from '@mui/icons-material/HelpRounded'; + +const mainListItems = [ + { text: 'Home', icon: }, + { text: 'Analytics', icon: }, + { text: 'Clients', icon: }, + { text: 'Tasks', icon: }, +]; + +const secondaryListItems = [ + { text: 'Settings', icon: }, + { text: 'About', icon: }, + { text: 'Feedback', icon: }, +]; + +export default function MenuContent() { + return ( + + + {mainListItems.map((item, index) => ( + + + {item.icon} + + + + ))} + + + + {secondaryListItems.map((item, index) => ( + + + {item.icon} + + + + ))} + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js index ebcd6b161f8a6f..3b432e02a512eb 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js +++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js @@ -3,43 +3,32 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import MuiToolbar from '@mui/material/Toolbar'; -import Tab from '@mui/material/Tab'; -import Tabs from '@mui/material/Tabs'; +import { tabsClasses } from '@mui/material/Tabs'; +import Typography from '@mui/material/Typography'; import MenuRoundedIcon from '@mui/icons-material/MenuRounded'; -import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; -import ToggleColorMode from './ToggleColorMode'; -import SideNav from './SideNav'; +import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded'; +import SideMenuMobile from './SideMenuMobile'; import MenuButton from './MenuButton'; -import NavbarBreadcrumbs from './NavbarBreadcrumbs'; -import OptionsMenu from './OptionsMenu'; const Toolbar = styled(MuiToolbar)({ - maxWidth: 1538, width: '100%', - padding: '16px 16px 0 16px', + padding: '12px', display: 'flex', flexDirection: 'column', alignItems: 'start', justifyContent: 'center', gap: '12px', flexShrink: 0, - backdropFilter: 'blur(24px)', - '& .MuiTabs-flexContainer': { + [`& ${tabsClasses.flexContainer}`]: { gap: '8px', p: '8px', pb: 0, }, }); -function a11yProps(index) { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - }; -} - function Navbar({ mode, toggleColorMode }) { const [open, setOpen] = React.useState(false); @@ -47,49 +36,19 @@ function Navbar({ mode, toggleColorMode }) { setOpen(newOpen); }; - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - return ( ({ + sx={{ + display: { xs: 'auto', md: 'none' }, boxShadow: 0, - bgcolor: 'transparent', + bgcolor: 'background.paper', backgroundImage: 'none', - alignItems: 'center', borderBottom: '1px solid', - borderColor: theme.palette.divider, - })} + borderColor: 'divider', + }} > - - - - - - - - - - - + + + + Dashboard + + - - - - - - ); @@ -127,3 +85,28 @@ Navbar.propTypes = { }; export default Navbar; + +export function CustomIcon() { + return ( + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx index d285db6c481ec8..7536eb36f82cf4 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx @@ -2,17 +2,15 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import MuiToolbar from '@mui/material/Toolbar'; -import Tab from '@mui/material/Tab'; -import Tabs from '@mui/material/Tabs'; +import { tabsClasses } from '@mui/material/Tabs'; +import Typography from '@mui/material/Typography'; import MenuRoundedIcon from '@mui/icons-material/MenuRounded'; -import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; -import ToggleColorMode from './ToggleColorMode'; -import SideNav from './SideNav'; +import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded'; +import SideMenuMobile from './SideMenuMobile'; import MenuButton from './MenuButton'; -import NavbarBreadcrumbs from './NavbarBreadcrumbs'; -import OptionsMenu from './OptionsMenu'; interface NavBarProps { mode: PaletteMode; @@ -20,30 +18,21 @@ interface NavBarProps { } const Toolbar = styled(MuiToolbar)({ - maxWidth: 1538, width: '100%', - padding: '16px 16px 0 16px', + padding: '12px', display: 'flex', flexDirection: 'column', alignItems: 'start', justifyContent: 'center', gap: '12px', flexShrink: 0, - backdropFilter: 'blur(24px)', - '& .MuiTabs-flexContainer': { + [`& ${tabsClasses.flexContainer}`]: { gap: '8px', p: '8px', pb: 0, }, }); -function a11yProps(index: number) { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - }; -} - export default function Navbar({ mode, toggleColorMode }: NavBarProps) { const [open, setOpen] = React.useState(false); @@ -51,49 +40,19 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) { setOpen(newOpen); }; - const [value, setValue] = React.useState(0); - - const handleChange = (event: React.SyntheticEvent, newValue: number) => { - setValue(newValue); - }; - return ( ({ + sx={{ + display: { xs: 'auto', md: 'none' }, boxShadow: 0, - bgcolor: 'transparent', + bgcolor: 'background.paper', backgroundImage: 'none', - alignItems: 'center', borderBottom: '1px solid', - borderColor: theme.palette.divider, - })} + borderColor: 'divider', + }} > - - - - - - - - - - - + + + + Dashboard + + - - - - - - ); } + +export function CustomIcon() { + return ( + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js index 8adf0cea932ea3..0b07db10b8768d 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js +++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js @@ -1,24 +1,29 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import { SitemarkIcon } from '../internals/components/CustomIcons'; +import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs'; +import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded'; const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({ - '& .MuiBreadcrumbs-separator': { + margin: theme.spacing(1, 0), + [`& .${breadcrumbsClasses.separator}`]: { color: theme.palette.action.disabled, + margin: 1, }, - '& .MuiBreadcrumbs-ol': { - alignItems: 'normal', + [`& .${breadcrumbsClasses.ol}`]: { + alignItems: 'center', }, })); export default function NavbarBreadcrumbs() { return ( - - - - Project (Production) + } + > + Dashboard + + Home ); diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx index 8adf0cea932ea3..0b07db10b8768d 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx @@ -1,24 +1,29 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import { SitemarkIcon } from '../internals/components/CustomIcons'; +import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs'; +import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded'; const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({ - '& .MuiBreadcrumbs-separator': { + margin: theme.spacing(1, 0), + [`& .${breadcrumbsClasses.separator}`]: { color: theme.palette.action.disabled, + margin: 1, }, - '& .MuiBreadcrumbs-ol': { - alignItems: 'normal', + [`& .${breadcrumbsClasses.ol}`]: { + alignItems: 'center', }, })); export default function NavbarBreadcrumbs() { return ( - - - - Project (Production) + } + > + Dashboard + + Home ); diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js index 9476e631c71bda..7dee7136ebbfcd 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js +++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.js @@ -1,12 +1,20 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; -import Divider from '@mui/material/Divider'; +import { styled } from '@mui/material/styles'; +import Divider, { dividerClasses } from '@mui/material/Divider'; import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; +import { MenuItem as MuiMenuItem } from '@mui/material'; +import { paperClasses } from '@mui/material/Paper'; +import { listClasses } from '@mui/material/List'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon'; +import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; import MenuButton from './MenuButton'; +const MenuItem = styled(MuiMenuItem)({ + margin: '2px 0', +}); + export default function OptionsMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -18,7 +26,11 @@ export default function OptionsMenu() { }; return ( - + - - - - Riley Carter - - - Profile My account Add another account Settings - Logout + + + Logout + + + + ); diff --git a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx index bbe99724fe1e5c..5dd0e66350c77d 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/OptionsMenu.tsx @@ -1,12 +1,20 @@ import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; -import Divider from '@mui/material/Divider'; +import { styled } from '@mui/material/styles'; +import Divider, { dividerClasses } from '@mui/material/Divider'; import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; +import { MenuItem as MuiMenuItem } from '@mui/material'; +import { paperClasses } from '@mui/material/Paper'; +import { listClasses } from '@mui/material/List'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon'; +import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; import MenuButton from './MenuButton'; +const MenuItem = styled(MuiMenuItem)({ + margin: '2px 0', +}); + export default function OptionsMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -18,7 +26,11 @@ export default function OptionsMenu() { }; return ( - + - - - - Riley Carter - - - Profile My account Add another account Settings - Logout + + + Logout + + + + ); diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js index b5b75c47922e57..b00d1f9abcaf8e 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js +++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js @@ -1,83 +1,80 @@ import * as React from 'react'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import { BarChart } from '@mui/x-charts/BarChart'; -import { gray } from '../themePrimitives'; - -const colorPaletteLight = [gray[700], gray[500], gray[300]]; -const colorPalette = (mode) => - mode === 'dark' ? colorPaletteLight : colorPaletteLight; +import { useTheme } from '@mui/material/styles'; export default function PageViewsBarChart() { + const theme = useTheme(); + const colorPalette = [ + theme.palette.primary.dark, + theme.palette.primary.main, + theme.palette.primary.light, + ]; + return ( - + Page views and downloads + + + + 1.3M + + + + + Page views and downloads for the last 6 months + + diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx index 5dab2c76f85a9f..d4971de8c4c252 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx @@ -1,43 +1,52 @@ import * as React from 'react'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import { BarChart } from '@mui/x-charts/BarChart'; -import { gray } from '../themePrimitives'; - -const colorPaletteLight = [gray[700], gray[500], gray[300]]; -const colorPalette = (mode: 'light' | 'dark') => - mode === 'dark' ? colorPaletteLight : colorPaletteLight; +import { useTheme } from '@mui/material/styles'; export default function PageViewsBarChart() { + const theme = useTheme(); + const colorPalette = [ + theme.palette.primary.dark, + theme.palette.primary.main, + theme.palette.primary.light, + ]; return ( - + Page views and downloads + + + + 1.3M + + + + + Page views and downloads for the last 6 months + + diff --git a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js new file mode 100644 index 00000000000000..920f4e9dbf1d98 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js @@ -0,0 +1,104 @@ +import * as React from 'react'; +import { + Avatar as MuiAvatar, + ListItemAvatar as MuiListItemAvatar, +} from '@mui/material'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListSubheader from '@mui/material/ListSubheader'; +import Select, { selectClasses } from '@mui/material/Select'; +import Divider from '@mui/material/Divider'; +import { styled } from '@mui/material/styles'; +import AddRoundedIcon from '@mui/icons-material/AddRounded'; +import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; +import SmartphoneRoundedIcon from '@mui/icons-material/SmartphoneRounded'; +import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded'; + +const Avatar = styled(MuiAvatar)(({ theme }) => ({ + width: 28, + height: 28, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.secondary, + border: `1px solid ${theme.palette.divider}`, +})); + +const ListItemAvatar = styled(MuiListItemAvatar)({ + minWidth: 0, + marginRight: 12, +}); + +export default function SelectContent() { + const [company, setCompany] = React.useState(''); + + const handleChange = (event) => { + setCompany(event.target.value); + }; + + return ( + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx new file mode 100644 index 00000000000000..445096fe9ae161 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx @@ -0,0 +1,104 @@ +import * as React from 'react'; +import { + Avatar as MuiAvatar, + ListItemAvatar as MuiListItemAvatar, +} from '@mui/material'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListSubheader from '@mui/material/ListSubheader'; +import Select, { SelectChangeEvent, selectClasses } from '@mui/material/Select'; +import Divider from '@mui/material/Divider'; +import { styled } from '@mui/material/styles'; +import AddRoundedIcon from '@mui/icons-material/AddRounded'; +import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded'; +import SmartphoneRoundedIcon from '@mui/icons-material/SmartphoneRounded'; +import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded'; + +const Avatar = styled(MuiAvatar)(({ theme }) => ({ + width: 28, + height: 28, + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.secondary, + border: `1px solid ${theme.palette.divider}`, +})); + +const ListItemAvatar = styled(MuiListItemAvatar)({ + minWidth: 0, + marginRight: 12, +}); + +export default function SelectContent() { + const [company, setCompany] = React.useState(''); + + const handleChange = (event: SelectChangeEvent) => { + setCompany(event.target.value as string); + }; + + return ( + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js b/docs/data/material/getting-started/templates/dashboard/components/SessionsChart.js similarity index 58% rename from docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js rename to docs/data/material/getting-started/templates/dashboard/components/SessionsChart.js index 93ef070b493fb5..de2777b6260671 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.js +++ b/docs/data/material/getting-started/templates/dashboard/components/SessionsChart.js @@ -3,7 +3,9 @@ import PropTypes from 'prop-types'; import { useTheme } from '@mui/material/styles'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import { LineChart } from '@mui/x-charts/LineChart'; function AreaGradient({ color, id }) { @@ -37,31 +39,40 @@ function getDaysInMonth(month, year) { return days; } -export default function PageViewsChart() { +export default function SessionsChart() { const theme = useTheme(); - const mode = theme.palette.mode; const data = getDaysInMonth(4, 2024); - const colorPaletteLight = [ - theme.palette.grey[300], - theme.palette.grey[400], - theme.palette.grey[500], + const colorPalette = [ + theme.palette.primary.light, + theme.palette.primary.main, + theme.palette.primary.dark, ]; - const colorPaletteDark = [ - theme.palette.grey[400], - theme.palette.grey[500], - theme.palette.grey[700], - ]; - - const colorPalette = mode === 'dark' ? colorPaletteDark : colorPaletteLight; - return ( - + - + Sessions + + + + 13,277 + + + + + Sessions per day for the last 30 days + + - - - + + + diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/SessionsChart.tsx similarity index 57% rename from docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx rename to docs/data/material/getting-started/templates/dashboard/components/SessionsChart.tsx index 75ccda32685aef..546f9aac232e1b 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/SessionsChart.tsx @@ -2,7 +2,9 @@ import * as React from 'react'; import { useTheme } from '@mui/material/styles'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import { LineChart } from '@mui/x-charts/LineChart'; function AreaGradient({ color, id }: { color: string; id: string }) { @@ -31,29 +33,40 @@ function getDaysInMonth(month: number, year: number) { return days; } -export default function PageViewsChart() { +export default function SessionsChart() { const theme = useTheme(); - const mode = theme.palette.mode; const data = getDaysInMonth(4, 2024); - const colorPaletteLight = [ - theme.palette.grey[300], - theme.palette.grey[400], - theme.palette.grey[500], + const colorPalette = [ + theme.palette.primary.light, + theme.palette.primary.main, + theme.palette.primary.dark, ]; - const colorPaletteDark = [ - theme.palette.grey[400], - theme.palette.grey[500], - theme.palette.grey[700], - ]; - const colorPalette = mode === 'dark' ? colorPaletteDark : colorPaletteLight; return ( - + - + Sessions + + + + 13,277 + + + + + Sessions per day for the last 30 days + + - - - + + + diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js new file mode 100644 index 00000000000000..201e813671251a --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Avatar from '@mui/material/Avatar'; +import MuiDrawer, { drawerClasses } from '@mui/material/Drawer'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import SelectContent from './SelectContent'; +import MenuContent from './MenuContent'; +import CardAlert from './CardAlert'; +import OptionsMenu from './OptionsMenu'; + +const drawerWidth = 240; + +const Drawer = styled(MuiDrawer)({ + width: drawerWidth, + flexShrink: 0, + boxSizing: 'border-box', + [`& .${drawerClasses.paper}`]: { + width: drawerWidth, + boxSizing: 'border-box', + }, +}); + +export default function SideMenu() { + return ( + + + + + + + + + + + + Riley Carter + + + riley@email.com + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx new file mode 100644 index 00000000000000..201e813671251a --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Avatar from '@mui/material/Avatar'; +import MuiDrawer, { drawerClasses } from '@mui/material/Drawer'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import SelectContent from './SelectContent'; +import MenuContent from './MenuContent'; +import CardAlert from './CardAlert'; +import OptionsMenu from './OptionsMenu'; + +const drawerWidth = 240; + +const Drawer = styled(MuiDrawer)({ + width: drawerWidth, + flexShrink: 0, + boxSizing: 'border-box', + [`& .${drawerClasses.paper}`]: { + width: drawerWidth, + boxSizing: 'border-box', + }, +}); + +export default function SideMenu() { + return ( + + + + + + + + + + + + Riley Carter + + + riley@email.com + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js new file mode 100644 index 00000000000000..916abb6f8bdcfe --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js @@ -0,0 +1,80 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; + +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import Drawer, { drawerClasses } from '@mui/material/Drawer'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; +import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; + +import MenuButton from './MenuButton'; +import ToggleColorMode from './ToggleColorMode'; +import MenuContent from './MenuContent'; +import CardAlert from './CardAlert'; + +function SideMenuMobile({ open, toggleDrawer, mode, toggleColorMode }) { + return ( + + + + + + + Riley Carter + + + + + + + + + + + + + + + + + + + ); +} + +SideMenuMobile.propTypes = { + mode: PropTypes.oneOf(['dark', 'light']).isRequired, + open: PropTypes.bool, + toggleColorMode: PropTypes.func.isRequired, + toggleDrawer: PropTypes.func.isRequired, +}; + +export default SideMenuMobile; diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx new file mode 100644 index 00000000000000..2864913e268fcc --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import { PaletteMode } from '@mui/material'; +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import Drawer, { drawerClasses } from '@mui/material/Drawer'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; +import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; + +import MenuButton from './MenuButton'; +import ToggleColorMode from './ToggleColorMode'; +import MenuContent from './MenuContent'; +import CardAlert from './CardAlert'; + +interface SideMenuMobileProps { + open: boolean | undefined; + toggleDrawer: (newOpen: boolean) => () => void; + mode: PaletteMode; + toggleColorMode: () => void; +} + +export default function SideMenuMobile({ + open, + toggleDrawer, + mode, + toggleColorMode, +}: SideMenuMobileProps) { + return ( + + + + + + + Riley Carter + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideNav.js b/docs/data/material/getting-started/templates/dashboard/components/SideNav.js deleted file mode 100644 index 912b9d6f9ae266..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/components/SideNav.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; - -import Avatar from '@mui/material/Avatar'; -import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; -import Drawer from '@mui/material/Drawer'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; - -import AddRoundedIcon from '@mui/icons-material/AddRounded'; -import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'; -import ContactPageRoundedIcon from '@mui/icons-material/ContactPageRounded'; -import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; -import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded'; -import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; - -import MenuButton from './MenuButton'; -import ToggleColorMode from './ToggleColorMode'; - -const accountsList = [ - { label: 'Profile', icon: }, - { label: 'My account', icon: }, -]; - -const settingsList = [ - { label: 'Add account', icon: }, - { label: 'Settings', icon: }, -]; - -function SideNav({ open, toggleDrawer, mode, toggleColorMode }) { - return ( - - - - - - - Riley Carter - - - - - - - - - - - {accountsList.map((item, index) => ( - - - {item.icon} - - - - ))} - - {settingsList.map((item, index) => ( - - - {item.icon} - - - - ))} - - - - - - - - ); -} - -SideNav.propTypes = { - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - open: PropTypes.bool, - toggleColorMode: PropTypes.func.isRequired, - toggleDrawer: PropTypes.func.isRequired, -}; - -export default SideNav; diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx deleted file mode 100644 index 7f55bb12fc5c39..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/components/SideNav.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import { PaletteMode } from '@mui/material'; -import Avatar from '@mui/material/Avatar'; -import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; -import Drawer from '@mui/material/Drawer'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; - -import AddRoundedIcon from '@mui/icons-material/AddRounded'; -import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'; -import ContactPageRoundedIcon from '@mui/icons-material/ContactPageRounded'; -import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; -import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded'; -import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; - -import MenuButton from './MenuButton'; -import ToggleColorMode from './ToggleColorMode'; - -interface SideNavProps { - open: boolean | undefined; - toggleDrawer: (newOpen: boolean) => () => void; - mode: PaletteMode; - toggleColorMode: () => void; -} - -const accountsList = [ - { label: 'Profile', icon: }, - { label: 'My account', icon: }, -]; - -const settingsList = [ - { label: 'Add account', icon: }, - { label: 'Settings', icon: }, -]; - -export default function SideNav({ - open, - toggleDrawer, - mode, - toggleColorMode, -}: SideNavProps) { - return ( - - - - - - - Riley Carter - - - - - - - - - - - {accountsList.map((item, index) => ( - - - {item.icon} - - - - ))} - - {settingsList.map((item, index) => ( - - - {item.icon} - - - - ))} - - - - - - - - ); -} diff --git a/docs/data/material/getting-started/templates/dashboard/components/StatCard.js b/docs/data/material/getting-started/templates/dashboard/components/StatCard.js index 2fd8bccec2f4d4..b34558155543f8 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/StatCard.js +++ b/docs/data/material/getting-started/templates/dashboard/components/StatCard.js @@ -10,6 +10,21 @@ import Typography from '@mui/material/Typography'; import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; import { areaElementClasses } from '@mui/x-charts/LineChart'; +function getDaysInMonth(month, year) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString('en-US', { + month: 'short', + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + function AreaGradient({ color, id }) { return ( @@ -28,6 +43,7 @@ AreaGradient.propTypes = { function StatCard({ title, value, interval, trend, data }) { const theme = useTheme(); + const daysInWeek = getDaysInMonth(4, 2024); const trendColors = { up: @@ -83,6 +99,12 @@ function StatCard({ title, value, interval, trend, data }) { colors={[chartColor]} data={data} area + showHighlight + showTooltip + xAxis={{ + scaleType: 'band', + data: daysInWeek, // Use the correct property 'data' for xAxis + }} sx={{ [`& .${areaElementClasses.root}`]: { fill: `url(#area-gradient-${value})`, diff --git a/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx b/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx index b6d6abf8b3a99e..d58700115d892b 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/StatCard.tsx @@ -17,6 +17,21 @@ export type StatCardProps = { data: number[]; }; +function getDaysInMonth(month: number, year: number) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString('en-US', { + month: 'short', + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + function AreaGradient({ color, id }: { color: string; id: string }) { return ( @@ -36,6 +51,7 @@ export default function StatCard({ data, }: StatCardProps) { const theme = useTheme(); + const daysInWeek = getDaysInMonth(4, 2024); const trendColors = { up: @@ -91,6 +107,12 @@ export default function StatCard({ colors={[chartColor]} data={data} area + showHighlight + showTooltip + xAxis={{ + scaleType: 'band', + data: daysInWeek, // Use the correct property 'data' for xAxis + }} sx={{ [`& .${areaElementClasses.root}`]: { fill: `url(#area-gradient-${value})`, diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js deleted file mode 100644 index faf6155e1fc22d..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.js +++ /dev/null @@ -1,1115 +0,0 @@ -import * as React from 'react'; - -import { alpha } from '@mui/material/styles'; - -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; -import { brand, getDesignTokens, gray, green, red } from './themePrimitives'; - -export default function getDashboardTheme(mode) { - return { - ...getDesignTokens(mode), - 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', - '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' }, - 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: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, - 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 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, - '&: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 ${theme.palette.divider}`, - backgroundColor: gray[50], - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - '&: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), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - 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: gray[800], - 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]})`, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - ...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: , - 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.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', - }, - }), - }), - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiChip: { - styleOverrides: { - root: ({ theme }) => ({ - border: '1px solid', - borderRadius: '999px', - '& .MuiChip-label': { - padding: '0 4px', - fontWeight: 600, - }, - variants: [ - { - props: { - color: 'default', - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - '& .MuiChip-label': { - color: gray[500], - }, - '& .MuiChip-icon': { - color: gray[500], - }, - ...theme.applyStyles('dark', { - borderColor: gray[700], - backgroundColor: gray[800], - '& .MuiChip-label': { - color: gray[300], - }, - '& .MuiChip-icon': { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: 'success', - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - '& .MuiChip-label': { - color: green[500], - }, - '& .MuiChip-icon': { - color: green[500], - }, - ...theme.applyStyles('dark', { - borderColor: green[800], - backgroundColor: green[900], - '& .MuiChip-label': { - color: green[300], - }, - '& .MuiChip-icon': { - color: green[300], - }, - }), - }, - }, - { - props: { - color: 'error', - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - '& .MuiChip-label': { - color: red[500], - }, - '& .MuiChip-icon': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[800], - backgroundColor: red[900], - '& .MuiChip-label': { - color: red[200], - }, - '& .MuiChip-icon': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - 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 ${theme.palette.divider}`, - backgroundColor: gray[50], - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - width: '2rem', - height: '2rem', - padding: '0.25rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - width: '2.5rem', - height: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[600], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&: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], - }), - }), - }, - }, - MuiList: { - styleOverrides: { - root: { - display: 'flex', - flexDirection: 'column', - gap: 8, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - padding: 0, - '&.Mui-selected': { borderRadius: theme.shape.borderRadius }, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: ({ theme }) => ({ - minWidth: 0, - marginRight: '8px', - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { color: theme.palette.grey[100] }), - }), - }, - }, - MuiListItemText: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[700], - ...theme.applyStyles('dark', { color: theme.palette.grey[50] }), - }), - primary: { fontWeight: 600 }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '4px 0', - borderRadius: theme.shape.borderRadius, - background: 'transparent', - }), - }, - }, - MuiMenu: { - styleOverrides: { - paper: ({ theme }) => ({ - marginTop: '4px', - padding: '0 8px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { - borderRadius: 6, - padding: '6px 8px', - }, - '& .MuiMenu-list': { - '& .MuiDivider-root': { margin: '0 -8px' }, - }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - transition: 'border 120ms ease-in', - '&:hover': { - borderColor: gray[400], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - '&:hover': { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - }, - }, - ], - }), - notchedOutline: { - border: 'none', - }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-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)', - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - 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], - }, - '&.Mui-selected': { - color: gray[900], - }, - ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - '&.Mui-selected': { - color: '#fff', - }, - }), - }), - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiPickersPopper: { - styleOverrides: { - paper: ({ theme }) => ({ - marginTop: 4, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { borderRadius: 6, margin: '0 6px' }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiPickersArrowSwitcher: { - styleOverrides: { - button: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiPickersCalendarHeader: { - styleOverrides: { - switchViewButton: { - padding: 0, - border: 'none', - }, - }, - }, - MuiPickersMonth: { - styleOverrides: { - monthButton: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiPickersYear: { - styleOverrides: { - yearButton: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - height: 'fit-content', - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiPickersDay: { - styleOverrides: { - root: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiChartsAxis: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiChartsAxis-line': { - stroke: gray[300], - }, - '& .MuiChartsAxis-tick': { - stroke: gray[300], - }, - '& .MuiChartsAxis-tickLabel': { - fill: gray[400], - fontWeight: 500, - }, - ...theme.applyStyles('dark', { - '& .MuiChartsAxis-line': { - stroke: gray[700], - }, - '& .MuiChartsAxis-tick': { - stroke: gray[700], - }, - '& .MuiChartsAxis-tickLabel': { - fill: gray[400], - fontWeight: 500, - }, - }), - }), - }, - }, - MuiChartsLegend: { - styleOverrides: { - root: { - '& .MuiChartsLegend-mark': { - ry: 6, - }, - }, - }, - }, - MuiChartsGrid: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiChartsGrid-line': { - stroke: gray[200], - strokeDasharray: '4 2', - strokeWidth: 0.8, - }, - ...theme.applyStyles('dark', { - '& .MuiChartsGrid-line': { - stroke: gray[700], - strokeDasharray: '4 2', - strokeWidth: 0.8, - }, - }), - }), - }, - }, - MuiTreeItem2: { - styleOverrides: { - root: ({ theme }) => ({ - position: 'relative', - boxSizing: 'border-box', - padding: theme.spacing(0, 1), - '& .groupTransition': { - marginLeft: theme.spacing(2), - padding: theme.spacing(0), - borderLeft: '1px solid', - borderColor: theme.palette.divider, - }, - }), - content: ({ theme }) => ({ - marginTop: theme.spacing(1), - padding: theme.spacing(0.5, 1), - overflow: 'clip', - '&:hover': { - backgroundColor: alpha(gray[300], 0.2), - }, - '&.focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - '&:hover': { - backgroundColor: alpha(gray[300], 0.2), - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }, - '&.selected': { - backgroundColor: alpha(gray[300], 0.4), - '&:hover': { - backgroundColor: alpha(gray[300], 0.6), - }, - }, - ...theme.applyStyles('dark', { - '&:hover': { - backgroundColor: alpha(gray[500], 0.2), - }, - '&:focus-visible': { - '&:hover': { - backgroundColor: alpha(gray[500], 0.2), - }, - }, - '&.selected': { - backgroundColor: alpha(gray[500], 0.4), - '&:hover': { - backgroundColor: alpha(gray[500], 0.6), - }, - }, - }), - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: 'flex', - gap: 8, - marginRight: 6, - '& .MuiIconButton-root': { minWidth: 0, width: 36, height: 36 }, - }, - }, - }, - MuiDataGrid: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: theme.palette.divider, - }), - cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }), - menu: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { - borderRadius: theme.shape.borderRadius, - margin: '0 6px', - }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - row: ({ theme }) => ({ - // borderBottom: `1px solid ${theme.palette.divider}`, - '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` }, - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[100], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - '&.even': { - background: alpha(theme.palette.grey[200], 0.3), - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[100], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - }, - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[900], - '&.Mui-selected': { - background: theme.palette.grey[800], - }, - '&.even': { - background: alpha(theme.palette.grey[800], 0.4), - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[800], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - }, - }), - }), - iconButtonContainer: ({ theme }) => ({ - '& .MuiIconButton-root': { - border: 'none', - backgroundColor: 'transparent', - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[800], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }, - }), - menuIconButton: ({ theme }) => ({ - border: 'none', - backgroundColor: 'transparent', - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[800], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }), - columnHeaderTitleContainer: { - flexGrow: 1, - justifyContent: 'space-between', - }, - columnHeaderDraggableContainer: { paddingRight: 2 }, - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx deleted file mode 100644 index b8922dd62fcb9b..00000000000000 --- a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx +++ /dev/null @@ -1,1121 +0,0 @@ -import * as React from 'react'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, alpha, Theme } from '@mui/material/styles'; -import { PaletteMode } from '@mui/material'; -import type {} from '@mui/x-date-pickers/themeAugmentation'; -import type {} from '@mui/x-charts/themeAugmentation'; -import type {} from '@mui/x-data-grid/themeAugmentation'; -import type {} from '@mui/x-tree-view/themeAugmentation'; -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; -import { brand, getDesignTokens, gray, green, red } from './themePrimitives'; - -export default function getDashboardTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - 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', - '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' }, - 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: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 2px 0 ${gray[600]}, inset 0 -2px 0 hsl(220, 0%, 0%)`, - 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 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', - border: `1px solid ${gray[100]}`, - '&: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 ${theme.palette.divider}`, - backgroundColor: gray[50], - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - '&: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), - }, - }), - }, - }, - ], - }), - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - 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: gray[800], - 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]})`, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - ...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: , - 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.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', - }, - }), - }), - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiChip: { - styleOverrides: { - root: ({ theme }) => ({ - border: '1px solid', - borderRadius: '999px', - '& .MuiChip-label': { - padding: '0 4px', - fontWeight: 600, - }, - variants: [ - { - props: { - color: 'default', - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - '& .MuiChip-label': { - color: gray[500], - }, - '& .MuiChip-icon': { - color: gray[500], - }, - ...theme.applyStyles('dark', { - borderColor: gray[700], - backgroundColor: gray[800], - '& .MuiChip-label': { - color: gray[300], - }, - '& .MuiChip-icon': { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: 'success', - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - '& .MuiChip-label': { - color: green[500], - }, - '& .MuiChip-icon': { - color: green[500], - }, - ...theme.applyStyles('dark', { - borderColor: green[800], - backgroundColor: green[900], - '& .MuiChip-label': { - color: green[300], - }, - '& .MuiChip-icon': { - color: green[300], - }, - }), - }, - }, - { - props: { - color: 'error', - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - '& .MuiChip-label': { - color: red[500], - }, - '& .MuiChip-icon': { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[800], - backgroundColor: red[900], - '& .MuiChip-label': { - color: red[200], - }, - '& .MuiChip-icon': { - color: red[300], - }, - }), - }, - }, - ], - }), - }, - }, - 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 ${theme.palette.divider}`, - backgroundColor: gray[50], - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - '& .MuiSvgIcon-root': { width: '1.125rem', height: '1.125rem' }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - width: '2rem', - height: '2rem', - padding: '0.25rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - width: '2.5rem', - height: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: brand[600], - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - '&::before': { - content: '""', - position: 'absolute', - width: 0, - height: '1px', - bottom: 0, - left: 0, - backgroundColor: brand[200], - opacity: 0.7, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&: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], - }), - }), - }, - }, - MuiList: { - styleOverrides: { - root: { - display: 'flex', - flexDirection: 'column', - gap: 8, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - padding: 0, - '&.Mui-selected': { borderRadius: theme.shape.borderRadius }, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: ({ theme }) => ({ - minWidth: 0, - marginRight: '8px', - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { color: theme.palette.grey[100] }), - }), - }, - }, - MuiListItemText: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[700], - ...theme.applyStyles('dark', { color: theme.palette.grey[50] }), - }), - primary: { fontWeight: 600 }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '4px 0', - borderRadius: theme.shape.borderRadius, - background: 'transparent', - }), - }, - }, - MuiMenu: { - styleOverrides: { - paper: ({ theme }) => ({ - marginTop: '4px', - padding: '0 8px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { - borderRadius: 6, - padding: '6px 8px', - }, - '& .MuiMenu-list': { - '& .MuiDivider-root': { margin: '0 -8px' }, - }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - transition: 'border 120ms ease-in', - '&:hover': { - borderColor: gray[400], - }, - '&.Mui-focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - '&:hover': { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2rem', - padding: '0 0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - }, - }, - ], - }), - notchedOutline: { - border: 'none', - }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - '& .Mui-selected': { - color: brand[500], - }, - ...theme.applyStyles('dark', { - '& .Mui-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)', - '&.Mui-selected': { color: brand[300] }, - }), - }), - }, - }, - 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], - }, - '&.Mui-selected': { - color: gray[900], - }, - ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - '&.Mui-selected': { - color: '#fff', - }, - }), - }), - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiPickersPopper: { - styleOverrides: { - paper: ({ theme }) => ({ - marginTop: 4, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { borderRadius: 6, margin: '0 6px' }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiPickersArrowSwitcher: { - styleOverrides: { - button: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiPickersCalendarHeader: { - styleOverrides: { - switchViewButton: { - padding: 0, - border: 'none', - }, - }, - }, - MuiPickersMonth: { - styleOverrides: { - monthButton: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiPickersYear: { - styleOverrides: { - yearButton: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - height: 'fit-content', - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiPickersDay: { - styleOverrides: { - root: ({ theme }) => ({ - fontSize: theme.typography.body1.fontSize, - color: theme.palette.grey[600], - padding: theme.spacing(0.5), - borderRadius: theme.shape.borderRadius, - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - backgroundColor: gray[700], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[700] }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[500], - '&:hover': { - backgroundColor: theme.palette.action.hover, - }, - '&.Mui-selected': { - color: theme.palette.common.black, - backgroundColor: gray[300], - }, - '&:focus': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - backgroundColor: 'transparent', - '&.Mui-selected': { backgroundColor: gray[300] }, - }, - }), - }), - }, - }, - MuiChartsAxis: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiChartsAxis-line': { - stroke: gray[300], - }, - '& .MuiChartsAxis-tick': { - stroke: gray[300], - }, - '& .MuiChartsAxis-tickLabel': { - fill: gray[400], - fontWeight: 500, - }, - ...(theme as Omit).applyStyles('dark', { - '& .MuiChartsAxis-line': { - stroke: gray[700], - }, - '& .MuiChartsAxis-tick': { - stroke: gray[700], - }, - '& .MuiChartsAxis-tickLabel': { - fill: gray[400], - fontWeight: 500, - }, - }), - }), - }, - }, - MuiChartsLegend: { - styleOverrides: { - root: { - '& .MuiChartsLegend-mark': { - ry: 6, - }, - }, - }, - }, - MuiChartsGrid: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiChartsGrid-line': { - stroke: gray[200], - strokeDasharray: '4 2', - strokeWidth: 0.8, - }, - ...(theme as Omit).applyStyles('dark', { - '& .MuiChartsGrid-line': { - stroke: gray[700], - strokeDasharray: '4 2', - strokeWidth: 0.8, - }, - }), - }), - }, - }, - MuiTreeItem2: { - styleOverrides: { - root: ({ theme }) => ({ - position: 'relative', - boxSizing: 'border-box', - padding: theme.spacing(0, 1), - '& .groupTransition': { - marginLeft: theme.spacing(2), - padding: theme.spacing(0), - borderLeft: '1px solid', - borderColor: theme.palette.divider, - }, - }), - content: ({ theme }) => ({ - marginTop: theme.spacing(1), - padding: theme.spacing(0.5, 1), - overflow: 'clip', - '&:hover': { - backgroundColor: alpha(gray[300], 0.2), - }, - '&.focused': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - '&:hover': { - backgroundColor: alpha(gray[300], 0.2), - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }, - '&.selected': { - backgroundColor: alpha(gray[300], 0.4), - '&:hover': { - backgroundColor: alpha(gray[300], 0.6), - }, - }, - ...theme.applyStyles('dark', { - '&:hover': { - backgroundColor: alpha(gray[500], 0.2), - }, - '&:focus-visible': { - '&:hover': { - backgroundColor: alpha(gray[500], 0.2), - }, - }, - '&.selected': { - backgroundColor: alpha(gray[500], 0.4), - '&:hover': { - backgroundColor: alpha(gray[500], 0.6), - }, - }, - }), - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: 'flex', - gap: 8, - marginRight: 6, - '& .MuiIconButton-root': { minWidth: 0, width: 36, height: 36 }, - }, - }, - }, - MuiDataGrid: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: theme.palette.divider, - }), - - cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }), - menu: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - '& .MuiMenuItem-root': { - borderRadius: theme.shape.borderRadius, - margin: '0 6px', - }, - ...theme.applyStyles('dark', { - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - row: ({ theme }) => ({ - // borderBottom: `1px solid ${theme.palette.divider}`, - '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` }, - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[100], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - '&.even': { - background: alpha(theme.palette.grey[200], 0.3), - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[100], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - }, - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[900], - '&.Mui-selected': { - background: theme.palette.grey[800], - }, - '&.even': { - background: alpha(theme.palette.grey[800], 0.4), - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, - '&.Mui-selected': { - background: theme.palette.grey[800], - '&:hover': { - background: alpha(theme.palette.primary.main, 0.2), - }, - }, - }, - }), - }), - iconButtonContainer: ({ theme }) => ({ - '& .MuiIconButton-root': { - border: 'none', - backgroundColor: 'transparent', - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[800], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }, - }), - menuIconButton: ({ theme }) => ({ - border: 'none', - backgroundColor: 'transparent', - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[800], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }), - - columnHeaderTitleContainer: { - flexGrow: 1, - justifyContent: 'space-between', - }, - columnHeaderDraggableContainer: { paddingRight: 2 }, - }, - }, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js index bb68fd96580df4..d5ee6056904b0c 100644 --- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js +++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js @@ -2,7 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButtonGroup, { + toggleButtonGroupClasses, +} from '@mui/material/ToggleButtonGroup'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { @@ -25,13 +27,13 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { aria-label="Platform" sx={{ backgroundColor: 'background.default', - '& .Mui-selected': { + [`& .${toggleButtonGroupClasses.selected}`]: { pointerEvents: 'none', }, }} > - + Custom theme diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx index f4b1b7c218b4a8..8aa763b706ddea 100644 --- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx +++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButtonGroup, { + toggleButtonGroupClasses, +} from '@mui/material/ToggleButtonGroup'; import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; interface ToggleCustomThemeProps { @@ -32,13 +34,13 @@ export default function ToggleCustomTheme({ aria-label="Platform" sx={{ backgroundColor: 'background.default', - '& .Mui-selected': { + [`& .${toggleButtonGroupClasses.selected}`]: { pointerEvents: 'none', }, }} > - + Custom theme diff --git a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js index a24b8589635fe2..624f0b61c5a7a2 100644 --- a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js +++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js @@ -2,22 +2,59 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; -export function renderStatus(params) { - const colors = { - new: 'info', - verified: 'success', - blocked: 'error', - uncertain: 'default', - }; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; + +function getDaysInMonth(month, year) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString('en-US', { + month: 'short', + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + +function renderSparklineCell(params) { + const data = getDaysInMonth(4, 2024); + const { value, colDef } = params; + + if (!value || value.length === 0) { + return null; + } return ( - +
+ +
); } + +function renderStatus(status) { + const colors = { + Online: 'success', + Offline: 'default', + }; + + return ; +} + export function renderAvatar(params) { if (params.value == null) { return ''; @@ -38,108 +75,558 @@ export function renderAvatar(params) { } export const columns = [ - { field: 'id', headerName: 'ID', width: 90 }, - { field: 'pageTitle', headerName: 'Page Title', width: 200 }, - { field: 'eventCount', headerName: 'Event Count', width: 130 }, - { field: 'users', headerName: 'Users', width: 100 }, + { field: 'pageTitle', headerName: 'Page Title', flex: 1.5, minWidth: 200 }, + { + field: 'status', + headerName: 'Status', + flex: 0.5, + minWidth: 80, + renderCell: (params) => renderStatus(params.value), + }, + { + field: 'users', + headerName: 'Users', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 80, + }, + { + field: 'eventCount', + headerName: 'Event Count', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 100, + }, { field: 'viewsPerUser', headerName: 'Views per User', - width: 130, + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 120, + }, + { + field: 'averageTime', + headerName: 'Average Time', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 100, + }, + { + field: 'conversions', + headerName: 'Daily Conversions', + flex: 1, + minWidth: 150, + renderCell: renderSparklineCell, }, - { field: 'averageTime', headerName: 'Average Time', width: 130 }, - { field: 'conversions', headerName: 'Conversions', width: 120 }, ]; export const rows = [ { id: 1, pageTitle: 'Homepage Overview', - eventCount: 6345, - users: 192423, - viewsPerUser: 19.2, - averageTime: '2m 23s', - conversions: 400, + status: 'Online', + eventCount: 8345, + users: 212423, + viewsPerUser: 18.5, + averageTime: '2m 15s', + conversions: [ + 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, + 911787, 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, + 1670690, 1695142, 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, + 3296541, 3041524, 2599497, + ], }, { id: 2, pageTitle: 'Product Details - Gadgets', - eventCount: 4653, - users: 152240, - viewsPerUser: 10.2, - averageTime: '2m 23s', - conversions: 321, + status: 'Online', + eventCount: 5653, + users: 172240, + viewsPerUser: 9.7, + averageTime: '2m 30s', + conversions: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 557488, 1341471, 2044561, 2206438, + ], }, { id: 3, pageTitle: 'Checkout Process - Step 1', - eventCount: 2455, - users: 61240, - viewsPerUser: 16.4, - averageTime: '2m 23s', - conversions: 120, + status: 'Offline', + eventCount: 3455, + users: 58240, + viewsPerUser: 15.2, + averageTime: '2m 10s', + conversions: [ + 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, + 520278, 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, + 903675, 1049642, 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, + 1381571, + ], }, { id: 4, pageTitle: 'User Profile Dashboard', - eventCount: 123543, - users: 102240, - viewsPerUser: 3.74, - averageTime: '2m 23s', - conversions: 40, + status: 'Online', + eventCount: 112543, + users: 96240, + viewsPerUser: 4.5, + averageTime: '2m 40s', + conversions: [ + 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, + 649082, 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, + 1145309, 1195630, 1358925, 1373160, 1172679, 1340106, 1396974, 1623641, + 1687545, 1581634, 1550291, + ], }, { id: 5, pageTitle: 'Article Listing - Tech News', - eventCount: 4653, - users: 132240, - viewsPerUser: 2.24, - averageTime: '2m 23s', - conversions: 49, + status: 'Offline', + eventCount: 3653, + users: 142240, + viewsPerUser: 3.1, + averageTime: '2m 55s', + conversions: [ + 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, + 640744, 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, + 1014831, 1027570, 1189068, 1119099, 987244, 1197954, 1310721, 1480816, 1577547, + 1854053, 1791831, + ], }, { id: 6, pageTitle: 'FAQs - Customer Support', - eventCount: 123543, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + status: 'Online', + eventCount: 106543, + users: 15240, + viewsPerUser: 7.2, + averageTime: '2m 20s', + conversions: [ + 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, + 94734, 132289, 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, + 285557, 268555, 259482, 274019, 321648, 359801, 399502, 447249, 497403, + ], }, { id: 7, - pageTitle: 'About Us - Company Info', - eventCount: 4653, - users: 19240, - viewsPerUser: 1.02, - averageTime: '2m 23s', - conversions: 2, + pageTitle: 'Product Comparison - Laptops', + status: 'Offline', + eventCount: 7853, + users: 32240, + viewsPerUser: 6.5, + averageTime: '2m 50s', + conversions: [ + 93682, 107901, 144919, 151769, 170804, 183736, 201752, 219792, 227887, 295382, + 309600, 278050, 331964, 356826, 404896, 428090, 470245, 485582, 539056, 582112, + 594289, 671915, 649510, 574911, 713843, 754965, 853020, 916793, 960158, 984265, + ], }, { id: 8, - pageTitle: 'Contact Form Page', - eventCount: 123543, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + pageTitle: 'Shopping Cart - Electronics', + status: 'Online', + eventCount: 8563, + users: 48240, + viewsPerUser: 4.3, + averageTime: '3m 10s', + conversions: [ + 52394, 63357, 82800, 105466, 128729, 144472, 172148, 197919, 212302, 278153, + 290499, 249824, 317499, 333024, 388925, 410576, 462099, 488477, 533956, 572307, + 591019, 681506, 653332, 581234, 719038, 783496, 911609, 973328, 1056071, + 1112940, + ], }, { id: 9, - pageTitle: 'Services Overview - Web Development', - eventCount: 6345, - users: 19240, - viewsPerUser: 1.02, - averageTime: '2m 23s', - conversions: 2, + pageTitle: 'Payment Confirmation - Bank Transfer', + status: 'Offline', + eventCount: 4563, + users: 18240, + viewsPerUser: 2.7, + averageTime: '3m 25s', + conversions: [ + 15372, 16901, 25489, 30148, 40857, 51136, 64627, 75804, 89633, 100407, 114908, + 129957, 143568, 158509, 174822, 192488, 211512, 234702, 258812, 284328, 310431, + 338186, 366582, 396749, 428788, 462880, 499125, 537723, 578884, 622825, + ], }, { id: 10, - pageTitle: 'Pricing Page - Subscription Plans', - eventCount: 2455, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + pageTitle: 'Product Reviews - Smartphones', + status: 'Online', + eventCount: 9863, + users: 28240, + viewsPerUser: 5.1, + averageTime: '3m 05s', + conversions: [ + 70211, 89234, 115676, 136021, 158744, 174682, 192890, 218073, 240926, 308190, + 317552, 279834, 334072, 354955, 422153, 443911, 501486, 538091, 593724, 642882, + 686539, 788615, 754813, 687955, 883645, 978347, 1142551, 1233074, 1278155, + 1356724, + ], + }, + { + id: 11, + pageTitle: 'Subscription Management - Services', + status: 'Offline', + eventCount: 6563, + users: 24240, + viewsPerUser: 4.8, + averageTime: '3m 15s', + conversions: [ + 49662, 58971, 78547, 93486, 108722, 124901, 146422, 167883, 189295, 230090, + 249837, 217828, 266494, 287537, 339586, 363299, 412855, 440900, 490111, 536729, + 580591, 671635, 655812, 576431, 741632, 819296, 971762, 1052605, 1099234, + 1173591, + ], + }, + { + id: 12, + pageTitle: 'Order Tracking - Shipments', + status: 'Online', + eventCount: 12353, + users: 38240, + viewsPerUser: 3.5, + averageTime: '3m 20s', + conversions: [ + 29589, 37965, 55800, 64672, 77995, 91126, 108203, 128900, 148232, 177159, + 193489, 164471, 210765, 229977, 273802, 299381, 341092, 371567, 413812, 457693, + 495920, 564785, 541022, 491680, 618096, 704926, 833365, 904313, 974622, + 1036567, + ], + }, + { + id: 13, + pageTitle: 'Customer Feedback - Surveys', + status: 'Offline', + eventCount: 5863, + users: 13240, + viewsPerUser: 2.3, + averageTime: '3m 30s', + conversions: [ + 8472, 9637, 14892, 19276, 23489, 28510, 33845, 39602, 45867, 52605, 59189, + 65731, 76021, 85579, 96876, 108515, 119572, 131826, 145328, 160192, 176528, + 196662, 217929, 239731, 262920, 289258, 315691, 342199, 370752, 402319, + ], + }, + { + id: 14, + pageTitle: 'Account Settings - Preferences', + status: 'Online', + eventCount: 7853, + users: 18240, + viewsPerUser: 3.2, + averageTime: '3m 15s', + conversions: [ + 15792, 16948, 22728, 25491, 28412, 31268, 34241, 37857, 42068, 46893, 51098, + 55734, 60780, 66421, 72680, 79584, 87233, 95711, 105285, 115814, 127509, + 140260, 154086, 169495, 186445, 205109, 225580, 247983, 272484, 299280, + ], + }, + { + id: 15, + pageTitle: 'Login Page - Authentication', + status: 'Offline', + eventCount: 9563, + users: 24240, + viewsPerUser: 2.5, + averageTime: '3m 35s', + conversions: [ + 25638, 28355, 42089, 53021, 66074, 80620, 97989, 118202, 142103, 166890, + 193869, 225467, 264089, 307721, 358059, 417835, 488732, 573924, 674878, 794657, + 938542, 1111291, 1313329, 1543835, 1812156, 2123349, 2484926, 2907023, 3399566, + 3973545, + ], + }, + { + id: 16, + pageTitle: 'Promotions - Seasonal Sales', + status: 'Online', + eventCount: 13423, + users: 54230, + viewsPerUser: 7.8, + averageTime: '2m 45s', + conversions: [ + 241732, 256384, 289465, 321423, 345672, 378294, 398472, 420364, 436278, 460192, + 495374, 510283, 532489, 559672, 587312, 610982, 629385, 654732, 678925, 704362, + 725182, 749384, 772361, 798234, 819472, 846291, 872183, 894673, 919283, 945672, + ], + }, + { + id: 17, + pageTitle: 'Tutorials - How to Guides', + status: 'Offline', + eventCount: 4234, + users: 19342, + viewsPerUser: 5.2, + averageTime: '3m 05s', + conversions: [ + 12345, 14567, 16789, 18901, 21023, 23145, 25267, 27389, 29501, 31623, 33745, + 35867, 37989, 40101, 42223, 44345, 46467, 48589, 50701, 52823, 54945, 57067, + 59189, 61301, 63423, 65545, 67667, 69789, 71901, 74023, + ], + }, + { + id: 18, + pageTitle: 'Blog Posts - Tech Insights', + status: 'Online', + eventCount: 8567, + users: 34234, + viewsPerUser: 6.3, + averageTime: '2m 50s', + conversions: [ + 23456, 25678, 27890, 30102, 32324, 34546, 36768, 38980, 41202, 43424, 45646, + 47868, 50080, 52302, 54524, 56746, 58968, 61180, 63402, 65624, 67846, 70068, + 72290, 74502, 76724, 78946, 81168, 83380, 85602, 87824, + ], + }, + { + id: 19, + pageTitle: 'Events - Webinars', + status: 'Offline', + eventCount: 3456, + users: 19234, + viewsPerUser: 4.5, + averageTime: '3m 20s', + conversions: [ + 123456, 145678, 167890, 190012, 212324, 234546, 256768, 278980, 301202, 323424, + 345646, 367868, 390080, 412302, 434524, 456746, 478968, 501180, 523402, 545624, + 567846, 590068, 612290, 634502, 656724, 678946, 701168, 723380, 745602, 767824, + ], + }, + { + id: 20, + pageTitle: 'Support - Contact Us', + status: 'Online', + eventCount: 6734, + users: 27645, + viewsPerUser: 3.9, + averageTime: '2m 55s', + conversions: [ + 234567, 256789, 278901, 301023, 323245, 345467, 367689, 389801, 412023, 434245, + 456467, 478689, 500801, 523023, 545245, 567467, 589689, 611801, 634023, 656245, + 678467, 700689, 722801, 745023, 767245, 789467, 811689, 833801, 856023, 878245, + ], + }, + { + id: 21, + pageTitle: 'Case Studies - Success Stories', + status: 'Offline', + eventCount: 4567, + users: 19345, + viewsPerUser: 6.1, + averageTime: '3m 10s', + conversions: [ + 34567, 36789, 38901, 41023, 43145, 45267, 47389, 49501, 51623, 53745, 55867, + 57989, 60101, 62223, 64345, 66467, 68589, 70701, 72823, 74945, 77067, 79189, + 81301, 83423, 85545, 87667, 89789, 91901, 94023, 96145, + ], + }, + { + id: 22, + pageTitle: 'News - Industry Updates', + status: 'Online', + eventCount: 7856, + users: 34567, + viewsPerUser: 5.7, + averageTime: '3m 05s', + conversions: [ + 45678, 47890, 50102, 52324, 54546, 56768, 58980, 61202, 63424, 65646, 67868, + 70080, 72302, 74524, 76746, 78968, 81180, 83402, 85624, 87846, 90068, 92290, + 94502, 96724, 98946, 101168, 103380, 105602, 107824, 110046, + ], + }, + { + id: 23, + pageTitle: 'Forum - User Discussions', + status: 'Offline', + eventCount: 5678, + users: 23456, + viewsPerUser: 4.2, + averageTime: '2m 40s', + conversions: [ + 56789, 58901, 61023, 63145, 65267, 67389, 69501, 71623, 73745, 75867, 77989, + 80101, 82223, 84345, 86467, 88589, 90701, 92823, 94945, 97067, 99189, 101301, + 103423, 105545, 107667, 109789, 111901, 114023, 116145, 118267, + ], + }, + { + id: 24, + pageTitle: 'Documentation - API Reference', + status: 'Online', + eventCount: 6789, + users: 27689, + viewsPerUser: 5.0, + averageTime: '3m 00s', + conversions: [ + 67890, 70102, 72324, 74546, 76768, 78980, 81202, 83424, 85646, 87868, 90080, + 92302, 94524, 96746, 98968, 101180, 103402, 105624, 107846, 110068, 112290, + 114502, 116724, 118946, 121168, 123380, 125602, 127824, 130046, 132268, + ], + }, + { + id: 25, + pageTitle: 'Services - Consulting', + status: 'Offline', + eventCount: 4563, + users: 19240, + viewsPerUser: 6.4, + averageTime: '3m 25s', + conversions: [ + 345678, 367890, 390012, 412324, 434546, 456768, 478980, 501202, 523424, 545646, + 567868, 590080, 612302, 634524, 656746, 678968, 701180, 723402, 745624, 767846, + 790068, 812290, 834502, 856724, 878946, 901168, 923380, 945602, 967824, 990046, + ], + }, + { + id: 26, + pageTitle: 'Feedback - User Reviews', + status: 'Online', + eventCount: 8564, + users: 34240, + viewsPerUser: 6.2, + averageTime: '3m 15s', + conversions: [ + 123478, 145690, 167912, 190134, 212356, 234578, 256790, 279012, 301234, 323456, + 345678, 367890, 390012, 412234, 434456, 456678, 478890, 501012, 523234, 545456, + 567678, 589890, 612012, 634234, 656456, 678678, 700890, 723012, 745234, 767456, + ], + }, + { + id: 27, + pageTitle: 'Profiles - Team Members', + status: 'Offline', + eventCount: 5634, + users: 23423, + viewsPerUser: 5.5, + averageTime: '2m 45s', + conversions: [ + 345123, 367345, 389567, 411789, 434012, 456234, 478456, 500678, 522901, 545123, + 567345, 589567, 611789, 634012, 656234, 678456, 700678, 722901, 745123, 767345, + 789567, 811789, 834012, 856234, 878456, 900678, 922901, 945123, 967345, 989567, + ], + }, + { + id: 28, + pageTitle: 'Notifications - Alerts', + status: 'Online', + eventCount: 6745, + users: 27654, + viewsPerUser: 4.9, + averageTime: '3m 10s', + conversions: [ + 456123, 478345, 500567, 522789, 545012, 567234, 589456, 611678, 633901, 656123, + 678345, 700567, 722789, 745012, 767234, 789456, 811678, 833901, 856123, 878345, + 900567, 922789, 945012, 967234, 989456, 1011678, 1033901, 1056123, 1078345, + 1100567, + ], + }, + { + id: 29, + pageTitle: 'Dashboard - Metrics', + status: 'Offline', + eventCount: 5678, + users: 23456, + viewsPerUser: 6.3, + averageTime: '2m 50s', + conversions: [ + 567890, 590112, 612334, 634556, 656778, 678990, 701212, 723434, 745656, 767878, + 790100, 812322, 834544, 856766, 878988, 901210, 923432, 945654, 967876, 990098, + 1012320, 1034542, 1056764, 1078986, 1101208, 1123430, 1145652, 1167874, + 1190096, 1212318, + ], + }, + { + id: 30, + pageTitle: 'Reports - Monthly Analysis', + status: 'Online', + eventCount: 7890, + users: 34567, + viewsPerUser: 5.9, + averageTime: '3m 20s', + conversions: [ + 678901, 701123, 723345, 745567, 767789, 790011, 812233, 834455, 856677, 878899, + 901121, 923343, 945565, 967787, 990009, 1012231, 1034453, 1056675, 1078897, + 1101119, 1123341, 1145563, 1167785, 1190007, 1212229, 1234451, 1256673, + 1278895, 1301117, 1323339, + ], + }, + { + id: 31, + pageTitle: 'Training - Employee Onboarding', + status: 'Offline', + eventCount: 3456, + users: 19234, + viewsPerUser: 6.1, + averageTime: '3m 10s', + conversions: [ + 789012, 811234, 833456, 855678, 877890, 900112, 922334, 944556, 966778, 989000, + 1011222, 1033444, 1055666, 1077888, 1100110, 1122332, 1144554, 1166776, + 1188998, 1211220, 1233442, 1255664, 1277886, 1300108, 1322330, 1344552, + 1366774, 1388996, 1411218, 1433440, + ], + }, + { + id: 32, + pageTitle: 'Resources - Knowledge Base', + status: 'Online', + eventCount: 5678, + users: 23456, + viewsPerUser: 4.7, + averageTime: '3m 25s', + conversions: [ + 890123, 912345, 934567, 956789, 979012, 1001234, 1023456, 1045678, 1067890, + 1090123, 1112345, 1134567, 1156789, 1179012, 1201234, 1223456, 1245678, + 1267890, 1290123, 1312345, 1334567, 1356789, 1379012, 1401234, 1423456, + 1445678, 1467890, 1490123, 1512345, 1534567, + ], + }, + { + id: 33, + pageTitle: 'Settings - Privacy Controls', + status: 'Offline', + eventCount: 6789, + users: 27689, + viewsPerUser: 5.8, + averageTime: '3m 05s', + conversions: [ + 901234, 923456, 945678, 967890, 990112, 1012334, 1034556, 1056778, 1079000, + 1101222, 1123444, 1145666, 1167888, 1190110, 1212332, 1234554, 1256776, + 1278998, 1301220, 1323442, 1345664, 1367886, 1390108, 1412330, 1434552, + 1456774, 1478996, 1501218, 1523440, 1545662, + ], + }, + { + id: 34, + pageTitle: 'Integrations - Third-Party Services', + status: 'Online', + eventCount: 4567, + users: 19345, + viewsPerUser: 4.4, + averageTime: '2m 50s', + conversions: [ + 123457, 145679, 167891, 190113, 212335, 234557, 256779, 279001, 301223, 323445, + 345667, 367889, 390011, 412233, 434455, 456677, 478899, 501121, 523343, 545565, + 567787, 590009, 612231, 634453, 656675, 678897, 701119, 723341, 745563, 767785, + ], + }, + { + id: 35, + pageTitle: 'Account - Billing Information', + status: 'Offline', + eventCount: 7890, + users: 34567, + viewsPerUser: 5.4, + averageTime: '3m 00s', + conversions: [ + 234568, 256790, 278912, 301134, 323356, 345578, 367790, 390012, 412234, 434456, + 456678, 478890, 501112, 523334, 545556, 567778, 590000, 612222, 634444, 656666, + 678888, 701110, 723332, 745554, 767776, 789998, 812220, 834442, 856664, 878886, + ], }, ]; diff --git a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx index 62552af61e0f60..2d2e5ea3a915aa 100644 --- a/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx +++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx @@ -2,29 +2,61 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Chip from '@mui/material/Chip'; import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; -export function renderStatus( - params: GridCellParams< - { status: 'verified' | 'new' | 'blocked' | 'uncertain' }, - any, - any - >, -) { - const colors: { [index: string]: 'error' | 'success' | 'info' | 'default' } = { - new: 'info', - verified: 'success', - blocked: 'error', - uncertain: 'default', - }; +type SparkLineData = number[]; + +function getDaysInMonth(month: number, year: number) { + const date = new Date(year, month, 0); + const monthName = date.toLocaleDateString('en-US', { + month: 'short', + }); + const daysInMonth = date.getDate(); + const days = []; + let i = 1; + while (days.length < daysInMonth) { + days.push(`${monthName} ${i}`); + i += 1; + } + return days; +} + +function renderSparklineCell(params: GridCellParams) { + const data = getDaysInMonth(4, 2024); + const { value, colDef } = params; + + if (!value || value.length === 0) { + return null; + } return ( - +
+ +
); } + +function renderStatus(status: 'Online' | 'Offline') { + const colors: { [index: string]: 'success' | 'default' } = { + Online: 'success', + Offline: 'default', + }; + + return ; +} + export function renderAvatar( params: GridCellParams<{ name: string; color: string }, any, any>, ) { @@ -47,108 +79,558 @@ export function renderAvatar( } export const columns: GridColDef[] = [ - { field: 'id', headerName: 'ID', width: 90 }, - { field: 'pageTitle', headerName: 'Page Title', width: 200 }, - { field: 'eventCount', headerName: 'Event Count', width: 130 }, - { field: 'users', headerName: 'Users', width: 100 }, + { field: 'pageTitle', headerName: 'Page Title', flex: 1.5, minWidth: 200 }, + { + field: 'status', + headerName: 'Status', + flex: 0.5, + minWidth: 80, + renderCell: (params) => renderStatus(params.value as any), + }, + { + field: 'users', + headerName: 'Users', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 80, + }, + { + field: 'eventCount', + headerName: 'Event Count', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 100, + }, { field: 'viewsPerUser', headerName: 'Views per User', - width: 130, + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 120, + }, + { + field: 'averageTime', + headerName: 'Average Time', + headerAlign: 'right', + align: 'right', + flex: 1, + minWidth: 100, + }, + { + field: 'conversions', + headerName: 'Daily Conversions', + flex: 1, + minWidth: 150, + renderCell: renderSparklineCell, }, - { field: 'averageTime', headerName: 'Average Time', width: 130 }, - { field: 'conversions', headerName: 'Conversions', width: 120 }, ]; export const rows: GridRowsProp = [ { id: 1, pageTitle: 'Homepage Overview', - eventCount: 6345, - users: 192423, - viewsPerUser: 19.2, - averageTime: '2m 23s', - conversions: 400, + status: 'Online', + eventCount: 8345, + users: 212423, + viewsPerUser: 18.5, + averageTime: '2m 15s', + conversions: [ + 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, + 911787, 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, + 1670690, 1695142, 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, + 3296541, 3041524, 2599497, + ], }, { id: 2, pageTitle: 'Product Details - Gadgets', - eventCount: 4653, - users: 152240, - viewsPerUser: 10.2, - averageTime: '2m 23s', - conversions: 321, + status: 'Online', + eventCount: 5653, + users: 172240, + viewsPerUser: 9.7, + averageTime: '2m 30s', + conversions: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 557488, 1341471, 2044561, 2206438, + ], }, { id: 3, pageTitle: 'Checkout Process - Step 1', - eventCount: 2455, - users: 61240, - viewsPerUser: 16.4, - averageTime: '2m 23s', - conversions: 120, + status: 'Offline', + eventCount: 3455, + users: 58240, + viewsPerUser: 15.2, + averageTime: '2m 10s', + conversions: [ + 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, + 520278, 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, + 903675, 1049642, 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, + 1381571, + ], }, { id: 4, pageTitle: 'User Profile Dashboard', - eventCount: 123543, - users: 102240, - viewsPerUser: 3.74, - averageTime: '2m 23s', - conversions: 40, + status: 'Online', + eventCount: 112543, + users: 96240, + viewsPerUser: 4.5, + averageTime: '2m 40s', + conversions: [ + 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, + 649082, 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, + 1145309, 1195630, 1358925, 1373160, 1172679, 1340106, 1396974, 1623641, + 1687545, 1581634, 1550291, + ], }, { id: 5, pageTitle: 'Article Listing - Tech News', - eventCount: 4653, - users: 132240, - viewsPerUser: 2.24, - averageTime: '2m 23s', - conversions: 49, + status: 'Offline', + eventCount: 3653, + users: 142240, + viewsPerUser: 3.1, + averageTime: '2m 55s', + conversions: [ + 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, + 640744, 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, + 1014831, 1027570, 1189068, 1119099, 987244, 1197954, 1310721, 1480816, 1577547, + 1854053, 1791831, + ], }, { id: 6, pageTitle: 'FAQs - Customer Support', - eventCount: 123543, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + status: 'Online', + eventCount: 106543, + users: 15240, + viewsPerUser: 7.2, + averageTime: '2m 20s', + conversions: [ + 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, + 94734, 132289, 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, + 285557, 268555, 259482, 274019, 321648, 359801, 399502, 447249, 497403, + ], }, { id: 7, - pageTitle: 'About Us - Company Info', - eventCount: 4653, - users: 19240, - viewsPerUser: 1.02, - averageTime: '2m 23s', - conversions: 2, + pageTitle: 'Product Comparison - Laptops', + status: 'Offline', + eventCount: 7853, + users: 32240, + viewsPerUser: 6.5, + averageTime: '2m 50s', + conversions: [ + 93682, 107901, 144919, 151769, 170804, 183736, 201752, 219792, 227887, 295382, + 309600, 278050, 331964, 356826, 404896, 428090, 470245, 485582, 539056, 582112, + 594289, 671915, 649510, 574911, 713843, 754965, 853020, 916793, 960158, 984265, + ], }, { id: 8, - pageTitle: 'Contact Form Page', - eventCount: 123543, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + pageTitle: 'Shopping Cart - Electronics', + status: 'Online', + eventCount: 8563, + users: 48240, + viewsPerUser: 4.3, + averageTime: '3m 10s', + conversions: [ + 52394, 63357, 82800, 105466, 128729, 144472, 172148, 197919, 212302, 278153, + 290499, 249824, 317499, 333024, 388925, 410576, 462099, 488477, 533956, 572307, + 591019, 681506, 653332, 581234, 719038, 783496, 911609, 973328, 1056071, + 1112940, + ], }, { id: 9, - pageTitle: 'Services Overview - Web Development', - eventCount: 6345, - users: 19240, - viewsPerUser: 1.02, - averageTime: '2m 23s', - conversions: 2, + pageTitle: 'Payment Confirmation - Bank Transfer', + status: 'Offline', + eventCount: 4563, + users: 18240, + viewsPerUser: 2.7, + averageTime: '3m 25s', + conversions: [ + 15372, 16901, 25489, 30148, 40857, 51136, 64627, 75804, 89633, 100407, 114908, + 129957, 143568, 158509, 174822, 192488, 211512, 234702, 258812, 284328, 310431, + 338186, 366582, 396749, 428788, 462880, 499125, 537723, 578884, 622825, + ], }, { id: 10, - pageTitle: 'Pricing Page - Subscription Plans', - eventCount: 2455, - users: 12240, - viewsPerUser: 3.67, - averageTime: '2m 23s', - conversions: 80, + pageTitle: 'Product Reviews - Smartphones', + status: 'Online', + eventCount: 9863, + users: 28240, + viewsPerUser: 5.1, + averageTime: '3m 05s', + conversions: [ + 70211, 89234, 115676, 136021, 158744, 174682, 192890, 218073, 240926, 308190, + 317552, 279834, 334072, 354955, 422153, 443911, 501486, 538091, 593724, 642882, + 686539, 788615, 754813, 687955, 883645, 978347, 1142551, 1233074, 1278155, + 1356724, + ], + }, + { + id: 11, + pageTitle: 'Subscription Management - Services', + status: 'Offline', + eventCount: 6563, + users: 24240, + viewsPerUser: 4.8, + averageTime: '3m 15s', + conversions: [ + 49662, 58971, 78547, 93486, 108722, 124901, 146422, 167883, 189295, 230090, + 249837, 217828, 266494, 287537, 339586, 363299, 412855, 440900, 490111, 536729, + 580591, 671635, 655812, 576431, 741632, 819296, 971762, 1052605, 1099234, + 1173591, + ], + }, + { + id: 12, + pageTitle: 'Order Tracking - Shipments', + status: 'Online', + eventCount: 12353, + users: 38240, + viewsPerUser: 3.5, + averageTime: '3m 20s', + conversions: [ + 29589, 37965, 55800, 64672, 77995, 91126, 108203, 128900, 148232, 177159, + 193489, 164471, 210765, 229977, 273802, 299381, 341092, 371567, 413812, 457693, + 495920, 564785, 541022, 491680, 618096, 704926, 833365, 904313, 974622, + 1036567, + ], + }, + { + id: 13, + pageTitle: 'Customer Feedback - Surveys', + status: 'Offline', + eventCount: 5863, + users: 13240, + viewsPerUser: 2.3, + averageTime: '3m 30s', + conversions: [ + 8472, 9637, 14892, 19276, 23489, 28510, 33845, 39602, 45867, 52605, 59189, + 65731, 76021, 85579, 96876, 108515, 119572, 131826, 145328, 160192, 176528, + 196662, 217929, 239731, 262920, 289258, 315691, 342199, 370752, 402319, + ], + }, + { + id: 14, + pageTitle: 'Account Settings - Preferences', + status: 'Online', + eventCount: 7853, + users: 18240, + viewsPerUser: 3.2, + averageTime: '3m 15s', + conversions: [ + 15792, 16948, 22728, 25491, 28412, 31268, 34241, 37857, 42068, 46893, 51098, + 55734, 60780, 66421, 72680, 79584, 87233, 95711, 105285, 115814, 127509, + 140260, 154086, 169495, 186445, 205109, 225580, 247983, 272484, 299280, + ], + }, + { + id: 15, + pageTitle: 'Login Page - Authentication', + status: 'Offline', + eventCount: 9563, + users: 24240, + viewsPerUser: 2.5, + averageTime: '3m 35s', + conversions: [ + 25638, 28355, 42089, 53021, 66074, 80620, 97989, 118202, 142103, 166890, + 193869, 225467, 264089, 307721, 358059, 417835, 488732, 573924, 674878, 794657, + 938542, 1111291, 1313329, 1543835, 1812156, 2123349, 2484926, 2907023, 3399566, + 3973545, + ], + }, + { + id: 16, + pageTitle: 'Promotions - Seasonal Sales', + status: 'Online', + eventCount: 13423, + users: 54230, + viewsPerUser: 7.8, + averageTime: '2m 45s', + conversions: [ + 241732, 256384, 289465, 321423, 345672, 378294, 398472, 420364, 436278, 460192, + 495374, 510283, 532489, 559672, 587312, 610982, 629385, 654732, 678925, 704362, + 725182, 749384, 772361, 798234, 819472, 846291, 872183, 894673, 919283, 945672, + ], + }, + { + id: 17, + pageTitle: 'Tutorials - How to Guides', + status: 'Offline', + eventCount: 4234, + users: 19342, + viewsPerUser: 5.2, + averageTime: '3m 05s', + conversions: [ + 12345, 14567, 16789, 18901, 21023, 23145, 25267, 27389, 29501, 31623, 33745, + 35867, 37989, 40101, 42223, 44345, 46467, 48589, 50701, 52823, 54945, 57067, + 59189, 61301, 63423, 65545, 67667, 69789, 71901, 74023, + ], + }, + { + id: 18, + pageTitle: 'Blog Posts - Tech Insights', + status: 'Online', + eventCount: 8567, + users: 34234, + viewsPerUser: 6.3, + averageTime: '2m 50s', + conversions: [ + 23456, 25678, 27890, 30102, 32324, 34546, 36768, 38980, 41202, 43424, 45646, + 47868, 50080, 52302, 54524, 56746, 58968, 61180, 63402, 65624, 67846, 70068, + 72290, 74502, 76724, 78946, 81168, 83380, 85602, 87824, + ], + }, + { + id: 19, + pageTitle: 'Events - Webinars', + status: 'Offline', + eventCount: 3456, + users: 19234, + viewsPerUser: 4.5, + averageTime: '3m 20s', + conversions: [ + 123456, 145678, 167890, 190012, 212324, 234546, 256768, 278980, 301202, 323424, + 345646, 367868, 390080, 412302, 434524, 456746, 478968, 501180, 523402, 545624, + 567846, 590068, 612290, 634502, 656724, 678946, 701168, 723380, 745602, 767824, + ], + }, + { + id: 20, + pageTitle: 'Support - Contact Us', + status: 'Online', + eventCount: 6734, + users: 27645, + viewsPerUser: 3.9, + averageTime: '2m 55s', + conversions: [ + 234567, 256789, 278901, 301023, 323245, 345467, 367689, 389801, 412023, 434245, + 456467, 478689, 500801, 523023, 545245, 567467, 589689, 611801, 634023, 656245, + 678467, 700689, 722801, 745023, 767245, 789467, 811689, 833801, 856023, 878245, + ], + }, + { + id: 21, + pageTitle: 'Case Studies - Success Stories', + status: 'Offline', + eventCount: 4567, + users: 19345, + viewsPerUser: 6.1, + averageTime: '3m 10s', + conversions: [ + 34567, 36789, 38901, 41023, 43145, 45267, 47389, 49501, 51623, 53745, 55867, + 57989, 60101, 62223, 64345, 66467, 68589, 70701, 72823, 74945, 77067, 79189, + 81301, 83423, 85545, 87667, 89789, 91901, 94023, 96145, + ], + }, + { + id: 22, + pageTitle: 'News - Industry Updates', + status: 'Online', + eventCount: 7856, + users: 34567, + viewsPerUser: 5.7, + averageTime: '3m 05s', + conversions: [ + 45678, 47890, 50102, 52324, 54546, 56768, 58980, 61202, 63424, 65646, 67868, + 70080, 72302, 74524, 76746, 78968, 81180, 83402, 85624, 87846, 90068, 92290, + 94502, 96724, 98946, 101168, 103380, 105602, 107824, 110046, + ], + }, + { + id: 23, + pageTitle: 'Forum - User Discussions', + status: 'Offline', + eventCount: 5678, + users: 23456, + viewsPerUser: 4.2, + averageTime: '2m 40s', + conversions: [ + 56789, 58901, 61023, 63145, 65267, 67389, 69501, 71623, 73745, 75867, 77989, + 80101, 82223, 84345, 86467, 88589, 90701, 92823, 94945, 97067, 99189, 101301, + 103423, 105545, 107667, 109789, 111901, 114023, 116145, 118267, + ], + }, + { + id: 24, + pageTitle: 'Documentation - API Reference', + status: 'Online', + eventCount: 6789, + users: 27689, + viewsPerUser: 5.0, + averageTime: '3m 00s', + conversions: [ + 67890, 70102, 72324, 74546, 76768, 78980, 81202, 83424, 85646, 87868, 90080, + 92302, 94524, 96746, 98968, 101180, 103402, 105624, 107846, 110068, 112290, + 114502, 116724, 118946, 121168, 123380, 125602, 127824, 130046, 132268, + ], + }, + { + id: 25, + pageTitle: 'Services - Consulting', + status: 'Offline', + eventCount: 4563, + users: 19240, + viewsPerUser: 6.4, + averageTime: '3m 25s', + conversions: [ + 345678, 367890, 390012, 412324, 434546, 456768, 478980, 501202, 523424, 545646, + 567868, 590080, 612302, 634524, 656746, 678968, 701180, 723402, 745624, 767846, + 790068, 812290, 834502, 856724, 878946, 901168, 923380, 945602, 967824, 990046, + ], + }, + { + id: 26, + pageTitle: 'Feedback - User Reviews', + status: 'Online', + eventCount: 8564, + users: 34240, + viewsPerUser: 6.2, + averageTime: '3m 15s', + conversions: [ + 123478, 145690, 167912, 190134, 212356, 234578, 256790, 279012, 301234, 323456, + 345678, 367890, 390012, 412234, 434456, 456678, 478890, 501012, 523234, 545456, + 567678, 589890, 612012, 634234, 656456, 678678, 700890, 723012, 745234, 767456, + ], + }, + { + id: 27, + pageTitle: 'Profiles - Team Members', + status: 'Offline', + eventCount: 5634, + users: 23423, + viewsPerUser: 5.5, + averageTime: '2m 45s', + conversions: [ + 345123, 367345, 389567, 411789, 434012, 456234, 478456, 500678, 522901, 545123, + 567345, 589567, 611789, 634012, 656234, 678456, 700678, 722901, 745123, 767345, + 789567, 811789, 834012, 856234, 878456, 900678, 922901, 945123, 967345, 989567, + ], + }, + { + id: 28, + pageTitle: 'Notifications - Alerts', + status: 'Online', + eventCount: 6745, + users: 27654, + viewsPerUser: 4.9, + averageTime: '3m 10s', + conversions: [ + 456123, 478345, 500567, 522789, 545012, 567234, 589456, 611678, 633901, 656123, + 678345, 700567, 722789, 745012, 767234, 789456, 811678, 833901, 856123, 878345, + 900567, 922789, 945012, 967234, 989456, 1011678, 1033901, 1056123, 1078345, + 1100567, + ], + }, + { + id: 29, + pageTitle: 'Dashboard - Metrics', + status: 'Offline', + eventCount: 5678, + users: 23456, + viewsPerUser: 6.3, + averageTime: '2m 50s', + conversions: [ + 567890, 590112, 612334, 634556, 656778, 678990, 701212, 723434, 745656, 767878, + 790100, 812322, 834544, 856766, 878988, 901210, 923432, 945654, 967876, 990098, + 1012320, 1034542, 1056764, 1078986, 1101208, 1123430, 1145652, 1167874, + 1190096, 1212318, + ], + }, + { + id: 30, + pageTitle: 'Reports - Monthly Analysis', + status: 'Online', + eventCount: 7890, + users: 34567, + viewsPerUser: 5.9, + averageTime: '3m 20s', + conversions: [ + 678901, 701123, 723345, 745567, 767789, 790011, 812233, 834455, 856677, 878899, + 901121, 923343, 945565, 967787, 990009, 1012231, 1034453, 1056675, 1078897, + 1101119, 1123341, 1145563, 1167785, 1190007, 1212229, 1234451, 1256673, + 1278895, 1301117, 1323339, + ], + }, + { + id: 31, + pageTitle: 'Training - Employee Onboarding', + status: 'Offline', + eventCount: 3456, + users: 19234, + viewsPerUser: 6.1, + averageTime: '3m 10s', + conversions: [ + 789012, 811234, 833456, 855678, 877890, 900112, 922334, 944556, 966778, 989000, + 1011222, 1033444, 1055666, 1077888, 1100110, 1122332, 1144554, 1166776, + 1188998, 1211220, 1233442, 1255664, 1277886, 1300108, 1322330, 1344552, + 1366774, 1388996, 1411218, 1433440, + ], + }, + { + id: 32, + pageTitle: 'Resources - Knowledge Base', + status: 'Online', + eventCount: 5678, + users: 23456, + viewsPerUser: 4.7, + averageTime: '3m 25s', + conversions: [ + 890123, 912345, 934567, 956789, 979012, 1001234, 1023456, 1045678, 1067890, + 1090123, 1112345, 1134567, 1156789, 1179012, 1201234, 1223456, 1245678, + 1267890, 1290123, 1312345, 1334567, 1356789, 1379012, 1401234, 1423456, + 1445678, 1467890, 1490123, 1512345, 1534567, + ], + }, + { + id: 33, + pageTitle: 'Settings - Privacy Controls', + status: 'Offline', + eventCount: 6789, + users: 27689, + viewsPerUser: 5.8, + averageTime: '3m 05s', + conversions: [ + 901234, 923456, 945678, 967890, 990112, 1012334, 1034556, 1056778, 1079000, + 1101222, 1123444, 1145666, 1167888, 1190110, 1212332, 1234554, 1256776, + 1278998, 1301220, 1323442, 1345664, 1367886, 1390108, 1412330, 1434552, + 1456774, 1478996, 1501218, 1523440, 1545662, + ], + }, + { + id: 34, + pageTitle: 'Integrations - Third-Party Services', + status: 'Online', + eventCount: 4567, + users: 19345, + viewsPerUser: 4.4, + averageTime: '2m 50s', + conversions: [ + 123457, 145679, 167891, 190113, 212335, 234557, 256779, 279001, 301223, 323445, + 345667, 367889, 390011, 412233, 434455, 456677, 478899, 501121, 523343, 545565, + 567787, 590009, 612231, 634453, 656675, 678897, 701119, 723341, 745563, 767785, + ], + }, + { + id: 35, + pageTitle: 'Account - Billing Information', + status: 'Offline', + eventCount: 7890, + users: 34567, + viewsPerUser: 5.4, + averageTime: '3m 00s', + conversions: [ + 234568, 256790, 278912, 301134, 323356, 345578, 367790, 390012, 412234, 434456, + 456678, 478890, 501112, 523334, 545556, 567778, 590000, 612222, 634444, 656666, + 678888, 701110, 723332, 745554, 767776, 789998, 812220, 834442, 856664, 878886, + ], }, ]; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js new file mode 100644 index 00000000000000..1b29fd59cf8a43 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.js @@ -0,0 +1,353 @@ +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import { tabClasses } from '@mui/material/Tab'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const buttonsCustomizations = { + 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: '2rem', // 32px + padding: '0 0.5rem', + }, + }, + { + 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 2px 0 ${gray[600]}, inset 0 -2px 0 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 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', + border: `1px solid ${gray[100]}`, + '&: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: '2rem', + height: '2rem', + 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], + }, + }), + }), + }, + }, + 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', + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts new file mode 100644 index 00000000000000..6c71237f3c3262 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/buttons.ts @@ -0,0 +1,354 @@ +import { Components } from '@mui/material'; +import { alpha, Theme } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; +import { toggleButtonClasses } from '@mui/material/ToggleButton'; +import { tabClasses } from '@mui/material/Tab'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const buttonsCustomizations: 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: '2rem', // 32px + padding: '0 0.5rem', + }, + }, + { + 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 2px 0 ${gray[600]}, inset 0 -2px 0 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 2px 0 hsl(220, 0%, 100%), inset 0 -2px 0 hsl(220, 30%, 90%)', + border: `1px solid ${gray[100]}`, + '&: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: '2rem', + height: '2rem', + 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], + }, + }), + }), + }, + }, + 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', + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js new file mode 100644 index 00000000000000..25cb67116e8685 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js @@ -0,0 +1,75 @@ +import { axisClasses, legendClasses, chartsGridClasses } from '@mui/x-charts'; + +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const chartsCustomizations = { + MuiChartsAxis: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${axisClasses.line}`]: { + stroke: gray[300], + }, + [`& .${axisClasses.tick}`]: { stroke: gray[300] }, + [`& .${axisClasses.tickLabel}`]: { + fill: gray[500], + fontWeight: 500, + }, + ...theme.applyStyles('dark', { + [`& .${axisClasses.line}`]: { + stroke: gray[700], + }, + [`& .${axisClasses.tick}`]: { stroke: gray[700] }, + [`& .${axisClasses.tickLabel}`]: { + fill: gray[300], + fontWeight: 500, + }, + }), + }), + }, + }, + MuiChartsTooltip: { + styleOverrides: { + mark: ({ theme }) => ({ + ry: 6, + boxShadow: 'none', + border: `1px solid ${theme.palette.divider}`, + }), + table: ({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadius, + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: gray[900], + }), + }), + }, + }, + MuiChartsLegend: { + styleOverrides: { + root: { + [`& .${legendClasses.mark}`]: { + ry: 6, + }, + }, + }, + }, + MuiChartsGrid: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${chartsGridClasses.line}`]: { + stroke: gray[200], + strokeDasharray: '4 2', + strokeWidth: 0.8, + }, + ...theme.applyStyles('dark', { + [`& .${chartsGridClasses.line}`]: { + stroke: gray[700], + strokeDasharray: '4 2', + strokeWidth: 0.8, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts new file mode 100644 index 00000000000000..39ae3db5dfc74c --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts @@ -0,0 +1,76 @@ +import { Theme } from '@mui/material/styles'; +import { axisClasses, legendClasses, chartsGridClasses } from '@mui/x-charts'; +import type { ChartsComponents } from '@mui/x-charts/themeAugmentation'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const chartsCustomizations: ChartsComponents = { + MuiChartsAxis: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${axisClasses.line}`]: { + stroke: gray[300], + }, + [`& .${axisClasses.tick}`]: { stroke: gray[300] }, + [`& .${axisClasses.tickLabel}`]: { + fill: gray[500], + fontWeight: 500, + }, + ...theme.applyStyles('dark', { + [`& .${axisClasses.line}`]: { + stroke: gray[700], + }, + [`& .${axisClasses.tick}`]: { stroke: gray[700] }, + [`& .${axisClasses.tickLabel}`]: { + fill: gray[300], + fontWeight: 500, + }, + }), + }), + }, + }, + MuiChartsTooltip: { + styleOverrides: { + mark: ({ theme }) => ({ + ry: 6, + boxShadow: 'none', + border: `1px solid ${theme.palette.divider}`, + }), + table: ({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadius, + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: gray[900], + }), + }), + }, + }, + MuiChartsLegend: { + styleOverrides: { + root: { + [`& .${legendClasses.mark}`]: { + ry: 6, + }, + }, + }, + }, + MuiChartsGrid: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${chartsGridClasses.line}`]: { + stroke: gray[200], + strokeDasharray: '4 2', + strokeWidth: 0.8, + }, + ...theme.applyStyles('dark', { + [`& .${chartsGridClasses.line}`]: { + stroke: gray[700], + strokeDasharray: '4 2', + strokeWidth: 0.8, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js new file mode 100644 index 00000000000000..d911d62a1b9fa1 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js @@ -0,0 +1,130 @@ +import { paperClasses } from '@mui/material'; +import { alpha } from '@mui/material/styles'; + +import { menuItemClasses } from '@mui/material/MenuItem'; +import { listItemIconClasses } from '@mui/material/ListItemIcon'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { checkboxClasses } from '@mui/material/Checkbox'; +import { listClasses } from '@mui/material/List'; +import { gridClasses } from '@mui/x-data-grid'; +import { tablePaginationClasses } from '@mui/material/TablePagination'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataGridCustomizations = { + MuiDataGrid: { + styleOverrides: { + root: ({ theme }) => ({ + '--DataGrid-overlayHeight': '300px', + overflow: 'clip', + borderColor: theme.palette.divider, + backgroundColor: theme.palette.background.default, + [`& .${gridClasses.columnHeader}`]: { + backgroundColor: theme.palette.background.paper, + }, + [`& .${gridClasses.footerContainer}`]: { + backgroundColor: theme.palette.background.paper, + }, + [`& .${checkboxClasses.root}`]: { + padding: theme.spacing(0.5), + '& > svg': { + fontSize: '1rem', + }, + }, + [`& .${tablePaginationClasses.root}`]: { + marginRight: theme.spacing(1), + '& .MuiIconButton-root': { + maxHeight: 32, + maxWidth: 32, + '& > svg': { + fontSize: '1rem', + }, + }, + }, + }), + cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }), + menu: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundImage: 'none', + [`& .${paperClasses.root}`]: { + border: `1px solid ${theme.palette.divider}`, + }, + [`& .${menuItemClasses.root}`]: { + margin: '0 4px', + }, + [`& .${listItemIconClasses.root}`]: { + marginRight: 0, + }, + [`& .${listClasses.root}`]: { + paddingLeft: 0, + paddingRight: 0, + }, + }), + row: ({ theme }) => ({ + '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + '&.Mui-selected': { + background: theme.palette.action.selected, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + }, + }), + iconButtonContainer: ({ theme }) => ({ + [`& .${iconButtonClasses.root}`]: { + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[800], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }), + menuIconButton: ({ theme }) => ({ + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[800], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }), + filterForm: ({ theme }) => ({ + gap: theme.spacing(1), + alignItems: 'flex-end', + }), + columnsManagementHeader: ({ theme }) => ({ + paddingRight: theme.spacing(3), + paddingLeft: theme.spacing(3), + }), + columnHeaderTitleContainer: { + flexGrow: 1, + justifyContent: 'space-between', + }, + columnHeaderDraggableContainer: { paddingRight: 2 }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts new file mode 100644 index 00000000000000..728df15ddedd21 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts @@ -0,0 +1,133 @@ +import { paperClasses } from '@mui/material'; +import { alpha, Theme } from '@mui/material/styles'; +import type { DataGridProComponents } from '@mui/x-data-grid-pro/themeAugmentation'; +import type { DataGridComponents } from '@mui/x-data-grid/themeAugmentation'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { listItemIconClasses } from '@mui/material/ListItemIcon'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { checkboxClasses } from '@mui/material/Checkbox'; +import { listClasses } from '@mui/material/List'; +import { gridClasses } from '@mui/x-data-grid'; +import { tablePaginationClasses } from '@mui/material/TablePagination'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const dataGridCustomizations: DataGridProComponents & DataGridComponents = { + MuiDataGrid: { + styleOverrides: { + root: ({ theme }) => ({ + '--DataGrid-overlayHeight': '300px', + overflow: 'clip', + borderColor: theme.palette.divider, + backgroundColor: theme.palette.background.default, + [`& .${gridClasses.columnHeader}`]: { + backgroundColor: theme.palette.background.paper, + }, + [`& .${gridClasses.footerContainer}`]: { + backgroundColor: theme.palette.background.paper, + }, + [`& .${checkboxClasses.root}`]: { + padding: theme.spacing(0.5), + '& > svg': { + fontSize: '1rem', + }, + }, + [`& .${tablePaginationClasses.root}`]: { + marginRight: theme.spacing(1), + '& .MuiIconButton-root': { + maxHeight: 32, + maxWidth: 32, + '& > svg': { + fontSize: '1rem', + }, + }, + }, + }), + cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }), + menu: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundImage: 'none', + [`& .${paperClasses.root}`]: { + border: `1px solid ${theme.palette.divider}`, + }, + + [`& .${menuItemClasses.root}`]: { + margin: '0 4px', + }, + [`& .${listItemIconClasses.root}`]: { + marginRight: 0, + }, + [`& .${listClasses.root}`]: { + paddingLeft: 0, + paddingRight: 0, + }, + }), + + row: ({ theme }) => ({ + '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` }, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + '&.Mui-selected': { + background: theme.palette.action.selected, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + }, + }), + iconButtonContainer: ({ theme }) => ({ + [`& .${iconButtonClasses.root}`]: { + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[800], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }, + }), + menuIconButton: ({ theme }) => ({ + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: gray[100], + }, + '&:active': { + backgroundColor: gray[200], + }, + ...theme.applyStyles('dark', { + color: gray[50], + '&:hover': { + backgroundColor: gray[800], + }, + '&:active': { + backgroundColor: gray[900], + }, + }), + }), + filterForm: ({ theme }) => ({ + gap: theme.spacing(1), + alignItems: 'flex-end', + }), + columnsManagementHeader: ({ theme }) => ({ + paddingRight: theme.spacing(3), + paddingLeft: theme.spacing(3), + }), + columnHeaderTitleContainer: { + flexGrow: 1, + justifyContent: 'space-between', + }, + columnHeaderDraggableContainer: { paddingRight: 2 }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js new file mode 100644 index 00000000000000..3f2ffe1cd625fe --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js @@ -0,0 +1,176 @@ +import { alpha } from '@mui/material/styles'; + +import { + pickersYearClasses, + pickersMonthClasses, + pickersDayClasses, +} from '@mui/x-date-pickers'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const datePickersCustomizations = { + MuiPickersPopper: { + styleOverrides: { + paper: ({ theme }) => ({ + marginTop: 4, + 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', + [`& .${menuItemClasses.root}`]: { + borderRadius: 6, + margin: '0 6px', + }, + ...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', + }), + }), + }, + }, + MuiPickersArrowSwitcher: { + styleOverrides: { + spacer: { width: 16 }, + button: ({ theme }) => ({ + backgroundColor: 'transparent', + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiPickersCalendarHeader: { + styleOverrides: { + switchViewButton: { + padding: 0, + border: 'none', + }, + }, + }, + MuiPickersMonth: { + styleOverrides: { + monthButton: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersMonthClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersMonthClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, + MuiPickersYear: { + styleOverrides: { + yearButton: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + height: 'fit-content', + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersYearClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersYearClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, + MuiPickersDay: { + styleOverrides: { + root: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersDayClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersDayClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts new file mode 100644 index 00000000000000..34e3f52aa0ebe1 --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts @@ -0,0 +1,173 @@ +import { alpha, Theme } from '@mui/material/styles'; +import type { PickersProComponents } from '@mui/x-date-pickers-pro/themeAugmentation'; +import type { PickerComponents } from '@mui/x-date-pickers/themeAugmentation'; +import { pickersYearClasses, pickersMonthClasses, pickersDayClasses } from '@mui/x-date-pickers'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const datePickersCustomizations: PickersProComponents & PickerComponents = { + MuiPickersPopper: { + styleOverrides: { + paper: ({ theme }) => ({ + marginTop: 4, + 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', + [`& .${menuItemClasses.root}`]: { + borderRadius: 6, + margin: '0 6px', + }, + ...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', + }), + }), + }, + }, + MuiPickersArrowSwitcher: { + styleOverrides: { + spacer: { width: 16 }, + button: ({ theme }) => ({ + backgroundColor: 'transparent', + color: theme.palette.grey[500], + ...theme.applyStyles('dark', { + color: theme.palette.grey[400], + }), + }), + }, + }, + MuiPickersCalendarHeader: { + styleOverrides: { + switchViewButton: { + padding: 0, + border: 'none', + }, + }, + }, + MuiPickersMonth: { + styleOverrides: { + monthButton: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersMonthClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersMonthClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, + MuiPickersYear: { + styleOverrides: { + yearButton: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + height: 'fit-content', + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersYearClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersYearClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, + MuiPickersDay: { + styleOverrides: { + root: ({ theme }) => ({ + fontSize: theme.typography.body1.fontSize, + color: theme.palette.grey[600], + padding: theme.spacing(0.5), + borderRadius: theme.shape.borderRadius, + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersDayClasses.selected}`]: { + backgroundColor: gray[700], + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[700] }, + }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, + [`&.${pickersDayClasses.selected}`]: { + color: theme.palette.common.black, + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: gray[300], + }, + '&:focus': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + backgroundColor: 'transparent', + [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[300] }, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js new file mode 100644 index 00000000000000..7721f6a88f43fb --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js @@ -0,0 +1,9 @@ +export { buttonsCustomizations } from './buttons'; +export { chartsCustomizations } from './charts'; +export { dataGridCustomizations } from './dataGrid'; +export { datePickersCustomizations } from './datePickers'; +export { treeViewCustomizations } from './treeView'; +export { inputsCustomizations } from './inputs'; +export { layoutComponentsCustomizations } from './layoutComponents'; +export { menuComponentsCustomizations } from './menus'; +export { otherComponentsCustomizations } from './others'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts new file mode 100644 index 00000000000000..7721f6a88f43fb --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts @@ -0,0 +1,9 @@ +export { buttonsCustomizations } from './buttons'; +export { chartsCustomizations } from './charts'; +export { dataGridCustomizations } from './dataGrid'; +export { datePickersCustomizations } from './datePickers'; +export { treeViewCustomizations } from './treeView'; +export { inputsCustomizations } from './inputs'; +export { layoutComponentsCustomizations } from './layoutComponents'; +export { menuComponentsCustomizations } from './menus'; +export { otherComponentsCustomizations } from './others'; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js new file mode 100644 index 00000000000000..84ba7452c0759a --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js @@ -0,0 +1,143 @@ +import * as React from 'react'; +import { inputBaseClasses } from '@mui/material'; +import { alpha } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +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 = { + 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: ({ theme }) => ({ + border: 'none', + borderRadius: theme.shape.borderRadius, + [`&.${inputBaseClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + }), + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + variants: [ + { + props: { variant: 'outlined' }, + style: { transform: 'scale(0.75)', position: 'unset' }, + }, + ], + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + 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: '2rem', + padding: '0 0.5rem', + }, + }, + { + 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], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx new file mode 100644 index 00000000000000..3000a8e77d75dc --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx @@ -0,0 +1,143 @@ +import * as React from 'react'; +import { Components, inputBaseClasses } from '@mui/material'; +import { alpha, Theme } from '@mui/material/styles'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +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 = { + 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: ({ theme }) => ({ + border: 'none', + borderRadius: theme.shape.borderRadius, + [`&.${inputBaseClasses.focused}`]: { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + borderColor: brand[400], + }, + }), + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + variants: [ + { + props: { variant: 'outlined' }, + style: { transform: 'scale(0.75)', position: 'unset' }, + }, + ], + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + 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: '2rem', + padding: '0 0.5rem', + }, + }, + { + 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], + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js new file mode 100644 index 00000000000000..1e3a4cc274c6ef --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.js @@ -0,0 +1,46 @@ +import { alpha } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const layoutComponentsCustomizations = { + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts new file mode 100644 index 00000000000000..b26c1e07fcd3ea --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/layoutComponents.ts @@ -0,0 +1,47 @@ +import { Components } from '@mui/material'; +import { alpha, Theme } from '@mui/material/styles'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const layoutComponentsCustomizations: Components = { + MuiCard: { + styleOverrides: { + root: ({ theme }) => { + return { + padding: 16, + transition: 'all 100ms ease', + backgroundColor: gray[50], + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `1px solid ${theme.palette.divider}`, + boxShadow: 'none', + background: 'hsl(0, 0%, 100%)', + ...theme.applyStyles('dark', { + background: alpha(gray[900], 0.4), + }), + }, + }, + ], + }; + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: 0, + '&:last-child': { paddingBottom: 0 }, + }, + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js new file mode 100644 index 00000000000000..b41437644f63ad --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.js @@ -0,0 +1,206 @@ +import * as React from 'react'; + +import { alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { listItemClasses } from '@mui/material/ListItem'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const menuComponentsCustomizations = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + [`&.${listItemClasses.selected}`]: { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + [`&.${listItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + [`&.${listItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + 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', + }, + }), + variants: [ + { + props: { + variant: 'standard', + }, + style: { + paddingLeft: 12, + }, + }, + ], + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx new file mode 100644 index 00000000000000..09bfbacb5a2e6f --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/menus.tsx @@ -0,0 +1,207 @@ +import * as React from 'react'; +import { Components, SvgIconProps } from '@mui/material'; +import { Theme, alpha } from '@mui/material/styles'; +import { svgIconClasses } from '@mui/material/SvgIcon'; +import { typographyClasses } from '@mui/material/Typography'; +import { buttonBaseClasses } from '@mui/material/ButtonBase'; +import { dividerClasses } from '@mui/material/Divider'; +import { listItemClasses } from '@mui/material/ListItem'; +import { menuItemClasses } from '@mui/material/MenuItem'; +import { selectClasses } from '@mui/material/Select'; +import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; +import { gray } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const menuComponentsCustomizations: Components = { + MuiList: { + styleOverrides: { + root: { + padding: '8px', + display: 'flex', + flexDirection: 'column', + gap: 0, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: ({ theme }) => ({ + [`& .${svgIconClasses.root}`]: { + width: '1rem', + height: '1rem', + color: theme.palette.text.secondary, + }, + [`& .${typographyClasses.root}`]: { + fontWeight: 500, + }, + [`& .${buttonBaseClasses.root}`]: { + display: 'flex', + gap: 8, + padding: '2px 8px', + borderRadius: theme.shape.borderRadius, + opacity: 0.7, + [`&.${listItemClasses.selected}`]: { + opacity: 1, + backgroundColor: alpha(theme.palette.action.selected, 0.3), + [`& .${svgIconClasses.root}`]: { + color: theme.palette.text.primary, + }, + [`&.${listItemClasses.focusVisible}`]: { + backgroundColor: alpha(theme.palette.action.selected, 0.3), + }, + '&:hover': { + backgroundColor: alpha(theme.palette.action.selected, 0.5), + }, + }, + [`&.${listItemClasses.focusVisible}`]: { + backgroundColor: 'transparent', + }, + }, + }), + }, + }, + MuiListItemText: { + styleOverrides: { + primary: ({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + fontWeight: 500, + lineHeight: theme.typography.body2.lineHeight, + }), + secondary: ({ theme }) => ({ + fontSize: theme.typography.caption.fontSize, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListSubheader: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: 'transparent', + padding: '4px 8px', + fontSize: theme.typography.caption.fontSize, + fontWeight: 500, + lineHeight: theme.typography.caption.lineHeight, + }), + }, + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: 0, + }, + }, + }, + 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', + }, + }), + variants: [ + { + props: { + variant: 'standard', + }, + style: { + paddingLeft: 12, + }, + }, + ], + }), + select: ({ theme }) => ({ + display: 'flex', + alignItems: 'center', + ...theme.applyStyles('dark', { + display: 'flex', + alignItems: 'center', + '&:focus-visible': { + backgroundColor: gray[900], + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js new file mode 100644 index 00000000000000..11a563dbc75a2c --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.js @@ -0,0 +1,197 @@ +import { alpha } from '@mui/material/styles'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, brand, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const otherComponentsCustomizations = { + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&: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], + }), + }), + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + padding: '0 4px', + 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, + }, + }, + }, + ], + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, + 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', + }, + }, + ], + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts new file mode 100644 index 00000000000000..a1c6c6c5947f4a --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/others.ts @@ -0,0 +1,198 @@ +import { Components } from '@mui/material'; +import { Theme, alpha } from '@mui/material/styles'; +import { chipClasses } from '@mui/material/Chip'; +import { iconButtonClasses } from '@mui/material/IconButton'; +import { gray, red, brand, green } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const otherComponentsCustomizations: Components = { + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + color: brand[600], + fontWeight: 500, + position: 'relative', + textDecoration: 'none', + '&::before': { + content: '""', + position: 'absolute', + width: 0, + height: '1px', + bottom: 0, + left: 0, + backgroundColor: brand[200], + opacity: 0.7, + transition: 'width 0.3s ease, opacity 0.3s ease', + }, + '&: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], + }), + }), + }, + }, + MuiChip: { + defaultProps: { + size: 'small', + }, + styleOverrides: { + root: ({ theme }) => ({ + border: '1px solid', + borderRadius: '999px', + [`& .${chipClasses.label}`]: { + padding: '0 4px', + 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, + }, + }, + }, + ], + }), + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: ({ theme }) => ({ + height: 8, + borderRadius: 8, + backgroundColor: gray[200], + ...theme.applyStyles('dark', { + backgroundColor: gray[800], + }), + }), + }, + }, + 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', + }, + }, + ], + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js new file mode 100644 index 00000000000000..4e5ee5684c46fd --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js @@ -0,0 +1,61 @@ +import { alpha } from '@mui/material/styles'; + +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const treeViewCustomizations = { + MuiTreeItem2: { + styleOverrides: { + root: ({ theme }) => ({ + position: 'relative', + boxSizing: 'border-box', + padding: theme.spacing(0, 1), + '& .groupTransition': { + marginLeft: theme.spacing(2), + padding: theme.spacing(0), + borderLeft: '1px solid', + borderColor: theme.palette.divider, + }, + '&:focus-visible .focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + '&:hover': { + backgroundColor: alpha(gray[300], 0.2), + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }), + content: ({ theme }) => ({ + marginTop: theme.spacing(1), + padding: theme.spacing(0.5, 1), + overflow: 'clip', + '&:hover': { + backgroundColor: alpha(gray[300], 0.2), + }, + '&.selected': { + backgroundColor: alpha(gray[300], 0.4), + '&:hover': { + backgroundColor: alpha(gray[300], 0.6), + }, + }, + ...theme.applyStyles('dark', { + '&:hover': { + backgroundColor: alpha(gray[500], 0.2), + }, + '&:focus-visible': { + '&:hover': { + backgroundColor: alpha(gray[500], 0.2), + }, + }, + '&.selected': { + backgroundColor: alpha(gray[500], 0.4), + '&:hover': { + backgroundColor: alpha(gray[500], 0.6), + }, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts new file mode 100644 index 00000000000000..347b4170bf5d9f --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts @@ -0,0 +1,62 @@ +import { alpha, Theme } from '@mui/material/styles'; +import type { TreeViewComponents } from '@mui/x-tree-view/themeAugmentation'; +import { gray, brand } from '../themePrimitives'; + +/* eslint-disable import/prefer-default-export */ +export const treeViewCustomizations: TreeViewComponents = { + MuiTreeItem2: { + styleOverrides: { + root: ({ theme }) => ({ + position: 'relative', + boxSizing: 'border-box', + padding: theme.spacing(0, 1), + '& .groupTransition': { + marginLeft: theme.spacing(2), + padding: theme.spacing(0), + borderLeft: '1px solid', + borderColor: theme.palette.divider, + }, + '&:focus-visible .focused': { + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + '&:hover': { + backgroundColor: alpha(gray[300], 0.2), + outline: `3px solid ${alpha(brand[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + }), + content: ({ theme }) => ({ + marginTop: theme.spacing(1), + padding: theme.spacing(0.5, 1), + overflow: 'clip', + '&:hover': { + backgroundColor: alpha(gray[300], 0.2), + }, + + '&.selected': { + backgroundColor: alpha(gray[300], 0.4), + '&:hover': { + backgroundColor: alpha(gray[300], 0.6), + }, + }, + ...theme.applyStyles('dark', { + '&:hover': { + backgroundColor: alpha(gray[500], 0.2), + }, + '&:focus-visible': { + '&:hover': { + backgroundColor: alpha(gray[500], 0.2), + }, + }, + '&.selected': { + backgroundColor: alpha(gray[500], 0.4), + '&:hover': { + backgroundColor: alpha(gray[500], 0.6), + }, + }, + }), + }), + }, + }, +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js new file mode 100644 index 00000000000000..7c8344864b413d --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js @@ -0,0 +1,29 @@ +import { getDesignTokens } from './themePrimitives'; +import { + buttonsCustomizations, + chartsCustomizations, + dataGridCustomizations, + datePickersCustomizations, + treeViewCustomizations, + inputsCustomizations, + layoutComponentsCustomizations, + menuComponentsCustomizations, + otherComponentsCustomizations, +} from './customizations'; + +export default function getDashboardTheme(mode) { + return { + ...getDesignTokens(mode), + components: { + ...buttonsCustomizations, + ...chartsCustomizations, + ...dataGridCustomizations, + ...datePickersCustomizations, + ...treeViewCustomizations, + ...inputsCustomizations, + ...layoutComponentsCustomizations, + ...menuComponentsCustomizations, + ...otherComponentsCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx new file mode 100644 index 00000000000000..ea899ebbdb723b --- /dev/null +++ b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx @@ -0,0 +1,36 @@ +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeOptions } from '@mui/material/styles'; +import { PaletteMode } from '@mui/material'; +import type {} from '@mui/x-date-pickers/themeAugmentation'; +import type {} from '@mui/x-charts/themeAugmentation'; +import type {} from '@mui/x-data-grid/themeAugmentation'; +import type {} from '@mui/x-tree-view/themeAugmentation'; +import { getDesignTokens } from './themePrimitives'; +import { + buttonsCustomizations, + chartsCustomizations, + dataGridCustomizations, + datePickersCustomizations, + treeViewCustomizations, + inputsCustomizations, + layoutComponentsCustomizations, + menuComponentsCustomizations, + otherComponentsCustomizations, +} from './customizations'; + +export default function getDashboardTheme(mode: PaletteMode): ThemeOptions { + return { + ...getDesignTokens(mode), + components: { + ...buttonsCustomizations, + ...chartsCustomizations, + ...dataGridCustomizations, + ...datePickersCustomizations, + ...treeViewCustomizations, + ...inputsCustomizations, + ...layoutComponentsCustomizations, + ...menuComponentsCustomizations, + ...otherComponentsCustomizations, + }, + }; +} diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js similarity index 81% rename from docs/data/material/getting-started/templates/dashboard/themePrimitives.js rename to docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js index 1b98cf9e83a5e6..1894b11b326f0c 100644 --- a/docs/data/material/getting-started/templates/dashboard/themePrimitives.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js @@ -16,16 +16,16 @@ export const brand = { }; export const gray = { - 50: 'hsl(220, 60%, 97%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', + 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, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', }; export const green = { @@ -72,14 +72,14 @@ export const getDesignTokens = (mode) => ({ mode, primary: { light: brand[200], - main: brand[500], - dark: brand[800], + main: brand[400], + dark: brand[700], contrastText: brand[50], ...(mode === 'dark' && { contrastText: brand[50], light: brand[300], main: brand[400], - dark: brand[800], + dark: brand[700], }), }, info: { @@ -127,11 +127,11 @@ export const getDesignTokens = (mode) => ({ grey: { ...gray, }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), background: { - default: gray[50], - paper: gray[100], - ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), }, text: { primary: gray[800], @@ -140,11 +140,11 @@ export const getDesignTokens = (mode) => ({ ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { - hover: alpha(gray[300], 0.2), - selected: `${alpha(brand[200], 0.2)}`, + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, ...(mode === 'dark' && { - hover: alpha(gray[500], 0.2), - selected: alpha(brand[800], 0.2), + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), }), }, }, @@ -198,6 +198,12 @@ export const getDesignTokens = (mode) => ({ }, }, shape: { - borderRadius: 10, + borderRadius: 8, }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ], }); diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts similarity index 81% rename from docs/data/material/getting-started/templates/dashboard/themePrimitives.ts rename to docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index c4b4887c7b62e5..2b8fd6aa46fab9 100644 --- a/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -1,5 +1,5 @@ import { PaletteMode } from '@mui/material'; -import { createTheme, alpha } from '@mui/material/styles'; +import { createTheme, alpha, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -39,16 +39,16 @@ export const brand = { }; export const gray = { - 50: 'hsl(220, 60%, 97%)', - 100: 'hsl(220, 35%, 94%)', - 200: 'hsl(220, 35%, 88%)', - 300: 'hsl(220, 25%, 80%)', + 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, 25%, 35%)', - 700: 'hsl(220, 25%, 25%)', - 800: 'hsl(220, 25%, 10%)', - 900: 'hsl(220, 30%, 5%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', }; export const green = { @@ -95,14 +95,14 @@ export const getDesignTokens = (mode: PaletteMode) => ({ mode, primary: { light: brand[200], - main: brand[500], - dark: brand[800], + main: brand[400], + dark: brand[700], contrastText: brand[50], ...(mode === 'dark' && { contrastText: brand[50], light: brand[300], main: brand[400], - dark: brand[800], + dark: brand[700], }), }, info: { @@ -150,11 +150,11 @@ export const getDesignTokens = (mode: PaletteMode) => ({ grey: { ...gray, }, - divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5), + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), background: { - default: gray[50], - paper: gray[100], - ...(mode === 'dark' && { default: gray[900], paper: gray[800] }), + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), }, text: { primary: gray[800], @@ -163,11 +163,11 @@ export const getDesignTokens = (mode: PaletteMode) => ({ ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), }, action: { - hover: alpha(gray[300], 0.2), - selected: `${alpha(brand[200], 0.2)}`, + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, ...(mode === 'dark' && { - hover: alpha(gray[500], 0.2), - selected: alpha(brand[800], 0.2), + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), }), }, }, @@ -221,6 +221,12 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, }, shape: { - borderRadius: 10, + borderRadius: 8, }, + shadows: [ + 'none', + ...(mode === 'dark' + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + ] as Shadows, }); diff --git a/docs/pages/experiments/website/dashboard-template-theme.tsx b/docs/pages/experiments/website/dashboard-template-theme.tsx index db5f121312073e..d9f145b8e7e1f9 100644 --- a/docs/pages/experiments/website/dashboard-template-theme.tsx +++ b/docs/pages/experiments/website/dashboard-template-theme.tsx @@ -28,7 +28,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; import Head from 'docs/src/modules/components/Head'; -import getDashboardTheme from 'docs/data/material/getting-started/templates/dashboard/getDashboardTheme'; +import getDashboardTheme from 'docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme'; import CustomDatePicker from 'docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker'; interface ToggleColorModeProps { diff --git a/docs/pages/material-ui/api/select.json b/docs/pages/material-ui/api/select.json index feb36be1afaa82..da48bad8df8888 100644 --- a/docs/pages/material-ui/api/select.json +++ b/docs/pages/material-ui/api/select.json @@ -80,6 +80,12 @@ "description": "Styles applied to the select component if `variant=\"filled\"`.", "isGlobal": false }, + { + "key": "focused", + "className": "Mui-focused", + "description": "Styles applied to the select component if it is focused.", + "isGlobal": true + }, { "key": "icon", "className": "MuiSelect-icon", diff --git a/docs/public/static/images/templates/dashboard-dark.png b/docs/public/static/images/templates/dashboard-dark.png new file mode 100644 index 00000000000000..006c2384696d9f Binary files /dev/null and b/docs/public/static/images/templates/dashboard-dark.png differ diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png new file mode 100644 index 00000000000000..2464d099eeb418 Binary files /dev/null and b/docs/public/static/images/templates/dashboard-light.png differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg index 5777bfc219860e..7b22b733625589 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg index 542defc17c12fa..757db10a465c72 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg index ccf78b9f16d3d7..7a47a87a0b5e23 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg index be06590566b50a..143ca7ba535a4e 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg index e475c76a61987b..e32c4c76e23eef 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg index 24a0ddd2867494..708e1da9212f5d 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg index 1bf29415cb7404..3a243b2d82a975 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg index 58f1d87303142b..34bc9afe905a51 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg index 18a9e5d4a436b1..365e8cb224ef25 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg index b16c5722bb4457..b4d2d2acdb64cd 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg index ccb13fe7a4347f..db2a158662e553 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg index bb84e7d0599121..3df02b4f09d93c 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg index 7eecd3d2080767..2feb004b7ae3cb 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg index e0e9f3dd6413cb..f96ed4d018b6db 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg index b6183b9adf31a3..c2ceb592c99ca4 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg index 51de0c4899e497..26bcbb9f1f319c 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg index b9099cb8941a34..703d6d19484407 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg index 93a6fe9cf7321b..2aff1203c1d1a8 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg index 4c657259c7696e..8387baa627eb6e 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg index 9c076011cc68d7..3a474f7c3707f7 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg index cdd0d453911c3c..4055193cdc18f9 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg index 0478ba24fff31f..a3bb91bae4ef10 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg index c693258477631e..ac792ce8a08ebb 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg index 3643e04f6b7f5d..b89234ccb5784f 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg index 4529898295ff53..52fd7cf327784c 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg index 6834c2e34e1295..dc2394f521ff12 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg index df6b861675bdca..7cc6aa8c5e6a78 100644 Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg differ diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json index 8cb27165d2be53..1e334a7aab759d 100644 --- a/docs/translations/api-docs/select/select.json +++ b/docs/translations/api-docs/select/select.json @@ -88,6 +88,11 @@ "nodeName": "the select component", "conditions": "variant=\"filled\"" }, + "focused": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the select component", + "conditions": "it is focused" + }, "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" }, "iconFilled": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/Select/selectClasses.ts b/packages/mui-material/src/Select/selectClasses.ts index d65ecac5bd954c..a468b714f1f786 100644 --- a/packages/mui-material/src/Select/selectClasses.ts +++ b/packages/mui-material/src/Select/selectClasses.ts @@ -10,6 +10,8 @@ export interface SelectClasses { multiple: string; /** Styles applied to the select component if `variant="filled"`. */ filled: string; + /** Styles applied to the select component if it is focused. */ + focused: string; /** Styles applied to the select component if `variant="outlined"`. */ outlined: string; /** Styles applied to the select component if `variant="standard"`. */ diff --git a/test/regressions/index.js b/test/regressions/index.js index 6f304394432486..01491f52fd6717 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -34,6 +34,16 @@ importRegressionFixtures.keys().forEach((path) => { const blacklist = [ // The following components are tested by docs-getting-started-templates-dashboard-components/MainGrid.png + 'docs-getting-started-templates-dashboard-theme-customizations/buttons.png', + 'docs-getting-started-templates-dashboard-theme-customizations/charts.png', + 'docs-getting-started-templates-dashboard-theme-customizations/dataGrid.png', + 'docs-getting-started-templates-dashboard-theme-customizations/datePickers.png', + 'docs-getting-started-templates-dashboard-theme-customizations/index.png', + 'docs-getting-started-templates-dashboard-theme-customizations/inputs.png', + 'docs-getting-started-templates-dashboard-theme-customizations/layoutComponents.png', + 'docs-getting-started-templates-dashboard-theme-customizations/menus.png', + 'docs-getting-started-templates-dashboard-theme-customizations/others.png', + 'docs-getting-started-templates-dashboard-theme-customizations/treeView.png', 'docs-getting-started-templates-dashboard/Dashboard.png', 'docs-getting-started-templates-dashboard-components/ChartUserByCountry.png', 'docs-getting-started-templates-dashboard-components/CustomDatePicker.png', @@ -45,11 +55,11 @@ const blacklist = [ 'docs-getting-started-templates-dashboard-components/Navbar.png', 'docs-getting-started-templates-dashboard-components/NavbarBreadcrumbs.png', 'docs-getting-started-templates-dashboard-components/OptionsMenu.png', - 'docs-getting-started-templates-dashboard-components/PageViewsChart.png', + 'docs-getting-started-templates-dashboard-components/SessionsChart.png', 'docs-getting-started-templates-dashboard-components/Search.png', 'docs-getting-started-templates-dashboard-components/ToggleColorMode.png', 'docs-getting-started-templates-dashboard-internals-components', // No public components - 'docs-getting-started-templates-dashboard-components/SideNav.png', // No public components + 'docs-getting-started-templates-dashboard-components/SideMenuMobile.png', // No public components 'docs-getting-started-templates-dashboard-components/PageViewsBarChart.png', // No public components 'docs-getting-started-templates-dashboard-components/StatCard.png', // No public components 'docs-getting-started-templates-sign-in-side/CustomIcons.png', // Theme file