).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/Copyright.js b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.js
new file mode 100644
index 00000000000000..c4310abda3e321
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+export default function Copyright(props) {
+ return (
+
+ {'Copyright © '}
+
+ Sitemark
+ {' '}
+ {new Date().getFullYear()}
+ {'.'}
+
+ );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx
new file mode 100644
index 00000000000000..52f72c48f2c05d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/Copyright.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+export default function Copyright(props: any) {
+ return (
+
+ {'Copyright © '}
+
+ Sitemark
+ {' '}
+ {new Date().getFullYear()}
+ {'.'}
+
+ );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js
new file mode 100644
index 00000000000000..8cc34623cfa8b6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.js
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+export function SitemarkIcon() {
+ return (
+
+
+
+ );
+}
+
+export function IndiaFlag() {
+ return (
+
+
+
+ );
+}
+
+export function UsaFlag() {
+ return (
+
+
+
+ );
+}
+export function BrazilFlag() {
+ return (
+
+
+
+ );
+}
+
+export function GlobeFlag() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx
new file mode 100644
index 00000000000000..8cc34623cfa8b6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/CustomIcons.tsx
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+export function SitemarkIcon() {
+ return (
+
+
+
+ );
+}
+
+export function IndiaFlag() {
+ return (
+
+
+
+ );
+}
+
+export function UsaFlag() {
+ return (
+
+
+
+ );
+}
+export function BrazilFlag() {
+ return (
+
+
+
+ );
+}
+
+export function GlobeFlag() {
+ return (
+
+
+
+ );
+}
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
new file mode 100644
index 00000000000000..21a8f10f6e75b1
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
@@ -0,0 +1,50 @@
+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 AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
+ return (
+
+
+
+
+ Custom theme
+
+ Material Design 2
+
+
+ );
+}
+
+ToggleCustomTheme.propTypes = {
+ showCustomTheme: PropTypes.shape({
+ valueOf: PropTypes.func.isRequired,
+ }).isRequired,
+ toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default ToggleCustomTheme;
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
new file mode 100644
index 00000000000000..58df9e79a64226
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+interface ToggleCustomThemeProps {
+ showCustomTheme: Boolean;
+ toggleCustomTheme: () => void;
+}
+
+export default function ToggleCustomTheme({
+ showCustomTheme,
+ toggleCustomTheme,
+}: ToggleCustomThemeProps) {
+ return (
+
+
+
+
+ Custom theme
+
+ Material Design 2
+
+
+ );
+}
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
new file mode 100644
index 00000000000000..a24b8589635fe2
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.js
@@ -0,0 +1,145 @@
+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',
+ };
+
+ return (
+
+ );
+}
+export function renderAvatar(params) {
+ if (params.value == null) {
+ return '';
+ }
+
+ return (
+
+ {params.value.name.toUpperCase().substring(0, 1)}
+
+ );
+}
+
+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: 'viewsPerUser',
+ headerName: 'Views per User',
+ width: 130,
+ },
+ { 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,
+ },
+ {
+ id: 2,
+ pageTitle: 'Product Details - Gadgets',
+ eventCount: 4653,
+ users: 152240,
+ viewsPerUser: 10.2,
+ averageTime: '2m 23s',
+ conversions: 321,
+ },
+ {
+ id: 3,
+ pageTitle: 'Checkout Process - Step 1',
+ eventCount: 2455,
+ users: 61240,
+ viewsPerUser: 16.4,
+ averageTime: '2m 23s',
+ conversions: 120,
+ },
+ {
+ id: 4,
+ pageTitle: 'User Profile Dashboard',
+ eventCount: 123543,
+ users: 102240,
+ viewsPerUser: 3.74,
+ averageTime: '2m 23s',
+ conversions: 40,
+ },
+ {
+ id: 5,
+ pageTitle: 'Article Listing - Tech News',
+ eventCount: 4653,
+ users: 132240,
+ viewsPerUser: 2.24,
+ averageTime: '2m 23s',
+ conversions: 49,
+ },
+ {
+ id: 6,
+ pageTitle: 'FAQs - Customer Support',
+ eventCount: 123543,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+ {
+ id: 7,
+ pageTitle: 'About Us - Company Info',
+ eventCount: 4653,
+ users: 19240,
+ viewsPerUser: 1.02,
+ averageTime: '2m 23s',
+ conversions: 2,
+ },
+ {
+ id: 8,
+ pageTitle: 'Contact Form Page',
+ eventCount: 123543,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+ {
+ id: 9,
+ pageTitle: 'Services Overview - Web Development',
+ eventCount: 6345,
+ users: 19240,
+ viewsPerUser: 1.02,
+ averageTime: '2m 23s',
+ conversions: 2,
+ },
+ {
+ id: 10,
+ pageTitle: 'Pricing Page - Subscription Plans',
+ eventCount: 2455,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+];
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
new file mode 100644
index 00000000000000..62552af61e0f60
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/internals/data/gridData.tsx
@@ -0,0 +1,154 @@
+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';
+
+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',
+ };
+
+ return (
+
+ );
+}
+export function renderAvatar(
+ params: GridCellParams<{ name: string; color: string }, any, any>,
+) {
+ if (params.value == null) {
+ return '';
+ }
+
+ return (
+
+ {params.value.name.toUpperCase().substring(0, 1)}
+
+ );
+}
+
+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: 'viewsPerUser',
+ headerName: 'Views per User',
+ width: 130,
+ },
+ { 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,
+ },
+ {
+ id: 2,
+ pageTitle: 'Product Details - Gadgets',
+ eventCount: 4653,
+ users: 152240,
+ viewsPerUser: 10.2,
+ averageTime: '2m 23s',
+ conversions: 321,
+ },
+ {
+ id: 3,
+ pageTitle: 'Checkout Process - Step 1',
+ eventCount: 2455,
+ users: 61240,
+ viewsPerUser: 16.4,
+ averageTime: '2m 23s',
+ conversions: 120,
+ },
+ {
+ id: 4,
+ pageTitle: 'User Profile Dashboard',
+ eventCount: 123543,
+ users: 102240,
+ viewsPerUser: 3.74,
+ averageTime: '2m 23s',
+ conversions: 40,
+ },
+ {
+ id: 5,
+ pageTitle: 'Article Listing - Tech News',
+ eventCount: 4653,
+ users: 132240,
+ viewsPerUser: 2.24,
+ averageTime: '2m 23s',
+ conversions: 49,
+ },
+ {
+ id: 6,
+ pageTitle: 'FAQs - Customer Support',
+ eventCount: 123543,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+ {
+ id: 7,
+ pageTitle: 'About Us - Company Info',
+ eventCount: 4653,
+ users: 19240,
+ viewsPerUser: 1.02,
+ averageTime: '2m 23s',
+ conversions: 2,
+ },
+ {
+ id: 8,
+ pageTitle: 'Contact Form Page',
+ eventCount: 123543,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+ {
+ id: 9,
+ pageTitle: 'Services Overview - Web Development',
+ eventCount: 6345,
+ users: 19240,
+ viewsPerUser: 1.02,
+ averageTime: '2m 23s',
+ conversions: 2,
+ },
+ {
+ id: 10,
+ pageTitle: 'Pricing Page - Subscription Plans',
+ eventCount: 2455,
+ users: 12240,
+ viewsPerUser: 3.67,
+ averageTime: '2m 23s',
+ conversions: 80,
+ },
+];
diff --git a/docs/data/material/getting-started/templates/dashboard/listItems.js b/docs/data/material/getting-started/templates/dashboard/listItems.js
deleted file mode 100644
index 7d4090b3c738dd..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/listItems.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export const mainListItems = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export const secondaryListItems = (
-
-
- Saved reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/docs/data/material/getting-started/templates/dashboard/listItems.tsx b/docs/data/material/getting-started/templates/dashboard/listItems.tsx
deleted file mode 100644
index 7d4090b3c738dd..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/listItems.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListSubheader from '@mui/material/ListSubheader';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-
-export const mainListItems = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export const secondaryListItems = (
-
-
- Saved reports
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/themePrimitives.js
new file mode 100644
index 00000000000000..1b98cf9e83a5e6
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/themePrimitives.js
@@ -0,0 +1,203 @@
+import { createTheme, alpha } from '@mui/material/styles';
+
+const customTheme = createTheme();
+
+export const brand = {
+ 50: 'hsl(210, 100%, 95%)',
+ 100: 'hsl(210, 100%, 92%)',
+ 200: 'hsl(210, 100%, 80%)',
+ 300: 'hsl(210, 100%, 65%)',
+ 400: 'hsl(210, 98%, 48%)',
+ 500: 'hsl(210, 98%, 42%)',
+ 600: 'hsl(210, 98%, 55%)',
+ 700: 'hsl(210, 100%, 35%)',
+ 800: 'hsl(210, 100%, 16%)',
+ 900: 'hsl(210, 100%, 21%)',
+};
+
+export const gray = {
+ 50: 'hsl(220, 60%, 97%)',
+ 100: 'hsl(220, 35%, 94%)',
+ 200: 'hsl(220, 35%, 88%)',
+ 300: 'hsl(220, 25%, 80%)',
+ 400: 'hsl(220, 20%, 65%)',
+ 500: 'hsl(220, 20%, 42%)',
+ 600: 'hsl(220, 25%, 35%)',
+ 700: 'hsl(220, 25%, 25%)',
+ 800: 'hsl(220, 25%, 10%)',
+ 900: 'hsl(220, 30%, 5%)',
+};
+
+export const green = {
+ 50: 'hsl(120, 80%, 98%)',
+ 100: 'hsl(120, 75%, 94%)',
+ 200: 'hsl(120, 75%, 87%)',
+ 300: 'hsl(120, 61%, 77%)',
+ 400: 'hsl(120, 44%, 53%)',
+ 500: 'hsl(120, 59%, 30%)',
+ 600: 'hsl(120, 70%, 25%)',
+ 700: 'hsl(120, 75%, 16%)',
+ 800: 'hsl(120, 84%, 10%)',
+ 900: 'hsl(120, 87%, 6%)',
+};
+
+export const orange = {
+ 50: 'hsl(45, 100%, 97%)',
+ 100: 'hsl(45, 92%, 90%)',
+ 200: 'hsl(45, 94%, 80%)',
+ 300: 'hsl(45, 90%, 65%)',
+ 400: 'hsl(45, 90%, 40%)',
+ 500: 'hsl(45, 90%, 35%)',
+ 600: 'hsl(45, 91%, 25%)',
+ 700: 'hsl(45, 94%, 20%)',
+ 800: 'hsl(45, 95%, 16%)',
+ 900: 'hsl(45, 93%, 12%)',
+};
+
+export const red = {
+ 50: 'hsl(0, 100%, 97%)',
+ 100: 'hsl(0, 92%, 90%)',
+ 200: 'hsl(0, 94%, 80%)',
+ 300: 'hsl(0, 90%, 65%)',
+ 400: 'hsl(0, 90%, 40%)',
+ 500: 'hsl(0, 90%, 30%)',
+ 600: 'hsl(0, 91%, 25%)',
+ 700: 'hsl(0, 94%, 18%)',
+ 800: 'hsl(0, 95%, 12%)',
+ 900: 'hsl(0, 93%, 6%)',
+};
+
+export const getDesignTokens = (mode) => ({
+ palette: {
+ mode,
+ primary: {
+ light: brand[200],
+ main: brand[500],
+ dark: brand[800],
+ contrastText: brand[50],
+ ...(mode === 'dark' && {
+ contrastText: brand[50],
+ light: brand[300],
+ main: brand[400],
+ dark: brand[800],
+ }),
+ },
+ info: {
+ light: brand[100],
+ main: brand[300],
+ dark: brand[600],
+ contrastText: gray[50],
+ ...(mode === 'dark' && {
+ contrastText: brand[300],
+ light: brand[500],
+ main: brand[700],
+ dark: brand[900],
+ }),
+ },
+ warning: {
+ light: orange[300],
+ main: orange[400],
+ dark: orange[800],
+ ...(mode === 'dark' && {
+ light: orange[400],
+ main: orange[500],
+ dark: orange[700],
+ }),
+ },
+ error: {
+ light: red[300],
+ main: red[400],
+ dark: red[800],
+ ...(mode === 'dark' && {
+ light: red[400],
+ main: red[500],
+ dark: red[700],
+ }),
+ },
+ success: {
+ light: green[300],
+ main: green[400],
+ dark: green[800],
+ ...(mode === 'dark' && {
+ light: green[400],
+ main: green[500],
+ dark: green[700],
+ }),
+ },
+ grey: {
+ ...gray,
+ },
+ divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
+ background: {
+ default: gray[50],
+ paper: gray[100],
+ ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
+ },
+ text: {
+ primary: gray[800],
+ secondary: gray[600],
+ warning: orange[400],
+ ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+ },
+ action: {
+ hover: alpha(gray[300], 0.2),
+ selected: `${alpha(brand[200], 0.2)}`,
+ ...(mode === 'dark' && {
+ hover: alpha(gray[500], 0.2),
+ selected: alpha(brand[800], 0.2),
+ }),
+ },
+ },
+ typography: {
+ fontFamily: ['"Inter", "sans-serif"'].join(','),
+ h1: {
+ fontSize: customTheme.typography.pxToRem(48),
+ fontWeight: 600,
+ lineHeight: 1.2,
+ letterSpacing: -0.5,
+ },
+ h2: {
+ fontSize: customTheme.typography.pxToRem(36),
+ fontWeight: 600,
+ lineHeight: 1.2,
+ },
+ h3: {
+ fontSize: customTheme.typography.pxToRem(30),
+ lineHeight: 1.2,
+ },
+ h4: {
+ fontSize: customTheme.typography.pxToRem(24),
+ fontWeight: 600,
+ lineHeight: 1.5,
+ },
+ h5: {
+ fontSize: customTheme.typography.pxToRem(20),
+ fontWeight: 600,
+ },
+ h6: {
+ fontSize: customTheme.typography.pxToRem(18),
+ fontWeight: 600,
+ },
+ subtitle1: {
+ fontSize: customTheme.typography.pxToRem(18),
+ },
+ subtitle2: {
+ fontSize: customTheme.typography.pxToRem(14),
+ fontWeight: 500,
+ },
+ body1: {
+ fontSize: customTheme.typography.pxToRem(14),
+ },
+ body2: {
+ fontSize: customTheme.typography.pxToRem(14),
+ fontWeight: 400,
+ },
+ caption: {
+ fontSize: customTheme.typography.pxToRem(12),
+ fontWeight: 400,
+ },
+ },
+ shape: {
+ borderRadius: 10,
+ },
+});
diff --git a/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts
new file mode 100644
index 00000000000000..c4b4887c7b62e5
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/themePrimitives.ts
@@ -0,0 +1,226 @@
+import { PaletteMode } from '@mui/material';
+import { createTheme, alpha } from '@mui/material/styles';
+
+declare module '@mui/material/Paper' {
+ interface PaperPropsVariantOverrides {
+ highlighted: true;
+ }
+}
+declare module '@mui/material/styles/createPalette' {
+ interface ColorRange {
+ 50: string;
+ 100: string;
+ 200: string;
+ 300: string;
+ 400: string;
+ 500: string;
+ 600: string;
+ 700: string;
+ 800: string;
+ 900: string;
+ }
+
+ interface PaletteColor extends ColorRange {}
+}
+
+const customTheme = createTheme();
+
+export const brand = {
+ 50: 'hsl(210, 100%, 95%)',
+ 100: 'hsl(210, 100%, 92%)',
+ 200: 'hsl(210, 100%, 80%)',
+ 300: 'hsl(210, 100%, 65%)',
+ 400: 'hsl(210, 98%, 48%)',
+ 500: 'hsl(210, 98%, 42%)',
+ 600: 'hsl(210, 98%, 55%)',
+ 700: 'hsl(210, 100%, 35%)',
+ 800: 'hsl(210, 100%, 16%)',
+ 900: 'hsl(210, 100%, 21%)',
+};
+
+export const gray = {
+ 50: 'hsl(220, 60%, 97%)',
+ 100: 'hsl(220, 35%, 94%)',
+ 200: 'hsl(220, 35%, 88%)',
+ 300: 'hsl(220, 25%, 80%)',
+ 400: 'hsl(220, 20%, 65%)',
+ 500: 'hsl(220, 20%, 42%)',
+ 600: 'hsl(220, 25%, 35%)',
+ 700: 'hsl(220, 25%, 25%)',
+ 800: 'hsl(220, 25%, 10%)',
+ 900: 'hsl(220, 30%, 5%)',
+};
+
+export const green = {
+ 50: 'hsl(120, 80%, 98%)',
+ 100: 'hsl(120, 75%, 94%)',
+ 200: 'hsl(120, 75%, 87%)',
+ 300: 'hsl(120, 61%, 77%)',
+ 400: 'hsl(120, 44%, 53%)',
+ 500: 'hsl(120, 59%, 30%)',
+ 600: 'hsl(120, 70%, 25%)',
+ 700: 'hsl(120, 75%, 16%)',
+ 800: 'hsl(120, 84%, 10%)',
+ 900: 'hsl(120, 87%, 6%)',
+};
+
+export const orange = {
+ 50: 'hsl(45, 100%, 97%)',
+ 100: 'hsl(45, 92%, 90%)',
+ 200: 'hsl(45, 94%, 80%)',
+ 300: 'hsl(45, 90%, 65%)',
+ 400: 'hsl(45, 90%, 40%)',
+ 500: 'hsl(45, 90%, 35%)',
+ 600: 'hsl(45, 91%, 25%)',
+ 700: 'hsl(45, 94%, 20%)',
+ 800: 'hsl(45, 95%, 16%)',
+ 900: 'hsl(45, 93%, 12%)',
+};
+
+export const red = {
+ 50: 'hsl(0, 100%, 97%)',
+ 100: 'hsl(0, 92%, 90%)',
+ 200: 'hsl(0, 94%, 80%)',
+ 300: 'hsl(0, 90%, 65%)',
+ 400: 'hsl(0, 90%, 40%)',
+ 500: 'hsl(0, 90%, 30%)',
+ 600: 'hsl(0, 91%, 25%)',
+ 700: 'hsl(0, 94%, 18%)',
+ 800: 'hsl(0, 95%, 12%)',
+ 900: 'hsl(0, 93%, 6%)',
+};
+
+export const getDesignTokens = (mode: PaletteMode) => ({
+ palette: {
+ mode,
+ primary: {
+ light: brand[200],
+ main: brand[500],
+ dark: brand[800],
+ contrastText: brand[50],
+ ...(mode === 'dark' && {
+ contrastText: brand[50],
+ light: brand[300],
+ main: brand[400],
+ dark: brand[800],
+ }),
+ },
+ info: {
+ light: brand[100],
+ main: brand[300],
+ dark: brand[600],
+ contrastText: gray[50],
+ ...(mode === 'dark' && {
+ contrastText: brand[300],
+ light: brand[500],
+ main: brand[700],
+ dark: brand[900],
+ }),
+ },
+ warning: {
+ light: orange[300],
+ main: orange[400],
+ dark: orange[800],
+ ...(mode === 'dark' && {
+ light: orange[400],
+ main: orange[500],
+ dark: orange[700],
+ }),
+ },
+ error: {
+ light: red[300],
+ main: red[400],
+ dark: red[800],
+ ...(mode === 'dark' && {
+ light: red[400],
+ main: red[500],
+ dark: red[700],
+ }),
+ },
+ success: {
+ light: green[300],
+ main: green[400],
+ dark: green[800],
+ ...(mode === 'dark' && {
+ light: green[400],
+ main: green[500],
+ dark: green[700],
+ }),
+ },
+ grey: {
+ ...gray,
+ },
+ divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
+ background: {
+ default: gray[50],
+ paper: gray[100],
+ ...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
+ },
+ text: {
+ primary: gray[800],
+ secondary: gray[600],
+ warning: orange[400],
+ ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+ },
+ action: {
+ hover: alpha(gray[300], 0.2),
+ selected: `${alpha(brand[200], 0.2)}`,
+ ...(mode === 'dark' && {
+ hover: alpha(gray[500], 0.2),
+ selected: alpha(brand[800], 0.2),
+ }),
+ },
+ },
+ typography: {
+ fontFamily: ['"Inter", "sans-serif"'].join(','),
+ h1: {
+ fontSize: customTheme.typography.pxToRem(48),
+ fontWeight: 600,
+ lineHeight: 1.2,
+ letterSpacing: -0.5,
+ },
+ h2: {
+ fontSize: customTheme.typography.pxToRem(36),
+ fontWeight: 600,
+ lineHeight: 1.2,
+ },
+ h3: {
+ fontSize: customTheme.typography.pxToRem(30),
+ lineHeight: 1.2,
+ },
+ h4: {
+ fontSize: customTheme.typography.pxToRem(24),
+ fontWeight: 600,
+ lineHeight: 1.5,
+ },
+ h5: {
+ fontSize: customTheme.typography.pxToRem(20),
+ fontWeight: 600,
+ },
+ h6: {
+ fontSize: customTheme.typography.pxToRem(18),
+ fontWeight: 600,
+ },
+ subtitle1: {
+ fontSize: customTheme.typography.pxToRem(18),
+ },
+ subtitle2: {
+ fontSize: customTheme.typography.pxToRem(14),
+ fontWeight: 500,
+ },
+ body1: {
+ fontSize: customTheme.typography.pxToRem(14),
+ },
+ body2: {
+ fontSize: customTheme.typography.pxToRem(14),
+ fontWeight: 400,
+ },
+ caption: {
+ fontSize: customTheme.typography.pxToRem(12),
+ fontWeight: 400,
+ },
+ },
+ shape: {
+ borderRadius: 10,
+ },
+});
diff --git a/docs/package.json b/docs/package.json
index b40c0f2b96984e..e54e3bc6de9b6e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -33,9 +33,9 @@
"@mui/base": "workspace:*",
"@mui/docs": "workspace:^",
"@mui/icons-material": "workspace:^",
+ "@mui/internal-markdown": "workspace:^",
"@mui/joy": "workspace:*",
"@mui/lab": "workspace:*",
- "@mui/internal-markdown": "workspace:^",
"@mui/material": "workspace:^",
"@mui/styled-engine": "workspace:^",
"@mui/styled-engine-sc": "workspace:^",
@@ -68,6 +68,7 @@
"css-mediaquery": "^0.1.2",
"date-fns": "^2.30.0",
"date-fns-jalali": "^2.21.3-1",
+ "dayjs": "^1.11.10",
"feed": "^4.2.2",
"fg-loadcss": "^3.1.0",
"final-form": "^4.20.10",
diff --git a/docs/pages/experiments/website/dashboard-template-theme.tsx b/docs/pages/experiments/website/dashboard-template-theme.tsx
new file mode 100644
index 00000000000000..d89cf524819b30
--- /dev/null
+++ b/docs/pages/experiments/website/dashboard-template-theme.tsx
@@ -0,0 +1,286 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Container from '@mui/material/Container';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
+import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
+
+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 CustomDatePicker from 'docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker';
+
+interface ToggleColorModeProps {
+ mode: PaletteMode;
+ toggleColorMode: () => void;
+}
+
+export function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) {
+ return (
+
+
+ {mode === 'dark' ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
+
+function CustomTabPanel(props: { [x: string]: any; children: any; value: any; index: any }) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+CustomTabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.number.isRequired,
+ value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+}
+
+export default function DashboardTemplateTheme() {
+ const [mode, setMode] = React.useState('light');
+ const dashboardTheme = createTheme(getDashboardTheme(mode));
+ const toggleColorMode = () => {
+ setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+ };
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const open = Boolean(anchorEl);
+ const handleClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+ const [value, setValue] = React.useState(0);
+ const handleChange = (_event: any, newValue: React.SetStateAction) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Dashboard template theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Word of the Day
+
+
+ be•nev•o•lent
+
+
+ adjective
+
+
+ well meaning and kindly.
+
+ {'"a benevolent smile"'}
+
+
+
+
+
+
+
+
+
+ Word of the Day
+
+
+ be•nev•o•lent
+
+
+ adjective
+
+
+ well meaning and kindly.
+
+ {'"a benevolent smile"'}
+
+
+
+
+
+
+
+
+
+ Link
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+