From 48ab3ab3dc00599ed3979e687624ac76605e3a6c Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:53:24 +0100 Subject: [PATCH] [code-infra] Move BrandingProvider/brandingTheme/InfoCard to @mui/docs (#41206) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com> Co-authored-by: MichaΕ‚ Dudak --- .../accordion/AccordionTransition.js | 2 +- .../joy/components/badge/BadgeAlignment.js | 2 +- .../joy/components/badge/BadgeAlignment.tsx | 2 +- .../joy/components/grid/InteractiveGrid.js | 2 +- .../joy/components/grid/InteractiveGrid.tsx | 2 +- docs/data/joy/components/grid/SpacingGrid.js | 2 +- docs/data/joy/components/grid/SpacingGrid.tsx | 2 +- .../joy/components/stack/InteractiveStack.js | 2 +- .../joy/components/stack/InteractiveStack.tsx | 2 +- .../customization/approaches/ButtonThemes.js | 2 +- .../automatic-adjustment/ListThemes.js | 2 +- .../default-theme/DefaultTheme.js | 2 +- docs/pages/_document.js | 2 +- docs/src/BrandingCssVarsProvider.tsx | 2 +- docs/src/BrandingProvider.tsx | 21 +- docs/src/components/about/HowToSupport.tsx | 2 +- docs/src/components/action/InfoCard.tsx | 117 +- .../home/MaterialDesignComponents.tsx | 2 +- docs/src/components/home/ValueProposition.tsx | 2 +- .../components/productBaseUI/BaseUIEnd.tsx | 2 +- .../productBaseUI/BaseUISummary.tsx | 2 +- .../components/productCore/CoreProducts.tsx | 2 +- .../productDesignKit/DesignKitValues.tsx | 2 +- .../productMaterial/MaterialEnd.tsx | 2 +- .../productMaterial/MaterialHero.tsx | 2 +- docs/src/components/productX/XPlans.tsx | 2 +- docs/src/modules/brandingTheme.ts | 1319 +---------------- docs/src/modules/components/ApiPage.js | 2 +- .../modules/components/ApiPage/ApiWarning.tsx | 2 +- .../components/ApiPage/list/ClassesList.tsx | 2 +- .../ApiPage/list/ExpandableApiItem.tsx | 2 +- .../ApiPage/list/PropertiesList.tsx | 2 +- .../components/ApiPage/list/SlotsList.tsx | 2 +- .../components/ApiPage/table/ClassesTable.tsx | 2 +- .../ApiPage/table/PropertiesTable.tsx | 2 +- .../components/ApiPage/table/SlotsTable.tsx | 2 +- .../ApiPage/table/StyledTableContainer.tsx | 2 +- docs/src/modules/components/Demo.js | 3 +- docs/src/modules/components/DemoEditor.tsx | 2 +- docs/src/modules/components/DemoSandbox.js | 2 +- .../components/HighlightedCode.test.js | 2 +- .../components/JoyStartingLinksCollection.js | 2 +- .../modules/components/JoyThemeBuilder.tsx | 2 +- docs/src/modules/components/JoyUsageDemo.tsx | 2 +- .../modules/components/JoyVariablesDemo.tsx | 2 +- docs/src/modules/components/MarkdownDocs.js | 2 +- docs/src/modules/components/MarkdownDocsV2.js | 2 +- .../src/modules/components/MarkdownElement.js | 2 +- .../MaterialStartingLinksCollection.js | 2 +- .../MaterialUtilComponents.js | 2 +- .../components/MaterialUIDesignResources.js | 2 +- docs/src/modules/components/ThemeContext.js | 6 +- docs/src/modules/components/ThemeViewer.tsx | 2 +- packages/mui-docs/.npmignore | 2 +- packages/mui-docs/package.json | 13 +- packages/mui-docs/src/InfoCard/InfoCard.tsx | 114 ++ packages/mui-docs/src/InfoCard/index.ts | 1 + .../src/branding/BrandingProvider.tsx | 19 + .../mui-docs/src/branding/brandingTheme.ts | 1317 ++++++++++++++++ packages/mui-docs/src/branding/index.ts | 2 + packages/mui-docs/tsconfig.build.json | 5 +- pnpm-lock.yaml | 17 +- 62 files changed, 1536 insertions(+), 1516 deletions(-) create mode 100644 packages/mui-docs/src/InfoCard/InfoCard.tsx create mode 100644 packages/mui-docs/src/InfoCard/index.ts create mode 100644 packages/mui-docs/src/branding/BrandingProvider.tsx create mode 100644 packages/mui-docs/src/branding/brandingTheme.ts create mode 100644 packages/mui-docs/src/branding/index.ts diff --git a/docs/data/joy/components/accordion/AccordionTransition.js b/docs/data/joy/components/accordion/AccordionTransition.js index de2d4476fcba53..15908702f1506d 100644 --- a/docs/data/joy/components/accordion/AccordionTransition.js +++ b/docs/data/joy/components/accordion/AccordionTransition.js @@ -9,7 +9,7 @@ import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import Typography from '@mui/joy/Typography'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function AccordionTransition() { const [transition, setTransition] = React.useState('0.2s ease'); diff --git a/docs/data/joy/components/badge/BadgeAlignment.js b/docs/data/joy/components/badge/BadgeAlignment.js index 7f680cd6156126..4d0c4ac31ef6ad 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.js +++ b/docs/data/joy/components/badge/BadgeAlignment.js @@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { const [anchorOrigin, setAnchorOrigin] = React.useState({ diff --git a/docs/data/joy/components/badge/BadgeAlignment.tsx b/docs/data/joy/components/badge/BadgeAlignment.tsx index 37171c79fe3161..26cef0321dd2f4 100644 --- a/docs/data/joy/components/badge/BadgeAlignment.tsx +++ b/docs/data/joy/components/badge/BadgeAlignment.tsx @@ -6,7 +6,7 @@ import IconButton from '@mui/joy/IconButton'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function BadgeAlignment() { const [anchorOrigin, setAnchorOrigin] = React.useState( diff --git a/docs/data/joy/components/grid/InteractiveGrid.js b/docs/data/joy/components/grid/InteractiveGrid.js index c2faa3bb5819c6..6752884b6f1483 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.js +++ b/docs/data/joy/components/grid/InteractiveGrid.js @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; export default function InteractiveGrid() { diff --git a/docs/data/joy/components/grid/InteractiveGrid.tsx b/docs/data/joy/components/grid/InteractiveGrid.tsx index 00b0a52f1975a0..8059be0f4b3260 100644 --- a/docs/data/joy/components/grid/InteractiveGrid.tsx +++ b/docs/data/joy/components/grid/InteractiveGrid.tsx @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import { GridDirection } from '@mui/system'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; type GridItemsAlignment = diff --git a/docs/data/joy/components/grid/SpacingGrid.js b/docs/data/joy/components/grid/SpacingGrid.js index 79d8eac75e8775..20971a1813de88 100644 --- a/docs/data/joy/components/grid/SpacingGrid.js +++ b/docs/data/joy/components/grid/SpacingGrid.js @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/joy/components/grid/SpacingGrid.tsx b/docs/data/joy/components/grid/SpacingGrid.tsx index 6ae4b326be60a8..ebb3466624480a 100644 --- a/docs/data/joy/components/grid/SpacingGrid.tsx +++ b/docs/data/joy/components/grid/SpacingGrid.tsx @@ -6,7 +6,7 @@ import RadioGroup from '@mui/joy/RadioGroup'; import Radio from '@mui/joy/Radio'; import Sheet from '@mui/joy/Sheet'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js index 0ec70fd492dc6c..d5142c84f95783 100644 --- a/docs/data/joy/components/stack/InteractiveStack.js +++ b/docs/data/joy/components/stack/InteractiveStack.js @@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio'; import Stack from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography['body-sm'], diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx index 17cf59c88e3c4d..971adbb6a0f9c3 100644 --- a/docs/data/joy/components/stack/InteractiveStack.tsx +++ b/docs/data/joy/components/stack/InteractiveStack.tsx @@ -8,7 +8,7 @@ import Radio from '@mui/joy/Radio'; import Stack, { StackProps } from '@mui/joy/Stack'; import { styled } from '@mui/joy/styles'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const Item = styled(Sheet)(({ theme }) => ({ ...theme.typography['body-sm'], diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js index 558e3bb782cc1a..ee359cacdf3162 100644 --- a/docs/data/joy/customization/approaches/ButtonThemes.js +++ b/docs/data/joy/customization/approaches/ButtonThemes.js @@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel'; import Select from '@mui/joy/Select'; import Option from '@mui/joy/Option'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; const githubTheme = extendTheme({ cssVarPrefix: 'gh', diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js index cb7a7976d56b70..828ebe8d50fc04 100644 --- a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js +++ b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js @@ -10,7 +10,7 @@ import Option from '@mui/joy/Option'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; export default function ListThemes() { const [preset, setPreset] = React.useState(''); diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js index 07024ca8c68148..11d2dd6a76b8ca 100644 --- a/docs/data/material/customization/default-theme/DefaultTheme.js +++ b/docs/data/material/customization/default-theme/DefaultTheme.js @@ -8,7 +8,7 @@ import { useTranslate } from '@mui/docs/i18n'; import ThemeViewer, { useNodeIdsLazy, } from 'docs/src/modules/components/ThemeViewer'; -import { blue, grey } from 'docs/src/modules/brandingTheme'; +import { blue, grey } from '@mui/docs/branding'; const StyledSwitch = styled(Switch)(({ theme }) => [ { diff --git a/docs/pages/_document.js b/docs/pages/_document.js index ecd5633bf5a5b3..a800959e8aa63b 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -9,7 +9,7 @@ import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/ma import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import createEmotionCache from 'docs/src/createEmotionCache'; -import { getMetaThemeColor } from 'docs/src/modules/brandingTheme'; +import { getMetaThemeColor } from '@mui/docs/branding'; // You can find a benchmark of the available CSS minifiers under // https://github.com/GoalSmashers/css-minification-benchmark diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx index 8365b4a886caa6..6cd467f1c10f9d 100644 --- a/docs/src/BrandingCssVarsProvider.tsx +++ b/docs/src/BrandingCssVarsProvider.tsx @@ -7,7 +7,7 @@ import { } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { NextNProgressBar } from 'docs/src/modules/components/AppFrame'; -import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents } from '@mui/docs/branding'; import SkipLink from 'docs/src/modules/components/SkipLink'; import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks'; diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx index 7c5cf6a60d31b4..29f4ba3bcbcd72 100644 --- a/docs/src/BrandingProvider.tsx +++ b/docs/src/BrandingProvider.tsx @@ -1,19 +1,4 @@ -import * as React from 'react'; -import { ThemeProvider, useTheme } from '@mui/material/styles'; -import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/branding` -interface BrandingProviderProps { - children: React.ReactNode; - /** - * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline - */ - mode: 'light' | 'dark'; -} - -export default function BrandingProvider(props: BrandingProviderProps) { - const { children, mode: modeProp } = props; - const upperTheme = useTheme(); - const mode = modeProp || upperTheme.palette.mode; - const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme; - return theme : theme}>{children}; -} +export { BrandingProvider as default } from '@mui/docs/branding'; diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index 3c01595592fe34..6f521dc9209064 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -12,7 +12,7 @@ import GradientText from 'docs/src/components/typography/GradientText'; import { Link } from '@mui/docs/Link'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; function Widget({ children, diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx index 45ba7e23cbfdb6..9dc1f1de938493 100644 --- a/docs/src/components/action/InfoCard.tsx +++ b/docs/src/components/action/InfoCard.tsx @@ -1,114 +1,5 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Typography, { TypographyProps } from '@mui/material/Typography'; -import { Link, LinkProps } from '@mui/docs/Link'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/InfoCard` -interface GlowingIconContainerProps { - icon: React.ReactNode; -} - -export function GlowingIconContainer({ icon }: GlowingIconContainerProps) { - return ( - ({ - width: 40, - height: 40, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexShrink: 0, - borderRadius: 1, - border: '1px solid', - borderColor: 'primary.200', - bgcolor: 'primary.50', - boxShadow: `0px 1px 6px 0px ${alpha( - theme.palette.primary[500], - 0.4, - )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`, - ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primary[400], 0.6), - bgcolor: 'primary.900', - boxShadow: `0 2px 6px 0 ${alpha( - theme.palette.primary[600], - 0.4, - )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`, - }), - })} - > - {icon} - - ); -} - -interface InfoCardProps { - classNameDescription?: string; - classNameTitle?: string; - dense?: boolean; - description?: string; - icon?: React.ReactNode; - link?: string; - prefetch?: LinkProps['prefetch']; - svg?: React.ReactNode; - title: string; - titleProps?: TypographyProps; -} - -export default function InfoCard(props: InfoCardProps) { - const { - classNameDescription, - classNameTitle, - dense, - description, - icon, - link, - svg, - title, - titleProps, - ...other - } = props; - return ( - ({ - p: dense ? 2.5 : 3.5, - height: '100%', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - ...theme.applyDarkStyles({ - bgcolor: 'primaryDark.900', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - borderColor: 'primaryDark.700', - }), - })} - {...other} - > - {svg && svg} - {icon && } - - {title} - - - {description} - - - ); -} +export * from '@mui/docs/InfoCard'; +export { InfoCard as default } from '@mui/docs/InfoCard'; diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx index 6796c028965c8e..c83c844faec8c4 100644 --- a/docs/src/components/home/MaterialDesignComponents.tsx +++ b/docs/src/components/home/MaterialDesignComponents.tsx @@ -34,7 +34,7 @@ import VerifiedUserRounded from '@mui/icons-material/VerifiedUserRounded'; import HelpCenterRounded from '@mui/icons-material/HelpCenterRounded'; import ROUTES from 'docs/src/route'; import { Link } from '@mui/docs/Link'; -import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents } from '@mui/docs/branding'; const Grid = styled('div')(({ theme }) => [ { diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx index ace718a99fa456..ca58562f33eb03 100644 --- a/docs/src/components/home/ValueProposition.tsx +++ b/docs/src/components/home/ValueProposition.tsx @@ -8,7 +8,7 @@ import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded import GradientText from 'docs/src/components/typography/GradientText'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx index c1c01797cfcbe2..7704cd55575665 100644 --- a/docs/src/components/productBaseUI/BaseUIEnd.tsx +++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx @@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; import CompareIcon from '@mui/icons-material/Compare'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx index a7b98a436718f7..92e193e91104d8 100644 --- a/docs/src/components/productBaseUI/BaseUISummary.tsx +++ b/docs/src/components/productBaseUI/BaseUISummary.tsx @@ -8,7 +8,7 @@ import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx index 331e3c80228ff8..0ffb8a767b9261 100644 --- a/docs/src/components/productCore/CoreProducts.tsx +++ b/docs/src/components/productCore/CoreProducts.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Grid from '@mui/material/Grid'; import Section from 'docs/src/layouts/Section'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; // Note: All of the commented code will be put back in once logos for each Core product are done. diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 06cb9895752d30..0af0d974fecbba 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -6,7 +6,7 @@ import LibraryBooks from '@mui/icons-material/LibraryBooks'; import CodeRounded from '@mui/icons-material/CodeRounded'; import GradientText from 'docs/src/components/typography/GradientText'; import Section from 'docs/src/layouts/Section'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 99d91ad0c83dd6..be40de0a8cfb73 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; import CompareIcon from '@mui/icons-material/Compare'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; -import { GlowingIconContainer } from 'docs/src/components/action/InfoCard'; +import { GlowingIconContainer } from '@mui/docs/InfoCard'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx index 0df46b622ac450..dd37121529358d 100644 --- a/docs/src/components/productMaterial/MaterialHero.tsx +++ b/docs/src/components/productMaterial/MaterialHero.tsx @@ -59,7 +59,7 @@ import IconImage from 'docs/src/components/icon/IconImage'; import HeroContainer from 'docs/src/layouts/HeroContainer'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import GradientText from 'docs/src/components/typography/GradientText'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import { Link } from '@mui/docs/Link'; import ROUTES from 'docs/src/route'; diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx index 2b5b04a6938f67..2d5c310ba47fdd 100644 --- a/docs/src/components/productX/XPlans.tsx +++ b/docs/src/components/productX/XPlans.tsx @@ -6,7 +6,7 @@ import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import GradientText from 'docs/src/components/typography/GradientText'; import ROUTES from 'docs/src/route'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; import IconImage from 'docs/src/components/icon/IconImage'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 763ea0e811bac0..b96d36bb7e25a1 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1,1317 +1,4 @@ -import { CSSObject } from '@mui/system'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; -import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; +// Backwards compatibility for Toolpad and X. +// TODO: remove when Toolpad and X migrated to `@mui/docs/branding` -interface ApplyDarkStyles { - (scheme: CSSObject): CSSObject; -} - -declare module '@mui/material/styles' { - interface Theme { - applyDarkStyles: ApplyDarkStyles; - } -} - -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 Palette { - primaryDark: PaletteColor; - gradients: { - lightGrayRadio: string; - stylizedRadio: string; - linearSubtle: string; - }; - } - - interface TypeText { - tertiary: string; - } -} - -declare module '@mui/material/styles/createTypography' { - interface TypographyOptions { - fontWeightSemiBold?: number; - fontWeightExtraBold?: number; - fontFamilyCode?: string; - fontFamilySystem?: string; - } - - interface Typography { - fontWeightSemiBold: number; - fontWeightExtraBold: number; - fontFamilyCode: string; - fontFamilySystem: string; - } -} - -declare module '@mui/material/Chip' { - interface ChipPropsColorOverrides { - grey: true; - } -} - -declare module '@mui/material/SvgIcon' { - interface SvgIconPropsColorOverrides { - danger: true; - } - interface SvgIconPropsSizeOverrides { - xs: true; - sm: true; - md: true; - lg: true; - xl: true; - xl2: true; - xl3: true; - xl4: true; - } -} - -// TODO: enable this once types conflict is fixed -// declare module '@mui/material/Button' { -// interface ButtonPropsVariantOverrides { -// code: true; -// } -// } - -const defaultTheme = createTheme(); - -export const blue = { - 50: '#EBF5FF', - 100: '#CCE5FF', - 200: '#99CCFF', - 300: '#66B2FF', - 400: '#3399FF', - main: '#0073E6', - 500: '#0073E6', - 600: '#006BD6', - 700: '#0061C2', - 800: '#004C99', - 900: '#003A75', -}; -export const blueDark = { - 50: '#EAEDF1', - 100: '#DAE0E7', - 200: '#ACBAC8', - 300: '#7B91A7', - main: '#7B91A7', - 400: '#4B5E71', - 500: '#3B4A59', - 600: '#2F3A46', - 700: '#1F262E', // contrast 13.64:1 - 800: '#141A1F', - 900: '#101418', -}; -export const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text - 400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text - 500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text - 600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text - 700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text - 800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text - 900: '#1C2025', -}; -export const error = { - 50: '#FFF0F1', - 100: '#FFDBDE', - 200: '#FFBDC2', - 300: '#FF99A2', - 400: '#FF7A86', - 500: '#FF505F', - main: '#EB0014', // contrast 4.63:1 - 600: '#EB0014', - 700: '#C70011', - 800: '#94000D', - 900: '#570007', -}; -export const success = { - 50: '#E9FBF0', - 100: '#C6F6D9', - 200: '#9AEFBC', - 300: '#6AE79C', - 400: '#3EE07F', - 500: '#21CC66', - 600: '#1DB45A', - 700: '#1AA251', - 800: '#178D46', - 900: '#0F5C2E', -}; -export const warning = { - 50: '#FFF9EB', - 100: '#FFF3C1', - 200: '#FFECA1', - 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text - 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text - main: '#DEA500', - 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text - 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text - 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text - 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text -}; -// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 - -const systemFont = [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', -]; - -export const getMetaThemeColor = (mode: 'light' | 'dark') => { - const themeColor = { - light: blue[600], - dark: blueDark[900], - }; - return themeColor[mode]; -}; - -export const getDesignTokens = (mode: 'light' | 'dark') => - ({ - palette: { - primary: { - ...blue, - ...(mode === 'dark' && { - main: blue[400], - }), - }, - secondary: { - ...grey, - ...(mode === 'light' && { - main: blueDark[100], - contrastText: blueDark[600], - }), - ...(mode === 'dark' && { - main: blueDark[700], - contrastText: blueDark[600], - }), - }, - divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100], - primaryDark: blueDark, - mode, - ...(mode === 'dark' && { - background: { - default: blueDark[900], - paper: alpha(blueDark[800], 0.8), - }, - }), - common: { - black: '#0B0D0E', - }, - text: { - ...(mode === 'light' && { - primary: grey[900], - secondary: grey[800], - tertiary: grey[700], - }), - ...(mode === 'dark' && { - primary: '#fff', - secondary: grey[400], - tertiary: grey[500], - }), - }, - grey: { - ...grey, - ...(mode === 'light' && { - main: grey[100], - contrastText: grey[600], - }), - ...(mode === 'dark' && { - main: grey[700], - contrastText: grey[600], - }), - }, - error, - success: { - ...success, - ...(mode === 'dark' && { - main: '#1DB45A', // contrast 6.17:1 (blueDark.800) - }), - ...(mode === 'light' && { - main: '#1AA251', // contrast 3.31:1 - }), - }, - warning, - gradients: { - lightGrayRadio: - 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', - stylizedRadio: - mode === 'dark' - ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)' - : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)', - linearSubtle: - mode === 'light' - ? `linear-gradient(to top right, ${alpha(blue[50], 0.3)} 40%, ${alpha( - grey[50], - 0.2, - )} 100%)` - : `linear-gradient(to top right, ${alpha(blue[900], 0.1)} 40%, ${alpha( - blueDark[800], - 0.2, - )} 100%)`, - }, - }, - shape: { - borderRadius: 12, - }, - spacing: 8, - typography: { - fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), - // Match VS Code - // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580 - // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10 - fontFamilyCode: [ - 'Menlo', // macOS - 'Consolas', // Windows - '"Droid Sans Mono"', // Linux - 'monospace', // fallback - ].join(','), - fontFamilyTagline: ['"General Sans"', ...systemFont].join(','), - fontFamilySystem: systemFont.join(','), - fontWeightSemiBold: 600, - fontWeightExtraBold: 800, - h1: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)', - fontWeight: 600, - lineHeight: 78 / 70, - letterSpacing: -0.2, - ...(mode === 'light' && { - color: blueDark[900], - }), - }, - h2: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)', - fontWeight: 600, - lineHeight: 44 / 36, - letterSpacing: -0.2, - color: mode === 'dark' ? grey[100] : blueDark[700], - }, - h3: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: defaultTheme.typography.pxToRem(36), - lineHeight: 44 / 36, - letterSpacing: 0.2, - }, - h4: { - fontFamily: ['"General Sans"', ...systemFont].join(','), - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 42 / 28, - letterSpacing: 0.2, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(24), - lineHeight: 36 / 24, - letterSpacing: 0.1, - color: mode === 'dark' ? blue[300] : blue.main, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(20), - lineHeight: 30 / 20, - }, - button: { - textTransform: 'initial', - fontWeight: 700, - letterSpacing: 0, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - lineHeight: 24 / 18, - letterSpacing: 0, - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(16), // 16px - lineHeight: 24 / 16, - letterSpacing: 0, - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), // 14px - lineHeight: 21 / 14, - letterSpacing: 0, - }, - caption: { - display: 'inline-block', - fontSize: defaultTheme.typography.pxToRem(12), // 12px - lineHeight: 18 / 12, - letterSpacing: 0, - fontWeight: 700, - }, - allVariants: { - scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', - }, - }, - /** - * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker). - * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet. - * - * πŸ˜“ Without this utility: - * { - * ...theme.vars ? { - * color: theme.vars.palette.primary.main, - * [theme.getColorScheme('dark')]: { - * color: '#fff', - * } - * } : { - * color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, - * } - * } - * - * 🀩 Using the utility: - * { - * color: (theme.vars || theme).palette.primary.main, - * ...theme.applyDarkStyles({ - * color: '#fff', - * }), - * } - * - * ------------------------------------------------------------------------------------------------- - * πŸ’‘ This util should be used in an array if the styles contain pseudo classes or nested selectors: - * - * ❌ There is a chance that the upper selectors could be overridden - * { - * // the whole selector could be overridden - * '&::before': { - * color: ... - * }, - * ...theme.applyDarkStyles({ - * '&::before': { - * color: ... - * } - * }) - * } - * - * βœ… use an array (supports in both emotion and styled-components) - * Only the `color` will be overridden in dark mode. - * [ - * '&::before': { - * color: ... - * }, - * theme.applyDarkStyles({ - * '&::before': { - * color: ... - * } - * }) - * ] - */ - applyDarkStyles(css: Parameters[0]) { - return (this as Theme).applyStyles('dark', css); - }, - }) as ThemeOptions; - -export function getThemedComponents(): ThemeOptions { - return { - components: { - MuiAlert: { - styleOverrides: { - root: { - padding: '12px 16px', - }, - standardWarning: ({ theme }) => [ - { - backgroundColor: alpha(theme.palette.warning[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - border: '1px solid', - borderColor: alpha(theme.palette.warning[600], 0.3), - '& .MuiAlert-icon': { - color: (theme.vars || theme).palette.warning[700], - }, - }, - theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.warning[700], 0.2), - color: (theme.vars || theme).palette.warning[50], - '& .MuiAlert-icon': { - color: (theme.vars || theme).palette.warning[200], - }, - }), - ], - icon: { - paddingTop: 12, - paddingBottom: 0, - }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - transition: 'all 100ms ease-in', - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - }, - MuiButton: { - defaultProps: { - disableElevation: true, - }, - styleOverrides: { - root: ({ theme, ownerState }) => ({ - transition: 'all 120ms ease-in', - ...(ownerState.size === 'large' && { - ...theme.typography.body1, - lineHeight: 21 / 16, - padding: theme.spacing('8px', '10px', '10px', '12px'), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 10, - '& > span': { transition: '0.2s', marginLeft: 4 }, - '&:hover > span': { transform: 'translateX(2px)' }, - }), - ...(ownerState.size === 'medium' && { - fontSize: defaultTheme.typography.pxToRem(15), - padding: theme.spacing('8px', '12px', '8px', '14px'), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 8, - '& > span': { transition: '0.2s', marginLeft: 4 }, - '&:hover > span': { transform: 'translateX(2px)' }, - }), - ...(ownerState.size === 'small' && { - padding: theme.spacing('6px', 1), - fontFamily: theme.typography.fontFamily, - fontSize: defaultTheme.typography.pxToRem(13), - fontWeight: theme.typography.fontWeightSemiBold, - borderRadius: 8, - '& .MuiButton-startIcon': { - transition: '0.15s', - marginRight: 4, - marginLeft: -1, - }, - '& .MuiButton-endIcon': { - transition: '0.15s', - marginLeft: 4, - }, - '&:hover': { - '& .MuiButton-startIcon': { transform: 'translateX(-2px)' }, - '& .MuiButton-endIcon': { transform: 'translateX(2px)' }, - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'secondary' && { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: alpha(theme.palette.primaryDark[50], 0.3), - borderColor: (theme.vars || theme).palette.primaryDark[100], - boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha( - theme.palette.grey[100], - 0.5, - )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[50], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primaryDark[100], - borderColor: alpha(theme.palette.primaryDark[600], 0.5), - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - }), - ...(ownerState.variant === 'outlined' && - ownerState.color === 'primary' && { - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[50], 0.3), - borderColor: (theme.vars || theme).palette.primary[100], - boxShadow: `${theme.palette.primary[50]} 0 2px 0.5px inset, ${alpha( - theme.palette.primary[100], - 0.2, - )} 0 -3px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[50], - borderColor: (theme.vars || theme).palette.primary[300], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[200], - borderColor: alpha(theme.palette.primary[900], 0.7), - backgroundColor: alpha(theme.palette.primary[900], 0.2), - boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha( - theme.palette.common.black, - 0.5, - )} 0 -3px 0 inset, ${theme.palette.common.black} 0 1px 2px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[900], - borderColor: (theme.vars || theme).palette.primary[700], - }, - }), - }), - ...(ownerState.variant === 'contained' && - ownerState.color === 'primary' && { - color: '#fff', - textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, - backgroundColor: (theme.vars || theme).palette.primary[500], - backgroundImage: `linear-gradient(180deg, ${alpha( - theme.palette.primary[500], - 0.6, - )} 0%, ${theme.palette.primary[600]} 100%)`, - boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[700]} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`, - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[700], - }, - '&:active': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - ...(ownerState.variant === 'text' && { - color: (theme.vars || theme).palette.primary[600], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - }), - }), - }), - }, - variants: [ - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'code' }, - style: ({ theme }) => [ - { - cursor: 'copy', - padding: 0, - width: 'max-content', - backgroundColor: 'transparent', - color: (theme.vars || theme).palette.grey[600], - fontFamily: theme.typography.fontFamilyCode, - fontWeight: 400, - fontSize: defaultTheme.typography.pxToRem(12), - lineHeight: 21 / 14, - letterSpacing: 0, - WebkitFontSmoothing: 'subpixel-antialiased', - '& .MuiButton-startIcon': { - color: (theme.vars || theme).palette.grey[400], - }, - '& .MuiButton-endIcon': { - display: 'inline-block', - position: 'absolute', - color: (theme.vars || theme).palette.primary.main, - right: -22, - top: -1, - opacity: 0, - transitionProperty: 'opacity', - transitionDuration: '100ms', - transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', - }, - '&:hover, &.Mui-focusVisible': { - backgroundColor: 'transparent', - color: (theme.vars || theme).palette.primary.main, - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary.main, - opacity: 1, - }, - }, - }, - theme.applyDarkStyles({ - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary[300], - }, - '&:hover, &.Mui-focusVisible': { - color: (theme.vars || theme).palette.primary[300], - '& .MuiButton-endIcon': { - opacity: 1, - }, - }, - }), - ], - }, - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'codeOutlined' }, - style: ({ theme }) => [ - { - display: 'inline-block', - justifyContent: 'start', - overflowX: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - position: 'relative', - border: '1px solid', - color: (theme.vars || theme).palette.grey[900], - backgroundColor: alpha(theme.palette.primary[50], 0.3), - borderColor: (theme.vars || theme).palette.grey[200], - boxShadow: `0px 2px 2px ${alpha( - theme.palette.primary[100], - 0.2, - )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`, - fontFamily: theme.typography.fontFamilyCode, - fontWeight: 400, - fontSize: defaultTheme.typography.pxToRem(12), - lineHeight: 21 / 14, - letterSpacing: 0, - WebkitFontSmoothing: 'subpixel-antialiased', - '& .MuiButton-endIcon': { - display: 'inline-block', - position: 'absolute', - top: 12, - right: 0, - marginRight: 10, - color: (theme.vars || theme).palette.grey[600], - }, - '&:hover, &.Mui-focusVisible': { - borderColor: (theme.vars || theme).palette.primary.main, - backgroundColor: (theme.vars || theme).palette.primary[50], - color: (theme.vars || theme).palette.primary[600], - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary.main, - }, - }, - } as const, - theme.applyDarkStyles({ - color: (theme.vars || theme).palette.grey[500], - borderColor: (theme.vars || theme).palette.primaryDark[600], - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)', - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.grey[400], - }, - '&:hover, &.Mui-focusVisible': { - backgroundColor: (theme.vars || theme).palette.primary[900], - color: (theme.vars || theme).palette.primary[100], - '& .MuiButton-endIcon': { - color: (theme.vars || theme).palette.primary[300], - }, - }, - }), - ], - }, - { - // @ts-ignore internal repo module augmentation issue - props: { variant: 'link' }, - style: ({ theme }) => ({ - marginBottom: 1, - fontSize: theme.typography.pxToRem(14), - fontWeight: theme.typography.fontWeightBold, - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[50], - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - '&:hover': { - backgroundColor: alpha(theme.palette.primary[800], 0.3), - }, - }), - }), - }, - ], - }, - MuiIconButton: { - variants: [ - { - props: { color: 'primary' }, - style: ({ theme }) => [ - { - height: 34, - width: 34, - border: `1px solid`, - borderColor: (theme.vars || theme).palette.grey[200], - color: (theme.vars || theme).palette.primary[500], - borderRadius: theme.shape.borderRadius, - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.grey[300], - background: (theme.vars || theme).palette.grey[50], - }, - }, - theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primaryDark[700], - color: (theme.vars || theme).palette.primary[300], - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.primaryDark[600], - background: alpha(theme.palette.primaryDark[700], 0.4), - }, - }), - ], - }, - { - props: { color: 'info' }, - style: ({ theme }) => [ - { - height: 34, - width: 34, - border: `1px solid`, - borderColor: (theme.vars || theme).palette.grey[200], - color: (theme.vars || theme).palette.grey[600], - borderRadius: theme.shape.borderRadius, - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - color: (theme.vars || theme).palette.primary.main, - borderColor: (theme.vars || theme).palette.grey[300], - background: (theme.vars || theme).palette.grey[50], - }, - }, - theme.applyDarkStyles({ - borderColor: (theme.vars || theme).palette.primaryDark[700], - color: (theme.vars || theme).palette.grey[400], - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - color: (theme.vars || theme).palette.primary[400], - borderColor: (theme.vars || theme).palette.primaryDark[600], - background: alpha(theme.palette.primaryDark[700], 0.4), - }, - }), - ], - }, - ], - }, - MuiMenu: { - styleOverrides: { - paper: ({ theme }) => [ - { - minWidth: 160, - color: (theme.vars || theme).palette.text.secondary, - backgroundImage: 'none', - border: '1px solid', - backgroundColor: (theme.vars || theme).palette.background.paper, - borderColor: (theme.vars || theme).palette.grey[200], - '& .MuiMenuItem-root': { - fontSize: theme.typography.pxToRem(14), - fontWeight: 500, - '&:hover, &:focus': { - backgroundColor: (theme.vars || theme).palette.grey[50], - }, - '&:focus-visible': { - outline: 'none', - }, - '&.Mui-selected': { - fontWeight: 500, - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[100], 0.6), - }, - }, - }, - theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - borderColor: (theme.vars || theme).palette.primaryDark[700], - '& .MuiMenuItem-root': { - '&:hover, &:focus': { - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[300], - backgroundColor: alpha(theme.palette.primary[900], 0.4), - }, - }, - }), - ], - }, - }, - MuiPopover: { - styleOverrides: { - paper: ({ theme }) => ({ - boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)', - ...theme.applyDarkStyles({ - boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', - }), - }), - }, - }, - MuiDivider: { - styleOverrides: { - root: ({ theme }) => ({ - borderColor: (theme.vars || theme).palette.grey[100], - ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.primaryDark[700], 0.8), - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - display: 'inline-flex', - alignItems: 'center', - fontWeight: theme.typography.fontWeightSemiBold, - '&.MuiTypography-body1 > svg': { - marginTop: 2, - }, - '& svg:last-child': { - marginLeft: 2, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }), - }, - variants: [ - { - props: { color: 'primary' }, - style: ({ theme }) => [ - { - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - color: (theme.vars || theme).palette.primary[700], - }, - }, - theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - '&:hover': { - color: (theme.vars || theme).palette.primary[200], - }, - }), - ], - }, - ], - }, - MuiChip: { - styleOverrides: { - root: ({ ownerState: { color, variant }, theme }) => ({ - fontWeight: theme.typography.fontWeightSemiBold, - paddingBottom: 0.2, - ...(variant === 'outlined' && - color === 'default' && { - backgroundColor: alpha(theme.palette.grey[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - borderColor: (theme.vars || theme).palette.grey[200], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.grey[100], - color: (theme.vars || theme).palette.grey[900], - }, - ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - color: (theme.vars || theme).palette.grey[300], - borderColor: alpha(theme.palette.primaryDark[500], 0.5), - '&:hover': { - color: (theme.vars || theme).palette.grey[300], - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - }, - }), - }), - ...(variant === 'outlined' && - color === 'info' && { - backgroundColor: alpha(theme.palette.grey[50], 0.5), - color: (theme.vars || theme).palette.grey[900], - borderColor: (theme.vars || theme).palette.grey[200], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.grey[300], - backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), - borderColor: (theme.vars || theme).palette.primaryDark[600], - }), - }), - ...(variant === 'outlined' && - color === 'primary' && { - borderColor: (theme.vars || theme).palette.primary[100], - backgroundColor: (theme.vars || theme).palette.primary[50], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[300], - borderColor: alpha(theme.palette.primary[500], 0.2), - backgroundColor: alpha(theme.palette.primary[700], 0.2), - }), - }), - ...(variant === 'outlined' && - color === 'success' && { - borderColor: (theme.vars || theme).palette.success[100], - backgroundColor: (theme.vars || theme).palette.success[50], - color: (theme.vars || theme).palette.success[900], - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.success[300], - borderColor: alpha(theme.palette.success[300], 0.2), - background: alpha(theme.palette.success[800], 0.2), - }), - }), - ...(variant === 'filled' && { - ...(color === 'default' && { - border: '1px solid transparent', - color: (theme.vars || theme).palette.primary[700], - backgroundColor: alpha(theme.palette.primary[100], 0.5), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], - }, - }), - }), - ...(color === 'primary' && { - color: (theme.vars || theme).palette.primary[600], - backgroundColor: alpha(theme.palette.primary[100], 0.4), - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - '& .MuiChip-deleteIcon': { - color: (theme.vars || theme).palette.primary[600], - '&:hover': { - color: (theme.vars || theme).palette.primary[700], - }, - }, - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[100], - backgroundColor: alpha(theme.palette.primary[800], 0.5), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.5), - }, - '& .MuiChip-deleteIcon': { - color: (theme.vars || theme).palette.primary[100], - '&:hover': { - color: (theme.vars || theme).palette.primary[50], - }, - }, - }), - }), - }), - // for labelling product in the search - // @ts-ignore internal repo module augmentation issue - ...(variant === 'light' && { - ...(color === 'default' && { - color: (theme.vars || theme).palette.primary[700], - backgroundColor: alpha(theme.palette.primary[100], 0.3), - ...theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[200], - backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), - }), - }), - ...(color === 'warning' && { - color: (theme.vars || theme).palette.warning[900], - backgroundColor: (theme.vars || theme).palette.warning[100], - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: (theme.vars || theme).palette.warning[900], - }), - }), - ...(color === 'success' && { - color: (theme.vars || theme).palette.success[900], - backgroundColor: (theme.vars || theme).palette.success[100], - ...theme.applyDarkStyles({ - color: '#fff', - backgroundColor: (theme.vars || theme).palette.success[900], - }), - }), - }), - }), - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: ({ theme }) => [ - { - padding: '8px', - textTransform: 'none', - fontWeight: 500, - fontSize: theme.typography.pxToRem(14), - color: theme.palette.grey[700], - borderRadius: 0, - '&:hover': { - backgroundColor: theme.palette.grey[50], - }, - '&.Mui-selected': { - borderRadius: 10, - border: '1px solid', - color: (theme.vars || theme).palette.primary[500], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - color: theme.palette.grey[300], - '&:hover': { - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), - }, - '&.Mui-selected': { - color: '#fff', - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: (theme.vars || theme).palette.primaryDark[700], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], - }, - }, - }), - ], - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: ArrowDropDownRounded, - }, - styleOverrides: { - iconFilled: { - top: 'calc(50% - .25em)', - }, - }, - }, - MuiTab: { - defaultProps: { - disableTouchRipple: true, - }, - }, - MuiPaper: { - styleOverrides: { - root: ({ theme, ownerState }) => [ - { - backgroundImage: 'none', - backgroundColor: '#fff', - '&[href]': { - textDecorationLine: 'none', - }, - transition: theme.transitions.create(['border', 'box-shadow'], { - duration: theme.transitions.duration.shortest, - }), - ...(ownerState.variant === 'outlined' && { - display: 'block', - borderColor: (theme.vars || theme).palette.grey[100], - '&[href]': { - textDecorationLine: 'none', - boxShadow: `inset 0 1px 2px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.6)}`, - '&:hover': { - borderColor: (theme.vars || theme).palette.primary[200], - boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, - outlineOffset: '2px', - }, - }, - ':is(a&), :is(button&)': { - '&:hover': { - borderColor: (theme.vars || theme).palette.primary[200], - boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`, - }, - }, - }), - }, - theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - ...(ownerState.variant === 'outlined' && { - borderColor: (theme.vars || theme).palette.primaryDark[700], - backgroundColor: alpha(theme.palette.primaryDark[800], 0.6), - '&[href]': { - textDecorationLine: 'none', - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[900] - }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - borderColor: alpha(theme.palette.primary[600], 0.5), - boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, - }, - }, - ':is(a&), :is(button&)': { - '&:hover': { - boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`, - }, - }, - }), - }), - ], - }, - }, - MuiTableCell: { - styleOverrides: { - root: ({ theme, ownerState }) => ({ - padding: theme.spacing(1, 2), - borderColor: (theme.vars || theme).palette.divider, - ...(ownerState.variant === 'head' && { - color: (theme.vars || theme).palette.text.primary, - fontWeight: 700, - }), - ...(ownerState.variant === 'body' && { - color: (theme.vars || theme).palette.text.secondary, - }), - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: '#fff', - ...theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[900], - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme, ownerState }) => [ - { - textTransform: 'none', - fontWeight: 'medium', - color: theme.palette.text.secondary, - borderColor: theme.palette.grey[200], - ...(ownerState.size === 'small' && { - padding: '0.375rem 0.75rem', - }), - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[700], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - borderColor: theme.palette.primaryDark[700], - '&:hover': { - backgroundColor: alpha(theme.palette.primaryDark[600], 0.2), - }, - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[200], - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: alpha(theme.palette.primary[900], 0.4), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.8), - borderColor: `${(theme.vars || theme).palette.primary[400]} !important`, - }, - }, - }), - ], - }, - }, - MuiTooltip: { - styleOverrides: { - tooltip: { - borderRadius: 6, - padding: '6px 12px', - }, - }, - }, - MuiSwitch: { - styleOverrides: { - root: { - width: 32, - height: 20, - padding: 0, - '& .MuiSwitch-switchBase': { - '&.Mui-checked': { - transform: 'translateX(11px)', - color: '#fff', - }, - }, - }, - switchBase: { - height: 20, - width: 20, - padding: 0, - color: '#fff', - '&.Mui-checked + .MuiSwitch-track': { - opacity: 1, - }, - }, - track: ({ theme }) => ({ - opacity: 1, - borderRadius: 32, - backgroundColor: theme.palette.grey[400], - ...theme.applyDarkStyles({ - backgroundColor: theme.palette.grey[800], - }), - }), - thumb: { - flexShrink: 0, - width: '14px', - height: '14px', - }, - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => [ - { - textTransform: 'none', - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.grey[700], - borderColor: theme.palette.grey[200], - borderRadius: '8px', - '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[500], - borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, - backgroundColor: (theme.vars || theme).palette.primary[50], - '&:hover': { - backgroundColor: (theme.vars || theme).palette.primary[100], - }, - }, - } as const, - theme.applyDarkStyles({ - color: theme.palette.grey[200], - borderColor: theme.palette.primaryDark[700], - '&.Mui-selected': { - color: theme.palette.primary[100], - borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: alpha(theme.palette.primary[900], 0.5), - '&:hover': { - backgroundColor: alpha(theme.palette.primary[900], 0.8), - }, - }, - }), - ], - }, - }, - MuiCssBaseline: { - defaultProps: { - enableColorScheme: true, - }, - styleOverrides: { - html: { - overflowY: 'scroll', - // TODO add support for it, - // https://github.com/mui/material-ui/issues/40748 - // scrollbarGutter: 'stable', - }, - }, - }, - }, - }; -} - -export const brandingDarkTheme = createTheme({ - ...getDesignTokens('dark'), - ...getThemedComponents(), -}); - -export const brandingLightTheme = createTheme({ - ...getDesignTokens('light'), - ...getThemedComponents(), -}); +export * from '@mui/docs/branding'; diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 80781fd2724f25..abf1775d1768fd 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -13,7 +13,7 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import Ad from 'docs/src/modules/components/Ad'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import PropertiesSection, { getPropsToC, } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; diff --git a/docs/src/modules/components/ApiPage/ApiWarning.tsx b/docs/src/modules/components/ApiPage/ApiWarning.tsx index f1b6a5dcd11f55..be5457e4e48a48 100644 --- a/docs/src/modules/components/ApiPage/ApiWarning.tsx +++ b/docs/src/modules/components/ApiPage/ApiWarning.tsx @@ -6,7 +6,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; const StyledAlert = styled(Alert)( ({ theme }) => ({ diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx index d7366af1b60239..9923913965eeeb 100644 --- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -10,7 +10,7 @@ import ExpandableApiItem, { import { brandingLightTheme as lightTheme, brandingDarkTheme as darkTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning'; const StyledApiItem = styled(ExpandableApiItem)( diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index 5f5a076ea250dc..bf8d7ec1d833a0 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx @@ -7,7 +7,7 @@ import { Divider, IconButton, SxProps } from '@mui/material'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; type DescriptionType = 'props' | 'classes' | 'CSS' | 'slots'; diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index 801349f37cc536..4b941670f15ae3 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -6,7 +6,7 @@ import { useTranslate } from '@mui/docs/i18n'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import ExpandableApiItem, { ApiItemContaier, } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem'; diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx index f205d62009f5fd..d05c5a859fa45e 100644 --- a/docs/src/modules/components/ApiPage/list/SlotsList.tsx +++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx @@ -4,7 +4,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingLightTheme as lightTheme, brandingDarkTheme as darkTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { useTranslate } from '@mui/docs/i18n'; import ExpandableApiItem, { ApiItemContaier, diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index f2546202208eb1..b0b687e10ad9a0 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; import { useTranslate } from '@mui/docs/i18n'; diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index cf52eef9036d60..b734f241b2c6ed 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -5,7 +5,7 @@ import { useTranslate } from '@mui/docs/i18n'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { Properties, getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; import ApiWarning from 'docs/src/modules/components/ApiPage/ApiWarning'; diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx index d08c3e68aa3133..bdaaf23ef987fe 100644 --- a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx +++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx @@ -5,7 +5,7 @@ import { styled, alpha } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; import { SlotsFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/SlotsList'; import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer'; diff --git a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx index a9be6a2fa5150a..c0222301382202 100644 --- a/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx +++ b/docs/src/modules/components/ApiPage/table/StyledTableContainer.tsx @@ -1,5 +1,5 @@ import { styled, alpha } from '@mui/material/styles'; -import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme'; +import { brandingDarkTheme as darkTheme } from '@mui/docs/branding'; const StyledTableContainer = styled('div')( ({ theme }) => ({ diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 12cdd5d9c5e1d2..4bebe7324c9390 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -21,9 +21,8 @@ import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution'; import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants'; import { useUserLanguage, useTranslate } from '@mui/docs/i18n'; import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding'; import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot'; -import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme'; /** * Removes leading spaces (indentation) present in the `.tsx` previews diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 8877685b09e47d..e32390019b3f63 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -8,7 +8,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; import { useTranslate } from '@mui/docs/i18n'; import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy'; -import { blueDark } from 'docs/src/modules/brandingTheme'; +import { blueDark } from '@mui/docs/branding'; const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ { diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js index 57ebf0ace75a40..56134daf603efd 100644 --- a/docs/src/modules/components/DemoSandbox.js +++ b/docs/src/modules/components/DemoSandbox.js @@ -13,7 +13,7 @@ import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styl import rtl from 'jss-rtl'; import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary'; import { useTranslate } from '@mui/docs/i18n'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import { highDensity } from 'docs/src/modules/components/ThemeContext'; const iframeDefaultJoyTheme = extendTheme({ diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js index 8129c9ee38def0..05f7f1b627a523 100644 --- a/docs/src/modules/components/HighlightedCode.test.js +++ b/docs/src/modules/components/HighlightedCode.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; import { ThemeProvider, createTheme } from '@mui/material/styles'; -import { getDesignTokens } from 'docs/src/modules/brandingTheme'; +import { getDesignTokens } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; describe('HighlightedCode', () => { diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js index 78aaf32ef30167..fd789c58e134f9 100644 --- a/docs/src/modules/components/JoyStartingLinksCollection.js +++ b/docs/src/modules/components/JoyStartingLinksCollection.js @@ -3,7 +3,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx index e668edbed5979e..fa274153726f15 100644 --- a/docs/src/modules/components/JoyThemeBuilder.tsx +++ b/docs/src/modules/components/JoyThemeBuilder.tsx @@ -60,7 +60,7 @@ import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; import DarkMode from '@mui/icons-material/DarkMode'; import LightMode from '@mui/icons-material/LightMode'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox'; import sourceJoyTemplates, { TemplateData } from 'docs/src/modules/joy/sourceJoyTemplates'; import extractTemplates from 'docs/src/modules/utils/extractTemplates'; diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index 3816f8cb40912c..8928e277af5ef7 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -18,7 +18,7 @@ import Select from '@mui/joy/Select'; import Sheet from '@mui/joy/Sheet'; import Switch from '@mui/joy/Switch'; import Typography from '@mui/joy/Typography'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => { diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx index 2926d05efc4f63..2d4392d3059bf3 100644 --- a/docs/src/modules/components/JoyVariablesDemo.tsx +++ b/docs/src/modules/components/JoyVariablesDemo.tsx @@ -13,7 +13,7 @@ import Input, { inputClasses } from '@mui/joy/Input'; import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; interface DataItem { var: string; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index d97703653a0fd9..9d12aef4dad2c5 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -8,7 +8,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import { useUserLanguage } from '@mui/docs/i18n'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import Ad from 'docs/src/modules/components/Ad'; import AdGuest from 'docs/src/modules/components/AdGuest'; diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index 37cb3f4c931048..96d6f972945cc9 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -12,7 +12,7 @@ import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import { useTranslate, useUserLanguage } from '@mui/docs/i18n'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import { BrandingProvider } from '@mui/docs/branding'; import Ad from 'docs/src/modules/components/Ad'; import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame'; import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs'; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index e18b2ed63aefa8..1b2b6a0816f49c 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -5,7 +5,7 @@ import { alpha, darken, styled } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; +} from '@mui/docs/branding'; const Root = styled('div')( ({ theme }) => ({ diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js index bd6e06ca553e3a..fe209a71381e6b 100644 --- a/docs/src/modules/components/MaterialStartingLinksCollection.js +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -5,7 +5,7 @@ import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; import PlayCircleFilledWhiteRoundedIcon from '@mui/icons-material/PlayCircleFilledWhiteRounded'; import DesignServicesRoundedIcon from '@mui/icons-material/DesignServicesRounded'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js index 254ad2fd0291c2..6bc020895cf542 100644 --- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js +++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded'; import CssRoundedIcon from '@mui/icons-material/CssRounded'; import DnsRoundedIcon from '@mui/icons-material/DnsRounded'; diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index a88061cfd131b2..51f5affd1be9c0 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Grid from '@mui/material/Unstable_Grid2'; -import InfoCard from 'docs/src/components/action/InfoCard'; +import { InfoCard } from '@mui/docs/InfoCard'; const content = [ { diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 46713fcf715e8b..1ae7af3bea639c 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -10,11 +10,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u import { getCookie } from 'docs/src/modules/utils/helpers'; import useLazyCSS from 'docs/src/modules/utils/useLazyCSS'; import { useUserLanguage } from '@mui/docs/i18n'; -import { - getDesignTokens, - getThemedComponents, - getMetaThemeColor, -} from 'docs/src/modules/brandingTheme'; +import { getDesignTokens, getThemedComponents, getMetaThemeColor } from '@mui/docs/branding'; import useMediaQuery from '@mui/material/useMediaQuery'; import useLocalStorageState from '@mui/utils/useLocalStorageState'; diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx index f709c8e4db8df3..6db97b5221fb91 100644 --- a/docs/src/modules/components/ThemeViewer.tsx +++ b/docs/src/modules/components/ThemeViewer.tsx @@ -6,7 +6,7 @@ import ExpandIcon from '@mui/icons-material/ExpandMore'; import CollapseIcon from '@mui/icons-material/ChevronRight'; import { TreeView } from '@mui/x-tree-view/TreeView'; import { TreeItem as MuiTreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; -import { blue, blueDark } from 'docs/src/modules/brandingTheme'; +import { blue, blueDark } from '@mui/docs/branding'; function getType(value: any) { if (Array.isArray(value)) { diff --git a/packages/mui-docs/.npmignore b/packages/mui-docs/.npmignore index 81f0fda795522a..43370fa915f41f 100644 --- a/packages/mui-docs/.npmignore +++ b/packages/mui-docs/.npmignore @@ -1 +1 @@ -.tsbuildinfo +*.tsbuildinfo diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 8bb4e118a670a3..76060614d8bd6f 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -29,20 +29,20 @@ "build:node": "node ../../scripts/build.mjs node", "build:stable": "node ../../scripts/build.mjs stable", "build:types": "node ../../scripts/buildTypes.mjs", - "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json", + "build:copy-files": "node ../../scripts/copyFiles.mjs ./src/translations/translations.json:./translations/translations.json ./src/translations/translations.json:./node/translations/translations.json", "prebuild": "rimraf build", "release": "pnpm build && pnpm publish", "test": "exit 0" }, "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "workspace:*", - "@mui/utils": "workspace:^", "clsx": "^2.1.0", "nprogress": "^0.2.0", "prop-types": "^15.8.1" }, "devDependencies": { + "@mui/material": "workspace:*", + "@mui/icons-material": "workspace:*", "@types/node": "^18.19.25", "@types/prop-types": "^15.7.11", "@types/react": "^18.2.55", @@ -50,9 +50,12 @@ "react": "^18.2.0" }, "peerDependencies": { - "@mui/material": "workspace:^", + "@mui/material": "^5.0.0", + "@mui/base": "*", + "@mui/icons-material": "^5.0.0", + "@mui/system": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", - "next": "^13.5.1", + "next": "^13.5.1 || ^14", "react": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx new file mode 100644 index 00000000000000..045aa0cc0ef5ef --- /dev/null +++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import { alpha } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Typography, { TypographyProps } from '@mui/material/Typography'; +import { Link, LinkProps } from '../Link'; + +interface GlowingIconContainerProps { + icon: React.ReactNode; +} + +export function GlowingIconContainer({ icon }: GlowingIconContainerProps) { + return ( + ({ + width: 40, + height: 40, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexShrink: 0, + borderRadius: 1, + border: '1px solid', + borderColor: 'primary.200', + bgcolor: 'primary.50', + boxShadow: `0px 1px 6px 0px ${alpha( + theme.palette.primary[500], + 0.4, + )}, 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset`, + ...theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primary[400], 0.6), + bgcolor: 'primary.900', + boxShadow: `0 2px 6px 0 ${alpha( + theme.palette.primary[600], + 0.4, + )}, 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset`, + }), + })} + > + {icon} + + ); +} + +interface InfoCardProps { + classNameDescription?: string; + classNameTitle?: string; + dense?: boolean; + description?: string; + icon?: React.ReactNode; + link?: string; + prefetch?: LinkProps['prefetch']; + svg?: React.ReactNode; + title: string; + titleProps?: TypographyProps; +} + +export function InfoCard(props: InfoCardProps) { + const { + classNameDescription, + classNameTitle, + dense, + description, + icon, + link, + svg, + title, + titleProps, + ...other + } = props; + return ( + ({ + p: dense ? 2.5 : 3.5, + height: '100%', + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + ...theme.applyDarkStyles({ + bgcolor: 'primaryDark.900', + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + borderColor: 'primaryDark.700', + }), + })} + {...other} + > + {svg && svg} + {icon && } + + {title} + + + {description} + + + ); +} diff --git a/packages/mui-docs/src/InfoCard/index.ts b/packages/mui-docs/src/InfoCard/index.ts new file mode 100644 index 00000000000000..c02f552081da9d --- /dev/null +++ b/packages/mui-docs/src/InfoCard/index.ts @@ -0,0 +1 @@ +export * from './InfoCard'; diff --git a/packages/mui-docs/src/branding/BrandingProvider.tsx b/packages/mui-docs/src/branding/BrandingProvider.tsx new file mode 100644 index 00000000000000..235cac1821f175 --- /dev/null +++ b/packages/mui-docs/src/branding/BrandingProvider.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { ThemeProvider, useTheme } from '@mui/material/styles'; +import { brandingDarkTheme, brandingLightTheme } from './brandingTheme'; + +export interface BrandingProviderProps { + children: React.ReactNode; + /** + * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline + */ + mode: 'light' | 'dark'; +} + +export function BrandingProvider(props: BrandingProviderProps) { + const { children, mode: modeProp } = props; + const upperTheme = useTheme(); + const mode = modeProp || upperTheme.palette.mode; + const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme; + return theme : theme}>{children}; +} diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts new file mode 100644 index 00000000000000..ddce97e695a62b --- /dev/null +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -0,0 +1,1317 @@ +import type { CSSObject } from '@mui/system'; +import type {} from '@mui/material/themeCssVarsAugmentation'; +import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded'; +import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles'; + +interface ApplyDarkStyles { + (scheme: CSSObject): CSSObject; +} + +declare module '@mui/material/styles' { + interface Theme { + applyDarkStyles: ApplyDarkStyles; + } +} + +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 Palette { + primaryDark: PaletteColor; + gradients: { + lightGrayRadio: string; + stylizedRadio: string; + linearSubtle: string; + }; + } + + interface TypeText { + tertiary: string; + } +} + +declare module '@mui/material/styles/createTypography' { + interface TypographyOptions { + fontWeightSemiBold?: number; + fontWeightExtraBold?: number; + fontFamilyCode?: string; + fontFamilySystem?: string; + } + + interface Typography { + fontWeightSemiBold: number; + fontWeightExtraBold: number; + fontFamilyCode: string; + fontFamilySystem: string; + } +} + +declare module '@mui/material/Chip' { + interface ChipPropsColorOverrides { + grey: true; + } +} + +declare module '@mui/material/SvgIcon' { + interface SvgIconPropsColorOverrides { + danger: true; + } + interface SvgIconPropsSizeOverrides { + xs: true; + sm: true; + md: true; + lg: true; + xl: true; + xl2: true; + xl3: true; + xl4: true; + } +} + +// TODO: enable this once types conflict is fixed +// declare module '@mui/material/Button' { +// interface ButtonPropsVariantOverrides { +// code: true; +// } +// } + +const defaultTheme = createTheme(); + +export const blue = { + 50: '#EBF5FF', + 100: '#CCE5FF', + 200: '#99CCFF', + 300: '#66B2FF', + 400: '#3399FF', + main: '#0073E6', + 500: '#0073E6', + 600: '#006BD6', + 700: '#0061C2', + 800: '#004C99', + 900: '#003A75', +}; +export const blueDark = { + 50: '#EAEDF1', + 100: '#DAE0E7', + 200: '#ACBAC8', + 300: '#7B91A7', + main: '#7B91A7', + 400: '#4B5E71', + 500: '#3B4A59', + 600: '#2F3A46', + 700: '#1F262E', // contrast 13.64:1 + 800: '#141A1F', + 900: '#101418', +}; +export const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text + 400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text + 500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text + 600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text + 700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text + 800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text + 900: '#1C2025', +}; +export const error = { + 50: '#FFF0F1', + 100: '#FFDBDE', + 200: '#FFBDC2', + 300: '#FF99A2', + 400: '#FF7A86', + 500: '#FF505F', + main: '#EB0014', // contrast 4.63:1 + 600: '#EB0014', + 700: '#C70011', + 800: '#94000D', + 900: '#570007', +}; +export const success = { + 50: '#E9FBF0', + 100: '#C6F6D9', + 200: '#9AEFBC', + 300: '#6AE79C', + 400: '#3EE07F', + 500: '#21CC66', + 600: '#1DB45A', + 700: '#1AA251', + 800: '#178D46', + 900: '#0F5C2E', +}; +export const warning = { + 50: '#FFF9EB', + 100: '#FFF3C1', + 200: '#FFECA1', + 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text + 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text + main: '#DEA500', + 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text + 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text + 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text + 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text +}; +// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695 + +const systemFont = [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', +]; + +export const getMetaThemeColor = (mode: 'light' | 'dark') => { + const themeColor = { + light: blue[600], + dark: blueDark[900], + }; + return themeColor[mode]; +}; + +export const getDesignTokens = (mode: 'light' | 'dark') => + ({ + palette: { + primary: { + ...blue, + ...(mode === 'dark' && { + main: blue[400], + }), + }, + secondary: { + ...grey, + ...(mode === 'light' && { + main: blueDark[100], + contrastText: blueDark[600], + }), + ...(mode === 'dark' && { + main: blueDark[700], + contrastText: blueDark[600], + }), + }, + divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100], + primaryDark: blueDark, + mode, + ...(mode === 'dark' && { + background: { + default: blueDark[900], + paper: alpha(blueDark[800], 0.8), + }, + }), + common: { + black: '#0B0D0E', + }, + text: { + ...(mode === 'light' && { + primary: grey[900], + secondary: grey[800], + tertiary: grey[700], + }), + ...(mode === 'dark' && { + primary: '#fff', + secondary: grey[400], + tertiary: grey[500], + }), + }, + grey: { + ...grey, + ...(mode === 'light' && { + main: grey[100], + contrastText: grey[600], + }), + ...(mode === 'dark' && { + main: grey[700], + contrastText: grey[600], + }), + }, + error, + success: { + ...success, + ...(mode === 'dark' && { + main: '#1DB45A', // contrast 6.17:1 (blueDark.800) + }), + ...(mode === 'light' && { + main: '#1AA251', // contrast 3.31:1 + }), + }, + warning, + gradients: { + lightGrayRadio: + 'radial-gradient(50% 50% at 50% 50%, #F0F7FF 0%, rgba(240, 247, 255, 0.05) 100%)', + stylizedRadio: + mode === 'dark' + ? 'linear-gradient(rgba(0 0 0 / 0.1), rgba(0 0 0 / 0.1)), linear-gradient(254.86deg, rgba(0, 58, 117, 0.18) 0%, rgba(11, 13, 14, 0.3) 49.98%, rgba(0, 76, 153, 0.21) 100.95%)' + : 'linear-gradient(rgba(255 255 255 / 0.3), rgba(255 255 255 / 0.3)), linear-gradient(254.86deg, rgba(194, 224, 255, 0.12) 0%, rgba(194, 224, 255, 0.12) 0%, rgba(255, 255, 255, 0.3) 49.98%, rgba(240, 247, 255, 0.3) 100.95%)', + linearSubtle: + mode === 'light' + ? `linear-gradient(to top right, ${alpha(blue[50], 0.3)} 40%, ${alpha( + grey[50], + 0.2, + )} 100%)` + : `linear-gradient(to top right, ${alpha(blue[900], 0.1)} 40%, ${alpha( + blueDark[800], + 0.2, + )} 100%)`, + }, + }, + shape: { + borderRadius: 12, + }, + spacing: 8, + typography: { + fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','), + // Match VS Code + // https://github.com/microsoft/vscode/blob/b38691f611d1ce3ef437c67a1b047c757b7b4e53/src/vs/editor/common/config/editorOptions.ts#L4578-L4580 + // https://github.com/microsoft/vscode/blob/d950552131d7350a45dac8b59bf179469c36c2ac/src/vs/editor/standalone/browser/standalone-tokens.css#L10 + fontFamilyCode: [ + 'Menlo', // macOS + 'Consolas', // Windows + '"Droid Sans Mono"', // Linux + 'monospace', // fallback + ].join(','), + fontFamilyTagline: ['"General Sans"', ...systemFont].join(','), + fontFamilySystem: systemFont.join(','), + fontWeightSemiBold: 600, + fontWeightExtraBold: 800, + h1: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: 'clamp(2.5rem, 1.125rem + 3.5vw, 3.5em)', + fontWeight: 600, + lineHeight: 78 / 70, + letterSpacing: -0.2, + ...(mode === 'light' && { + color: blueDark[900], + }), + }, + h2: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)', + fontWeight: 600, + lineHeight: 44 / 36, + letterSpacing: -0.2, + color: mode === 'dark' ? grey[100] : blueDark[700], + }, + h3: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: defaultTheme.typography.pxToRem(36), + lineHeight: 44 / 36, + letterSpacing: 0.2, + }, + h4: { + fontFamily: ['"General Sans"', ...systemFont].join(','), + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 42 / 28, + letterSpacing: 0.2, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(24), + lineHeight: 36 / 24, + letterSpacing: 0.1, + color: mode === 'dark' ? blue[300] : blue.main, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(20), + lineHeight: 30 / 20, + }, + button: { + textTransform: 'initial', + fontWeight: 700, + letterSpacing: 0, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + lineHeight: 24 / 18, + letterSpacing: 0, + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(16), // 16px + lineHeight: 24 / 16, + letterSpacing: 0, + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), // 14px + lineHeight: 21 / 14, + letterSpacing: 0, + }, + caption: { + display: 'inline-block', + fontSize: defaultTheme.typography.pxToRem(12), // 12px + lineHeight: 18 / 12, + letterSpacing: 0, + fontWeight: 700, + }, + allVariants: { + scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)', + }, + }, + /** + * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker). + * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet. + * + * πŸ˜“ Without this utility: + * { + * ...theme.vars ? { + * color: theme.vars.palette.primary.main, + * [theme.getColorScheme('dark')]: { + * color: '#fff', + * } + * } : { + * color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, + * } + * } + * + * 🀩 Using the utility: + * { + * color: (theme.vars || theme).palette.primary.main, + * ...theme.applyDarkStyles({ + * color: '#fff', + * }), + * } + * + * ------------------------------------------------------------------------------------------------- + * πŸ’‘ This util should be used in an array if the styles contain pseudo classes or nested selectors: + * + * ❌ There is a chance that the upper selectors could be overridden + * { + * // the whole selector could be overridden + * '&::before': { + * color: ... + * }, + * ...theme.applyDarkStyles({ + * '&::before': { + * color: ... + * } + * }) + * } + * + * βœ… use an array (supports in both emotion and styled-components) + * Only the `color` will be overridden in dark mode. + * [ + * '&::before': { + * color: ... + * }, + * theme.applyDarkStyles({ + * '&::before': { + * color: ... + * } + * }) + * ] + */ + applyDarkStyles(css: Parameters[0]) { + return (this as Theme).applyStyles('dark', css); + }, + }) as ThemeOptions; + +export function getThemedComponents(): ThemeOptions { + return { + components: { + MuiAlert: { + styleOverrides: { + root: { + padding: '12px 16px', + }, + standardWarning: ({ theme }) => [ + { + backgroundColor: alpha(theme.palette.warning[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + border: '1px solid', + borderColor: alpha(theme.palette.warning[600], 0.3), + '& .MuiAlert-icon': { + color: (theme.vars || theme).palette.warning[700], + }, + }, + theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.warning[700], 0.2), + color: (theme.vars || theme).palette.warning[50], + '& .MuiAlert-icon': { + color: (theme.vars || theme).palette.warning[200], + }, + }), + ], + icon: { + paddingTop: 12, + paddingBottom: 0, + }, + }, + }, + MuiButtonBase: { + defaultProps: { + disableTouchRipple: true, + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + transition: 'all 100ms ease-in', + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: { + root: ({ theme, ownerState }) => ({ + transition: 'all 120ms ease-in', + ...(ownerState.size === 'large' && { + ...theme.typography.body1, + lineHeight: 21 / 16, + padding: theme.spacing('8px', '10px', '10px', '12px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 10, + '& > span': { transition: '0.2s', marginLeft: 4 }, + '&:hover > span': { transform: 'translateX(2px)' }, + }), + ...(ownerState.size === 'medium' && { + fontSize: defaultTheme.typography.pxToRem(15), + padding: theme.spacing('8px', '12px', '8px', '14px'), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 8, + '& > span': { transition: '0.2s', marginLeft: 4 }, + '&:hover > span': { transform: 'translateX(2px)' }, + }), + ...(ownerState.size === 'small' && { + padding: theme.spacing('6px', 1), + fontFamily: theme.typography.fontFamily, + fontSize: defaultTheme.typography.pxToRem(13), + fontWeight: theme.typography.fontWeightSemiBold, + borderRadius: 8, + '& .MuiButton-startIcon': { + transition: '0.15s', + marginRight: 4, + marginLeft: -1, + }, + '& .MuiButton-endIcon': { + transition: '0.15s', + marginLeft: 4, + }, + '&:hover': { + '& .MuiButton-startIcon': { transform: 'translateX(-2px)' }, + '& .MuiButton-endIcon': { transform: 'translateX(2px)' }, + }, + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'secondary' && { + color: (theme.vars || theme).palette.text.primary, + backgroundColor: alpha(theme.palette.primaryDark[50], 0.3), + borderColor: (theme.vars || theme).palette.primaryDark[100], + boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0.5px inset, ${alpha( + theme.palette.grey[100], + 0.5, + )} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[50], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primaryDark[100], + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5)} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }), + }), + ...(ownerState.variant === 'outlined' && + ownerState.color === 'primary' && { + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[50], 0.3), + borderColor: (theme.vars || theme).palette.primary[100], + boxShadow: `${theme.palette.primary[50]} 0 2px 0.5px inset, ${alpha( + theme.palette.primary[100], + 0.2, + )} 0 -3px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[50], + borderColor: (theme.vars || theme).palette.primary[300], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[200], + borderColor: alpha(theme.palette.primary[900], 0.7), + backgroundColor: alpha(theme.palette.primary[900], 0.2), + boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha( + theme.palette.common.black, + 0.5, + )} 0 -3px 0 inset, ${theme.palette.common.black} 0 1px 2px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[900], + borderColor: (theme.vars || theme).palette.primary[700], + }, + }), + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'primary' && { + color: '#fff', + textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, + backgroundColor: (theme.vars || theme).palette.primary[500], + backgroundImage: `linear-gradient(180deg, ${alpha( + theme.palette.primary[500], + 0.6, + )} 0%, ${theme.palette.primary[600]} 100%)`, + boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[700]} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`, + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[700], + }, + '&:active': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }), + ...(ownerState.variant === 'text' && { + color: (theme.vars || theme).palette.primary[600], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + }), + }), + }), + }, + variants: [ + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'code' }, + style: ({ theme }) => [ + { + cursor: 'copy', + padding: 0, + width: 'max-content', + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.grey[600], + fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, + fontSize: defaultTheme.typography.pxToRem(12), + lineHeight: 21 / 14, + letterSpacing: 0, + WebkitFontSmoothing: 'subpixel-antialiased', + '& .MuiButton-startIcon': { + color: (theme.vars || theme).palette.grey[400], + }, + '& .MuiButton-endIcon': { + display: 'inline-block', + position: 'absolute', + color: (theme.vars || theme).palette.primary.main, + right: -22, + top: -1, + opacity: 0, + transitionProperty: 'opacity', + transitionDuration: '100ms', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + }, + '&:hover, &.Mui-focusVisible': { + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.primary.main, + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary.main, + opacity: 1, + }, + }, + }, + theme.applyDarkStyles({ + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary[300], + }, + '&:hover, &.Mui-focusVisible': { + color: (theme.vars || theme).palette.primary[300], + '& .MuiButton-endIcon': { + opacity: 1, + }, + }, + }), + ], + }, + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'codeOutlined' }, + style: ({ theme }) => [ + { + display: 'inline-block', + justifyContent: 'start', + overflowX: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + position: 'relative', + border: '1px solid', + color: (theme.vars || theme).palette.grey[900], + backgroundColor: alpha(theme.palette.primary[50], 0.3), + borderColor: (theme.vars || theme).palette.grey[200], + boxShadow: `0px 2px 2px ${alpha( + theme.palette.primary[100], + 0.2, + )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.2)}`, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: 400, + fontSize: defaultTheme.typography.pxToRem(12), + lineHeight: 21 / 14, + letterSpacing: 0, + WebkitFontSmoothing: 'subpixel-antialiased', + '& .MuiButton-endIcon': { + display: 'inline-block', + position: 'absolute', + top: 12, + right: 0, + marginRight: 10, + color: (theme.vars || theme).palette.grey[600], + }, + '&:hover, &.Mui-focusVisible': { + borderColor: (theme.vars || theme).palette.primary.main, + backgroundColor: (theme.vars || theme).palette.primary[50], + color: (theme.vars || theme).palette.primary[600], + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary.main, + }, + }, + } as const, + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[500], + borderColor: (theme.vars || theme).palette.primaryDark[600], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)', + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.grey[400], + }, + '&:hover, &.Mui-focusVisible': { + backgroundColor: (theme.vars || theme).palette.primary[900], + color: (theme.vars || theme).palette.primary[100], + '& .MuiButton-endIcon': { + color: (theme.vars || theme).palette.primary[300], + }, + }, + }), + ], + }, + { + // @ts-ignore internal repo module augmentation issue + props: { variant: 'link' }, + style: ({ theme }) => ({ + marginBottom: 1, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightBold, + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[50], + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + '&:hover': { + backgroundColor: alpha(theme.palette.primary[800], 0.3), + }, + }), + }), + }, + ], + }, + MuiIconButton: { + variants: [ + { + props: { color: 'primary' }, + style: ({ theme }) => [ + { + height: 34, + width: 34, + border: `1px solid`, + borderColor: (theme.vars || theme).palette.grey[200], + color: (theme.vars || theme).palette.primary[500], + borderRadius: theme.shape.borderRadius, + boxShadow: `inset 0 1px 2px ${ + (theme.vars || theme).palette.grey[50] + }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, + '&:hover': { + borderColor: (theme.vars || theme).palette.grey[300], + background: (theme.vars || theme).palette.grey[50], + }, + }, + theme.applyDarkStyles({ + borderColor: (theme.vars || theme).palette.primaryDark[700], + color: (theme.vars || theme).palette.primary[300], + boxShadow: `inset 0 1px 1px ${ + (theme.vars || theme).palette.primaryDark[900] + }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, + '&:hover': { + borderColor: (theme.vars || theme).palette.primaryDark[600], + background: alpha(theme.palette.primaryDark[700], 0.4), + }, + }), + ], + }, + { + props: { color: 'info' }, + style: ({ theme }) => [ + { + height: 34, + width: 34, + border: `1px solid`, + borderColor: (theme.vars || theme).palette.grey[200], + color: (theme.vars || theme).palette.grey[600], + borderRadius: theme.shape.borderRadius, + boxShadow: `inset 0 1px 2px ${ + (theme.vars || theme).palette.grey[50] + }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`, + '&:hover': { + color: (theme.vars || theme).palette.primary.main, + borderColor: (theme.vars || theme).palette.grey[300], + background: (theme.vars || theme).palette.grey[50], + }, + }, + theme.applyDarkStyles({ + borderColor: (theme.vars || theme).palette.primaryDark[700], + color: (theme.vars || theme).palette.grey[400], + boxShadow: `inset 0 1px 1px ${ + (theme.vars || theme).palette.primaryDark[900] + }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, + '&:hover': { + color: (theme.vars || theme).palette.primary[400], + borderColor: (theme.vars || theme).palette.primaryDark[600], + background: alpha(theme.palette.primaryDark[700], 0.4), + }, + }), + ], + }, + ], + }, + MuiMenu: { + styleOverrides: { + paper: ({ theme }) => [ + { + minWidth: 160, + color: (theme.vars || theme).palette.text.secondary, + backgroundImage: 'none', + border: '1px solid', + backgroundColor: (theme.vars || theme).palette.background.paper, + borderColor: (theme.vars || theme).palette.grey[200], + '& .MuiMenuItem-root': { + fontSize: theme.typography.pxToRem(14), + fontWeight: 500, + '&:hover, &:focus': { + backgroundColor: (theme.vars || theme).palette.grey[50], + }, + '&:focus-visible': { + outline: 'none', + }, + '&.Mui-selected': { + fontWeight: 500, + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[100], 0.6), + }, + }, + }, + theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + borderColor: (theme.vars || theme).palette.primaryDark[700], + '& .MuiMenuItem-root': { + '&:hover, &:focus': { + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[300], + backgroundColor: alpha(theme.palette.primary[900], 0.4), + }, + }, + }), + ], + }, + }, + MuiPopover: { + styleOverrides: { + paper: ({ theme }) => ({ + boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)', + ...theme.applyDarkStyles({ + boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', + }), + }), + }, + }, + MuiDivider: { + styleOverrides: { + root: ({ theme }) => ({ + borderColor: (theme.vars || theme).palette.grey[100], + ...theme.applyDarkStyles({ + borderColor: alpha(theme.palette.primaryDark[700], 0.8), + }), + }), + }, + }, + MuiLink: { + defaultProps: { + underline: 'none', + }, + styleOverrides: { + root: ({ theme }) => ({ + display: 'inline-flex', + alignItems: 'center', + fontWeight: theme.typography.fontWeightSemiBold, + '&.MuiTypography-body1 > svg': { + marginTop: 2, + }, + '& svg:last-child': { + marginLeft: 2, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }), + }, + variants: [ + { + props: { color: 'primary' }, + style: ({ theme }) => [ + { + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + color: (theme.vars || theme).palette.primary[700], + }, + }, + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + '&:hover': { + color: (theme.vars || theme).palette.primary[200], + }, + }), + ], + }, + ], + }, + MuiChip: { + styleOverrides: { + root: ({ ownerState: { color, variant }, theme }) => ({ + fontWeight: theme.typography.fontWeightSemiBold, + paddingBottom: 0.2, + ...(variant === 'outlined' && + color === 'default' && { + backgroundColor: alpha(theme.palette.grey[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + borderColor: (theme.vars || theme).palette.grey[200], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.grey[100], + color: (theme.vars || theme).palette.grey[900], + }, + ...theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + color: (theme.vars || theme).palette.grey[300], + borderColor: alpha(theme.palette.primaryDark[500], 0.5), + '&:hover': { + color: (theme.vars || theme).palette.grey[300], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + }, + }), + }), + ...(variant === 'outlined' && + color === 'info' && { + backgroundColor: alpha(theme.palette.grey[50], 0.5), + color: (theme.vars || theme).palette.grey[900], + borderColor: (theme.vars || theme).palette.grey[200], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[300], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + borderColor: (theme.vars || theme).palette.primaryDark[600], + }), + }), + ...(variant === 'outlined' && + color === 'primary' && { + borderColor: (theme.vars || theme).palette.primary[100], + backgroundColor: (theme.vars || theme).palette.primary[50], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + borderColor: alpha(theme.palette.primary[500], 0.2), + backgroundColor: alpha(theme.palette.primary[700], 0.2), + }), + }), + ...(variant === 'outlined' && + color === 'success' && { + borderColor: (theme.vars || theme).palette.success[100], + backgroundColor: (theme.vars || theme).palette.success[50], + color: (theme.vars || theme).palette.success[900], + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.success[300], + borderColor: alpha(theme.palette.success[300], 0.2), + background: alpha(theme.palette.success[800], 0.2), + }), + }), + ...(variant === 'filled' && { + ...(color === 'default' && { + border: '1px solid transparent', + color: (theme.vars || theme).palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.5), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[600], + }, + }), + }), + ...(color === 'primary' && { + color: (theme.vars || theme).palette.primary[600], + backgroundColor: alpha(theme.palette.primary[100], 0.4), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[600], + '&:hover': { + color: (theme.vars || theme).palette.primary[700], + }, + }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[100], + backgroundColor: alpha(theme.palette.primary[800], 0.5), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.5), + }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[100], + '&:hover': { + color: (theme.vars || theme).palette.primary[50], + }, + }, + }), + }), + }), + // for labelling product in the search + // @ts-ignore internal repo module augmentation issue + ...(variant === 'light' && { + ...(color === 'default' && { + color: (theme.vars || theme).palette.primary[700], + backgroundColor: alpha(theme.palette.primary[100], 0.3), + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[200], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + }), + }), + ...(color === 'warning' && { + color: (theme.vars || theme).palette.warning[900], + backgroundColor: (theme.vars || theme).palette.warning[100], + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: (theme.vars || theme).palette.warning[900], + }), + }), + ...(color === 'success' && { + color: (theme.vars || theme).palette.success[900], + backgroundColor: (theme.vars || theme).palette.success[100], + ...theme.applyDarkStyles({ + color: '#fff', + backgroundColor: (theme.vars || theme).palette.success[900], + }), + }), + }), + }), + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: ({ theme }) => [ + { + padding: '8px', + textTransform: 'none', + fontWeight: 500, + fontSize: theme.typography.pxToRem(14), + color: theme.palette.grey[700], + borderRadius: 0, + '&:hover': { + backgroundColor: theme.palette.grey[50], + }, + '&.Mui-selected': { + borderRadius: 10, + border: '1px solid', + color: (theme.vars || theme).palette.primary[500], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + color: theme.palette.grey[300], + '&:hover': { + backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), + }, + '&.Mui-selected': { + color: '#fff', + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primaryDark[600], + }, + }, + }), + ], + }, + }, + MuiSelect: { + defaultProps: { + IconComponent: ArrowDropDownRounded, + }, + styleOverrides: { + iconFilled: { + top: 'calc(50% - .25em)', + }, + }, + }, + MuiTab: { + defaultProps: { + disableTouchRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: ({ theme, ownerState }) => [ + { + backgroundImage: 'none', + backgroundColor: '#fff', + '&[href]': { + textDecorationLine: 'none', + }, + transition: theme.transitions.create(['border', 'box-shadow'], { + duration: theme.transitions.duration.shortest, + }), + ...(ownerState.variant === 'outlined' && { + display: 'block', + borderColor: (theme.vars || theme).palette.grey[100], + '&[href]': { + textDecorationLine: 'none', + boxShadow: `inset 0 1px 2px ${ + (theme.vars || theme).palette.grey[50] + }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.6)}`, + '&:hover': { + borderColor: (theme.vars || theme).palette.primary[200], + boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`, + }, + '&:focus-visible': { + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', + }, + }, + ':is(a&), :is(button&)': { + '&:hover': { + borderColor: (theme.vars || theme).palette.primary[200], + boxShadow: `0px 4px 16px ${(theme.vars || theme).palette.grey[200]}`, + }, + }, + }), + }, + theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + ...(ownerState.variant === 'outlined' && { + borderColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primaryDark[800], 0.6), + '&[href]': { + textDecorationLine: 'none', + boxShadow: `inset 0 1px 1px ${ + (theme.vars || theme).palette.primaryDark[900] + }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`, + '&:hover': { + borderColor: alpha(theme.palette.primary[600], 0.5), + boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, + }, + }, + ':is(a&), :is(button&)': { + '&:hover': { + boxShadow: `0px 4px 24px ${(theme.vars || theme).palette.common.black}`, + }, + }, + }), + }), + ], + }, + }, + MuiTableCell: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + padding: theme.spacing(1, 2), + borderColor: (theme.vars || theme).palette.divider, + ...(ownerState.variant === 'head' && { + color: (theme.vars || theme).palette.text.primary, + fontWeight: 700, + }), + ...(ownerState.variant === 'body' && { + color: (theme.vars || theme).palette.text.secondary, + }), + }), + }, + }, + MuiToggleButtonGroup: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: '#fff', + ...theme.applyDarkStyles({ + backgroundColor: (theme.vars || theme).palette.primaryDark[900], + }), + }), + }, + }, + MuiToggleButton: { + styleOverrides: { + root: ({ theme, ownerState }) => [ + { + textTransform: 'none', + fontWeight: 'medium', + color: theme.palette.text.secondary, + borderColor: theme.palette.grey[200], + ...(ownerState.size === 'small' && { + padding: '0.375rem 0.75rem', + }), + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[700], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + borderColor: theme.palette.primaryDark[700], + '&:hover': { + backgroundColor: alpha(theme.palette.primaryDark[600], 0.2), + }, + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[200], + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: alpha(theme.palette.primary[900], 0.4), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), + borderColor: `${(theme.vars || theme).palette.primary[400]} !important`, + }, + }, + }), + ], + }, + }, + MuiTooltip: { + styleOverrides: { + tooltip: { + borderRadius: 6, + padding: '6px 12px', + }, + }, + }, + MuiSwitch: { + styleOverrides: { + root: { + width: 32, + height: 20, + padding: 0, + '& .MuiSwitch-switchBase': { + '&.Mui-checked': { + transform: 'translateX(11px)', + color: '#fff', + }, + }, + }, + switchBase: { + height: 20, + width: 20, + padding: 0, + color: '#fff', + '&.Mui-checked + .MuiSwitch-track': { + opacity: 1, + }, + }, + track: ({ theme }) => ({ + opacity: 1, + borderRadius: 32, + backgroundColor: theme.palette.grey[400], + ...theme.applyDarkStyles({ + backgroundColor: theme.palette.grey[800], + }), + }), + thumb: { + flexShrink: 0, + width: '14px', + height: '14px', + }, + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: ({ theme }) => [ + { + textTransform: 'none', + fontWeight: theme.typography.fontWeightSemiBold, + color: theme.palette.grey[700], + borderColor: theme.palette.grey[200], + borderRadius: '8px', + '&.Mui-selected': { + color: (theme.vars || theme).palette.primary[500], + borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, + backgroundColor: (theme.vars || theme).palette.primary[50], + '&:hover': { + backgroundColor: (theme.vars || theme).palette.primary[100], + }, + }, + } as const, + theme.applyDarkStyles({ + color: theme.palette.grey[200], + borderColor: theme.palette.primaryDark[700], + '&.Mui-selected': { + color: theme.palette.primary[100], + borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, + backgroundColor: alpha(theme.palette.primary[900], 0.5), + '&:hover': { + backgroundColor: alpha(theme.palette.primary[900], 0.8), + }, + }, + }), + ], + }, + }, + MuiCssBaseline: { + defaultProps: { + enableColorScheme: true, + }, + styleOverrides: { + html: { + overflowY: 'scroll', + // TODO add support for it, + // https://github.com/mui/material-ui/issues/40748 + // scrollbarGutter: 'stable', + }, + }, + }, + }, + }; +} + +export const brandingDarkTheme = createTheme({ + ...getDesignTokens('dark'), + ...getThemedComponents(), +}); + +export const brandingLightTheme = createTheme({ + ...getDesignTokens('light'), + ...getThemedComponents(), +}); diff --git a/packages/mui-docs/src/branding/index.ts b/packages/mui-docs/src/branding/index.ts new file mode 100644 index 00000000000000..50621de654fd0a --- /dev/null +++ b/packages/mui-docs/src/branding/index.ts @@ -0,0 +1,2 @@ +export * from './brandingTheme'; +export * from './BrandingProvider'; diff --git a/packages/mui-docs/tsconfig.build.json b/packages/mui-docs/tsconfig.build.json index e51a26ab34c9e5..6ecc42731f24fc 100644 --- a/packages/mui-docs/tsconfig.build.json +++ b/packages/mui-docs/tsconfig.build.json @@ -13,5 +13,8 @@ }, "include": ["src/**/*.ts*", "src/**/*.json"], "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"], - "references": [{ "path": "../mui-material/tsconfig.build.json" }] + "references": [ + { "path": "../mui-material/tsconfig.build.json" }, + { "path": "../mui-system/tsconfig.build.json" } + ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e5e93832625cf..b2bddb8c0afcd2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1344,14 +1344,11 @@ importers: specifier: ^7.23.9 version: 7.24.1 '@mui/base': - specifier: workspace:* + specifier: '*' version: link:../mui-base/build - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/utils': - specifier: workspace:^ - version: link:../mui-utils/build + '@mui/system': + specifier: ^5.0.0 + version: 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -1362,6 +1359,12 @@ importers: specifier: ^15.8.1 version: 15.8.1 devDependencies: + '@mui/icons-material': + specifier: workspace:* + version: link:../mui-icons-material/build + '@mui/material': + specifier: workspace:* + version: link:../mui-material/build '@types/node': specifier: ^18.19.25 version: 18.19.26