From 219380c625bcec5bfccde7f903626937c6071fd4 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Tue, 11 Jun 2024 17:55:02 +0700 Subject: [PATCH] [docs] Add `theme.applyStyles` and migrate docs (#42498) --- .../accordion/AccordionDepthPanel.js | 6 +- .../accordion/AccordionDepthPanel.tsx | 6 +- .../accordion/AccordionStylingExpansion.js | 6 +- .../accordion/AccordionStylingExpansion.tsx | 6 +- .../components/aspect-ratio/FlexRowRatio.js | 8 +- .../components/aspect-ratio/FlexRowRatio.tsx | 8 +- .../components/autocomplete/GitHubLabel.js | 20 +- .../components/autocomplete/GitHubLabel.tsx | 20 +- .../data/joy/components/card/InstagramPost.js | 16 +- .../joy/components/card/InstagramPost.tsx | 16 +- .../checkbox/ExampleButtonCheckbox.js | 12 +- .../checkbox/ExampleButtonCheckbox.tsx | 12 +- .../joy/components/divider/DividerInCard.js | 13 +- .../joy/components/divider/DividerInCard.tsx | 13 +- .../joy/components/divider/DividerUsage.js | 28 +- .../joy/components/divider/DividerUsage.tsx | 28 +- .../divider/FullscreenOverflowDivider.js | 19 +- .../divider/FullscreenOverflowDivider.tsx | 19 +- .../joy/components/drawer/DrawerTransition.js | 17 +- .../components/drawer/DrawerTransition.tsx | 17 +- docs/data/joy/components/grid/AutoGrid.js | 6 +- docs/data/joy/components/grid/AutoGrid.tsx | 6 +- docs/data/joy/components/grid/BasicGrid.js | 6 +- docs/data/joy/components/grid/BasicGrid.tsx | 6 +- docs/data/joy/components/grid/CSSGrid.js | 6 +- docs/data/joy/components/grid/CSSGrid.tsx | 6 +- docs/data/joy/components/grid/ColumnsGrid.js | 6 +- docs/data/joy/components/grid/ColumnsGrid.tsx | 6 +- .../data/joy/components/grid/FullWidthGrid.js | 6 +- .../joy/components/grid/FullWidthGrid.tsx | 6 +- .../joy/components/grid/ResponsiveGrid.js | 6 +- .../joy/components/grid/ResponsiveGrid.tsx | 6 +- .../components/grid/RowAndColumnSpacing.js | 6 +- .../components/grid/RowAndColumnSpacing.tsx | 6 +- .../joy/components/grid/VariableWidthGrid.js | 6 +- .../joy/components/grid/VariableWidthGrid.tsx | 6 +- .../components/list/ExampleCollapsibleList.js | 26 +- .../list/ExampleCollapsibleList.tsx | 28 +- .../components/list/ExampleNavigationMenu.js | 8 +- .../components/list/ExampleNavigationMenu.tsx | 8 +- .../components/menu/MenuIconSideNavExample.js | 12 +- .../menu/MenuIconSideNavExample.tsx | 12 +- .../components/modal/DialogVerticalScroll.js | 12 +- .../components/modal/DialogVerticalScroll.tsx | 12 +- .../joy/components/modal/FadeModalDialog.js | 6 +- .../joy/components/modal/FadeModalDialog.tsx | 6 +- .../select/SelectCustomValueAppearance.js | 3 +- .../select/SelectCustomValueAppearance.tsx | 3 +- .../data/joy/components/slider/SliderUsage.js | 18 +- .../snackbar/CustomAnimatedSnackbar.js | 12 +- .../snackbar/CustomAnimatedSnackbar.tsx | 12 +- .../joy/components/stepper/ButtonStepper.js | 10 +- .../joy/components/stepper/ButtonStepper.tsx | 10 +- .../stepper/CompanyRegistrationStepper.js | 6 +- .../stepper/CompanyRegistrationStepper.tsx | 6 +- .../joy/components/switch/SwitchDecorators.js | 6 +- .../components/switch/SwitchDecorators.tsx | 6 +- .../switch/SwitchDecorators.tsx.preview | 16 - .../components/table/TableColumnPinning.js | 7 +- .../components/table/TableColumnPinning.tsx | 8 +- .../components/table/TableScrollingShadows.js | 7 +- .../table/TableScrollingShadows.tsx | 8 +- .../table/TableSheetColorInversion.js | 7 +- .../table/TableSheetColorInversion.tsx | 7 +- .../components/table/TableSortAndSelection.js | 44 ++- .../table/TableSortAndSelection.tsx | 48 ++- .../components/tabs/TabsBottomNavExample.js | 3 +- .../components/tabs/TabsBottomNavExample.tsx | 3 +- .../textarea/ExampleTextareaComment.js | 8 +- .../textarea/ExampleTextareaComment.tsx | 8 +- .../approaches/StyledComponent.js | 64 ++-- .../approaches/StyledComponent.tsx | 64 ++-- .../StatFullTemplate.js | 17 +- .../StatFullTemplate.tsx | 17 +- .../theme-colors/PaletteThemeViewer.js | 32 +- .../theme-colors/PaletteThemeViewer.tsx | 32 +- .../theme-shadow/ShadowThemeViewer.js | 30 +- .../theme-shadow/ShadowThemeViewer.tsx | 30 +- .../templates/TemplateCollection.js | 8 +- .../getting-started/templates/email/App.tsx | 8 +- .../templates/email/components/Layout.tsx | 8 +- .../templates/email/components/WriteEmail.tsx | 40 +-- .../getting-started/templates/files/App.tsx | 18 +- .../templates/files/components/Layout.tsx | 8 +- .../components/TwoSidedLayout.tsx | 34 ++- .../messages/components/ChatBubble.tsx | 76 +++-- .../messages/components/ColorSchemeToggle.tsx | 14 +- .../templates/messages/components/Sidebar.tsx | 36 ++- .../components/ColorSchemeToggle.tsx | 14 +- .../order-dashboard/components/OrderTable.tsx | 22 +- .../order-dashboard/components/Sidebar.tsx | 39 ++- .../components/ColorSchemeToggle.tsx | 14 +- .../components/FileUpload.tsx | 6 +- .../profile-dashboard/components/Sidebar.tsx | 24 +- .../components/ColorSchemeToggle.tsx | 14 +- .../getting-started/templates/team/App.tsx | 8 +- .../ColorInversionAnyParent.js | 7 +- .../ColorInversionAnyParent.tsx | 8 +- .../color-inversion/ColorInversionFooter.js | 16 +- .../color-inversion/ColorInversionFooter.tsx | 16 +- .../color-inversion/ColorInversionHeader.js | 33 +- .../color-inversion/ColorInversionHeader.tsx | 33 +- .../ColorInversionMarketing.js | 50 +-- .../ColorInversionMarketing.tsx | 50 +-- .../ColorInversionNavigation.js | 10 +- .../ColorInversionNavigation.tsx | 10 +- .../accordion/AccordionTransition.js | 11 +- .../accordion/AccordionTransition.tsx | 11 +- .../accordion/CustomizedAccordions.js | 8 +- .../accordion/CustomizedAccordions.tsx | 8 +- .../components/autocomplete/GitHubLabel.js | 65 ++-- .../components/autocomplete/GitHubLabel.tsx | 67 ++-- .../components/autocomplete/RenderGroup.js | 8 +- .../components/autocomplete/RenderGroup.tsx | 8 +- .../autocomplete/UseAutocomplete.js | 13 +- .../autocomplete/UseAutocomplete.tsx | 13 +- .../components/cards/RecipeReviewCard.js | 17 +- .../components/cards/RecipeReviewCard.tsx | 17 +- .../checkboxes/CustomizedCheckbox.js | 28 +- .../checkboxes/CustomizedCheckbox.tsx | 28 +- .../material/components/drawers/MiniDrawer.js | 49 +-- .../components/drawers/MiniDrawer.tsx | 49 +-- .../drawers/PersistentDrawerLeft.js | 44 +-- .../drawers/PersistentDrawerLeft.tsx | 44 +-- .../drawers/PersistentDrawerRight.js | 44 +-- .../drawers/PersistentDrawerRight.tsx | 44 +-- .../components/drawers/SwipeableEdgeDrawer.js | 16 +- .../drawers/SwipeableEdgeDrawer.tsx | 16 +- .../data/material/components/grid/AutoGrid.js | 5 +- .../material/components/grid/AutoGrid.tsx | 5 +- .../components/grid/AutoGridNoWrap.js | 5 +- .../components/grid/AutoGridNoWrap.tsx | 5 +- .../material/components/grid/BasicGrid.js | 5 +- .../material/components/grid/BasicGrid.tsx | 5 +- docs/data/material/components/grid/CSSGrid.js | 5 +- .../data/material/components/grid/CSSGrid.tsx | 5 +- .../material/components/grid/ColumnsGrid.js | 5 +- .../material/components/grid/ColumnsGrid.tsx | 5 +- .../material/components/grid/FullWidthGrid.js | 5 +- .../components/grid/FullWidthGrid.tsx | 5 +- .../material/components/grid/NestedGrid.js | 5 +- .../material/components/grid/NestedGrid.tsx | 5 +- .../components/grid/ResponsiveGrid.js | 5 +- .../components/grid/ResponsiveGrid.tsx | 5 +- .../components/grid/RowAndColumnSpacing.js | 5 +- .../components/grid/RowAndColumnSpacing.tsx | 5 +- .../components/grid/VariableWidthGrid.js | 5 +- .../components/grid/VariableWidthGrid.tsx | 5 +- .../material/components/grid2/AutoGrid.js | 5 +- .../material/components/grid2/AutoGrid.tsx | 5 +- .../material/components/grid2/BasicGrid.js | 5 +- .../material/components/grid2/BasicGrid.tsx | 5 +- .../material/components/grid2/ColumnsGrid.js | 5 +- .../material/components/grid2/ColumnsGrid.tsx | 5 +- .../components/grid2/FullWidthGrid.js | 5 +- .../components/grid2/FullWidthGrid.tsx | 5 +- .../material/components/grid2/NestedGrid.js | 5 +- .../material/components/grid2/NestedGrid.tsx | 5 +- .../components/grid2/NestedGridColumns.js | 5 +- .../components/grid2/NestedGridColumns.tsx | 5 +- .../material/components/grid2/OffsetGrid.js | 5 +- .../material/components/grid2/OffsetGrid.tsx | 5 +- .../components/grid2/ResponsiveGrid.js | 5 +- .../components/grid2/ResponsiveGrid.tsx | 5 +- .../components/grid2/RowAndColumnSpacing.js | 5 +- .../components/grid2/RowAndColumnSpacing.tsx | 5 +- .../components/grid2/VariableWidthGrid.js | 5 +- .../components/grid2/VariableWidthGrid.tsx | 5 +- .../components/masonry/BasicMasonry.js | 5 +- .../components/masonry/BasicMasonry.tsx | 5 +- .../components/masonry/FixedColumns.js | 5 +- .../components/masonry/FixedColumns.tsx | 5 +- .../components/masonry/FixedSpacing.js | 5 +- .../components/masonry/FixedSpacing.tsx | 5 +- .../components/masonry/ImageMasonry.js | 5 +- .../components/masonry/ImageMasonry.tsx | 5 +- .../masonry/MasonryWithVariableHeightItems.js | 5 +- .../MasonryWithVariableHeightItems.tsx | 5 +- .../components/masonry/ResponsiveColumns.js | 5 +- .../components/masonry/ResponsiveColumns.tsx | 5 +- .../components/masonry/ResponsiveSpacing.js | 5 +- .../components/masonry/ResponsiveSpacing.tsx | 5 +- .../material/components/masonry/SSRMasonry.js | 5 +- .../components/masonry/SSRMasonry.tsx | 5 +- .../material/components/masonry/Sequential.js | 5 +- .../components/masonry/Sequential.tsx | 5 +- .../components/material-icons/SearchIcons.js | 84 +++-- .../components/menus/CustomizedMenus.js | 6 +- .../components/menus/CustomizedMenus.tsx | 6 +- .../components/popper/ScrollPlayground.js | 96 +++++- .../progress/CustomizedProgressBars.js | 22 +- .../progress/CustomizedProgressBars.tsx | 22 +- .../radio-buttons/CustomizedRadios.js | 28 +- .../radio-buttons/CustomizedRadios.tsx | 28 +- .../components/radio-buttons/UseRadioGroup.js | 15 +- .../radio-buttons/UseRadioGroup.tsx | 15 +- .../components/slider/CustomizedSlider.js | 18 +- .../components/slider/CustomizedSlider.tsx | 18 +- .../components/slider/MusicPlayerSlider.js | 49 +-- .../components/slider/MusicPlayerSlider.tsx | 49 +-- .../material/components/stack/BasicStack.js | 5 +- .../material/components/stack/BasicStack.tsx | 5 +- .../components/stack/DirectionStack.js | 5 +- .../components/stack/DirectionStack.tsx | 5 +- .../material/components/stack/DividerStack.js | 5 +- .../components/stack/DividerStack.tsx | 5 +- .../components/stack/FlexboxGapStack.js | 5 +- .../components/stack/FlexboxGapStack.tsx | 5 +- .../components/stack/ResponsiveStack.js | 5 +- .../components/stack/ResponsiveStack.tsx | 5 +- .../components/stack/ZeroWidthStack.js | 5 +- .../components/stack/ZeroWidthStack.tsx | 5 +- .../components/steppers/CustomizedSteppers.js | 60 ++-- .../steppers/CustomizedSteppers.tsx | 60 ++-- .../components/switches/CustomizedSwitches.js | 49 ++- .../switches/CustomizedSwitches.tsx | 49 ++- .../text-fields/CustomizedInputsStyled.js | 16 +- .../text-fields/CustomizedInputsStyled.tsx | 16 +- .../text-fields/LayoutTextFields.js | 6 +- .../text-fields/LayoutTextFields.tsx | 6 +- .../StatFullTemplate.js | 17 +- .../StatFullTemplate.tsx | 17 +- .../customization/dark-mode/dark-mode.md | 86 ++++++ .../how-to-customize/DynamicCSS.js | 25 +- .../how-to-customize/DynamicCSS.tsx | 25 +- .../templates/blog/MainFeaturedPost.js | 5 +- .../templates/blog/MainFeaturedPost.tsx | 7 +- .../templates/checkout/Checkout.js | 33 +- .../templates/checkout/Checkout.tsx | 34 +-- .../templates/checkout/PaymentForm.js | 76 +++-- .../templates/checkout/PaymentForm.tsx | 76 +++-- .../components/ChartUserByCountry.js | 40 ++- .../components/ChartUserByCountry.tsx | 40 ++- .../dashboard/components/HighlightedCard.js | 20 +- .../dashboard/components/HighlightedCard.tsx | 20 +- .../landing-page/components/AppAppBar.js | 14 +- .../landing-page/components/AppAppBar.tsx | 14 +- .../landing-page/components/Features.js | 126 ++++---- .../landing-page/components/Features.tsx | 134 ++++---- .../templates/landing-page/components/Hero.js | 41 ++- .../landing-page/components/Hero.tsx | 41 ++- .../landing-page/components/Pricing.js | 90 +++--- .../landing-page/components/Pricing.tsx | 90 +++--- .../templates/pricing/Pricing.js | 20 +- .../templates/pricing/Pricing.tsx | 20 +- .../templates/sign-in-side/SignInCard.js | 8 +- .../templates/sign-in-side/SignInCard.tsx | 8 +- .../templates/sign-in-side/SignInSide.js | 8 +- .../templates/sign-in-side/SignInSide.tsx | 8 +- .../templates/sign-in/SignIn.js | 18 +- .../templates/sign-in/SignIn.tsx | 18 +- .../templates/sign-up/SignUp.js | 16 +- .../templates/sign-up/SignUp.tsx | 16 +- .../templates/sticky-footer/StickyFooter.js | 12 +- .../templates/sticky-footer/StickyFooter.tsx | 12 +- docs/data/system/components/grid/AutoGrid.js | 8 +- docs/data/system/components/grid/AutoGrid.tsx | 8 +- .../system/components/grid/AutoGridNoWrap.js | 5 +- .../system/components/grid/AutoGridNoWrap.tsx | 5 +- docs/data/system/components/grid/BasicGrid.js | 8 +- .../data/system/components/grid/BasicGrid.tsx | 8 +- .../system/components/grid/ColumnsGrid.js | 8 +- .../system/components/grid/ColumnsGrid.tsx | 8 +- .../components/grid/CustomBreakpointsGrid.js | 8 +- .../system/components/grid/FullWidthGrid.js | 8 +- .../system/components/grid/FullWidthGrid.tsx | 8 +- .../data/system/components/grid/NestedGrid.js | 5 +- .../system/components/grid/NestedGrid.tsx | 5 +- .../data/system/components/grid/OffsetGrid.js | 8 +- .../system/components/grid/OffsetGrid.tsx | 8 +- .../system/components/grid/ResponsiveGrid.js | 8 +- .../system/components/grid/ResponsiveGrid.tsx | 8 +- .../components/grid/RowAndColumnSpacing.js | 8 +- .../components/grid/RowAndColumnSpacing.tsx | 8 +- .../system/components/grid/SpacingGrid.js | 10 +- .../system/components/grid/SpacingGrid.tsx | 10 +- .../components/grid/VariableWidthGrid.js | 8 +- .../components/grid/VariableWidthGrid.tsx | 8 +- .../system/components/stack/BasicStack.js | 5 +- .../system/components/stack/BasicStack.tsx | 5 +- .../system/components/stack/DirectionStack.js | 5 +- .../components/stack/DirectionStack.tsx | 5 +- .../system/components/stack/DividerStack.js | 15 +- .../system/components/stack/DividerStack.tsx | 15 +- .../components/stack/FlexboxGapStack.js | 5 +- .../components/stack/FlexboxGapStack.tsx | 5 +- .../components/stack/InteractiveStack.js | 5 +- .../components/stack/InteractiveStack.tsx | 5 +- .../components/stack/ResponsiveStack.js | 5 +- .../components/stack/ResponsiveStack.tsx | 5 +- docs/data/system/display/Block.js | 34 ++- docs/data/system/display/Block.tsx | 34 ++- docs/data/system/display/Inline.js | 34 ++- docs/data/system/display/Inline.tsx | 34 ++- docs/data/system/display/Overflow.js | 36 ++- docs/data/system/display/Overflow.tsx | 36 ++- docs/data/system/display/TextOverflow.js | 36 ++- docs/data/system/display/TextOverflow.tsx | 36 ++- docs/data/system/display/Visibility.js | 18 +- docs/data/system/display/Visibility.tsx | 18 +- docs/data/system/display/WhiteSpace.js | 36 ++- docs/data/system/display/WhiteSpace.tsx | 36 ++- .../CreateCssVarsProvider.js | 5 +- .../CreateCssVarsProvider.tsx | 5 +- docs/data/system/flexbox/AlignContent.js | 32 +- docs/data/system/flexbox/AlignContent.tsx | 32 +- docs/data/system/flexbox/AlignItems.js | 32 +- docs/data/system/flexbox/AlignItems.tsx | 32 +- docs/data/system/flexbox/AlignSelf.js | 32 +- docs/data/system/flexbox/AlignSelf.tsx | 32 +- docs/data/system/flexbox/Display.js | 50 +-- docs/data/system/flexbox/Display.tsx | 50 +-- docs/data/system/flexbox/FlexDirection.js | 32 +- docs/data/system/flexbox/FlexDirection.tsx | 32 +- docs/data/system/flexbox/FlexGrow.js | 32 +- docs/data/system/flexbox/FlexGrow.tsx | 32 +- docs/data/system/flexbox/FlexShrink.js | 32 +- docs/data/system/flexbox/FlexShrink.tsx | 32 +- docs/data/system/flexbox/FlexWrap.js | 32 +- docs/data/system/flexbox/FlexWrap.tsx | 32 +- docs/data/system/flexbox/JustifyContent.js | 32 +- docs/data/system/flexbox/JustifyContent.tsx | 32 +- docs/data/system/flexbox/Order.js | 32 +- docs/data/system/flexbox/Order.tsx | 32 +- .../the-sx-prop/the-sx-prop.md | 27 +- docs/data/system/grid/Display.js | 18 +- docs/data/system/grid/Display.tsx | 18 +- docs/data/system/grid/Gap.js | 30 +- docs/data/system/grid/Gap.tsx | 30 +- docs/data/system/grid/GridAutoColumns.js | 30 +- docs/data/system/grid/GridAutoColumns.tsx | 30 +- docs/data/system/grid/GridAutoFlow.js | 32 +- docs/data/system/grid/GridAutoFlow.tsx | 32 +- docs/data/system/grid/GridAutoRows.js | 32 +- docs/data/system/grid/GridAutoRows.tsx | 32 +- docs/data/system/grid/GridTemplateColumns.js | 32 +- docs/data/system/grid/GridTemplateColumns.tsx | 32 +- docs/data/system/grid/GridTemplateRows.js | 32 +- docs/data/system/grid/GridTemplateRows.tsx | 32 +- docs/data/system/grid/RowAndColumnGap.js | 30 +- docs/data/system/grid/RowAndColumnGap.tsx | 30 +- docs/data/system/positions/ZIndex.js | 34 ++- docs/data/system/positions/ZIndex.tsx | 34 ++- docs/data/system/shadows/ShadowsDemo.js | 52 ++-- docs/data/system/shadows/ShadowsDemo.tsx | 52 ++-- docs/data/system/sizing/Height.js | 72 +++-- docs/data/system/sizing/Height.tsx | 72 +++-- docs/data/system/sizing/Values.js | 72 +++-- docs/data/system/sizing/Values.tsx | 72 +++-- docs/data/system/sizing/Width.js | 90 +++--- docs/data/system/sizing/Width.tsx | 90 +++--- .../system/spacing/HorizontalCentering.js | 18 +- .../system/spacing/HorizontalCentering.tsx | 18 +- docs/data/system/spacing/SpacingDemo.js | 54 ++-- docs/data/system/spacing/SpacingDemo.tsx | 54 ++-- docs/pages/experiments/index.js | 10 +- docs/pages/experiments/joy/toggle-button.tsx | 14 +- docs/src/components/animation/FlashCode.tsx | 71 +++-- .../src/components/productX/XTreeViewDemo.tsx | 14 +- .../components/showcase/FolderTreeView.tsx | 15 +- .../components/typography/GradientText.tsx | 26 +- docs/src/modules/components/AdDisplay.js | 30 +- docs/src/modules/components/AppFrame.js | 72 +++-- docs/src/modules/components/AppLayoutDocs.js | 107 ++++--- .../modules/components/AppNavDrawerItem.js | 229 ++++++++------ .../modules/components/AppTableOfContents.js | 56 ++-- docs/src/modules/components/Demo.js | 167 ++++++---- .../src/modules/components/DemoToolbarRoot.ts | 24 +- .../components/HighlightedCodeWithTabs.tsx | 286 ++++++++++++++---- docs/src/modules/components/ad.styles.js | 6 +- .../onepirate/modules/components/Button.js | 30 +- .../onepirate/modules/components/Button.tsx | 30 +- .../onepirate/modules/components/Paper.js | 32 +- .../onepirate/modules/components/Paper.tsx | 32 +- .../onepirate/modules/form/FormFeedback.js | 26 +- .../onepirate/modules/form/FormFeedback.tsx | 26 +- .../fixtures/Masonry/EmSpacingValue.js | 5 +- .../fixtures/Masonry/RemSpacingValue.js | 5 +- 378 files changed, 5345 insertions(+), 3184 deletions(-) delete mode 100644 docs/data/joy/components/switch/SwitchDecorators.tsx.preview diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.js b/docs/data/joy/components/accordion/AccordionDepthPanel.js index ede69f58d19fef..d2f5918cd209ea 100644 --- a/docs/data/joy/components/accordion/AccordionDepthPanel.js +++ b/docs/data/joy/components/accordion/AccordionDepthPanel.js @@ -13,19 +13,19 @@ export default function AccordionDepthPanel() { ({ maxWidth: 400, borderRadius: 'lg', [`& .${accordionSummaryClasses.button}:hover`]: { bgcolor: 'transparent', }, [`& .${accordionDetailsClasses.content}`]: { - boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`, + boxShadow: `inset 0 1px ${theme.vars.palette.divider}`, [`&.${accordionDetailsClasses.expanded}`]: { paddingBlock: '0.75rem', }, }, - }} + })} > First accordion diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.tsx b/docs/data/joy/components/accordion/AccordionDepthPanel.tsx index ede69f58d19fef..d2f5918cd209ea 100644 --- a/docs/data/joy/components/accordion/AccordionDepthPanel.tsx +++ b/docs/data/joy/components/accordion/AccordionDepthPanel.tsx @@ -13,19 +13,19 @@ export default function AccordionDepthPanel() { ({ maxWidth: 400, borderRadius: 'lg', [`& .${accordionSummaryClasses.button}:hover`]: { bgcolor: 'transparent', }, [`& .${accordionDetailsClasses.content}`]: { - boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`, + boxShadow: `inset 0 1px ${theme.vars.palette.divider}`, [`&.${accordionDetailsClasses.expanded}`]: { paddingBlock: '0.75rem', }, }, - }} + })} > First accordion diff --git a/docs/data/joy/components/accordion/AccordionStylingExpansion.js b/docs/data/joy/components/accordion/AccordionStylingExpansion.js index 1cc7d7f01a08e5..3aea0485787a06 100644 --- a/docs/data/joy/components/accordion/AccordionStylingExpansion.js +++ b/docs/data/joy/components/accordion/AccordionStylingExpansion.js @@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary'; export default function AccordionStylingExpansion() { return ( ({ maxWidth: 400, [`& .${accordionClasses.root}`]: { marginTop: '0.5rem', @@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() { borderColor: 'background.level2', }, '& [aria-expanded="true"]': { - boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`, + boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`, }, - }} + })} > First accordion diff --git a/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx b/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx index 1cc7d7f01a08e5..3aea0485787a06 100644 --- a/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx +++ b/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx @@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary'; export default function AccordionStylingExpansion() { return ( ({ maxWidth: 400, [`& .${accordionClasses.root}`]: { marginTop: '0.5rem', @@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() { borderColor: 'background.level2', }, '& [aria-expanded="true"]': { - boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`, + boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`, }, - }} + })} > First accordion diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js index 7b9a3b58e00f42..ec2bae14cc5697 100644 --- a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js +++ b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js @@ -18,10 +18,10 @@ export default function FlexRowRatio() { sx={{ gap: 2, minWidth: 300 }} > - + {option.name} {option.description} - + )} options={[...labels].sort((a, b) => { diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx index d23364403cee90..eec92156c3734d 100644 --- a/docs/data/joy/components/autocomplete/GitHubLabel.tsx +++ b/docs/data/joy/components/autocomplete/GitHubLabel.tsx @@ -180,7 +180,13 @@ export default function GitHubLabel() { }, })} > - + {option.name} {option.description} - + )} options={[...labels].sort((a, b) => { diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js index 0d502f6d21b340..5fcd45d2ef5e52 100644 --- a/docs/data/joy/components/card/InstagramPost.js +++ b/docs/data/joy/components/card/InstagramPost.js @@ -73,12 +73,16 @@ export default function InstagramPost() { {[...Array(5)].map((_, index) => ( ))} diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx index 0d502f6d21b340..5fcd45d2ef5e52 100644 --- a/docs/data/joy/components/card/InstagramPost.tsx +++ b/docs/data/joy/components/card/InstagramPost.tsx @@ -73,12 +73,16 @@ export default function InstagramPost() { {[...Array(5)].map((_, index) => ( ))} diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js index cf991e1d29c76e..c107f38061caa3 100644 --- a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js +++ b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js @@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() { {['Mobile', 'Laptop', 'Monitor'].map((item) => ( { { diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx index cb311fbd8bb6c2..bc9878e235d096 100644 --- a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx +++ b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx @@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() { {['Mobile', 'Laptop', 'Monitor'].map((item) => ( { { diff --git a/docs/data/joy/components/divider/DividerInCard.js b/docs/data/joy/components/divider/DividerInCard.js index 453ceae89565d1..cfe68ede51626e 100644 --- a/docs/data/joy/components/divider/DividerInCard.js +++ b/docs/data/joy/components/divider/DividerInCard.js @@ -26,7 +26,13 @@ export default function DividerInCard() { > Headline - + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever @@ -37,7 +43,10 @@ export default function DividerInCard() { variant="soft" color="neutral" endDecorator={} - sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }} + sx={[ + { width: '100%' }, + orientation === 'horizontal' ? { mt: 2 } : { mt: 0 }, + ]} > See more diff --git a/docs/data/joy/components/divider/DividerInCard.tsx b/docs/data/joy/components/divider/DividerInCard.tsx index 847e08b6832934..f44dbceb71217f 100644 --- a/docs/data/joy/components/divider/DividerInCard.tsx +++ b/docs/data/joy/components/divider/DividerInCard.tsx @@ -27,7 +27,13 @@ export default function DividerInCard() { > Headline - + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever @@ -38,7 +44,10 @@ export default function DividerInCard() { variant="soft" color="neutral" endDecorator={} - sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }} + sx={[ + { width: '100%' }, + orientation === 'horizontal' ? { mt: 2 } : { mt: 0 }, + ]} > See more diff --git a/docs/data/joy/components/divider/DividerUsage.js b/docs/data/joy/components/divider/DividerUsage.js index b496635dec8c74..38c839b08cf39f 100644 --- a/docs/data/joy/components/divider/DividerUsage.js +++ b/docs/data/joy/components/divider/DividerUsage.js @@ -38,21 +38,25 @@ export default function DividerUsage() { sx={{ width: 300, pb: 3 }} > diff --git a/docs/data/joy/components/divider/DividerUsage.tsx b/docs/data/joy/components/divider/DividerUsage.tsx index b496635dec8c74..38c839b08cf39f 100644 --- a/docs/data/joy/components/divider/DividerUsage.tsx +++ b/docs/data/joy/components/divider/DividerUsage.tsx @@ -38,21 +38,25 @@ export default function DividerUsage() { sx={{ width: 300, pb: 3 }} > diff --git a/docs/data/joy/components/divider/FullscreenOverflowDivider.js b/docs/data/joy/components/divider/FullscreenOverflowDivider.js index 18e1c5aa1c919e..71b494b35cf3db 100644 --- a/docs/data/joy/components/divider/FullscreenOverflowDivider.js +++ b/docs/data/joy/components/divider/FullscreenOverflowDivider.js @@ -10,23 +10,22 @@ export default function FullscreenOverflowDivider() { ({ width: 200, py: 5, mx: 'auto', border: '1px solid', borderColor: 'success.300', - bgcolor: (theme) => - `rgba(${theme.vars.palette.success.lightChannel} / 0.5)`, - }} + bgcolor: `rgba(${theme.vars.palette.success.lightChannel} / 0.5)`, + })} > diff --git a/docs/data/joy/components/divider/FullscreenOverflowDivider.tsx b/docs/data/joy/components/divider/FullscreenOverflowDivider.tsx index 18e1c5aa1c919e..71b494b35cf3db 100644 --- a/docs/data/joy/components/divider/FullscreenOverflowDivider.tsx +++ b/docs/data/joy/components/divider/FullscreenOverflowDivider.tsx @@ -10,23 +10,22 @@ export default function FullscreenOverflowDivider() { ({ width: 200, py: 5, mx: 'auto', border: '1px solid', borderColor: 'success.300', - bgcolor: (theme) => - `rgba(${theme.vars.palette.success.lightChannel} / 0.5)`, - }} + bgcolor: `rgba(${theme.vars.palette.success.lightChannel} / 0.5)`, + })} > diff --git a/docs/data/joy/components/drawer/DrawerTransition.js b/docs/data/joy/components/drawer/DrawerTransition.js index 5c1f113f86aebd..922e05de6ccd0a 100644 --- a/docs/data/joy/components/drawer/DrawerTransition.js +++ b/docs/data/joy/components/drawer/DrawerTransition.js @@ -18,12 +18,17 @@ export default function DrawerTransition() { setOpen(false)} - sx={{ - '--Drawer-transitionDuration': open ? '0.4s' : '0.2s', - '--Drawer-transitionFunction': open - ? 'cubic-bezier(0.79,0.14,0.15,0.86)' - : 'cubic-bezier(0.77,0,0.18,1)', - }} + sx={[ + open + ? { + '--Drawer-transitionDuration': '0.4s', + '--Drawer-transitionFunction': 'cubic-bezier(0.79,0.14,0.15,0.86)', + } + : { + '--Drawer-transitionDuration': '0.2s', + '--Drawer-transitionFunction': 'cubic-bezier(0.77,0,0.18,1)', + }, + ]} > diff --git a/docs/data/joy/components/drawer/DrawerTransition.tsx b/docs/data/joy/components/drawer/DrawerTransition.tsx index 5c1f113f86aebd..922e05de6ccd0a 100644 --- a/docs/data/joy/components/drawer/DrawerTransition.tsx +++ b/docs/data/joy/components/drawer/DrawerTransition.tsx @@ -18,12 +18,17 @@ export default function DrawerTransition() { setOpen(false)} - sx={{ - '--Drawer-transitionDuration': open ? '0.4s' : '0.2s', - '--Drawer-transitionFunction': open - ? 'cubic-bezier(0.79,0.14,0.15,0.86)' - : 'cubic-bezier(0.77,0,0.18,1)', - }} + sx={[ + open + ? { + '--Drawer-transitionDuration': '0.4s', + '--Drawer-transitionFunction': 'cubic-bezier(0.79,0.14,0.15,0.86)', + } + : { + '--Drawer-transitionDuration': '0.2s', + '--Drawer-transitionFunction': 'cubic-bezier(0.77,0,0.18,1)', + }, + ]} > diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js index 987cf360c6e5c1..b1ccef8819a661 100644 --- a/docs/data/joy/components/grid/AutoGrid.js +++ b/docs/data/joy/components/grid/AutoGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function AutoGrid() { diff --git a/docs/data/joy/components/grid/AutoGrid.tsx b/docs/data/joy/components/grid/AutoGrid.tsx index 987cf360c6e5c1..b1ccef8819a661 100644 --- a/docs/data/joy/components/grid/AutoGrid.tsx +++ b/docs/data/joy/components/grid/AutoGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function AutoGrid() { diff --git a/docs/data/joy/components/grid/BasicGrid.js b/docs/data/joy/components/grid/BasicGrid.js index 4caf40a32a593b..4ab843fdd64cf4 100644 --- a/docs/data/joy/components/grid/BasicGrid.js +++ b/docs/data/joy/components/grid/BasicGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function BasicGrid() { diff --git a/docs/data/joy/components/grid/BasicGrid.tsx b/docs/data/joy/components/grid/BasicGrid.tsx index 4caf40a32a593b..4ab843fdd64cf4 100644 --- a/docs/data/joy/components/grid/BasicGrid.tsx +++ b/docs/data/joy/components/grid/BasicGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function BasicGrid() { diff --git a/docs/data/joy/components/grid/CSSGrid.js b/docs/data/joy/components/grid/CSSGrid.js index 7d9cbf5a3c8c01..5a40e82099038b 100644 --- a/docs/data/joy/components/grid/CSSGrid.js +++ b/docs/data/joy/components/grid/CSSGrid.js @@ -4,13 +4,15 @@ import Box from '@mui/joy/Box'; import Sheet from '@mui/joy/Sheet'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function CSSGrid() { diff --git a/docs/data/joy/components/grid/CSSGrid.tsx b/docs/data/joy/components/grid/CSSGrid.tsx index 7d9cbf5a3c8c01..5a40e82099038b 100644 --- a/docs/data/joy/components/grid/CSSGrid.tsx +++ b/docs/data/joy/components/grid/CSSGrid.tsx @@ -4,13 +4,15 @@ import Box from '@mui/joy/Box'; import Sheet from '@mui/joy/Sheet'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function CSSGrid() { diff --git a/docs/data/joy/components/grid/ColumnsGrid.js b/docs/data/joy/components/grid/ColumnsGrid.js index dc6a77772f90df..6175eaa17cbc0f 100644 --- a/docs/data/joy/components/grid/ColumnsGrid.js +++ b/docs/data/joy/components/grid/ColumnsGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function ColumnsGrid() { diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx b/docs/data/joy/components/grid/ColumnsGrid.tsx index dc6a77772f90df..6175eaa17cbc0f 100644 --- a/docs/data/joy/components/grid/ColumnsGrid.tsx +++ b/docs/data/joy/components/grid/ColumnsGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function ColumnsGrid() { diff --git a/docs/data/joy/components/grid/FullWidthGrid.js b/docs/data/joy/components/grid/FullWidthGrid.js index 5a0e3f8e5defec..f6cd1a481d6747 100644 --- a/docs/data/joy/components/grid/FullWidthGrid.js +++ b/docs/data/joy/components/grid/FullWidthGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function FullWidthGrid() { diff --git a/docs/data/joy/components/grid/FullWidthGrid.tsx b/docs/data/joy/components/grid/FullWidthGrid.tsx index 5a0e3f8e5defec..f6cd1a481d6747 100644 --- a/docs/data/joy/components/grid/FullWidthGrid.tsx +++ b/docs/data/joy/components/grid/FullWidthGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function FullWidthGrid() { diff --git a/docs/data/joy/components/grid/ResponsiveGrid.js b/docs/data/joy/components/grid/ResponsiveGrid.js index 9e5a32c500aa8e..cd862ace452e12 100644 --- a/docs/data/joy/components/grid/ResponsiveGrid.js +++ b/docs/data/joy/components/grid/ResponsiveGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/joy/components/grid/ResponsiveGrid.tsx b/docs/data/joy/components/grid/ResponsiveGrid.tsx index 9e5a32c500aa8e..cd862ace452e12 100644 --- a/docs/data/joy/components/grid/ResponsiveGrid.tsx +++ b/docs/data/joy/components/grid/ResponsiveGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.js b/docs/data/joy/components/grid/RowAndColumnSpacing.js index 042d6d12e6b7fd..435f775e4083e6 100644 --- a/docs/data/joy/components/grid/RowAndColumnSpacing.js +++ b/docs/data/joy/components/grid/RowAndColumnSpacing.js @@ -4,13 +4,15 @@ import Grid from '@mui/joy/Grid'; import Sheet from '@mui/joy/Sheet'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/joy/components/grid/RowAndColumnSpacing.tsx b/docs/data/joy/components/grid/RowAndColumnSpacing.tsx index 042d6d12e6b7fd..435f775e4083e6 100644 --- a/docs/data/joy/components/grid/RowAndColumnSpacing.tsx +++ b/docs/data/joy/components/grid/RowAndColumnSpacing.tsx @@ -4,13 +4,15 @@ import Grid from '@mui/joy/Grid'; import Sheet from '@mui/joy/Sheet'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/joy/components/grid/VariableWidthGrid.js b/docs/data/joy/components/grid/VariableWidthGrid.js index b04c4bc357a9cd..659428350eb7e7 100644 --- a/docs/data/joy/components/grid/VariableWidthGrid.js +++ b/docs/data/joy/components/grid/VariableWidthGrid.js @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/joy/components/grid/VariableWidthGrid.tsx b/docs/data/joy/components/grid/VariableWidthGrid.tsx index b04c4bc357a9cd..659428350eb7e7 100644 --- a/docs/data/joy/components/grid/VariableWidthGrid.tsx +++ b/docs/data/joy/components/grid/VariableWidthGrid.tsx @@ -4,13 +4,15 @@ import Sheet from '@mui/joy/Sheet'; import Grid from '@mui/joy/Grid'; const Item = styled(Sheet)(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + backgroundColor: '#fff', ...theme.typography['body-sm'], padding: theme.spacing(1), textAlign: 'center', borderRadius: 4, color: theme.vars.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.level1, + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/joy/components/list/ExampleCollapsibleList.js b/docs/data/joy/components/list/ExampleCollapsibleList.js index ffb73e3d3ee5c6..465bbe1e41a6e3 100644 --- a/docs/data/joy/components/list/ExampleCollapsibleList.js +++ b/docs/data/joy/components/list/ExampleCollapsibleList.js @@ -69,7 +69,9 @@ export default function ExampleCollapsibleList() { onClick={() => setOpen(!open)} > } @@ -77,10 +79,11 @@ export default function ExampleCollapsibleList() { Tutorial @@ -120,7 +123,9 @@ export default function ExampleCollapsibleList() { onClick={() => setOpen2((bool) => !bool)} > } @@ -128,10 +133,11 @@ export default function ExampleCollapsibleList() { How-to Guides diff --git a/docs/data/joy/components/list/ExampleCollapsibleList.tsx b/docs/data/joy/components/list/ExampleCollapsibleList.tsx index 4a89baa548507e..465bbe1e41a6e3 100644 --- a/docs/data/joy/components/list/ExampleCollapsibleList.tsx +++ b/docs/data/joy/components/list/ExampleCollapsibleList.tsx @@ -26,14 +26,12 @@ export default function ExampleCollapsibleList() { '--joy-palette-text-secondary': '#635e69', '--joy-palette-primary-plainColor': '#d48cff', }, - '--List-insetStart': '32px', '--ListItem-paddingY': '0px', '--ListItem-paddingRight': '16px', '--ListItem-paddingLeft': '21px', '--ListItem-startActionWidth': '0px', '--ListItem-startActionTranslateX': '-50%', - [`& .${listItemButtonClasses.root}`]: { borderLeftColor: 'divider', }, @@ -71,7 +69,9 @@ export default function ExampleCollapsibleList() { onClick={() => setOpen(!open)} > } @@ -79,10 +79,11 @@ export default function ExampleCollapsibleList() { Tutorial @@ -122,7 +123,9 @@ export default function ExampleCollapsibleList() { onClick={() => setOpen2((bool) => !bool)} > } @@ -130,10 +133,11 @@ export default function ExampleCollapsibleList() { How-to Guides diff --git a/docs/data/joy/components/list/ExampleNavigationMenu.js b/docs/data/joy/components/list/ExampleNavigationMenu.js index b7b18e89b5014c..03cf5e51b340ea 100644 --- a/docs/data/joy/components/list/ExampleNavigationMenu.js +++ b/docs/data/joy/components/list/ExampleNavigationMenu.js @@ -129,9 +129,7 @@ const AboutMenu = React.forwardRef(({ focusNext, focusPrevious, ...props }, ref) props.onMouseEnter?.(event); setAnchorEl(event.currentTarget); }} - sx={(theme) => ({ - ...(open && theme.variants.plainHover.neutral), - })} + sx={[open && ((theme) => theme.variants.plainHover.neutral)]} > About @@ -235,9 +233,7 @@ const AdmissionsMenu = React.forwardRef( props.onMouseEnter?.(event); setAnchorEl(event.currentTarget); }} - sx={(theme) => ({ - ...(open && theme.variants.plainHover.neutral), - })} + sx={[open && ((theme) => theme.variants.plainHover.neutral)]} > Admissions diff --git a/docs/data/joy/components/list/ExampleNavigationMenu.tsx b/docs/data/joy/components/list/ExampleNavigationMenu.tsx index 1106cd57a02304..d580f8db869f53 100644 --- a/docs/data/joy/components/list/ExampleNavigationMenu.tsx +++ b/docs/data/joy/components/list/ExampleNavigationMenu.tsx @@ -153,9 +153,7 @@ const AboutMenu = React.forwardRef( props.onMouseEnter?.(event); setAnchorEl(event.currentTarget); }} - sx={(theme) => ({ - ...(open && theme.variants.plainHover.neutral), - })} + sx={[open && ((theme) => theme.variants.plainHover.neutral)]} > About @@ -270,9 +268,7 @@ const AdmissionsMenu = React.forwardRef( props.onMouseEnter?.(event); setAnchorEl(event.currentTarget); }} - sx={(theme) => ({ - ...(open && theme.variants.plainHover.neutral), - })} + sx={[open && ((theme) => theme.variants.plainHover.neutral)]} > Admissions diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js index eb09a244862948..b6ec4f81811c1c 100644 --- a/docs/data/joy/components/menu/MenuIconSideNavExample.js +++ b/docs/data/joy/components/menu/MenuIconSideNavExample.js @@ -78,12 +78,14 @@ function NavMenuButton({ isOnButton.current = false; }} onKeyDown={handleButtonKeyDown} - sx={{ - bgcolor: open ? 'neutral.plainHoverBg' : undefined, - '&:focus-visible': { - bgcolor: 'neutral.plainHoverBg', + sx={[ + { + '&:focus-visible': { + bgcolor: 'neutral.plainHoverBg', + }, }, - }} + open ? { bgcolor: 'neutral.plainHoverBg' } : { bgcolor: null }, + ]} > {children} diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx index de451cc1bd3989..ee1fcd2b4ed151 100644 --- a/docs/data/joy/components/menu/MenuIconSideNavExample.tsx +++ b/docs/data/joy/components/menu/MenuIconSideNavExample.tsx @@ -89,12 +89,14 @@ function NavMenuButton({ isOnButton.current = false; }} onKeyDown={handleButtonKeyDown} - sx={{ - bgcolor: open ? 'neutral.plainHoverBg' : undefined, - '&:focus-visible': { - bgcolor: 'neutral.plainHoverBg', + sx={[ + { + '&:focus-visible': { + bgcolor: 'neutral.plainHoverBg', + }, }, - }} + open ? { bgcolor: 'neutral.plainHoverBg' } : { bgcolor: null }, + ]} > {children} diff --git a/docs/data/joy/components/modal/DialogVerticalScroll.js b/docs/data/joy/components/modal/DialogVerticalScroll.js index 318e7f92d28e86..0dc70eb1b5c0d0 100644 --- a/docs/data/joy/components/modal/DialogVerticalScroll.js +++ b/docs/data/joy/components/modal/DialogVerticalScroll.js @@ -57,11 +57,13 @@ export default function DialogVerticalScroll() { /> {[...Array(100)].map((item, index) => ( I'm in a scrollable area. diff --git a/docs/data/joy/components/modal/DialogVerticalScroll.tsx b/docs/data/joy/components/modal/DialogVerticalScroll.tsx index 18982c36530eac..268f2d28b21fc0 100644 --- a/docs/data/joy/components/modal/DialogVerticalScroll.tsx +++ b/docs/data/joy/components/modal/DialogVerticalScroll.tsx @@ -61,11 +61,13 @@ export default function DialogVerticalScroll() { /> {[...Array(100)].map((item, index) => ( I'm in a scrollable area. diff --git a/docs/data/joy/components/modal/FadeModalDialog.js b/docs/data/joy/components/modal/FadeModalDialog.js index cf03454db8bddd..9f8a2685231015 100644 --- a/docs/data/joy/components/modal/FadeModalDialog.js +++ b/docs/data/joy/components/modal/FadeModalDialog.js @@ -32,7 +32,11 @@ export default function FadeModalDialog() { }, }, }} - sx={{ visibility: state === 'exited' ? 'hidden' : 'visible' }} + sx={[ + state === 'exited' + ? { visibility: 'hidden' } + : { visibility: 'visible' }, + ]} > {data.role} diff --git a/docs/data/joy/components/select/SelectCustomValueAppearance.tsx b/docs/data/joy/components/select/SelectCustomValueAppearance.tsx index d6dcba7324c225..d6ca29d4905b6b 100644 --- a/docs/data/joy/components/select/SelectCustomValueAppearance.tsx +++ b/docs/data/joy/components/select/SelectCustomValueAppearance.tsx @@ -55,8 +55,9 @@ export default function SelectCustomValueAppearance() { minHeight: '20px', paddingInline: '4px', fontSize: 'xs', - bgcolor: `${colors[data.role]}.softBg`, + bgcolor: `${'var(--colors-role)'}.softBg`, }} + style={{ '--colors-role': colors[data.role] } as any} > {data.role} diff --git a/docs/data/joy/components/slider/SliderUsage.js b/docs/data/joy/components/slider/SliderUsage.js index f77d152177b4e2..0b52f6c118a6f9 100644 --- a/docs/data/joy/components/slider/SliderUsage.js +++ b/docs/data/joy/components/slider/SliderUsage.js @@ -42,16 +42,18 @@ export default function SliderUsage() { ]} renderDemo={(props) => ( diff --git a/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.js b/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.js index 7b20091a88ef16..3fa3dd3457b675 100644 --- a/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.js +++ b/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.js @@ -49,14 +49,14 @@ export default function CustomAnimatedSnackbar() { onClose={handleClose} autoHideDuration={4000} animationDuration={animationDuration} - sx={{ - ...(open && { + sx={[ + open && { animation: `${inAnimation} ${animationDuration}ms forwards`, - }), - ...(!open && { + }, + !open && { animation: `${outAnimation} ${animationDuration}ms forwards`, - }), - }} + }, + ]} > I love this animation! diff --git a/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.tsx b/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.tsx index 7b20091a88ef16..3fa3dd3457b675 100644 --- a/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.tsx +++ b/docs/data/joy/components/snackbar/CustomAnimatedSnackbar.tsx @@ -49,14 +49,14 @@ export default function CustomAnimatedSnackbar() { onClose={handleClose} autoHideDuration={4000} animationDuration={animationDuration} - sx={{ - ...(open && { + sx={[ + open && { animation: `${inAnimation} ${animationDuration}ms forwards`, - }), - ...(!open && { + }, + !open && { animation: `${outAnimation} ${animationDuration}ms forwards`, - }), - }} + }, + ]} > I love this animation! diff --git a/docs/data/joy/components/stepper/ButtonStepper.js b/docs/data/joy/components/stepper/ButtonStepper.js index 63d88a98c3d9e8..54ee835987d5e9 100644 --- a/docs/data/joy/components/stepper/ButtonStepper.js +++ b/docs/data/joy/components/stepper/ButtonStepper.js @@ -22,12 +22,10 @@ export default function ButtonStepper() { {activeStep <= index ? index + 1 : } } - sx={{ - '&::after': { - ...(activeStep > index && - index !== 2 && { bgcolor: 'primary.solidBg' }), - }, - }} + sx={[ + activeStep > index && + index !== 2 && { '&::after': { bgcolor: 'primary.solidBg' } }, + ]} > setActiveStep(index)}>{step} diff --git a/docs/data/joy/components/stepper/ButtonStepper.tsx b/docs/data/joy/components/stepper/ButtonStepper.tsx index 63d88a98c3d9e8..54ee835987d5e9 100644 --- a/docs/data/joy/components/stepper/ButtonStepper.tsx +++ b/docs/data/joy/components/stepper/ButtonStepper.tsx @@ -22,12 +22,10 @@ export default function ButtonStepper() { {activeStep <= index ? index + 1 : } } - sx={{ - '&::after': { - ...(activeStep > index && - index !== 2 && { bgcolor: 'primary.solidBg' }), - }, - }} + sx={[ + activeStep > index && + index !== 2 && { '&::after': { bgcolor: 'primary.solidBg' } }, + ]} > setActiveStep(index)}>{step} diff --git a/docs/data/joy/components/stepper/CompanyRegistrationStepper.js b/docs/data/joy/components/stepper/CompanyRegistrationStepper.js index 66931ae66f8380..739377908cdeb7 100644 --- a/docs/data/joy/components/stepper/CompanyRegistrationStepper.js +++ b/docs/data/joy/components/stepper/CompanyRegistrationStepper.js @@ -10,7 +10,7 @@ export default function CompanyRegistrationStepper() { return ( ({ '--Stepper-verticalGap': '2.5rem', '--StepIndicator-size': '2.5rem', '--Step-gap': '1rem', @@ -25,7 +25,7 @@ export default function CompanyRegistrationStepper() { [`& .${stepIndicatorClasses.root}`]: { border: '4px solid', borderColor: '#fff', - boxShadow: (theme) => `0 0 0 1px ${theme.vars.palette.primary[500]}`, + boxShadow: `0 0 0 1px ${theme.vars.palette.primary[500]}`, }, }, [`& .${stepClasses.disabled} *`]: { @@ -36,7 +36,7 @@ export default function CompanyRegistrationStepper() { letterSpacing: '1px', fontSize: '10px', }, - }} + })} > ({ '--Stepper-verticalGap': '2.5rem', '--StepIndicator-size': '2.5rem', '--Step-gap': '1rem', @@ -25,7 +25,7 @@ export default function CompanyRegistrationStepper() { [`& .${stepIndicatorClasses.root}`]: { border: '4px solid', borderColor: '#fff', - boxShadow: (theme) => `0 0 0 1px ${theme.vars.palette.primary[500]}`, + boxShadow: `0 0 0 1px ${theme.vars.palette.primary[500]}`, }, }, [`& .${stepClasses.disabled} *`]: { @@ -36,7 +36,7 @@ export default function CompanyRegistrationStepper() { letterSpacing: '1px', fontSize: '10px', }, - }} + })} > } endDecorator={ - + } checked={dark} onChange={(event) => setDark(event.target.checked)} diff --git a/docs/data/joy/components/switch/SwitchDecorators.tsx b/docs/data/joy/components/switch/SwitchDecorators.tsx index c2d2e97b90cbf7..92cec4e46b815a 100644 --- a/docs/data/joy/components/switch/SwitchDecorators.tsx +++ b/docs/data/joy/components/switch/SwitchDecorators.tsx @@ -11,11 +11,13 @@ export default function SwitchDecorators() { slotProps={{ input: { 'aria-label': 'dark mode' } }} startDecorator={ } endDecorator={ - + } checked={dark} onChange={(event: React.ChangeEvent) => diff --git a/docs/data/joy/components/switch/SwitchDecorators.tsx.preview b/docs/data/joy/components/switch/SwitchDecorators.tsx.preview deleted file mode 100644 index dd295dc5ec8d56..00000000000000 --- a/docs/data/joy/components/switch/SwitchDecorators.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - } - endDecorator={ - - } - checked={dark} - onChange={(event: React.ChangeEvent) => - setDark(event.target.checked) - } -/> \ No newline at end of file diff --git a/docs/data/joy/components/table/TableColumnPinning.js b/docs/data/joy/components/table/TableColumnPinning.js index 804702d5d3aefa..1b1b80dcc48b3b 100644 --- a/docs/data/joy/components/table/TableColumnPinning.js +++ b/docs/data/joy/components/table/TableColumnPinning.js @@ -24,7 +24,7 @@ export default function TableColumnPinning() { ({ '--TableCell-height': '40px', // the number is the amount of the header rows. '--TableHeader-height': 'calc(1 * var(--TableCell-height))', @@ -34,8 +34,7 @@ export default function TableColumnPinning() { '--TableRow-stripeBackground': 'rgba(0 0 0 / 0.04)', '--TableRow-hoverBackground': 'rgba(0 0 0 / 0.08)', overflow: 'auto', - background: (theme) => - `linear-gradient(to right, ${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), + background: `linear-gradient(to right, ${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), ${theme.vars.palette.background.surface} 70%) 0 100%, radial-gradient( farthest-side at 0 50%, @@ -55,7 +54,7 @@ export default function TableColumnPinning() { backgroundPosition: 'var(--Table-firstColumnWidth) var(--TableCell-height), calc(100% - var(--Table-lastColumnWidth)) var(--TableCell-height), var(--Table-firstColumnWidth) var(--TableCell-height), calc(100% - var(--Table-lastColumnWidth)) var(--TableCell-height)', backgroundColor: 'background.surface', - }} + })} > ({ '--TableCell-height': '40px', // the number is the amount of the header rows. '--TableHeader-height': 'calc(1 * var(--TableCell-height))', @@ -40,9 +40,7 @@ export default function TableColumnPinning() { '--TableRow-stripeBackground': 'rgba(0 0 0 / 0.04)', '--TableRow-hoverBackground': 'rgba(0 0 0 / 0.08)', overflow: 'auto', - background: ( - theme, - ) => `linear-gradient(to right, ${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), + background: `linear-gradient(to right, ${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), ${theme.vars.palette.background.surface} 70%) 0 100%, radial-gradient( farthest-side at 0 50%, @@ -62,7 +60,7 @@ export default function TableColumnPinning() { backgroundPosition: 'var(--Table-firstColumnWidth) var(--TableCell-height), calc(100% - var(--Table-lastColumnWidth)) var(--TableCell-height), var(--Table-firstColumnWidth) var(--TableCell-height), calc(100% - var(--Table-lastColumnWidth)) var(--TableCell-height)', backgroundColor: 'background.surface', - }} + })} >
({ '--TableCell-height': '40px', // the number is the amount of the header rows. '--TableHeader-height': 'calc(1 * var(--TableCell-height))', height: 200, overflow: 'auto', - background: (theme) => - `linear-gradient(${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), + background: `linear-gradient(${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), ${theme.vars.palette.background.surface} 70%) 0 100%, radial-gradient( farthest-side at 50% 0, @@ -53,7 +52,7 @@ export default function TableScrollingShadows() { backgroundPosition: '0 var(--TableHeader-height), 0 100%, 0 var(--TableHeader-height), 0 100%', backgroundColor: 'background.surface', - }} + })} >
diff --git a/docs/data/joy/components/table/TableScrollingShadows.tsx b/docs/data/joy/components/table/TableScrollingShadows.tsx index a38c07fc0b113f..ba2d18924c274b 100644 --- a/docs/data/joy/components/table/TableScrollingShadows.tsx +++ b/docs/data/joy/components/table/TableScrollingShadows.tsx @@ -33,15 +33,13 @@ export default function TableScrollingShadows() { The table body is scrollable. ({ '--TableCell-height': '40px', // the number is the amount of the header rows. '--TableHeader-height': 'calc(1 * var(--TableCell-height))', height: 200, overflow: 'auto', - background: ( - theme, - ) => `linear-gradient(${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), + background: `linear-gradient(${theme.vars.palette.background.surface} 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), ${theme.vars.palette.background.surface} 70%) 0 100%, radial-gradient( farthest-side at 50% 0, @@ -60,7 +58,7 @@ export default function TableScrollingShadows() { backgroundPosition: '0 var(--TableHeader-height), 0 100%, 0 var(--TableHeader-height), 0 100%', backgroundColor: 'background.surface', - }} + })} >
diff --git a/docs/data/joy/components/table/TableSheetColorInversion.js b/docs/data/joy/components/table/TableSheetColorInversion.js index 1e456b2e64cf61..b553ada46fb117 100644 --- a/docs/data/joy/components/table/TableSheetColorInversion.js +++ b/docs/data/joy/components/table/TableSheetColorInversion.js @@ -20,12 +20,11 @@ export default function TableSheetColorInversion() { variant="solid" color="primary" invertedColors - sx={{ + sx={(theme) => ({ pt: 1, borderRadius: 'sm', transition: '0.3s', - background: (theme) => - `linear-gradient(45deg, ${theme.vars.palette.primary[500]}, ${theme.vars.palette.primary[400]})`, + background: `linear-gradient(45deg, ${theme.vars.palette.primary[500]}, ${theme.vars.palette.primary[400]})`, '& tr:last-child': { '& td:first-child': { borderBottomLeftRadius: '8px', @@ -34,7 +33,7 @@ export default function TableSheetColorInversion() { borderBottomRightRadius: '8px', }, }, - }} + })} >
diff --git a/docs/data/joy/components/table/TableSheetColorInversion.tsx b/docs/data/joy/components/table/TableSheetColorInversion.tsx index cb9ec80525cba8..b35ef3dcf3922c 100644 --- a/docs/data/joy/components/table/TableSheetColorInversion.tsx +++ b/docs/data/joy/components/table/TableSheetColorInversion.tsx @@ -26,12 +26,11 @@ export default function TableSheetColorInversion() { variant="solid" color="primary" invertedColors - sx={{ + sx={(theme) => ({ pt: 1, borderRadius: 'sm', transition: '0.3s', - background: (theme) => - `linear-gradient(45deg, ${theme.vars.palette.primary[500]}, ${theme.vars.palette.primary[400]})`, + background: `linear-gradient(45deg, ${theme.vars.palette.primary[500]}, ${theme.vars.palette.primary[400]})`, '& tr:last-child': { '& td:first-child': { borderBottomLeftRadius: '8px', @@ -40,7 +39,7 @@ export default function TableSheetColorInversion() { borderBottomRightRadius: '8px', }, }, - }} + })} >
Nutrition of your favorite menus.
diff --git a/docs/data/joy/components/table/TableSortAndSelection.js b/docs/data/joy/components/table/TableSortAndSelection.js index a43d36f9530a2d..8d19f5e659ba52 100644 --- a/docs/data/joy/components/table/TableSortAndSelection.js +++ b/docs/data/joy/components/table/TableSortAndSelection.js @@ -139,12 +139,16 @@ function EnhancedTableHead(props) { onClick={createSortHandler(headCell.id)} startDecorator={ headCell.numeric ? ( - + ) : null } endDecorator={ !headCell.numeric ? ( - + ) : null } sx={{ @@ -183,21 +187,22 @@ EnhancedTableHead.propTypes = { function EnhancedTableToolbar(props) { const { numSelected } = props; - return ( 0 && { + sx={[ + { + display: 'flex', + alignItems: 'center', + py: 1, + pl: { sm: 2 }, + pr: { xs: 1, sm: 1 }, + borderTopLeftRadius: 'var(--unstable_actionRadius)', + borderTopRightRadius: 'var(--unstable_actionRadius)', + }, + numSelected > 0 && { bgcolor: 'background.level1', - }), - borderTopLeftRadius: 'var(--unstable_actionRadius)', - borderTopRightRadius: 'var(--unstable_actionRadius)', - }} + }, + ]} > {numSelected > 0 ? ( @@ -241,13 +246,11 @@ export default function TableSortAndSelection() { const [selected, setSelected] = React.useState([]); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); - const handleRequestSort = (event, property) => { const isAsc = orderBy === property && order === 'asc'; setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; - const handleSelectAllClick = (event) => { if (event.target.checked) { const newSelected = rows.map((n) => n.name); @@ -256,11 +259,9 @@ export default function TableSortAndSelection() { } setSelected([]); }; - const handleClick = (event, name) => { const selectedIndex = selected.indexOf(name); let newSelected = []; - if (selectedIndex === -1) { newSelected = newSelected.concat(selected, name); } else if (selectedIndex === 0) { @@ -273,19 +274,15 @@ export default function TableSortAndSelection() { selected.slice(selectedIndex + 1), ); } - setSelected(newSelected); }; - const handleChangePage = (newPage) => { setPage(newPage); }; - const handleChangeRowsPerPage = (event, newValue) => { setRowsPerPage(parseInt(newValue.toString(), 10)); setPage(0); }; - const getLabelDisplayedRowsTo = () => { if (rows.length === -1) { return (page + 1) * rowsPerPage; @@ -294,13 +291,10 @@ export default function TableSortAndSelection() { ? rows.length : Math.min(rows.length, (page + 1) * rowsPerPage); }; - const isSelected = (name) => selected.indexOf(name) !== -1; - // Avoid a layout jump when reaching the last page with empty rows. const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - return ( + ) : null } endDecorator={ !headCell.numeric ? ( - + ) : null } sx={{ @@ -221,28 +225,27 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } - interface EnhancedTableToolbarProps { numSelected: number; } - function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { const { numSelected } = props; - return ( 0 && { + sx={[ + { + display: 'flex', + alignItems: 'center', + py: 1, + pl: { sm: 2 }, + pr: { xs: 1, sm: 1 }, + borderTopLeftRadius: 'var(--unstable_actionRadius)', + borderTopRightRadius: 'var(--unstable_actionRadius)', + }, + numSelected > 0 && { bgcolor: 'background.level1', - }), - borderTopLeftRadius: 'var(--unstable_actionRadius)', - borderTopRightRadius: 'var(--unstable_actionRadius)', - }} + }, + ]} > {numSelected > 0 ? ( @@ -258,7 +261,6 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { Nutrition )} - {numSelected > 0 ? ( @@ -275,14 +277,12 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { ); } - export default function TableSortAndSelection() { const [order, setOrder] = React.useState('asc'); const [orderBy, setOrderBy] = React.useState('calories'); const [selected, setSelected] = React.useState([]); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); - const handleRequestSort = ( event: React.MouseEvent, property: keyof Data, @@ -291,7 +291,6 @@ export default function TableSortAndSelection() { setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; - const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { const newSelected = rows.map((n) => n.name); @@ -300,11 +299,9 @@ export default function TableSortAndSelection() { } setSelected([]); }; - const handleClick = (event: React.MouseEvent, name: string) => { const selectedIndex = selected.indexOf(name); let newSelected: readonly string[] = []; - if (selectedIndex === -1) { newSelected = newSelected.concat(selected, name); } else if (selectedIndex === 0) { @@ -317,19 +314,15 @@ export default function TableSortAndSelection() { selected.slice(selectedIndex + 1), ); } - setSelected(newSelected); }; - const handleChangePage = (newPage: number) => { setPage(newPage); }; - const handleChangeRowsPerPage = (event: any, newValue: number | null) => { setRowsPerPage(parseInt(newValue!.toString(), 10)); setPage(0); }; - const getLabelDisplayedRowsTo = () => { if (rows.length === -1) { return (page + 1) * rowsPerPage; @@ -338,13 +331,10 @@ export default function TableSortAndSelection() { ? rows.length : Math.min(rows.length, (page + 1) * rowsPerPage); }; - const isSelected = (name: string) => selected.indexOf(name) !== -1; - // Avoid a layout jump when reaching the last page with empty rows. const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - return ( Send } - sx={{ minWidth: 300, fontWeight, fontStyle: italic ? 'italic' : 'initial' }} + sx={[ + { + minWidth: 300, + fontWeight, + }, + italic ? { fontStyle: 'italic' } : { fontStyle: 'initial' }, + ]} /> ); diff --git a/docs/data/joy/components/textarea/ExampleTextareaComment.tsx b/docs/data/joy/components/textarea/ExampleTextareaComment.tsx index 50412c9eb70ae1..fba46176f15fdb 100644 --- a/docs/data/joy/components/textarea/ExampleTextareaComment.tsx +++ b/docs/data/joy/components/textarea/ExampleTextareaComment.tsx @@ -78,7 +78,13 @@ export default function ExampleTextareaComment() { } - sx={{ minWidth: 300, fontWeight, fontStyle: italic ? 'italic' : 'initial' }} + sx={[ + { + minWidth: 300, + fontWeight, + }, + italic ? { fontStyle: 'italic' } : { fontStyle: 'initial' }, + ]} /> ); diff --git a/docs/data/joy/customization/approaches/StyledComponent.js b/docs/data/joy/customization/approaches/StyledComponent.js index cd89e7e1c9b84b..e29914316a4586 100644 --- a/docs/data/joy/customization/approaches/StyledComponent.js +++ b/docs/data/joy/customization/approaches/StyledComponent.js @@ -3,35 +3,41 @@ import { styled } from '@mui/joy/styles'; import VolumeUpRoundedIcon from '@mui/icons-material/VolumeUpRounded'; import VolumeOffRoundedIcon from '@mui/icons-material/VolumeOffRounded'; -const ToggleButton = styled('button')( - ({ theme, 'aria-pressed': pressed = 'false' }) => ({ - padding: '0.5rem 1rem', - borderRadius: theme.vars.radius.sm, - display: 'inline-flex', - justifyContent: 'center', - gap: '8px', - minHeight: 40, - fontFamily: theme.vars.fontFamily.body, - fontSize: theme.vars.fontSize.md, - fontWeight: theme.vars.fontWeight.md, - alignItems: 'center', - border: '1px solid', - borderColor: theme.vars.palette.neutral.outlinedBorder, - backgroundColor: theme.vars.palette.background.body, - boxShadow: theme.vars.shadow.md, - [theme.focus.selector]: theme.focus.default, - ...theme.variants.plain.neutral, - ...(pressed === 'false' && { - '&:hover': theme.variants.plainHover.neutral, - '&:active': theme.variants.plainActive.neutral, - }), - ...(pressed === 'true' && { - color: theme.vars.palette.danger.plainColor, - backgroundColor: theme.vars.palette.background.body, - boxShadow: theme.shadow.sm.replace(/,/g, ', inset'), - }), - }), -); +const ToggleButton = styled('button')(({ theme }) => ({ + padding: '0.5rem 1rem', + borderRadius: theme.vars.radius.sm, + display: 'inline-flex', + justifyContent: 'center', + gap: '8px', + minHeight: 40, + fontFamily: theme.vars.fontFamily.body, + fontSize: theme.vars.fontSize.md, + fontWeight: theme.vars.fontWeight.md, + alignItems: 'center', + border: '1px solid', + borderColor: theme.vars.palette.neutral.outlinedBorder, + backgroundColor: theme.vars.palette.background.body, + boxShadow: theme.vars.shadow.md, + [theme.focus.selector]: theme.focus.default, + ...theme.variants.plain.neutral, + variants: [ + { + props: { 'aria-pressed': 'false' }, + style: { + '&:hover': theme.variants.plainHover.neutral, + '&:active': theme.variants.plainActive.neutral, + }, + }, + { + props: { 'aria-pressed': 'true' }, + style: { + color: theme.vars.palette.danger.plainColor, + backgroundColor: theme.vars.palette.background.body, + boxShadow: theme.shadow.sm.replace(/,/g, ', inset'), + }, + }, + ], +})); export default function StyledComponent() { const [muted, setMuted] = React.useState(false); diff --git a/docs/data/joy/customization/approaches/StyledComponent.tsx b/docs/data/joy/customization/approaches/StyledComponent.tsx index cd89e7e1c9b84b..e29914316a4586 100644 --- a/docs/data/joy/customization/approaches/StyledComponent.tsx +++ b/docs/data/joy/customization/approaches/StyledComponent.tsx @@ -3,35 +3,41 @@ import { styled } from '@mui/joy/styles'; import VolumeUpRoundedIcon from '@mui/icons-material/VolumeUpRounded'; import VolumeOffRoundedIcon from '@mui/icons-material/VolumeOffRounded'; -const ToggleButton = styled('button')( - ({ theme, 'aria-pressed': pressed = 'false' }) => ({ - padding: '0.5rem 1rem', - borderRadius: theme.vars.radius.sm, - display: 'inline-flex', - justifyContent: 'center', - gap: '8px', - minHeight: 40, - fontFamily: theme.vars.fontFamily.body, - fontSize: theme.vars.fontSize.md, - fontWeight: theme.vars.fontWeight.md, - alignItems: 'center', - border: '1px solid', - borderColor: theme.vars.palette.neutral.outlinedBorder, - backgroundColor: theme.vars.palette.background.body, - boxShadow: theme.vars.shadow.md, - [theme.focus.selector]: theme.focus.default, - ...theme.variants.plain.neutral, - ...(pressed === 'false' && { - '&:hover': theme.variants.plainHover.neutral, - '&:active': theme.variants.plainActive.neutral, - }), - ...(pressed === 'true' && { - color: theme.vars.palette.danger.plainColor, - backgroundColor: theme.vars.palette.background.body, - boxShadow: theme.shadow.sm.replace(/,/g, ', inset'), - }), - }), -); +const ToggleButton = styled('button')(({ theme }) => ({ + padding: '0.5rem 1rem', + borderRadius: theme.vars.radius.sm, + display: 'inline-flex', + justifyContent: 'center', + gap: '8px', + minHeight: 40, + fontFamily: theme.vars.fontFamily.body, + fontSize: theme.vars.fontSize.md, + fontWeight: theme.vars.fontWeight.md, + alignItems: 'center', + border: '1px solid', + borderColor: theme.vars.palette.neutral.outlinedBorder, + backgroundColor: theme.vars.palette.background.body, + boxShadow: theme.vars.shadow.md, + [theme.focus.selector]: theme.focus.default, + ...theme.variants.plain.neutral, + variants: [ + { + props: { 'aria-pressed': 'false' }, + style: { + '&:hover': theme.variants.plainHover.neutral, + '&:active': theme.variants.plainActive.neutral, + }, + }, + { + props: { 'aria-pressed': 'true' }, + style: { + color: theme.vars.palette.danger.plainColor, + backgroundColor: theme.vars.palette.background.body, + boxShadow: theme.shadow.sm.replace(/,/g, ', inset'), + }, + }, + ], +})); export default function StyledComponent() { const [muted, setMuted] = React.useState(false); diff --git a/docs/data/joy/customization/creating-themed-components/StatFullTemplate.js b/docs/data/joy/customization/creating-themed-components/StatFullTemplate.js index c46dea94ace3e5..f7ba83dd6a9a79 100644 --- a/docs/data/joy/customization/creating-themed-components/StatFullTemplate.js +++ b/docs/data/joy/customization/creating-themed-components/StatFullTemplate.js @@ -6,7 +6,7 @@ import { styled, useThemeProps } from '@mui/joy/styles'; const StatRoot = styled('div', { name: 'JoyStat', slot: 'root', -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5), @@ -14,10 +14,17 @@ const StatRoot = styled('div', { backgroundColor: theme.vars.palette.background.surface, borderRadius: theme.vars.radius.sm, boxShadow: theme.vars.shadow.md, - ...(ownerState.variant === 'outlined' && { - border: `2px solid ${theme.palette.divider}`, - boxShadow: 'none', - }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }, + }, + ], })); const StatValue = styled('div', { diff --git a/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx index 1e0a65aa7e2af1..dad63ba7dfb091 100644 --- a/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx +++ b/docs/data/joy/customization/creating-themed-components/StatFullTemplate.tsx @@ -16,7 +16,7 @@ interface StatOwnerState extends StatProps { const StatRoot = styled('div', { name: 'JoyStat', slot: 'root', -})<{ ownerState: StatOwnerState }>(({ theme, ownerState }) => ({ +})<{ ownerState: StatOwnerState }>(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5), @@ -24,10 +24,17 @@ const StatRoot = styled('div', { backgroundColor: theme.vars.palette.background.surface, borderRadius: theme.vars.radius.sm, boxShadow: theme.vars.shadow.md, - ...(ownerState.variant === 'outlined' && { - border: `2px solid ${theme.palette.divider}`, - boxShadow: 'none', - }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }, + }, + ], })); const StatValue = styled('div', { diff --git a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js index d1b9353b57c713..64158366e5b73b 100644 --- a/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js +++ b/docs/data/joy/customization/theme-colors/PaletteThemeViewer.js @@ -113,21 +113,23 @@ export default function PaletteThemeViewer() { }> Copied diff --git a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx index c6b309a5b90534..7e8c858c6492f9 100644 --- a/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx +++ b/docs/data/joy/customization/theme-shadow/ShadowThemeViewer.tsx @@ -57,20 +57,22 @@ export default function ShadowThemeViewer() { }> Copied diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js index 4eb7f0e73874c1..3d03437789f6e4 100644 --- a/docs/data/joy/getting-started/templates/TemplateCollection.js +++ b/docs/data/joy/getting-started/templates/TemplateCollection.js @@ -127,11 +127,15 @@ export default function TemplateCollection() { > ({ - background: `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${template.name}.jpg)`, + background: 'var(--template-name)', [theme.getColorSchemeSelector('dark')]: { - background: `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${template.name}-dark.jpg)`, + background: 'var(--template-name-dark)', }, })} + style={{ + '--template-name': `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${template.name}.jpg)`, + '--template-name-dark': `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${template.name}-dark.jpg)`, + }} />
diff --git a/docs/data/joy/getting-started/templates/email/components/Layout.tsx b/docs/data/joy/getting-started/templates/email/components/Layout.tsx index 20701467d6d287..199186ecd8241e 100644 --- a/docs/data/joy/getting-started/templates/email/components/Layout.tsx +++ b/docs/data/joy/getting-started/templates/email/components/Layout.tsx @@ -105,7 +105,6 @@ function Main(props: BoxProps) { /> ); } - function SideDrawer( props: BoxProps & { onClose: React.MouseEventHandler }, ) { @@ -121,12 +120,11 @@ function SideDrawer( ({ position: 'absolute', inset: 0, - bgcolor: (theme) => - `rgba(${theme.vars.palette.neutral.darkChannel} / 0.8)`, - }} + bgcolor: `rgba(${theme.vars.palette.neutral.darkChannel} / 0.8)`, + })} /> ( return ( New message diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx index 0e5cf3e4b8be83..c32ac61951a85c 100644 --- a/docs/data/joy/getting-started/templates/files/App.tsx +++ b/docs/data/joy/getting-started/templates/files/App.tsx @@ -108,17 +108,19 @@ export default function FilesExample() {
diff --git a/docs/data/joy/getting-started/templates/files/components/Layout.tsx b/docs/data/joy/getting-started/templates/files/components/Layout.tsx index 20701467d6d287..199186ecd8241e 100644 --- a/docs/data/joy/getting-started/templates/files/components/Layout.tsx +++ b/docs/data/joy/getting-started/templates/files/components/Layout.tsx @@ -105,7 +105,6 @@ function Main(props: BoxProps) { /> ); } - function SideDrawer( props: BoxProps & { onClose: React.MouseEventHandler }, ) { @@ -121,12 +120,11 @@ function SideDrawer( ({ position: 'absolute', inset: 0, - bgcolor: (theme) => - `rgba(${theme.vars.palette.neutral.darkChannel} / 0.8)`, - }} + bgcolor: `rgba(${theme.vars.palette.neutral.darkChannel} / 0.8)`, + })} /> ) { return ( ({ - position: 'relative', - minHeight: '100vh', - display: 'flex', - flexDirection: reversed ? 'column-reverse' : 'column', - alignItems: 'center', - py: 10, - gap: 4, - [theme.breakpoints.up(834)]: { - flexDirection: 'row', - gap: 6, - }, - [theme.breakpoints.up(1199)]: { - gap: 12, - }, - })} + sx={[ + (theme) => ({ + position: 'relative', + minHeight: '100vh', + display: 'flex', + alignItems: 'center', + py: 10, + gap: 4, + [theme.breakpoints.up(834)]: { + flexDirection: 'row', + gap: 6, + }, + [theme.breakpoints.up(1199)]: { + gap: 12, + }, + }), + reversed ? { flexDirection: 'column-reverse' } : { flexDirection: 'column' }, + ]} > ({ diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx index 77f961a3445557..dee7819e0926aa 100644 --- a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx +++ b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx @@ -35,13 +35,15 @@ export default function ChatBubble(props: ChatBubbleProps) { {attachment ? ( @@ -62,23 +64,45 @@ export default function ChatBubble(props: ChatBubbleProps) { {content} @@ -92,16 +116,6 @@ export default function ChatBubble(props: ChatBubbleProps) { position: 'absolute', top: '50%', p: 1.5, - - ...(isSent - ? { - left: 0, - transform: 'translate(-100%, -50%)', - } - : { - right: 0, - transform: 'translate(100%, -50%)', - }), }} > *:first-of-type': { - display: mode === 'dark' ? 'none' : 'initial', - }, - '& > *:last-of-type': { - display: mode === 'light' ? 'none' : 'initial', - }, - }, + mode === 'dark' + ? { '& > *:first-of-type': { display: 'none' } } + : { '& > *:first-of-type': { display: 'initial' } }, + mode === 'light' + ? { '& > *:last-of-type': { display: 'none' } } + : { '& > *:last-of-type': { display: 'initial' } }, ...(Array.isArray(sx) ? sx : [sx]), ]} > diff --git a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx index e001434d1f9ab3..552b70c81e2bca 100644 --- a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx +++ b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx @@ -47,14 +47,16 @@ function Toggler(props: { {renderToggle({ open, setOpen })} *': { - overflow: 'hidden', + sx={[ + { + display: 'grid', + transition: '0.2s ease', + '& > *': { + overflow: 'hidden', + }, }, - }} + open ? { gridTemplateRows: '1fr' } : { gridTemplateRows: '0fr' }, + ]} > {children} @@ -180,7 +182,15 @@ export default function Sidebar() { Tasks )} @@ -221,7 +231,15 @@ export default function Sidebar() { Users )} diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx index 45e221abdad18e..53ba8799124900 100644 --- a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx +++ b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx @@ -40,14 +40,12 @@ export default function ColorSchemeToggle(props: IconButtonProps) { onClick?.(event); }} sx={[ - { - '& > *:first-child': { - display: mode === 'dark' ? 'none' : 'initial', - }, - '& > *:last-child': { - display: mode === 'light' ? 'none' : 'initial', - }, - }, + mode === 'dark' + ? { '& > *:first-child': { display: 'none' } } + : { '& > *:first-child': { display: 'initial' } }, + mode === 'light' + ? { '& > *:last-child': { display: 'none' } } + : { '& > *:last-child': { display: 'initial' } }, ...(Array.isArray(sx) ? sx : [sx]), ]} > diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx index c9684b3161a02c..6c8d710641ec35 100644 --- a/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx +++ b/docs/data/joy/getting-started/templates/order-dashboard/components/OrderTable.tsx @@ -261,7 +261,6 @@ function RowMenu() { ); } - export default function OrderTable() { const [order, setOrder] = React.useState('desc'); const [selected, setSelected] = React.useState([]); @@ -412,15 +411,19 @@ export default function OrderTable() { component="button" onClick={() => setOrder(order === 'asc' ? 'desc' : 'asc')} endDecorator={} - sx={{ - fontWeight: 'lg', - - '& svg': { - transition: '0.2s', - transform: - order === 'desc' ? 'rotate(0deg)' : 'rotate(180deg)', + sx={[ + { + fontWeight: 'lg', + '& svg': { + transition: '0.2s', + transform: + order === 'desc' ? 'rotate(0deg)' : 'rotate(180deg)', + }, }, - }} + order === 'desc' + ? { '& svg': { transform: 'rotate(0deg)' } } + : { '& svg': { transform: 'rotate(180deg)' } }, + ]} > Invoice @@ -533,7 +536,6 @@ export default function OrderTable() { ))} -
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js index 9db830173d2f84..31f7b8e26cb926 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.js @@ -27,7 +27,7 @@ export default function ColorInversionAnyParent() { return ( ({ display: 'grid', gridTemplateColumns: { sm: '1fr 1fr' }, alignItems: 'center', @@ -35,9 +35,8 @@ export default function ColorInversionAnyParent() { columnGap: 8, p: 4, borderRadius: 'sm', - background: (theme) => - `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, - }, + background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, + }), applySolidInversion('neutral'), ]} > diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx index 53ee9bfcf0da76..2dbbf8aec52296 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionAnyParent.tsx @@ -22,12 +22,11 @@ function Stat({ ); } - export default function ColorInversionAnyParent() { return ( ({ display: 'grid', gridTemplateColumns: { sm: '1fr 1fr' }, alignItems: 'center', @@ -35,9 +34,8 @@ export default function ColorInversionAnyParent() { columnGap: 8, p: 4, borderRadius: 'sm', - background: (theme) => - `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, - }, + background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`, + }), applySolidInversion('neutral'), ]} > diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js index 3f72c40e1308c6..ed4f0dd5147010 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js @@ -25,14 +25,16 @@ export default function ColorInversionFooter() { variant="solid" color={color} invertedColors - sx={{ - ...(color !== 'neutral' && { + sx={[ + { + flexGrow: 1, + p: 2, + borderRadius: { xs: 0, sm: 'sm' }, + }, + color !== 'neutral' && { bgcolor: `${color}.800`, - }), - flexGrow: 1, - p: 2, - borderRadius: { xs: 0, sm: 'sm' }, - }} + }, + ]} > - `linear-gradient(to top, ${theme.vars.palette[color][600]}, ${theme.vars.palette[color][500]})`, - }), - }} + sx={[ + { + display: 'flex', + alignItems: 'center', + flexGrow: 1, + p: 2, + borderRadius: { xs: 0, sm: 'sm' }, + minWidth: 'min-content', + }, + color !== 'warning' && + ((theme) => ({ + background: `linear-gradient(to top, ${theme.vars.palette[color][600]}, ${theme.vars.palette[color][500]})`, + })), + ]} > ({ ml: 'auto', - bgcolor: (theme) => - `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`, - }} + bgcolor: `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`, + })} > Beta diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx index 06cc5c3111cffe..c0d307c6777d3d 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx @@ -27,18 +27,20 @@ export default function ColorInversionHeader() { variant="solid" color={color} invertedColors - sx={{ - display: 'flex', - alignItems: 'center', - flexGrow: 1, - p: 2, - borderRadius: { xs: 0, sm: 'sm' }, - minWidth: 'min-content', - ...(color !== 'warning' && { - background: (theme) => - `linear-gradient(to top, ${theme.vars.palette[color][600]}, ${theme.vars.palette[color][500]})`, - }), - }} + sx={[ + { + display: 'flex', + alignItems: 'center', + flexGrow: 1, + p: 2, + borderRadius: { xs: 0, sm: 'sm' }, + minWidth: 'min-content', + }, + color !== 'warning' && + ((theme) => ({ + background: `linear-gradient(to top, ${theme.vars.palette[color][600]}, ${theme.vars.palette[color][500]})`, + })), + ]} > ({ ml: 'auto', - bgcolor: (theme) => - `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`, - }} + bgcolor: `rgba(${theme.vars.palette[color].mainChannel} / 0.4)`, + })} > Beta diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js index 8176718eb33817..ec0b941506ccf7 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js @@ -39,26 +39,28 @@ export default function ColorInversionMarketing() { variant={solid ? 'solid' : 'soft'} color={color} invertedColors - sx={{ - flexGrow: 1, - position: 'relative', - display: 'flex', - bgcolor: solid ? shade(800) : shade(100), - p: '6rem 3rem', - borderRadius: 'md', - overflow: 'clip', - '&::after': { - content: `""`, - display: 'block', - width: '20rem', - height: '40rem', - background: `linear-gradient(to top, ${gradient1}, ${gradient2})`, - position: 'absolute', - transform: 'rotate(-45deg)', - top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' }, - right: { xs: '-70%', sm: '-15%' }, + sx={[ + { + flexGrow: 1, + position: 'relative', + display: 'flex', + p: '6rem 3rem', + borderRadius: 'md', + overflow: 'clip', + '&::after': { + content: `""`, + display: 'block', + width: '20rem', + height: '40rem', + background: `linear-gradient(to top, ${gradient1}, ${gradient2})`, + position: 'absolute', + transform: 'rotate(-45deg)', + top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' }, + right: { xs: '-70%', sm: '-15%' }, + }, }, - }} + solid ? { bgcolor: shade(800) } : { bgcolor: shade(100) }, + ]} >
@@ -70,10 +72,12 @@ export default function ColorInversionMarketing() { diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx index cfe83c20997bf7..d1479f2f404ae1 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx +++ b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx @@ -39,26 +39,28 @@ export default function ColorInversionMarketing() { variant={solid ? 'solid' : 'soft'} color={color} invertedColors - sx={{ - flexGrow: 1, - position: 'relative', - display: 'flex', - bgcolor: solid ? shade(800) : shade(100), - p: '6rem 3rem', - borderRadius: 'md', - overflow: 'clip', - '&::after': { - content: `""`, - display: 'block', - width: '20rem', - height: '40rem', - background: `linear-gradient(to top, ${gradient1}, ${gradient2})`, - position: 'absolute', - transform: 'rotate(-45deg)', - top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' }, - right: { xs: '-70%', sm: '-15%' }, + sx={[ + { + flexGrow: 1, + position: 'relative', + display: 'flex', + p: '6rem 3rem', + borderRadius: 'md', + overflow: 'clip', + '&::after': { + content: `""`, + display: 'block', + width: '20rem', + height: '40rem', + background: `linear-gradient(to top, ${gradient1}, ${gradient2})`, + position: 'absolute', + transform: 'rotate(-45deg)', + top: { xs: '-80%', sm: '-95%', md: '-65%', lg: '-70%' }, + right: { xs: '-70%', sm: '-15%' }, + }, }, - }} + solid ? { bgcolor: shade(800) } : { bgcolor: shade(100) }, + ]} >
@@ -70,10 +72,12 @@ export default function ColorInversionMarketing() { diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js index 2bb4eb0c9396db..801cdb59001b01 100644 --- a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js +++ b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js @@ -32,12 +32,12 @@ export default function ColorInversionNavigation() { ( {...props} /> ))(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(255, 255, 255, .05)' - : 'rgba(0, 0, 0, .03)', + backgroundColor: 'rgba(0, 0, 0, .03)', flexDirection: 'row-reverse', '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': { transform: 'rotate(90deg)', @@ -35,6 +32,9 @@ const AccordionSummary = styled((props) => ( '& .MuiAccordionSummary-content': { marginLeft: theme.spacing(1), }, + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(255, 255, 255, .05)', + }), })); const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/CustomizedAccordions.tsx index 2093e8664e0d4d..71f4d820b439c7 100644 --- a/docs/data/material/components/accordion/CustomizedAccordions.tsx +++ b/docs/data/material/components/accordion/CustomizedAccordions.tsx @@ -26,10 +26,7 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => ( {...props} /> ))(({ theme }) => ({ - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(255, 255, 255, .05)' - : 'rgba(0, 0, 0, .03)', + backgroundColor: 'rgba(0, 0, 0, .03)', flexDirection: 'row-reverse', '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': { transform: 'rotate(90deg)', @@ -37,6 +34,9 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => ( '& .MuiAccordionSummary-content': { marginLeft: theme.spacing(1), }, + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(255, 255, 255, .05)', + }), })); const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js index 46815b507045bf..736811a4d81a35 100644 --- a/docs/data/material/components/autocomplete/GitHubLabel.js +++ b/docs/data/material/components/autocomplete/GitHubLabel.js @@ -19,15 +19,13 @@ const StyledAutocompletePopper = styled('div')(({ theme }) => ({ fontSize: 13, }, [`& .${autocompleteClasses.listbox}`]: { - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128', + backgroundColor: '#fff', padding: 0, [`& .${autocompleteClasses.option}`]: { minHeight: 'auto', alignItems: 'flex-start', padding: 8, - borderBottom: `1px solid ${ - theme.palette.mode === 'light' ? ' #eaecef' : '#30363d' - }`, + borderBottom: `1px solid ${' #eaecef'}`, '&[aria-selected="true"]': { backgroundColor: 'transparent', }, @@ -35,7 +33,13 @@ const StyledAutocompletePopper = styled('div')(({ theme }) => ({ { backgroundColor: theme.palette.action.hover, }, + ...theme.applyStyles('dark', { + borderBottom: `1px solid ${'#30363d'}`, + }), }, + ...theme.applyStyles('dark', { + backgroundColor: '#1c2128', + }), }, [`&.${autocompleteClasses.popperDisablePortal}`]: { position: 'relative', @@ -54,40 +58,49 @@ PopperComponent.propTypes = { }; const StyledPopper = styled(Popper)(({ theme }) => ({ - border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`, - boxShadow: `0 8px 24px ${ - theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)' - }`, + border: `1px solid ${'#e1e4e8'}`, + boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`, + color: '#24292e', + backgroundColor: '#fff', borderRadius: 6, width: 300, zIndex: theme.zIndex.modal, fontSize: 13, - color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9', - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128', + ...theme.applyStyles('dark', { + border: `1px solid ${'#30363d'}`, + boxShadow: `0 8px 24px ${'rgb(1, 4, 9)'}`, + color: '#c9d1d9', + backgroundColor: '#1c2128', + }), })); const StyledInput = styled(InputBase)(({ theme }) => ({ padding: 10, width: '100%', - borderBottom: `1px solid ${ - theme.palette.mode === 'light' ? '#eaecef' : '#30363d' - }`, + borderBottom: `1px solid ${'#30363d'}`, '& input': { borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117', + backgroundColor: '#0d1117', + border: `1px solid ${'#30363d'}`, padding: 8, transition: theme.transitions.create(['border-color', 'box-shadow']), - border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`, fontSize: 14, '&:focus': { - boxShadow: `0px 0px 0px 3px ${ - theme.palette.mode === 'light' - ? 'rgba(3, 102, 214, 0.3)' - : 'rgb(12, 45, 107)' - }`, - borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd', + boxShadow: `0px 0px 0px 3px ${'rgba(3, 102, 214, 0.3)'}`, + borderColor: '#0366d6', + ...theme.applyStyles('dark', { + boxShadow: `0px 0px 0px 3px ${'rgb(12, 45, 107)'}`, + borderColor: '#388bfd', + }), }, + ...theme.applyStyles('dark', { + backgroundColor: '#fff', + border: `1px solid ${'#eaecef'}`, + }), }, + ...theme.applyStyles('dark', { + borderBottom: `1px solid ${'#eaecef'}`, + }), })); const Button = styled(ButtonBase)(({ theme }) => ({ @@ -95,10 +108,13 @@ const Button = styled(ButtonBase)(({ theme }) => ({ width: '100%', textAlign: 'left', paddingBottom: 8, - color: theme.palette.mode === 'light' ? '#586069' : '#8b949e', + color: '#586069', fontWeight: 600, '&:hover,&:focus': { - color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff', + color: '#0366d6', + ...theme.applyStyles('dark', { + color: '#58a6ff', + }), }, '& span': { width: '100%', @@ -107,6 +123,9 @@ const Button = styled(ButtonBase)(({ theme }) => ({ width: 16, height: 16, }, + ...theme.applyStyles('dark', { + color: '#8b949e', + }), })); export default function GitHubLabel() { diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx index d680d16c834688..a5421b2dc736fb 100644 --- a/docs/data/material/components/autocomplete/GitHubLabel.tsx +++ b/docs/data/material/components/autocomplete/GitHubLabel.tsx @@ -27,15 +27,15 @@ const StyledAutocompletePopper = styled('div')(({ theme }) => ({ fontSize: 13, }, [`& .${autocompleteClasses.listbox}`]: { - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128', + backgroundColor: '#fff', + padding: 0, [`& .${autocompleteClasses.option}`]: { minHeight: 'auto', alignItems: 'flex-start', padding: 8, - borderBottom: `1px solid ${ - theme.palette.mode === 'light' ? ' #eaecef' : '#30363d' - }`, + borderBottom: `1px solid ${' #eaecef'}`, + '&[aria-selected="true"]': { backgroundColor: 'transparent', }, @@ -43,7 +43,13 @@ const StyledAutocompletePopper = styled('div')(({ theme }) => ({ { backgroundColor: theme.palette.action.hover, }, + ...theme.applyStyles('dark', { + borderBottom: `1px solid ${'#30363d'}`, + }), }, + ...theme.applyStyles('dark', { + backgroundColor: '#1c2128', + }), }, [`&.${autocompleteClasses.popperDisablePortal}`]: { position: 'relative', @@ -56,40 +62,49 @@ function PopperComponent(props: PopperComponentProps) { } const StyledPopper = styled(Popper)(({ theme }) => ({ - border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`, - boxShadow: `0 8px 24px ${ - theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)' - }`, + border: `1px solid ${'#e1e4e8'}`, + boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`, + color: '#24292e', + backgroundColor: '#fff', borderRadius: 6, width: 300, zIndex: theme.zIndex.modal, fontSize: 13, - color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9', - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128', + ...theme.applyStyles('dark', { + border: `1px solid ${'#30363d'}`, + boxShadow: `0 8px 24px ${'rgb(1, 4, 9)'}`, + color: '#c9d1d9', + backgroundColor: '#1c2128', + }), })); const StyledInput = styled(InputBase)(({ theme }) => ({ padding: 10, width: '100%', - borderBottom: `1px solid ${ - theme.palette.mode === 'light' ? '#eaecef' : '#30363d' - }`, + borderBottom: `1px solid ${'#30363d'}`, '& input': { borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117', + backgroundColor: '#0d1117', + border: `1px solid ${'#30363d'}`, padding: 8, transition: theme.transitions.create(['border-color', 'box-shadow']), - border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`, fontSize: 14, '&:focus': { - boxShadow: `0px 0px 0px 3px ${ - theme.palette.mode === 'light' - ? 'rgba(3, 102, 214, 0.3)' - : 'rgb(12, 45, 107)' - }`, - borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd', + boxShadow: `0px 0px 0px 3px ${'rgba(3, 102, 214, 0.3)'}`, + borderColor: '#0366d6', + ...theme.applyStyles('dark', { + boxShadow: `0px 0px 0px 3px ${'rgb(12, 45, 107)'}`, + borderColor: '#388bfd', + }), }, + ...theme.applyStyles('dark', { + backgroundColor: '#fff', + border: `1px solid ${'#eaecef'}`, + }), }, + ...theme.applyStyles('dark', { + borderBottom: `1px solid ${'#eaecef'}`, + }), })); const Button = styled(ButtonBase)(({ theme }) => ({ @@ -97,10 +112,13 @@ const Button = styled(ButtonBase)(({ theme }) => ({ width: '100%', textAlign: 'left', paddingBottom: 8, - color: theme.palette.mode === 'light' ? '#586069' : '#8b949e', + color: '#586069', fontWeight: 600, '&:hover,&:focus': { - color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff', + color: '#0366d6', + ...theme.applyStyles('dark', { + color: '#58a6ff', + }), }, '& span': { width: '100%', @@ -109,6 +127,9 @@ const Button = styled(ButtonBase)(({ theme }) => ({ width: 16, height: 16, }, + ...theme.applyStyles('dark', { + color: '#8b949e', + }), })); export default function GitHubLabel() { diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js index 878bf1977e58df..ba28fe54698d3e 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.js +++ b/docs/data/material/components/autocomplete/RenderGroup.js @@ -8,10 +8,10 @@ const GroupHeader = styled('div')(({ theme }) => ({ top: '-8px', padding: '4px 10px', color: theme.palette.primary.main, - backgroundColor: - theme.palette.mode === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : darken(theme.palette.primary.main, 0.8), + backgroundColor: lighten(theme.palette.primary.light, 0.85), + ...theme.applyStyles('dark', { + backgroundColor: darken(theme.palette.primary.main, 0.8), + }), })); const GroupItems = styled('ul')({ diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx index 878bf1977e58df..ba28fe54698d3e 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx +++ b/docs/data/material/components/autocomplete/RenderGroup.tsx @@ -8,10 +8,10 @@ const GroupHeader = styled('div')(({ theme }) => ({ top: '-8px', padding: '4px 10px', color: theme.palette.primary.main, - backgroundColor: - theme.palette.mode === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : darken(theme.palette.primary.main, 0.8), + backgroundColor: lighten(theme.palette.primary.light, 0.85), + ...theme.applyStyles('dark', { + backgroundColor: darken(theme.palette.primary.main, 0.8), + }), })); const GroupItems = styled('ul')({ diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js index 7ee5b239f59e74..7e6163da5ed7ab 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.js +++ b/docs/data/material/components/autocomplete/UseAutocomplete.js @@ -8,8 +8,12 @@ const Label = styled('label')({ const Input = styled('input')(({ theme }) => ({ width: 200, - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000', - color: theme.palette.mode === 'light' ? '#000' : '#fff', + backgroundColor: '#fff', + color: '#000', + ...theme.applyStyles('dark', { + backgroundColor: '#000', + color: '#fff', + }), })); const Listbox = styled('ul')(({ theme }) => ({ @@ -19,7 +23,7 @@ const Listbox = styled('ul')(({ theme }) => ({ zIndex: 1, position: 'absolute', listStyle: 'none', - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000', + backgroundColor: '#fff', overflow: 'auto', maxHeight: 200, border: '1px solid rgba(0,0,0,.25)', @@ -32,6 +36,9 @@ const Listbox = styled('ul')(({ theme }) => ({ backgroundColor: '#2977f5', color: 'white', }, + ...theme.applyStyles('dark', { + backgroundColor: '#000', + }), })); export default function UseAutocomplete() { diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx index c7706e990e4214..0af0a01184ba2e 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx +++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx @@ -8,8 +8,12 @@ const Label = styled('label')({ const Input = styled('input')(({ theme }) => ({ width: 200, - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000', - color: theme.palette.mode === 'light' ? '#000' : '#fff', + backgroundColor: '#fff', + color: '#000', + ...theme.applyStyles('dark', { + backgroundColor: '#000', + color: '#fff', + }), })); const Listbox = styled('ul')(({ theme }) => ({ @@ -19,7 +23,7 @@ const Listbox = styled('ul')(({ theme }) => ({ zIndex: 1, position: 'absolute', listStyle: 'none', - backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000', + backgroundColor: '#fff', overflow: 'auto', maxHeight: 200, border: '1px solid rgba(0,0,0,.25)', @@ -32,6 +36,9 @@ const Listbox = styled('ul')(({ theme }) => ({ backgroundColor: '#2977f5', color: 'white', }, + ...theme.applyStyles('dark', { + backgroundColor: '#000', + }), })); export default function UseAutocomplete() { diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js index 7360def8df3ad9..882d663339f5a9 100644 --- a/docs/data/material/components/cards/RecipeReviewCard.js +++ b/docs/data/material/components/cards/RecipeReviewCard.js @@ -18,12 +18,25 @@ import MoreVertIcon from '@mui/icons-material/MoreVert'; const ExpandMore = styled((props) => { const { expand, ...other } = props; return ; -})(({ theme, expand }) => ({ - transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)', +})(({ theme }) => ({ marginLeft: 'auto', transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shortest, }), + variants: [ + { + props: ({ expand }) => !expand, + style: { + transform: 'rotate(0deg)', + }, + }, + { + props: ({ expand }) => !!expand, + style: { + transform: 'rotate(180deg)', + }, + }, + ], })); export default function RecipeReviewCard() { diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/RecipeReviewCard.tsx index f86066c9bab1f1..4cbc9931d64ab7 100644 --- a/docs/data/material/components/cards/RecipeReviewCard.tsx +++ b/docs/data/material/components/cards/RecipeReviewCard.tsx @@ -22,12 +22,25 @@ interface ExpandMoreProps extends IconButtonProps { const ExpandMore = styled((props: ExpandMoreProps) => { const { expand, ...other } = props; return ; -})(({ theme, expand }) => ({ - transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)', +})(({ theme }) => ({ marginLeft: 'auto', transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shortest, }), + variants: [ + { + props: ({ expand }) => !expand, + style: { + transform: 'rotate(0deg)', + }, + }, + { + props: ({ expand }) => !!expand, + style: { + transform: 'rotate(180deg)', + }, + }, + ], })); export default function RecipeReviewCard() { diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.js b/docs/data/material/components/checkboxes/CustomizedCheckbox.js index d17405ae0dd37b..64a86cc528e48b 100644 --- a/docs/data/material/components/checkboxes/CustomizedCheckbox.js +++ b/docs/data/material/components/checkboxes/CustomizedCheckbox.js @@ -6,27 +6,31 @@ const BpIcon = styled('span')(({ theme }) => ({ borderRadius: 3, width: 16, height: 16, - boxShadow: - theme.palette.mode === 'dark' - ? '0 0 0 1px rgb(16 22 26 / 40%)' - : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa', - backgroundImage: - theme.palette.mode === 'dark' - ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' - : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, }, 'input:hover ~ &': { - backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5', + backgroundColor: '#ebf1f5', + ...theme.applyStyles('dark', { + backgroundColor: '#30404d', + }), }, 'input:disabled ~ &': { boxShadow: 'none', - background: - theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)', + background: 'rgba(206,217,224,.5)', + ...theme.applyStyles('dark', { + background: 'rgba(57,75,89,.5)', + }), }, + ...theme.applyStyles('dark', { + boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', + backgroundColor: '#394b59', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', + }), })); const BpCheckedIcon = styled(BpIcon)({ diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx b/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx index 4f920e150e0080..b97ec2a04f2614 100644 --- a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx +++ b/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx @@ -6,27 +6,31 @@ const BpIcon = styled('span')(({ theme }) => ({ borderRadius: 3, width: 16, height: 16, - boxShadow: - theme.palette.mode === 'dark' - ? '0 0 0 1px rgb(16 22 26 / 40%)' - : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa', - backgroundImage: - theme.palette.mode === 'dark' - ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' - : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, }, 'input:hover ~ &': { - backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5', + backgroundColor: '#ebf1f5', + ...theme.applyStyles('dark', { + backgroundColor: '#30404d', + }), }, 'input:disabled ~ &': { boxShadow: 'none', - background: - theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)', + background: 'rgba(206,217,224,.5)', + ...theme.applyStyles('dark', { + background: 'rgba(57,75,89,.5)', + }), }, + ...theme.applyStyles('dark', { + boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', + backgroundColor: '#394b59', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', + }), })); const BpCheckedIcon = styled(BpIcon)({ diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js index dbf47df919cf56..de1e4430886b57 100644 --- a/docs/data/material/components/drawers/MiniDrawer.js +++ b/docs/data/material/components/drawers/MiniDrawer.js @@ -53,36 +53,49 @@ const DrawerHeader = styled('div')(({ theme }) => ({ const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }), + variants: [ + { + props: ({ open }) => open, + style: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + }, + ], })); const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ + ({ theme }) => ({ width: drawerWidth, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', - ...(open && { - ...openedMixin(theme), - '& .MuiDrawer-paper': openedMixin(theme), - }), - ...(!open && { - ...closedMixin(theme), - '& .MuiDrawer-paper': closedMixin(theme), - }), + variants: [ + { + props: ({ open }) => open, + style: { + ...openedMixin(theme), + '& .MuiDrawer-paper': openedMixin(theme), + }, + }, + { + props: ({ open }) => !open, + style: { + ...closedMixin(theme), + '& .MuiDrawer-paper': closedMixin(theme), + }, + }, + ], }), ); diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/MiniDrawer.tsx index 828796cdb4f159..0e3ff4c81909b2 100644 --- a/docs/data/material/components/drawers/MiniDrawer.tsx +++ b/docs/data/material/components/drawers/MiniDrawer.tsx @@ -57,36 +57,49 @@ interface AppBarProps extends MuiAppBarProps { const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }), + variants: [ + { + props: ({ open }) => open, + style: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['width', 'margin'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + }, + ], })); const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ + ({ theme }) => ({ width: drawerWidth, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', - ...(open && { - ...openedMixin(theme), - '& .MuiDrawer-paper': openedMixin(theme), - }), - ...(!open && { - ...closedMixin(theme), - '& .MuiDrawer-paper': closedMixin(theme), - }), + variants: [ + { + props: ({ open }) => open, + style: { + ...openedMixin(theme), + '& .MuiDrawer-paper': openedMixin(theme), + }, + }, + { + props: ({ open }) => !open, + style: { + ...closedMixin(theme), + '& .MuiDrawer-paper': closedMixin(theme), + }, + }, + ], }), ); diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js index 3867f4e638fdec..da3e3d47d7e9ad 100644 --- a/docs/data/material/components/drawers/PersistentDrawerLeft.js +++ b/docs/data/material/components/drawers/PersistentDrawerLeft.js @@ -22,7 +22,7 @@ import MailIcon from '@mui/icons-material/Mail'; const drawerWidth = 240; const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ + ({ theme }) => ({ flexGrow: 1, padding: theme.spacing(3), transition: theme.transitions.create('margin', { @@ -30,31 +30,41 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( duration: theme.transitions.duration.leavingScreen, }), marginLeft: `-${drawerWidth}px`, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }), + variants: [ + { + props: ({ open }) => open, + style: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginLeft: 0, + }, + }, + ], }), ); const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: `${drawerWidth}px`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }), + variants: [ + { + props: ({ open }) => open, + style: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: `${drawerWidth}px`, + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + }, + ], })); const DrawerHeader = styled('div')(({ theme }) => ({ diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx index 1fbcd5bb59b14f..232fc5d3912351 100644 --- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx +++ b/docs/data/material/components/drawers/PersistentDrawerLeft.tsx @@ -23,7 +23,7 @@ const drawerWidth = 240; const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; -}>(({ theme, open }) => ({ +}>(({ theme }) => ({ flexGrow: 1, padding: theme.spacing(3), transition: theme.transitions.create('margin', { @@ -31,13 +31,18 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ duration: theme.transitions.duration.leavingScreen, }), marginLeft: `-${drawerWidth}px`, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }), + variants: [ + { + props: ({ open }) => open, + style: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginLeft: 0, + }, + }, + ], })); interface AppBarProps extends MuiAppBarProps { @@ -46,19 +51,24 @@ interface AppBarProps extends MuiAppBarProps { const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: `${drawerWidth}px`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }), + variants: [ + { + props: ({ open }) => open, + style: { + width: `calc(100% - ${drawerWidth}px)`, + marginLeft: `${drawerWidth}px`, + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + }, + ], })); const DrawerHeader = styled('div')(({ theme }) => ({ diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js index 644d71c0142d52..79f1dd5226049b 100644 --- a/docs/data/material/components/drawers/PersistentDrawerRight.js +++ b/docs/data/material/components/drawers/PersistentDrawerRight.js @@ -22,7 +22,7 @@ import MailIcon from '@mui/icons-material/Mail'; const drawerWidth = 240; const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme, open }) => ({ + ({ theme }) => ({ flexGrow: 1, padding: theme.spacing(3), transition: theme.transitions.create('margin', { @@ -30,13 +30,6 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( duration: theme.transitions.duration.leavingScreen, }), marginRight: -drawerWidth, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: 0, - }), /** * This is necessary to enable the selection of content. In the DOM, the stacking order is determined * by the order of appearance. Following this rule, elements appearing later in the markup will overlay @@ -44,24 +37,41 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( * proper interaction with the underlying content. */ position: 'relative', + variants: [ + { + props: ({ open }) => open, + style: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: 0, + }, + }, + ], }), ); const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: drawerWidth, - }), + variants: [ + { + props: ({ open }) => open, + style: { + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: drawerWidth, + }, + }, + ], })); const DrawerHeader = styled('div')(({ theme }) => ({ diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/PersistentDrawerRight.tsx index 66a8b2b74915c4..e4e8f41954639f 100644 --- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx +++ b/docs/data/material/components/drawers/PersistentDrawerRight.tsx @@ -23,7 +23,7 @@ const drawerWidth = 240; const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; -}>(({ theme, open }) => ({ +}>(({ theme }) => ({ flexGrow: 1, padding: theme.spacing(3), transition: theme.transitions.create('margin', { @@ -31,13 +31,6 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ duration: theme.transitions.duration.leavingScreen, }), marginRight: -drawerWidth, - ...(open && { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: 0, - }), /** * This is necessary to enable the selection of content. In the DOM, the stacking order is determined * by the order of appearance. Following this rule, elements appearing later in the markup will overlay @@ -45,6 +38,18 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ * proper interaction with the underlying content. */ position: 'relative', + variants: [ + { + props: ({ open }) => open, + style: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: 0, + }, + }, + ], })); interface AppBarProps extends MuiAppBarProps { @@ -53,19 +58,24 @@ interface AppBarProps extends MuiAppBarProps { const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', -})(({ theme, open }) => ({ +})(({ theme }) => ({ transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - ...(open && { - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: drawerWidth, - }), + variants: [ + { + props: ({ open }) => open, + style: { + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(['margin', 'width'], { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: drawerWidth, + }, + }, + ], })); const DrawerHeader = styled('div')(({ theme }) => ({ diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js index 13a057b7b93d89..9e2e08b8444d4f 100644 --- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js +++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js @@ -14,22 +14,30 @@ const drawerBleeding = 56; const Root = styled('div')(({ theme }) => ({ height: '100%', - backgroundColor: - theme.palette.mode === 'light' ? grey[100] : theme.palette.background.default, + backgroundColor: grey[100], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.default, + }), })); const StyledBox = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'light' ? '#fff' : grey[800], + backgroundColor: '#fff', + ...theme.applyStyles('dark', { + backgroundColor: grey[800], + }), })); const Puller = styled('div')(({ theme }) => ({ width: 30, height: 6, - backgroundColor: theme.palette.mode === 'light' ? grey[300] : grey[900], + backgroundColor: grey[300], borderRadius: 3, position: 'absolute', top: 8, left: 'calc(50% - 15px)', + ...theme.applyStyles('dark', { + backgroundColor: grey[900], + }), })); function SwipeableEdgeDrawer(props) { diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx index 682f8a9433f2f7..98fe0e04805b5f 100644 --- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx +++ b/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx @@ -21,22 +21,30 @@ interface Props { const Root = styled('div')(({ theme }) => ({ height: '100%', - backgroundColor: - theme.palette.mode === 'light' ? grey[100] : theme.palette.background.default, + backgroundColor: grey[100], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.background.default, + }), })); const StyledBox = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'light' ? '#fff' : grey[800], + backgroundColor: '#fff', + ...theme.applyStyles('dark', { + backgroundColor: grey[800], + }), })); const Puller = styled('div')(({ theme }) => ({ width: 30, height: 6, - backgroundColor: theme.palette.mode === 'light' ? grey[300] : grey[900], + backgroundColor: grey[300], borderRadius: 3, position: 'absolute', top: 8, left: 'calc(50% - 15px)', + ...theme.applyStyles('dark', { + backgroundColor: grey[900], + }), })); export default function SwipeableEdgeDrawer(props: Props) { diff --git a/docs/data/material/components/grid/AutoGrid.js b/docs/data/material/components/grid/AutoGrid.js index e8cc0f51b89ee9..f1185010722484 100644 --- a/docs/data/material/components/grid/AutoGrid.js +++ b/docs/data/material/components/grid/AutoGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function AutoGrid() { diff --git a/docs/data/material/components/grid/AutoGrid.tsx b/docs/data/material/components/grid/AutoGrid.tsx index e8cc0f51b89ee9..f1185010722484 100644 --- a/docs/data/material/components/grid/AutoGrid.tsx +++ b/docs/data/material/components/grid/AutoGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function AutoGrid() { diff --git a/docs/data/material/components/grid/AutoGridNoWrap.js b/docs/data/material/components/grid/AutoGridNoWrap.js index d25a2e5d67a0e2..cc49b0780d1ddb 100644 --- a/docs/data/material/components/grid/AutoGridNoWrap.js +++ b/docs/data/material/components/grid/AutoGridNoWrap.js @@ -7,11 +7,14 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; const StyledPaper = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), maxWidth: 400, color: theme.palette.text.primary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/grid/AutoGridNoWrap.tsx b/docs/data/material/components/grid/AutoGridNoWrap.tsx index d25a2e5d67a0e2..cc49b0780d1ddb 100644 --- a/docs/data/material/components/grid/AutoGridNoWrap.tsx +++ b/docs/data/material/components/grid/AutoGridNoWrap.tsx @@ -7,11 +7,14 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; const StyledPaper = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), maxWidth: 400, color: theme.palette.text.primary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/grid/BasicGrid.js b/docs/data/material/components/grid/BasicGrid.js index 33af9b4ac2f3af..8e7cc1408ae7de 100644 --- a/docs/data/material/components/grid/BasicGrid.js +++ b/docs/data/material/components/grid/BasicGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicGrid() { diff --git a/docs/data/material/components/grid/BasicGrid.tsx b/docs/data/material/components/grid/BasicGrid.tsx index 33af9b4ac2f3af..8e7cc1408ae7de 100644 --- a/docs/data/material/components/grid/BasicGrid.tsx +++ b/docs/data/material/components/grid/BasicGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicGrid() { diff --git a/docs/data/material/components/grid/CSSGrid.js b/docs/data/material/components/grid/CSSGrid.js index 36687c6662f4a6..2eff70befd2efb 100644 --- a/docs/data/material/components/grid/CSSGrid.js +++ b/docs/data/material/components/grid/CSSGrid.js @@ -4,11 +4,14 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function CSSGrid() { diff --git a/docs/data/material/components/grid/CSSGrid.tsx b/docs/data/material/components/grid/CSSGrid.tsx index 36687c6662f4a6..2eff70befd2efb 100644 --- a/docs/data/material/components/grid/CSSGrid.tsx +++ b/docs/data/material/components/grid/CSSGrid.tsx @@ -4,11 +4,14 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function CSSGrid() { diff --git a/docs/data/material/components/grid/ColumnsGrid.js b/docs/data/material/components/grid/ColumnsGrid.js index f0d088b48812d0..67b8ff281b1bb0 100644 --- a/docs/data/material/components/grid/ColumnsGrid.js +++ b/docs/data/material/components/grid/ColumnsGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ColumnsGrid() { diff --git a/docs/data/material/components/grid/ColumnsGrid.tsx b/docs/data/material/components/grid/ColumnsGrid.tsx index f0d088b48812d0..67b8ff281b1bb0 100644 --- a/docs/data/material/components/grid/ColumnsGrid.tsx +++ b/docs/data/material/components/grid/ColumnsGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ColumnsGrid() { diff --git a/docs/data/material/components/grid/FullWidthGrid.js b/docs/data/material/components/grid/FullWidthGrid.js index dc53439ac7f34d..ffdd35806a7efd 100644 --- a/docs/data/material/components/grid/FullWidthGrid.js +++ b/docs/data/material/components/grid/FullWidthGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FullWidthGrid() { diff --git a/docs/data/material/components/grid/FullWidthGrid.tsx b/docs/data/material/components/grid/FullWidthGrid.tsx index dc53439ac7f34d..ffdd35806a7efd 100644 --- a/docs/data/material/components/grid/FullWidthGrid.tsx +++ b/docs/data/material/components/grid/FullWidthGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FullWidthGrid() { diff --git a/docs/data/material/components/grid/NestedGrid.js b/docs/data/material/components/grid/NestedGrid.js index aee5eca0b6299f..954ce208a14555 100644 --- a/docs/data/material/components/grid/NestedGrid.js +++ b/docs/data/material/components/grid/NestedGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); function FormRow() { diff --git a/docs/data/material/components/grid/NestedGrid.tsx b/docs/data/material/components/grid/NestedGrid.tsx index aee5eca0b6299f..954ce208a14555 100644 --- a/docs/data/material/components/grid/NestedGrid.tsx +++ b/docs/data/material/components/grid/NestedGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); function FormRow() { diff --git a/docs/data/material/components/grid/ResponsiveGrid.js b/docs/data/material/components/grid/ResponsiveGrid.js index 51a39d530449e9..53e59854d266d5 100644 --- a/docs/data/material/components/grid/ResponsiveGrid.js +++ b/docs/data/material/components/grid/ResponsiveGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/material/components/grid/ResponsiveGrid.tsx b/docs/data/material/components/grid/ResponsiveGrid.tsx index 51a39d530449e9..53e59854d266d5 100644 --- a/docs/data/material/components/grid/ResponsiveGrid.tsx +++ b/docs/data/material/components/grid/ResponsiveGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.js b/docs/data/material/components/grid/RowAndColumnSpacing.js index 298df599028317..634cc8bdf699eb 100644 --- a/docs/data/material/components/grid/RowAndColumnSpacing.js +++ b/docs/data/material/components/grid/RowAndColumnSpacing.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.tsx b/docs/data/material/components/grid/RowAndColumnSpacing.tsx index 298df599028317..634cc8bdf699eb 100644 --- a/docs/data/material/components/grid/RowAndColumnSpacing.tsx +++ b/docs/data/material/components/grid/RowAndColumnSpacing.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/material/components/grid/VariableWidthGrid.js b/docs/data/material/components/grid/VariableWidthGrid.js index d77af639d8affb..481911a32d2dd5 100644 --- a/docs/data/material/components/grid/VariableWidthGrid.js +++ b/docs/data/material/components/grid/VariableWidthGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/material/components/grid/VariableWidthGrid.tsx b/docs/data/material/components/grid/VariableWidthGrid.tsx index d77af639d8affb..481911a32d2dd5 100644 --- a/docs/data/material/components/grid/VariableWidthGrid.tsx +++ b/docs/data/material/components/grid/VariableWidthGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid2/AutoGrid.js index de1d22e88c8210..a757d2af3dfcce 100644 --- a/docs/data/material/components/grid2/AutoGrid.js +++ b/docs/data/material/components/grid2/AutoGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function AutoGrid() { diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx index de1d22e88c8210..a757d2af3dfcce 100644 --- a/docs/data/material/components/grid2/AutoGrid.tsx +++ b/docs/data/material/components/grid2/AutoGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function AutoGrid() { diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid2/BasicGrid.js index 3b12e8459c9ad3..a8b79541fe218b 100644 --- a/docs/data/material/components/grid2/BasicGrid.js +++ b/docs/data/material/components/grid2/BasicGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicGrid() { diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx index 3b12e8459c9ad3..a8b79541fe218b 100644 --- a/docs/data/material/components/grid2/BasicGrid.tsx +++ b/docs/data/material/components/grid2/BasicGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicGrid() { diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid2/ColumnsGrid.js index 690e3326bd0da7..1fc91353ec2bbf 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.js +++ b/docs/data/material/components/grid2/ColumnsGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ColumnsGrid() { diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx index 690e3326bd0da7..1fc91353ec2bbf 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.tsx +++ b/docs/data/material/components/grid2/ColumnsGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ColumnsGrid() { diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid2/FullWidthGrid.js index 69b3bed991f96d..07a03a642ec394 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.js +++ b/docs/data/material/components/grid2/FullWidthGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FullWidthGrid() { diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx b/docs/data/material/components/grid2/FullWidthGrid.tsx index 69b3bed991f96d..07a03a642ec394 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.tsx +++ b/docs/data/material/components/grid2/FullWidthGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FullWidthGrid() { diff --git a/docs/data/material/components/grid2/NestedGrid.js b/docs/data/material/components/grid2/NestedGrid.js index 58031fe2532307..2710da64c39ba9 100644 --- a/docs/data/material/components/grid2/NestedGrid.js +++ b/docs/data/material/components/grid2/NestedGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function NestedGrid() { diff --git a/docs/data/material/components/grid2/NestedGrid.tsx b/docs/data/material/components/grid2/NestedGrid.tsx index 58031fe2532307..2710da64c39ba9 100644 --- a/docs/data/material/components/grid2/NestedGrid.tsx +++ b/docs/data/material/components/grid2/NestedGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function NestedGrid() { diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid2/NestedGridColumns.js index b406f5b26ea9e6..408ef29cc5dcd1 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.js +++ b/docs/data/material/components/grid2/NestedGridColumns.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function NestedGridColumns() { diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid2/NestedGridColumns.tsx index b406f5b26ea9e6..408ef29cc5dcd1 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.tsx +++ b/docs/data/material/components/grid2/NestedGridColumns.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function NestedGridColumns() { diff --git a/docs/data/material/components/grid2/OffsetGrid.js b/docs/data/material/components/grid2/OffsetGrid.js index 0b5aa4a013fe88..6876ba0cf174ac 100644 --- a/docs/data/material/components/grid2/OffsetGrid.js +++ b/docs/data/material/components/grid2/OffsetGrid.js @@ -4,11 +4,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function OffsetGrid() { diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx b/docs/data/material/components/grid2/OffsetGrid.tsx index 0b5aa4a013fe88..6876ba0cf174ac 100644 --- a/docs/data/material/components/grid2/OffsetGrid.tsx +++ b/docs/data/material/components/grid2/OffsetGrid.tsx @@ -4,11 +4,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function OffsetGrid() { diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid2/ResponsiveGrid.js index 33668f2232bdda..98ae33ddbe7223 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.js +++ b/docs/data/material/components/grid2/ResponsiveGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid2/ResponsiveGrid.tsx index 33668f2232bdda..98ae33ddbe7223 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.tsx +++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveGrid() { diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.js b/docs/data/material/components/grid2/RowAndColumnSpacing.js index b3a75e932cf827..6d3e8e2265cb2a 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.js +++ b/docs/data/material/components/grid2/RowAndColumnSpacing.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx index b3a75e932cf827..6d3e8e2265cb2a 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx +++ b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function RowAndColumnSpacing() { diff --git a/docs/data/material/components/grid2/VariableWidthGrid.js b/docs/data/material/components/grid2/VariableWidthGrid.js index 6a236e0d3e7241..410336f9138a24 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.js +++ b/docs/data/material/components/grid2/VariableWidthGrid.js @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid2/VariableWidthGrid.tsx index 6a236e0d3e7241..410336f9138a24 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.tsx +++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx @@ -5,11 +5,14 @@ import Paper from '@mui/material/Paper'; import Grid from '@mui/material/Unstable_Grid2'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function VariableWidthGrid() { diff --git a/docs/data/material/components/masonry/BasicMasonry.js b/docs/data/material/components/masonry/BasicMasonry.js index 35b80dcb745d3a..e7251c0be9669a 100644 --- a/docs/data/material/components/masonry/BasicMasonry.js +++ b/docs/data/material/components/masonry/BasicMasonry.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicMasonry() { diff --git a/docs/data/material/components/masonry/BasicMasonry.tsx b/docs/data/material/components/masonry/BasicMasonry.tsx index 35b80dcb745d3a..e7251c0be9669a 100644 --- a/docs/data/material/components/masonry/BasicMasonry.tsx +++ b/docs/data/material/components/masonry/BasicMasonry.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicMasonry() { diff --git a/docs/data/material/components/masonry/FixedColumns.js b/docs/data/material/components/masonry/FixedColumns.js index 811cf304cadea3..d2bda19f0a501b 100644 --- a/docs/data/material/components/masonry/FixedColumns.js +++ b/docs/data/material/components/masonry/FixedColumns.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FixedColumns() { diff --git a/docs/data/material/components/masonry/FixedColumns.tsx b/docs/data/material/components/masonry/FixedColumns.tsx index 811cf304cadea3..d2bda19f0a501b 100644 --- a/docs/data/material/components/masonry/FixedColumns.tsx +++ b/docs/data/material/components/masonry/FixedColumns.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FixedColumns() { diff --git a/docs/data/material/components/masonry/FixedSpacing.js b/docs/data/material/components/masonry/FixedSpacing.js index f6cd826ff94331..ec31c06dabc811 100644 --- a/docs/data/material/components/masonry/FixedSpacing.js +++ b/docs/data/material/components/masonry/FixedSpacing.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FixedSpacing() { diff --git a/docs/data/material/components/masonry/FixedSpacing.tsx b/docs/data/material/components/masonry/FixedSpacing.tsx index f6cd826ff94331..ec31c06dabc811 100644 --- a/docs/data/material/components/masonry/FixedSpacing.tsx +++ b/docs/data/material/components/masonry/FixedSpacing.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FixedSpacing() { diff --git a/docs/data/material/components/masonry/ImageMasonry.js b/docs/data/material/components/masonry/ImageMasonry.js index 268268ea63953b..58da94d6b56f5f 100644 --- a/docs/data/material/components/masonry/ImageMasonry.js +++ b/docs/data/material/components/masonry/ImageMasonry.js @@ -5,13 +5,16 @@ import Masonry from '@mui/lab/Masonry'; import { styled } from '@mui/material/styles'; const Label = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ImageMasonry() { diff --git a/docs/data/material/components/masonry/ImageMasonry.tsx b/docs/data/material/components/masonry/ImageMasonry.tsx index 268268ea63953b..58da94d6b56f5f 100644 --- a/docs/data/material/components/masonry/ImageMasonry.tsx +++ b/docs/data/material/components/masonry/ImageMasonry.tsx @@ -5,13 +5,16 @@ import Masonry from '@mui/lab/Masonry'; import { styled } from '@mui/material/styles'; const Label = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, borderBottomLeftRadius: 0, borderBottomRightRadius: 0, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ImageMasonry() { diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js index 8901f92445e05e..5b4106edcb7596 100644 --- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js +++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js @@ -14,8 +14,11 @@ import Paper from '@mui/material/Paper'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const StyledAccordion = styled(Accordion)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function MasonryWithVariableHeightItems() { diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx index 8901f92445e05e..5b4106edcb7596 100644 --- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx +++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx @@ -14,8 +14,11 @@ import Paper from '@mui/material/Paper'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const StyledAccordion = styled(Accordion)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function MasonryWithVariableHeightItems() { diff --git a/docs/data/material/components/masonry/ResponsiveColumns.js b/docs/data/material/components/masonry/ResponsiveColumns.js index 051bb1034f16e3..8b14c2daa14fa4 100644 --- a/docs/data/material/components/masonry/ResponsiveColumns.js +++ b/docs/data/material/components/masonry/ResponsiveColumns.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveColumns() { diff --git a/docs/data/material/components/masonry/ResponsiveColumns.tsx b/docs/data/material/components/masonry/ResponsiveColumns.tsx index 051bb1034f16e3..8b14c2daa14fa4 100644 --- a/docs/data/material/components/masonry/ResponsiveColumns.tsx +++ b/docs/data/material/components/masonry/ResponsiveColumns.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveColumns() { diff --git a/docs/data/material/components/masonry/ResponsiveSpacing.js b/docs/data/material/components/masonry/ResponsiveSpacing.js index c2ea39d1917b1a..25540af4624ee7 100644 --- a/docs/data/material/components/masonry/ResponsiveSpacing.js +++ b/docs/data/material/components/masonry/ResponsiveSpacing.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveSpacing() { diff --git a/docs/data/material/components/masonry/ResponsiveSpacing.tsx b/docs/data/material/components/masonry/ResponsiveSpacing.tsx index c2ea39d1917b1a..25540af4624ee7 100644 --- a/docs/data/material/components/masonry/ResponsiveSpacing.tsx +++ b/docs/data/material/components/masonry/ResponsiveSpacing.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveSpacing() { diff --git a/docs/data/material/components/masonry/SSRMasonry.js b/docs/data/material/components/masonry/SSRMasonry.js index 1d7bbd2ed0be25..7bffd501349c12 100644 --- a/docs/data/material/components/masonry/SSRMasonry.js +++ b/docs/data/material/components/masonry/SSRMasonry.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function SSRMasonry() { diff --git a/docs/data/material/components/masonry/SSRMasonry.tsx b/docs/data/material/components/masonry/SSRMasonry.tsx index 1d7bbd2ed0be25..7bffd501349c12 100644 --- a/docs/data/material/components/masonry/SSRMasonry.tsx +++ b/docs/data/material/components/masonry/SSRMasonry.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function SSRMasonry() { diff --git a/docs/data/material/components/masonry/Sequential.js b/docs/data/material/components/masonry/Sequential.js index be3d4731df91b6..11ad77dc2c61ee 100644 --- a/docs/data/material/components/masonry/Sequential.js +++ b/docs/data/material/components/masonry/Sequential.js @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function Sequential() { diff --git a/docs/data/material/components/masonry/Sequential.tsx b/docs/data/material/components/masonry/Sequential.tsx index be3d4731df91b6..11ad77dc2c61ee 100644 --- a/docs/data/material/components/masonry/Sequential.tsx +++ b/docs/data/material/components/masonry/Sequential.tsx @@ -7,11 +7,14 @@ import Masonry from '@mui/lab/Masonry'; const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(0.5), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function Sequential() { diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js index a18083aedf0c60..9141436bb51dc3 100644 --- a/docs/data/material/components/material-icons/SearchIcons.js +++ b/docs/data/material/components/material-icons/SearchIcons.js @@ -218,9 +218,11 @@ const CanvasComponent = styled('div')(({ theme }) => ({ backgroundColor: 'transparent', backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0', backgroundImage: - theme.palette.mode === 'light' - ? 'linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%)' - : 'linear-gradient(45deg, #595959 25%, transparent 25%), linear-gradient(-45deg, #595959 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #595959 75%), linear-gradient(-45deg, transparent 75%, #595959 75%)', + 'linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%)', + ...theme.applyStyles('dark', { + backgroundImage: + 'linear-gradient(45deg, #595959 25%, transparent 25%), linear-gradient(-45deg, #595959 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #595959 75%), linear-gradient(-45deg, transparent 75%, #595959 75%)', + }), })); const FontSizeComponent = styled('span')(({ theme }) => ({ @@ -229,32 +231,64 @@ const FontSizeComponent = styled('span')(({ theme }) => ({ const ContextComponent = styled('div', { shouldForwardProp: (prop) => prop !== 'contextColor' && prop !== 'as', -})(({ theme, contextColor }) => ({ +})(({ theme }) => ({ margin: theme.spacing(0.5), padding: theme.spacing(1, 2), borderRadius: theme.shape.borderRadius, boxSizing: 'content-box', - ...(contextColor === 'primary' && { - color: theme.palette.primary.main, - }), - ...(contextColor === 'primaryInverse' && { - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - }), - ...(contextColor === 'textPrimary' && { - color: theme.palette.text.primary, - }), - ...(contextColor === 'textPrimaryInverse' && { - color: theme.palette.background.paper, - backgroundColor: theme.palette.text.primary, - }), - ...(contextColor === 'textSecondary' && { - color: theme.palette.text.secondary, - }), - ...(contextColor === 'textSecondaryInverse' && { - color: theme.palette.background.paper, - backgroundColor: theme.palette.text.secondary, - }), + variants: [ + { + props: { + contextColor: 'primary', + }, + style: { + color: theme.palette.primary.main, + }, + }, + { + props: { + contextColor: 'primaryInverse', + }, + style: { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + }, + }, + { + props: { + contextColor: 'textPrimary', + }, + style: { + color: theme.palette.text.primary, + }, + }, + { + props: { + contextColor: 'textPrimaryInverse', + }, + style: { + color: theme.palette.background.paper, + backgroundColor: theme.palette.text.primary, + }, + }, + { + props: { + contextColor: 'textSecondary', + }, + style: { + color: theme.palette.text.secondary, + }, + }, + { + props: { + contextColor: 'textSecondaryInverse', + }, + style: { + color: theme.palette.background.paper, + backgroundColor: theme.palette.text.secondary, + }, + }, + ], })); const DialogDetails = React.memo(function DialogDetails(props) { diff --git a/docs/data/material/components/menus/CustomizedMenus.js b/docs/data/material/components/menus/CustomizedMenus.js index 0465b0a5fdf4ff..5649562bac50db 100644 --- a/docs/data/material/components/menus/CustomizedMenus.js +++ b/docs/data/material/components/menus/CustomizedMenus.js @@ -28,8 +28,7 @@ const StyledMenu = styled((props) => ( borderRadius: 6, marginTop: theme.spacing(1), minWidth: 180, - color: - theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300], + color: 'rgb(55, 65, 81)', boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', '& .MuiMenu-list': { @@ -48,6 +47,9 @@ const StyledMenu = styled((props) => ( ), }, }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + }), }, })); diff --git a/docs/data/material/components/menus/CustomizedMenus.tsx b/docs/data/material/components/menus/CustomizedMenus.tsx index 0b0a89d625ebda..adb4facf8ddbf6 100644 --- a/docs/data/material/components/menus/CustomizedMenus.tsx +++ b/docs/data/material/components/menus/CustomizedMenus.tsx @@ -28,8 +28,7 @@ const StyledMenu = styled((props: MenuProps) => ( borderRadius: 6, marginTop: theme.spacing(1), minWidth: 180, - color: - theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300], + color: 'rgb(55, 65, 81)', boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', '& .MuiMenu-list': { @@ -48,6 +47,9 @@ const StyledMenu = styled((props: MenuProps) => ( ), }, }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[300], + }), }, })); diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/ScrollPlayground.js index 3777ffaf412441..354b7d840b1352 100644 --- a/docs/data/material/components/popper/ScrollPlayground.js +++ b/docs/data/material/components/popper/ScrollPlayground.js @@ -18,15 +18,12 @@ import { HighlightedCode } from '@mui/docs/HighlightedCode'; const Popper = styled(MuiPopper, { shouldForwardProp: (prop) => prop !== 'arrow', -})(({ theme, arrow }) => ({ +})(({ theme }) => ({ zIndex: 1, '& > div': { position: 'relative', }, '&[data-popper-placement*="bottom"]': { - '& > div': { - marginTop: arrow ? 2 : 0, - }, '& .MuiPopper-arrow': { top: 0, left: 0, @@ -40,9 +37,6 @@ const Popper = styled(MuiPopper, { }, }, '&[data-popper-placement*="top"]': { - '& > div': { - marginBottom: arrow ? 2 : 0, - }, '& .MuiPopper-arrow': { bottom: 0, left: 0, @@ -56,9 +50,6 @@ const Popper = styled(MuiPopper, { }, }, '&[data-popper-placement*="right"]': { - '& > div': { - marginLeft: arrow ? 2 : 0, - }, '& .MuiPopper-arrow': { left: 0, marginLeft: '-0.9em', @@ -71,9 +62,6 @@ const Popper = styled(MuiPopper, { }, }, '&[data-popper-placement*="left"]': { - '& > div': { - marginRight: arrow ? 2 : 0, - }, '& .MuiPopper-arrow': { right: 0, marginRight: '-0.9em', @@ -85,6 +73,88 @@ const Popper = styled(MuiPopper, { }, }, }, + variants: [ + { + props: ({ arrow }) => arrow, + style: { + '&[data-popper-placement*="bottom"]': { + '& > div': { + marginTop: 2, + }, + }, + }, + }, + { + props: ({ arrow }) => !arrow, + style: { + '&[data-popper-placement*="bottom"]': { + '& > div': { + marginTop: 0, + }, + }, + }, + }, + { + props: ({ arrow }) => arrow, + style: { + '&[data-popper-placement*="top"]': { + '& > div': { + marginBottom: 2, + }, + }, + }, + }, + { + props: ({ arrow }) => !arrow, + style: { + '&[data-popper-placement*="top"]': { + '& > div': { + marginBottom: 0, + }, + }, + }, + }, + { + props: ({ arrow }) => arrow, + style: { + '&[data-popper-placement*="right"]': { + '& > div': { + marginLeft: 2, + }, + }, + }, + }, + { + props: ({ arrow }) => !arrow, + style: { + '&[data-popper-placement*="right"]': { + '& > div': { + marginLeft: 0, + }, + }, + }, + }, + { + props: ({ arrow }) => arrow, + style: { + '&[data-popper-placement*="left"]': { + '& > div': { + marginRight: 2, + }, + }, + }, + }, + { + props: ({ arrow }) => !arrow, + style: { + '&[data-popper-placement*="left"]': { + '& > div': { + marginRight: 0, + }, + }, + }, + }, + ], })); const Arrow = styled('div')({ diff --git a/docs/data/material/components/progress/CustomizedProgressBars.js b/docs/data/material/components/progress/CustomizedProgressBars.js index eac7e41dce13a9..098440aa07acc3 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.js +++ b/docs/data/material/components/progress/CustomizedProgressBars.js @@ -11,11 +11,17 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: 10, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + backgroundColor: theme.palette.grey[200], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[800], + }), }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, - backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8', + backgroundColor: '#1a90ff', + ...theme.applyStyles('dark', { + backgroundColor: '#308fe8', + }), }, })); @@ -26,9 +32,9 @@ function FacebookCircularProgress(props) { ({ - color: theme.palette.grey[800], - ...theme.applyStyles('light', { - color: theme.palette.grey[200], + color: theme.palette.grey[200], + ...theme.applyStyles('dark', { + color: theme.palette.grey[800], }), })} size={40} @@ -40,15 +46,15 @@ function FacebookCircularProgress(props) { variant="indeterminate" disableShrink sx={(theme) => ({ - color: '#308fe8', + color: '#1a90ff', animationDuration: '550ms', position: 'absolute', left: 0, [`& .${circularProgressClasses.circle}`]: { strokeLinecap: 'round', }, - ...theme.applyStyles('light', { - color: '#1a90ff', + ...theme.applyStyles('dark', { + color: '#308fe8', }), })} size={40} diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx b/docs/data/material/components/progress/CustomizedProgressBars.tsx index fe5d1d69f9b338..b1f76bb1c8be68 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.tsx +++ b/docs/data/material/components/progress/CustomizedProgressBars.tsx @@ -12,11 +12,17 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: 10, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + backgroundColor: theme.palette.grey[200], + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[800], + }), }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, - backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8', + backgroundColor: '#1a90ff', + ...theme.applyStyles('dark', { + backgroundColor: '#308fe8', + }), }, })); @@ -27,9 +33,9 @@ function FacebookCircularProgress(props: CircularProgressProps) { ({ - color: theme.palette.grey[800], - ...theme.applyStyles('light', { - color: theme.palette.grey[200], + color: theme.palette.grey[200], + ...theme.applyStyles('dark', { + color: theme.palette.grey[800], }), })} size={40} @@ -41,15 +47,15 @@ function FacebookCircularProgress(props: CircularProgressProps) { variant="indeterminate" disableShrink sx={(theme) => ({ - color: '#308fe8', + color: '#1a90ff', animationDuration: '550ms', position: 'absolute', left: 0, [`& .${circularProgressClasses.circle}`]: { strokeLinecap: 'round', }, - ...theme.applyStyles('light', { - color: '#1a90ff', + ...theme.applyStyles('dark', { + color: '#308fe8', }), })} size={40} diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js index 4a1e5135fc362b..a04d84ac49cbd9 100644 --- a/docs/data/material/components/radio-buttons/CustomizedRadios.js +++ b/docs/data/material/components/radio-buttons/CustomizedRadios.js @@ -10,27 +10,31 @@ const BpIcon = styled('span')(({ theme }) => ({ borderRadius: '50%', width: 16, height: 16, - boxShadow: - theme.palette.mode === 'dark' - ? '0 0 0 1px rgb(16 22 26 / 40%)' - : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa', - backgroundImage: - theme.palette.mode === 'dark' - ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' - : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, }, 'input:hover ~ &': { - backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5', + backgroundColor: '#ebf1f5', + ...theme.applyStyles('dark', { + backgroundColor: '#30404d', + }), }, 'input:disabled ~ &': { boxShadow: 'none', - background: - theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)', + background: 'rgba(206,217,224,.5)', + ...theme.applyStyles('dark', { + background: 'rgba(57,75,89,.5)', + }), }, + ...theme.applyStyles('dark', { + boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', + backgroundColor: '#394b59', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', + }), })); const BpCheckedIcon = styled(BpIcon)({ diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx index 205029e6993c16..8f452fb9a3afc7 100644 --- a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx +++ b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx @@ -10,27 +10,31 @@ const BpIcon = styled('span')(({ theme }) => ({ borderRadius: '50%', width: 16, height: 16, - boxShadow: - theme.palette.mode === 'dark' - ? '0 0 0 1px rgb(16 22 26 / 40%)' - : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa', - backgroundImage: - theme.palette.mode === 'dark' - ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))' - : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', + boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', + backgroundColor: '#f5f8fa', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', '.Mui-focusVisible &': { outline: '2px auto rgba(19,124,189,.6)', outlineOffset: 2, }, 'input:hover ~ &': { - backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5', + backgroundColor: '#ebf1f5', + ...theme.applyStyles('dark', { + backgroundColor: '#30404d', + }), }, 'input:disabled ~ &': { boxShadow: 'none', - background: - theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)', + background: 'rgba(206,217,224,.5)', + ...theme.applyStyles('dark', { + background: 'rgba(57,75,89,.5)', + }), }, + ...theme.applyStyles('dark', { + boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', + backgroundColor: '#394b59', + backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', + }), })); const BpCheckedIcon = styled(BpIcon)({ diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.js b/docs/data/material/components/radio-buttons/UseRadioGroup.js index 3265cb285ddf25..8802e76dcda505 100644 --- a/docs/data/material/components/radio-buttons/UseRadioGroup.js +++ b/docs/data/material/components/radio-buttons/UseRadioGroup.js @@ -6,10 +6,17 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; const StyledFormControlLabel = styled((props) => )( - ({ theme, checked }) => ({ - '.MuiFormControlLabel-label': checked && { - color: theme.palette.primary.main, - }, + ({ theme }) => ({ + variants: [ + { + props: { checked: true }, + style: { + '.MuiFormControlLabel-label': { + color: theme.palette.primary.main, + }, + }, + }, + ], }), ); diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx b/docs/data/material/components/radio-buttons/UseRadioGroup.tsx index db5acee780e941..0c2aeb09fb8e37 100644 --- a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx +++ b/docs/data/material/components/radio-buttons/UseRadioGroup.tsx @@ -12,10 +12,17 @@ interface StyledFormControlLabelProps extends FormControlLabelProps { const StyledFormControlLabel = styled((props: StyledFormControlLabelProps) => ( -))(({ theme, checked }) => ({ - '.MuiFormControlLabel-label': checked && { - color: theme.palette.primary.main, - }, +))(({ theme }) => ({ + variants: [ + { + props: { checked: true }, + style: { + '.MuiFormControlLabel-label': { + color: theme.palette.primary.main, + }, + }, + }, + ], })); function MyFormControlLabel(props: FormControlLabelProps) { diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js index 01feaf10ec295b..aeff66ba526c48 100644 --- a/docs/data/material/components/slider/CustomizedSlider.js +++ b/docs/data/material/components/slider/CustomizedSlider.js @@ -25,7 +25,7 @@ const iOSBoxShadow = '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; const IOSSlider = styled(Slider)(({ theme }) => ({ - color: theme.palette.mode === 'dark' ? '#0a84ff' : '#007bff', + color: '#007bff', height: 5, padding: '15px 0', '& .MuiSlider-thumb': { @@ -56,7 +56,10 @@ const IOSSlider = styled(Slider)(({ theme }) => ({ }, '& *': { background: 'transparent', - color: theme.palette.mode === 'dark' ? '#fff' : '#000', + color: '#000', + ...theme.applyStyles('dark', { + color: '#fff', + }), }, }, '& .MuiSlider-track': { @@ -68,6 +71,9 @@ const IOSSlider = styled(Slider)(({ theme }) => ({ boxShadow: 'inset 0px 0px 4px -2px #000', backgroundColor: '#d0d0d0', }, + ...theme.applyStyles('dark', { + color: '#0a84ff', + }), })); const PrettoSlider = styled(Slider)({ @@ -133,9 +139,13 @@ const AirbnbSlider = styled(Slider)(({ theme }) => ({ height: 3, }, '& .MuiSlider-rail': { - color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8', - opacity: theme.palette.mode === 'dark' ? undefined : 1, + color: '#d8d8d8', + opacity: 1, height: 3, + ...theme.applyStyles('dark', { + color: '#bfbfbf', + opacity: undefined, + }), }, })); diff --git a/docs/data/material/components/slider/CustomizedSlider.tsx b/docs/data/material/components/slider/CustomizedSlider.tsx index dcdc7744c2af08..e0e788c8d6a89f 100644 --- a/docs/data/material/components/slider/CustomizedSlider.tsx +++ b/docs/data/material/components/slider/CustomizedSlider.tsx @@ -19,7 +19,7 @@ const iOSBoxShadow = '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; const IOSSlider = styled(Slider)(({ theme }) => ({ - color: theme.palette.mode === 'dark' ? '#0a84ff' : '#007bff', + color: '#007bff', height: 5, padding: '15px 0', '& .MuiSlider-thumb': { @@ -50,7 +50,10 @@ const IOSSlider = styled(Slider)(({ theme }) => ({ }, '& *': { background: 'transparent', - color: theme.palette.mode === 'dark' ? '#fff' : '#000', + color: '#000', + ...theme.applyStyles('dark', { + color: '#fff', + }), }, }, '& .MuiSlider-track': { @@ -62,6 +65,9 @@ const IOSSlider = styled(Slider)(({ theme }) => ({ boxShadow: 'inset 0px 0px 4px -2px #000', backgroundColor: '#d0d0d0', }, + ...theme.applyStyles('dark', { + color: '#0a84ff', + }), })); const PrettoSlider = styled(Slider)({ @@ -127,9 +133,13 @@ const AirbnbSlider = styled(Slider)(({ theme }) => ({ height: 3, }, '& .MuiSlider-rail': { - color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8', - opacity: theme.palette.mode === 'dark' ? undefined : 1, + color: '#d8d8d8', + opacity: 1, height: 3, + ...theme.applyStyles('dark', { + color: '#bfbfbf', + opacity: undefined, + }), }, })); diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js index 3c534c71e01760..eab91a2ced32e2 100644 --- a/docs/data/material/components/slider/MusicPlayerSlider.js +++ b/docs/data/material/components/slider/MusicPlayerSlider.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled, useTheme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; @@ -52,9 +52,11 @@ const Widget = styled('div')(({ theme }) => ({ margin: 'auto', position: 'relative', zIndex: 1, - backgroundColor: - theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)', + backgroundColor: 'rgba(255,255,255,0.4)', backdropFilter: 'blur(40px)', + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(0,0,0,0.6)', + }), })); const CoverImage = styled('div')({ @@ -78,7 +80,6 @@ const TinyText = styled(Typography)({ }); export default function MusicPlayerSlider() { - const theme = useTheme(); const duration = 200; // seconds const [position, setPosition] = React.useState(32); const [paused, setPaused] = React.useState(false); @@ -87,9 +88,6 @@ export default function MusicPlayerSlider() { const secondLeft = value - minute * 60; return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`; } - const mainIconColor = theme.palette.mode === 'dark' ? '#fff' : '#000'; - const lightIconColor = - theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)'; return ( @@ -164,39 +162,52 @@ export default function MusicPlayerSlider() { -{formatDuration(duration - position)} ({ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: -1, - }} + '& svg': { + color: '#000', + ...theme.applyStyles('dark', { + color: '#fff', + }), + }, + })} > - + setPaused(!paused)} > {paused ? ( - + ) : ( - + )} - + ({ + mb: 1, + px: 1, + '& > svg': { + color: 'rgba(0,0,0,0.4)', + ...theme.applyStyles('dark', { + color: 'rgba(255,255,255,0.4)', + }), + }, + })} + alignItems="center" > - + - + diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/MusicPlayerSlider.tsx index 73aa3fe2ea2634..7a5eae94c048eb 100644 --- a/docs/data/material/components/slider/MusicPlayerSlider.tsx +++ b/docs/data/material/components/slider/MusicPlayerSlider.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled, useTheme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; @@ -52,9 +52,11 @@ const Widget = styled('div')(({ theme }) => ({ margin: 'auto', position: 'relative', zIndex: 1, - backgroundColor: - theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.4)', + backgroundColor: 'rgba(255,255,255,0.4)', backdropFilter: 'blur(40px)', + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(0,0,0,0.6)', + }), })); const CoverImage = styled('div')({ @@ -78,7 +80,6 @@ const TinyText = styled(Typography)({ }); export default function MusicPlayerSlider() { - const theme = useTheme(); const duration = 200; // seconds const [position, setPosition] = React.useState(32); const [paused, setPaused] = React.useState(false); @@ -87,9 +88,6 @@ export default function MusicPlayerSlider() { const secondLeft = value - minute * 60; return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`; } - const mainIconColor = theme.palette.mode === 'dark' ? '#fff' : '#000'; - const lightIconColor = - theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)'; return ( @@ -164,39 +162,52 @@ export default function MusicPlayerSlider() { -{formatDuration(duration - position)} ({ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: -1, - }} + '& svg': { + color: '#000', + ...theme.applyStyles('dark', { + color: '#fff', + }), + }, + })} > - + setPaused(!paused)} > {paused ? ( - + ) : ( - + )} - + ({ + mb: 1, + px: 1, + '& > svg': { + color: 'rgba(0,0,0,0.4)', + ...theme.applyStyles('dark', { + color: 'rgba(255,255,255,0.4)', + }), + }, + })} + alignItems="center" > - + - + diff --git a/docs/data/material/components/stack/BasicStack.js b/docs/data/material/components/stack/BasicStack.js index 6061e30ed1eeea..386799c75d9885 100644 --- a/docs/data/material/components/stack/BasicStack.js +++ b/docs/data/material/components/stack/BasicStack.js @@ -5,11 +5,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicStack() { diff --git a/docs/data/material/components/stack/BasicStack.tsx b/docs/data/material/components/stack/BasicStack.tsx index 6061e30ed1eeea..386799c75d9885 100644 --- a/docs/data/material/components/stack/BasicStack.tsx +++ b/docs/data/material/components/stack/BasicStack.tsx @@ -5,11 +5,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function BasicStack() { diff --git a/docs/data/material/components/stack/DirectionStack.js b/docs/data/material/components/stack/DirectionStack.js index eaf9bd2f3be9ce..96a99cec85e3be 100644 --- a/docs/data/material/components/stack/DirectionStack.js +++ b/docs/data/material/components/stack/DirectionStack.js @@ -4,11 +4,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function DirectionStack() { diff --git a/docs/data/material/components/stack/DirectionStack.tsx b/docs/data/material/components/stack/DirectionStack.tsx index eaf9bd2f3be9ce..96a99cec85e3be 100644 --- a/docs/data/material/components/stack/DirectionStack.tsx +++ b/docs/data/material/components/stack/DirectionStack.tsx @@ -4,11 +4,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function DirectionStack() { diff --git a/docs/data/material/components/stack/DividerStack.js b/docs/data/material/components/stack/DividerStack.js index 477aad19008285..d4102eb3f792fc 100644 --- a/docs/data/material/components/stack/DividerStack.js +++ b/docs/data/material/components/stack/DividerStack.js @@ -5,11 +5,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function DividerStack() { diff --git a/docs/data/material/components/stack/DividerStack.tsx b/docs/data/material/components/stack/DividerStack.tsx index 477aad19008285..d4102eb3f792fc 100644 --- a/docs/data/material/components/stack/DividerStack.tsx +++ b/docs/data/material/components/stack/DividerStack.tsx @@ -5,11 +5,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function DividerStack() { diff --git a/docs/data/material/components/stack/FlexboxGapStack.js b/docs/data/material/components/stack/FlexboxGapStack.js index 3b5fdb8f0bfba1..2b3635ed5643ec 100644 --- a/docs/data/material/components/stack/FlexboxGapStack.js +++ b/docs/data/material/components/stack/FlexboxGapStack.js @@ -5,12 +5,15 @@ import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, flexGrow: 1, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FlexboxGapStack() { diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx b/docs/data/material/components/stack/FlexboxGapStack.tsx index 3b5fdb8f0bfba1..2b3635ed5643ec 100644 --- a/docs/data/material/components/stack/FlexboxGapStack.tsx +++ b/docs/data/material/components/stack/FlexboxGapStack.tsx @@ -5,12 +5,15 @@ import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, flexGrow: 1, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function FlexboxGapStack() { diff --git a/docs/data/material/components/stack/ResponsiveStack.js b/docs/data/material/components/stack/ResponsiveStack.js index 3f2db670972a4b..a2461ff6cfaa31 100644 --- a/docs/data/material/components/stack/ResponsiveStack.js +++ b/docs/data/material/components/stack/ResponsiveStack.js @@ -4,11 +4,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveStack() { diff --git a/docs/data/material/components/stack/ResponsiveStack.tsx b/docs/data/material/components/stack/ResponsiveStack.tsx index 3f2db670972a4b..a2461ff6cfaa31 100644 --- a/docs/data/material/components/stack/ResponsiveStack.tsx +++ b/docs/data/material/components/stack/ResponsiveStack.tsx @@ -4,11 +4,14 @@ import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); export default function ResponsiveStack() { diff --git a/docs/data/material/components/stack/ZeroWidthStack.js b/docs/data/material/components/stack/ZeroWidthStack.js index 979362d2753a62..858beb3ebf3b7b 100644 --- a/docs/data/material/components/stack/ZeroWidthStack.js +++ b/docs/data/material/components/stack/ZeroWidthStack.js @@ -7,12 +7,15 @@ import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, maxWidth: 400, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx b/docs/data/material/components/stack/ZeroWidthStack.tsx index 979362d2753a62..858beb3ebf3b7b 100644 --- a/docs/data/material/components/stack/ZeroWidthStack.tsx +++ b/docs/data/material/components/stack/ZeroWidthStack.tsx @@ -7,12 +7,15 @@ import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', + backgroundColor: '#fff', ...theme.typography.body2, padding: theme.spacing(1), textAlign: 'center', color: theme.palette.text.secondary, maxWidth: 400, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), })); const message = `Truncation should be conditionally applicable on this long line of text diff --git a/docs/data/material/components/steppers/CustomizedSteppers.js b/docs/data/material/components/steppers/CustomizedSteppers.js index a13d9b33a06d0a..e92c82880e0e05 100644 --- a/docs/data/material/components/steppers/CustomizedSteppers.js +++ b/docs/data/material/components/steppers/CustomizedSteppers.js @@ -28,20 +28,20 @@ const QontoConnector = styled(StepConnector)(({ theme }) => ({ }, }, [`& .${stepConnectorClasses.line}`]: { - borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + borderColor: '#eaeaf0', borderTopWidth: 3, borderRadius: 1, + ...theme.applyStyles('dark', { + borderColor: theme.palette.grey[800], + }), }, })); -const QontoStepIconRoot = styled('div')(({ theme, ownerState }) => ({ - color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0', +const QontoStepIconRoot = styled('div')(({ theme }) => ({ + color: '#eaeaf0', display: 'flex', height: 22, alignItems: 'center', - ...(ownerState.active && { - color: '#784af4', - }), '& .QontoStepIcon-completedIcon': { color: '#784af4', zIndex: 1, @@ -53,6 +53,17 @@ const QontoStepIconRoot = styled('div')(({ theme, ownerState }) => ({ borderRadius: '50%', backgroundColor: 'currentColor', }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[700], + }), + variants: [ + { + props: ({ ownerState }) => ownerState.active, + style: { + color: '#784af4', + }, + }, + ], })); function QontoStepIcon(props) { @@ -102,14 +113,16 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ [`& .${stepConnectorClasses.line}`]: { height: 3, border: 0, - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + backgroundColor: '#eaeaf0', borderRadius: 1, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[800], + }), }, })); -const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc', +const ColorlibStepIconRoot = styled('div')(({ theme }) => ({ + backgroundColor: '#ccc', zIndex: 1, color: '#fff', width: 50, @@ -118,15 +131,26 @@ const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({ borderRadius: '50%', justifyContent: 'center', alignItems: 'center', - ...(ownerState.active && { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', - boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', - }), - ...(ownerState.completed && { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[700], }), + variants: [ + { + props: ({ ownerState }) => ownerState.active, + style: { + backgroundImage: + 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', + }, + }, + { + props: ({ ownerState }) => ownerState.completed, + style: { + backgroundImage: + 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + }, + }, + ], })); function ColorlibStepIcon(props) { diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx b/docs/data/material/components/steppers/CustomizedSteppers.tsx index 3a4c2e7ddf879c..64d482102e4d60 100644 --- a/docs/data/material/components/steppers/CustomizedSteppers.tsx +++ b/docs/data/material/components/steppers/CustomizedSteppers.tsx @@ -28,21 +28,21 @@ const QontoConnector = styled(StepConnector)(({ theme }) => ({ }, }, [`& .${stepConnectorClasses.line}`]: { - borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + borderColor: '#eaeaf0', borderTopWidth: 3, borderRadius: 1, + ...theme.applyStyles('dark', { + borderColor: theme.palette.grey[800], + }), }, })); const QontoStepIconRoot = styled('div')<{ ownerState: { active?: boolean } }>( - ({ theme, ownerState }) => ({ - color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0', + ({ theme }) => ({ + color: '#eaeaf0', display: 'flex', height: 22, alignItems: 'center', - ...(ownerState.active && { - color: '#784af4', - }), '& .QontoStepIcon-completedIcon': { color: '#784af4', zIndex: 1, @@ -54,6 +54,17 @@ const QontoStepIconRoot = styled('div')<{ ownerState: { active?: boolean } }>( borderRadius: '50%', backgroundColor: 'currentColor', }, + ...theme.applyStyles('dark', { + color: theme.palette.grey[700], + }), + variants: [ + { + props: ({ ownerState }) => ownerState.active, + style: { + color: '#784af4', + }, + }, + ], }), ); @@ -90,16 +101,18 @@ const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ [`& .${stepConnectorClasses.line}`]: { height: 3, border: 0, - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + backgroundColor: '#eaeaf0', borderRadius: 1, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[800], + }), }, })); const ColorlibStepIconRoot = styled('div')<{ ownerState: { completed?: boolean; active?: boolean }; -}>(({ theme, ownerState }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc', +}>(({ theme }) => ({ + backgroundColor: '#ccc', zIndex: 1, color: '#fff', width: 50, @@ -108,15 +121,26 @@ const ColorlibStepIconRoot = styled('div')<{ borderRadius: '50%', justifyContent: 'center', alignItems: 'center', - ...(ownerState.active && { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', - boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', - }), - ...(ownerState.completed && { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.grey[700], }), + variants: [ + { + props: ({ ownerState }) => ownerState.active, + style: { + backgroundImage: + 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', + }, + }, + { + props: ({ ownerState }) => ownerState.completed, + style: { + backgroundImage: + 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', + }, + }, + ], })); function ColorlibStepIcon(props: StepIconProps) { diff --git a/docs/data/material/components/switches/CustomizedSwitches.js b/docs/data/material/components/switches/CustomizedSwitches.js index f78df42589a044..4758deb6d7d96e 100644 --- a/docs/data/material/components/switches/CustomizedSwitches.js +++ b/docs/data/material/components/switches/CustomizedSwitches.js @@ -24,12 +24,15 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({ }, '& + .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + backgroundColor: '#aab4be', + ...theme.applyStyles('dark', { + backgroundColor: '#8796A5', + }), }, }, }, '& .MuiSwitch-thumb': { - backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c', + backgroundColor: '#001e3c', width: 32, height: 32, '&::before': { @@ -45,11 +48,17 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({ '#fff', )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/>')`, }, + ...theme.applyStyles('dark', { + backgroundColor: '#003892', + }), }, '& .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + backgroundColor: '#aab4be', borderRadius: 20 / 2, + ...theme.applyStyles('dark', { + backgroundColor: '#8796A5', + }), }, })); @@ -100,9 +109,12 @@ const IOSSwitch = styled((props) => ( transform: 'translateX(16px)', color: '#fff', '& + .MuiSwitch-track': { - backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466', + backgroundColor: '#65C466', opacity: 1, border: 0, + ...theme.applyStyles('dark', { + backgroundColor: '#2ECA45', + }), }, '&.Mui-disabled + .MuiSwitch-track': { opacity: 0.5, @@ -113,13 +125,16 @@ const IOSSwitch = styled((props) => ( border: '6px solid #fff', }, '&.Mui-disabled .MuiSwitch-thumb': { - color: - theme.palette.mode === 'light' - ? theme.palette.grey[100] - : theme.palette.grey[600], + color: theme.palette.grey[100], + ...theme.applyStyles('dark', { + color: theme.palette.grey[600], + }), }, '&.Mui-disabled + .MuiSwitch-track': { - opacity: theme.palette.mode === 'light' ? 0.7 : 0.3, + opacity: 0.7, + ...theme.applyStyles('dark', { + opacity: 0.3, + }), }, }, '& .MuiSwitch-thumb': { @@ -129,11 +144,14 @@ const IOSSwitch = styled((props) => ( }, '& .MuiSwitch-track': { borderRadius: 26 / 2, - backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D', + backgroundColor: '#E9E9EA', opacity: 1, transition: theme.transitions.create(['background-color'], { duration: 500, }), + ...theme.applyStyles('dark', { + backgroundColor: '#39393D', + }), }, })); @@ -157,7 +175,10 @@ const AntSwitch = styled(Switch)(({ theme }) => ({ color: '#fff', '& + .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff', + backgroundColor: '#1890ff', + ...theme.applyStyles('dark', { + backgroundColor: '#177ddc', + }), }, }, }, @@ -173,9 +194,11 @@ const AntSwitch = styled(Switch)(({ theme }) => ({ '& .MuiSwitch-track': { borderRadius: 16 / 2, opacity: 1, - backgroundColor: - theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)', + backgroundColor: 'rgba(0,0,0,.25)', boxSizing: 'border-box', + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(255,255,255,.35)', + }), }, })); diff --git a/docs/data/material/components/switches/CustomizedSwitches.tsx b/docs/data/material/components/switches/CustomizedSwitches.tsx index fd992393034bb0..2720f61457994b 100644 --- a/docs/data/material/components/switches/CustomizedSwitches.tsx +++ b/docs/data/material/components/switches/CustomizedSwitches.tsx @@ -24,12 +24,15 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({ }, '& + .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + backgroundColor: '#aab4be', + ...theme.applyStyles('dark', { + backgroundColor: '#8796A5', + }), }, }, }, '& .MuiSwitch-thumb': { - backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c', + backgroundColor: '#001e3c', width: 32, height: 32, '&::before': { @@ -45,11 +48,17 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({ '#fff', )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/>')`, }, + ...theme.applyStyles('dark', { + backgroundColor: '#003892', + }), }, '& .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', + backgroundColor: '#aab4be', borderRadius: 20 / 2, + ...theme.applyStyles('dark', { + backgroundColor: '#8796A5', + }), }, })); @@ -100,9 +109,12 @@ const IOSSwitch = styled((props: SwitchProps) => ( transform: 'translateX(16px)', color: '#fff', '& + .MuiSwitch-track': { - backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466', + backgroundColor: '#65C466', opacity: 1, border: 0, + ...theme.applyStyles('dark', { + backgroundColor: '#2ECA45', + }), }, '&.Mui-disabled + .MuiSwitch-track': { opacity: 0.5, @@ -113,13 +125,16 @@ const IOSSwitch = styled((props: SwitchProps) => ( border: '6px solid #fff', }, '&.Mui-disabled .MuiSwitch-thumb': { - color: - theme.palette.mode === 'light' - ? theme.palette.grey[100] - : theme.palette.grey[600], + color: theme.palette.grey[100], + ...theme.applyStyles('dark', { + color: theme.palette.grey[600], + }), }, '&.Mui-disabled + .MuiSwitch-track': { - opacity: theme.palette.mode === 'light' ? 0.7 : 0.3, + opacity: 0.7, + ...theme.applyStyles('dark', { + opacity: 0.3, + }), }, }, '& .MuiSwitch-thumb': { @@ -129,11 +144,14 @@ const IOSSwitch = styled((props: SwitchProps) => ( }, '& .MuiSwitch-track': { borderRadius: 26 / 2, - backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D', + backgroundColor: '#E9E9EA', opacity: 1, transition: theme.transitions.create(['background-color'], { duration: 500, }), + ...theme.applyStyles('dark', { + backgroundColor: '#39393D', + }), }, })); @@ -157,7 +175,10 @@ const AntSwitch = styled(Switch)(({ theme }) => ({ color: '#fff', '& + .MuiSwitch-track': { opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#177ddc' : '#1890ff', + backgroundColor: '#1890ff', + ...theme.applyStyles('dark', { + backgroundColor: '#177ddc', + }), }, }, }, @@ -173,9 +194,11 @@ const AntSwitch = styled(Switch)(({ theme }) => ({ '& .MuiSwitch-track': { borderRadius: 16 / 2, opacity: 1, - backgroundColor: - theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)', + backgroundColor: 'rgba(0,0,0,.25)', boxSizing: 'border-box', + ...theme.applyStyles('dark', { + backgroundColor: 'rgba(255,255,255,.35)', + }), }, })); diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js index b1e58cd9849dba..f8b4ed9d94323c 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js @@ -33,9 +33,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ '& .MuiInputBase-input': { borderRadius: 4, position: 'relative', - backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + backgroundColor: '#F3F6F9', border: '1px solid', - borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', + borderColor: '#E0E3E7', fontSize: 16, width: 'auto', padding: '10px 12px', @@ -61,6 +61,10 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`, borderColor: theme.palette.primary.main, }, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + borderColor: '#2D3843', + }), }, })); @@ -75,9 +79,9 @@ const RedditTextField = styled((props) => ( '& .MuiFilledInput-root': { overflow: 'hidden', borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', border: '1px solid', - borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', + backgroundColor: '#F3F6F9', + borderColor: '#E0E3E7', transition: theme.transitions.create([ 'border-color', 'background-color', @@ -91,6 +95,10 @@ const RedditTextField = styled((props) => ( boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`, borderColor: theme.palette.primary.main, }, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + borderColor: '#2D3843', + }), }, })); diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx index 45490353f44182..1327d29974ce59 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx @@ -34,9 +34,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ '& .MuiInputBase-input': { borderRadius: 4, position: 'relative', - backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + backgroundColor: '#F3F6F9', border: '1px solid', - borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', + borderColor: '#E0E3E7', fontSize: 16, width: 'auto', padding: '10px 12px', @@ -62,6 +62,10 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`, borderColor: theme.palette.primary.main, }, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + borderColor: '#2D3843', + }), }, })); @@ -76,9 +80,9 @@ const RedditTextField = styled((props: TextFieldProps) => ( '& .MuiFilledInput-root': { overflow: 'hidden', borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', border: '1px solid', - borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', + backgroundColor: '#F3F6F9', + borderColor: '#E0E3E7', transition: theme.transitions.create([ 'border-color', 'background-color', @@ -92,6 +96,10 @@ const RedditTextField = styled((props: TextFieldProps) => ( boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`, borderColor: theme.palette.primary.main, }, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + borderColor: '#2D3843', + }), }, })); diff --git a/docs/data/material/components/text-fields/LayoutTextFields.js b/docs/data/material/components/text-fields/LayoutTextFields.js index e99247b19e34c4..c9dabd707d31fd 100644 --- a/docs/data/material/components/text-fields/LayoutTextFields.js +++ b/docs/data/material/components/text-fields/LayoutTextFields.js @@ -7,9 +7,9 @@ function RedBar() { ({ height: 20, - backgroundColor: 'rgb(255 132 132 / 25%)', - ...theme.applyStyles('light', { - backgroundColor: 'rgba(255, 0, 0, 0.1)', + backgroundColor: 'rgba(255, 0, 0, 0.1)', + ...theme.applyStyles('dark', { + backgroundColor: 'rgb(255 132 132 / 25%)', }), })} /> diff --git a/docs/data/material/components/text-fields/LayoutTextFields.tsx b/docs/data/material/components/text-fields/LayoutTextFields.tsx index e99247b19e34c4..c9dabd707d31fd 100644 --- a/docs/data/material/components/text-fields/LayoutTextFields.tsx +++ b/docs/data/material/components/text-fields/LayoutTextFields.tsx @@ -7,9 +7,9 @@ function RedBar() { ({ height: 20, - backgroundColor: 'rgb(255 132 132 / 25%)', - ...theme.applyStyles('light', { - backgroundColor: 'rgba(255, 0, 0, 0.1)', + backgroundColor: 'rgba(255, 0, 0, 0.1)', + ...theme.applyStyles('dark', { + backgroundColor: 'rgb(255 132 132 / 25%)', }), })} /> diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js index 2745763d7be5d2..c95e158e8a1325 100644 --- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js +++ b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js @@ -6,7 +6,7 @@ import { styled, useThemeProps } from '@mui/material/styles'; const StatRoot = styled('div', { name: 'MuiStat', slot: 'root', -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5), @@ -16,10 +16,17 @@ const StatRoot = styled('div', { boxShadow: theme.shadows[2], letterSpacing: '-0.025em', fontWeight: 600, - ...(ownerState.variant === 'outlined' && { - border: `2px solid ${theme.palette.divider}`, - boxShadow: 'none', - }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }, + }, + ], })); const StatValue = styled('div', { diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx index 34fad6fa9af7b3..44c4169b9bb2d0 100644 --- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx +++ b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx @@ -16,7 +16,7 @@ interface StatOwnerState extends StatProps { const StatRoot = styled('div', { name: 'MuiStat', slot: 'root', -})<{ ownerState: StatOwnerState }>(({ theme, ownerState }) => ({ +})<{ ownerState: StatOwnerState }>(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(0.5), @@ -26,10 +26,17 @@ const StatRoot = styled('div', { boxShadow: theme.shadows[2], letterSpacing: '-0.025em', fontWeight: 600, - ...(ownerState.variant === 'outlined' && { - border: `2px solid ${theme.palette.divider}`, - boxShadow: 'none', - }), + variants: [ + { + props: { + variant: 'outlined', + }, + style: { + border: `2px solid ${theme.palette.divider}`, + boxShadow: 'none', + }, + }, + ], })); const StatValue = styled('div', { diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md index b38d98fe1bfcfe..2a805d555b74b2 100644 --- a/docs/data/material/customization/dark-mode/dark-mode.md +++ b/docs/data/material/customization/dark-mode/dark-mode.md @@ -146,3 +146,89 @@ function App() { ); } ``` + +## Styling in dark mode + +Use the `theme.applyStyles` utility to apply styles for a specific mode. + +We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits: + +- It works with or without `CssVarsProvider`. The function automatically switches between overriding object styles or injecting pseudo-classes based on the upper provider. +- It lets you prevent [dark-mode SSR flickering](https://github.com/mui/material-ui/issues/27651) when using with `CssVarsProvider`. +- It can be used with [Pigment CSS](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react), our in-house zero-runtime CSS-in-JS solution. +- It is generally more readable and maintainable. +- It is slightly more performant as it doesn't require to do style recalculation but the bundle size of SSR generated styles is larger. + +### Usage + +With the `**styled**` function: + +```jsx +import { styled } from '@mui/material/styles'; + +const MyComponent = styled('div')(({ theme }) => ({ + color: '#fff', + backgroundColor: theme.palette.primary.main, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.secondary.main, + }), + '&:hover': { + boxShadow: theme.shadows[3], + backgroundColor: theme.palette.primary.dark, + ...theme.applyStyles('dark', { + backgroundColor: theme.palette.secondary.dark, + }), + }, +})); +``` + +With the `**sx**` prop: + +```jsx +import Button from '@mui/material/Button'; + +; +``` + +### Codemod + +We provide codemods to migrate your codebase from using `theme.palette.mode` to use `theme.applyStyles()`. +You can run each codemod below or all of them at once. + +```bash +npx @mui/codemod@next v6.0.0/styled +npx @mui/codemod@next v6.0.0/sx-prop +npx @mui/codemod@next v6.0.0/theme-v6 +``` + +> Run `v6.0.0/theme-v6` against the file that contains the custom `styleOverrides`. Ignore this codemod if you don't have a custom theme. + +### API + +`theme.applyStyles(mode, styles) => CSSObject` + +Apply styles for a specific mode. + +#### Arguments + +- `mode` (`'light' | 'dark'`) - The mode for which the styles should be applied. +- `styles` (`CSSObject`) - An object which contains the styles to be applied for the specified mode. diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.js b/docs/data/material/customization/how-to-customize/DynamicCSS.js index b8eaa2ac65b47d..bc7b3e3ed3a639 100644 --- a/docs/data/material/customization/how-to-customize/DynamicCSS.js +++ b/docs/data/material/customization/how-to-customize/DynamicCSS.js @@ -6,19 +6,24 @@ import Switch from '@mui/material/Switch'; const StyledSlider = styled(Slider, { shouldForwardProp: (prop) => prop !== 'success', -})(({ success, theme }) => ({ +})(({ theme }) => ({ width: 300, - ...(success && { - color: theme.palette.success.main, - '& .MuiSlider-thumb': { - [`&:hover, &.Mui-focusVisible`]: { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, - }, - [`&.Mui-active`]: { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, + variants: [ + { + props: ({ success }) => success, + style: { + color: theme.palette.success.main, + '& .MuiSlider-thumb': { + [`&:hover, &.Mui-focusVisible`]: { + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, + }, + [`&.Mui-active`]: { + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, + }, + }, }, }, - }), + ], })); export default function DynamicCSS() { diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx b/docs/data/material/customization/how-to-customize/DynamicCSS.tsx index 60c86d70e55afe..5e399164e84e0e 100644 --- a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx +++ b/docs/data/material/customization/how-to-customize/DynamicCSS.tsx @@ -10,19 +10,24 @@ interface StyledSliderProps extends SliderProps { const StyledSlider = styled(Slider, { shouldForwardProp: (prop) => prop !== 'success', -})(({ success, theme }) => ({ +})(({ theme }) => ({ width: 300, - ...(success && { - color: theme.palette.success.main, - '& .MuiSlider-thumb': { - [`&:hover, &.Mui-focusVisible`]: { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, - }, - [`&.Mui-active`]: { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, + variants: [ + { + props: ({ success }) => success, + style: { + color: theme.palette.success.main, + '& .MuiSlider-thumb': { + [`&:hover, &.Mui-focusVisible`]: { + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, + }, + [`&.Mui-active`]: { + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, + }, + }, }, }, - }), + ], })); export default function DynamicCSS() { diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js index a1dde807cc970c..e5d4c939cea85a 100644 --- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js +++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.js @@ -19,7 +19,10 @@ function MainFeaturedPost(props) { backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', - backgroundImage: `url(${post.image})`, + backgroundImage: `url(${'var(--post-image)'})`, + }} + style={{ + '--post-image': post.image, }} > {/* Increase the priority of the hero background image */} diff --git a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx index f1462851e5bab5..100ac773fae832 100644 --- a/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx +++ b/docs/data/material/getting-started/templates/blog/MainFeaturedPost.tsx @@ -28,8 +28,13 @@ export default function MainFeaturedPost(props: MainFeaturedPostProps) { backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', - backgroundImage: `url(${post.image})`, + backgroundImage: `url(${'var(--post-image)'})`, }} + style={ + { + '--post-image': post.image, + } as any + } > {/* Increase the priority of the hero background image */} {{post.imageText}} diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index 0cbd636247b59b..03d9dd649634f3 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -74,7 +74,6 @@ ToggleCustomTheme.propTypes = { }; const steps = ['Shipping address', 'Payment details', 'Review your order']; - function getStepContent(step) { switch (step) { case 0: @@ -87,30 +86,24 @@ function getStepContent(step) { throw new Error('Unknown step'); } } - export default function Checkout() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); const checkoutTheme = createTheme(getCheckoutTheme(mode)); const defaultTheme = createTheme({ palette: { mode } }); const [activeStep, setActiveStep] = React.useState(0); - const toggleColorMode = () => { setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); }; - const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); }; - const handleNext = () => { setActiveStep(activeStep + 1); }; - const handleBack = () => { setActiveStep(activeStep - 1); }; - return ( @@ -302,17 +295,21 @@ export default function Checkout() { {getStepContent(activeStep)} {activeStep !== 0 && (
Nutrition of your favorite menus.