From b48eb9ea1a66b3b7ed5ffe9b77be8c9015421a4d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Sep 2024 16:10:52 +0700 Subject: [PATCH 01/36] poc AppTheme + TemplateFrame --- .../templates/sign-in/SignIn.tsx | 320 +++++++++--------- .../templates/sign-in/theme/AppTheme.tsx | 287 ++++++++++++++++ .../getting-started/templates/sign-in.js | 5 +- docs/src/modules/components/TemplateFrame.js | 124 +++++++ 4 files changed, 569 insertions(+), 167 deletions(-) create mode 100644 docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx create mode 100644 docs/src/modules/components/TemplateFrame.js diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx index dda0da4471c689..ef8a50c3fb1f3b 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -11,17 +11,13 @@ import Link from '@mui/material/Link'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; import MuiCard from '@mui/material/Card'; -import { - ThemeProvider, - createTheme, - styled, - PaletteMode, -} from '@mui/material/styles'; +import { styled, useColorScheme } from '@mui/material/styles'; import ForgotPassword from './ForgotPassword'; -import getSignInTheme from './theme/getSignInTheme'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; -import TemplateFrame from './TemplateFrame'; +import AppTheme from './theme/AppTheme'; const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', @@ -43,53 +39,51 @@ const Card = styled(MuiCard)(({ theme }) => ({ })); const SignInContainer = styled(Stack)(({ theme }) => ({ - height: '100%', padding: 20, - backgroundImage: - 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', - backgroundRepeat: 'no-repeat', - ...theme.applyStyles('dark', { + marginTop: '10vh', + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, backgroundImage: - 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', - }), + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', + ...theme.applyStyles('dark', { + backgroundImage: + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + }), + }, })); -export default function SignIn() { - const [mode, setMode] = React.useState('light'); - const [showCustomTheme, setShowCustomTheme] = React.useState(true); - const defaultTheme = createTheme({ palette: { mode } }); - const SignInTheme = createTheme(getSignInTheme(mode)); +function ColorSchemeToggle() { + const { mode, setMode } = useColorScheme(); + if (!mode) { + return null; + } + return ( + + ); +} + +export default function SignIn(props: { disableCustomTheme?: boolean }) { const [emailError, setEmailError] = React.useState(false); const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); const [passwordError, setPasswordError] = React.useState(false); const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); const [open, setOpen] = React.useState(false); - // This code only runs on the client side, to determine the system color preference - React.useEffect(() => { - // Check if there is a preferred mode in localStorage - const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; - if (savedMode) { - setMode(savedMode); - } else { - // If no preference is found, it uses system preference - const systemPrefersDark = window.matchMedia( - '(prefers-color-scheme: dark)', - ).matches; - setMode(systemPrefersDark ? 'dark' : 'light'); - } - }, []); - - const toggleColorMode = () => { - const newMode = mode === 'dark' ? 'light' : 'dark'; - setMode(newMode); - localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage - }; - - const toggleCustomTheme = () => { - setShowCustomTheme((prev) => !prev); - }; - const handleClickOpen = () => { setOpen(true); }; @@ -135,130 +129,124 @@ export default function SignIn() { }; return ( - - - - - - - - Sign in - - - - Email - - - - - Password - - Forgot your password? - - - - - } - label="Remember me" - /> - - - - Don't have an account?{' '} - - - Sign up - - - - - or - - - - - - - - + color={passwordError ? 'error' : 'primary'} + /> + + } + label="Remember me" + /> + + + + Don't have an account?{' '} + + + Sign up + + + + + or + + + + + + + ); } diff --git a/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx b/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx new file mode 100644 index 00000000000000..b4e6e5d6a6d8e4 --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx @@ -0,0 +1,287 @@ +/** + * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. + * Generated by a script. + */ +import * as React from 'react'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import { ThemeProvider, createTheme, alpha, Shadows } from '@mui/material/styles'; +import { + inputsCustomizations, + dataDisplayCustomizations, + feedbackCustomizations, + navigationCustomizations, + surfacesCustomizations, +} from './customizations'; +// there will be no files imported here, so that the theme becomes a single file +// and can be easily copied between projects + +declare module '@mui/material/Paper' { + interface PaperPropsVariantOverrides { + highlighted: true; + } +} +declare module '@mui/material/styles/createPalette' { + interface ColorRange { + 50: string; + 100: string; + 200: string; + 300: string; + 400: string; + 500: string; + 600: string; + 700: string; + 800: string; + 900: string; + } + + interface PaletteColor extends ColorRange {} +} + +const defaultTheme = createTheme(); + +const customShadows: Shadows = [...defaultTheme.shadows]; + +export const brand = { + 50: 'hsl(210, 100%, 95%)', + 100: 'hsl(210, 100%, 92%)', + 200: 'hsl(210, 100%, 80%)', + 300: 'hsl(210, 100%, 65%)', + 400: 'hsl(210, 98%, 48%)', + 500: 'hsl(210, 98%, 42%)', + 600: 'hsl(210, 98%, 55%)', + 700: 'hsl(210, 100%, 35%)', + 800: 'hsl(210, 100%, 16%)', + 900: 'hsl(210, 100%, 21%)', +}; + +export const gray = { + 50: 'hsl(220, 35%, 97%)', + 100: 'hsl(220, 30%, 94%)', + 200: 'hsl(220, 20%, 88%)', + 300: 'hsl(220, 20%, 80%)', + 400: 'hsl(220, 20%, 65%)', + 500: 'hsl(220, 20%, 42%)', + 600: 'hsl(220, 20%, 35%)', + 700: 'hsl(220, 20%, 25%)', + 800: 'hsl(220, 30%, 6%)', + 900: 'hsl(220, 35%, 3%)', +}; + +export const green = { + 50: 'hsl(120, 80%, 98%)', + 100: 'hsl(120, 75%, 94%)', + 200: 'hsl(120, 75%, 87%)', + 300: 'hsl(120, 61%, 77%)', + 400: 'hsl(120, 44%, 53%)', + 500: 'hsl(120, 59%, 30%)', + 600: 'hsl(120, 70%, 25%)', + 700: 'hsl(120, 75%, 16%)', + 800: 'hsl(120, 84%, 10%)', + 900: 'hsl(120, 87%, 6%)', +}; + +export const orange = { + 50: 'hsl(45, 100%, 97%)', + 100: 'hsl(45, 92%, 90%)', + 200: 'hsl(45, 94%, 80%)', + 300: 'hsl(45, 90%, 65%)', + 400: 'hsl(45, 90%, 40%)', + 500: 'hsl(45, 90%, 35%)', + 600: 'hsl(45, 91%, 25%)', + 700: 'hsl(45, 94%, 20%)', + 800: 'hsl(45, 95%, 16%)', + 900: 'hsl(45, 93%, 12%)', +}; + +export const red = { + 50: 'hsl(0, 100%, 97%)', + 100: 'hsl(0, 92%, 90%)', + 200: 'hsl(0, 94%, 80%)', + 300: 'hsl(0, 90%, 65%)', + 400: 'hsl(0, 90%, 40%)', + 500: 'hsl(0, 90%, 30%)', + 600: 'hsl(0, 91%, 25%)', + 700: 'hsl(0, 94%, 18%)', + 800: 'hsl(0, 95%, 12%)', + 900: 'hsl(0, 93%, 6%)', +}; + +const theme = createTheme({ + cssVariables: { + colorSchemeSelector: 'data', + }, + colorSchemes: { + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: 'hsl(220, 30%, 7%)', + }, + text: { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + }, + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + }, +}); + +export default function AppTheme({ + children, + disableCustomTheme, +}: { + children: React.ReactNode; + disableCustomTheme?: boolean; +}) { + if (disableCustomTheme) { + return children; + } + return ( + + {children} + + ); +} diff --git a/docs/pages/material-ui/getting-started/templates/sign-in.js b/docs/pages/material-ui/getting-started/templates/sign-in.js index 476618b70f47b4..45f09658b2c061 100644 --- a/docs/pages/material-ui/getting-started/templates/sign-in.js +++ b/docs/pages/material-ui/getting-started/templates/sign-in.js @@ -1,11 +1,14 @@ import * as React from 'react'; import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; import SignIn from 'docs/data/material/getting-started/templates/sign-in/SignIn'; export default function Page() { return ( - + + + ); } diff --git a/docs/src/modules/components/TemplateFrame.js b/docs/src/modules/components/TemplateFrame.js new file mode 100644 index 00000000000000..cb61b2a492db5a --- /dev/null +++ b/docs/src/modules/components/TemplateFrame.js @@ -0,0 +1,124 @@ +/* eslint-disable material-ui/no-hardcoded-labels */ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { createTheme, ThemeProvider, styled, useColorScheme } from '@mui/material/styles'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import Box from '@mui/material/Box'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; + +const StyledAppBar = styled(AppBar)(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + flexShrink: 0, + borderBottom: '1px solid', + borderColor: (theme.vars || theme).palette.divider, + backgroundColor: (theme.vars || theme).palette.background.paper, + boxShadow: 'none', + backgroundImage: 'none', + zIndex: theme.zIndex.drawer + 1, + flex: '0 0 auto', +})); + +const defaultTheme = createTheme({ + cssVariables: { + colorSchemeSelector: 'data', + }, + colorSchemes: { light: true, dark: true }, +}); + +function ColorSchemeToggle() { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + return ( + + ); +} + +function TemplateFrame({ children }) { + const [selectedTheme, setSelectedTheme] = React.useState('custom'); + return ( + + + + + + + + + + + + + + + + {React.isValidElement(children) + ? React.cloneElement(children, { disableCustomTheme: selectedTheme === 'material' }) + : null} + + + + ); +} + +TemplateFrame.propTypes = { + children: PropTypes.node, +}; + +export default TemplateFrame; From c982bbf9f2c835b58b0c2e7a273e822ebc6d9548 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 4 Sep 2024 16:55:52 +0700 Subject: [PATCH 02/36] add codesandbox button --- .../getting-started/templates/sign-in/App.js | 256 +++++++++++++++++ .../templates/sign-in/{SignIn.tsx => App.tsx} | 12 +- .../templates/sign-in/SignIn.js | 259 ----------------- .../templates/sign-in/theme/AppTheme.js | 260 ++++++++++++++++++ .../templates/sign-in/theme/AppTheme.tsx | 5 + .../getting-started/templates/sign-in.js | 2 +- docs/src/modules/components/TemplateFrame.js | 33 +++ .../modules/joy/sourceMaterialTemplates.ts | 34 +++ docs/src/modules/sandbox/CodeSandbox.ts | 90 ++++++ docs/src/modules/sandbox/CreateReactApp.ts | 2 +- 10 files changed, 688 insertions(+), 265 deletions(-) create mode 100644 docs/data/material/getting-started/templates/sign-in/App.js rename docs/data/material/getting-started/templates/sign-in/{SignIn.tsx => App.tsx} (96%) delete mode 100644 docs/data/material/getting-started/templates/sign-in/SignIn.js create mode 100644 docs/data/material/getting-started/templates/sign-in/theme/AppTheme.js create mode 100644 docs/src/modules/joy/sourceMaterialTemplates.ts diff --git a/docs/data/material/getting-started/templates/sign-in/App.js b/docs/data/material/getting-started/templates/sign-in/App.js new file mode 100644 index 00000000000000..8122a999e728ab --- /dev/null +++ b/docs/data/material/getting-started/templates/sign-in/App.js @@ -0,0 +1,256 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Checkbox from '@mui/material/Checkbox'; +import CssBaseline from '@mui/material/CssBaseline'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Divider from '@mui/material/Divider'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import Link from '@mui/material/Link'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import MuiCard from '@mui/material/Card'; +import { styled, useColorScheme } from '@mui/material/styles'; +import ForgotPassword from './ForgotPassword'; +import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; +import AppTheme from './theme/AppTheme'; + +const Card = styled(MuiCard)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignSelf: 'center', + width: '100%', + padding: theme.spacing(4), + gap: theme.spacing(2), + margin: 'auto', + [theme.breakpoints.up('sm')]: { + maxWidth: '450px', + }, + boxShadow: + 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', + ...theme.applyStyles('dark', { + boxShadow: + 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', + }), +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + padding: 20, + marginTop: '10vh', + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + zIndex: -1, + inset: 0, + backgroundImage: + 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + backgroundRepeat: 'no-repeat', + ...theme.applyStyles('dark', { + backgroundImage: + 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))', + }), + }, +})); + +function ColorSchemeToggle() { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + return ( + + ); +} + +export default function App(props) { + const [emailError, setEmailError] = React.useState(false); + const [emailErrorMessage, setEmailErrorMessage] = React.useState(''); + const [passwordError, setPasswordError] = React.useState(false); + const [passwordErrorMessage, setPasswordErrorMessage] = React.useState(''); + const [open, setOpen] = React.useState(false); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + const data = new FormData(event.currentTarget); + console.log({ + email: data.get('email'), + password: data.get('password'), + }); + }; + + const validateInputs = () => { + const email = document.getElementById('email'); + const password = document.getElementById('password'); + + let isValid = true; + + if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { + setEmailError(true); + setEmailErrorMessage('Please enter a valid email address.'); + isValid = false; + } else { + setEmailError(false); + setEmailErrorMessage(''); + } + + if (!password.value || password.value.length < 6) { + setPasswordError(true); + setPasswordErrorMessage('Password must be at least 6 characters long.'); + isValid = false; + } else { + setPasswordError(false); + setPasswordErrorMessage(''); + } + + return isValid; + }; + + return ( + + + + + + + + Sign in + + + + Email + + + + + Password + + Forgot your password? + + + + + } + label="Remember me" + /> + + + + Don't have an account?{' '} + + + Sign up + + + + + or + + + + + + + + ); +} diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/App.tsx similarity index 96% rename from docs/data/material/getting-started/templates/sign-in/SignIn.tsx rename to docs/data/material/getting-started/templates/sign-in/App.tsx index ef8a50c3fb1f3b..9f80554ebf7001 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/App.tsx @@ -59,16 +59,20 @@ const SignInContainer = styled(Stack)(({ theme }) => ({ function ColorSchemeToggle() { const { mode, setMode } = useColorScheme(); - if (!mode) { + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { return null; } return ( ; codeVariant: 'TS' | 'JS' }>(); +// @ts-ignore +const req = require.context( + '../../../data/material/getting-started/templates/?raw', + true, + /^\.\/[^/]+\/.*\.(js|tsx|ts)$/, +); +req.keys().forEach((key: string) => { + const match = /\/(?[^/]+)\/(?.*)/.exec(key); + if (match) { + const name = match.groups?.name; + const filePath = match.groups?.filePath; + if (name && filePath) { + const { files, codeVariant } = templateMap.get(name) || {}; + templateMap.set(name, { + files: { ...files, [filePath]: req(key) }, + codeVariant: filePath.match(/\.(ts|tsx)$/) ? 'TS' : codeVariant || 'JS', + }); + } + } +}); + +export interface TemplateData { + files: Record; + codeVariant: 'TS' | 'JS'; +} + +export default function sourceMaterialTemplates() { + return { + names: Array.from(templateMap.keys()), + templates: Array.from(templateMap.values()), + map: new Map(templateMap), + }; +} diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts index e772341afedc15..00e55268054c72 100644 --- a/docs/src/modules/sandbox/CodeSandbox.ts +++ b/docs/src/modules/sandbox/CodeSandbox.ts @@ -197,7 +197,97 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render( }; } +function createMaterialTemplate(templateData: { + title: string; + files: Record; + githubLocation: string; + codeVariant: CodeVariant; + codeStyling?: CodeStyling; +}) { + const ext = getFileExtension(templateData.codeVariant); + const { title, githubLocation: description } = templateData; + + // document.querySelector returns 'Element | null' but createRoot expects 'Element | DocumentFragment'. + const type = templateData.codeVariant === 'TS' ? '!' : ''; + + const files: Record = { + 'public/index.html': { + content: CRA.getHtml({ + title: templateData.title, + language: 'en', + codeStyling: templateData.codeStyling ?? 'MUI System', + }), + }, + [`index.${ext}`]: { + content: `import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import { StyledEngineProvider } from '@mui/material/styles'; +import App from './App'; + +ReactDOM.createRoot(document.querySelector("#root")${type}).render( + + + + + +);`, + }, + ...Object.entries(templateData.files).reduce( + (prev, curr) => ({ + ...prev, + [curr[0]]: { + content: curr[1], + }, + }), + {}, + ), + ...(templateData.codeVariant === 'TS' && { + 'tsconfig.json': { + content: CRA.getTsconfig(), + }, + }), + }; + + const { dependencies, devDependencies } = SandboxDependencies( + { + codeVariant: templateData.codeVariant, + raw: Object.entries(templateData.files).reduce((prev, curr) => `${prev}\n${curr}`, ''), + productId: 'material-ui', + }, + { + commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined, + }, + ); + + files['package.json'] = { + content: { + description, + dependencies, + devDependencies, + scripts: { + start: 'react-scripts start', + build: 'react-scripts build', + test: 'react-scripts test', + eject: 'react-scripts eject', + }, + ...(templateData.codeVariant === 'TS' && { + main: 'index.tsx', + }), + }, + }; + + return { + title, + files, + dependencies, + devDependencies, + openSandbox: (initialFile: string = '/App') => + openSandbox({ files, codeVariant: templateData.codeVariant, initialFile }), + }; +} + export default { createReactApp, createJoyTemplate, + createMaterialTemplate, }; diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts index c376428ccdfaee..646f5467a350d0 100644 --- a/docs/src/modules/sandbox/CreateReactApp.ts +++ b/docs/src/modules/sandbox/CreateReactApp.ts @@ -22,7 +22,7 @@ export const getHtml = ({ Date: Thu, 5 Sep 2024 09:48:27 +0700 Subject: [PATCH 03/36] move AppTheme to --- .../templates/shared-theme/AppTheme.js | 49 ++ .../templates/shared-theme/AppTheme.tsx | 57 +++ .../templates/shared-theme/themePrimitives.js | 167 +++++++ .../templates/shared-theme/themePrimitives.ts | 169 +++++++ .../getting-started/templates/sign-in/App.js | 2 +- .../getting-started/templates/sign-in/App.tsx | 2 +- .../templates/sign-in/TemplateFrame.js | 113 ----- .../templates/sign-in/TemplateFrame.tsx | 115 ----- .../templates/sign-in/theme/AppTheme.js | 260 ---------- .../templates/sign-in/theme/AppTheme.tsx | 292 ------------ .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../sign-in/theme/customizations/feedback.js | 46 -- .../sign-in/theme/customizations/feedback.tsx | 46 -- .../sign-in/theme/customizations/index.js | 5 - .../sign-in/theme/customizations/index.ts | 5 - .../sign-in/theme/customizations/inputs.js | 444 ----------------- .../sign-in/theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../sign-in/theme/customizations/surfaces.js | 113 ----- .../sign-in/theme/customizations/surfaces.ts | 113 ----- .../templates/sign-in/theme/getSignInTheme.js | 21 - .../sign-in/theme/getSignInTheme.tsx | 23 - .../sign-in/theme/themePrimitives.js | 216 --------- .../sign-in/theme/themePrimitives.ts | 235 --------- 26 files changed, 444 insertions(+), 3517 deletions(-) create mode 100644 docs/data/material/getting-started/templates/shared-theme/AppTheme.js create mode 100644 docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/AppTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js new file mode 100644 index 00000000000000..d313ed54a275a1 --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js @@ -0,0 +1,49 @@ +/** + * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. + * Generated by a script. + */ +import * as React from 'react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + +import { inputsCustomizations } from './customizations/inputs'; +import { dataDisplayCustomizations } from './customizations/dataDisplay'; +import { feedbackCustomizations } from './customizations/feedback'; +import { navigationCustomizations } from './customizations/navigation'; +import { surfacesCustomizations } from './customizations/surfaces'; +import { + colorSchemes, + cssVariables, + typography, + shadows, + shape, +} from './themePrimitives'; + +export default function AppTheme({ children, disableCustomTheme, themeComponents }) { + const theme = React.useMemo(() => { + return disableCustomTheme + ? {} + : createTheme({ + colorSchemes, + cssVariables, + typography, + shadows, + shape, + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + ...themeComponents, + }, + }); + }, [disableCustomTheme, themeComponents]); + if (disableCustomTheme) { + return children; + } + return ( + + {children} + + ); +} diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx new file mode 100644 index 00000000000000..9e867d6fdbc58e --- /dev/null +++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx @@ -0,0 +1,57 @@ +/** + * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. + * Generated by a script. + */ +import * as React from 'react'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import type { ThemeOptions } from '@mui/material/styles'; +import { inputsCustomizations } from './customizations/inputs'; +import { dataDisplayCustomizations } from './customizations/dataDisplay'; +import { feedbackCustomizations } from './customizations/feedback'; +import { navigationCustomizations } from './customizations/navigation'; +import { surfacesCustomizations } from './customizations/surfaces'; +import { + colorSchemes, + cssVariables, + typography, + shadows, + shape, +} from './themePrimitives'; + +export default function AppTheme({ + children, + disableCustomTheme, + themeComponents, +}: { + children: React.ReactNode; + disableCustomTheme?: boolean; + themeComponents?: ThemeOptions['components']; +}) { + const theme = React.useMemo(() => { + return disableCustomTheme + ? {} + : createTheme({ + colorSchemes, + cssVariables, + typography, + shadows, + shape, + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + ...themeComponents, + }, + }); + }, [disableCustomTheme, themeComponents]); + if (disableCustomTheme) { + return children; + } + return ( + + {children} + + ); +} diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js index 625400640eef43..75f0ad82ddf777 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js @@ -214,3 +214,170 @@ export const getDesignTokens = (mode) => { shadows: customShadows, }; }; + +export const cssVariables = { + colorSchemeSelector: 'data', + cssVarPrefix: 'template', +}; + +export const colorSchemes = { + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + baseShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: 'hsl(220, 30%, 7%)', + }, + text: { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + baseShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }, + }, +}; + +export const typography = { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, +}; + +export const shape = { + borderRadius: 8, +}; + +const defaultShadows = [ + 'var(--mui-palette-baseShadow)', + ...defaultTheme.shadows.slice(1), +]; +export const shadows = defaultShadows; diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts index 41b517b5294fad..9da449b576e8ca 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -20,6 +20,10 @@ declare module '@mui/material/styles/createPalette' { } interface PaletteColor extends ColorRange {} + + interface Palette { + baseShadow: string; + } } const defaultTheme = createTheme(); @@ -233,3 +237,168 @@ export const getDesignTokens = (mode: PaletteMode) => { shadows: customShadows, }; }; + +export const cssVariables = { + colorSchemeSelector: 'data', + cssVarPrefix: 'template', +}; + +export const colorSchemes = { + light: { + palette: { + primary: { + light: brand[200], + main: brand[400], + dark: brand[700], + contrastText: brand[50], + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + }, + grey: { + ...gray, + }, + divider: alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + }, + baseShadow: + 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + }, + }, + dark: { + palette: { + primary: { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }, + info: { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }, + warning: { + light: orange[400], + main: orange[500], + dark: orange[700], + }, + error: { + light: red[400], + main: red[500], + dark: red[700], + }, + success: { + light: green[400], + main: green[500], + dark: green[700], + }, + grey: { + ...gray, + }, + divider: alpha(gray[700], 0.6), + background: { + default: gray[900], + paper: 'hsl(220, 30%, 7%)', + }, + text: { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }, + action: { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }, + baseShadow: + 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', + }, + }, +}; + +export const typography = { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, +}; + +export const shape = { + borderRadius: 8, +}; + +// @ts-ignore +const defaultShadows: Shadows = ['var(--mui-palette-baseShadow)', ...defaultTheme.shadows.slice(1)]; +export const shadows = defaultShadows; diff --git a/docs/data/material/getting-started/templates/sign-in/App.js b/docs/data/material/getting-started/templates/sign-in/App.js index 8122a999e728ab..3ec60415820fb8 100644 --- a/docs/data/material/getting-started/templates/sign-in/App.js +++ b/docs/data/material/getting-started/templates/sign-in/App.js @@ -17,7 +17,7 @@ import MuiCard from '@mui/material/Card'; import { styled, useColorScheme } from '@mui/material/styles'; import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; -import AppTheme from './theme/AppTheme'; +import AppTheme from '../shared-theme/AppTheme'; const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', diff --git a/docs/data/material/getting-started/templates/sign-in/App.tsx b/docs/data/material/getting-started/templates/sign-in/App.tsx index 9f80554ebf7001..61c293c12ef256 100644 --- a/docs/data/material/getting-started/templates/sign-in/App.tsx +++ b/docs/data/material/getting-started/templates/sign-in/App.tsx @@ -17,7 +17,7 @@ import MuiCard from '@mui/material/Card'; import { styled, useColorScheme } from '@mui/material/styles'; import ForgotPassword from './ForgotPassword'; import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons'; -import AppTheme from './theme/AppTheme'; +import AppTheme from '../shared-theme/AppTheme'; const Card = styled(MuiCard)(({ theme }) => ({ display: 'flex', diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js deleted file mode 100644 index 2b4f157597c4ec..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignInTheme from './theme/getSignInTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}) { - const handleChange = (event) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signInTheme = createTheme(getSignInTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} - -TemplateFrame.propTypes = { - children: PropTypes.node, - mode: PropTypes.oneOf(['dark', 'light']).isRequired, - showCustomTheme: PropTypes.bool.isRequired, - toggleColorMode: PropTypes.func.isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - -export default TemplateFrame; diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx deleted file mode 100644 index 3d83d3350a64c8..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { - createTheme, - ThemeProvider, - PaletteMode, - styled, -} from '@mui/material/styles'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Box from '@mui/material/Box'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; -import ToggleColorMode from './ToggleColorMode'; -import getSignInTheme from './theme/getSignInTheme'; - -const StyledAppBar = styled(AppBar)(({ theme }) => ({ - position: 'relative', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - flexShrink: 0, - borderBottom: '1px solid', - borderColor: theme.palette.divider, - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - backgroundImage: 'none', - zIndex: theme.zIndex.drawer + 1, - flex: '0 0 auto', -})); - -interface TemplateFrameProps { - showCustomTheme: boolean; - toggleCustomTheme: (theme: boolean) => void; - mode: PaletteMode; - toggleColorMode: () => void; - children: React.ReactNode; -} - -export default function TemplateFrame({ - showCustomTheme, - toggleCustomTheme, - mode, - toggleColorMode, - children, -}: TemplateFrameProps) { - const handleChange = (event: SelectChangeEvent) => { - toggleCustomTheme(event.target.value === 'custom'); - }; - const signInTheme = createTheme(getSignInTheme(mode)); - - return ( - - - - - - - - - - - - - - - - - {children} - - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.js b/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.js deleted file mode 100644 index a6e0d9b8a740f4..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.js +++ /dev/null @@ -1,260 +0,0 @@ -/** - * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. - * Generated by a script. - */ -import * as React from 'react'; - -import { ThemeProvider, createTheme, alpha } from '@mui/material/styles'; -import { - inputsCustomizations, - dataDisplayCustomizations, - feedbackCustomizations, - navigationCustomizations, - surfacesCustomizations, -} from './customizations'; -// there will be no files imported here, so that the theme becomes a single file -// and can be easily copied between projects - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', -}; - -const theme = createTheme({ - cssVariables: { - colorSchemeSelector: 'data', - cssVarPrefix: 'template', - }, - colorSchemes: { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: 'hsl(220, 30%, 7%)', - }, - text: { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - }, - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - components: { - ...inputsCustomizations, - ...dataDisplayCustomizations, - ...feedbackCustomizations, - ...navigationCustomizations, - ...surfacesCustomizations, - }, -}); - -export default function AppTheme({ children, disableCustomTheme }) { - if (disableCustomTheme) { - return children; - } - return ( - - {children} - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx b/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx deleted file mode 100644 index 56967baee003c5..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/AppTheme.tsx +++ /dev/null @@ -1,292 +0,0 @@ -/** - * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. - * Generated by a script. - */ -import * as React from 'react'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeProvider, createTheme, alpha, Shadows } from '@mui/material/styles'; -import { - inputsCustomizations, - dataDisplayCustomizations, - feedbackCustomizations, - navigationCustomizations, - surfacesCustomizations, -} from './customizations'; -// there will be no files imported here, so that the theme becomes a single file -// and can be easily copied between projects - -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 {} - - interface TypeText { - warning: string; - } -} - -const defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', -}; - -const theme = createTheme({ - cssVariables: { - colorSchemeSelector: 'data', - cssVarPrefix: 'template', - }, - colorSchemes: { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: 'hsl(220, 30%, 7%)', - }, - text: { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - }, - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - components: { - ...inputsCustomizations, - ...dataDisplayCustomizations, - ...feedbackCustomizations, - ...navigationCustomizations, - ...surfacesCustomizations, - }, -}); - -export default function AppTheme({ - children, - disableCustomTheme, -}: { - children: React.ReactNode; - disableCustomTheme?: boolean; -}) { - if (disableCustomTheme) { - return children; - } - return ( - - {children} - - ); -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js deleted file mode 100644 index cf04322a9a6056..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js +++ /dev/null @@ -1,233 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { chipClasses } from '@mui/material/Chip'; -import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, green } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const dataDisplayCustomizations = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - '&.Mui-selected': { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - '&:focus-visible': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - '&:focus-visible': { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, - MuiChip: { - defaultProps: { - size: 'small', - }, - styleOverrides: { - root: ({ theme }) => ({ - border: '1px solid', - borderRadius: '999px', - [`& .${chipClasses.label}`]: { - fontWeight: 600, - }, - variants: [ - { - props: { - color: 'default', - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - [`& .${chipClasses.label}`]: { - color: gray[500], - }, - [`& .${chipClasses.icon}`]: { - color: gray[500], - }, - ...theme.applyStyles('dark', { - borderColor: gray[700], - backgroundColor: gray[800], - [`& .${chipClasses.label}`]: { - color: gray[300], - }, - [`& .${chipClasses.icon}`]: { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: 'success', - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - [`& .${chipClasses.label}`]: { - color: green[500], - }, - [`& .${chipClasses.icon}`]: { - color: green[500], - }, - ...theme.applyStyles('dark', { - borderColor: green[800], - backgroundColor: green[900], - [`& .${chipClasses.label}`]: { - color: green[300], - }, - [`& .${chipClasses.icon}`]: { - color: green[300], - }, - }), - }, - }, - { - props: { - color: 'error', - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - [`& .${chipClasses.label}`]: { - color: red[500], - }, - [`& .${chipClasses.icon}`]: { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[800], - backgroundColor: red[900], - [`& .${chipClasses.label}`]: { - color: red[200], - }, - [`& .${chipClasses.icon}`]: { - color: red[300], - }, - }), - }, - }, - { - props: { size: 'small' }, - style: { - maxHeight: 20, - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - [`& .${svgIconClasses.root}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - { - props: { size: 'medium' }, - style: { - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - ], - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: 'flex', - gap: 8, - marginRight: 6, - [`& .${iconButtonClasses.root}`]: { - minWidth: 0, - width: 36, - height: 36, - }, - }, - }, - }, - MuiIcon: { - defaultProps: { - fontSize: 'small', - }, - styleOverrides: { - root: { - variants: [ - { - props: { - fontSize: 'small', - }, - style: { - fontSize: '1rem', - }, - }, - ], - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx deleted file mode 100644 index c93ccbfbcabf85..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { Theme, alpha, Components } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { chipClasses } from '@mui/material/Chip'; -import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, green } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const dataDisplayCustomizations: Components = { - MuiList: { - styleOverrides: { - root: { - padding: '8px', - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: theme.palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - padding: '2px 8px', - borderRadius: theme.shape.borderRadius, - opacity: 0.7, - '&.Mui-selected': { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, - }, - '&:focus-visible': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - '&:focus-visible': { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, - MuiChip: { - defaultProps: { - size: 'small', - }, - styleOverrides: { - root: ({ theme }) => ({ - border: '1px solid', - borderRadius: '999px', - [`& .${chipClasses.label}`]: { - fontWeight: 600, - }, - variants: [ - { - props: { - color: 'default', - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - [`& .${chipClasses.label}`]: { - color: gray[500], - }, - [`& .${chipClasses.icon}`]: { - color: gray[500], - }, - ...theme.applyStyles('dark', { - borderColor: gray[700], - backgroundColor: gray[800], - [`& .${chipClasses.label}`]: { - color: gray[300], - }, - [`& .${chipClasses.icon}`]: { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: 'success', - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - [`& .${chipClasses.label}`]: { - color: green[500], - }, - [`& .${chipClasses.icon}`]: { - color: green[500], - }, - ...theme.applyStyles('dark', { - borderColor: green[800], - backgroundColor: green[900], - [`& .${chipClasses.label}`]: { - color: green[300], - }, - [`& .${chipClasses.icon}`]: { - color: green[300], - }, - }), - }, - }, - { - props: { - color: 'error', - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - [`& .${chipClasses.label}`]: { - color: red[500], - }, - [`& .${chipClasses.icon}`]: { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[800], - backgroundColor: red[900], - [`& .${chipClasses.label}`]: { - color: red[200], - }, - [`& .${chipClasses.icon}`]: { - color: red[300], - }, - }), - }, - }, - { - props: { size: 'small' }, - style: { - maxHeight: 20, - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - [`& .${svgIconClasses.root}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - { - props: { size: 'medium' }, - style: { - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - ], - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: 'flex', - gap: 8, - marginRight: 6, - [`& .${iconButtonClasses.root}`]: { - minWidth: 0, - width: 36, - height: 36, - }, - }, - }, - }, - MuiIcon: { - defaultProps: { - fontSize: 'small', - }, - styleOverrides: { - root: { - variants: [ - { - props: { - fontSize: 'small', - }, - style: { - fontSize: '1rem', - }, - }, - ], - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js deleted file mode 100644 index d521ecbd350128..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray, orange } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const feedbackCustomizations = { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: theme.palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx deleted file mode 100644 index aaf00001b522ca..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Theme, alpha, Components } from '@mui/material/styles'; -import { gray, orange } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const feedbackCustomizations: Components = { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: theme.palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: theme.palette.divider, - }, - }), - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export { inputsCustomizations } from './inputs'; -export { dataDisplayCustomizations } from './dataDisplay'; -export { feedbackCustomizations } from './feedback'; -export { navigationCustomizations } from './navigation'; -export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts deleted file mode 100644 index 91a4485333d139..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { inputsCustomizations } from './inputs'; -export { dataDisplayCustomizations } from './dataDisplay'; -export { feedbackCustomizations } from './feedback'; -export { navigationCustomizations } from './navigation'; -export { surfacesCustomizations } from './surfaces'; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js deleted file mode 100644 index 12cea77491064a..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js +++ /dev/null @@ -1,444 +0,0 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; -import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; -import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const inputsCustomizations = { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: 'border-box', - transition: 'all 100ms ease-in', - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2.25rem', - padding: '8px 12px', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, - border: `1px solid ${gray[700]}`, - '&:hover': { - backgroundImage: 'none', - backgroundColor: gray[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: gray[800], - }, - ...theme.applyStyles('dark', { - color: 'black', - backgroundColor: gray[50], - backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', - border: `1px solid ${gray[50]}`, - '&:hover': { - backgroundImage: 'none', - backgroundColor: gray[300], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: gray[400], - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - backgroundImage: 'none', - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: theme.palette.text.primary, - border: '1px solid', - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - color: brand[700], - border: '1px solid', - borderColor: brand[200], - backgroundColor: brand[50], - '&:hover': { - backgroundColor: brand[100], - borderColor: brand[400], - }, - '&:active': { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles('dark', { - color: brand[50], - border: '1px solid', - borderColor: brand[900], - backgroundColor: alpha(brand[900], 0.3), - '&:hover': { - borderColor: brand[700], - backgroundColor: alpha(brand[900], 0.6), - }, - '&:active': { - backgroundColor: alpha(brand[900], 0.5), - }, - }), - }, - }, - { - props: { - variant: 'text', - }, - style: { - color: gray[600], - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[700], - }, - '&:active': { - backgroundColor: alpha(gray[700], 0.7), - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[100], 0.5), - }, - '&:active': { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles('dark', { - color: brand[100], - '&:hover': { - backgroundColor: alpha(brand[900], 0.5), - }, - '&:active': { - backgroundColor: alpha(brand[900], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - fontWeight: theme.typography.fontWeightMedium, - letterSpacing: 0, - color: theme.palette.text.primary, - border: '1px solid ', - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - width: '2.25rem', - height: '2.25rem', - padding: '0.25rem', - [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, - }, - }, - { - props: { - size: 'medium', - }, - style: { - width: '2.5rem', - height: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - [`& .${toggleButtonGroupClasses.selected}`]: { - color: brand[500], - }, - ...theme.applyStyles('dark', { - [`& .${toggleButtonGroupClasses.selected}`]: { - color: '#fff', - }, - boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: '10px', - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', - [`&.${toggleButtonClasses.selected}`]: { - color: brand[300], - }, - }), - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - indeterminateIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - backgroundColor: alpha(gray[100], 0.4), - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.8), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - input: { - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - input: { - padding: 0, - }, - root: ({ theme }) => ({ - padding: '8px 12px', - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundColor: theme.palette.background.default, - transition: 'border 120ms ease-in', - '&:hover': { - borderColor: gray[400], - }, - [`&.${outlinedInputClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - '&:hover': { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2.25rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - }, - }, - ], - }), - notchedOutline: { - border: 'none', - }, - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx deleted file mode 100644 index 4be4c18628e16e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx +++ /dev/null @@ -1,445 +0,0 @@ -import * as React from 'react'; -import { alpha, Theme, Components } from '@mui/material/styles'; -import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; -import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const inputsCustomizations: Components = { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: 'border-box', - transition: 'all 100ms ease-in', - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2.25rem', - padding: '8px 12px', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', // 40px - }, - }, - { - props: { - color: 'primary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, - border: `1px solid ${gray[700]}`, - '&:hover': { - backgroundImage: 'none', - backgroundColor: gray[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: gray[800], - }, - ...theme.applyStyles('dark', { - color: 'black', - backgroundColor: gray[50], - backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)', - border: `1px solid ${gray[50]}`, - '&:hover': { - backgroundImage: 'none', - backgroundColor: gray[300], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: gray[400], - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'contained', - }, - style: { - color: 'white', - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - '&:hover': { - backgroundColor: brand[700], - boxShadow: 'none', - }, - '&:active': { - backgroundColor: brand[700], - backgroundImage: 'none', - }, - }, - }, - { - props: { - variant: 'outlined', - }, - style: { - color: theme.palette.text.primary, - border: '1px solid', - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], - - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'outlined', - }, - style: { - color: brand[700], - border: '1px solid', - borderColor: brand[200], - backgroundColor: brand[50], - '&:hover': { - backgroundColor: brand[100], - borderColor: brand[400], - }, - '&:active': { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles('dark', { - color: brand[50], - border: '1px solid', - borderColor: brand[900], - backgroundColor: alpha(brand[900], 0.3), - '&:hover': { - borderColor: brand[700], - backgroundColor: alpha(brand[900], 0.6), - }, - '&:active': { - backgroundColor: alpha(brand[900], 0.5), - }, - }), - }, - }, - { - props: { - variant: 'text', - }, - style: { - color: gray[600], - '&:hover': { - backgroundColor: gray[100], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - color: gray[50], - '&:hover': { - backgroundColor: gray[700], - }, - '&:active': { - backgroundColor: alpha(gray[700], 0.7), - }, - }), - }, - }, - { - props: { - color: 'secondary', - variant: 'text', - }, - style: { - color: brand[700], - '&:hover': { - backgroundColor: alpha(brand[100], 0.5), - }, - '&:active': { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles('dark', { - color: brand[100], - '&:hover': { - backgroundColor: alpha(brand[900], 0.5), - }, - '&:active': { - backgroundColor: alpha(brand[900], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: 'none', - borderRadius: theme.shape.borderRadius, - textTransform: 'none', - fontWeight: theme.typography.fontWeightMedium, - letterSpacing: 0, - color: theme.palette.text.primary, - border: '1px solid ', - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - '&:hover': { - backgroundColor: gray[100], - borderColor: gray[300], - }, - '&:active': { - backgroundColor: gray[200], - }, - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - borderColor: gray[700], - '&:hover': { - backgroundColor: gray[900], - borderColor: gray[600], - }, - '&:active': { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - width: '2.25rem', - height: '2.25rem', - padding: '0.25rem', - [`& .${svgIconClasses.root}`]: { fontSize: '1rem' }, - }, - }, - { - props: { - size: 'medium', - }, - style: { - width: '2.5rem', - height: '2.5rem', - }, - }, - ], - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: '10px', - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - [`& .${toggleButtonGroupClasses.selected}`]: { - color: brand[500], - }, - ...theme.applyStyles('dark', { - [`& .${toggleButtonGroupClasses.selected}`]: { - color: '#fff', - }, - boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '12px 16px', - textTransform: 'none', - borderRadius: '10px', - fontWeight: 500, - ...theme.applyStyles('dark', { - color: gray[400], - boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)', - [`&.${toggleButtonClasses.selected}`]: { - color: brand[300], - }, - }), - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - indeterminateIcon: , - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: '1px solid ', - borderColor: alpha(gray[300], 0.8), - boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset', - backgroundColor: alpha(gray[100], 0.4), - transition: 'border-color, background-color, 120ms ease-in', - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - borderColor: brand[400], - }, - '&.Mui-checked': { - color: 'white', - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - '&:hover': { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles('dark', { - borderColor: alpha(gray[700], 0.8), - boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset', - backgroundColor: alpha(gray[900], 0.8), - '&:hover': { - borderColor: brand[300], - }, - '&.Mui-focusVisible': { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: 'none', - }, - input: { - '&::placeholder': { - opacity: 0.7, - color: gray[500], - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - input: { - padding: 0, - }, - root: ({ theme }) => ({ - padding: '8px 12px', - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundColor: theme.palette.background.default, - transition: 'border 120ms ease-in', - '&:hover': { - borderColor: gray[400], - }, - [`&.${outlinedInputClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], - }, - ...theme.applyStyles('dark', { - '&:hover': { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: 'small', - }, - style: { - height: '2.25rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - height: '2.5rem', - }, - }, - ], - }), - notchedOutline: { - border: 'none', - }, - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.grey[500], - ...theme.applyStyles('dark', { - color: theme.palette.grey[400], - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js deleted file mode 100644 index ded180025db59e..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js +++ /dev/null @@ -1,278 +0,0 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; - -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { dividerClasses } from '@mui/material/Divider'; -import { menuItemClasses } from '@mui/material/MenuItem'; -import { selectClasses } from '@mui/material/Select'; -import { tabClasses } from '@mui/material/Tab'; -import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const navigationCustomizations = { - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - padding: '6px 8px', - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - [`&.${menuItemClasses.selected}`]: { - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - }), - }, - }, - MuiMenu: { - styleOverrides: { - list: { - gap: '0px', - [`&.${dividerClasses.root}`]: { - margin: '0 -8px', - }, - }, - paper: ({ theme }) => ({ - marginTop: '4px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - background: 'hsl(0, 0%, 100%)', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - [`& .${buttonBaseClasses.root}`]: { - '&.Mui-selected': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - ...theme.applyStyles('dark', { - background: gray[900], - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: React.forwardRef((props, ref) => ( - - )), - }, - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: gray[200], - backgroundColor: theme.palette.background.paper, - boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, - '&:hover': { - borderColor: gray[300], - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[400], - }, - '&:before, &:after': { - display: 'none', - }, - ...theme.applyStyles('dark', { - borderRadius: theme.shape.borderRadius, - borderColor: gray[700], - backgroundColor: theme.palette.background.paper, - boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, - '&:hover': { - borderColor: alpha(gray[700], 0.7), - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[900], - }, - '&:before, &:after': { - display: 'none', - }, - }), - }), - select: ({ theme }) => ({ - display: 'flex', - alignItems: 'center', - ...theme.applyStyles('dark', { - display: 'flex', - alignItems: 'center', - '&:focus-visible': { - backgroundColor: gray[900], - }, - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.primary, - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - width: 'fit-content', - '&::before': { - content: '""', - position: 'absolute', - width: '100%', - height: '1px', - bottom: 0, - left: 0, - backgroundColor: theme.palette.text.secondary, - opacity: 0.3, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: 0, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - }), - }, - }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - '&.Mui-selected': { - color: 'white', - backgroundColor: theme.palette.grey[900], - }, - ...theme.applyStyles('dark', { - '&.Mui-selected': { - color: 'black', - backgroundColor: theme.palette.grey[50], - }, - }), - }), - }, - }, - MuiTabs: { - styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], - }), - }), - }, - }, - MuiTab: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], - }, - [`&.${tabClasses.selected}`]: { - color: gray[900], - }, - ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - [`&.${tabClasses.selected}`]: { - color: '#fff', - }, - }), - }), - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: '1px solid', - borderColor: theme.palette.divider, - flex: 1, - borderRadius: '99px', - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: 'transparent', - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: '50%', - '& text': { - display: 'none', - }, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.main, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.main, - }, - ...theme.applyStyles('dark', { - border: `1px solid ${gray[700]}`, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.light, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.6, - ...theme.applyStyles('dark', { opacity: 0.5 }), - }, - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx deleted file mode 100644 index f6b92e573f6316..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import * as React from 'react'; -import { Theme, alpha, Components } from '@mui/material/styles'; -import { SvgIconProps } from '@mui/material/SvgIcon'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { dividerClasses } from '@mui/material/Divider'; -import { menuItemClasses } from '@mui/material/MenuItem'; -import { selectClasses } from '@mui/material/Select'; -import { tabClasses } from '@mui/material/Tab'; -import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const navigationCustomizations: Components = { - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - padding: '6px 8px', - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - [`&.${menuItemClasses.selected}`]: { - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - }), - }, - }, - MuiMenu: { - styleOverrides: { - list: { - gap: '0px', - [`&.${dividerClasses.root}`]: { - margin: '0 -8px', - }, - }, - paper: ({ theme }) => ({ - marginTop: '4px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundImage: 'none', - background: 'hsl(0, 0%, 100%)', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - [`& .${buttonBaseClasses.root}`]: { - '&.Mui-selected': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - ...theme.applyStyles('dark', { - background: gray[900], - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: React.forwardRef((props, ref) => ( - - )), - }, - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: gray[200], - backgroundColor: theme.palette.background.paper, - boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, - '&:hover': { - borderColor: gray[300], - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[400], - }, - '&:before, &:after': { - display: 'none', - }, - - ...theme.applyStyles('dark', { - borderRadius: theme.shape.borderRadius, - borderColor: gray[700], - backgroundColor: theme.palette.background.paper, - boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, - '&:hover': { - borderColor: alpha(gray[700], 0.7), - backgroundColor: theme.palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[900], - }, - '&:before, &:after': { - display: 'none', - }, - }), - }), - select: ({ theme }) => ({ - display: 'flex', - alignItems: 'center', - ...theme.applyStyles('dark', { - display: 'flex', - alignItems: 'center', - '&:focus-visible': { - backgroundColor: gray[900], - }, - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: theme.palette.text.primary, - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - width: 'fit-content', - '&::before': { - content: '""', - position: 'absolute', - width: '100%', - height: '1px', - bottom: 0, - left: 0, - backgroundColor: theme.palette.text.secondary, - opacity: 0.3, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: 0, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - }), - }, - }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - '&.Mui-selected': { - color: 'white', - backgroundColor: theme.palette.grey[900], - }, - ...theme.applyStyles('dark', { - '&.Mui-selected': { - color: 'black', - backgroundColor: theme.palette.grey[50], - }, - }), - }), - }, - }, - MuiTabs: { - styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], - }), - }), - }, - }, - MuiTab: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: theme.palette.text.secondary, - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], - }, - [`&.${tabClasses.selected}`]: { - color: gray[900], - }, - ...theme.applyStyles('dark', { - ':hover': { - color: theme.palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - [`&.${tabClasses.selected}`]: { - color: '#fff', - }, - }), - }), - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: '1px solid', - borderColor: theme.palette.divider, - flex: 1, - borderRadius: '99px', - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: 'transparent', - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: '50%', - '& text': { - display: 'none', - }, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.main, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.main, - }, - ...theme.applyStyles('dark', { - border: `1px solid ${gray[700]}`, - '&.Mui-active': { - border: 'none', - color: theme.palette.primary.light, - }, - '&.Mui-completed': { - border: 'none', - color: theme.palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.6, - ...theme.applyStyles('dark', { opacity: 0.5 }), - }, - }), - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js deleted file mode 100644 index ff4a53884964ae..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js +++ /dev/null @@ -1,113 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const surfacesCustomizations = { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 4, - overflow: 'clip', - backgroundColor: theme.palette.background.default, - border: '1px solid', - borderColor: theme.palette.divider, - ':before': { - backgroundColor: 'transparent', - }, - '&:not(:last-of-type)': { - borderBottom: 'none', - }, - '&:first-of-type': { - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: theme.shape.borderRadius, - borderBottomRightRadius: theme.shape.borderRadius, - }, - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[50] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - gap: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiCardHeader: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiCardActions: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts deleted file mode 100644 index 5bcdfc5c055b0f..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { alpha, Theme, Components } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const surfacesCustomizations: Components = { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 4, - overflow: 'clip', - backgroundColor: theme.palette.background.default, - border: '1px solid', - borderColor: theme.palette.divider, - ':before': { - backgroundColor: 'transparent', - }, - '&:not(:last-of-type)': { - borderBottom: 'none', - }, - '&:first-of-type': { - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: theme.shape.borderRadius, - borderBottomRightRadius: theme.shape.borderRadius, - }, - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[50] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - gap: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${theme.palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiCardHeader: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiCardActions: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js deleted file mode 100644 index 0e7b709b13affd..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js +++ /dev/null @@ -1,21 +0,0 @@ -import { getDesignTokens } from './themePrimitives'; -import { - inputsCustomizations, - dataDisplayCustomizations, - feedbackCustomizations, - navigationCustomizations, - surfacesCustomizations, -} from './customizations'; - -export default function getSignInTheme(mode) { - return { - ...getDesignTokens(mode), - components: { - ...inputsCustomizations, - ...dataDisplayCustomizations, - ...feedbackCustomizations, - ...navigationCustomizations, - ...surfacesCustomizations, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx deleted file mode 100644 index 5354fc57af3932..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type {} from '@mui/material/themeCssVarsAugmentation'; -import { ThemeOptions, PaletteMode } from '@mui/material/styles'; -import { getDesignTokens } from './themePrimitives'; -import { - inputsCustomizations, - dataDisplayCustomizations, - feedbackCustomizations, - navigationCustomizations, - surfacesCustomizations, -} from './customizations'; - -export default function getSignInTheme(mode: PaletteMode): ThemeOptions { - return { - ...getDesignTokens(mode), - components: { - ...inputsCustomizations, - ...dataDisplayCustomizations, - ...feedbackCustomizations, - ...navigationCustomizations, - ...surfacesCustomizations, - }, - }; -} diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js deleted file mode 100644 index 625400640eef43..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js +++ /dev/null @@ -1,216 +0,0 @@ -import { createTheme, alpha } from '@mui/material/styles'; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', -}; - -export const getDesignTokens = (mode) => { - customShadows[1] = - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; - - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { - primary: 'hsl(0, 0%, 100%)', - secondary: gray[400], - }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts deleted file mode 100644 index 41b517b5294fad..00000000000000 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts +++ /dev/null @@ -1,235 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; - -declare module '@mui/material/Paper' { - interface PaperPropsVariantOverrides { - highlighted: true; - } -} -declare module '@mui/material/styles/createPalette' { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} -} - -const defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -export const brand = { - 50: 'hsl(210, 100%, 95%)', - 100: 'hsl(210, 100%, 92%)', - 200: 'hsl(210, 100%, 80%)', - 300: 'hsl(210, 100%, 65%)', - 400: 'hsl(210, 98%, 48%)', - 500: 'hsl(210, 98%, 42%)', - 600: 'hsl(210, 98%, 55%)', - 700: 'hsl(210, 100%, 35%)', - 800: 'hsl(210, 100%, 16%)', - 900: 'hsl(210, 100%, 21%)', -}; - -export const gray = { - 50: 'hsl(220, 35%, 97%)', - 100: 'hsl(220, 30%, 94%)', - 200: 'hsl(220, 20%, 88%)', - 300: 'hsl(220, 20%, 80%)', - 400: 'hsl(220, 20%, 65%)', - 500: 'hsl(220, 20%, 42%)', - 600: 'hsl(220, 20%, 35%)', - 700: 'hsl(220, 20%, 25%)', - 800: 'hsl(220, 30%, 6%)', - 900: 'hsl(220, 35%, 3%)', -}; - -export const green = { - 50: 'hsl(120, 80%, 98%)', - 100: 'hsl(120, 75%, 94%)', - 200: 'hsl(120, 75%, 87%)', - 300: 'hsl(120, 61%, 77%)', - 400: 'hsl(120, 44%, 53%)', - 500: 'hsl(120, 59%, 30%)', - 600: 'hsl(120, 70%, 25%)', - 700: 'hsl(120, 75%, 16%)', - 800: 'hsl(120, 84%, 10%)', - 900: 'hsl(120, 87%, 6%)', -}; - -export const orange = { - 50: 'hsl(45, 100%, 97%)', - 100: 'hsl(45, 92%, 90%)', - 200: 'hsl(45, 94%, 80%)', - 300: 'hsl(45, 90%, 65%)', - 400: 'hsl(45, 90%, 40%)', - 500: 'hsl(45, 90%, 35%)', - 600: 'hsl(45, 91%, 25%)', - 700: 'hsl(45, 94%, 20%)', - 800: 'hsl(45, 95%, 16%)', - 900: 'hsl(45, 93%, 12%)', -}; - -export const red = { - 50: 'hsl(0, 100%, 97%)', - 100: 'hsl(0, 92%, 90%)', - 200: 'hsl(0, 94%, 80%)', - 300: 'hsl(0, 90%, 65%)', - 400: 'hsl(0, 90%, 40%)', - 500: 'hsl(0, 90%, 30%)', - 600: 'hsl(0, 91%, 25%)', - 700: 'hsl(0, 94%, 18%)', - 800: 'hsl(0, 95%, 12%)', - 900: 'hsl(0, 93%, 6%)', -}; - -export const getDesignTokens = (mode: PaletteMode) => { - customShadows[1] = - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; - - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; From 0e236e118cb7f8d5be878623dbb042e0f643164a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 5 Sep 2024 11:33:38 +0700 Subject: [PATCH 04/36] update TemplateFrame to use button --- docs/src/modules/components/TemplateFrame.js | 341 +++++++++++++++---- 1 file changed, 274 insertions(+), 67 deletions(-) diff --git a/docs/src/modules/components/TemplateFrame.js b/docs/src/modules/components/TemplateFrame.js index 8ba144a79d542e..270911fe7d62de 100644 --- a/docs/src/modules/components/TemplateFrame.js +++ b/docs/src/modules/components/TemplateFrame.js @@ -2,7 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { createTheme, ThemeProvider, styled, useColorScheme } from '@mui/material/styles'; -import Select from '@mui/material/Select'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio, { radioClasses } from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import Tooltip from '@mui/material/Tooltip'; +import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; @@ -11,6 +15,7 @@ import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import SvgIcon from '@mui/material/SvgIcon'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; +import PaletteIcon from '@mui/icons-material/Palette'; import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox'; import sourceMaterialTemplates from 'docs/src/modules/joy/sourceMaterialTemplates'; @@ -36,24 +41,221 @@ const defaultTheme = createTheme({ colorSchemes: { light: true, dark: true }, }); -function ColorSchemeToggle() { +function System() { + return ( + + + + ); +} + +function DarkMode() { + return ( + + + + ); +} + +function LightMode() { + return ( + + + + + + + + + + + + ); +} + +export function ColorSchemeControls() { const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return null; + if (!mode) { + return ( + div': { lineHeight: 0 }, + '& svg': { transform: 'scale(0.8)' }, + }} + > +
+ +
+
+ +
+
+ +
+ + ); } return ( - + { + setMode(event.target.value); + }} + > + } + icon={} + /> + } + label="" + /> + } icon={} /> + } + label="" + /> + } + icon={} + /> + } + label="" + /> + + ); +} + +export function ThemeSelector({ value, onChange }) { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + const handleMode = (newValue) => () => { + onChange(newValue); + handleClose(); + }; + return ( + + + + + + + + + Custom Theme + + + Material Design 2 + + + ); } +ThemeSelector.propTypes = { + onChange: PropTypes.func.isRequired, + value: PropTypes.string.isRequired, +}; + function TemplateFrame({ children }) { const [selectedTheme, setSelectedTheme] = React.useState('custom'); const materialTemplates = sourceMaterialTemplates(); @@ -77,72 +279,77 @@ function TemplateFrame({ children }) { justifyContent: 'space-between', width: '100%', p: '8px 12px', + gap: 1, }} > - - - - - + *': { width: 'max-content' } }}> - - + + + + + *': { flexShrink: 0 }, + }} + > + + + codeSandbox + .createMaterialTemplate({ + ...item, + title: `Sign in Template - Material UI`, + githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${ + process.env.LIB_VERSION + }/docs/data/material/templates/sign-in/App.${ + item.codeVariant === 'TS' ? 'tsx' : 'js' + }`, + }) + .openSandbox() + } + sx={{ alignSelf: 'center' }} + > + + + + + + setSelectedTheme(newTheme)} + /> {React.isValidElement(children) - ? React.cloneElement(children, { disableCustomTheme: selectedTheme === 'material' }) + ? React.cloneElement(children, { disableCustomTheme: selectedTheme === 'material2' }) : null} From 52ee07e8b180caf35e0f49a95ba986d8b56ebb11 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 5 Sep 2024 11:58:52 +0700 Subject: [PATCH 05/36] fix dark mode flicker issue --- .../customizations/dataDisplay.js | 6 +-- .../customizations/dataDisplay.tsx | 6 +-- .../shared-theme/customizations/feedback.js | 4 +- .../shared-theme/customizations/feedback.tsx | 4 +- .../shared-theme/customizations/inputs.js | 20 ++++---- .../shared-theme/customizations/inputs.tsx | 20 ++++---- .../shared-theme/customizations/navigation.js | 50 +++++++++---------- .../customizations/navigation.tsx | 50 +++++++++---------- .../shared-theme/customizations/surfaces.js | 18 +++---- .../shared-theme/customizations/surfaces.ts | 18 +++---- docs/pages/_document.js | 1 + 11 files changed, 99 insertions(+), 98 deletions(-) diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js index cf04322a9a6056..b75f8bc2f3120c 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js @@ -24,7 +24,7 @@ export const dataDisplayCustomizations = { [`& .${svgIconClasses.root}`]: { width: '1rem', height: '1rem', - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, }, [`& .${typographyClasses.root}`]: { fontWeight: 500, @@ -33,13 +33,13 @@ export const dataDisplayCustomizations = { display: 'flex', gap: 8, padding: '2px 8px', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, opacity: 0.7, '&.Mui-selected': { opacity: 1, backgroundColor: alpha(theme.palette.action.selected, 0.3), [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }, '&:focus-visible': { backgroundColor: alpha(theme.palette.action.selected, 0.3), diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx index c93ccbfbcabf85..b6b2b4613ede81 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx @@ -24,7 +24,7 @@ export const dataDisplayCustomizations: Components = { [`& .${svgIconClasses.root}`]: { width: '1rem', height: '1rem', - color: theme.palette.text.secondary, + color: (theme.vars || theme).palette.text.secondary, }, [`& .${typographyClasses.root}`]: { fontWeight: 500, @@ -33,13 +33,13 @@ export const dataDisplayCustomizations: Components = { display: 'flex', gap: 8, padding: '2px 8px', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, opacity: 0.7, '&.Mui-selected': { opacity: 1, backgroundColor: alpha(theme.palette.action.selected, 0.3), [`& .${svgIconClasses.root}`]: { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, }, '&:focus-visible': { backgroundColor: alpha(theme.palette.action.selected, 0.3), diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js index d521ecbd350128..d531c3005df8c4 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js @@ -8,7 +8,7 @@ export const feedbackCustomizations = { root: ({ theme }) => ({ borderRadius: 10, backgroundColor: orange[100], - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: `1px solid ${alpha(orange[300], 0.5)}`, '& .MuiAlert-icon': { color: orange[500], @@ -26,7 +26,7 @@ export const feedbackCustomizations = { '& .MuiDialog-paper': { borderRadius: '10px', border: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, }, }), }, diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx index aaf00001b522ca..6d475c90d3369f 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx @@ -8,7 +8,7 @@ export const feedbackCustomizations: Components = { root: ({ theme }) => ({ borderRadius: 10, backgroundColor: orange[100], - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: `1px solid ${alpha(orange[300], 0.5)}`, '& .MuiAlert-icon': { color: orange[500], @@ -26,7 +26,7 @@ export const feedbackCustomizations: Components = { '& .MuiDialog-paper': { borderRadius: '10px', border: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, }, }), }, diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js index 12cea77491064a..5df212da3008c0 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js @@ -31,7 +31,7 @@ export const inputsCustomizations = { styleOverrides: { root: ({ theme }) => ({ boxShadow: 'none', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, textTransform: 'none', variants: [ { @@ -113,7 +113,7 @@ export const inputsCustomizations = { variant: 'outlined', }, style: { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: '1px solid', borderColor: gray[200], backgroundColor: alpha(gray[50], 0.3), @@ -224,11 +224,11 @@ export const inputsCustomizations = { styleOverrides: { root: ({ theme }) => ({ boxShadow: 'none', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, textTransform: 'none', fontWeight: theme.typography.fontWeightMedium, letterSpacing: 0, - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: '1px solid ', borderColor: gray[200], backgroundColor: alpha(gray[50], 0.3), @@ -382,10 +382,10 @@ export const inputsCustomizations = { }, root: ({ theme }) => ({ padding: '8px 12px', - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundColor: theme.palette.background.default, + color: (theme.vars || theme).palette.text.primary, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + backgroundColor: (theme.vars || theme).palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -426,9 +426,9 @@ export const inputsCustomizations = { MuiInputAdornment: { styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.grey[500], + color: (theme.vars || theme).palette.grey[500], ...theme.applyStyles('dark', { - color: theme.palette.grey[400], + color: (theme.vars || theme).palette.grey[400], }), }), }, diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx index 4be4c18628e16e..b384563b700463 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx @@ -31,7 +31,7 @@ export const inputsCustomizations: Components = { styleOverrides: { root: ({ theme }) => ({ boxShadow: 'none', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, textTransform: 'none', variants: [ { @@ -113,7 +113,7 @@ export const inputsCustomizations: Components = { variant: 'outlined', }, style: { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: '1px solid', borderColor: gray[200], backgroundColor: alpha(gray[50], 0.3), @@ -225,11 +225,11 @@ export const inputsCustomizations: Components = { styleOverrides: { root: ({ theme }) => ({ boxShadow: 'none', - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, textTransform: 'none', fontWeight: theme.typography.fontWeightMedium, letterSpacing: 0, - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, border: '1px solid ', borderColor: gray[200], backgroundColor: alpha(gray[50], 0.3), @@ -383,10 +383,10 @@ export const inputsCustomizations: Components = { }, root: ({ theme }) => ({ padding: '8px 12px', - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, - backgroundColor: theme.palette.background.default, + color: (theme.vars || theme).palette.text.primary, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, + backgroundColor: (theme.vars || theme).palette.background.default, transition: 'border 120ms ease-in', '&:hover': { borderColor: gray[400], @@ -427,9 +427,9 @@ export const inputsCustomizations: Components = { MuiInputAdornment: { styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.grey[500], + color: (theme.vars || theme).palette.grey[500], ...theme.applyStyles('dark', { - color: theme.palette.grey[400], + color: (theme.vars || theme).palette.grey[400], }), }), }, diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js index ded180025db59e..6d8683dad4ebe0 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js @@ -14,7 +14,7 @@ export const navigationCustomizations = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, padding: '6px 8px', [`&.${menuItemClasses.focusVisible}`]: { backgroundColor: 'transparent', @@ -37,8 +37,8 @@ export const navigationCustomizations = { }, paper: ({ theme }) => ({ marginTop: '4px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, backgroundImage: 'none', background: 'hsl(0, 0%, 100%)', boxShadow: @@ -64,14 +64,14 @@ export const navigationCustomizations = { }, styleOverrides: { root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, border: '1px solid', borderColor: gray[200], - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || 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, + backgroundColor: (theme.vars || theme).palette.background.paper, boxShadow: 'none', }, [`&.${selectClasses.focused}`]: { @@ -82,13 +82,13 @@ export const navigationCustomizations = { display: 'none', }, ...theme.applyStyles('dark', { - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, borderColor: gray[700], - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || 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, + backgroundColor: (theme.vars || theme).palette.background.paper, boxShadow: 'none', }, [`&.${selectClasses.focused}`]: { @@ -119,7 +119,7 @@ export const navigationCustomizations = { }, styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, fontWeight: 500, position: 'relative', textDecoration: 'none', @@ -131,7 +131,7 @@ export const navigationCustomizations = { height: '1px', bottom: 0, left: 0, - backgroundColor: theme.palette.text.secondary, + backgroundColor: (theme.vars || theme).palette.text.secondary, opacity: 0.3, transition: 'width 0.3s ease, opacity 0.3s ease', }, @@ -149,7 +149,7 @@ export const navigationCustomizations = { MuiDrawer: { styleOverrides: { paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, }), }, }, @@ -158,12 +158,12 @@ export const navigationCustomizations = { root: ({ theme }) => ({ '&.Mui-selected': { color: 'white', - backgroundColor: theme.palette.grey[900], + backgroundColor: (theme.vars || theme).palette.grey[900], }, ...theme.applyStyles('dark', { '&.Mui-selected': { color: 'black', - backgroundColor: theme.palette.grey[50], + backgroundColor: (theme.vars || theme).palette.grey[50], }, }), }), @@ -173,9 +173,9 @@ export const navigationCustomizations = { styleOverrides: { root: { minHeight: 'fit-content' }, indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + backgroundColor: (theme.vars || theme).palette.grey[800], ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + backgroundColor: (theme.vars || theme).palette.grey[200], }), }), }, @@ -188,12 +188,12 @@ export const navigationCustomizations = { textTransform: 'none', minWidth: 'fit-content', minHeight: 'fit-content', - color: theme.palette.text.secondary, - borderRadius: theme.shape.borderRadius, + color: (theme.vars || theme).palette.text.secondary, + borderRadius: (theme.vars || theme).shape.borderRadius, border: '1px solid', borderColor: 'transparent', ':hover': { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, backgroundColor: gray[100], borderColor: gray[200], }, @@ -202,7 +202,7 @@ export const navigationCustomizations = { }, ...theme.applyStyles('dark', { ':hover': { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, backgroundColor: gray[800], borderColor: gray[700], }, @@ -217,7 +217,7 @@ export const navigationCustomizations = { styleOverrides: { line: ({ theme }) => ({ borderTop: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, flex: 1, borderRadius: '99px', }), @@ -236,21 +236,21 @@ export const navigationCustomizations = { }, '&.Mui-active': { border: 'none', - color: theme.palette.primary.main, + color: (theme.vars || theme).palette.primary.main, }, '&.Mui-completed': { border: 'none', - color: theme.palette.success.main, + color: (theme.vars || theme).palette.success.main, }, ...theme.applyStyles('dark', { border: `1px solid ${gray[700]}`, '&.Mui-active': { border: 'none', - color: theme.palette.primary.light, + color: (theme.vars || theme).palette.primary.light, }, '&.Mui-completed': { border: 'none', - color: theme.palette.success.light, + color: (theme.vars || theme).palette.success.light, }, }), variants: [ diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx index f6b92e573f6316..3cb9713915d5ae 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx @@ -14,7 +14,7 @@ export const navigationCustomizations: Components = { MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, padding: '6px 8px', [`&.${menuItemClasses.focusVisible}`]: { backgroundColor: 'transparent', @@ -37,8 +37,8 @@ export const navigationCustomizations: Components = { }, paper: ({ theme }) => ({ marginTop: '4px', - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, backgroundImage: 'none', background: 'hsl(0, 0%, 100%)', boxShadow: @@ -64,14 +64,14 @@ export const navigationCustomizations: Components = { }, styleOverrides: { root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, border: '1px solid', borderColor: gray[200], - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || 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, + backgroundColor: (theme.vars || theme).palette.background.paper, boxShadow: 'none', }, [`&.${selectClasses.focused}`]: { @@ -83,13 +83,13 @@ export const navigationCustomizations: Components = { }, ...theme.applyStyles('dark', { - borderRadius: theme.shape.borderRadius, + borderRadius: (theme.vars || theme).shape.borderRadius, borderColor: gray[700], - backgroundColor: theme.palette.background.paper, + backgroundColor: (theme.vars || 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, + backgroundColor: (theme.vars || theme).palette.background.paper, boxShadow: 'none', }, [`&.${selectClasses.focused}`]: { @@ -120,7 +120,7 @@ export const navigationCustomizations: Components = { }, styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, fontWeight: 500, position: 'relative', textDecoration: 'none', @@ -132,7 +132,7 @@ export const navigationCustomizations: Components = { height: '1px', bottom: 0, left: 0, - backgroundColor: theme.palette.text.secondary, + backgroundColor: (theme.vars || theme).palette.text.secondary, opacity: 0.3, transition: 'width 0.3s ease, opacity 0.3s ease', }, @@ -150,7 +150,7 @@ export const navigationCustomizations: Components = { MuiDrawer: { styleOverrides: { paper: ({ theme }) => ({ - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, }), }, }, @@ -159,12 +159,12 @@ export const navigationCustomizations: Components = { root: ({ theme }) => ({ '&.Mui-selected': { color: 'white', - backgroundColor: theme.palette.grey[900], + backgroundColor: (theme.vars || theme).palette.grey[900], }, ...theme.applyStyles('dark', { '&.Mui-selected': { color: 'black', - backgroundColor: theme.palette.grey[50], + backgroundColor: (theme.vars || theme).palette.grey[50], }, }), }), @@ -174,9 +174,9 @@ export const navigationCustomizations: Components = { styleOverrides: { root: { minHeight: 'fit-content' }, indicator: ({ theme }) => ({ - backgroundColor: theme.palette.grey[800], + backgroundColor: (theme.vars || theme).palette.grey[800], ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[200], + backgroundColor: (theme.vars || theme).palette.grey[200], }), }), }, @@ -189,12 +189,12 @@ export const navigationCustomizations: Components = { textTransform: 'none', minWidth: 'fit-content', minHeight: 'fit-content', - color: theme.palette.text.secondary, - borderRadius: theme.shape.borderRadius, + color: (theme.vars || theme).palette.text.secondary, + borderRadius: (theme.vars || theme).shape.borderRadius, border: '1px solid', borderColor: 'transparent', ':hover': { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, backgroundColor: gray[100], borderColor: gray[200], }, @@ -203,7 +203,7 @@ export const navigationCustomizations: Components = { }, ...theme.applyStyles('dark', { ':hover': { - color: theme.palette.text.primary, + color: (theme.vars || theme).palette.text.primary, backgroundColor: gray[800], borderColor: gray[700], }, @@ -218,7 +218,7 @@ export const navigationCustomizations: Components = { styleOverrides: { line: ({ theme }) => ({ borderTop: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, flex: 1, borderRadius: '99px', }), @@ -237,21 +237,21 @@ export const navigationCustomizations: Components = { }, '&.Mui-active': { border: 'none', - color: theme.palette.primary.main, + color: (theme.vars || theme).palette.primary.main, }, '&.Mui-completed': { border: 'none', - color: theme.palette.success.main, + color: (theme.vars || theme).palette.success.main, }, ...theme.applyStyles('dark', { border: `1px solid ${gray[700]}`, '&.Mui-active': { border: 'none', - color: theme.palette.primary.light, + color: (theme.vars || theme).palette.primary.light, }, '&.Mui-completed': { border: 'none', - color: theme.palette.success.light, + color: (theme.vars || theme).palette.success.light, }, }), variants: [ diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js index ff4a53884964ae..0cc5229f48c89d 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js @@ -12,9 +12,9 @@ export const surfacesCustomizations = { root: ({ theme }) => ({ padding: 4, overflow: 'clip', - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, border: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, ':before': { backgroundColor: 'transparent', }, @@ -22,12 +22,12 @@ export const surfacesCustomizations = { borderBottom: 'none', }, '&:first-of-type': { - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, }, '&:last-of-type': { - borderBottomLeftRadius: theme.shape.borderRadius, - borderBottomRightRadius: theme.shape.borderRadius, + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, }, }), }, @@ -63,8 +63,8 @@ export const surfacesCustomizations = { gap: 16, transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', ...theme.applyStyles('dark', { backgroundColor: gray[800], @@ -75,7 +75,7 @@ export const surfacesCustomizations = { variant: 'outlined', }, style: { - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', background: 'hsl(0, 0%, 100%)', ...theme.applyStyles('dark', { diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts index 5bcdfc5c055b0f..f47a6d8071cb97 100644 --- a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts +++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts @@ -12,9 +12,9 @@ export const surfacesCustomizations: Components = { root: ({ theme }) => ({ padding: 4, overflow: 'clip', - backgroundColor: theme.palette.background.default, + backgroundColor: (theme.vars || theme).palette.background.default, border: '1px solid', - borderColor: theme.palette.divider, + borderColor: (theme.vars || theme).palette.divider, ':before': { backgroundColor: 'transparent', }, @@ -22,12 +22,12 @@ export const surfacesCustomizations: Components = { borderBottom: 'none', }, '&:first-of-type': { - borderTopLeftRadius: theme.shape.borderRadius, - borderTopRightRadius: theme.shape.borderRadius, + borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, + borderTopRightRadius: (theme.vars || theme).shape.borderRadius, }, '&:last-of-type': { - borderBottomLeftRadius: theme.shape.borderRadius, - borderBottomRightRadius: theme.shape.borderRadius, + borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, + borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, }, }), }, @@ -63,8 +63,8 @@ export const surfacesCustomizations: Components = { gap: 16, transition: 'all 100ms ease', backgroundColor: gray[50], - borderRadius: theme.shape.borderRadius, - border: `1px solid ${theme.palette.divider}`, + borderRadius: (theme.vars || theme).shape.borderRadius, + border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', ...theme.applyStyles('dark', { backgroundColor: gray[800], @@ -75,7 +75,7 @@ export const surfacesCustomizations: Components = { variant: 'outlined', }, style: { - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${(theme.vars || theme).palette.divider}`, boxShadow: 'none', background: 'hsl(0, 0%, 100%)', ...theme.applyStyles('dark', { diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 1fd83562b13f58..5d7dc50c150f03 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -189,6 +189,7 @@ export default class MyDocument extends Document { +